/* ==========================================================================
   VIP System: site.css (shared by every page)

   Link this FIRST on every page, then the page's own stylesheet:
     <link rel="stylesheet" href="site.css">
     <link rel="stylesheet" href="mainpages.css">   (or evidence.css,
                                                      policy.css, style.css)

   CONTENTS
   1.  Tokens: every colour on the site, fonts, widths, spacing, type scale
   2.  Reset / base
   3.  Buttons
   4.  Header (utility bar, navbar, hamburger menu, taxi)
   5.  Footer
   6.  Contact modal
   7.  Content focus ring (navy ring inside page content)

   HOW THE TOKENS WORK
   Custom properties (--name) set on :root belong to the whole page, not to
   this file, so mainpages.css, evidence.css, policy.css and style.css can
   all use var(--color-navy) etc. without defining it themselves.
   To change a colour site-wide, change it here once.

   Spacing tokens (--pad-x, --section-y ...) step down at 1600, 1280, 1024
   and 640px, so most rules never need their own media query.

   The hamburger menu is switched on by vip-web.js, which adds the class
   "nav-js" to <html> and "site-header" to the <header>. If JavaScript is
   not running, the normal desktop-style nav stays and no hamburger shows.
   ========================================================================== */


/* -----------------------------------------
   1. Tokens
----------------------------------------- */
:root {
  /* ---- Brand ---- */
  --color-yellow:             #ffe800;   /* brand yellow: buttons, bars, markers */
  --color-yellow-hover:       #e6c000;   /* yellow button hover */
  --color-yellow-deep:        #ffd900;   /* timeline dots */
  --color-yellow-text:        #6b5f00;   /* dark text on yellow / note labels */
  --color-yellow-pale:        #fffbd9;   /* "in plain English" note background */
  --color-yellow-pale-border: #f0e79c;   /* its border */
  --color-yellow-focus:       #fffdf0;   /* focused input background */
  --color-navy:               #26246b;   /* links, labels, content focus ring */
  --color-navy-soft:          #c9c6e2;   /* light text on navy */

  /* ---- Neutrals, darkest to lightest ---- */
  --color-black:              #000000;
  --color-grey-body:          #3f3f3f;   /* policy page body text */
  --color-grey-slate-dark:    #4a4a63;   /* policy contents list links */
  --color-grey-text:          #4b4b4b;   /* secondary text, dark bands */
  --color-grey-dark:          #606060;   /* dark grey bands and cards */
  --color-grey-slate:         #66666f;   /* muted headings and labels */
  --color-grey-heading:       #696868;   /* big grey section headings */
  --color-grey-veil:          #6e6e6e;   /* evidence hero overlay */
  --color-grey-table:         #8d8d8d;   /* evidence table header row */
  --color-grey-muted:         #9a9a9a;   /* eyebrow labels, footer headings */
  --color-grey-hero-light:    #b3b2b2;   /* home hero "Easy to check." */
  --color-grey-num:           #c9c9de;   /* big decorative clause numbers */
  --color-grey-pale:          #dedede;   /* light text on dark heroes, route cards */
  --color-grey-band:          #e0e0e0;   /* light grey section bands */
  --color-rule:               #e3e3ec;   /* card borders and dividers */
  --color-border:             #e5e5e5;   /* header and footer dividers */
  --color-grey-light-text:    #e6e6e6;   /* text on the black policy strap */
  --color-grey-hero:          #ebebeb;   /* policy hero band */
  --color-grey-callout:       #f2f2f7;   /* policy lead-in panel */
  --color-grey-panel:         #f4f4f4;   /* comparison table heads and feet */
  --color-grey-tint:          #f6f6fa;   /* zebra rows, tinted panels */
  --color-grey-hover:         #fafafa;   /* mobile menu row hover */
  --color-white:              #ffffff;

  /* ---- Accents ---- */
  --color-orange:             #ea731e;   /* case study labels */
  --color-amber:              #d68400;   /* bullet markers */
  --color-amber-dark:         #b7791f;   /* placeholder underline */
  --color-flag-bg:            #fde3b3;   /* "to be inserted" highlight */
  --color-flag-text:          #5c3b00;
  --color-rust:               #b2452a;   /* "their" side: hard plate */
  --color-rust-light:         #d98166;
  --color-red:                #ff0000;   /* red warning border */
  --color-red-tint:           #e494a343; /* pale red band (semi-transparent) */
  --color-green:              #1c6b3c;   /* "our" side: five-year plate */
  --color-green-light:        #2e8b57;

  /* ---- Overlays and shadows ---- */
  --veil-light:     rgba(0, 0, 0, 0.2);   /* case study hero */
  --veil-medium:    rgba(0, 0, 0, 0.45);  /* home stats tiles */
  --veil:           rgba(0, 0, 0, 0.5);   /* how-we-work hero */
  --veil-backdrop:  rgba(0, 0, 0, 0.6);   /* behind the contact modal */
  --shadow-header:  0 2px 12px rgba(0, 0, 0, 0.15);
  --shadow-card:    0 2px 14px rgba(0, 0, 0, 0.08);

  /* ---- Font ---- */
  --font-base: Arial, sans-serif;

  /* ---- Header / footer spacing ---- */
  --max-width: 1200px;
  --gap-lg: 3rem;
  --gap-md: 1.5rem;
  --gap-sm: 0.75rem;

  /* ---- Widths ---- */
  --main-width: 1620px;
  --wrap-max: 1600px;

  /* ---- Spacing: desktop values, stepped down below ---- */
  --pad-x: 10rem;            /* side padding of full-width sections */
  --section-y: 5rem;         /* standard top/bottom padding */
  --section-y-sm: 3rem;
  --section-y-lg: 6rem;
  --card-pad: 3rem;
  --grid-gap-md: 3rem;
  --grid-gap-lg: 5rem;       /* gap between big columns */
  --hero-gap: 6rem;          /* space under the hero h1 */
  --indent: 3rem;            /* indent inside bordered quote blocks */
  --icon-col: 5rem;          /* icon column in the four-things cards */
  --timeline-gap: 7rem;
  --timeline-dot: 3rem;
  --btn-pad-x: clamp(1.25rem, 10vw, 5rem);

  /* Width of a centred content wrapper that has no padding of its own */
  --wrap: min(100% - 2 * var(--pad-x), var(--wrap-max));

  /* ---- Fluid type scale: phone (360px) up to desktop (1920px) ---- */
  --fs-eyebrow:  clamp(0.95rem, 0.881rem + 0.31vw, 1.25rem);
  --fs-body-sm:  clamp(1.1rem, 1.031rem + 0.31vw, 1.4rem);
  --fs-body:     clamp(1.1rem, 0.985rem + 0.51vw, 1.6rem);
  --fs-body-lg:  clamp(1.15rem, 1rem + 0.67vw, 1.8rem);
  --fs-lead:     clamp(1.2rem, 1.062rem + 0.62vw, 1.8rem);
  --fs-lead-lg:  clamp(1.35rem, 1.154rem + 0.87vw, 2.2rem);
  --fs-h-xs:     clamp(1.35rem, 1.223rem + 0.56vw, 1.9rem);
  --fs-h-sm:     clamp(1.5rem, 1.292rem + 0.92vw, 2.4rem);
  --fs-h-md:     clamp(1.75rem, 1.508rem + 1.08vw, 2.8rem);
  --fs-h-lg:     clamp(2rem, 1.677rem + 1.44vw, 3.4rem);
  --fs-stat-sm:  clamp(2.25rem, 1.846rem + 1.79vw, 4rem);
  --fs-stat:     clamp(2.5rem, 1.923rem + 2.56vw, 5rem);
}

