/*
 * Content pages in the new design (2026-11-03): About, Contact, Sectors,
 * Technical Resources, Certifications, FAQ, Careers, Installation.
 * Builds on the shared "18. Inner pages" section of td-utility-style.css;
 * loaded after it (see inc/theme-setup.php).
 *
 * Every class here starts with pg- ("page") and is used only by the content
 * page templates in page-templates/. The look is the printed catalogue:
 * charcoal and red as BIG surfaces, square corners, dense layouts, heavy
 * Archivo caps (.ip-cap) for headings. Rules held on every page (DESIGN.md):
 *   - angled band edges only ever cut padding or photos (ip-band--cut /
 *     ip-before-cut, see the ANGLE RULE in the shared section);
 *   - a hover never turns text into its own background colour: links on
 *     dark or red surfaces get a thicker underline, rows get a background
 *     tint that keeps the text colour readable, and every anchor sets its
 *     colour for the normal AND :hover state (the site-wide a:hover rule
 *     would otherwise recolour it);
 *   - focus is the white outline with a dark ink ring (set site-wide);
 *   - tap targets are at least 44px; photos only ever get maximums, never
 *     widths bigger than the picture.
 *
 * Contents: 1 shared pieces, 2 About, 3 Contact, 4 Sectors, 5 Technical
 * Resources, 6 Certifications, 7 FAQ + accordions, 8 Careers, 9 Installation.
 */

/* ==========================================================================
   1. Shared pieces
   ========================================================================== */

/* Two columns: text, then a panel. Collapses to one on tablets and phones. */
.pg-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px clamp(32px, 4vw, 64px); align-items: start; }
.pg-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pg-split--aside { grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); }
.pg-split--guide { grid-template-columns: minmax(0, 1fr) minmax(300px, 540px); align-items: center; }
.pg-split--solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) {
	.pg-split, .pg-split--even, .pg-split--aside, .pg-split--guide { grid-template-columns: minmax(0, 1fr); }
}

/* Text on a dark band: white, links underlined and white (a coloured link
   would vanish on charcoal). */
.ip-band--charcoal .ip-prose, .ip-band--deep .ip-prose, .ip-band--red .ip-prose { color: var(--tdup-white); }
.ip-band--charcoal .ip-prose a, .ip-band--deep .ip-prose a, .ip-band--red .ip-prose a,
.ip-band--charcoal .ip-prose a:hover, .ip-band--deep .ip-prose a:hover, .ip-band--red .ip-prose a:hover { color: var(--tdup-white); }
.ip-band--charcoal .ip-prose h3, .ip-band--deep .ip-prose h3 { color: var(--tdup-white); }
.pg-prose--cols { max-width: none; }
@media (min-width: 1000px) {
	.pg-prose--cols { column-count: 2; column-gap: clamp(40px, 5vw, 80px); }
	.pg-prose--cols > * { break-inside: avoid-column; }
}

/* A photo tile: the picture fills it, a caption sits on a dark scrim. */
.pg-tiles { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pg-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-tiles--1 { grid-template-columns: minmax(0, 1fr); }
.pg-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tdup-ink); }
.pg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pg-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(38, 41, 43, 0.9) 0%, rgba(38, 41, 43, 0.3) 38%, rgba(38, 41, 43, 0) 62%); }
.pg-tile__cap { position: absolute; z-index: 1; left: 0; bottom: 0; right: 0; padding: 12px 14px; color: var(--tdup-white); font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; }
@media (max-width: 900px) {
	.pg-tiles, .pg-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pg-tile__cap { font-size: 13px; padding: 10px; }
}

/* Cards in a grid. --dark sits on the deep band, --white on the light band,
   --ink on the charcoal band. */
.pg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pg-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pg-cards, .pg-cards--4 { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.pg-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pg-card--dark { background: var(--tdup-charcoal); color: var(--tdup-white); }
.pg-card--ink { background: var(--tdup-charcoal-2); color: var(--tdup-white); }
.pg-card--white { background: var(--tdup-white); color: var(--tdup-charcoal); border: 1px solid var(--tdup-rule); }
.pg-card__ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tdup-ink); }
.pg-card__ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pg-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.pg-card__body p { margin: 0; font-size: 16px; line-height: 1.5; }
.pg-card--white .pg-card__body p { color: var(--tdup-body-grey); }
.pg-card__title { margin: 0; font-size: 20px; line-height: 1.05; color: inherit; } /* inherit: the site-wide heading colour would make it invisible on a dark card */
/* Cards with an icon instead of a photo: the icon sits in a square at the top. */
.pg-card--icon { padding: 18px 18px 6px; gap: 14px; }
.pg-card--icon .pg-card__body { padding: 0 0 14px; }
.pg-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--tdup-charcoal); color: var(--tdup-white); }
.pg-icon--red { background: var(--tdup-red); }
.pg-icon svg { width: 26px; height: 26px; }

/* The Group's businesses: a row of charcoal chips. */
.pg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.pg-chips li { display: flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--tdup-charcoal); color: var(--tdup-white); font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ==========================================================================
   2. About
   ========================================================================== */
