/* Home — one pipeline under the ground (W1 B … W8 C). Every screen is a stage of its 1536 × 1024 mock-up: positions and sizes below are
   mock-up pixels (× --u), measured off codex/home-w (pairs: локально/tools/pair_home.py). One type scale comes after all pages are built.
   --x0 is the left edge of the 1536 px stage, so wider screens keep the stage centred while the soil runs edge to edge. */

.bp-home { position: relative; overflow: hidden; --x0: max(0px, calc((100% - 1536px) / 2)); --h1-h: calc(940 * var(--u) - 8px); }
.bp-home > section { position: relative; }
.bp-stage { height: calc(1024 * var(--u)); }
.bp-stage > * { position: absolute; margin: 0; }
/* the pipeline: one rendered picture per screen (tools/render_pipeline.py), 44 px taller at the top so it runs over the soil border */
.bp-pipes { left: var(--x0); top: calc(-44 * var(--u)); width: calc(1536 * var(--u)); max-width: none; height: auto; pointer-events: none; }   /* not cut by img { max-width: 100% } */

/* soil layers, direction C «light geological section»: a drawn band per screen (Codex textures c-*), the border to the layer above is a
   gentle wave with a hairline; two dark bands (bedrock, basalt) keep the light – dark rhythm */
[data-layer] { background-position: center top; background-size: 1536px auto; }
[data-layer="topsoil"] { background-image: url(../img/c-topsoil.webp); background-color: #F2EEE6; }
[data-layer="clay"]    { background-image: url(../img/c-clay.webp); background-color: #F1E6DA; }
[data-layer="sand"]    { background-image: url(../img/c-sand.webp); background-color: #F3EBDC; }
[data-layer="bedrock"] { background-image: url(../img/c-bedrock.webp); background-color: #1F2623; }
[data-layer="gravel"]  { background-image: url(../img/c-gravel.webp); background-color: #ECEAE4; }
[data-layer="granite"] { background-image: url(../img/c-granite.webp); background-color: #ECE7E0; }
[data-layer="basalt"]  { background-image: url(../img/c-basalt.webp); background-color: #141B17; }
.bp-home > [data-layer]:not([data-layer="surface"])::before {
	content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: -18px; height: 20px;
	background: inherit; background-position: center bottom;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12C180 4 330 16 520 10S880 3 1060 11 1380 15 1536 8V20H0z'/%3E%3C/svg%3E") left bottom / 1536px 20px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12C180 4 330 16 520 10S880 3 1060 11 1380 15 1536 8V20H0z'/%3E%3C/svg%3E") left bottom / 1536px 20px repeat-x;
}
.bp-home > [data-layer]:not([data-layer="surface"])::after {   /* the drawn line of the layer border, interrupted where the pipe crosses it */
	content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: -18px; height: 20px; pointer-events: none;
	-webkit-mask: linear-gradient(90deg, #000 calc(var(--x0) + 52 * var(--u)), transparent 0 calc(var(--x0) + 131 * var(--u)), #000 0 calc(var(--x0) + 1400 * var(--u)), transparent 0 calc(var(--x0) + 1480 * var(--u)), #000 0);
	mask: linear-gradient(90deg, #000 calc(var(--x0) + 52 * var(--u)), transparent 0 calc(var(--x0) + 131 * var(--u)), #000 0 calc(var(--x0) + 1400 * var(--u)), transparent 0 calc(var(--x0) + 1480 * var(--u)), #000 0);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12C180 4 330 16 520 10S880 3 1060 11 1380 15 1536 8' fill='none' stroke='%235B5245' stroke-opacity='.45' stroke-width='1.3'/%3E%3C/svg%3E") left top / 1536px 20px repeat-x;
}

/* phones only: a plain gutter pipe down the left (on wider screens the pipeline is drawn per screen, inc/pipes.php) */
.bp-pipe { display: none; position: absolute; z-index: 3; left: calc(var(--x0) + var(--gutter) - 15px); top: var(--h1-h); bottom: 0; width: 30px; pointer-events: none;
	background:
		repeating-linear-gradient(to bottom, transparent 0 283px, #4E5754 283px 284px, #B7BFBC 284px 286px, #E9EDEB 286px 292px, #8C9592 292px 299px, #4E5754 299px 300px),
		linear-gradient(90deg, transparent 12px, var(--c-lime) 12px 18px, transparent 18px),
		linear-gradient(90deg, #5E6764, #C9D0CD 30%, #F5F7F6 45%, #A4ACA9 70%, #565F5C); }

/* screen titles (direction C): a large condensed headline above the run of the pipe, the screen number at the end of the callout leader
   (drawn on the pipe picture), the layer name at the right edge */
.bp-ctitle { left: calc(var(--x0) + 200 * var(--u)); top: calc(var(--ty) * var(--u)); display: flex; align-items: center; gap: .28em; margin: 0;
	font: 800 var(--s-d2)/1 var(--f-pipe); letter-spacing: .01em; text-transform: uppercase; color: var(--c-forest); white-space: nowrap; }
.bp-dark .bp-ctitle { color: var(--c-lime); }
.bp-ctitle__arrow { width: .62em; height: auto; flex: none; }
.bp-ctitle--left .bp-ctitle__arrow { transform: scaleX(-1); }
.bp-cnum { left: calc(var(--x0) + 202 * var(--u)); top: calc(var(--ny) * var(--u)); margin: 0; font: 400 calc(15 * var(--u)) var(--f-mono); color: var(--c-ink); }
.bp-dark .bp-cnum { color: #C8D0CA; }
.bp-layer { right: calc(var(--x0) + 22 * var(--u)); top: calc(var(--ly, 300) * var(--u)); margin: 0; padding-bottom: 4px; border-bottom: 1px solid currentColor;
	font: 400 calc(13 * var(--u)) var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #6E6658; }
.bp-dark .bp-layer { color: #9AA59D; }

/* W1, direction C (light, owner 30.10): the launcher stands on the ground line of the paper section, the headline in condensed capitals */
.bp-h1 { height: var(--h1-h); padding: calc(96 * var(--u)) 0 0 calc(var(--x0) + 100 * var(--u)); background: #F7F5F0 url(../img/c-hero-side.webp) left top / auto calc(1024 * var(--u)) repeat-x; }
/* the picture keeps its top (paper and launcher), its bottom (the pipe going down) is cut by the screen — the line goes on in W2 */
.bp-h1 > picture img, .bp-h1__img { position: absolute; top: 0; left: var(--x0); width: calc(1536 * var(--u)); height: 100%; object-fit: cover; object-position: right top; z-index: 0; }
.bp-h1__text { position: relative; max-width: calc(880 * var(--u)); }
.bp-h1 h1 { font: 800 var(--s-d1)/.96 var(--f-pipe); letter-spacing: .005em; text-transform: uppercase; color: var(--c-forest); }
.bp-h1__lead { max-width: calc(600 * var(--u)); margin: calc(24 * var(--u)) 0 calc(30 * var(--u)); font-size: var(--s-lead); font-weight: 500; line-height: 1.42; color: var(--c-ink); }
.bp-h1__btns { display: flex; flex-wrap: wrap; gap: calc(18 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.bp-h1__btns .bp-btn { min-height: calc(60 * var(--u)); padding: 0 calc(36 * var(--u)); font-size: var(--s-btn-l); }
.bp-h1__btns .bp-btn--primary { background: var(--c-lime); color: var(--c-night); }
.bp-h1 .bp-facts { font-size: var(--s-mono); color: var(--c-ink); }
/* between the two flanges of the picture's pipe (x 232 … 668), exactly its height (y 606 … 668) */
.bp-h1__label { position: absolute !important; left: calc(var(--x0) + 232 * var(--u)); top: calc(606 * var(--u)); width: calc(436 * var(--u)); margin: 0;
	font: 700 calc(21 * var(--u))/1 var(--f-pipe); letter-spacing: .04em; text-transform: uppercase; }
/* the label is the painted part of the picture's horizontal pipe (axis y 637, 58 px): exactly the pipe's height, between its flanges,
   shaded round like the steel; no collars (they stood out of the pipe) */
.bp-h1__label .bp-plabel__band { display: flex; justify-content: center; height: calc(62 * var(--u)); padding: 0; color: #fff;
	background: linear-gradient(#0B3A21, #1C6A42 22%, #3A8A60 40%, #1F7047 58%, #11502F 82%, #0A311C); box-shadow: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.bp-h1__label .bp-plabel__band::before, .bp-h1__label .bp-plabel__band::after { display: none; }

/* W2: catalogue manifold and the three entrances */
.bp-h2 { --ty: 62; --ny: 20; --ly: 230; }
.bp-h2__ways { left: calc(var(--x0) + 165 * var(--u)); top: calc(330 * var(--u)); width: calc(1235 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(21 * var(--u)); }
.bp-way { display: flex; flex-direction: column; height: calc(621 * var(--u)); background: var(--c-paper); border-radius: var(--r-card); color: var(--c-ink); text-decoration: none;
	border: 1px solid rgba(23, 38, 28, .14); box-shadow: 0 10px 28px rgba(60, 50, 35, .12); overflow: hidden; }   /* direction C: hairline and a soft shadow */
.bp-way__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(92 * var(--u)); padding: 0 calc(22 * var(--u));
	font: 700 var(--s-d5)/1.02 var(--f-pipe); letter-spacing: .02em; text-transform: uppercase;
	border-left: calc(14 * var(--u)) solid #B9C1BE; border-right: calc(14 * var(--u)) solid #B9C1BE; }
.bp-way__label .bp-ic { flex: none; width: calc(34 * var(--u)); height: auto; stroke-width: 2.6; }
.bp-way--lime .bp-way__label { background: var(--c-lime); color: var(--c-night); }
.bp-way--white .bp-way__label { background: #F4F6F3; color: var(--c-night); }
.bp-way--green .bp-way__label { background: var(--c-forest); color: #fff; }
.bp-way__sub { padding: calc(14 * var(--u)) calc(24 * var(--u)) 0; font: 400 var(--s-mono)/1.5 var(--f-mono); color: var(--c-muted); }
.bp-way__pics { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); }
.bp-way__pics img { width: 100%; height: calc(190 * var(--u)); object-fit: contain; mix-blend-mode: multiply; }
.bp-way__pics img:first-child { grid-column: 1 / -1; height: calc(220 * var(--u)); }
.bp-way:hover .bp-way__label { filter: brightness(1.06); }

/* W3: pig types in the glass section */
.bp-h3 { --ty: 128; --ny: 102; --ly: 300; }
.bp-h3__lead { left: calc(var(--x0) + 189 * var(--u)); top: calc(266 * var(--u)); font-size: var(--s-lead); font-weight: 500; color: var(--c-ink); }
.bp-train { left: calc(var(--x0) + 300 * var(--u)); top: calc(352 * var(--u)); width: calc(976 * var(--u)); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
	padding: 0; list-style: none; }
.bp-train li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bp-train__pic { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: calc(228 * var(--u)); }
.bp-train__pic img { max-width: 92%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.bp-train__name { width: 100%; margin-top: calc(62 * var(--u)); padding: 0 calc(10 * var(--u)); border-left: 1px solid rgba(23, 38, 28, .18); color: var(--c-ink);
	font: 700 var(--s-t4)/1.22 var(--f-sans); text-decoration: none; min-height: calc(46 * var(--u)); }
.bp-train li:first-child .bp-train__name, .bp-train li:first-child small, .bp-train li:first-child .bp-quote { border-left-color: transparent; }
.bp-train small { width: 100%; padding: calc(4 * var(--u)) 0; border-left: 1px solid rgba(23, 38, 28, .18); font: 400 var(--s-mono)/1.4 var(--f-mono); color: var(--c-ink); }
.bp-train .bp-quote { width: 100%; border-left: 1px solid rgba(23, 38, 28, .18); }
.bp-h3__btns { left: calc(var(--x0) + 189 * var(--u)); top: calc(834 * var(--u)); display: flex; align-items: center; gap: calc(36 * var(--u)); }
.bp-h3__btns .bp-btn--primary { min-height: calc(56 * var(--u)); padding: 0 calc(34 * var(--u)); font-size: var(--s-btn); }
.bp-h3__btns .bp-btn--link { font-size: var(--s-btn); }
.bp-h3__btns .bp-btn--link .bp-ic { display: none; }

/* «Add to quote» as a POST form (never an ?add-to-cart= link): outline button in cards, an underlined mono link under the glass pipe */
.bp-quote { margin: 0; }
.bp-quote button { width: 100%; min-height: calc(50 * var(--u)); border: 1.5px solid var(--c-forest); border-radius: var(--r-btn); background: var(--c-paper);
	color: var(--c-forest); font: 600 var(--s-ui)/1 var(--f-sans); cursor: pointer; }
.bp-quote button:hover { background: var(--c-forest); color: #fff; }
.bp-quote--link button { width: auto; min-height: 0; padding: 0; border: 0; background: none; font: 400 var(--s-mono)/1.4 var(--f-mono); text-decoration: underline;
	text-underline-offset: 3px; }
.bp-quote--link button:hover { background: none; color: var(--c-ink); }

/* W4: the steam line and its four stations */
.bp-h4 { --ty: 80; --ny: 54; --ly: 260; }
.bp-h4__lead { left: calc(var(--x0) + 188 * var(--u)); top: calc(254 * var(--u)); font-size: var(--s-lead); font-weight: 500; color: var(--c-ink); }
.bp-steam { left: calc(var(--x0) + 157 * var(--u)); top: calc(393 * var(--u)); width: calc(1324 * var(--u)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(17 * var(--u)); padding: 0; list-style: none; }
.bp-steam__card { display: flex; flex-direction: column; height: calc(494 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u));
	background: var(--c-paper); border: 1px solid rgba(23, 38, 28, .14); border-radius: var(--r-card); box-shadow: 0 8px 24px rgba(60, 50, 35, .1); }
.bp-steam__pic { display: flex; align-items: center; justify-content: center; height: calc(232 * var(--u)); }
.bp-steam__pic img { max-height: 100%; width: auto; object-fit: contain; }
.bp-steam__name { margin-top: calc(18 * var(--u)); color: var(--c-ink); font: 700 var(--s-t3)/1.25 var(--f-sans); text-decoration: none; }
.bp-steam__brand { margin-top: calc(6 * var(--u)); font: 400 var(--s-mono)/1.4 var(--f-mono); color: var(--c-muted); }
.bp-steam__price { margin: calc(14 * var(--u)) 0 auto; font: 400 var(--s-mono-l)/1.3 var(--f-mono); color: var(--c-ink); }
.bp-h4__all { left: calc(var(--x0) + 188 * var(--u)); top: calc(920 * var(--u)); }
.bp-h4__all a { color: var(--c-forest); font-size: var(--s-body); text-underline-offset: 3px; }

/* W5: services on dark rock; line icons are white and lime on black, laid on the rock with screen */
.bp-h5 { --ty: 62; --ny: 30; --ly: 260; }
.bp-svc { left: calc(var(--x0) + 191 * var(--u)); top: calc(262 * var(--u)); width: calc(1209 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 0; list-style: none; }
.bp-svc li { padding: 0 calc(30 * var(--u)) calc(34 * var(--u)) calc(var(--pad, 0) * var(--u)); min-height: calc(300 * var(--u)); }
.bp-svc li:nth-child(3n+2), .bp-svc li:nth-child(3n) { --pad: 34; border-left: 1px solid rgba(255, 255, 255, .22); }
.bp-svc li:nth-child(n+4) { padding-top: calc(26 * var(--u)); border-top: 1px solid rgba(255, 255, 255, .22); }
.bp-svc img { display: block; width: calc(220 * var(--u)); height: calc(120 * var(--u)); object-fit: contain; object-position: left center; mix-blend-mode: screen;
	filter: drop-shadow(0 0 .7px #fff) drop-shadow(0 0 .7px #fff) brightness(1.3); }   /* thin strokes of the downscaled drawing, a touch thicker */
.bp-svc h3 { margin: calc(14 * var(--u)) 0 calc(10 * var(--u)); font-size: var(--s-t2); font-weight: 700; color: #fff; }
.bp-svc p { margin: 0; font-size: var(--s-body); line-height: 1.6; color: #DDE3DE; }
.bp-h5__btn { left: calc(var(--x0) + 191 * var(--u)); top: calc(896 * var(--u)); }
.bp-h5__btn .bp-btn { width: calc(473 * var(--u)); min-height: calc(67 * var(--u)); font-size: var(--s-btn-l); }

/* W6: steps at the gate valves; the pig sits in the glass section of the branch */
.bp-h6 { --ty: 142; --ny: 102; --ly: 300; }
.bp-h6__pig { left: calc(var(--x0) + 700 * var(--u)); top: calc(456 * var(--u)); width: calc(240 * var(--u)); height: auto; mix-blend-mode: multiply; }
.bp-steps { left: calc(var(--x0) + 196 * var(--u)); top: calc(610 * var(--u)); width: calc(1204 * var(--u)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: 0; list-style: none; counter-reset: step; }
.bp-steps li { padding: 0 calc(26 * var(--u)) 0 calc(var(--pad, 0) * var(--u)); min-height: calc(260 * var(--u)); }
.bp-steps li + li { --pad: 22; border-left: 1px solid rgba(23, 38, 28, .2); }
.bp-steps li::before { counter-increment: step; content: "0" counter(step); display: block; font: 400 var(--s-mono-l) var(--f-mono); color: var(--c-ink); }
.bp-steps h3 { margin: calc(10 * var(--u)) 0 calc(14 * var(--u)); font-size: var(--s-t2); font-weight: 700; line-height: 1.2; color: var(--c-forest); }
.bp-steps p { margin: 0; font-size: var(--s-body); font-weight: 500; line-height: 1.75; color: var(--c-ink); }
.bp-h6__btn { left: calc(var(--x0) + 196 * var(--u)); top: calc(890 * var(--u)); }
.bp-h6__btn .bp-btn { width: calc(473 * var(--u)); min-height: calc(75 * var(--u)); font-size: var(--s-btn-l); }

/* W7: the drilled core with the six facts, three real quotes, brands as text */
.bp-h7 { --ty: 146; --ny: 102; --ly: 320; }
.bp-core { left: calc(var(--x0) + 157 * var(--u)); top: calc(287 * var(--u)); width: calc(1314 * var(--u)); }
.bp-core img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.bp-core ul { position: absolute; inset: 0 2% 0 3%; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; margin: 0; padding: 0; list-style: none; }
.bp-core li { padding: 0 calc(14 * var(--u)); text-align: center; font: 700 var(--s-d5)/1.15 var(--f-pipe); letter-spacing: .02em; color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .6); }
.bp-quotes { left: calc(var(--x0) + 183 * var(--u)); top: calc(592 * var(--u)); width: calc(1290 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 0; list-style: none; }
.bp-quotes li { padding: 0 calc(30 * var(--u)) 0 calc(var(--pad, 0) * var(--u)); }
.bp-quotes li + li { --pad: 50; border-left: 1px solid rgba(23, 38, 28, .22); }
.bp-quotes blockquote { margin: 0; }
.bp-quotes blockquote::before { content: "\201C"; display: block; height: calc(50 * var(--u)); font: 800 calc(84 * var(--u))/1 var(--f-sans); color: #A9BD1E; }
.bp-quotes p { margin: 0; font-size: var(--s-quote); font-weight: 500; line-height: 1.38; color: var(--c-ink); }
.bp-brands { left: calc(var(--x0) + 183 * var(--u)); top: calc(845 * var(--u)); width: calc(1290 * var(--u)); padding-top: calc(16 * var(--u));
	border-top: 1px solid rgba(23, 38, 28, .25); text-align: center; font-size: var(--s-ui); word-spacing: .2em; color: var(--c-ink); }

/* W8: the receiver and the quote form; the footer follows on the same basalt */
.bp-h8 { --ny: 36; --ly: 40; height: calc(680 * var(--u));
	/* the picture centred like the stage (50 % of the free width = --x0; --x0 itself must not be used in background-position, where
	   100 % means something else), on a band of its own empty basalt, its right edge fading into it */
	background-image: url(../img/c-receiver.webp), url(../img/c-receiver-side.webp); background-repeat: no-repeat, repeat-x;
	background-position: 50% calc(-55 * var(--u)), left calc(-55 * var(--u)); background-size: calc(1536 * var(--u)) auto, auto calc(1024 * var(--u)); background-color: #141B17; }   /* its pipe meets the line on x 90; the receiver raised off the footer */
.bp-h8__form { left: calc(var(--x0) + 853 * var(--u)); top: calc(70 * var(--u)); width: calc(642 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u));
	background: var(--c-paper); border-radius: var(--r-card); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.bp-h8__form .bp-form { padding: 0; box-shadow: none; }
.bp-h8__title { margin-bottom: calc(16 * var(--u)); font: 800 var(--s-d4)/1 var(--f-pipe); letter-spacing: .03em; text-transform: uppercase; color: var(--c-forest); }

@media (max-width: 900px) {
	.bp-home { --h1-h: 0px; --x0: 0px; }
	.bp-stage { height: auto; padding: 56px 16px 64px 48px; }
	.bp-stage > * { position: relative; left: auto; top: auto; width: auto; }
	.bp-pipes { display: none; }
	/* phones: the middle 768 px of each texture at its own scale — the same pixels, half the file */
	[data-layer] { background-size: 768px auto; }
	[data-layer="topsoil"] { background-image: url(../img/c-topsoil-mid.webp?v=2); } [data-layer="clay"] { background-image: url(../img/c-clay-mid.webp?v=2); }
	[data-layer="sand"] { background-image: url(../img/c-sand-mid.webp?v=2); } [data-layer="bedrock"] { background-image: url(../img/c-bedrock-mid.webp?v=2); }
	[data-layer="gravel"] { background-image: url(../img/c-gravel-mid.webp?v=2); } [data-layer="granite"] { background-image: url(../img/c-granite-mid.webp?v=2); }
	[data-layer="basalt"] { background-image: url(../img/c-basalt-mid.webp?v=3); }
	.bp-pipe:not(.is-fit) { visibility: hidden; }   /* shown once the fonts and the hero picture are in: no jump (Lighthouse CLS) */
	/* phones: the gutter pipe is a rendered tile (pipe-phone.webp: 26 px pipe in a 64 px tile → 24 px) on the axis of the hero picture's pipe
	   (x 27.4, 25 px); bp.js starts it on that picture's flange above the ground and ends it on the receiver's first flange */
	.bp-pipe { display: block; left: -2.5px; width: 59px; top: 0; background: url(../img/pipe-phone.webp) center top / 59px auto repeat-y; }
	.bp-home.bp-pipe-fit .bp-h1 { z-index: auto; }
	.bp-ctitle { left: auto; top: auto; display: block; white-space: normal; font-size: var(--fs-d2); line-height: 1.02; }
	.bp-ctitle__arrow { display: inline-block; width: 24px; margin: 0 6px 4px 0; vertical-align: middle; }
	.bp-ctitle:not(.bp-ctitle--left) .bp-ctitle__arrow { margin: 0 0 4px 8px; }
	.bp-way__label .bp-ic { width: 22px; }
	.bp-cnum { left: auto; top: auto; margin-bottom: 6px; font-size: 13px; }
	.bp-layer { position: absolute !important; top: 18px; right: 14px; font-size: 12px; }
	.bp-h1 { background-image: url(../img/c-hero-side-m.webp); position: relative; z-index: 4; display: flex; flex-direction: column; height: auto; padding: 32px 16px 0 48px; }   /* above the gutter pipe: the picture's own pipe goes down */
	.bp-h1__img { position: static; order: 2; width: calc(100% + 64px); max-width: none; height: auto; margin: 24px 0 0 -48px; aspect-ratio: 1024 / 960; object-fit: cover; object-position: top; }
	.bp-h1 > picture img { position: static; }
	.bp-h1 h1 { font-size: var(--fs-d1); }
	.bp-h1 h1 br { display: none; }
	.bp-h1__text { max-width: none; }
	.bp-h1__lead { max-width: none; margin: 16px 0 24px; font-size: var(--fs-lead); }
	.bp-h1__btns .bp-btn { min-height: 48px; padding: 0 20px; font-size: var(--fs-btn-l); }
	.bp-h1 .bp-facts { font-size: var(--fs-mono-s); }
	.bp-h1__label { display: none; }
	.bp-h2__ways, .bp-svc, .bp-steps, .bp-quotes { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
	.bp-way { height: auto; }
	.bp-way__label { min-height: 64px; font-size: var(--fs-d5); }
	.bp-way__sub { font-size: var(--fs-mono); }
	.bp-way__pics { grid-template-columns: repeat(3, 1fr); }
	.bp-way__pics img, .bp-way__pics img:first-child { grid-column: auto; height: 96px; }
	.bp-h3__lead, .bp-h4__lead { margin-top: 20px; font-size: var(--fs-lead); }
	.bp-train { margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; padding: 16px 8px; background: rgba(255, 255, 255, .35);
		border: 2px solid rgba(255, 255, 255, .7); border-radius: 24px; }
	.bp-train__pic { height: 120px; }
	.bp-train__name, .bp-train small, .bp-train .bp-quote { border-left: 0; margin-top: 8px; font-size: var(--fs-t4); min-height: 0; }
	.bp-train__name { min-height: 24px; }
	.bp-train small, .bp-quote--link button { font-size: var(--fs-mono-s); }
	.bp-h3__btns { flex-wrap: wrap; margin-top: 24px; gap: 16px; }
	.bp-h3__btns .bp-btn--primary, .bp-h3__btns .bp-btn--link { font-size: var(--fs-btn); }
	.bp-h3__btns .bp-btn--primary { min-height: 48px; padding: 0 22px; }   /* the stage height (56 × --u) is 13 px on a phone */
	.bp-steam { margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.bp-steam__card { height: auto; padding: 14px; }
	.bp-steam__pic { height: 120px; }
	.bp-steam__name { font-size: var(--fs-t3); }
	.bp-steam__brand, .bp-steam__price { font-size: var(--fs-mono-s); }
	.bp-quote button { min-height: 44px; font-size: var(--fs-small); }
	.bp-h4__all { margin-top: 20px; background: none; padding: 0; }
	.bp-h4__all a { font-size: var(--fs-ui); }
	.bp-svc li, .bp-steps li, .bp-quotes li { --pad: 0 !important; padding: 0 0 20px; min-height: 0; border-left: 0 !important; border-top: 1px solid rgba(127, 127, 127, .3); }
	.bp-svc li:first-child, .bp-steps li:first-child, .bp-quotes li:first-child { border-top: 0; }
	.bp-svc li:nth-child(n+4) { padding-top: 0; }
	/* services: the line drawings larger and centred, the item centred under them (owner 30.10: «icons bigger, not pressed to the left») */
	.bp-svc li { text-align: center; padding-top: 18px; }
	.bp-svc img { width: 100%; height: 120px; object-position: center; margin: 0 auto 4px; }
	.bp-svc h3, .bp-steps h3 { font-size: var(--fs-t2); }
	.bp-svc p, .bp-steps p { font-size: var(--fs-body); }
	.bp-steps li::before { font-size: var(--fs-mono); padding-top: 16px; }
	.bp-h5__btn, .bp-h6__btn { margin-top: 16px; }
	.bp-h5__btn .bp-btn, .bp-h6__btn .bp-btn { width: 100%; min-height: 52px; font-size: var(--fs-btn-l); }
	.bp-h6__pig { display: none; }
	/* «Why»: the core, then the six facts in one white card with lime markers, the quotes as cards (owner 30.10: «this block is so-so») */
	.bp-core { margin-top: 24px; }
	.bp-core ul { position: static; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 14px; padding: 18px 16px; background: var(--c-paper);
		border: 1px solid rgba(23, 38, 28, .14); border-radius: var(--r-card); box-shadow: 0 8px 24px rgba(60, 50, 35, .1); }
	.bp-core li { position: relative; padding: 0 0 0 16px; color: var(--c-forest); text-shadow: none; text-align: left; font-size: var(--fs-d6); line-height: 1.15; }
	.bp-core li::before { content: ""; position: absolute; left: 0; top: .32em; width: 8px; height: 8px; border-radius: 2px; background: var(--c-lime); }
	.bp-quotes { gap: 12px; margin-top: 18px; }
	.bp-quotes li { padding: 16px 16px 18px !important; border: 1px solid rgba(23, 38, 28, .12) !important; border-radius: var(--r-card); background: rgba(255, 255, 255, .78); }
	.bp-quotes p { font-size: var(--fs-quote); }
	.bp-quotes blockquote::before { height: 30px; font-size: 52px; }
	.bp-brands { margin-top: 18px; padding-top: 14px; font-size: var(--fs-label); }
	/* the receiver picture scaled so its pipe meets the gutter pipe (x 27, 22 px) and the receiver stands above the form */
	.bp-h8 { height: auto; padding-left: 16px; background-size: 595px auto, 768px auto; background-position: -8px -5px, center top; }   /* its pipe 24 px on x 27.4; the gutter pipe ends on its first flange (bp.js) */
	.bp-h8__form { margin-top: 250px; padding: 20px 16px; }
	.bp-h8__title { font-size: var(--fs-d4); }
}