/* Larger laptops (1366 to 1600px) */
@media (max-width: 1600px) {
  :root {
    --pad-x: 7rem;
  }
}

/* Small laptops */
@media (max-width: 1280px) {
  :root {
    --pad-x: 5rem;
    --grid-gap-lg: 3rem;
  }
}

/* Tablets */
@media (max-width: 1024px) {
  :root {
    --pad-x: 2.5rem;
    --section-y: 4rem;
    --section-y-lg: 5rem;
    --card-pad: 2rem;
    --grid-gap-md: 2rem;
    --grid-gap-lg: 2.5rem;
    --hero-gap: 4rem;
    --timeline-gap: 5rem;
  }
}

/* Phones */
@media (max-width: 640px) {
  :root {
    --pad-x: 1.25rem;
    --section-y: 3rem;
    --section-y-sm: 2rem;
    --section-y-lg: 3.5rem;
    --card-pad: 1.5rem;
    --grid-gap-md: 1.5rem;
    --grid-gap-lg: 1.5rem;
    --hero-gap: 2rem;
    --indent: 1.25rem;
    --icon-col: 3.5rem;
    --timeline-gap: 3rem;
    --timeline-dot: 2.5rem;
  }
}


/* -----------------------------------------
   2. Reset / base
----------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: hidden;              /* safety net: no sideways scrollbar on mobile */
  -webkit-text-size-adjust: 100%;  /* stops iPhones inflating text in landscape */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  color: var(--color-black);
  line-height: 1.5;
  font-variant-emoji: text;
  overflow-wrap: break-word;       /* long words/URLs wrap instead of widening the page */
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