/* The key figures: a charcoal panel, number then label per row. */
.pg-figs { list-style: none; margin: 0; padding: 0; background: var(--tdup-charcoal); color: var(--tdup-white); border-top: 6px solid var(--tdup-red); }
.pg-figs li { display: grid; grid-template-columns: minmax(150px, 235px) minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.pg-figs li:last-child { border-bottom: 0; }
.pg-figs strong { font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; font-size: clamp(22px, 2vw, 30px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.pg-figs span { font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, 0.92); }
@media (max-width: 480px) { .pg-figs li { grid-template-columns: minmax(0, 1fr); } }

.pg-quality-h { margin-top: 8px; }
.pg-quality { font-size: 18px; line-height: 1.6; max-width: 62ch; }
.pg-quality p { margin: 0 0 1em; }
.pg-quality p:last-child { margin-bottom: 0; }

.pg-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--tdup-rule); }
.pg-group__h { margin: 0; font-size: clamp(24px, 2.6vw, 36px); color: var(--tdup-red); }
.pg-group .ip-lede { margin-top: 10px; }
@media (max-width: 800px) { .pg-group { grid-template-columns: minmax(0, 1fr); } }
/* Group businesses: a white tile per company with its full-colour logo,
   linking to its own site. Up to 3 tiles a row on desktop (2 on phones), and
   the last row stretches to fill the width, so there's never an empty cell
   whatever the number of businesses (5 today: 3 + 2). The logo is held to the
   same height in every tile so the rows read evenly. Hover: a red frame, the
   logo never changes colour. */
.pg-group__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pg-group__logos > li { display: flex; min-width: 0; flex: 1 1 calc(33.333% - 8px); }
.pg-group__logo { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 18px 16px; background: #fff; border: 1px solid var(--tdup-rule); text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.pg-group__logo img { display: block; width: auto; height: auto; max-width: min(100%, 176px); max-height: 52px; object-fit: contain; } /* same size cap in every tile, so a wider tile doesn't make its logo bigger */
a.pg-group__logo:hover { border-color: var(--tdup-red); box-shadow: inset 0 0 0 2px var(--tdup-red); }
.pg-group__name { font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; font-size: 14px; text-transform: uppercase; color: var(--tdup-charcoal); text-align: center; }
@media (max-width: 560px) { .pg-group__logos > li { flex-basis: calc(50% - 8px); } .pg-group__logo { min-height: 88px; } .pg-group__logo img { max-height: 44px; } }

.pg-heritage-h { margin: 40px 0 16px; }
.pg-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pg-timeline li { border-top: 6px solid var(--tdup-charcoal); padding-top: 12px; min-width: 0; }
.pg-timeline img { display: block; width: 100%; height: 150px; max-width: none; object-fit: cover; margin-bottom: 12px; }
.pg-timeline strong { display: block; font-size: 38px; color: var(--tdup-red); }
.pg-timeline p { margin: 6px 0 0; color: var(--tdup-body-grey); }

/* "Our story": a short timeline on the charcoal band. Group steps are ink
   plates with a hairline; Utility Products' own step (--ours) is a solid red
   plate, so the eye lands on 2024. White text on red is 7.4:1. */
.pg-story { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.pg-story__step { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px 22px; background: var(--tdup-ink); border: 1px solid rgba(255, 255, 255, 0.18); border-top: 6px solid rgba(255, 255, 255, 0.4); color: var(--tdup-white); }
.pg-story__step--ours { background: var(--tdup-red); border-color: var(--tdup-red); border-top-color: var(--tdup-white); }
.pg-story__step .ip-lab { color: var(--tdup-white); opacity: 0.85; }
.pg-story__year { font-size: clamp(44px, 5vw, 76px); line-height: 0.9; color: var(--tdup-white); }
.pg-story__title { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.05; color: var(--tdup-white); }
.pg-story__step p { margin: 0; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.95); }

/* "Backed by a foundry heritage": photos (one large, two small) beside the
   key facts, then the four cards. The photo rows have a fixed, clamped height
   (not aspect-ratio) so the block does not balloon on a 1920px screen. */
.pg-foundry { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 4px 16px; align-items: stretch; }
.pg-foundry__photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-auto-rows: clamp(160px, 17vw, 270px); grid-template-columns: minmax(0, 1fr); }
.pg-foundry__photos .pg-tile { aspect-ratio: auto; }
.pg-foundry__photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-foundry__photos--3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pg-foundry__photos--3 .pg-tile:first-child { grid-row: span 2; }
.pg-foundry__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* The facts box stretches to the height of the photos beside it. 2026-11-04
   (Lee: "a lot of empty space"): the facts used to sit at the top with an
   empty block underneath, so now the box is a column and each fact takes an
   equal share of the height (flex: 1), centred in its share, with bigger
   numbers. The link button runs the full width of the column so its edges
   line up with the box above. */
