/* ==========================================================================
   VIP System: evidence.css
   The evidence pages: UV testing, case study, licence ends, Martyn's Law,
   cost and carbon, materials.

   NEEDS site.css LINKED FIRST. Tokens (colours, spacing, type scale),
   reset, buttons, header, footer and the contact modal all live there.

   CONTENTS
   1.  Talk to us band
   2.  Evidence pages: shared shell (hero, sections, headings, text)
   3.  Savings page
   4.  UV testing page, tables, grids, bulletin, two-text, stats cards,
       Martyn's Law, case study, materials
   5.  Responsive layout
   5a. Heading line lengths (replaces <br> in headings)
   5b. Responsive fixes: small laptops, tablets, phones
   6.  Print (used by "Print these results")
   ========================================================================== */


/* -----------------------------------------
   1. Talk to us: yellow band with heading, text and button
----------------------------------------- */
.main-talktous {
  background-color: var(--color-yellow);
  text-align: center;
  padding: clamp(2rem, 8vw, 4rem) 1.5rem clamp(4rem, 10vw, 8rem);
}

.main-talktous h2 {
  font-size: var(--fs-h-lg);
  line-height: 1.2;
  color: var(--color-grey-dark);
  font-weight: bold;
  max-width: 24ch;
  margin: 0 auto 2.5rem;
}

.main-talktous p {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-black);
  max-width: 45ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--section-y);
}

.main-talktous a {
  display: inline-block;
  max-width: 100%;
  background: var(--color-black);
  color: var(--color-white);
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 16px;
  padding: 1.25rem var(--btn-pad-x);
}


/* ==========================================================================
   2. EVIDENCE PAGES: shared shell
   Any evidence page can use these.
   ========================================================================== */

.evidence-page {
  font-family: var(--font-base);
}

/* -----------------------------------------
   Hero: photo behind a dark veil, white title
   Each page sets its own photo with a modifier (see section 3).
   The grey shows if the photo is missing or still loading.
----------------------------------------- */
.evidence-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(24rem, 35vw, 500px);
  background-color: var(--color-grey-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.evidence-hero-casestudy {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(24rem, 35vw, 500px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.evidence-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-grey-veil);
}

.evidence-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
  padding-left: max(var(--pad-x), calc((100% - var(--main-width)) / 2 + 1.5rem));
  padding-right: max(var(--pad-x), calc((100% - var(--main-width)) / 2 + 1.5rem));
}

/* Heroes with no small h2 label above the title (Materials, Bulletin-Licence).
   The space the label and its gap would take is added under the content
   instead, so the h1 sits at the same height as on the pages that have one.
   Tweak --hero-eyebrow-space if it needs nudging. */
.evidence-hero__inner:not(:has(> h2)) {
  --hero-eyebrow-space: calc(var(--fs-eyebrow) * 1.2 + 1rem);
  padding-bottom: calc(clamp(3.5rem, 6vw, 5rem) + var(--hero-eyebrow-space));
}

.evidence-hero h1,
.evidence-hero-casestudy h1 {
  font-size: clamp(2.1rem, 1.431rem + 2.97vw, 5rem);
  line-height: 1.1;
  font-weight: bold;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  overflow-wrap: anywhere;
}

.evidence-hero h2,
.evidence-hero-casestudy h2 {
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.evidence-hero h3,
.evidence-hero-casestudy h3 {
  font-size: var(--fs-h-lg);
  line-height: 1.2;
  font-weight: bold;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.evidence-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--color-white);
  max-width: 65ch;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.evidence-hero-casestudy::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--veil-light);
  z-index: 1;
}

.evidence-hero-casestudy > * {
  position: relative;
  z-index: 2;
}

.evidence-meta,
.evidence-meta-martyn {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3.5rem;
}

/* Label (dt) and value (dd) share a line: label in capitals, value as written */
.evidence-meta dt,
.evidence-meta dd,
.evidence-meta-martyn dt,
.evidence-meta-martyn dd {
  display: inline;
  font-size: 0.9rem;
  color: var(--color-white);
}

.evidence-meta dt,
.evidence-meta-martyn dt { text-transform: uppercase; }

.evidence-meta dd,
.evidence-meta-martyn dd { font-weight: bold; }

.evidence-meta .evidence-meta-item {
  padding-top: 3rem;
  margin-bottom: -2rem;
}

.evidence-meta-martyn .evidence-meta-item {
  padding-bottom: 2rem;
}

/* -----------------------------------------
   Sections: h2 is the small uppercase label,
   h3 is the big heading (same pattern as the main pages)
----------------------------------------- */
.evidence-section,
.evidence-section-grey,
.evidence-section-red,
.evidence-section-dark-grey {
  padding: var(--section-y) 0;   /* side spacing comes from the .wrap inside */
}

.evidence-section-grey {
  background-color: var(--color-grey-band);
}

.evidence-section-red {
  background-color: var(--color-red-tint);
}

