/* ==========================================================================
   Inner pages: the drawing sheet.

   The home page is the full single-line diagram. Every other page keeps its
   language in a quieter form: one wire down the left margin, each section a
   numbered node on it, the amber current running down to where you're reading
   (header.js sets --current and .is-live). Headings sit in the left column like
   the notes on a drawing, content on the right.
   ========================================================================== */

.is-pg {
	--wire-x: 14px;
	--gutter-l: 38px;
	--wire: rgba(138, 150, 168, 0.55);
}
@media (min-width: 768px) {
	.is-pg { --wire-x: clamp(22px, 2.6vw, 44px); --gutter-l: max(var(--gutter), calc(var(--wire-x) + 44px)); }
}
.is-pg .wrap { padding-left: var(--gutter-l); }
/* The main column is a size container: nodes find the wire with 100cqw, no script needed. */
.is-pg .main { position: relative; container-type: inline-size; }

.pg-wire {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--wire-x);
	width: 1px;
	background: var(--wire);
	pointer-events: none;
	z-index: 3;
}
.pg-wire__current {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -0.5px;
	width: 2px;
	background: var(--amber);
	transform: scaleY(var(--current, 0));
	transform-origin: top;
}

/* A node: the section number, tied to the wire by a hairline. --pg-dx is the distance
   from the wire to the start of the text column. */
.pg-n {
	--pg-dx: calc(max((100cqw - var(--maxw) - 2 * var(--gutter)) / 2, 0px) + var(--gutter-l) - var(--wire-x));
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: start;
	justify-self: start;
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.08em;
}
.pg-n::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	width: calc(var(--pg-dx) - 13px);
	margin-right: 8px;
	height: 1px;
	background: var(--wire);
	transition: background-color 0.3s var(--ease);
}
.pg-n__node {
	position: absolute;
	top: 50%;
	left: calc(-1 * var(--pg-dx) - 5px);
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	border: 1.5px solid var(--dim);
	border-radius: 50%;
	background: var(--paper);
	z-index: 4;
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pg-n.is-live::before { background: var(--amber); }
.pg-n.is-live .pg-n__node { background: var(--amber); border-color: var(--amber); }
/* A sent form closes the circuit: the whole wire runs green. */
.is-closed .pg-wire__current { background: var(--green); transition: background-color 0.6s var(--ease); }
.is-closed .pg-n.is-live::before { background: var(--green); }
.is-closed .pg-n.is-live .pg-n__node { background: var(--green); border-color: var(--green); }

/* -------------------------------------------------------------------------- Trail */

.trail { margin-bottom: clamp(22px, 3vw, 34px); color: var(--ink-2); }
.trail ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.trail li + li::before { content: "/"; margin-right: 10px; color: var(--dim); }
.trail a { text-decoration: none; }
.trail a:hover { text-decoration: underline; }
.trail [aria-current] { color: var(--ink); }

/* -------------------------------------------------------------------------- Page head */

.page-head {
	padding: calc(var(--hdr-h) + var(--safe-top) + clamp(40px, 7vw, 104px)) 0 clamp(52px, 6vw, 96px);
	border-bottom: 1px solid var(--line);
}
.page-head__grid { display: grid; gap: 44px 64px; align-items: center; }
.page-head h1 { max-width: 15ch; }
.page-head .lead { margin-top: 26px; color: var(--ink); }
.page-head__leads { display: grid; gap: 14px; max-width: 40em; color: var(--ink-2); }
.page-head__leads .lead { margin-top: 26px; }
.page-head__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Stubs and the 404: the head is the page. */
.page-head--stub { border-bottom: 0; min-height: min(78vh, 760px); }
.stub__pages { display: grid; max-width: 36em; margin-top: 36px; border-top: 1px solid var(--line); }

/* -------------------------------------------------------------------------- Text sections */

.tsec { padding-block: clamp(64px, 8vw, 128px); border-bottom: 1px solid var(--line); }
.tsec__grid { display: grid; gap: 30px 64px; }
@media (min-width: 960px) {
	.tsec__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); }
	.tsec__grid > .tsec__head { position: sticky; top: calc(var(--hdr-h) + 48px); align-self: start; }
}
.tsec__head { display: grid; gap: 18px; align-content: start; }
.tsec__head h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: 14ch; }
.tsec__head--row { margin-bottom: clamp(36px, 4.5vw, 60px); }
.tsec__head--row h2 { max-width: 20ch; }
.tsec__main { display: grid; gap: 26px; align-content: start; max-width: 46em; }
.tsec__single { display: grid; gap: 28px; }
.tsec__single .tsec__main { max-width: 56em; }
.tsec__p { color: var(--ink-2); font-size: 1.06rem; }
.tsec__cta { margin-top: 6px; }