.pg-figs--ink { background: var(--tdup-ink); border: 1px solid rgba(255, 255, 255, 0.18); border-top: 6px solid var(--tdup-red); flex: 1; display: flex; flex-direction: column; }
.pg-figs--ink li { flex: 1; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 8px; padding: 18px 24px; }
.pg-figs--ink strong { white-space: normal; font-size: clamp(30px, 2.8vw, 46px); }
.pg-figs--ink span { font-size: 17px; }
.pg-foundry__side .tdup-button { align-self: stretch; justify-content: center; text-align: center; }
.pg-foundry__points { margin-top: 16px; }
@media (max-width: 980px) {
	.pg-foundry { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
	.pg-foundry__photos--3, .pg-foundry__photos--2 { grid-template-columns: minmax(0, 1fr); }
	.pg-foundry__photos--3 .pg-tile:first-child { grid-row: auto; }
}

/* ==========================================================================
   3. Contact
   ========================================================================== */
.pg-contact__wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (max-width: 980px) { .pg-contact__wrap { grid-template-columns: minmax(0, 1fr); } }

/* Channels grouped by what the visitor wants: label on the left, number and
   email on the right (the homepage's .hp-chan, for this page). */
.pg-chan { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.pg-chan li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.pg-chan .k { font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); padding-top: 6px; }
.pg-chan .v { font-size: 18px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.pg-chan .v > a:first-child { font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.pg-chan .v small { display: block; margin-top: 4px; font-weight: 400; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.pg-chan a, .pg-chan a:hover { color: var(--tdup-white); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.pg-chan a:hover { text-decoration-thickness: 5px; }
@media (max-width: 560px) { .pg-chan li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .pg-chan .k { padding-top: 0; } }

/* The map prompt (click to load) on the dark band. */
.pg-contact .tdup-map-consent { margin-top: 24px; background: rgba(255, 255, 255, 0.08); border: 0; border-left: 4px solid var(--tdup-white); }
.pg-contact .tdup-map-consent__text { color: rgba(255, 255, 255, 0.92); font-size: 14px; }
.pg-contact .tdup-map-consent__link, .pg-contact .tdup-map-consent__link:hover { color: var(--tdup-white); font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.pg-contact .tdup-map-consent__link:hover { text-decoration-thickness: 3px; }
.pg-contact iframe.tdup-contact__map { display: block; width: 100%; height: 300px; margin-top: 24px; border: 0; }

/* The form: a white panel with a heavy red top edge, like the homepage's. */
.pg-form { background: var(--tdup-white); color: var(--tdup-charcoal); padding: 28px; border-top: 8px solid var(--tdup-red); min-width: 0; }
.pg-form__h { margin: 0 0 16px; font-size: clamp(26px, 2.6vw, 36px); color: var(--tdup-red); }
.pg-form__intro { margin: 0 0 16px; font-size: 16px; color: var(--tdup-body-grey); }
.pg-form__intro > :last-child { margin-bottom: 0; }
.pg-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.pg-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pg-fld--msg, .pg-form__distributor .pg-fld { margin-top: 14px; }
.pg-fld label { font-weight: 700; font-size: 15px; }
.pg-fld input, .pg-fld textarea, .pg-fld select { width: 100%; min-height: 48px; padding: 12px; font-size: 16px; font-family: var(--tdup-font-body); color: var(--tdup-charcoal); background-color: var(--tdup-white); border: 1px solid #9A9EA1; border-radius: 0; }
.pg-fld textarea { min-height: 120px; resize: vertical; }
.pg-fld input:focus-visible, .pg-fld textarea:focus-visible, .pg-fld select:focus-visible { border-color: var(--tdup-ink); }
.pg-form__distributor[hidden] { display: none; }
.pg-form .tdup-quote-message { margin-top: 14px; background: var(--tdup-off-white); border: 0; border-left: 4px solid var(--tdup-ink); font-size: 15px; }
.pg-form .tdup-quote-message[hidden] { display: none; }
.pg-form .tdup-form-privacy { margin-top: 14px; font-size: 13px; color: var(--tdup-body-grey); }
.pg-form .tdup-form-privacy a { color: var(--tdup-charcoal); text-decoration: underline; }
.pg-form .tdup-button { margin-top: 18px; width: 100%; min-height: 52px; }
@media (max-width: 560px) { .pg-f2 { grid-template-columns: minmax(0, 1fr); } .pg-form { padding: 18px; } }

.pg-merchant__wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.pg-merchant .ip-lede { margin-top: 8px; }

/* ==========================================================================
   4. Sectors: a contents-page list. One ruled row per sector: number, photo,
   name + product types, load-class strip, product count + arrow. Same ruled
   style Chris preferred on the homepage. On phones the numbers go and the row
   becomes photo / name / strip / arrow.
   ========================================================================== */
.pg-sectors-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); counter-reset: s; /* s = the 01, 02 ... numbering */ }
.pg-sectors-list a { display: grid; grid-template-columns: 44px 132px minmax(0, 1.3fr) auto 140px; align-items: center; gap: 22px; padding: 12px 18px 12px 0; color: var(--tdup-white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.18); position: relative; }
/* The number is generated by CSS, so it is never in the HTML or read out. */
.pg-sectors-list a::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--tdup-font-title); font-weight: 800; font-size: 15px; color: rgba(255, 255, 255, 0.5); padding-left: 14px; }
/* Hover: a red bar down the left edge plus a light tint. */
.pg-sectors-list a:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 4px 0 0 var(--tdup-red); }
.pg-sectors-list__ph { display: block; width: 132px; height: 84px; max-width: none; object-fit: cover; }
.pg-sectors-list strong { display: block; font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.05; }
.pg-sectors-list a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pg-sectors-list small { display: block; margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, 0.82); }
.pg-sectors-list__n { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.pg-sectors-list .hp-arr { width: 26px; height: 26px; flex: none; }

/* The load-class strip: every class as a small box; the ones this sector uses are lit white. */
.pg-classstrip { display: inline-flex; gap: 3px; }
.pg-classstrip i { font-style: normal; font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; font-size: 12px; letter-spacing: 0.04em; padding: 5px 7px; border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.35); }
.pg-classstrip i.on { background: var(--tdup-white); border-color: var(--tdup-white); color: var(--tdup-charcoal); }

/* Tablet and phone: photo | name + strip | arrow, no numbers, no "N products" text. */
@media (max-width: 900px) {
	.pg-sectors-list a { grid-template-columns: 96px minmax(0, 1fr) 26px; grid-template-areas: "ph nm ar" "ph cl ar"; gap: 6px 14px; padding: 12px 0; }
	.pg-sectors-list a::before { display: none; }
	.pg-sectors-list__ph { grid-area: ph; width: 96px; height: 72px; }
	.pg-sectors-list__t { grid-area: nm; }
	.pg-sectors-list .pg-classstrip { grid-area: cl; }
	.pg-sectors-list__n { grid-area: ar; }
	.pg-sectors-list__n span { display: none; }
	.pg-sectors-list strong { font-size: 17px; }
	.pg-sectors-list small { font-size: 13.5px; }
	.pg-classstrip i { font-size: 10px; padding: 3px 4px; }
}
/* Small phones: the site has six load classes (the mock had five), which will not fit beside the photo.
   So the strip drops to its own full-width row under the photo and name, each box sharing the width. */
@media (max-width: 560px) {
	.pg-sectors-list a { grid-template-areas: "ph nm ar" "cl cl cl"; }
	.pg-sectors-list .pg-classstrip { display: flex; margin-top: 4px; }
	.pg-classstrip i { flex: 1; text-align: center; font-size: 11px; padding: 4px 0; }
}

/* ==========================================================================
   5. Technical Resources
   ========================================================================== */
/* The rack of catalogue covers on the red band (the homepage's look). */
.pg-rack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 16px; }
.pg-rack > li { min-width: 0; }
.pg-rack a, .pg-rack a:hover { display: flex; flex-direction: column; gap: 8px; height: 100%; color: var(--tdup-white); text-decoration: none; }
.pg-rack img, .pg-rack__plain { display: block; width: 100%; max-width: none; aspect-ratio: 640 / 906; object-fit: cover; object-position: top; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.3); transition: transform 0.25s; }
.pg-rack__plain { display: flex; align-items: center; justify-content: center; background: var(--tdup-charcoal-2); color: var(--tdup-white); font-size: clamp(30px, 3.4vw, 54px); }
.pg-rack a:hover img, .pg-rack a:hover .pg-rack__plain { transform: translateY(-6px) rotate(-1deg); }
.pg-rack strong { font-size: 15px; line-height: 1.3; }
.pg-rack a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pg-rack__text { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.92); }
.pg-rack__meta { margin-top: auto; font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 1100px) { .pg-rack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pg-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pg-rack strong { font-size: 14px; } }