.evidence-section-dark-grey {
  background-color: var(--color-grey-text);
}

.evidence-section h2,
.evidence-section-grey h2,
.evidence-related h2,
.link-card h3{
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey-muted);
  margin-bottom: 1rem;
}

.evidence-section-dark-grey h2 {
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 2rem;
}

.evidence-section h3,
.evidence-section-grey h3 {
  font-size: var(--fs-h-md);
  line-height: 1.15;
  font-weight: bold;
  color: var(--color-grey-heading);
  margin-bottom: 1.5rem;
}

.evidence-section-dark-grey h3 {
  font-size: var(--fs-h-md);
  line-height: 1.15;
  font-weight: bold;
  color: var(--color-white);
  margin-bottom: 2.5rem;
}

.evidence-section-red h2 {
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey-muted);
  margin-bottom: 1rem;
  margin-left: 3.5rem;
}

.evidence-section-red h3{
  font-size: var(--fs-h-md);
  line-height: 1.15;
  font-weight: bold;
  color: var(--color-black);
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

.evidence-lead {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-grey-text);
  max-width: 62ch;
  margin-bottom: 2rem;
}

/* Running text */
.evidence-prose p,
.evidence-section p,
.evidence-section-grey p,
.evidence-section-red p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 100ch;
  margin-bottom: 1.8rem;
}

.evidence-section-dark-grey p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-white);
  max-width: 100ch;
  margin-bottom: 1.8rem;
}

.evidence-prose p:last-child { margin-bottom: 0; }

.evidence-prose strong { color: var(--color-navy); }

/* Bullet list with small yellow squares */
.evidence-list,
.evidence-list-supplier,
.evidence-list-scheme {
  max-width: 150ch;
}

.evidence-list li,
.evidence-list-supplier li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  font-size: var(--fs-body);
  background-color: var(--color-white);
  line-height: 1.5;
}

.evidence-list-scheme li {
  position: relative;
  padding: 2rem;
  padding-left: 6.5rem;
  padding-right: 6rem;
  margin-bottom: 1rem;
  font-size: var(--fs-body);
  background-color: var(--color-white);
  line-height: 1.5;
}

.evidence-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-yellow);
  border: 1px solid var(--color-black);
  border-radius: 25px;
}

.evidence-list-supplier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1rem;
  height: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-black);
}

.evidence-list-scheme li::before {
  content: "";
  position: absolute;
  left: 3rem;
  top: 1.65em;
  width: 1rem;
  height: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-black);
}

.evidence-small {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 150ch;
  margin-bottom: 1.8rem;
}

/* Boxed note with a yellow edge (fills the .wrap column it sits in) */
.evidence-note {
  margin-top: var(--section-y);
  margin-bottom: var(--section-y);
  padding: var(--card-pad);
  background: var(--color-white);
  border-left: 7.5px solid var(--color-yellow);
  box-shadow: var(--shadow-card);
}


.evidence-note .btn {
  margin-top: 1.5rem;
}

.evidence-section-red-bordered {
  border-left: 5px solid;
  border-color: var(--color-red);
  padding-left: 3rem;
}

.evidence-section a {
  font-size: 1rem;
  font-style: italic;
  text-decoration: underline;
}

/* -----------------------------------------
   Related links: three cards with heading, text and link
----------------------------------------- */
.evidence-related {
  background-color: var(--color-grey-band);
  padding-top: var(--section-y-sm);
  padding-bottom: var(--section-y);
}

.evidence-related h2 {
  color: var(--color-grey-text);
  margin-bottom: 2.5rem;
}

.link-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
}

.link-card {
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  padding: 1.75rem;
}

.link-card h3 {
  color: var(--color-grey-text);
  margin-bottom: 0.5rem;
}

.link-card a {
  font-size: var(--fs-body-lg);
  color: var(--color-black);
  margin-top: 1rem;
  max-width: 20ch;
}


/* ==========================================================================
   3. SAVINGS PAGE
   ========================================================================== */

/* Hero photo: path is relative to this CSS file.
   Images/savings-hero.jpg does not exist yet. Add the photo, then remove
   the comment markers around the rule below. */
/* .evidence-page--savings .evidence-hero {
  background-image: url("Images/savings-hero.jpg");
} */

/* -----------------------------------------
   What this compares: five plates against one plate and five discs
----------------------------------------- */
.compare-box {
  width: var(--wrap);
  max-width: 1400px;
  margin: var(--section-y-sm) auto 0;
  padding: var(--card-pad);
  background: var(--color-grey-band);
  border-radius: 16px;
}

.compare-box h2 {
  font-size: var(--fs-h-sm);
  line-height: 1.2;
  font-weight: bold;
  color: var(--color-grey-text);
  margin-bottom: 1.5rem;
}

.compare-box__caption {
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 70ch;
  margin-bottom: 1.5rem;
}

/* Shared sizes for the plates and discs. Change the plate size and
   everything else (discs, spacing, overlap) follows. */