/* Page column. Every section's content sits in one of these, so all of
   it lines up in a single centred column: the page gutter on each side,
   never wider than --wrap-max, centred on wide or zoomed-out screens.
   Put it on an element whose parent is full width (a <section>, or the
   page itself), and don't give that element its own width or side
   margins, or they will override this. */
.wrap {
  width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}

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


/* -----------------------------------------
   3. Buttons
----------------------------------------- */
.btn {
  display: inline-block;
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 2px;
  transition: background-color 0.15s ease;
}

.btn:hover { background-color: var(--color-yellow-hover); }

.btn--nav {
  padding: 0.6rem clamp(2rem, 4vw, 4rem);
  font-size: clamp(1rem, 2vw, 1.25rem);
  white-space: nowrap;
}

.btn--block {
  padding: 0.6rem 1.25rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}

.btn--block::first-letter {
  -webkit-text-stroke: 1px currentColor;
}

.btn--cta {
  padding: 1rem var(--btn-pad-x);
  font-size: 1.1rem;
}


/* -----------------------------------------
   4. Header: utility bar, navbar, hamburger
----------------------------------------- */

/* Floating header: sticks to the top and slides away when scrolling down.
   Its top offset is minus the height of the utility bar (measured by
   vip-web.js into --utility-bar-height), so the utility bar scrolls away
   with the page and only the navbar stays floating. */
.site-header {
  position: sticky;
  top: calc(var(--utility-bar-height, 0px) * -1);
  z-index: 1000;
  background-color: var(--color-white);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-stuck  { box-shadow: var(--shadow-header); }

/* Utility bar: always one line */
.utility-bar {
  background-color: var(--color-yellow);
}

.utility-bar__inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left spacer | centre | right */
  align-items: center;
}

.utility-link {
  color: var(--color-black);
  font-size: 1rem;
  padding: 0.1rem 0;
  white-space: nowrap;
}

.utility-link { grid-column: 2; }

/* Navbar */
.navbar {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.logo { display: inline-block; }

.logo img {
  height: 80px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  font-size: clamp(1rem, 2vw, 1.25rem);
  justify-content: space-evenly;
  gap: 0.75rem 1.5rem;
  margin-left: 4rem;
}

.nav-links__item {
  font-weight: 500;
  padding-bottom: 0.35rem;
  border-bottom: 5px solid transparent;
}

.nav-links__item.is-active,
.nav-links__item:hover {
  border-bottom-color: var(--color-yellow);
}

/* Hamburger button (hidden until the mobile layout switches it on) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--color-yellow);
  border: 2px solid var(--color-black);
  border-radius: 2px;
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
  pointer-events: none;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-black);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7.5px; }
.nav-toggle__bar:nth-child(3) { top: 15px; }

/* Open state: the three bars turn into an X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 7.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 7.5px; transform: rotate(-45deg); }

/* The Shop row inside the link list only exists for the mobile menu */
.nav-links__shop-item { display: none; }

/* Small laptops / large tablets */
@media (max-width: 900px) {
  .nav-links { margin-left: 1.5rem; }
}

/* Phones: header basics (also the fallback layout if JavaScript is off) */
@media (max-width: 640px) {
  .logo img { height: 48px; }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    margin-left: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.75rem;
  }

  .utility-bar__inner {
    display: flex;
    justify-content: center;
    gap: 0 0.75rem;
    padding: 0.4rem 0.75rem;
  }

  /* Text scales with the screen so it never needs a second line */
  .utility-link {
    font-size: clamp(0.7rem, 3.6vw, 1rem);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Hamburger layout: tablets and phones, JavaScript running */
@media (max-width: 1024px) {

  .nav-js .navbar {
    column-gap: 0.75rem;
    row-gap: 0;               /* the menu panel adds its own space when open */
  }

  .nav-js .logo       { order: 1; }
  .nav-js .nav-toggle { order: 2; display: inline-flex; margin-left: auto; }

  /* The desktop Shop button is replaced by the Shop row inside the menu */
  .nav-js .btn--nav { display: none; }

  /* Menu panel: fades and slides down when opened.
     It is always laid out (never display:none) so it can animate. While
     closed it has no height and visibility:hidden, so it can't be tabbed
     to or read out by screen readers. */
  .nav-js .nav-links {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    font-size: 1.15rem;

    border-top: 0 solid var(--color-yellow);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition:
      max-height 0.3s ease,
      opacity 0.25s ease,
      transform 0.3s ease,
      margin-top 0.3s ease,
      border-top-width 0.3s ease,
      visibility 0s linear 0.3s;   /* hide only after the fade-out finishes */
  }

  .nav-js .nav-links.is-open {
    margin-top: 0.75rem;
    border-top-width: 2px;
    max-height: 40rem;
    max-height: min(40rem, calc(100dvh - 8rem));   /* short landscape phones: scroll inside the menu */
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      max-height 0.3s ease,
      opacity 0.25s ease,
      transform 0.3s ease,
      margin-top 0.3s ease,
      border-top-width 0.3s ease,
      visibility 0s linear 0s;
  }

  .nav-js .nav-links li {
    border-bottom: 1px solid var(--color-border);
  }

  /* Every row, including Shop, uses the same big tap-target style.
     The desktop underline is replaced by a yellow bar on the left. */
  .nav-js .nav-links .nav-links__item,
  .nav-js .nav-links__shop-item .btn {
    display: block;
    padding: 1rem 0.75rem;
    min-height: 48px;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-weight: 500;
    text-align: left;
  }

  .nav-js .nav-links .nav-links__item:hover,
  .nav-js .nav-links .nav-links__item.is-active,
  .nav-js .nav-links .nav-links__shop-item .btn:hover {
    background-color: var(--color-grey-hover);
    box-shadow: inset 4px 0 0 var(--color-yellow);
  }

  .nav-js .nav-links .nav-links__shop-item { display: block; }
}

/* Taxi: a little black cab that drives along the yellow utility bar,
   wheels on its bottom edge. vip-web.js adds it to the header. The lane
   covers the utility bar and clips the cab at both ends. */
.taxi-lane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--utility-bar-height, 0px);
  overflow: hidden;
  pointer-events: none;
}