/* "More guides and technical notes": plain rows under the rack. */
.pg-notes__h { margin: 40px 0 8px; color: var(--tdup-white); }
.pg-notes { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.pg-notes li { border-top: 1px solid rgba(255, 255, 255, 0.35); }
.pg-notes a, .pg-notes a:hover { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; min-height: 56px; padding: 12px 0; color: var(--tdup-white); text-decoration: none; }
.pg-notes a:hover { background: rgba(255, 255, 255, 0.08); }
.pg-notes__t strong { display: block; font-size: 17px; }
.pg-notes a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pg-notes__t small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.92); max-width: 80ch; }
.pg-notes__m { font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) { .pg-notes a, .pg-notes a:hover { grid-template-columns: minmax(0, 1fr); } }

/* The datasheet library. */
.pg-lib__tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 14px; }
.pg-lib__search { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; max-width: 520px; color: var(--tdup-charcoal); }
.pg-lib__search input { width: 100%; min-height: 52px; padding: 0 16px; font-size: 17px; font-family: var(--tdup-font-body); color: var(--tdup-charcoal); background: var(--tdup-white); border: 2px solid var(--tdup-charcoal); border-radius: 0; }
.pg-lib__buttons { display: flex; gap: 8px; }
.pg-lib__group { background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-left: 6px solid var(--tdup-charcoal); margin-bottom: 6px; }
.pg-lib__group[open] { border-left-color: var(--tdup-red); }
.pg-lib__group > summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 70px 12px 18px; cursor: pointer; list-style: none; }
.pg-lib__group > summary::-webkit-details-marker { display: none; }
.pg-lib__group > summary:hover { background: var(--tdup-off-white); }
.pg-lib__group > summary::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--tdup-charcoal); color: var(--tdup-white); font: 700 22px/1 var(--tdup-font-title); }
.pg-lib__group[open] > summary::after { content: '\2212'; background: var(--tdup-red); }
.pg-lib__name { font-size: 20px; color: var(--tdup-charcoal); }
.pg-lib__count { font-size: 14px; font-weight: 700; color: var(--tdup-body-grey); }
/* Two newspaper-style columns, not a grid: a grid lines products up in rows, so a short
   product sat next to a long one left a big empty gap under it. Columns just stack each
   product under the one above. break-inside keeps a product's list in one column. */
.pg-lib__panel { columns: 2; column-gap: clamp(24px, 4vw, 56px); padding: 4px 18px 22px; border-top: 1px solid var(--tdup-rule); }
.pg-lib__product { min-width: 0; break-inside: avoid; padding-bottom: 8px; }
.pg-lib__product[hidden], .pg-lib__product li[hidden], .pg-lib__group[hidden] { display: none; }
/* Top space is padding, not margin: browsers drop a top margin at a column break,
   which made the second column's first heading sit higher than the first's. */