.compare-box {
  --compare-plate-size: clamp(15.5rem, 9vw, 20rem);
  --compare-disc-size: calc(var(--compare-plate-size) * 0.25);
  --compare-gap: clamp(0.5rem, 1.5vw, 1rem);
  --compare-disc-lift: calc(var(--compare-disc-size) * 0.25);
}

.compare-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--compare-gap);
  margin-bottom: 1.5rem;
}

/* Extra space under the label so the lifted discs don't touch it */
.compare-row--vip {
  row-gap: calc(var(--compare-gap) + var(--compare-disc-lift));
}

.compare-plate {
  position: relative;          /* disc 1 is pinned to this */
  display: grid;
  place-items: center;
  width: var(--compare-plate-size);
  height: clamp(5rem, 6vw, 8rem);
  aspect-ratio: 1;
  background: var(--color-white);
  border: 3px solid var(--color-black);
  border-radius: 8px;
  font-size: clamp(1.4rem, 3.5vw, 2.75rem);
  font-weight: bold;
}

.compare-disc {
  display: grid;
  place-items: center;
  width: var(--compare-disc-size);
  aspect-ratio: 1;
  background: var(--color-white);
  border: 3px solid var(--color-black);
  border-radius: 50%;
  font-size: calc(var(--compare-disc-size) * 0.5);
  font-weight: bold;
  line-height: 1;
  color: var(--color-black);
}

/* Disc 1: stuck over the top-right corner of the five-year plate */
.compare-disc--stuck {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transform: translate(50%, -25%);
}

/* Discs 2 to 5: each sits where the top-right corner of an invisible
   plate would be, so they line up with disc 1 and with hard plates 2 to 5 */
.compare-row--vip > .compare-disc {
  margin-top: calc(var(--compare-disc-lift) * -1);
  margin-left: calc(var(--compare-plate-size) - var(--compare-disc-size) / 1.5);
  margin-right: calc(var(--compare-disc-size) / -2);
}

/* -----------------------------------------
   Fleet size, print and share
----------------------------------------- */
.cost-calc__controls {
  width: var(--wrap);
  max-width: 1400px;
  margin: var(--section-y-sm) auto;
  padding-top: 1.5rem;
  border-top: 4px solid var(--color-yellow);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.cost-calc__field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-grey-muted);
}

.cost-calc__field input {
  width: 11rem;
  padding: 0.6rem 0.9rem;
  font-family: inherit;
  font-size: 1.9rem;
  font-weight: bold;
  color: var(--color-navy);
  background: var(--color-white);
  border: 2px solid var(--color-navy);
  border-radius: 10px;
}

.cost-calc__field input:focus { background: var(--color-yellow-focus); }

.cost-calc__edit {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-navy);
}

.cost-calc__hint {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-navy);
}

.cost-calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-left: auto;
}

.cost-calc__btn {
  padding: 0.75rem 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-black);
  background: var(--color-yellow);
  border: 2px solid var(--color-yellow);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cost-calc__btn:hover {
  background: var(--color-yellow-hover);
  border-color: var(--color-yellow-hover);
}

.cost-calc__btn--outline {
  color: var(--color-navy);
  background: var(--color-white);
  border-color: var(--color-navy);
}

.cost-calc__btn--outline:hover {
  color: var(--color-white);
  background: var(--color-navy);
  border-color: var(--color-navy);
}

/* "Link copied" message: takes its own line, empty most of the time */
.cost-calc__toast {
  flex-basis: 100%;
  min-height: 1.4em;
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-green);
}

/* -----------------------------------------
   Headline figures: dark bar with three yellow numbers
----------------------------------------- */
.cost-calc__stats {
  width: var(--wrap);
  max-width: 1400px;
  margin: 0 auto var(--section-y);
  padding: var(--card-pad);
  background: var(--color-grey-dark);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: center;
}

.cost-calc__stat-num {
  display: block;
  font-size: var(--fs-stat-sm);
  line-height: 1.1;
  font-weight: bold;
  color: var(--color-yellow);
}

.cost-calc__stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* -----------------------------------------
   Bottle walls (the bottles are drawn by vip-web.js)
----------------------------------------- */
.bottle-walls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10rem;
  align-items: start;
}

.bottle-walls h4 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bottle-walls__col--hard h4 { color: var(--color-rust); }
.bottle-walls__col--vip  h4 { color: var(--color-green); }

.bottle-wall {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  min-height: 6rem;
  padding: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
}

.bottle-wall__bottle {
  flex: none;
  width: 12px;
  height: 26px;
  fill: currentColor;
}

.bottle-walls__col--hard .bottle-wall { color: var(--color-rust-light); }
.bottle-walls__col--vip  .bottle-wall { color: var(--color-green-light); }

.bottle-walls__vs {
  align-self: center;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-grey-muted);
}