.taxi {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42px;
  height: 14px;
  transform: translateX(-100%);
  animation: taxi-drive 30s linear 2s infinite;
}

/* Drives across in the first 12s, then waits off-screen until the next trip */
@keyframes taxi-drive {
  0%        { transform: translateX(-100%); }
  40%, 100% { transform: translateX(100vw); }
}

.taxi__body   { fill: var(--color-black); }
.taxi__window { fill: var(--color-navy-soft); }
.taxi__sign,
.taxi__light  { fill: var(--color-yellow); }
.taxi__sign   { stroke: var(--color-black); stroke-width: 1; } /* outline so it shows against the yellow bar */
.taxi__tail   { fill: var(--color-rust); }
.taxi__tyre   { fill: var(--color-grey-text); }
.taxi__hub    { fill: var(--color-grey-pale); }

@media (prefers-reduced-motion: reduce) {
  .taxi-lane { display: none; }
}


/* -----------------------------------------
   5. Footer
----------------------------------------- */
footer { background-color: var(--color-white); }

.footer__top {
  max-width: 1800px;
  margin: 0 auto;
  padding: var(--gap-lg) 1.5rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--gap-md);
}

.logo--footer { display: inline-block; margin-bottom: 0.5rem; }
.logo--footer img { height: 80px; }

.footer__about p { color: var(--color-black); margin-top: 0.5rem; max-width: 40ch; }

.footer__strapline { color: var(--color-black); font-weight: bold; margin-top: 0.75rem; }

.footer__nav h3 {
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--color-grey-muted);
  margin-bottom: 1rem;
}

.footer__nav li { margin-bottom: 0.75rem; }
.footer__nav a:hover { color: var(--color-black); text-decoration: underline; }

.footer__bottom {
  border-top: 1px solid var(--color-border);
  max-width: 1800px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  color: var(--color-grey-muted);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem clamp(1.25rem, 8vw, 10rem);   /* a fixed 10rem wrapped badly on tablets */
}

.footer__legal a:hover { color: var(--color-black); text-decoration: underline; }

/* Smooth scroll for in-page jumps, but respect users who turn motion off */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Stop a sticky/fixed header covering the top of the card */
.image-grid-card {
  scroll-margin-top: 100px; /* set this to roughly your navbar height */
}


/* Tablets: about block on the left, four nav lists in a square beside it.
   Starts at 1024px to match the hamburger breakpoint. */