.pg-lib__product h3 { margin: 0 0 4px; padding-top: 16px; font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; font-size: 15px; line-height: 1.2; text-transform: uppercase; color: var(--tdup-charcoal); }
.pg-lib__product ul { list-style: none; margin: 0; padding: 0; }
.pg-lib__product li { border-bottom: 1px solid var(--tdup-rule); }
.pg-lib__product li a, .pg-lib__product li a:hover { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 6px 0; color: var(--tdup-charcoal); text-decoration: none; }
.pg-lib__type { display: block; padding: 5px 0; text-align: center; background: var(--tdup-charcoal); color: var(--tdup-white); font-family: var(--tdup-font-title); font-stretch: 125%; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; }
.pg-lib__product li a:hover .pg-lib__type { background: var(--tdup-red); }
.pg-lib__doc strong { display: block; font-size: 15px; line-height: 1.3; }
.pg-lib__product li a:hover .pg-lib__doc strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pg-lib__doc small { display: block; font-size: 13px; color: var(--tdup-body-grey); }
.pg-lib__size { font-size: 13px; font-weight: 700; color: var(--tdup-body-grey); white-space: nowrap; }
@media (max-width: 860px) { .pg-lib__panel { columns: 1; } }
@media (max-width: 480px) { .pg-lib__name { font-size: 17px; } .pg-lib__group > summary { padding-right: 64px; flex-wrap: wrap; gap: 2px 12px; } }

/* A text section: the text, with real photos filling the other half. */
.pg-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px clamp(32px, 4vw, 64px); }
.pg-text--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.pg-text--flip .pg-media { order: -1; }
@media (max-width: 900px) { .pg-text--media, .pg-text--flip { grid-template-columns: minmax(0, 1fr); } .pg-text--flip .pg-media { order: 0; } }
.pg-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-height: 320px; align-content: stretch; }
.pg-media img { display: block; width: 100%; height: 100%; min-height: 200px; max-width: none; object-fit: cover; }
.pg-media--1 { grid-template-columns: minmax(0, 1fr); }
.pg-media--1 img { min-height: 320px; }
.pg-media--3 img:first-of-type, .pg-media__video { grid-column: 1 / -1; }
/* Desktop, text BESIDE pictures (2026-11-04). Pictures keep their own shape instead of
   being stretched to the row's height, and the text is centred against them. Before,
   pictures were forced to fill the row: a tall stack made the section tall and left a
   big gap under short text, and forcing them shorter cropped them badly.
   - One picture: shown whole (contain), no taller than 480px.
   - Two or three: a single row of equal 4:3 tiles, so they can't stack up tall. */
@media (min-width: 901px) {
	.pg-text--media { align-items: center; }
	.pg-text--media .pg-media { min-height: 0; align-content: center; }
	.pg-text--media .pg-media img { height: auto; min-height: 0; }
	.pg-text--media .pg-media--1 img { max-height: 480px; object-fit: contain; }
	.pg-text--media .pg-media--2 img, .pg-text--media .pg-media--3 img { aspect-ratio: 4 / 3; object-fit: cover; }
	.pg-text--media .pg-media--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pg-text--media .pg-media--3 img:first-of-type { grid-column: auto; }
}
/* Two or three photos keep a 4:3 shape at every width (on phones they were being
   squeezed into tall, thin 320px strips). */
.pg-media--2, .pg-media--3 { min-height: 0; }
.pg-media--2 img, .pg-media--3 img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }

/* Technical Resources text + pictures bands (2026-11-10, Lee: "a bunch of dead space"
   in Load Testing). The section heading now sits INSIDE the text column
   (.pg-text--headed, page-technical-resources.php) rather than on a row of its own,
   which left an empty strip beside it.
   - .ip-prose h2 would shrink the heading to body-heading size, so put the normal
     section heading size back.
   - Desktop: the row is as tall as heading + text, and the photos stretch to fill
     that whole height (cover-cropped a little) instead of sitting as a short 4:3 strip
     with charcoal above and below. The 4:3 shape is still the minimum, so photos
     never get shorter than before.
   - The hinge band (drawings) keeps its heading above, so it never gets this class. */
.pg-text--headed .ip-prose .ip-head { margin-bottom: 20px; }
.pg-text--headed .ip-prose h2.ip-h2 { margin: 0; font-size: clamp(28px, 3.6vw, 48px); line-height: 0.98; }
@media (min-width: 901px) {
	.pg-text--headed { align-items: stretch; }
	.pg-text--headed .pg-prose { align-self: center; }
	.pg-text--headed .pg-media--2, .pg-text--headed .pg-media--3 { align-content: stretch; }
	.pg-text--headed .pg-media--2 img, .pg-text--headed .pg-media--3 img { height: 100%; aspect-ratio: auto; min-height: clamp(200px, 17vw, 300px); }
}
/* Hinge section: two cutaway drawings, each with red numbered markers and a numbered
   key underneath (built by tdup_pg_render_hinge_diagrams()). On desktop the text takes
   the narrower column and the two drawings sit side by side in the wider one. */