.bottle-walls__num {
  margin-top: 1rem;
  font-size: var(--fs-stat-sm);
  line-height: 1;
  font-weight: bold;
}

.bottle-walls__col--hard .bottle-walls__num { color: var(--color-rust); }
.bottle-walls__col--vip  .bottle-walls__num { color: var(--color-green); }

.bottle-walls__caption {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-grey-text);
}

/* -----------------------------------------
   Side-by-side comparison tables
----------------------------------------- */
.compare-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-md);
}

.compare-col {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  overflow: hidden;
}

.compare-col__head {
  padding: 2.5rem 1.5rem;
  background: var(--color-grey-panel);
  border-bottom: 1px solid var(--color-rule);
}

.compare-col__head h4 {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
}

.compare-col__head p {
  margin-top: 0.3rem;
  font-size: 1rem;
  color: var(--color-grey-text);
}

.compare-col--vip .compare-col__head {
  background: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

.compare-col--vip .compare-col__head h4 { color: var(--color-yellow); }
.compare-col--vip .compare-col__head p  { color: var(--color-navy-soft); }

.compare-col__rows { flex: 1; }

.compare-col__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-rule);
  font-size: 1.2rem;
}

.compare-col__row dt { color: var(--color-grey-text); }

.compare-col__row dd {
  font-weight: bold;
  text-align: right;
  white-space: nowrap;
}

.compare-col__foot {
  padding: 2.5rem 1.5rem;
  background: var(--color-grey-panel);
}

.compare-col--vip .compare-col__foot { background: var(--color-yellow); }

.compare-col__foot-label {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey-text);
}

.compare-col--vip .compare-col__foot-label { color: var(--color-yellow-text); }

.compare-col__foot-value {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.15rem;
  font-weight: bold;
}

/* ==========================================================================
   4. UV TESTING PAGE
   ========================================================================== */

.grid-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--wrap-max);
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.grid-card {
  background: var(--color-white);
  padding: 1.75rem;
}

.grid-card h2 {
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  color: var(--color-black);
  font-weight: bold;
  margin-bottom: 2rem;
}

.grid-card h3 {
  font-size: var(--fs-lead);
  line-height: 1.2;
  color: var(--color-grey-muted);
  font-weight: bold;
  margin-bottom: 2rem;
}

.grid-card p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  margin-top: 1rem;
}

/* -----------------------------------------
   Tables
----------------------------------------- */
.evidence-table-wrap { margin: 2.5rem 0 1.25rem; }

.evidence-table,
.evidence-table-jurisdiction,
.evidence-table-capacity {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2rem;
}

.evidence-table th,
.evidence-table td,
.evidence-table-jurisdiction th,
.evidence-table-jurisdiction td,
.evidence-table-capacity th,
.evidence-table-capacity td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.evidence-table thead th,
.evidence-table-jurisdiction thead th,
.evidence-table-capacity thead th {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-black);
}

.evidence-table tbody th{
  width: 30%;
  font-weight: bold;
  color: var(--color-black);
}

.evidence-table-jurisdiction tbody th {
  width: 20%;
  font-weight: bold;
  color: var(--color-black);
}

.evidence-table tbody td{
  width: 15%;
  height: 70px;
  color: var(--color-black);
}

.evidence-table-jurisdiction tbody td {
  width: 80%;
  height: 70px;
  color: var(--color-black);
}

.evidence-table tbody td:last-child {
  width: 40%;
  color: var(--color-black);
}
.evidence-table-capacity tbody th {
  width: 20%;
  font-weight: bold;
  color: var(--color-black);
  font-size: var(--fs-body-sm);
}

.evidence-table-capacity tbody td {
  width: 20%;
  height: 70px;
  color: var(--color-black);
  font-size: var(--fs-body-sm);
}

.evidence-table-capacity tbody td:last-child {
  width: 60%;
  color: var(--color-black);
}

.evidence-table thead,
.evidence-table-jurisdiction thead,
.evidence-table-capacity thead {
   background: var(--color-grey-table); 
}

.evidence-table tbody tr,
.evidence-table-jurisdiction tbody tr,
.evidence-table-capacity tbody tr {
  background-color: var(--color-white); 
}

.evidence-table tbody tr:nth-child(even), 
.evidence-table-jurisdiction tbody tr:nth-child(even) { 
  background: var(--color-grey-band); 
}

.evidence-table tbody tr:last-child { background: var(--color-red-tint); }

.evidence-table-wrap p {
  font-size: 1rem;
  max-width: 150ch;
  font-style: italic;
}

/* -----------------------------------------
   Grids
----------------------------------------- */

.four-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-md);
  padding-bottom: var(--section-y-sm);
}

