/* Push Pharmacy - site styles
   Brand green #A0CE4E is used as an accent only: it is too light for text on white.
   --green-700 is the accessible "action" green (5.3:1 on white, WCAG AA). */

/* Poppins by Indian Type Foundry, SIL Open Font License 1.1. Self-hosted so no visitor data goes to Google. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.woff2") format("woff2"); }

:root {
  --green-300: #cfe6a6;
  --green-500: #a0ce4e;
  --green-700: #3d7a1f;
  --green-800: #2c5e14;
  --green-50: #f4f8ee;
  --ink: #1f2a24;
  --muted: #55615a;
  --line: #dde5d6;
  --white: #ffffff;
  --focus: #ffbf47;
  --todo: #fff3bf;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(31, 42, 36, 0.06), 0 8px 24px rgba(31, 42, 36, 0.08);
  --wrap: 1120px;

  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Keep in-page link targets clear of the sticky header */
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }

a { color: var(--green-700); text-underline-offset: 3px; }
a:hover { color: var(--green-800); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* Placeholder marker: content the pharmacy must confirm before launch */
.todo {
  background: var(--todo);
  border-bottom: 2px dashed #d4a300;
  padding: 0 3px;
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--green-700); color: var(--white); }
.btn-primary:hover { background: var(--green-800); color: var(--white); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green-700); color: var(--green-800); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ink);
  color: #e8efe3;
  font-size: 0.875rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.topbar a { color: #ffffff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: #ffffff; }
.topbar-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (max-width: 520px) {
  /* Keep the bar to one line on phones; full contact details are in the footer */
  .topbar-contact a:not(:first-child) { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}
.logo { display: inline-flex; flex-shrink: 0; text-decoration: none; }
.logo img { height: 40px; width: auto; }
@media (max-width: 380px) { .logo img { height: 34px; } }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav a {
  display: block;
  white-space: nowrap;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.site-nav a:hover { background: var(--green-50); color: var(--green-800); }
.site-nav a[aria-current="page"] { color: var(--green-700); box-shadow: inset 0 -3px 0 var(--green-500); border-radius: 0; }
.site-nav .btn { margin-left: 8px; padding: 10px 18px; border-radius: 999px; }
.site-nav .btn-primary,
.site-nav .btn-primary[aria-current="page"] { color: var(--white); box-shadow: none; border-radius: 999px; }
.site-nav .btn-primary:hover { background: var(--green-800); color: var(--white); }

/* Seven menu items need about 1100px; below that, use the Menu button */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: 12px 20px 20px; gap: 2px; }
  .site-nav a { padding: 12px; }
  .site-nav .btn { display: flex; margin: 8px 0 0; justify-content: center; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 400px at 85% -10%, var(--green-300) 0%, transparent 60%),
    linear-gradient(180deg, var(--green-50) 0%, var(--white) 100%);
  padding: 64px 0 72px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green-800);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); }
.hero h1 span { color: var(--green-700); }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 18px; }
.hero-note { font-size: 0.925rem; color: var(--muted); margin: 0; }

