/* ==========================================================================
   VIP System: mainpages.css
   Security, How We Work, Products, Sustainability, About Us, Issue on
   Demand, Ready to Issue and the other main pages.

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

   CONTENTS
   1.  Main pages: shell, hero, lead, stats, image/text rows, supply,
       related, talk to us, how we work, products, made within, about us,
       history, issue on demand, four things, two-column boxes
   2.  Responsive layout (grids stack, cards resize). Font sizes and
       spacing already scale through the tokens in site.css.
   ========================================================================== */


/* ==========================================================================
   1. MAIN PAGES
   ========================================================================== */

/* -----------------------------------------
   Page shell + focus
----------------------------------------- */
.main-page {
  font-family: var(--font-base);
}

.main-link {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.main-link:hover { text-decoration-thickness: 2px; }

.main-link--strong { font-weight: bold; }

/* -----------------------------------------
   Shared small heading ("eyebrow") style.
   Colours, spacing and any size differences are set per section further
   down; because those rules come later they override this one.
----------------------------------------- */
.designed-section h2,
.history h2,
.four-things h2,
.two-grid-box h2,
.main-lead h2,
.main-supply h2,
.main-related h2,
.two-routes h2,
.two-text-grid h2,
.text-grid h2,
.made-within h2,
.how-we-work-page .image-switch h2,
.switch-text-prod h2,
.main-stats h4,
.link-card h3 {
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* -----------------------------------------
   Hero band: title, lead sentence
----------------------------------------- */
.main-hero,
.main-hero-hww {
  background-color: var(--color-black); /* fallback shown if the image path is wrong or still loading */
  background-size: cover;
  background-repeat: no-repeat;
  min-height: clamp(24rem, 50vw, 600px);
}

.main-hero-hww {
  background-position: right 70%;
  position: relative;
}

/* Security hero: same size and spacing as every other main hero.
   Only the crop point differs, so the middle of the photo stays in view. */
.main-page--security .main-hero {
  background-position: center;
}

/* Dark veil over the hero photo so the text stays readable */
.main-hero-hww::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--veil);
  z-index: 1;
}

.main-hero-hww > * {
  position: relative;
  z-index: 2;
}

/* Side padding is the page padding (--pad-x), or, on very wide screens,
   enough to keep the content in a centred 1620px column. The old fixed
   1.5rem padding pushed the title to the screen edge on laptops. */
.main-hero__inner {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  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));
}

.main-hero__inner 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: clamp(1rem, 4vw, 3rem);
  margin-bottom: var(--hero-gap);
  overflow-wrap: anywhere;
}

.main-hero__lead,
.main-hero__lead-hww,
.main-hero__lead-sus,
.main-hero__lead-prod,
.main-hero__lead-iod,
.main-hero__lead-about {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--color-grey-pale);
}

.main-hero__lead     { max-width: 30ch; }
.main-hero__lead-hww { max-width: 40ch; font-size: var(--fs-lead-lg); }

/* "sus" and "iod" pull up under the h1: net gap is half the h1's bottom margin */
.main-hero__lead-sus {
  max-width: 70ch;
  margin-top: calc(var(--hero-gap) / -2.5);
  padding-bottom: var(--section-y);
}

.main-hero__lead-iod {
  max-width: 48ch;
  margin-top: calc(var(--hero-gap) / -2);
  padding-bottom: var(--section-y);
}

.main-hero__lead-about {
  max-width: 58ch;
  margin-top: calc(var(--hero-gap) / -3);
  padding-bottom: var(--section-y);
}

.main-hero__lead-prod {
  color: var(--color-white);
  max-width: 45ch;
  margin-top: calc(var(--hero-gap) * 2.5);
  margin-bottom: calc(var(--hero-gap) / -2);
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------
   Evidence-style hero: Issue on Demand and Ready to Issue only.
   A copy of the hero in evidence.css, scoped to these two pages so no
   other main page can pick it up, and evidence.css never needs linking.
   If the evidence hero changes, update this copy to match.
----------------------------------------- */
.issue-on-demand-page .evidence-hero,
.ready-to-issue-page .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;
}

.issue-on-demand-page .evidence-hero::before,
.ready-to-issue-page .evidence-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-grey-veil);
}

.issue-on-demand-page .evidence-hero__inner,
.ready-to-issue-page .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));
}

/* No small label above the title: lift the h1 to the same height as
   heroes that have one (same rule as evidence.css) */
.issue-on-demand-page .evidence-hero__inner:not(:has(> h2)),
.ready-to-issue-page .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));
}