@media (min-width: 901px) {
	/* Text centred against the drawings + key, so any spare height splits evenly
	   above and below the text instead of pooling underneath it. */
	.pg-text--diagrams { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
}
.pg-diagrams { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px clamp(20px, 2.5vw, 36px); }
.pg-diagram-key { margin: 0; }
.pg-diagram-key__art { position: relative; }
.pg-diagram-key__art img { display: block; width: 100%; height: auto; }
/* The drawings are black lines on white. Blend them into the band so they sit on the
   page instead of in white boxes:
   - light band: multiply turns the white into the band's own grey; lines stay black;
   - charcoal band: invert makes the lines light, and screen drops the (now black)
     background into the charcoal. Only the image is blended, not the red markers. */
.ip-band--light .pg-diagram-key__art img { mix-blend-mode: multiply; }
.ip-band--charcoal .pg-diagram-key__art img { filter: invert(1); mix-blend-mode: screen; }
/* The markers: an SVG laid exactly over the image (same viewBox as the image's pixels). */
.pg-diagram-key__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pg-diagram-key__marks circle { fill: var(--tdup-red); }
.pg-diagram-key__marks text { fill: var(--tdup-white); font-family: var(--tdup-font-title); font-weight: 800; font-size: 24px; text-anchor: middle; }
/* The key under each drawing. */
.pg-diagram-key figcaption { margin-top: 8px; font-size: 14px; line-height: 1.4; }
.pg-diagram-key figcaption strong { display: block; margin-bottom: 6px; font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.pg-diagram-key ol { margin: 0; padding-left: 1.6em; }
.pg-diagram-key li { margin: 0 0 4px; padding-left: 2px; }
.pg-diagram-key li::marker { color: var(--tdup-red); font-weight: 800; }
.ip-band--charcoal .pg-diagram-key li::marker { color: var(--tdup-white); }
/* PNGs are usually product renders on a clear background: always show the whole thing. */
.pg-media img[src$=".png"] { object-fit: contain; }
.pg-media__video video, .pg-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--tdup-ink); border: 0; }
.pg-embed { position: relative; }
.pg-diagram { margin: 28px 0 0; padding: 16px; background: var(--tdup-white); }
.pg-diagram img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ip-band--deep .pg-text + .ip-classes, .ip-band--deep .pg-diagram + .ip-classes { margin-top: 32px; }
.ip-band--deep .ip-head + .ip-classes { margin-top: 0; }
.ip-band--deep .ip-classes { background: rgba(0, 0, 0, 0.3); }

/* Post-installation issues: a card per problem. */
.pg-issues__media { margin-bottom: 20px; }
.pg-issues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-issue { background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-top: 6px solid var(--tdup-charcoal); padding: 18px 20px 14px; color: var(--tdup-charcoal); min-width: 0; }
.pg-issue__t { margin: 0 0 12px; font-size: 20px; line-height: 1.05; color: var(--tdup-charcoal); }
.pg-issue p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--tdup-body-grey); }
.pg-issue .ip-lab { display: block; margin-bottom: 3px; color: var(--tdup-red); }
.ip-band--charcoal .pg-issue { background: var(--tdup-charcoal-2); border-color: transparent; border-top-color: var(--tdup-white); color: var(--tdup-white); }
.ip-band--charcoal .pg-issue__t { color: var(--tdup-white); }
.ip-band--charcoal .pg-issue p { color: rgba(255, 255, 255, 0.92); }
.ip-band--charcoal .pg-issue .ip-lab { color: var(--tdup-white); opacity: 0.8; }
@media (max-width: 1100px) { .pg-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pg-issues { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   6. Certifications
   ========================================================================== */
/* THE WHOLE PAGE IS DARK (Chris, 2026-11-03: "angled brochure theme as the
   entire background, no white"). The <main> itself is charcoal so no pale
   default ever shows behind or between the angled bands. Bands, in order:
   deep (intro), charcoal (rows), red (load classes), deep (closing). */
.pg-certs { background: var(--tdup-charcoal); }

/* Band 1: the introduction + marks panel, with a big red wedge behind the
   panel. The wedge's slanted edge leans at about the same angle as the page
   header's wedge, mirrored on the right, so the two angles frame the page.
   It sits behind the content (z-index 0; the container is z-index 1). */
.pg-certs__intro { overflow: hidden; }
.pg-certs__intro::before {
	content: ''; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0;
	width: min(48%, 760px); background: var(--tdup-red);
	clip-path: polygon(150px 0, 100% 0, 100% 100%, 0 100%);
}
.pg-certs__intro > .tdup-container { position: relative; z-index: 1; }
@media (max-width: 980px) {
	/* One column on tablets and phones: the wedge becomes a smaller corner piece. */
	.pg-certs__intro::before { width: 62%; clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%); }
}

/* The marks panel: ink (the darkest charcoal) with a hairline and a red top
   edge, so it reads as a plate laid on the wedge. BSI marks are white artwork. */
.pg-marks { background: var(--tdup-ink); color: var(--tdup-white); padding: 18px 20px 20px; border: 1px solid rgba(255, 255, 255, 0.18); border-top: 6px solid var(--tdup-red); }
.pg-marks .ip-lab { color: var(--tdup-white); margin-bottom: 14px; }
/* BSI's combined marks strip is ONE wide picture (about 4.3:1, white on transparent):
   it fills the panel's width, capped so it never grows huge on a wide screen. */
.pg-marks__strip { display: block; width: 100%; max-width: 720px; height: auto; }

/* Band 2: one row per standard. Ink plate, hairline, red edge. */
.pg-cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pg-cert { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); background: var(--tdup-ink); color: var(--tdup-white); border: 1px solid rgba(255, 255, 255, 0.18); border-left: 8px solid var(--tdup-red); }
.pg-cert__text { padding: 22px 24px; min-width: 0; }
.pg-cert__name { margin: 0 0 14px; font-size: clamp(26px, 2.6vw, 36px); color: var(--tdup-white); }
.pg-cert__text p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.95); }
.pg-cert__text p:last-child { margin-bottom: 0; }
.pg-cert__text .ip-lab { display: block; margin-bottom: 3px; color: var(--tdup-white); opacity: 0.8; }

/* The certificate tiles fill the right half whatever their number: two or
   three share it equally (auto-fit); ONE tile (--1) spreads sideways (mark,
   number, actions) instead of sitting in the corner of an empty half. The
   1px gaps over a hairline background draw the dividers. */
