/* Everest Multi-Solutions — "weighbridge ledger" design system.
   Tokens, base, layout, components, pages, print. No inline styles anywhere: the CSP forbids them. */

@font-face {
  font-family: "Archivo Everest";
  src: url("../fonts/archivo-87-wght.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
/* Arial tuned to Archivo's metrics so the font swap does not move the layout. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 95.1%;
  ascent-override: 92.3%;
  descent-override: 22.1%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --ink: #0F3048;
  --navy: #1C4767;
  --jade: #2F6A5E;
  --jade-strong: #2A5F54;
  --viz: #1F8A70;
  --viz-lift: #2A9C80;
  --muted: #56636F;
  --paper: #F6F4EE;
  --card: #FFFFFF;
  --wash: #FBFAF6;
  --rule: #D8D2C4;
  --line: #7D868F;
  --sage: #79B396;
  --amber-ink: #8A5300;
  --amber-bg: #FBF1DE;
  --danger: #B42318;
  --danger-bg: #FDF2F1;
  --mist: #E8ECEF;
  --head: "Archivo Everest", "Archivo Fallback", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", "Liberation Mono", monospace;
  --s-1: clamp(.84rem, .8rem + .15vw, .9rem);
  --s0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --s1: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --s2: clamp(1.35rem, 1.2rem + .75vw, 1.75rem);
  --s3: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
  --s4: clamp(2.15rem, 1.5rem + 3vw, 3.75rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 6px;
  --lift: 0 1px 0 rgb(15 48 72 / .05), 0 14px 32px -16px rgb(15 48 72 / .35);
  --head-gap: .09em; /* extra word gap for the heading face: Archivo's own is .13 to .18em, so "workunder" nearly touches at 18 px; with this the measured gap averages .25em */
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Font weights: 400, 600 and 800 only (pinned in pages_test.php). Each further weight costs a cold font lookup in the page's first layout; the home page's Lighthouse Performance, runs interleaved with the old CSS, went from about 90 to 93 with this change alone. */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 400 var(--s0)/1.6 var(--body); }
main { flex: 1 0 auto; } /* a short page (404) pushes the footer to the bottom of the screen */
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--jade); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--jade-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 3px; }
.site-footer :focus-visible, .buyers :focus-visible, .proof :focus-visible { outline-color: #fff; }
main:focus { outline: none; }
h1, h2, h3 { margin: 0 0 .5em; font-family: var(--head); color: var(--navy); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
h1, h2, h3, .faq summary, .law p, .calc-step legend, .footer-name, .download-text strong, .viz figcaption strong, .figures dd { word-spacing: var(--head-gap); } /* every line set in the heading face, not only the headings */
.faq summary, .law p, .footer-name { text-wrap: pretty; } /* the wider gap tips a last word onto a line of its own for 9 to 20 px of width (a 360 px phone, the quote, the footer name): pretty keeps two words together; balance would break "Multi-Solutions" at its hyphen */
h1 { font-size: var(--s4); font-weight: 800; }
h2 { font-size: var(--s3); font-weight: 800; }
h3 { font-size: var(--s1); font-weight: 800; line-height: 1.25; }
p, ul, ol, dl, figure, blockquote { margin: 0 0 1rem; }
p { max-width: 68ch; }
strong { font-weight: 600; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; } /* .field, .two, .btn set display; the hidden attribute must still win */
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: #fff; border-radius: var(--radius); }
.skip-link:focus { top: 1rem; color: #fff; }
.wrap { width: min(72rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }
.section-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head > p:last-child:not(.field-label) { margin: 0; font-size: var(--s1); color: var(--muted); }
.field-label { margin: 0 0 .75rem; font: 600 .78rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field-label b { margin-right: .5em; color: var(--jade); font-weight: 800; } /* <b> alone is bolder than its 600 parent, which is 900: a weight no other text uses */
.fine { font-size: var(--s-1); color: var(--muted); }
.notice { padding: 1rem 1.25rem; border-left: 4px solid var(--amber-ink); border-radius: var(--radius); background: var(--amber-bg); color: var(--amber-ink); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .75rem 1.2rem; border: 2px solid transparent; border-radius: var(--radius); font: 600 1rem/1.15 var(--body); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.btn-primary { background: var(--jade); color: #fff; }
.btn-primary:hover { background: var(--jade-strong); color: #fff; }
.btn-secondary { border-color: var(--navy); background: var(--card); color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--paper); color: var(--navy); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---- header ---- */
.site-header { background: var(--card); border-bottom: 1px solid var(--rule); }
.header-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .6rem; }
.brand { display: flex; align-items: center; gap: .6rem; min-height: 48px; margin-right: auto; color: var(--navy); text-decoration: none; }
.brand img { width: 40px; height: 40px; }
.brand-name { display: grid; font: 800 1.3rem/1 var(--head); letter-spacing: .01em; }
.brand-name small { font: 600 .8rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.site-nav { order: 3; width: 100%; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 .25rem; margin: 0; padding: 0 0 .25rem; list-style: none; }
.site-nav a { display: block; padding: .7rem .75rem; border-radius: 4px; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { background: var(--paper); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--jade-strong); box-shadow: inset 0 -3px 0 var(--jade); }
.header-call { display: none; }
.header-cta { white-space: nowrap; }
.header-cta .short { display: none; }
.header-cta-end { display: none; } /* the Pickup link is in the markup twice so Tab follows the eye: after the logo below 64em, last from 64em */
.menu-btn { display: none; } /* shown below 48em */
@media (max-width: 36em) { .header-cta .long { display: none; } .header-cta .short { display: inline; } } /* beside the Menu button the long label needs 577 px */
@media (max-width: 30em) { .header-bar { column-gap: .5rem; } .brand-name small { display: none; } } /* the 12.8 px subtitle no longer fits beside Pickup and Menu */
@media (max-width: 23em) { .brand { gap: .4rem; } .brand img { width: 34px; height: 34px; } .brand-name { font-size: 1.15rem; } } /* 368 px and under: logo, Pickup and Menu still share one row at 320 */
@media (max-width: 47.99em) { /* phones: logo, Pickup and Menu share one row and the list opens under it. The row ships collapsed, so nothing moves when site.js arrives late; with scripting off, nojs.css (in a <noscript>) undoes this */
  .menu-btn { display: inline-flex; padding-inline: .75rem; }
  .menu-btn[aria-expanded="false"] ~ .site-nav { display: none; }
  .header-bar { padding-bottom: .6rem; }
  .menu-btn:hover { background: var(--card); color: var(--navy); } /* a tap leaves :hover on, so the fill must follow aria-expanded alone */
  .menu-btn[aria-expanded="true"] { background: var(--navy); color: #fff; }
}
@media (max-width: 23.5em) { .header-cta, .menu-btn { padding-inline: .4rem; } } /* 376 px and under: the solar page's "Site visit" is 13 px wider than "Pickup", and a desktop window's 15 px scrollbar takes 15 more. Measured with that scrollbar the row had 1.3 to 3.3 px to spare at 333 to 335 px, 1.6 to 5.6 at 369 to 373 and 4.3 at 320; now 6 or more at every width */
@media (min-width: 64em) { .header-bar { flex-wrap: nowrap; padding-block: .5rem; column-gap: .5rem; } .site-nav { order: 0; width: auto; } .site-nav ul { padding: 0; } .header-cta-start { display: none; } .header-cta-end { display: inline-flex; } }
@media (min-width: 70em) {
  .site-header { position: sticky; top: 0; z-index: 20; }
  .header-call { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding-inline: .25rem; color: var(--navy); font: 600 .95rem var(--mono); text-decoration: none; white-space: nowrap; }
}

/* ---- hero + receipt ---- */
.hero { padding-block: clamp(2.25rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); background: repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), rgb(28 71 103 / .07) calc(2rem - 1px) 2rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 75em) { .hero-grid { grid-template-columns: 37.75rem minmax(0, 1fr); } } /* the h1's longest line, "recyclables free — and", needs 601 px and the old 1.1fr column was 583 to 598: the copy column is 604 px and the photo takes the rest */
.hero h1 { word-spacing: .045em; } /* a 60 px headline needs less extra word gap than 18 px ones: .20em measured, and the h1 keeps 3 lines */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .4rem .75rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--jade-strong); font: 600 .78rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--viz); }
.lead { max-width: 38rem; font-size: var(--s1); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1rem; }
.hero-note { font-size: var(--s-1); color: var(--muted); }
.hero-visual { display: grid; justify-self: center; width: 100%; max-width: 34rem; padding-bottom: 2.5rem; }
.hero-photo { grid-area: 1 / 1; margin-left: 12%; overflow: hidden; border-radius: var(--radius); box-shadow: var(--lift); }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ticket-wrap { grid-area: 1 / 1; align-self: end; width: min(19rem, 88%); margin-bottom: -2.5rem; filter: drop-shadow(0 12px 18px rgb(15 48 72 / .22)); }
.ticket { margin: 0; padding: 1.4rem 1.25rem 1rem; border-radius: 0 0 var(--radius) var(--radius); background: var(--card); font-family: var(--mono); font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / 16px 100%;
  mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / 16px 100%; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; padding-bottom: .75rem; border-bottom: 2px dashed var(--rule); color: var(--navy); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stamp { padding: .3rem .45rem; border: 2px solid var(--jade); border-radius: 4px; color: var(--jade-strong); font-size: .8rem; letter-spacing: .12em; transform: rotate(-5deg); }
.ticket-rows { margin: 0; }
.ticket-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .9rem; }
.ticket-rows dt { color: var(--muted); }
.ticket-rows dd { margin: 0; font-weight: 600; }
.ticket-rows .ticket-total { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--ink); }
.ticket-rows .ticket-total dt, .ticket-rows .ticket-total dd { color: var(--ink); font-weight: 800; }
.ticket-foot { margin: .75rem 0 0; color: var(--muted); font-size: .75rem; }
@media (prefers-reduced-motion: no-preference) {
  .ticket-rows div { animation: print-line .45s cubic-bezier(.2, .7, .2, 1) both; }
  .ticket-rows div:nth-child(2) { animation-delay: .15s; }
  .ticket-rows div:nth-child(3) { animation-delay: .3s; }
  .ticket-rows div:nth-child(4) { animation-delay: .45s; }
  @keyframes print-line { from { opacity: 0; transform: translateY(-.4rem); } }
}
/* Single-column hero: the photo shows in full and the receipt overlaps only its bottom edge. */
@media (max-width: 74.99em) {
  .hero-visual { padding-bottom: 0; }
  .hero-photo { margin-left: 0; }
  .hero-photo img { aspect-ratio: 16 / 9; }
  .ticket-wrap { grid-area: auto; justify-self: end; width: min(19rem, 92%); margin: -2.5rem .75rem 0 0; }
}

/* ---- proof strip ---- */
.proof { background: var(--ink); color: #fff; }
.proof ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-block: 0; padding: 0; list-style: none; }
.proof li { display: flex; align-items: center; gap: .75rem; padding: 1.1rem .5rem; font-weight: 600; }
.proof .icon { width: 1.5rem; height: 1.5rem; color: var(--sage); }

/* ---- grade ledger ---- */
.ledger { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); container-type: inline-size; }
.ledger-head { display: none; }
.ledger-list { margin: 0; padding: 0; list-style: none; }
.ledger-item { display: grid; grid-template-columns: 2.25rem 1fr; gap: .35rem .75rem; padding: 1.1rem 1rem; border-top: 1px solid var(--rule); }
.ledger-item:first-child { border-top: 0; }
.ledger-no { grid-row: span 3; color: var(--jade); font: 800 1rem/1.6 var(--mono); }
.ledger-mat { display: flex; align-items: center; gap: .85rem; }
.ledger-mat img { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; }
.ledger-mat h3 { margin: 0; font-size: 1.1rem; }
.ledger-item p { margin: 0; }
.ledger-k { color: var(--muted); font-weight: 600; }
@container (min-width: 44rem) {
  .ledger-head, .ledger-item { grid-template-columns: 3rem minmax(14rem, 1.1fr) 1.4fr 1fr; align-items: center; gap: 1.25rem; padding: .9rem 1.25rem; }
  .ledger-head { display: grid; border-bottom: 1px solid var(--rule); border-radius: var(--radius) var(--radius) 0 0; background: var(--wash); color: var(--muted); font: 600 .8rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .ledger-no { grid-row: auto; }
  .ledger-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.after-ledger { margin-top: 1.25rem; }

/* ---- steps ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem 2rem; margin: 0; padding: 0; list-style: none; }
.step { padding-top: 1rem; border-top: 2px dashed var(--rule); }
.step-no { display: block; margin-bottom: .6rem; color: var(--jade); font: 800 2rem/1 var(--mono); }
.step p { margin: 0; }
.minimum { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2.5rem; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-left: 4px solid var(--jade); border-radius: var(--radius); background: var(--card); }
.minimum .icon { width: 1.75rem; height: 1.75rem; color: var(--jade); }
.minimum p { margin: 0; }

/* ---- compliance ---- */
.compliance-grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 56em) { .compliance-grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.law { margin: 1.25rem 0 1.5rem; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--navy); color: var(--navy); font: 600 var(--s1)/1.45 var(--head); }
.law p { margin: 0 0 .4rem; }
.law footer { color: var(--muted); font: 600 .8rem var(--mono); }
.docs { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.doc { display: grid; grid-template-columns: 2.5rem 1fr; gap: .2rem 1rem; padding: 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.doc .icon { grid-row: span 2; width: 2.5rem; height: 2.5rem; color: var(--navy); }
.doc h3 { margin: 0; font-size: 1.05rem; }
.doc p { margin: 0; color: var(--muted); font-size: var(--s-1); }

/* ---- gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.gallery figure { height: 100%; margin: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding: .65rem .85rem; color: var(--muted); font: 600 .8rem/1.4 var(--mono); }
@media (max-width: 35.99em) { .gallery { grid-template-columns: 1fr 1fr; } } /* two across on phones: the four photos take about 570 px, not 1,400 */

/* ---- yard ---- */
.yard { background: var(--card); }
.yard-grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 56em) { .yard-grid { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.yard-card { padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.yard-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.yard-card h3:not(:first-child) { margin-top: 1.5rem; }
.hours { display: grid; gap: .4rem; margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hours div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; } /* a column too narrow for label and time puts the time under the label; the label itself never breaks ("Monday –" / "Friday" at 208 to 224 px) */
.hours dt { color: var(--muted); }
.hours dd { margin: 0; font-weight: 600; white-space: nowrap; }

/* ---- buyers band ---- */
.buyers { padding-block: 2rem; background: var(--navy); color: #fff; }
.buyers-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.buyers h2 { margin-bottom: .35rem; color: #fff; font-size: var(--s2); }
.buyers p { margin: 0; color: var(--mist); }

/* ---- FAQ ---- */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary, .more-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; color: var(--navy); list-style: none; cursor: pointer; } /* also the form toggle's summary (request form section) */
.faq summary::-webkit-details-marker, .more-details summary::-webkit-details-marker { display: none; }
.faq summary::after, .more-details summary::after { content: "+"; content: "+" / ""; flex: none; color: var(--jade); font: 600 1.6rem/1 var(--mono); }
.faq summary { padding: 1rem 0; font: 800 var(--s1)/1.3 var(--head); }
.faq summary::after { transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1rem; }

/* ---- request form ---- */
.request-grid { display: grid; gap: 2rem; }
@media (min-width: 62em) { .request-grid { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } .contact-card { position: sticky; top: 5.5rem; align-self: start; } } /* a fixed-width card keeps the email and the hours on one line; it follows the long form */
.form-card { padding: clamp(1.25rem, 3.5vw, 2.25rem); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); box-shadow: var(--lift); }
.field { display: grid; gap: .35rem; align-content: start; min-width: 0; margin: 0 0 1.15rem; }
fieldset.field { padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; color: var(--ink); font-weight: 600; }
.optional { color: var(--muted); font-weight: 400; }
.hint { margin: 0; color: var(--muted); font-size: var(--s-1); }
.field input:not([type="radio"], [type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem; border: 1.5px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font: inherit; }
.field input:not([type="radio"], [type="checkbox"]), .field select { height: 3.25rem; } /* one height for every text-like field; the textarea keeps its rows */
.field textarea { min-height: 7.5rem; max-height: 65vh; resize: vertical; } /* a long hand-off list scrolls inside its box instead of filling the screen */
@media (min-width: 48em) { /* a field's width says how long its answer is; phones keep full-width fields */
  .field input[type="tel"], .field input[type="date"], .field select { max-width: 16rem; }
  .field input[type="email"], #f-organisation, #f-location, .field textarea { max-width: 32rem; }
  form.enquiry .btn-block { width: auto; min-width: 16rem; }
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--jade); outline-offset: 1px; border-color: var(--jade); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.field-error { margin: 0; color: var(--danger); font-size: var(--s-1); font-weight: 600; }
.two { display: grid; gap: 0 1rem; }
@media (min-width: 36em) { .two { grid-template-columns: 1fr 1fr; } }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem .95rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; } /* 45 px tall, above the 44 px target; the 52 px fields would otherwise push the closed pickup form past 1,460 px at 375 px */
.choice input:checked + span { border-color: var(--jade); background: var(--jade); color: #fff; }
.choice input:checked + span::before { content: "✓"; content: "✓" / ""; font-weight: 800; }
.choice input:focus-visible + span { outline: 3px solid var(--jade); outline-offset: 2px; }
.choice input[aria-invalid="true"] + span { border-color: var(--danger); }
.check-label { display: flex; align-items: flex-start; gap: .65rem; font-weight: 600; cursor: pointer; }
.check-label input { flex: none; width: 1.35rem; height: 1.35rem; margin: .15rem 0 0; accent-color: var(--jade); }
.advisory { padding: .75rem 1rem; border-radius: 4px; background: var(--amber-bg); color: var(--amber-ink); font-size: var(--s-1); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-errors { margin-bottom: 1.25rem; padding: 1rem 1.25rem; border: 2px solid var(--danger); border-radius: var(--radius); background: var(--danger-bg); }
.form-errors p { margin: 0 0 .5rem; color: var(--danger); font-weight: 800; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors a { color: var(--danger); }
.form-done h3 { font-size: var(--s2); }
.form-done .ref { color: var(--navy); font: 800 1.5rem/1 var(--mono); letter-spacing: .04em; }
/* a form's optional fields sit behind one native details toggle: a full-width 48 px tap target with a plus/minus cue; it works without JavaScript */
.more-details { margin: 0 0 1.15rem; }
.more-details summary { padding: .5rem .85rem; border: 1.5px dashed var(--line); border-radius: 4px; background: #fff; font-weight: 600; }
.more-details[open] summary { margin-bottom: 1.15rem; border-style: solid; }
.more-details[open] summary::after { content: "−"; content: "−" / ""; }
.more-details > .field:last-child { margin-bottom: 0; }
.contact-card { padding: 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.contact-card h3 { font-size: 1.05rem; }
.contact-list { display: grid; gap: .25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.contact-list a, .contact-list span { display: flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--jade-strong); text-decoration: underline; }
.contact-list .icon { color: var(--jade); }

/* ---- footer ---- */
.site-footer { padding-block: 3rem 1.5rem; background: var(--ink); color: var(--mist); }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem; }
.footer-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .85rem; border-radius: 50%; background: #fff; }
.footer-mark img { width: 42px; height: 42px; }
.footer-name { margin: 0; color: #fff; font: 800 1.1rem/1.3 var(--head); }
.footer-tag { color: var(--sage); font: 600 .8rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.footer-h { margin: 0 0 .75rem; color: var(--sage); font: 600 .76rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.footer-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.footer-list a { display: inline-block; padding-block: .6rem; } /* 24 px or taller, as the links in .footer-base */
.site-footer .hours { font-size: var(--s-1); }
.site-footer .hours dt { color: var(--mist); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .15); font-size: var(--s-1); }
.footer-base p { margin: 0; }
.footer-base ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.footer-base a { display: inline-block; padding-block: .6rem; }

/* ---- mobile action bar ---- */
.action-bar { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: .5rem; padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); background: var(--card); box-shadow: 0 -8px 20px -14px rgb(15 48 72 / .45); }
.action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 52px; border-radius: var(--radius); color: var(--navy); font-size: .82rem; font-weight: 600; text-decoration: none; }
.action-bar a.is-primary { background: var(--jade); color: #fff; }
.action-bar .icon { width: 1.35rem; height: 1.35rem; }
@media (max-width: 47.99em) { html { scroll-padding-bottom: 5rem; } body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 48em) { .action-bar { display: none; } }

/* ---- solar calculator ---- */
.hero-solar { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.calc-grid { display: grid; gap: 2rem; }
@media (min-width: 62em) { .calc-grid { grid-template-columns: 1fr 1fr; align-items: start; } .results { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; scroll-padding-block: 1rem; } }
.calc, .results { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.results { box-shadow: var(--lift); }
@media (min-width: 48em) { #site-town { max-width: 22rem; } } /* the 16rem a date field gets clipped "Kathwana — Tharaka-Nithi" (206 px of text); phones keep the full width */
.calc-step { min-width: 0; margin: 0 0 1.75rem; padding: 0; border: 0; }
.calc-step legend { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; padding: 0; color: var(--navy); font: 800 var(--s1)/1.2 var(--head); }
.calc-step legend .step-no { margin: 0; font-size: 1rem; }
.calc-mode { margin-top: 1rem; }
.calc-step .tariff-kind { margin-bottom: 0; } /* the Home / Business chips close step 01; the step's own margin spaces it from step 02 */
.calc-step .tariff-kind legend { display: block; margin: 0; color: var(--ink); font: 600 var(--s0)/1.6 var(--body); word-spacing: normal; } /* a field's label like "Bill, KES", not a step title (.calc-step legend) */
.calc-mode[data-mode="appliances"]:not([hidden]) + .tariff-kind { margin-top: .5rem; } /* the appliance list ends flush; the bill fields above already leave a gap */
.add-list { display: flex; align-items: end; gap: .5rem; margin: .75rem 0 1rem; }
.add-list .field { flex: 1 1 auto; max-width: 24rem; margin: 0; }
.add-list .field select { max-width: none; } /* the longest name, "Air conditioner (12,000 BTU)", needs the room */
.add-list .btn { flex: none; min-height: 3.25rem; }
.rows { margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.row { display: grid; grid-template-columns: repeat(3, minmax(0, 8rem)) auto; grid-template-areas: "name name name remove" "w q h remove"; gap: .35rem .5rem; padding: .75rem 0; border-top: 1px solid var(--rule); }
@container (max-width: 17.5rem) { /* a 320 px phone: the three inputs share the whole row so a 5-digit value fits, and the remove button moves up beside the name */
  .row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name name remove" "w q h"; }
  .row .remove { justify-self: end; }
}
.row-name { grid-area: name; font-weight: 600; }
.row-field { display: grid; gap: .2rem; align-content: end; } /* a wrapped label (Hours a day at 375 px) must not push its input below its neighbours' */
.row-field > span { color: var(--muted); font: 600 .8rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.row-field input { width: 100%; min-height: 44px; padding: .4rem .5rem; border: 1.5px solid var(--line); border-radius: 4px; font: 600 .95rem var(--mono); }
.row .remove { grid-area: remove; align-self: center; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--danger); font-size: 1.4rem; cursor: pointer; }
.results h2 { font-size: var(--s2); }
#to-visit { margin-bottom: 1.25rem; } /* the button sits under the figures, above the chart */
.results-empty { color: var(--muted); }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 1.25rem; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--rule); }
.figures div { padding: .9rem; background: var(--card); } /* square: the wider word gap of the heading face made "14.8 kWh" wrap at 320 px, in a cell 2 px short */
.figures dt { color: var(--muted); font: 600 .8rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.figures dd { margin: .3rem 0 0; color: var(--navy); font: 800 clamp(1.25rem, 5.5vw, 1.6rem)/1.1 var(--head); overflow-wrap: anywhere; }
.figures dd.sub { margin-top: .25rem; color: var(--muted); font: 400 .8rem/1.4 var(--body); word-spacing: normal; } /* body face: the heading face's extra gap is not for it */
.savings { padding: .75rem 1rem; border-left: 4px solid var(--jade); border-radius: 4px; background: var(--paper); font-size: var(--s-1); line-height: 1.4; } /* small, close-set type: the estimate says what it is made of, and at body size that pushed the hand-off button out of the card's first screen at 1024 x 768 and 1280 x 720 (check_behaviour.mjs measures it) */
.note { padding: .75rem 1rem; border-radius: 4px; background: var(--amber-bg); color: var(--amber-ink); font-size: var(--s-1); }
.viz { position: relative; margin: 0 0 1.25rem; padding: 1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.viz figcaption strong { display: block; color: var(--navy); font-family: var(--head); font-size: 1.05rem; }
.viz-sub { color: var(--muted); font-size: var(--s-1); }
.viz-key { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .25rem; color: var(--ink); font-size: var(--s-1); }
.viz-key::before { content: ""; width: 1.25rem; height: 2px; background: var(--ink); }
.viz-plot { position: relative; }
.viz-plot svg { width: 100%; height: auto; overflow: visible; }
.viz .grid { stroke: #E7E3DA; stroke-width: 1; }
.viz .axis { fill: var(--muted); font: 600 12px var(--mono); pointer-events: none; }
.viz .bar { fill: var(--viz); }
.viz .month:hover .bar, .viz .month:focus .bar { fill: var(--viz-lift); }
.viz .hit { fill: transparent; }
.viz .month:focus { outline: none; }
.viz .month:focus-visible .hit { stroke: var(--jade); stroke-width: 2; }
.viz .need { stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.viz .value { fill: var(--ink); font: 800 11px var(--mono); pointer-events: none; }
.viz-tip { position: absolute; z-index: 2; padding: .45rem .6rem; border-radius: 4px; background: var(--ink); color: #fff; font: 600 .78rem/1.35 var(--mono); white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); }
.viz-tip strong { display: block; font-size: .95rem; }
.viz-table summary, .assumptions summary { display: flex; align-items: center; min-height: 44px; color: var(--jade-strong); font-weight: 600; cursor: pointer; }
.viz-table table { width: 100%; border-collapse: collapse; font: .85rem var(--mono); font-variant-numeric: tabular-nums; }
.viz-table th, .viz-table td { padding: .35rem .5rem; border-top: 1px solid var(--rule); text-align: right; }
.viz-table th { font-weight: 600; } /* a th is bold 700 by default */
.viz-table th:first-child, .viz-table td:first-child { text-align: left; }
.assumptions { margin-top: 1.25rem; font-size: var(--s-1); }
.assumptions ul { max-width: 62ch; padding-left: 1.2rem; } /* 62ch of this smaller type is about 83 characters a line, as 68ch is for body text; 68ch here ran to 91 */

/* ---- solar photos: three openly licensed photos, each credited (spec 5.4) ---- */
.hero-solar .solar-photo { display: none; } /* the hero photo shows only beside the copy: below 62em it pushed the calculator's first field from 1.09 to 1.51 screens on a phone and made the photo the LCP element (+0.3 s on Slow 4G with a 4x slower CPU). The markup swaps in a 1x1 GIF there, so nothing is fetched either */
@media (min-width: 62em) { .hero-solar .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .hero-solar .solar-photo { display: block; } }
.solar-photo { margin: 0; }
.solar-photo img { width: 100%; border-radius: var(--radius); object-fit: cover; }
.hero-solar .solar-photo img { aspect-ratio: 3 / 2; }
.credit { margin: .5rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.credit a { white-space: nowrap; } /* "Wikimedia Commons" and the licence name wrap as one piece, never split across two lines */
.band-grid { display: grid; gap: 2rem; } /* the calculator's own gap, so from 62em the two photos sit exactly over its two cards */
@media (min-width: 36em) { .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.band-grid img { aspect-ratio: 4 / 3; }

/* ---- text pages ---- */
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) 1rem; }
.page-head .wrap { max-width: 46rem; } /* the same centred column as .prose, so the title and the text start at one edge */
.meta { color: var(--muted); font: 600 .85rem var(--mono); }
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; font-size: var(--s2); }
.prose h3 { margin-top: 1.5rem; }
.prose li { max-width: 68ch; margin-bottom: .35rem; }
.toc { margin-bottom: 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.toc ol { margin: 0; padding-left: 1.25rem; columns: 2 14rem; }
.toc a { display: inline-block; padding-block: .3rem; }
.not-found { padding-block: clamp(3rem, 10vw, 7rem); }
.not-found .fine a { display: inline-block; padding-block: .6rem; } /* the 404 page's WhatsApp link is its one action besides the buttons: a target 24 px or taller, as the footer's links */

/* ---- procurement downloads ---- */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.download { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 1rem; min-height: 48px; padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; }
.download:hover { border-color: var(--jade); color: var(--ink); }
.download .icon { width: 2.25rem; height: 2.25rem; color: var(--navy); }
.download .icon:last-child { width: 1.25rem; height: 1.25rem; color: var(--jade); }
.download-text { display: grid; gap: .15rem; }
.download-text strong { color: var(--navy); font: 800 1.05rem/1.25 var(--head); }
.download-meta { color: var(--muted); font-size: var(--s-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  body { display: block; padding: 0; background: #fff; font-size: 10pt; } /* the screen layout is a flex column (sticky footer); a printed page is not */
  .site-header, .site-footer, .action-bar, .skip-link, .no-print { display: none !important; }
  a { color: inherit; text-decoration: none; }
  .proof, .buyers { background: none; color: var(--ink); }
  .buyers h2, .buyers p { color: var(--ink); }
  .btn-primary { background: none; color: var(--ink); border-color: currentColor; }
}