.issue-on-demand-page .evidence-hero h1,
.ready-to-issue-page .evidence-hero 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;
}

.issue-on-demand-page .evidence-hero h2,
.ready-to-issue-page .evidence-hero 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;
}

.issue-on-demand-page .evidence-hero__lead,
.ready-to-issue-page .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;
}

/* -----------------------------------------
   Lead block (intro under the hero)
----------------------------------------- */
.main-lead {
  margin-top: var(--section-y-sm);
}

.main-lead h2 {
  color: var(--color-grey-muted);
  margin-bottom: 1rem;
}

.main-lead h3 {
  font-size: var(--fs-h-md);
  line-height: 1.1;
  color: var(--color-grey-heading);
  max-width: 24ch;
  margin-bottom: 2.5rem;
  font-weight: bold;
}

.main-lead__text {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 80ch;
  margin-top: 1rem;
  margin-bottom: var(--section-y-lg);
}

/* -----------------------------------------
   Stats cards
----------------------------------------- */
.stats-cards,
.stats-cards-sus,
.stats-cards-hww,
.stats-cards-prod {
  display: grid;
  gap: 1.5rem;
}

/* The standalone rows (security, sustainability, how we work) take their
   width from the .wrap column around them. */
.stats-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-cards-sus {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: var(--section-y);
}

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

.stats-cards-prod {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--wrap-max);
  margin: 0 auto;
}

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

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

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

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

.stats-card p      { max-width: 40ch; }
.stats-card-hww p  { max-width: 50ch; }

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

.stats-text {
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 120ch;
  margin: 0 0 var(--section-y-lg);
  font-style: italic;
}

.stats-card-prod {
  border-left: 7.5px solid var(--color-yellow);
  padding: 1.75rem;
}

/* Keep figures like "1,000" on one line, shrinking to fit narrow cards */
.stats-card-prod h2 {
  font-size: min(var(--fs-stat-sm), 30cqi);
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--color-yellow);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stats-card-prod p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-white);
  max-width: 50ch;
  margin-top: -1rem;
}

/* -----------------------------------------
   Image switch: text and image side by side, alternating left/right
----------------------------------------- */
.image-switch {
  background-color: var(--color-grey-band);
  padding-top: var(--section-y-sm);
  padding-bottom: var(--section-y-sm);
}

.left-switch,
.right-switch {
  margin: var(--section-y-sm) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
}

/* Image-switch photos on Security and How We Work: same rectangle,
   sharp corners, cropped to fit rather than stretched. */
.main-page--security .left-switch img,
.main-page--security .right-switch img,
.how-we-work-page .left-switch img,
.products-page .left-switch img,
.sustainability-page .left-switch img,
.sustainability-page .right-switch img,
.forty-miles-page .left-switch img,
.forty-miles-page .right-switch img  {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* How We Work: centre the photo against the text column */
.how-we-work-page .left-switch img {
  align-self: center;
}

.how-we-work-page .image-switch h2 {
  color: var(--color-grey-dark);
}

.left-switch h2,
.right-switch h2 {
  font-size: var(--fs-h-md);
  line-height: 1.2;
  color: var(--color-grey-text);
  max-width: 40ch;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.switch-text p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 60ch;
}

.switch-text-bullet {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.8rem;
  row-gap: 1rem;
  align-content: start;
}

.switch-text-bullet h2 {
  grid-column: 1 / -1;
}

.switch-marker {
  color: var(--color-amber);
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  padding-top: 0.3rem;
  -webkit-text-stroke: 3px var(--color-amber);
  margin-right: 0.5rem;
}

.switch-text-bullet p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 60ch;
  margin: 0;
}

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

/* How we work variant */
.switch-text-hww h2 {
  font-size: var(--fs-body-lg);
  line-height: 1.2;
  color: var(--color-grey-text);
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: var(--section-y-sm);
}