/* Prescription tracker card (illustrative) */
.tracker {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 400px;
  justify-self: end;
  width: 100%;
}
.tracker-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.tracker-head strong { font-family: var(--font-head); font-size: 1.05rem; }
.tracker-head small { color: var(--muted); }
.tracker ol { list-style: none; margin: 0; padding: 0; }
.tracker li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding-bottom: 18px;
  position: relative;
}
.tracker li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px; top: 32px; bottom: 2px;
  width: 2px;
  background: var(--green-300);
}
.tracker .tick {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-700);
  color: var(--white);
}
.tracker .tick svg { width: 16px; height: 16px; }
.tracker li.pending .tick { background: var(--white); border: 2px dashed var(--green-500); color: var(--green-700); }
.tracker li b { display: block; font-weight: 600; }
.tracker li span { font-size: 0.9rem; color: var(--muted); }
.tracker-foot {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 880px) {
  .hero { padding: 40px 0 48px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .tracker { justify-self: stretch; max-width: none; }
}

/* ---------- Trust strip ---------- */
.trust { border-bottom: 1px solid var(--line); }
.trust ul {
  list-style: none;
  margin: 0;
  padding: 22px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.trust li { display: flex; gap: 12px; align-items: center; font-size: 0.95rem; }
.trust li svg { width: 28px; height: 28px; flex: none; color: var(--green-700); }
.trust li b { display: block; font-family: var(--font-head); font-weight: 600; }
.trust li span { color: var(--muted); font-size: 0.875rem; }
@media (max-width: 880px) { .trust ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trust ul { grid-template-columns: 1fr; } }

/* ---------- Healthy living promo ---------- */
.health-promo { background: var(--green-50); border-bottom: 1px solid var(--line); }
.health-promo .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.health-promo h2 { font-size: 1.35rem; margin-bottom: 4px; }
.health-promo p { margin: 0; color: var(--muted); max-width: 44em; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-soft { background: var(--green-50); }
.section-head { max-width: 640px; margin-bottom: 32px; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
@media (max-width: 880px) { .section { padding: 48px 0; } }

/* Steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}
.steps li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green-500);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 16px;
}
.steps p { color: var(--muted); margin: 0; font-size: 0.975rem; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Service cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1060px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.card .icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.card .icon svg { width: 24px; height: 24px; }
.card p { color: var(--muted); }
.card .more { margin-top: auto; font-weight: 600; text-decoration: none; }
.card .more:hover { text-decoration: underline; }

/* Eligibility split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.checklist { list-style: none; margin: 0 0 24px; padding: 0; }
.checklist li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--green-700); margin-top: 3px; }
.callout {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--green-500);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
}
.callout h3 { margin-bottom: 8px; }
.callout p { color: var(--muted); }
.callout p:last-child { margin-bottom: 0; }
.callout > :first-child { margin-top: 0; }
.callout-spaced { margin-top: 16px; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* FAQ */
.faq { max-width: 820px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px 22px;
  font-family: var(--font-head);
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--green-700);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 22px 18px; color: var(--muted); }
.faq details > div p:last-child { margin-bottom: 0; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { margin-bottom: 16px; }
.faq-more { margin-top: 24px; }

/* Regulatory block */
.reg {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px;
  background: var(--white);
}
.reg dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.reg dt { color: var(--muted); font-size: 0.95rem; }
.reg dd { margin: 0; font-weight: 600; }
@media (max-width: 880px) {
  .reg { grid-template-columns: 1fr; padding: 24px; }
  .reg dl { grid-template-columns: 1fr; gap: 2px; }
  .reg dd { margin-bottom: 10px; }
}

/* CTA band */
.cta-band {
  background: var(--ink);
  color: #e8efe3;
  border-radius: 20px;
  padding: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.cta-band h2 { color: var(--white); margin-bottom: 6px; }
.cta-band p { margin: 0; }
.cta-band .btn-primary { background: var(--green-500); color: var(--ink); }
.cta-band .btn-primary:hover { background: var(--green-300); color: var(--ink); }
@media (max-width: 520px) { .cta-band { padding: 28px; } }

/* ---------- Healthy living page ---------- */
.campaign {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 40px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--green-500);
  border-radius: var(--radius);
  padding: 28px 32px;
}
.campaign { align-items: flex-start; }
.campaign > div:first-child { max-width: 44em; flex: 1 1 420px; }
.campaign .eyebrow { margin-bottom: 10px; }
.campaign p:last-child { margin-bottom: 0; }
.campaign-actions { display: flex; flex-direction: column; gap: 12px; flex: 0 1 300px; }
.campaign-actions .btn { justify-content: center; }
.checklist.compact li { padding: 6px 0; border-bottom: 0; }

.nhs-search { display: flex; flex-wrap: wrap; gap: 12px; max-width: 720px; }
.nhs-search input {
  flex: 1 1 280px;
  font: inherit;
  padding: 12px 16px;
  border: 2px solid var(--input-border, #6b7770);
  border-radius: 999px;
  background: var(--white);
}
.nhs-search input:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
.small-note { color: var(--muted); font-size: 0.925rem; margin-top: 14px; }

.link-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.link-grid a {
  display: block;
  height: 100%;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.link-grid a:hover { border-color: var(--green-500); box-shadow: var(--shadow); }
.link-grid b { display: block; font-family: var(--font-head); font-weight: 600; color: var(--green-700); margin-bottom: 4px; }
.link-grid b::after { content: " \2197"; font-weight: 400; }
.link-grid span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 880px) { .link-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .link-grid { grid-template-columns: 1fr; } }

.cards.cards-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .cards.cards-3 { grid-template-columns: 1fr; } }

/* ---------- Long-form pages (policies, complaints) ---------- */
.prose { max-width: 46em; }
.prose h2 { font-size: 1.5rem; margin: 2.2em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: 1.6em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }
.prose .updated { color: var(--muted); font-size: 0.95rem; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 0.975rem;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.prose th { font-family: var(--font-head); font-weight: 600; background: var(--green-50); }
.table-scroll { overflow-x: auto; margin: 0 0 1.4em; }
.table-scroll table { margin: 0; min-width: 520px; }

.contact-card {
  border: 1px solid var(--line);
  border-left: 5px solid var(--green-500);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 0 0 1.2em;
  background: var(--white);
}
.contact-card p { margin: 0 0 4px; }
.contact-card p:last-child { margin: 0; }
.contact-card strong { font-family: var(--font-head); }

.toc {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 22px;
  margin: 0 0 2em;
  background: var(--green-50);
}
.toc h2 { font-size: 1rem !important; margin: 0 0 8px !important; }
.toc ol { margin: 0; }

.summary-box {
  background: var(--green-50);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 0 0 2em;
}
.summary-box h2 { margin-top: 0 !important; font-size: 1.2rem !important; }
.summary-box ul { margin-bottom: 0; }

/* ---------- Inner page header ---------- */
.page-head {
  background:
    radial-gradient(900px 300px at 90% -20%, var(--green-300) 0%, transparent 60%),
    var(--green-50);
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.page-head .lead { font-size: 1.15rem; color: var(--muted); max-width: 40em; margin: 0; }
.section-tight { padding-top: 48px; }

/* ---------- Forms ---------- */
:root {
  --input-border: #6b7770; /* 4.6:1 on white, meets the 3:1 contrast needed for form controls */
  --error: #b3261e;
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) { .form-layout { grid-template-columns: 1fr; gap: 40px; } }

.form fieldset { border: 0; padding: 0; margin: 0 0 40px; min-width: 0; }
.form fieldset.sub { margin: 0; }
.form > fieldset > legend {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 14px;
}
.form .field { margin-bottom: 22px; }
.form label, .form .label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.form legend.label { padding: 0; margin-bottom: 6px; font-family: var(--font-body); font-size: 1.0625rem; }
.form .optional { font-weight: 400; color: var(--muted); }
.form .hint { color: var(--muted); font-size: 0.975rem; margin: 0 0 10px; }

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form textarea,
.form select {
  display: block;
  width: 100%;
  max-width: 30em;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  padding: 11px 13px;
  border: 2px solid var(--input-border);
  border-radius: var(--radius-sm);
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 3px solid var(--focus);
  outline-offset: 0;
  border-color: var(--ink);
}
.form input.input-2 { max-width: 4.2em; text-align: center; }
.form input.input-4 { max-width: 6em; text-align: center; }
.form input.input-s { max-width: 9em; }
.form input.input-m { max-width: 18em; }
.form input.input-10 { max-width: 12em; }

.dob { display: flex; gap: 14px; }
.dob label { font-weight: 400; margin-bottom: 4px; }

.choice {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  max-width: 34em;
  padding: 13px 16px;
  margin-bottom: 10px !important;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-weight: 400 !important;
  cursor: pointer;
}
.choice input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--green-700); }
.choice:hover { border-color: var(--green-500); }
.choice:has(input:checked) { border-color: var(--green-700); background: var(--green-50); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.info-box {
  background: var(--green-50);
  border-left: 5px solid var(--green-500);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 18px;
  max-width: 36em;
}
.info-box p:last-child { margin-bottom: 0; }

.privacy-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 36em;
  color: var(--muted);
  font-size: 0.975rem;
  margin: -8px 0 28px;
}
.privacy-note svg { width: 22px; height: 22px; flex: none; color: var(--green-700); margin-top: 2px; }
.privacy-note p { margin: 0; }

.btn-lg { font-size: 1.1rem; padding: 15px 28px; }

.form .sub-label { font-weight: 400; margin: 14px 0 4px; }
.form-title { font-size: 1.5rem; margin-bottom: 6px; }
.h3 { font-size: 1.15rem; }
.callout-urgent { margin-bottom: 36px; border-left-color: var(--error); }

.contact-panel h3 { font-size: 1rem; margin: 20px 0 4px; }
.contact-panel h3:first-of-type { margin-top: 8px; }
.contact-panel p { color: var(--muted); font-size: 0.975rem; }
.contact-panel p a { font-weight: 600; }
.big-link { font-family: var(--font-head); font-size: 1.25rem; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

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

/* Errors */
.error-summary {
  border: 4px solid var(--error);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 36px;
}
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.error-summary h2 { font-size: 1.3rem; margin-bottom: 10px; }
.error-summary ul { margin: 0; padding-left: 1.1em; }
.error-summary li { margin-bottom: 4px; }
.error-summary a { color: var(--error); font-weight: 600; }
.field-error {
  border-left: 5px solid var(--error);
  padding-left: 16px;
}
.error-message { color: var(--error); font-weight: 600; margin: 0 0 8px; }
.form [aria-invalid="true"]:not([type="radio"]) { border-color: var(--error); }

.form-status {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--todo);
  border: 2px dashed #d4a300;
  max-width: 36em;
}

/* "What happens next" panel */
.next-steps {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px;
}
.next-steps h2 { font-size: 1.3rem; }
.next-steps ol { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: next; }
.next-steps li {
  counter-increment: next;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 12px;
  padding: 10px 0;
}
.next-steps li::before {
  content: counter(next);
  grid-row: span 2;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green-500);
  font-family: var(--font-head);
  font-weight: 700;
}
.next-steps li span { color: var(--muted); font-size: 0.95rem; }
.next-call { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 4px; }
.next-call a { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
.next-hours { color: var(--muted); font-size: 0.9rem; margin: 0; }
@media (max-width: 880px) { .next-steps { position: static; } }

/* ---------- Footer ---------- */
.site-footer {
  background: #151d18;
  color: #c9d3c6;
  font-size: 0.925rem;
  padding: 56px 0 28px;
  margin-top: 80px;
}
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--green-300); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.social { display: flex; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
.social li { margin: 0; }
.social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid #3a4a40;
  border-radius: 50%;
  color: #ffffff;
}
.social a:hover { background: var(--green-500); border-color: var(--green-500); color: var(--ink); }
.social svg { width: 20px; height: 20px; }

.callout-notice { border-left-color: var(--green-700); background: var(--green-50); }
.callout-notice p { color: var(--ink); }

.footer-legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #2c3a31;
  font-size: 0.85rem;
  color: #a9b5a6;
}
.footer-legal p { margin-bottom: 6px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Brand layer: the green cross from the logo as a motif, deeper colour,
   and depth. Kept last so it refines the base styles above.
   ===================================================================== */
:root {
  --green-900: #1c3a10;
  --brand-grad: linear-gradient(135deg, #b6dc6f 0%, #a0ce4e 45%, #7fb238 100%);
  --cross: linear-gradient(var(--green-500), var(--green-500)) center / 30% 100% no-repeat,
           linear-gradient(var(--green-500), var(--green-500)) center / 100% 30% no-repeat;
}

/* Buttons: subtle depth. #428420 keeps white text above 4.5:1 */
.btn { transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.btn-primary { background: linear-gradient(180deg, #428420, #3d7a1f); box-shadow: 0 6px 16px rgba(61, 122, 31, 0.22); }
.btn-primary:hover { background: linear-gradient(180deg, #3d7a1f, #2c5e14); box-shadow: 0 10px 22px rgba(61, 122, 31, 0.28); transform: translateY(-1px); }

/* Small label above section headings */
.kicker {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-700);
}
.kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--green-500); }

/* ---------- Header: a soft shadow once you scroll (its height never changes, so the page never jumps) ---------- */
.site-header { transition: box-shadow 0.2s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(31, 42, 36, 0.08); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 56px;
  background:
    radial-gradient(760px 520px at 88% 30%, rgba(160, 206, 78, 0.38), transparent 62%),
    radial-gradient(620px 420px at -5% 105%, rgba(160, 206, 78, 0.2), transparent 60%),
    linear-gradient(180deg, var(--green-50) 0%, var(--white) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/cross-pattern.svg");
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
  mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
  opacity: 0.7;
}
.hero .wrap { position: relative; z-index: 1; grid-template-columns: 1.1fr 0.9fr; align-items: start; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
.hero h1 .hl {
  color: var(--green-700);
  background: linear-gradient(transparent 62%, rgba(160, 206, 78, 0.45) 62%, rgba(160, 206, 78, 0.45) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.08em;
}
.hero-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hero-ticks li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 500; }
.hero-ticks svg { width: 18px; height: 18px; color: var(--green-700); }

.hero-visual { position: relative; justify-self: center; width: 100%; max-width: 420px; padding: 36px 0; }
.hero-cross { position: absolute; z-index: 0; width: 560px; height: 560px; left: 50%; top: 50%; translate: -50% -50%; opacity: 0.26; }
.hero-cross::before, .hero-cross::after { content: ""; position: absolute; background: var(--brand-grad); border-radius: 26px; }
.hero-cross::before { left: 35%; top: 0; width: 30%; height: 100%; }
.hero-cross::after { top: 35%; left: 0; width: 100%; height: 30%; }

.device {
  position: relative;
  z-index: 1;
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px;
  border-radius: 40px;
  background: #1f2a24;
  box-shadow: 0 34px 60px rgba(31, 42, 36, 0.28), 0 10px 22px rgba(31, 42, 36, 0.16), inset 0 0 0 2px #36443b;
}
.device::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 12px; left: 50%;
  translate: -50% 0;
  width: 96px; height: 22px;
  border-radius: 0 0 14px 14px;
  background: #1f2a24;
}
.device-screen { border-radius: 29px; background: var(--white); padding: 38px 18px 18px; overflow: hidden; }
.device-screen .tracker { border: 0; box-shadow: none; padding: 0; max-width: none; justify-self: auto; }

.float-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.float-badge .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-grad); color: var(--ink); }
.float-badge svg { width: 17px; height: 17px; }
/* Badges sit on the phone's bezel, clear of the screen's text */
.badge-a { left: -34px; top: 6px; }
.badge-b { right: -30px; bottom: 4px; animation-delay: -3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 880px) {
  .hero { padding: 32px 0 48px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero::before { -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 90%); mask-image: linear-gradient(180deg, transparent 40%, #000 90%); }
  .hero-visual { max-width: 360px; }
  .hero-cross { width: 440px; height: 440px; }
  .badge-a { left: -8px; top: 6px; }
  .badge-b { right: -8px; bottom: 4px; }
}
@media (max-width: 400px) {
  .device { width: 280px; }
  .float-badge { font-size: 0.8rem; }
}

/* ---------- Trust band ---------- */
.trust { position: relative; overflow: hidden; border: 0; background: linear-gradient(120deg, var(--green-900) 0%, var(--green-800) 100%); color: #e8f3da; }
.trust::before { content: ""; position: absolute; inset: 0; background: url("../img/cross-pattern.svg"); opacity: 0.35; }
.trust .wrap { position: relative; }
.trust ul { padding: 30px 0; }
.trust li svg { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: rgba(160, 206, 78, 0.16); color: var(--green-300); }
.trust li b { color: var(--white); }
.trust li span { color: #cfe6a6; }

/* ---------- Healthy living band ---------- */
.health-promo { background: var(--white); }
.health-promo .wrap { border-left: 5px solid var(--green-500); padding-left: 24px; }

/* ---------- Pharmacy First feature (home page) ---------- */
.pf { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--green-50) 0%, var(--white) 100%); }
.pf-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.pf-copy h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; margin-bottom: 14px; }
.pf-lead { font-size: 1.1rem; color: var(--muted); }
.pf-conditions { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pf-conditions li { padding: 12px 14px; border: 1px solid var(--line); border-top: 3px solid var(--green-500); border-radius: 12px; background: var(--white); }
.pf-conditions b { display: block; font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.pf-conditions span { font-size: 0.85rem; color: var(--muted); }
.pf-steps { list-style: none; counter-reset: pf; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.pf-steps li { counter-increment: pf; display: flex; gap: 12px; align-items: center; }
.pf-steps li::before {
  content: counter(pf);
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-grad); color: var(--ink);
  font-family: var(--font-head); font-weight: 700;
}
.pf-small { margin: 18px 0 0; font-size: 0.875rem; color: var(--muted); }
.pf-visual { position: relative; padding: 28px 0 64px; }
.pf-cross { position: absolute; z-index: 0; width: 480px; height: 480px; left: 50%; top: 50%; translate: -50% -50%; opacity: 0.22; }
.pf-cross::before, .pf-cross::after { content: ""; position: absolute; background: var(--brand-grad); border-radius: 24px; }
.pf-cross::before { left: 35%; top: 0; width: 30%; height: 100%; }
.pf-cross::after { top: 35%; left: 0; width: 100%; height: 30%; }
.pf-main, .pf-inset { position: relative; z-index: 1; margin: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 24px 48px rgba(31, 42, 36, 0.18); }
.pf-main img, .pf-inset img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Main photo on the right; the small one sits bottom-left, over the bookshelf, clear of the laptop screen */
.pf-main { width: 90%; margin-left: auto; aspect-ratio: 16 / 9; }
.pf-inset-wrap { position: absolute; z-index: 2; left: 0; bottom: 0; width: 36%; }
.pf-inset { width: 100%; aspect-ratio: 1; border: 6px solid var(--white); }
.pf-badge-a { right: -12px; top: 4px; }
.pf-badge-b { left: 55%; bottom: 18px; animation-delay: -3s; }

@media (max-width: 880px) {
  .pf-grid { grid-template-columns: 1fr; gap: 28px; }
  .pf-visual { width: 100%; max-width: 560px; justify-self: center; }
  .pf-conditions { grid-template-columns: repeat(2, 1fr); }
  .pf-badge-a { right: 0; }
}
@media (max-width: 400px) {
  .pf-badge-b { display: none; }
}

/* NHS primary care logo: official artwork only, on white, with clear space at least the
   height of the NHS lozenge, never larger than our own logo, never in the site header,
   one per page, and only on pages about NHS services. */
.nhs-logo { display: inline-block; flex: none; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); line-height: 0; }
.nhs-logo img { width: auto; height: 40px; }
a.nhs-logo { transition: border-color 0.15s, box-shadow 0.15s; }
a.nhs-logo:hover { border-color: var(--green-500); box-shadow: var(--shadow); }
/* Our content on the left, the NHS logo top right (the NHS guidelines' preferred position) */
.hero .hero-nhs { position: absolute; z-index: 2; top: 0; right: 20px; }
@media (min-width: 881px) {
  /* Drop the phone below the logo so the logo keeps its clear space */
  .hero-visual { padding: 124px 0 24px; }
  .hero-visual .badge-a { top: 94px; }
}
.page-head-nhs .wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
@media (max-width: 880px) {
  .hero .hero-nhs { position: static; order: 1; justify-self: end; }
  .hero .hero-visual { order: 2; }
  .page-head-nhs .wrap { flex-direction: column; gap: 20px; }
  .page-head-nhs .nhs-logo { align-self: flex-end; }
}

/* ---------- NHS services page ---------- */
.svc-chips { list-style: none; padding: 0; margin: 22px 0 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.svc-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 0.925rem; font-weight: 600; }
.svc-chips svg { width: 18px; height: 18px; color: var(--green-700); }
.svc-grid { list-style: none; margin: 0; padding: 0; }
.svc-grid li { display: flex; }
.svc-tile { flex: 1; padding: 24px; color: var(--ink); text-decoration: none; }
.svc-tile b { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; }
.svc-tile .desc { color: var(--muted); font-size: 0.95rem; }
.svc-tile .go { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 0.95rem; color: var(--green-700); }
.svc-tile:hover .go { text-decoration: underline; }
.svc-note { margin-top: 28px; }
.svc-row { align-items: center; }
.svc-row .photo-card { margin: 0; }
.svc-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.svc-panel { display: flex; gap: 18px; align-items: flex-start; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.svc-panel .icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--brand-grad); color: var(--ink); }
.svc-panel .icon svg { width: 24px; height: 24px; }
.svc-panel h3 { margin-bottom: 6px; }
.svc-panel p { margin: 0; color: var(--muted); }
.cards.cards-2 { grid-template-columns: repeat(2, 1fr); }
.svc-footnote { margin: 20px 0 0; font-size: 0.95rem; color: var(--muted); }
.svc-subhead { margin: 56px 0 20px; }
.svc-save { align-self: start; }
.svc-save p:last-child { margin-bottom: 0; }
.pf-solo { width: 100%; margin: 0; }
.pf-plain { background: var(--white); }
.card h4 { margin-top: 0; }
/* Big-number tiles: the same dark green as the trust band */
.stat-tiles { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-tiles li { position: relative; overflow: hidden; padding: 26px; border-radius: var(--radius); background: linear-gradient(120deg, var(--green-900) 0%, var(--green-800) 100%); color: #e8f3da; }
.stat-tiles li::before { content: ""; position: absolute; inset: 0; background: url("../img/cross-pattern.svg"); opacity: 0.3; }
.stat-tiles b, .stat-tiles span { position: relative; }
.stat-tiles b { display: block; margin-bottom: 6px; font-family: var(--font-head); font-size: 2.4rem; line-height: 1.1; color: var(--green-300); }
.tag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--green-500); color: var(--ink); font-size: 0.75rem; font-weight: 700; vertical-align: middle; }
.svc-warning { margin-top: 24px; border-left-color: var(--focus); }
.svc-warning h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.svc-warning h4 svg { width: 20px; height: 20px; color: var(--green-700); }
.steps h3 { font-size: 1.1rem; margin-bottom: 6px; }
@media (max-width: 880px) {
  .svc-panels, .stat-tiles, .cards.cards-2 { grid-template-columns: 1fr; }
}
/* On phones the service tiles become a compact two-column jump menu */
@media (max-width: 560px) {
  .cards.svc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .svc-tile { padding: 16px; }
  .svc-tile .icon { width: 40px; height: 40px; margin-bottom: 12px; }
  .svc-tile b { font-size: 0.975rem; margin: 0; }
  .svc-tile .desc, .svc-tile .go { display: none; }
}

/* ---------- Steps ---------- */
.steps li { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.steps li::before { width: 46px; height: 46px; background: var(--brand-grad); font-size: 1.1rem; box-shadow: 0 6px 14px rgba(127, 178, 56, 0.35); }

/* ---------- Cards ---------- */
.card { position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-grad); }
.card:hover { transform: translateY(-4px); border-color: var(--green-300); box-shadow: var(--shadow); }
.card .icon { background: var(--brand-grad); color: var(--ink); box-shadow: 0 6px 14px rgba(127, 178, 56, 0.3); }

/* ---------- FAQ and regulatory block ---------- */
.faq details { transition: border-color 0.15s, box-shadow 0.15s; }
.faq details[open] { border-color: var(--green-500); box-shadow: var(--shadow); }
.faq summary:hover { color: var(--green-800); }
.reg { position: relative; overflow: hidden; border-top: 5px solid var(--green-500); box-shadow: var(--shadow); }

/* ---------- Inner page headers: pattern and a large faint cross ---------- */
.page-head { position: relative; overflow: hidden; padding: 40px 0 40px; }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/cross-pattern.svg");
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 90%);
  mask-image: linear-gradient(100deg, transparent 40%, #000 90%);
  opacity: 0.7;
}
.page-head::after { content: ""; position: absolute; right: -30px; top: 50%; width: 240px; height: 240px; translate: 0 -50%; background: var(--cross); opacity: 0.18; }
.page-head .wrap { position: relative; z-index: 1; }
@media (max-width: 880px) { .page-head::after { width: 160px; height: 160px; right: -50px; } }

/* ---------- Call-to-action band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(520px 280px at 100% 0%, rgba(160, 206, 78, 0.32), transparent 62%),
    linear-gradient(135deg, #1f2a24 0%, #22361a 100%);
}
.cta-band::after { content: ""; position: absolute; right: 40px; top: 50%; width: 200px; height: 200px; translate: 0 -50%; rotate: 8deg; background: var(--cross); opacity: 0.12; }
.cta-band > * { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; border-top: 5px solid var(--green-500); }
.site-footer::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 320px; height: 320px; background: var(--cross); opacity: 0.05; pointer-events: none; }
.site-footer .wrap { position: relative; z-index: 1; }

/* ---------- Photos ---------- */
.photo-card {
  margin: 0 0 20px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(31, 42, 36, 0.16);
  aspect-ratio: 16 / 10;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; }

/* Wholesale header with a photo */
.page-head.has-photo .wrap { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 40px; align-items: start; }
.page-head .head-photo { margin: 0; aspect-ratio: 4 / 3; transform: rotate(2deg); }
.page-head .head-photo img { object-position: 50% 50%; }
@media (max-width: 880px) {
  .page-head.has-photo .wrap { grid-template-columns: 1fr; }
  .page-head .head-photo { max-width: 420px; transform: none; }
}

/* ---------- How it works: scroll story ---------- */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.story-visual { position: sticky; top: 110px; }
.story-frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 4 / 3.4;
  background: var(--green-50);
  box-shadow: 0 30px 60px rgba(31, 42, 36, 0.2);
}
.story-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(28, 58, 16, 0.55));
  pointer-events: none;
}
.story-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.7s ease, transform 1.2s ease;
}
.story-img.is-active { opacity: 1; transform: scale(1); }
.story-dots { position: absolute; z-index: 1; left: 24px; bottom: 22px; display: flex; gap: 8px; }
.story-dots span { width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); transition: width 0.3s ease, background-color 0.3s ease; }
.story-dots span.is-active { width: 34px; background: var(--green-500); }