.four-grid-card {
  background: var(--color-white);
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.four-grid-card-text p {
  font-size: var(--fs-body-sm);
  padding-top: 1rem;
  line-height: 1.5;
  color: var(--color-black);
}

/* ==========================================================================
   Bulletin-Licence Page
   ========================================================================== */

.four-headings-card {
  padding: 2rem;
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
  max-width: 160ch;
}

.four-headings-card h2 {
  font-size: 5rem;
}

.four-headings-card h3 {
  font-size: var(--fs-h-md);
  color: var(--color-black);
}

/* ==========================================================================
   Two-text
   ========================================================================== */

.two-text,
.two-text-casestudy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.two-text h3 {
  font-size: var(--fs-h-lg);
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.2;
  color: var(--color-white);
  max-width: 40ch;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.two-text p {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-white);
  max-width: 100ch;
  margin-bottom: 1.8rem;
}

.two-text-casestudy h3 {
  font-size: var(--fs-h-lg);
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.2;
  color: var(--color-black);
  max-width: 40ch;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.two-text-casestudy p {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 100ch;
  margin-bottom: 1.8rem;
}

.two-text-list {
  max-width: 150ch;
  color: var(--color-white);
}

.two-text-list li{
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.two-text-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1rem;
  height: 1rem;
  background: var(--color-yellow);
}

/* ==========================================================================
   Stats-cards
   ========================================================================== */

.stats-cards-licence {
  display: grid;
  gap: 1.5rem;
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.stats-cards-licence {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats-card-licence {
  background: var(--color-white);
  border-radius: 16px;
  padding: 1.75rem;
}

.stats-card-licence h2,
.stats-card-materials h2 {
  font-size: var(--fs-stat);
  line-height: 1.2;
  color: var(--color-grey-muted);
  font-weight: bold;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.stats-cards-casestudy,
.stats-cards-materials {
  display: grid;
  gap: 1.5rem;
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.stats-cards-casestudy,
.stats-cards-materials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-card-casestudy,
.stats-card-materials {
  border-radius: 16px;
  padding: 1.75rem;
}

.stats-card-casestudy h2 {
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  color: var(--color-orange);
  font-weight: bold;
  margin-bottom: 0.5rem;
  letter-spacing: 0.08em;
}

.stats-card-casestudy h3,
.stats-card-materials h3 {
  font-size: var(--fs-h-xs);
  line-height: 1.2;
  color: var(--color-black);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stats-card__border {
  border-left: 5px solid var(--color-yellow);
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   Martyn's Law Page
   ========================================================================== */

.list-grids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-md);
}

.list-grid {
  background: var(--color-white);
  padding: var(--card-pad);
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.list-yellow-box {
  display: grid;
  align-items: start;
  color: var(--color-white);
}

.list-casestudy {
  padding: var(--card-pad);
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: grid;
  align-items: start;
}

.list-grid li,
.list-yellow-box li {
  position: relative;
  padding: 2rem;
  padding-left: 3rem;
  padding-right: 6rem;
  margin-bottom: 1rem;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}

.list-casestudy li {
  position: relative;
  padding-left: 3rem;
  padding-right: 6rem;
  margin-bottom: 1rem;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}

.list-grid li::before,
.list-yellow-box li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 1.45em;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-yellow);
}

.list-casestudy li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.4em;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-yellow);
}

.where-things-stand {
  padding: 3rem;
  background-color: var(--color-white);
}

.where-things-stand h3 {
  font-size: var(--fs-h-md);
  color: var(--color-black);
  padding: 1rem;
  padding-bottom: 0rem;
}

.bullet-list {
  list-style: disc;
  padding-left: 3rem;
  padding-right: 6rem;
  margin-bottom: 1rem;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}

.bullet-list li {
  display: list-item;
  padding-left: 2rem;
}

.bullet-list li::marker {
  color: var(--color-black);
}

/* ==========================================================================
   Case Study Problem page
   ========================================================================== */

.evidence-grey-background {
  padding: var(--card-pad);
  background-color: var(--color-grey-text);
  border-radius: 40px;
}

.evidence-grey-background h2 {
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  color: var(--color-white);
  font-weight: bold;
  margin-bottom: 0.5rem;
  letter-spacing: 0.08em;
}

.evidence-grey-background h3 {
  font-size: var(--fs-h-lg);
  line-height: 1.2;
  color: var(--color-white);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.evidence-grey-background p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-white);
  max-width: 100ch;
  margin-bottom: 1.8rem;
}

/* ==========================================================================
   Materials page
   ========================================================================== */

.image-switch {
  background-color: var(--color-grey-band);
}

.left-switch,
.right-switch {
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
}

.image-switch h2 {
  font-size: var(--fs-h-md);
  line-height: 1.15;
  font-weight: bold;
  color: var(--color-grey-text);
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  letter-spacing: normal;
}

.left-switch img,
.right-switch img {
  padding: 1rem;
  max-width: 100%;
  height: auto;
  border-radius: 50px;
}

.image-switch-border {
  border-top: 5px solid var(--color-yellow);
  margin-top: 1.75rem;
  padding-top: 0.75rem;
}

.image-switch-border p {
  margin: 0;
  font-size: var(--fs-body-sm);
  font-weight: bold;
  color: var(--color-black);
}

.image-switch-border .label {
  color: var(--color-grey-muted);
  letter-spacing: 0.08em;
  margin-right: 0.35em;
}

.text-bordered {
  border-left: 5px solid var(--color-yellow);
}
.text-bordered h3 {
  padding-left: var(--card-pad);
  padding-top: var(--card-pad);
}
.text-bordered p {
  padding-left: var(--card-pad);
  padding-bottom: var(--card-pad);
}

/* ==========================================================================
   5. RESPONSIVE LAYOUT: EVIDENCE PAGES
   Font sizes and spacing already scale through the tokens in site.css.
   ========================================================================== */

/* Portrait tablets and below: side-by-side blocks stack */
@media (max-width: 900px) {
  .compare-cols,
  .bottle-walls {
    grid-template-columns: minmax(0, 1fr);
  }

  .bottle-walls__vs { align-self: start; }

  .cost-calc__actions { margin-left: 0; }
}

/* Phones */
@media (max-width: 640px) {
  .compare-box,
  .cost-calc__stats { border-radius: 12px; }

  .cost-calc__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .cost-calc__field,
  .cost-calc__field input,
  .cost-calc__actions { width: 100%; }

  .cost-calc__btn { flex: 1 1 auto; }

  .compare-col { border-radius: 12px; }

  .compare-col__head,
  .compare-col__row,
  .compare-col__foot {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .compare-col__row { font-size: 0.95rem; }

  .evidence-note { border-left-width: 5px; }

  .evidence-note .btn {
    display: block;
    text-align: center;
  }
}


/* ==========================================================================
   5a. HEADING LINE LENGTHS
   Replaces the <br> tags that used to force headings onto two lines.
   A max-width in ch (roughly one character each) breaks the heading at
   the same place on a laptop, and lets it wrap naturally on smaller
   screens instead of leaving a stray word on its own line.
   ========================================================================== */

/* Section headings */
.evidence-section > .wrap > h3,
.evidence-section-grey > .wrap > h3,
.evidence-section-red > .wrap > h3,
.evidence-section-dark-grey > .wrap > h3 {
  max-width: 28ch;
}

/* Savings page section headings are a little narrower */
.evidence-page--savings .wrap > h3 { max-width: 24ch; }

/* Headings beside a column of text */
.two-text h3,
.two-text-casestudy h3 { max-width: 22ch; }

/* Dark rounded panel (case study) */
.evidence-grey-background h3 { max-width: 24ch; }

/* Hero sub-heading (Martyn's Law) */
.evidence-hero h3 { max-width: 26ch; }

/* Per-heading overrides, for when the general width breaks in the
   wrong place. Add the class to the <h3> in the HTML. */
.evidence-page h3.heading-narrow { max-width: 22ch; }
.evidence-page h3.heading-wide   { max-width: 34ch; }

/* Hero titles that were split by hand. Scoped to their pages so the
   one-line titles elsewhere stay on one line. */
.evidence-page--casestudy-problem .evidence-hero-casestudy h1 { max-width: 24ch; }
.evidence-page--martynslaw .evidence-hero h1 { max-width: 31ch; }
.evidence-page--savings .evidence-hero h1 { max-width: 22ch; }


/* Gap between list items. This replaces the <br> tags that sat between
   the <li>s (not valid inside a <ul>): 1rem margin + one 1.5rem line. */
.evidence-list-supplier li,
.evidence-list-scheme li {
  margin-bottom: 2.5rem;
}

.evidence-list-supplier li:last-child,
.evidence-list-scheme li:last-child {
  margin-bottom: 1rem;
}


/* ==========================================================================
   5b. RESPONSIVE FIXES: small laptops, tablets and phones
   Added on top of everything above. No earlier rule has been edited.
   Every rule here sits inside a max-width media query, so the desktop
   layout (above 1280px) is exactly as it was.
   ========================================================================== */

/* -----------------------------------------
   Small laptops and below (1280px)
----------------------------------------- */
@media (max-width: 1280px) {

  /* 10rem gap between the bottle walls was too wide here */
  .bottle-walls { gap: var(--grid-gap-lg); }
}

/* -----------------------------------------
   Tablets (1024px)
----------------------------------------- */
@media (max-width: 1024px) {

  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Bulletin: big numbers beside the four headings */
  .four-headings-card {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 2rem;
    padding-left: 0;
    padding-right: 0;
  }

  .four-headings-card h2 {
    font-size: 3.75rem;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;   /* keeps "01" together */
  }

  /* Large right-hand padding on lists squeezed the text */
  .list-grid li,
  .list-yellow-box li,
  .list-casestudy li,
  .evidence-list-scheme li { padding-right: 2rem; }

  .bullet-list { padding-right: 0; }

  .where-things-stand { padding: var(--card-pad); }
}

/* -----------------------------------------
   Portrait tablets and below (900px):
   side-by-side blocks stack into one column
----------------------------------------- */
@media (max-width: 900px) {

  .two-text,
  .two-text-casestudy,
  .list-grids,
  .left-switch,
  .right-switch,
  .stats-cards-casestudy,
  .stats-cards-materials,
  .link-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .two-text,
  .two-text-casestudy { gap: 0.5rem; }

  /* Materials: image always sits above its text once stacked,
     whichever side it was on at desktop */
  .left-switch > img { order: -1; }

  .left-switch img,
  .right-switch img { border-radius: 24px; }

  /* Spacer <br>s that line up the two columns leave a gap once stacked */
  .image-switch br { display: none; }

  .stats-card__border { margin-bottom: 1rem; }

  .bottle-walls { gap: 1.5rem; }

  /* Forced line breaks in hero intros only suit wide screens */
  .evidence-hero__lead br {
    display: none;
  }
}

/* -----------------------------------------
   Phones (640px)
----------------------------------------- */
@media (max-width: 640px) {

  /* Hero meta: tighter, label above value */
  .evidence-meta { gap: 0 2rem; }

  .evidence-meta .evidence-meta-item {
    padding-top: 1rem;
    margin-bottom: 0;
  }

  .evidence-meta-martyn {
    gap: 0.75rem 2rem;
    margin-bottom: 1.5rem;
  }

  .evidence-meta-martyn .evidence-meta-item { padding-bottom: 0; }

  .evidence-meta dd,
  .evidence-meta-martyn dd { display: block; }

  /* Single-column grids */
  .grid-cards,
  .four-grid,
  .stats-cards-licence {
    grid-template-columns: minmax(0, 1fr);
  }

  .four-grid-card {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
  }

  .four-headings-card {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .four-headings-card h2 { font-size: 2.25rem; }

  /* Lists: smaller indents and bullets that line up with the first line */
  .list-grid li,
  .list-yellow-box li {
    padding: 0.5rem 0 0.5rem 2rem;
    margin-bottom: 0.5rem;
  }

  .list-grid li::before,
  .list-yellow-box li::before {
    left: 0;
    top: calc(0.5rem + 0.3em);
    width: 1rem;
    height: 1rem;
  }

  .list-casestudy {
    padding-left: 0;
    padding-right: 0;
  }

  .list-casestudy li {
    padding-left: 2rem;
    padding-right: 0;
  }

  .list-casestudy li::before {
    left: 0;
    top: 0.3em;
    width: 1rem;
    height: 1rem;
  }

  .evidence-list-scheme li { padding: 1.25rem 1.25rem 1.25rem 3rem; }

  .evidence-list-scheme li::before {
    left: 1.1rem;
    top: calc(1.25rem + 0.3em);
  }

  .bullet-list { padding-left: 1.25rem; }
  .bullet-list li { padding-left: 0.25rem; }

  .where-things-stand h3 { padding: 0 0 0.5rem; }

  /* Rounded panels and cards */
  .evidence-grey-background { border-radius: 20px; }
  .link-card { padding: 1.25rem; }

  .evidence-section-red h2 { margin-left: 0; }
  .evidence-section-red-bordered { padding-left: 1.25rem; }

  /* Savings: plate drawing shrinks so the stuck disc stays on screen */
  .compare-box { --compare-plate-size: min(15.5rem, 62vw); }

  /* Tables become stacked cards; each cell shows its column name
     from the data-label attribute already in the HTML */
  .evidence-table,
  .evidence-table-jurisdiction,
  .evidence-table-capacity {
    font-size: 1rem;
  }

  .evidence-table,
  .evidence-table tbody,
  .evidence-table tr,
  .evidence-table-jurisdiction,
  .evidence-table-jurisdiction tbody,
  .evidence-table-jurisdiction tr,
  .evidence-table-capacity,
  .evidence-table-capacity tbody,
  .evidence-table-capacity tr {
    display: block;
    width: 100%;
  }

  /* Column names move into each cell (below), so the header row goes */
  .evidence-table thead,
  .evidence-table-jurisdiction thead,
  .evidence-table-capacity thead {
    display: none;
  }

  .evidence-table tbody tr,
  .evidence-table-jurisdiction tbody tr,
  .evidence-table-capacity tbody tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-rule);
  }

  .evidence-table tbody th,
  .evidence-table tbody td,
  .evidence-table tbody td:last-child,
  .evidence-table-jurisdiction tbody th,
  .evidence-table-jurisdiction tbody td,
  .evidence-table-capacity tbody th,
  .evidence-table-capacity tbody td,
  .evidence-table-capacity tbody td:last-child {
    display: block;
    width: auto;
    height: auto;
  }

  .evidence-table tbody th,
  .evidence-table-jurisdiction tbody th,
  .evidence-table-capacity tbody th {
    padding: 0.9rem 1rem 0.25rem;
  }

  .evidence-table tbody td,
  .evidence-table-jurisdiction tbody td,
  .evidence-table-capacity tbody td {
    padding: 0.4rem 1rem 0.9rem;
  }

  .evidence-table td[data-label]::before,
  .evidence-table-jurisdiction td[data-label]::before,
  .evidence-table-capacity td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-grey-text);
  }
}