.pg-cert__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.18); border-left: 1px solid rgba(255, 255, 255, 0.18); }
.pg-tile-cert { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 22px 20px; background: var(--tdup-charcoal-2); min-width: 0; }
.pg-tile-cert img { display: block; width: auto; height: 72px; max-width: 100%; }
.pg-tile-cert__no { font-size: 24px; color: var(--tdup-white); overflow-wrap: anywhere; }
.pg-tile-cert__links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.pg-tile-cert .ip-link { font-size: 12px; }
.pg-cert__tiles--1 .pg-tile-cert { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px clamp(20px, 3vw, 44px); padding: 24px clamp(20px, 3vw, 40px); }
.pg-cert__tiles--1 .pg-tile-cert img { height: 88px; }
.pg-cert__tiles--1 .pg-tile-cert__no { font-size: clamp(28px, 3vw, 40px); }
.pg-cert__tiles--1 .pg-tile-cert__links { margin: 0 0 0 auto; flex-direction: column; align-items: flex-start; }

/* The main action on a tile (download): red with white text. Hover darkens
   the red and the text stays white (never text into its own background). */
.pg-tile-cert__btn, .pg-tile-cert__btn:hover {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	background: var(--tdup-red); color: var(--tdup-white); text-decoration: none;
	font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.pg-tile-cert__btn:hover { background: var(--tdup-red-dark); box-shadow: inset 0 -3px 0 var(--tdup-white); }
@media (max-width: 900px) {
	.pg-cert { grid-template-columns: minmax(0, 1fr); }
	.pg-cert__tiles { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
	.pg-cert__tiles--1 .pg-tile-cert__links { margin-left: 0; }
}

/* ==========================================================================
   7. FAQ and accordions (also the Installation page's maintenance tips)
   ========================================================================== */
.pg-faq__intro { margin: 0 0 24px; }
.pg-faq__layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 32px clamp(32px, 4vw, 64px); align-items: start; }
.pg-faq__layout--install { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
.pg-faq__layout--install .pg-faq__groups { order: -1; }
.pg-faq__aside { display: grid; gap: 16px; position: sticky; top: 104px; min-width: 0; }
@media (max-width: 980px) {
	.pg-faq__layout, .pg-faq__layout--install { grid-template-columns: minmax(0, 1fr); }
	.pg-faq__aside { position: static; }
	.pg-faq__layout--install .pg-faq__groups { order: 0; }
}
.pg-faq__topics ul { list-style: none; margin: 0 0 6px; padding: 0; }
.pg-faq__topics li { border-top: 1px solid var(--tdup-rule); }
.pg-faq__topics a, .pg-faq__topics a:hover { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; color: var(--tdup-charcoal); text-decoration: none; font-weight: 700; font-size: 16px; }
.pg-faq__topics a:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pg-faq__topics small { font-size: 13px; font-weight: 400; color: var(--tdup-body-grey); }
.pg-faq__group { margin-bottom: 36px; scroll-margin-top: 96px; }
.pg-faq__group:last-child { margin-bottom: 0; }
.pg-faq__h { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 34px); color: var(--tdup-red); }

/* One question (or tip): a white row, heavy left edge, a square +/- button. */
.pg-acc { background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-left: 6px solid var(--tdup-charcoal); margin-bottom: 6px; }
.pg-acc[open] { border-left-color: var(--tdup-red); }
.pg-acc > summary { position: relative; display: flex; align-items: center; min-height: 60px; padding: 12px 70px 12px 18px; cursor: pointer; list-style: none; font-family: var(--tdup-font-title); font-stretch: 108%; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--tdup-charcoal); }
.pg-acc > summary::-webkit-details-marker { display: none; }
.pg-acc > summary:hover { background: var(--tdup-off-white); }
.pg-acc > summary::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--tdup-charcoal); color: var(--tdup-white); font: 700 22px/1 var(--tdup-font-title); }
.pg-acc[open] > summary::after { content: '\2212'; background: var(--tdup-red); }
.pg-acc__answer { padding: 6px 20px 20px 18px; border-top: 1px solid var(--tdup-rule); font-size: 17px; line-height: 1.6; color: var(--tdup-charcoal); }
.pg-acc__answer > :first-child { margin-top: 12px; }

/* ==========================================================================
   8. Careers
   ========================================================================== */
.pg-vacancies { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 24px 26px; background: var(--tdup-red); color: var(--tdup-white); }
.pg-vacancies h2 { margin: 0; font-size: 30px; color: var(--tdup-white); }
.pg-vacancies p { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.96); }
.pg-vacancies a.pg-vacancies__mail, .pg-vacancies a.pg-vacancies__mail:hover { display: inline-flex; align-items: center; min-height: 44px; color: var(--tdup-white); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.pg-vacancies a.pg-vacancies__mail:hover { text-decoration-thickness: 3px; }

/* ==========================================================================
   9. Installation: the guide's cover with its download
   ========================================================================== */
.pg-guide, .pg-guide:hover { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px; background: var(--tdup-charcoal-2); color: var(--tdup-white); text-decoration: none; }
.pg-guide img { display: block; width: 100%; max-width: 190px; height: auto; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35); transition: transform 0.25s; }
.pg-guide:hover img { transform: translateY(-5px) rotate(-1deg); }
.pg-guide__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.pg-guide__body strong { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; }
.pg-guide:hover .tdup-button--white { background: var(--tdup-sweep); }
@media (max-width: 480px) { .pg-guide, .pg-guide:hover { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 14px; } }

@media (prefers-reduced-motion: reduce) {
	.pg-rack img, .pg-rack__plain, .pg-guide img { transition: none; }
	.pg-rack a:hover img, .pg-rack a:hover .pg-rack__plain, .pg-guide:hover img { transform: none; }
}
@media print {
	.pg-sectors-list__ph, .pg-tiles, .pg-media { display: none; }
}