.story-steps { list-style: none; margin: 0; padding: 0; }
.story-step {
  position: relative;
  min-height: 38vh;
  padding: 28px 0 28px 76px;
  border-left: 2px solid var(--line);
  margin-left: 22px;
  transition: opacity 0.4s ease;
}
/* Once the script is running (it adds .story-on), steps not in view step back:
   quieter heading colour (still 6:1 contrast) and a slight shift, never faded text */
.story-step h3 { transition: color 0.3s ease, translate 0.3s ease; }
.story-on .story-step:not(.is-active) h3 { color: var(--muted); translate: 0 0; }
.story-on .story-step.is-active h3 { color: var(--ink); translate: 6px 0; }
.story-step.is-active { border-left-color: var(--green-500); }
.story-step:last-child { min-height: 26vh; }
.story-num {
  position: absolute;
  left: -24px; top: 24px;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  font-family: var(--font-head);
  font-weight: 700;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.story-step.is-active .story-num { background: var(--brand-grad); border-color: transparent; box-shadow: 0 8px 18px rgba(127, 178, 56, 0.4); }
.story-step h3 { font-size: 1.5rem; margin-top: 6px; }
.story-step p { color: var(--muted); font-size: 1.1rem; max-width: 26em; }
.story-inline { display: none; }

@media (max-width: 880px) {
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .story-visual { display: none; }
  .story-step, .story-on .story-step:not(.is-active) { min-height: 0; opacity: 1; padding: 0 0 36px 44px; margin-left: 20px; border-left-color: var(--green-300); }
  .story-num { top: 0; left: -22px; width: 42px; height: 42px; background: var(--brand-grad); border: 0; }
  .story-inline { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; margin: 0 0 16px; box-shadow: var(--shadow); }
}

/* ---------- Scroll effects ----------
   Built on CSS scroll-driven animations, so they cost nothing to run and need no JavaScript.
   Browsers without support, and anyone who has asked their device to reduce motion,
   simply see everything in place. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head,
    .card,
    .faq details,
    .callout,
    .reg,
    .cta-band,
    .trust li,
    .link-grid li,
    .campaign,
    .photo-card,
    .checklist li,
    .health-promo .wrap {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    /* Photos ease from slightly zoomed to still as they scroll into view */
    .photo-card img, .story-inline {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    /* A gentle drift on the big background cross only: content always scrolls at normal speed */
    .hero-cross { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  }
}
@keyframes rise-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes settle { from { scale: 1.12; } to { scale: 1; } }
@keyframes drift { to { transform: translateY(50px) rotate(6deg); } }

/* ---------- Sending screen (shown while a form is being sent) ---------- */
.sending-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(244, 248, 238, 0.84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sending-overlay.is-visible { opacity: 1; }
.sending-card {
  max-width: 360px;
  padding: 34px 36px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 30px 60px rgba(31, 42, 36, 0.18);
  text-align: center;
  translate: 0 10px;
  transition: translate 0.3s ease;
}
.sending-overlay.is-visible .sending-card { translate: 0 0; }
.sending-mark { position: relative; width: 88px; height: 88px; margin: 0 auto 20px; }
.sending-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--green-50);
  border-top-color: var(--green-500);
  border-right-color: var(--green-700);
  animation: sending-spin 0.9s linear infinite;
}
.sending-cross { position: absolute; inset: 24px; animation: sending-breathe 1.4s ease-in-out infinite; }
.sending-cross::before, .sending-cross::after { content: ""; position: absolute; background: var(--brand-grad); border-radius: 4px; }
.sending-cross::before { left: 35%; top: 0; width: 30%; height: 100%; }
.sending-cross::after { top: 35%; left: 0; width: 100%; height: 30%; }
.sending-title { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.sending-note { margin: 0; color: var(--muted); font-size: 0.95rem; }
.btn.is-busy { opacity: 0.7; pointer-events: none; }
@keyframes sending-spin { to { rotate: 360deg; } }
@keyframes sending-breathe { 0%, 100% { scale: 0.82; } 50% { scale: 1.04; } }

/* ---------- Phones: tighter vertical spacing (desktop layout unchanged) ---------- */
@media (max-width: 560px) {
  .section { padding: 40px 0; }
  .section-tight { padding-top: 28px; }
  .section-head { margin-bottom: 24px; }
  .page-head { padding: 24px 0 28px; }
  .hero { padding: 20px 0 32px; }
  .hero .wrap { gap: 24px; }
  /* The phone illustration repeats How it works, which follows straight after; keep it for larger screens */
  .hero-visual { display: none; }
  .story-inline { aspect-ratio: 2 / 1; }
  .trust ul { padding: 22px 0; }
  .health-promo .wrap { padding-top: 22px; padding-bottom: 22px; }
  .card { padding: 22px; }
  .card.svc-tile { padding: 14px; }
  .svc-grid li { min-width: 0; }
  /* Icon beside the heading instead of above it */
  .card:not(.svc-tile) { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-content: start; }
  .card:not(.svc-tile) > * { grid-column: 1 / -1; }
  .card:not(.svc-tile) > .icon { grid-column: 1; grid-row: 1; width: 40px; height: 40px; margin: 0; }
  .card:not(.svc-tile) > .icon svg { width: 20px; height: 20px; }
  .card:not(.svc-tile) > :is(h3, h4) { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .card:not(.svc-tile) > :is(h3, h4) + * { margin-top: 12px; }
  .story-step, .story-on .story-step:not(.is-active) { padding-bottom: 28px; }
  .pf-visual { padding: 12px 0 40px; }
  .faq-group + .faq-group { margin-top: 32px; }
  .svc-panels { margin-top: 28px; }
  .stat-tiles { margin-bottom: 28px; }
  .svc-subhead { margin-top: 36px; }
  .page-head-nhs .wrap { gap: 16px; }
  .nhs-logo { padding: 16px; }
  .nhs-logo img { height: 32px; }
}
@media (max-width: 360px) {
  .svc-tile b { font-size: 0.9rem; }
}