/* ==========================================================================
   6. PRINT
   "Print these results" prints the figures, not the menus and buttons.
   ========================================================================== */
@media print {
  body > header,
  body > footer,
  .contact-modal,
  .cost-calc__actions,
  .cost-calc__toast,
  .cost-calc__edit,
  .cost-calc__hint,
  .evidence-note .btn,
  .main-talktous {
    display: none !important;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .evidence-hero {
    min-height: 0;
    background: none !important;
  }

  .evidence-hero::before { display: none; }

  .evidence-hero h1,
  .evidence-hero__lead { color: var(--color-black); }

  .compare-box,
  .cost-calc__stats,
  .bottle-walls,
  .compare-col,
  .evidence-note {
    break-inside: avoid;
  }

  .compare-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   7. RESPONSIVE FIXES (October 2026)
   Added on top of everything above. No earlier rule has been edited.
   ========================================================================== */

/* Case study hero had no fallback colour: white title on white page
   while the photo loads, or on a slow phone connection */
.evidence-hero-casestudy { background-color: var(--color-grey-dark); }

/* Tablets: four-column tables were tight at 1.2rem text */
@media (max-width: 1024px) {
  .evidence-table,
  .evidence-table-jurisdiction,
  .evidence-table-capacity { font-size: 1rem; }
}

/* Portrait tablets: three big cost/carbon figures side by side could
   overflow their thirds on a large fleet size; stack them */
@media (max-width: 900px) {
  .cost-calc__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* Phones: comparison values were forced onto one line and could push
   past the edge of the card; let them wrap */
@media (max-width: 640px) {
  .compare-col__row dd { white-space: normal; }
}
/* ==========================================================================
   8. PHONE AND TABLET POLISH (October 2026)
   Every rule sits inside a max-width media query, so the desktop layout
   (above 1024px) is exactly as it was.
   ========================================================================== */

/* Tablets and below */
@media (max-width: 1024px) {
  /* Case study hero: the light veil left white text hard to read where
     the photo is cropped tight behind it on smaller screens */
  .evidence-hero-casestudy::before { background-color: var(--veil); }

  /* Savings: ".evidence-section p" outranked these, so the big bottle
     counts showed at body size with a large gap under them */
  .bottle-walls .bottle-walls__num {
    font-size: var(--fs-stat-sm);
    line-height: 1;
    margin: 1rem 0 0;
  }

  .bottle-walls .bottle-walls__caption {
    font-size: 1rem;
    margin: 0.4rem 0 0;
  }

  .bottle-walls .bottle-walls__vs { margin: 0; }

  /* Materials: line breaks that push the yellow border level with the
     photo on desktop. The photo shrinks on tablets, so drop them. */
  .desktop-spacer { display: none; }

  /* Stat cards: drop the space under the last paragraph */
  .stats-card-materials p:last-child,
  .stats-card-casestudy p:last-child { margin-bottom: 0; }
}

/* Portrait tablets and phones */
@media (max-width: 900px) {
  /* Materials rows: the row padding indented the text further than the
     rest of the page; line it up with the section gutter instead */
  .image-switch .left-switch,
  .image-switch .right-switch {
    padding: 0 0 var(--section-y-sm);
    row-gap: 1.25rem;
  }

  .image-switch > :last-child { padding-bottom: 0; }

  /* Materials photos fill the column, flush with the text */
  .image-switch .left-switch img,
  .image-switch .right-switch img {
    width: 100%;
    padding: 0;
  }

  .image-switch h2 { margin-top: 0; }

  /* Martyn's Law: the two lists stack into one, so remove the card
     padding that left a big hole between them */
  .list-grids:has(> .list-grid) { gap: 0; }

  .list-grids .list-grid { padding-top: 0; padding-bottom: 0; gap: 0; }
  .list-grids .list-grid:first-child { padding-top: var(--card-pad); }
  .list-grids .list-grid:last-child  { padding-bottom: var(--card-pad); }

  /* Related cards: the whole line of text is the link, so give it a
     bigger tap area */
  .link-card a { display: block; padding: 0.25rem 0; max-width: none; }
}

/* Phones */
@media (max-width: 640px) {
  .stats-card-materials,
  .stats-card-casestudy { padding: 1.25rem; }

  .stats-card__border { margin-bottom: 1rem; }

  /* Savings: comparison card heads and feet were padded for desktop */
  .compare-col__head,
  .compare-col__foot { padding-top: 1.25rem; padding-bottom: 1.25rem; }

  /* Materials: the "See the full results" link sits on its own line,
     so it gets a full-height tap area */
  .evidence-section > .wrap > a { display: inline-block; padding: 0.5rem 0; }
}