@media (min-width: 641px) and (max-width: 1024px) {
  .footer__top {
    grid-template-columns: minmax(180px, 1.4fr) 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .footer__about { grid-row: 1 / 3; }

  .footer__top nav[aria-label="Company"]   { grid-column: 2; grid-row: 1; }
  .footer__top nav[aria-label="Products"]  { grid-column: 3; grid-row: 1; }
  .footer__top nav[aria-label="Resources"] { grid-column: 2; grid-row: 2; }
  .footer__top nav[aria-label="Account"]   { grid-column: 3; grid-row: 2; }
}

/* Phones */
@media (max-width: 640px) {
  .logo--footer img { height: 56px; }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap-sm);
    row-gap: var(--gap-md);
  }

  .footer__about { grid-column: 1 / -1; }

  .footer__bottom { flex-direction: column; gap: 1rem; }

  .footer__legal { gap: 0.75rem 1.5rem; }
}

/* Very small phones (older iPhone SE, small Androids) */
@media (max-width: 380px) {
  .footer__top { column-gap: 0.5rem; }
  .btn--nav { padding-left: 1.25rem; padding-right: 1.25rem; }
}


/* -----------------------------------------
   6. Contact modal
----------------------------------------- */
.contact-modal {
  width: min(92vw, 560px);
  margin: auto;
  max-height: 90dvh;
  padding: 0;
  border: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-base);
  overflow-y: auto;
}

.contact-modal::backdrop {
  background: var(--veil-backdrop);
}

.contact-modal-inner {
  position: relative;
  padding: 32px;
}

.contact-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.contact-modal h2 {
  margin: 0 40px 8px 0;
  font-size: 1.5rem;
}

.contact-modal p {
  margin: 0 0 20px;
}

.contact-modal a {
  color: inherit;
}

.contact-form label {
  display: block;
  margin: 0 0 6px;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-black);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: inherit;
  font-size: 16px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button[type="submit"] {
  padding: 12px 28px;
  border: 0;
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.contact-modal-close:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button[type="submit"]:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 2px;
}

html:has(.contact-modal[open]) {
  overflow: hidden;
}

/* Fade + slide in */
.contact-modal[open] {
  animation: contact-modal-in 0.25s ease-out;
}

@keyframes contact-modal-in {
  from { opacity: 0; transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal[open] {
    animation: none;
  }
}

/* Phones */
@media (max-width: 480px) {
  .contact-modal-inner {
    padding: 24px 20px;
  }
}


/* -----------------------------------------
   7. Content focus ring
   The global focus ring is yellow, which is too faint on white page
   content, so links and buttons inside each page's <main> get a navy one.
----------------------------------------- */
.main-page a:focus-visible,
.main-page button:focus-visible,
.evidence-page a:focus-visible,
.evidence-page button:focus-visible,
.evidence-page input:focus-visible,
.policy-page a:focus-visible,
.policy-page button:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 2px;
}

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

/* Small laptops (1025-1280px): logo, five links and the Shop button
   didn't fit on one row, so links wrapped into a ragged second line.
   Slightly tighter spacing keeps it on one row until the hamburger
   takes over at 1024px. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .logo img { height: 64px; }

  .nav-links {
    margin-left: 1.5rem;
    gap: 0.5rem 1rem;
    font-size: 1.05rem;
  }

  .btn--nav {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.05rem;
  }
}

/* Contact modal: the note under Send once the email app opens */
.contact-modal .contact-form-status {
  margin: 16px 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.contact-modal .contact-form-status:empty { display: none; }
/* -----------------------------------------
   9. PHONE AND TABLET POLISH (October 2026)
   Touch and small-screen rules only; desktop is unchanged.
----------------------------------------- */

/* Menu button: no grey flash on tap (iOS/Android) and no 300ms
   double-tap-zoom wait before the menu opens */
.nav-toggle,
.btn,
.contact-modal-close {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Phones and tablets: footer links get a finger-sized tap area.
   The padding replaces the old gap, so the spacing looks the same. */
@media (max-width: 1024px) {
  .footer__nav li { margin-bottom: 0; }

  .footer__nav a {
    display: inline-block;
    padding: 0.375rem 0;
  }

  .footer__nav h3 { margin-bottom: 0.625rem; }

  .footer__legal a {
    display: inline-block;
    padding: 0.5rem 0;
  }
}

/* Phones: legal links were 13.6px grey, hard to read and to hit */
@media (max-width: 640px) {
  .footer__bottom { font-size: 0.9rem; }
  .footer__legal { gap: 0 1.25rem; }
}