/* ==========================================================================
   10. Supplier Partnership (Howrah Ferrous)
   Bands in order: light (promise), charcoal (traceability), light (benefits),
   deep (standards), red (close). Photos only ever get maximums.
   ========================================================================== */
.pg-partner__photo { margin: 0; overflow: hidden; background: var(--tdup-ink); aspect-ratio: 3 / 2; min-width: 0; }
.pg-partner__photo--tall { aspect-ratio: 4 / 5; max-height: 640px; }
.pg-partner__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pg-partner__prose { margin-top: 20px; }
.pg-partner__close-h { margin-bottom: 18px; }
.pg-partner__close { max-width: 66ch; }
.pg-partner__close p strong { font-size: 1.12em; }
@media (max-width: 980px) { .pg-partner__photo--tall { aspect-ratio: 3 / 2; max-height: none; } }

/* The numbered "traced back to" plates. */
.pg-trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-trace li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: stretch; background: var(--tdup-ink); border: 1px solid rgba(255, 255, 255, 0.18); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.3; color: var(--tdup-white); }
.pg-trace li > span:last-child { padding: 18px 20px; display: flex; align-items: center; }
.pg-trace__n { display: flex; align-items: center; justify-content: center; background: var(--tdup-red); font-size: 32px; }
.pg-partner__note { margin: 20px 0 0; padding-left: 16px; border-left: 6px solid var(--tdup-red); font-size: 18px; line-height: 1.55; color: var(--tdup-white); max-width: 58ch; }

/* The four benefits: numbered red squares instead of icons. */
.pg-why { counter-reset: none; }
.pg-icon.ip-cap { font-size: 26px; line-height: 1; }

/* ISO 9001 / Kitemark: mark beside the words, on ink plates. */
.pg-std { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pg-std__item { display: flex; gap: 20px; align-items: flex-start; padding: 22px 24px; background: var(--tdup-ink); border: 1px solid rgba(255, 255, 255, 0.18); border-left: 8px solid var(--tdup-red); color: var(--tdup-white); min-width: 0; }
.pg-std__item img { flex: none; display: block; width: auto; height: 88px; max-width: 40%; }
.pg-std__title { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 32px); color: var(--tdup-white); }
.pg-std__item p { margin: 0; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.95); }
@media (max-width: 980px) { .pg-std { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .pg-std__item { flex-direction: column; } .pg-std__item img { max-width: 100%; } }

/* ---- Memberships page: one card per association ----
   Two to four cards share a row (auto-fit); ONE card (--1) lays its logo tile
   beside the text so a single membership still looks intentional. The logo
   sits on a white tile because association logos are full colour. */
.pg-members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.pg-member { display: flex; flex-direction: column; background: var(--tdup-ink); color: var(--tdup-white); border: 1px solid rgba(255, 255, 255, 0.18); border-top: 6px solid var(--tdup-red); }
.pg-member__logo { display: flex; align-items: center; justify-content: center; background: var(--tdup-white); padding: 20px; min-height: 140px; }
.pg-member__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 110px; }
.pg-member__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pg-member__name { margin: 0; font-size: clamp(22px, 2vw, 28px); color: var(--tdup-white); }
.pg-member__body p { margin: 0; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.95); }
.pg-member__link { margin-top: auto; align-self: flex-start; color: var(--tdup-white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pg-member__link:hover, .pg-member__link:focus-visible { text-decoration-thickness: 2px; }
@media (min-width: 720px) {
	.pg-members--1 .pg-member { flex-direction: row; }
	.pg-members--1 .pg-member__logo { flex: 0 0 min(34%, 360px); min-height: 0; }
	.pg-members--1 .pg-member__body { justify-content: center; padding: 24px 28px; }
}

/* ---- About Us: Sustainability / Net Zero band (page-about.php 6b, 2026-11-10) ----
   Moved from Technical Resources. Chris's banner is about 3:1 with words in it,
   so it spans the content column at a capped height (cover-cropped only a
   little) rather than sitting squashed in half a row. Underneath: the text, and
   the document card beside it on desktop. Same charcoal band, hairlines and
   red-arrow link language as the rest of the site. */
.pg-netzero__banner { margin: 0 0 28px; }
/* Natural shape (no fixed strip): Chris's banner has "NET ZERO" written into it, so a hard crop could clip the words.
   Only very wide screens trim a little top and bottom, anchored right where the words sit. */
.pg-netzero__banner img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: 75% 50%; }
.pg-netzero__body { display: grid; gap: 24px clamp(32px, 4vw, 64px); }
@media (min-width: 901px) {
	.pg-netzero__body--doc { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
}
/* The document card: white on charcoal, like the download cards elsewhere, the whole card is the link. */
.pg-netzero__doc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 18px 20px; background: var(--tdup-white); color: var(--tdup-charcoal); text-decoration: none; border-top: 4px solid var(--tdup-red); }
.pg-netzero__doc-icon { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--tdup-red); color: var(--tdup-white); }
.pg-netzero__doc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-netzero__doc-text strong { font-size: 17px; line-height: 1.3; }
.pg-netzero__doc-text span { font-size: 14px; color: var(--tdup-grey-3); /* 5.1:1 on white */ }
.pg-netzero__doc-go { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--tdup-font-title); font-stretch: 125%; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tdup-red); }
.pg-netzero__doc:hover .pg-netzero__doc-go, .pg-netzero__doc:focus-visible .pg-netzero__doc-go { text-decoration: underline; text-underline-offset: 4px; }