.switch-text-hww h3 {
  font-size: var(--fs-h-sm);
  padding-top: var(--section-y-sm);
  line-height: 1.2;
  color: var(--color-grey-heading);
  max-width: 40ch;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.switch-text-hww p {
  font-size: var(--fs-body-lg);
  padding-top: var(--section-y-sm);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 40ch;
  margin-bottom: var(--section-y-sm);
}

/* Products variant */
.switch-text-prod h2 {
  font-size: var(--fs-eyebrow);
  color: var(--color-grey-text);
  margin-top: -1rem;
  padding-bottom: 1rem;
}

.switch-text-prod h3 {
  font-size: var(--fs-h-md);
  padding-top: 1rem;
  line-height: 1.2;
  color: var(--color-grey-heading);
  max-width: 24ch;
  font-weight: bold;
  margin-bottom: 1rem;
}

.switch-text-prod p {
  font-size: var(--fs-body-lg);
  padding-top: 1rem;
  line-height: 1.5;
  color: var(--color-black);
  max-width: 40ch;
}

/* Outlined pill links (shared look; the two sizes differ only in font size) */
.switch-link,
.switch-link-sus,
.four-things a,
.two-text-grid a,
.endorsements-link {
  display: inline-block;      /* keeps the pill one solid rounded box, even if the text wraps */
  color: var(--color-black);
  text-align: center;
  font-weight: bold;
  font-size: var(--fs-body);
  line-height: 1.3;
  max-width: 45ch;
  border: 2px solid var(--color-black);
  border-radius: 100px;
  padding: 1rem var(--btn-pad-x);
}

.switch-link-sus { font-size: var(--fs-body-lg); }

/* -----------------------------------------
   Supply statement
----------------------------------------- */
.main-supply h2 {
  color: var(--color-grey-muted);
  margin-top: var(--section-y);
  margin-bottom: 1.5rem;
}

.supply-cards {
  margin: 0 0 var(--section-y-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.supply-card h3 {
  font-size: var(--fs-stat-sm);
  line-height: 1.2;
  color: var(--color-grey-text);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

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

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

.main-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;
}

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

.main-talktous h2,
.about-talktous h2 {
  font-size: var(--fs-h-lg);
  color: var(--color-grey-dark);
  font-weight: bold;
  margin-bottom: 2.5rem;
}

.about-talktous h2 {
  line-height: 1.2;
  margin-left: auto;
  margin-right: auto;
  max-width: 35ch;
}

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

.about-talktous p { max-width: 60ch; }

.main-talktous a,
.about-talktous a {
  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);
}

/* About Us, Issue on Demand, Ready to Issue: photo at its natural
   shape, full column width, padded, with soft corners */
.about-us-page .designed-image,
.route-one-image {
  align-self: center;
}

/* Issue on Demand + Ready to Issue: both photos the same rectangle,
   whatever shape the file is. Cropped to fit, never stretched. */
.route-one-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.about-us-page .designed-image img,
.route-one-image img {
  display: block;
  width: 100%;
  height: auto;
  padding: 2rem;
  margin-top: -5rem;
  margin-left: 5rem;
  border-radius: 24px;
}

@media (max-width: 640px) {
  .about-us-page .designed-image img,
  .route-one-image img {
    padding: 0.5rem;
    border-radius: 16px;
  }
}

/* -----------------------------------------
   How we work
----------------------------------------- */
.two-routes {
  margin: var(--section-y-sm) 0;
}

.two-routes h2 {
  color: var(--color-grey-muted);
  margin-top: var(--section-y);
  margin-bottom: 1.5rem;
}

.two-routes h3 {
  font-size: var(--fs-h-lg);
  line-height: 1.1;
  color: var(--color-grey-heading);
  max-width: 24ch;
  margin-bottom: 2.5rem;
  font-weight: bold;
}

.two-routes p {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 80ch;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.two-routes a {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}

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

.demand-route-active,
.ready-route-active {
  background: var(--color-grey-dark);
  border-radius: 16px;
  padding: var(--card-pad);
}

.demand-route-active h3,
.ready-route-active h3 {
  color: var(--color-yellow);
  font-size: var(--fs-h-sm);
  font-weight: bold;
  line-height: 1.1;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

.demand-route-active p,
.ready-route-active p {
  color: var(--color-white);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  margin-bottom: 4.3rem;
}

.demand-link-active,
.ready-link-active{
  color: var(--color-yellow);
  margin-bottom: 2rem;
}

.demand-route,
.ready-route {
  background: var(--color-grey-pale);
  border-radius: 16px;
  padding: var(--card-pad);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.demand-route h3,
.ready-route h3 {
  color: var(--color-black);
  font-size: var(--fs-h-sm);
  font-weight: bold;
  line-height: 1.1;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  transition: color 0.3s ease;
}

.demand-route p,
.ready-route p {
  color: var(--color-black);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  margin-bottom: 4.5rem;
  transition: color 0.3s ease;
}

.demand-link,
.ready-link {
  color: var(--color-black);
  margin-bottom: 2rem;
  transition: color 0.3s ease;
}

.demand-route:hover,
.ready-route:hover {
  background: var(--color-grey-dark);
  transform: translateY(-5px);
}

.demand-route:hover h3,
.ready-route:hover h3 {
  color: var(--color-yellow);
}

.demand-route:hover p,
.ready-route:hover p {
  color: var(--color-white);
}

.demand-route:hover .demand-link,
.ready-route:hover .ready-link {
  color: var(--color-yellow);
}

.endorsements {
  background-color: var(--color-grey-dark);
  padding-top: var(--section-y-lg);
  padding-bottom: 0.5rem;
}

.endorsement {
  margin: 0 0 var(--section-y-lg);
  border-left: 7.5px solid var(--color-yellow);
}

.endorsement h2 {
  font-size: var(--fs-h-md);
  color: var(--color-white);
  margin-bottom: 2rem;
  margin-left: var(--indent);
}

.endorsement p {
  font-size: var(--fs-body-lg);
  color: var(--color-white);
  margin-bottom: 1.5rem;
  margin-left: var(--indent);
}

.endorsements-link {
  color: var(--color-white);
  max-width: 85ch;
  border-color: var(--color-white);
  margin-left: var(--indent);
}

/* -----------------------------------------
   Products
----------------------------------------- */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: var(--section-y);
}

/* Every product image is the same square, whatever shape the file is.
   object-fit: cover fills the square without stretching or squashing. */
.image-grid-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.image-grid-text {
  min-height: 20rem;      /* was a fixed height, which clipped the text on tablets */
  border-left: 5px solid var(--color-yellow);
  margin-bottom: var(--section-y);
}

.image-grid-text h2 {
  font-size: var(--fs-h-md);
  line-height: 1.2;
  color: var(--color-grey-muted);
  font-weight: bold;
  margin: 1rem;
}

.image-grid-text p {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--color-black);
  max-width: 40ch;
  margin: 1rem;
}

.text-grid {
  background-color: var(--color-grey-dark);
  padding: var(--section-y) 0;
}

.text-grid h2 {
  color: var(--color-yellow);
  padding-bottom: 1rem;
}

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

.text-side p {
  font-size: var(--fs-body);
  color: var(--color-white);
  margin-bottom: 1.5rem;
  max-width: 55ch;
}

.testing-grid,
.info-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
  margin: 0 auto;
}

/* -----------------------------------------
   Made within statement
----------------------------------------- */
.made-within {
  background-color: var(--color-grey-dark);
}

.made-within h2 {
  color: var(--color-yellow);
  padding: var(--section-y) 0 1.5rem;
}

.made-within-cards {
  padding: 0 0 var(--section-y-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

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

.made-within-card p {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-white);
  margin-top: 1rem;
}

/* -----------------------------------------
   About us: two text columns
----------------------------------------- */
.two-text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
}

.two-text-grid h2 {
  color: var(--color-grey-muted);
  margin-top: var(--section-y);
  margin-bottom: 1.5rem;
}

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

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

/* -----------------------------------------
   Designed section + history timeline
----------------------------------------- */
.designed-section {
  padding: var(--section-y) 0 var(--section-y-sm);
}

.designed-section h2 {
  color: var(--color-grey-text);
  padding-bottom: 1rem;
}

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

.designed-section h3 {
  font-size: var(--fs-h-md);
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.2;
  color: var(--color-grey-muted);
  max-width: 60ch;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.designed-section p {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--color-black);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

.history {
  background-color: var(--color-grey-band);
  margin-top: var(--section-y);
  padding: var(--section-y) 0;
}

.history h2 {
  color: var(--color-grey-muted);
  padding-bottom: 1rem;
}

.history h3 {
  font-size: var(--fs-h-md);
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.2;
  color: var(--color-grey-slate);
  max-width: 40ch;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.timeline {
  position: relative;
  padding-top: var(--section-y);
}

/* The vertical grey line, centred on the dots */
.timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--timeline-dot) / 2 - 0.05rem);
  top: var(--section-y);
  bottom: calc(var(--timeline-gap) - 1rem);
  width: 0.1rem;
  background-color: var(--color-grey-muted);
}

.timeline-item {
  position: relative;
  display: flex;
  gap: var(--grid-gap-lg);
  margin-bottom: var(--timeline-gap);
}

/* Lets the text column shrink and wrap instead of overflowing */
.timeline-item > :not(.timeline-dot) { min-width: 0; }

/* Yellow circle */
.timeline-dot {
  width: var(--timeline-dot);
  height: var(--timeline-dot);
  background-color: var(--color-yellow-deep);
  border-radius: 50%;
  border: 0.5rem solid var(--color-grey-band);
  outline: 2px solid var(--color-grey-muted);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.timeline h4 {
  color: var(--color-black);
  font-weight: bold;
  font-size: var(--fs-h-xs);
  padding-bottom: 1rem;
}

.timeline p {
  color: var(--color-black);
  font-size: var(--fs-body-sm);
  max-width: 100ch;
}

/* -----------------------------------------
   Issue on demand
----------------------------------------- */
.route-one {
  padding: var(--section-y) 0 var(--section-y-sm);
}

/* Pill label. It used to get its width from a 78rem right margin, which
   squashed it to nothing on any screen under about 1900px. */
.route-one h2 {
  background: var(--color-grey-dark);
  color: var(--color-white);
  font-weight: bold;
  letter-spacing: 0.15em;
  line-height: 1.3;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.2rem);
  border-radius: 100px;
  padding: 1rem clamp(1rem, 2vw, 2rem);
  width: fit-content;
  max-width: 100%;
  margin-bottom: 2rem;
}

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

.route-one h3 {
  font-size: var(--fs-h-lg);
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.2;
  color: var(--color-grey-muted);
  max-width: 22ch;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.route-one p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  max-width: 50ch;
}

/* -----------------------------------------
   Four things
----------------------------------------- */
.four-things {
  background-color: var(--color-grey-band);
  padding: var(--section-y) 0;
}

.four-things h2 {
  color: var(--color-grey-text);
  padding-bottom: 1rem;
}

.four-things h3 {
  font-size: var(--fs-h-lg);
  padding-top: 1rem;
  padding-bottom: var(--section-y-sm);
  line-height: 1.2;
  color: var(--color-grey-slate);
  max-width: 40ch;
  font-weight: bold;
}

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

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

.grid-card-text h4 {
  font-size: var(--fs-h-xs);
  padding-top: 1rem;
  line-height: 1.2;
  color: var(--color-black);
  max-width: 40ch;
  font-weight: bold;
}

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

/* -----------------------------------------
   Two-column boxes
----------------------------------------- */
.two-grid-box {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

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

.two-grid-box h2 {
  color: var(--color-grey-text);
  padding-bottom: 1rem;
}

.two-grid-box h3 {
  font-size: var(--fs-h-md);
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.2;
  color: var(--color-grey-muted);
  max-width: 24ch;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.grid-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.grid-box-card {
  background: var(--color-white);
  border: 2px solid var(--color-rule);
  border-radius: 16px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.grid-box h4 {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
}

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

.main-stats-headings {
  padding-top: var(--section-y-sm);
}

.main-stats-headings h4 {
  color: var(--color-grey-muted);
}

.main-stats-headings h5 {
  font-size: var(--fs-h-lg);
  padding-top: 1.5rem;
  line-height: 1.2;
  color: var(--color-grey-heading);
  max-width: 40ch;
  font-weight: bold;
}


/* ==========================================================================
   2. RESPONSIVE LAYOUT: MAIN PAGES
   Font sizes and spacing already scale through the tokens in section 1.
   These rules only change how the columns are arranged.
   ========================================================================== */

/* Tablets and below: three- and four-column rows become two columns */
@media (max-width: 1024px) {
  .stats-cards,
  .stats-cards-sus,
  .link-cards,
  .image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An odd last card (e.g. 3 cards in 2 columns) spans the full row */
  .stats-cards > :last-child:nth-child(odd),
  .link-cards > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .image-grid-text { margin-bottom: var(--section-y-sm); }

/* Tablets and phones crop the sides of the hero photos; move the
   crop right so the subject stays in view */

  .forty-miles-page .main-hero { background-position: 80% center; }
  .main-page--security .main-hero { background-position: 75% center; }

/* Security hero: same dark veil as How we work, tablets and phones only */
  .main-page--security .main-hero {
    position: relative;
  }

  .main-page--security .main-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--veil);
    z-index: 1;
  }

  .main-page--security .main-hero > * {
    position: relative;
    z-index: 2;
  }
}

/* Portrait tablets and below: text/image rows and wide cards stack */
@media (max-width: 900px) {
  .left-switch,
  .right-switch,
  .designed-grid,
  .route-one-grid,
  .two-routes-grid,
  .two-text-grid,
  .grid-box,
  .four-grid,
  .testing-grid,
  .info-side {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Grids that had no gap on desktop need one once stacked */
  .designed-grid,
  .route-one-grid {
    row-gap: 1.5rem;
  }

  .two-text-grid h2 { margin-top: var(--section-y-sm); }

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

  /* Hand-placed line breaks only suit the wide layout */
  .made-within-card h3 br { display: none; }
}

/* Phones: everything is a single column */
@media (max-width: 640px) {
  .stats-cards,
  .stats-cards-sus,
  .stats-cards-hww,
  .stats-cards-prod,
  .link-cards,
  .image-grid,
  .supply-cards,
  .made-within-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-card,
  .stats-card-hww,
  .link-card { padding: 1.25rem; }

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

  .image-grid-text { min-height: 0; }

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

  /* Pill links fill the width so they are easy to tap and never overflow */
  .switch-link,
  .switch-link-sus,
  .four-things a,
  .two-text-grid a,
  .endorsements-link {
    display: block;
    max-width: none;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .endorsement { border-left-width: 5px; }

  .demand-route,
  .ready-route { border-radius: 12px; }

  .ready-route p { margin-bottom: 2.5rem; }

  .two-grid-box h3,
  .two-routes h3 { max-width: none; }

  .main-talktous a,
  .about-talktous a {
    display: inline-block;
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

/* Phones: --hero-gap shrinks, so the products lead floated mid-hero.
   Make the inner a full-height column and push the lead to the bottom. */
  .products-page .main-hero {
    display: flex;
  }

  .products-page .main-hero .main-hero__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .products-page .main-hero__lead-prod {
    margin-top: auto;
  }

}

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

/* -----------------------------------------
   About Us, Issue on Demand, Ready to Issue photo
   The photo was width:100% PLUS a fixed 5rem left margin, so it was
   always 5rem wider than its column. Above 1280px the page gutter hid
   that; below it the photo ran off the right of the screen (40-60px cut
   off on tablets and phones), and once stacked the -5rem top margin
   pulled it up over the paragraph above.
   The nudge is now half the page gutter: exactly 5rem on big screens
   (same look as before), smaller as the gutter shrinks, so it never
   leaves the screen. Stacked, it sits flat under the text.
----------------------------------------- */
.about-us-page .designed-image img,
.route-one-image img {
  margin-left: min(5rem, var(--pad-x) / 2);
}

@media (max-width: 1024px) {
  .about-us-page .designed-image img,
  .route-one-image img {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .about-us-page .designed-image img,
  .route-one-image img {
    margin-left: 0;
    padding: 0;
  }
}

/* -----------------------------------------
   Talk to us button: the inline link's padding overlapped the text
   above when it wrapped on tablets. One solid box at every size.
----------------------------------------- */
.main-talktous a,
.about-talktous a {
  display: inline-block;
  max-width: 100%;
}

/* -----------------------------------------
   Portrait tablets: the two big "made within" headings were squeezed
   into narrow columns; stack them like the other two-column blocks.
----------------------------------------- */
@media (max-width: 900px) {
  .made-within-cards { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
   4. PHONE AND TABLET POLISH (October 2026)
   Every rule sits inside a max-width or touch-only media query, so the
   desktop layout (above 1024px) is exactly as it was.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Paragraphs in the text/photo rows had no gap between them */
  .switch-text p + p { margin-top: 1rem; }
}

/* Portrait tablets and phones */
@media (max-width: 900px) {
  /* Stacked text/photo rows: the photo always sits above its own text.
     Before, left rows put it below and right rows above, so two photos
     ended up back to back with no clue which section each belonged to. */
  .left-switch > img { order: -1; }

  /* Tighter gap between a stacked photo and its heading */
  .left-switch,
  .right-switch { row-gap: 1.25rem; }

  /* <br>s that line up the two route links side by side leave a gap
     once the cards stack */
  .two-routes-grid br { display: none; }
}

/* Phones */
@media (max-width: 640px) {
  /* Photos line up with the text edge instead of sitting 8px inside it */
  .left-switch img,
  .right-switch img { padding: 0; }

  /* How we work: the route cards had a 4.5rem hole above "How it works" */
  .demand-route p,
  .ready-route p,
  .demand-route-active p,
  .ready-route-active p { margin-bottom: 1.5rem; }

  .demand-link,
  .ready-link,
  .demand-link-active,
  .ready-link-active { display: inline-block; padding: 0.5rem 0; margin-bottom: 0; }

  /* Stat cards: less empty space under the last line */
  .stats-card__border { margin-bottom: 1rem; }
}