/* Points: a short feeder, one node per point. */
.pts { position: relative; display: grid; border-top: 1px solid var(--line); }
.pts::before { content: ""; position: absolute; left: 5px; top: 30px; bottom: 30px; width: 1px; background: var(--line-2); }
.pt { position: relative; display: grid; gap: 4px; padding: 22px 0 22px 32px; border-bottom: 1px solid var(--line); }
.pt__node { position: absolute; left: 0; top: 29px; width: 11px; height: 11px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.pt__t { font-size: 1.15rem; font-weight: 580; color: var(--ink); line-height: 1.3; }
.pt__d { color: var(--ink-2); }
.pt__d strong { color: var(--ink); }

.checks { display: grid; gap: 10px; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: #fbfaf7; }
.checks .sym { width: 20px; height: 20px; margin-top: 2px; color: var(--green-t); stroke-width: 2; }

/* The page's one navy band. */
.tsec--navy { background: var(--deep); color: #fff; border-bottom: 0; }
.tsec--navy h2 { color: #fff; }
.tsec--navy .tsec__p { color: var(--on-deep-2); font-size: var(--fs-lead); line-height: 1.55; }
.tsec--navy .pg-n { color: var(--on-deep-2); }
.tsec--navy .pg-n__node { background: var(--deep); }
.tsec--navy .pg-n.is-live .pg-n__node { background: var(--amber); }

/* -------------------------------------------------------------------------- Steps */

.steps { position: relative; display: grid; }
.steps__item { position: relative; padding: 0 24px 28px 0; }
.steps__node { position: relative; z-index: 1; display: block; width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.steps__item:first-child .steps__node { background: var(--amber); border-color: var(--amber); }
.steps__n { display: block; margin-top: 16px; color: var(--ink-3); }
.steps__t { margin-top: 6px; max-width: 22em; color: var(--ink-2); }
.steps__t strong { display: block; margin-bottom: 2px; font-size: 1.12rem; color: var(--ink); }
@media (min-width: 900px) {
	.steps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
	.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1.5px; background: var(--ink); }
}
@media (max-width: 899.98px) {
	.steps::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 40px; width: 1.5px; background: var(--ink); }
	.steps__item { padding: 0 0 26px 36px; }
	.steps__node { position: absolute; left: 0; top: 2px; }
	.steps__n { margin-top: 0; }
}

/* -------------------------------------------------------------------------- Questions */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-size: 1.12rem;
	font-weight: 560;
	line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font: 400 1.5rem/1 var(--mono); color: var(--ink-2); transition: transform 0.3s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.faq__a { max-width: 44em; padding: 0 0 24px; color: var(--ink-2); }
@supports selector(::details-content) {
	.faq__item { interpolate-size: allow-keywords; }
	.faq__item::details-content { height: 0; overflow: clip; transition: height 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
	.faq__item[open]::details-content { height: auto; }
}

/* -------------------------------------------------------------------------- Form sections */

.formsec { padding-block: clamp(64px, 8vw, 128px); }
.formsec__grid { display: grid; gap: 40px 72px; }
@media (min-width: 1024px) {
	.formsec__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); align-items: start; }
	.formsec__aside { position: sticky; top: calc(var(--hdr-h) + 48px); }
}
.formsec__aside { display: grid; gap: 18px; align-content: start; }
.formsec__aside h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: 14ch; }
.formsec__body { color: var(--ink-2); }
.formsec__company { padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; line-height: 1.6; }
.formsec__form { padding: clamp(20px, 3vw, 36px); border: 1.5px solid var(--ink); border-radius: 16px; background: #fbfaf7; }
.formsec--contact { padding-top: clamp(48px, 6vw, 88px); }
/* Contact: the routes above the form, the company and its map after it, so on a phone
   the form comes first; on a desktop both sit in the left column beside the form. */
@media (min-width: 1024px) {
	.formsec__grid--split { grid-template-rows: auto 1fr; }
	.formsec__grid--split .formsec__aside { position: static; grid-column: 1; }
	.formsec__grid--split .formsec__form { grid-column: 2; grid-row: 1 / span 2; }
	.formsec__grid--split .formsec__aside--after { grid-row: 2; }
}

/* Routes: a line each, the arrow at the end. */
.routes { display: grid; border-top: 1px solid var(--line); }
.route {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 2px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	text-decoration: none;
}
.route strong { color: var(--ink); }
.route .sym { width: 20px; height: 20px; color: var(--ink); transition: transform 0.3s var(--ease); }
.route:hover .sym, .route:focus-visible .sym { transform: translateX(4px); }
.route:hover strong, .stub__pages .route:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.stub__pages .route { color: var(--ink); font-size: 1.15rem; font-weight: 540; }

/* The company, set as the title block of a drawing. */
.titleblock { display: grid; margin-top: 6px; border: 1.5px solid var(--ink); background: #fbfaf7; }
.titleblock > * + * { border-top: 1px solid var(--ink); }
.titleblock__name { padding: 14px 16px; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.01em; }
.titleblock__cell { padding: 10px 16px; color: var(--ink-2); font-size: 0.95rem; }
.titleblock__cell.mono { color: var(--ink-2); font-size: 0.72rem; line-height: 1.5; text-transform: none; letter-spacing: 0.03em; }
.titleblock__map { margin: 0; }
.titleblock__map svg { width: 100%; height: auto; }
.titleblock__credit { padding: 6px 16px 8px; color: var(--ink-3); font-size: 0.68rem; text-transform: none; letter-spacing: 0.02em; }

/* -------------------------------------------------------------------------- Legal */

.legal { padding: calc(var(--hdr-h) + var(--safe-top) + clamp(40px, 6vw, 96px)) 0 clamp(64px, 8vw, 120px); }
.legal h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem); }
.legal__draft { display: inline-block; margin-top: 18px; padding: 6px 10px; border: 1px solid var(--amber); border-radius: 4px; color: var(--amber-t); text-transform: none; letter-spacing: 0.02em; }
.legal__body { display: grid; gap: 14px; max-width: 46em; margin-top: 36px; color: var(--ink-2); }
.legal__body strong { color: var(--ink); }
.legal__body a { color: var(--ink); }
.legal__body ul, .legal__body ol { display: grid; gap: 6px; padding-left: 1.2em; list-style: disc; }
.legal__body ol { list-style: decimal; }
.legal__table { margin: 10px 0; overflow-x: auto; }
.legal__body table { width: 100%; min-width: 34em; font-size: 0.9rem; }
.legal__body th, .legal__body td { min-width: 12em; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__body th { color: var(--ink); font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
/* A gap in a draft: what still has to be confirmed, marked where it belongs. */
.tbc { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 0 7px; border: 1px dashed var(--amber); border-radius: 4px; background: rgba(228, 157, 18, 0.08); color: var(--ink); }
.tbc__l { color: #7a5300; /* amber-t is 4.25:1 on the tint; this is 5.8:1 */ font: 500 0.66rem/1.6 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }

/* The Contact page's line map (_tools/make_map.py, OpenStreetMap data). */
.m-map { display: block; width: 100%; height: auto; }
.m-ground { fill: #fbfaf7; }
.m-water path { fill: #dde4ec; stroke: #aebbcc; stroke-width: 0.6; }
.m-minor path, .m-major path, .m-rail path, .m-blvd path, .m-leader { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-minor path { stroke: #cfc8b8; stroke-width: 0.7; }
.m-major path { stroke: var(--ink-3); stroke-width: 1.4; }
.m-rail path { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 4 2.5; }
.m-blvd path { stroke: var(--amber); stroke-width: 3.2; }
.m-leader { stroke: var(--ink); stroke-width: 1; }
.m-pin { fill: var(--ink); }
.m-pin-ring { fill: rgba(9, 58, 126, 0.12); stroke: var(--ink); stroke-width: 1; }
.m-label, .m-town, .m-river { paint-order: stroke; stroke: #fbfaf7; stroke-width: 3.5px; stroke-linejoin: round; }
.m-label { fill: var(--ink); font: 600 15px var(--sans); }
.m-town { fill: var(--ink-3); font: 500 12px var(--mono); letter-spacing: 0.32em; }
.m-river { fill: #4f6b8f; font: italic 400 13px var(--sans); letter-spacing: 0.06em; stroke: #dde4ec; }
.m-north path { fill: var(--ink); }
.m-north text, .m-scale text { fill: var(--ink); font: 500 11px var(--mono); }
.m-north text { text-anchor: middle; }
.m-scale path { fill: none; stroke: var(--ink); stroke-width: 1.2; }

/* -------------------------------------------------------------------------- The catalogue */

.catalogue { padding-block: clamp(40px, 5vw, 80px) clamp(56px, 7vw, 110px); }
.catalogue__group + .catalogue__group { margin-top: clamp(56px, 7vw, 104px); }
.catalogue__head { display: grid; gap: 12px; margin-bottom: 26px; }
.catalogue__h { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.catalogue__h a { color: inherit; text-decoration: none; }
.catalogue__h a::after { content: " →"; font-size: 0.7em; color: var(--ink-3); transition: margin 0.3s var(--ease); }
.catalogue__h a:hover::after { margin-left: 6px; }
.catalogue__line { max-width: 44em; color: var(--ink-2); }

.pcards { display: grid; gap: 14px; }
@media (min-width: 560px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard {
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: 14px;
	background: #fff;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pcard:hover, .pcard:focus-within { border-color: var(--ink); box-shadow: 0 20px 40px -30px rgba(6, 39, 90, 0.5); }
.pcard__img img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6%; background: #fff; }
.pcard__body { display: grid; gap: 8px; align-content: start; padding: 18px 20px 22px; border-top: 1px solid var(--line); }
.pcard__figure { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); color: var(--ink); }
.pcard__model { font-size: 1.12rem; letter-spacing: 0; }
.pcard__type { color: var(--ink-2); font-size: 0.94rem; line-height: 1.4; }
.pcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pcard__chips li { padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 0.74rem/1.3 var(--mono); color: var(--ink); }
.pcard__warranty { margin-top: 2px; font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.pcard__warranty .mono { margin-right: 4px; color: var(--green-t); }


/* After the cards: the category's explainers and its call to action. */
.catx { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--line); }
.catx__grid { display: grid; gap: 28px 48px; }
@media (min-width: 900px) { .catx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catx__item { display: grid; gap: 10px; align-content: start; padding: 24px 26px; border-radius: 14px; background: var(--paper-2); }
.catx__h { font-size: var(--fs-h3); }
.catx__p { color: var(--ink-2); }
.catx__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	margin-top: clamp(32px, 4vw, 56px);
	padding: 26px 30px;
	border-radius: 14px;
	background: var(--deep);
	color: #fff;
}
.catx__end-text { max-width: 40em; color: var(--on-deep-2); font-size: 1.06rem; }
.catx__end .btn { --btn-bg: var(--amber); --btn-fg: var(--deep-2); }
.catalogue .catx__end { margin-top: clamp(56px, 7vw, 96px); }

/* The quote form, when a product card sent the visitor here. */
.formsec__product { margin-bottom: 18px; padding: 10px 14px; border: 1px dashed var(--line-2); border-radius: 10px; }
.formsec__product .mono { margin-right: 6px; color: var(--ink-2); }

/* -------------------------------------------------------------------------- Photos, CTAs, certificates, warranty, projects */

/* A text section with a photo under its heading. */
.tsec__img img { width: 100%; margin-top: 10px; border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; }
.tsec__img img[src*="markets/map"] { aspect-ratio: auto; object-fit: contain; mix-blend-mode: multiply; }
.tsec--navy .tsec__img img { mix-blend-mode: normal; }

/* The closing band: a question, a line, two buttons. */
.ctaband { padding-block: clamp(56px, 7vw, 104px); background: var(--deep); color: #fff; }
.ctaband__grid { display: grid; gap: 28px 64px; align-items: end; }
@media (min-width: 960px) { .ctaband__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.ctaband__text { display: grid; gap: 16px; }
.ctaband h2 { max-width: 16ch; color: #fff; }
.ctaband__body { max-width: 34em; color: var(--on-deep-2); font-size: var(--fs-lead); }
.ctaband__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ctaband__brand { width: 100%; margin-top: 8px; color: var(--amber); }
.ctaband .pg-n { color: var(--on-deep-2); }
.ctaband .pg-n__node { background: var(--deep); }

/* Certificate scans on the page. */
.certsec { padding-block: 8px clamp(48px, 6vw, 88px); }
.certs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.cert__link { display: block; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 16px 30px -22px rgba(6, 39, 90, 0.55); transform: rotate(var(--tilt, -1deg)); transition: transform 0.35s var(--ease); }
.cert:nth-child(even) .cert__link { --tilt: 1deg; }
.cert__link:hover, .cert__link:focus-visible { transform: rotate(0) translateY(-4px); }
.cert__img img { width: 100%; height: auto; }
.cert__cap { margin-top: 14px; color: var(--ink-2); font-size: 0.7rem; line-height: 1.45; text-transform: none; letter-spacing: 0.02em; }
@media (max-width: 959.98px) {
	.certs {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 42%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter-l) var(--gutter);
		margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter));
		padding: 8px var(--gutter) 12px var(--gutter-l);
		scrollbar-width: none;
	}
	.certs::-webkit-scrollbar { display: none; }
	.cert { scroll-snap-align: start; }
}

/* Warranty, product by product. */
.wtable { overflow-x: auto; border-top: 1px solid var(--line-2); }
.wtable table { width: 100%; min-width: 30em; font-size: 0.95rem; }
.wtable th, .wtable td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.wtable thead th { color: var(--ink-2); font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.wtable tbody th { font-weight: 560; }
.wtable tbody th a { color: var(--ink); text-decoration: none; }
.wtable tbody th a:hover { text-decoration: underline; }
.wtable__type { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.84rem; font-weight: 400; }
.wtable td { color: var(--ink-2); }

/* Projects with photos. */
.refsec { padding-block: clamp(40px, 5vw, 80px) clamp(56px, 7vw, 104px); }
.prefs { display: grid; gap: 16px; }
@media (min-width: 900px) { .prefs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pref--main { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: none; } }
.pref { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: #fbfaf7; }
.pref__photo { position: relative; }
.pref__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) { .pref--main .pref__photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; } .pref--main .pref__photo { min-height: 360px; } }
.pref__body { display: grid; gap: 8px; align-content: start; padding: 22px 24px 26px; }
.pref--main .pref__body { align-content: center; padding: 32px 36px; }
.pref__where { color: var(--ink-3); text-transform: none; letter-spacing: 0.03em; }
.pref__title { font-size: 1.35rem; }
.pref--main .pref__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.pref__text { color: var(--ink-2); }

/* -------------------------------------------------------------------------- Cards, 28.09: brand, two ways on */

.pcard__img { display: block; background: #fff; }
.pcard__brand { color: var(--ink-3); font-size: 0.68rem; }
.pcard--growatt .pcard__brand { color: var(--green-t); }
.pcard__model a { color: inherit; text-decoration: none; }
.pcard__model a:hover { text-decoration: underline; }
.pcard__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; }
.pcard__cta { color: var(--ink-2); font-size: 0.9rem; font-weight: 560; text-underline-offset: 0.2em; }
.pcard__cta:hover { color: var(--ink); }
.catalogue__brand { margin: 30px 0 14px; color: var(--ink-2); }
.catalogue__brand:first-of-type { margin-top: 0; }
.pcards + .catalogue__brand { margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); }
.catalogue__intro { display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 52px); }
.catalogue__h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.catalogue--brand .catalogue__group { scroll-margin-top: 100px; }
.catalogue--brand .catalogue__group + .catalogue__group { margin-top: clamp(44px, 5vw, 76px); }

/* -------------------------------------------------------------------------- Product page (28.09) */

.psheet__head { padding-block: calc(var(--hdr-h) + clamp(28px, 4vw, 56px)) clamp(44px, 5vw, 80px); border-bottom: 1px solid var(--line); }
.psheet__grid { display: grid; gap: 36px 64px; align-items: start; }
@media (min-width: 1024px) { .psheet__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.psheet__gallery { display: grid; gap: 12px; }
@media (min-width: 1024px) { .psheet__gallery { position: sticky; top: calc(var(--hdr-h) + 24px); } }
.psheet__main { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; cursor: zoom-in; }
.psheet__main img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6%; }
.psheet__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.psheet__thumb { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.psheet__thumb img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8%; }
.psheet__thumb.is-active, .psheet__thumb:hover { border-color: var(--ink); }
.psheet__intro { display: grid; gap: 14px; justify-items: start; }
.psheet__intro .trail { margin-bottom: 8px; }
.psheet__brand { color: var(--ink-3); }
.psheet--growatt .psheet__brand { color: var(--green-t); }
.psheet__h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); word-break: break-word; }
.psheet__type { color: var(--ink-2); font-size: 1.1rem; }
.psheet__figure { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); color: var(--ink); margin-top: 6px; }
.psheet__for { max-width: 36em; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.psheet__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }
.psheet__ctas .link-arrow .mono { color: var(--ink-3); }
.psheet__note { max-width: 36em; margin-top: 4px; padding: 14px 18px; border-left: 3px solid var(--green); background: var(--paper-2); color: var(--ink-2); font-size: 0.92rem; }
.psheet__note a { color: var(--ink); font-weight: 560; }
.psheet__certs { display: flex; flex-wrap: wrap; gap: 6px; }
.psheet__certs li { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink); font-size: 0.72rem; }
.psheet__hl { max-width: 48em; }

.psec { padding-block: clamp(52px, 6vw, 100px); border-bottom: 1px solid var(--line); }
.psec--tint { background: var(--paper-2); }
.psec__head { display: grid; gap: 14px; margin-bottom: 24px; }
.psec__head h2, .psec__col h2, .psec h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.psec__split { display: grid; gap: 20px 64px; }
@media (min-width: 900px) { .psec__split { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); } }
.psec__cols { display: grid; gap: 36px 64px; }
@media (min-width: 900px) { .psec__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.psec__col { display: grid; gap: 14px; align-content: start; }
.psec__h2-alt { margin-top: 42px; }
@media (min-width: 900px) { .psec__h2-alt { margin-top: 42px; } }
.psec__h3 { font-size: 1.12rem; margin-top: 8px; }
.psec__p { color: var(--ink-2); max-width: 40em; }
.psec__source { margin-top: 14px; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }

.spec-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; }
.spec-wrap:focus-visible { outline-offset: 2px; }
.spec { width: 100%; font-size: 0.92rem; }
.spec th, .spec td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody th { width: 34%; min-width: 180px; color: var(--ink-2); font-weight: 500; }
.spec td { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec tbody tr:nth-child(even) { background: #fbfaf7; }
.spec--versions thead th { position: sticky; top: 0; background: var(--deep); color: #fff; font: 500 0.74rem/1.3 var(--mono); letter-spacing: 0.04em; white-space: nowrap; }
.spec--versions tbody th { position: sticky; left: 0; z-index: 1; background: inherit; min-width: 200px; box-shadow: 1px 0 0 var(--line); }
.spec--versions tbody tr { background: #fff; }
.spec--versions tbody tr:nth-child(even) { background: #fbfaf7; }
.spec--versions td { min-width: 96px; }

.dl-list { display: grid; gap: 8px; }
.dl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; text-decoration: none; transition: border-color 0.25s var(--ease); }
.dl:hover, .dl:focus-visible { border-color: var(--ink); }
.dl__name { font-weight: 560; }
.dl__name::before { content: "↓"; margin-right: 10px; color: var(--green-t); font-weight: 700; }
.dl__meta { color: var(--ink-3); }

/* -------------------------------------------------------------------------- Growatt page: certificate, spotlight, video (28.09) */

.certsec { padding-block: clamp(56px, 7vw, 112px); border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.certsec__grid { display: grid; gap: 36px 64px; align-items: center; }
@media (min-width: 960px) { .certsec__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.certsec__text { display: grid; gap: 18px; justify-items: start; }
.certsec__text h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: 16ch; }
.certsec__body { color: var(--ink-2); font-size: 1.06rem; max-width: 40em; }
.certsec__facts { display: grid; width: 100%; max-width: 40em; border-top: 1px solid var(--line-2); }
.certsec__facts div { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.certsec__facts dt { color: var(--ink-3); }
.certsec__facts dd { margin: 0; font-weight: 560; }
.certsec__note { color: var(--ink-3); font-size: 0.92rem; }
.certsec__doc { display: grid; gap: 12px; justify-items: center; }
.certsec__doc a { display: block; width: min(100%, 440px); cursor: zoom-in; }
.certsec__doc img { width: 100%; border-radius: 6px; box-shadow: 0 34px 70px -36px rgba(6, 39, 90, 0.6), 0 0 0 1px var(--line); }
.certsec__cap { max-width: 40em; color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; text-align: center; line-height: 1.5; }

.spot { padding-block: clamp(56px, 7vw, 112px); scroll-margin-top: 80px; }
.spot__grid { display: grid; gap: 36px 64px; align-items: center; }
@media (min-width: 1024px) { .spot__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.spot__img img { width: 100%; border-radius: 16px; }
.spot__body { display: grid; gap: 18px; justify-items: start; }
.spot__eyebrow { color: var(--green); }
.spot__body h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); max-width: 18ch; }
.spot__lead { color: var(--on-deep-2); font-size: 1.06rem; max-width: 36em; }
.spot__points { display: grid; gap: 12px; max-width: 38em; }
.spot__points li { position: relative; padding-left: 22px; color: var(--on-deep-2); line-height: 1.5; }
.spot__points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.spot__points strong { color: #fff; }
.spot .pg-n, .spot .pg-n__node { color: var(--on-deep-2); }

.yt { display: grid; gap: 8px; width: 100%; max-width: 560px; }
.yt__play { display: inline-flex; align-items: center; gap: 12px; width: fit-content; padding: 12px 18px 12px 12px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; color: #fff; font-weight: 560; text-decoration: none; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); }
.yt__play:hover, .yt__play:focus-visible { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.yt__icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--amber); color: var(--deep-2); fill: currentColor; }
.yt__note { color: var(--on-deep-3); text-transform: none; letter-spacing: 0.02em; }
.yt__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; }
.yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------------------- Downloads (28.09) */

.dlsec { padding-block: clamp(48px, 6vw, 96px); border-bottom: 1px solid var(--line); }
.dlsec__brand + .dlsec__brand { margin-top: clamp(40px, 5vw, 72px); }
.dlsec__h { margin-bottom: 18px; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.dlsec__cat + .dlsec__cat { margin-top: 24px; }
.dlsec__cat-h { margin-bottom: 10px; color: var(--ink-2); }
.dlsec__missing { margin-top: 28px; color: var(--ink-3); }

/* The gallery sits over the page wire where the trail line runs to the rail. */
.psheet__gallery { position: relative; z-index: 1; }
@media (min-width: 1024px) { .psheet__gallery { position: sticky; } }

/* -------------------------------------------------------------------------- Steps on a photo band (29.09) */

/* blocks/steps.php variant `band`: the steps in white over a darkened photo, amber nodes. */
.tsec--band { position: relative; overflow: hidden; border-bottom: 0; background: var(--deep-2); }
.tsec__bg { position: absolute; inset: 0; }
.tsec__bg picture, .tsec__bg img { width: 100%; height: 100%; object-fit: cover; }
.tsec__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(4, 28, 66, 0.94) 0%, rgba(4, 28, 66, 0.82) 45%, rgba(4, 28, 66, 0.6) 100%),
		linear-gradient(0deg, rgba(4, 28, 66, 0.7) 0%, rgba(4, 28, 66, 0) 50%);
}
.tsec--band > .wrap { position: relative; z-index: 1; }
.tsec--band h2 { color: #fff; }
.tsec--band .pg-n { color: var(--on-deep-2); }
.tsec--band .pg-n__node { background: var(--deep-2); }
.tsec--band .pg-n.is-live .pg-n__node { background: var(--amber); }
.tsec--band .steps::before { background: rgba(255, 255, 255, 0.5); }
.tsec--band .steps__node { border-color: #fff; background: var(--deep-2); }
.tsec--band .steps__item:first-child .steps__node { border-color: var(--amber); background: var(--amber); }
.tsec--band .steps__n { color: var(--amber); }
.tsec--band .steps__t { color: var(--on-deep-2); }
.tsec--band .steps__t strong { color: #fff; }
.tsec--band .tsec__cta { margin-top: clamp(20px, 3vw, 36px); }

/* blocks/form.php with `img`: a photo under the heading, beside the form. */
.formsec__img img { width: 100%; border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; }