/* ==========================================================================
   Heyford Solicitors — stylesheet
   Plain CSS, no build step, no external requests.

   Design notes (from the client brief):
   - Must evoke trust; deliberately class-neutral. No green.
   - Colours match the HS logo: navy, with muted gold as a thin accent only.
   - Primary audience is 50+. Large base type, high contrast, generous line
     height, big tap targets, obvious focus rings, no small print.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour — navy and gold taken from the HS logo. Logo gold (--gold) is only
     ~2.9:1 on white: use it for decoration and on navy, never for text on
     white. Gold text on white uses --gold-dark (4.8:1+ on all light backgrounds). */
  --ink:            #16202e;
  --ink-soft:       #48566b;
  --ink-faint:      #6b7789;

  --navy:           #0a2248;
  --navy-dark:      #071a38;
  --navy-mid:       #2c5183;

  --gold:           #b8913f;
  --gold-dark:      #82652a;

  --bg:             #ffffff;
  --bg-soft:        #f7f5f2;  /* warm off-white */
  --bg-tint:        #eef1f6;  /* cool tint, pairs with navy */

  --border:         #dcd8d1;
  --border-strong:  #bdb8af;

  --focus:          #b4611f;

  /* Type */
  --font-head: Georgia, "Times New Roman", "Nimbus Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap:    1.5rem;
  --gap-md: 2.5rem;
  --gap-lg: 4rem;
  --gap-xl: 6rem;

  --radius: 4px;
  --shadow: 0 1px 2px rgba(22, 32, 46, .06), 0 6px 20px rgba(22, 32, 46, .07);

  --measure: 68ch;      /* readable line length for body copy */
  --page: 1140px;       /* outer container */
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  /* 18px base — deliberately larger than a default site. */
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-dark);
  line-height: 1.2;
  margin: 0 0 var(--gap-sm);
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p, ul, ol { margin: 0 0 var(--gap-sm); }
ul, ol { padding-left: 1.35em; }
li { margin-bottom: .5em; }

a {
  color: var(--navy-mid);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--gold-dark); }

strong { font-weight: 600; color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--gap-md) 0;
}

/* One consistent, highly visible focus style everywhere. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gap);
}

.section { padding-block: var(--gap-lg); }
.section--soft { background: var(--bg-soft); }

.section--navy {
  background: var(--navy-dark);
  color: #e9edf3;
}
.section--navy h2,
.section--navy h3 { color: #fff; }
/* Buttons keep their own colours — this is for body links only. */
.section--navy a:not(.btn) { color: #cddcf0; }
.section--navy .lede { color: #c3cfe0; }

.prose { max-width: var(--measure); }
/* Same reason as .contact-list — email addresses in body copy. */
.prose a { overflow-wrap: anywhere; }
.prose > * + h2 { margin-top: var(--gap-md); }
.prose > * + h3 { margin-top: var(--gap); }

.center { text-align: center; }
.center .prose { margin-inline: auto; }

.mt-sm { margin-top: var(--gap-sm); }
.mt    { margin-top: var(--gap); }
.mt-md { margin-top: var(--gap-md); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 var(--gap-xs);
}
.section--navy .eyebrow,
.page-head .eyebrow { color: var(--gold); }

.lede {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy-dark);
  color: #fff;
  padding: 1rem 1.5rem;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  /* Min 52px tall — comfortable for older users and shaky hands. */
  min-height: 52px;
  padding: .8rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn--primary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #fff;
}

.btn--secondary {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--secondary:hover {
  background: var(--navy);
  color: #fff;
}

.btn--on-dark {
  background: #fff;
  border-color: #fff;
  color: var(--navy-dark);
}
.btn--on-dark:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn--ghost-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.btn--ghost-on-dark:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap);
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  min-height: 84px;
  padding-block: .75rem;
}

/* Wordmark: firm name + tagline. In the header it sits beside the HS monogram. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
}
/* Header logo: the HEYFORD / SOLICITORS lettering from the client's logo
   (src/static/img/logo-wordmark.png, cropped without the HS monogram). */
.site-logo {
  display: inline-flex;
  flex: none;
}
.site-logo img {
  display: block;
  width: auto;
  height: 48px;
}
@media (max-width: 560px) {
  .site-logo img { height: 38px; }
}
@media (max-width: 360px) {
  .site-logo img { height: 29px; }
}
.wordmark__name {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy-dark);
  letter-spacing: .005em;
}
.wordmark__tag {
  max-width: 17rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .25rem;
}
.wordmark:hover .wordmark__name { color: var(--gold-dark); }

/* Only shown when JavaScript is available — without it the nav stays
   permanently expanded rather than trapped behind a dead button. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .5rem .9rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-dark);
  background: transparent;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle svg { flex: none; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  padding: .7rem .85rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  border-bottom: 3px solid transparent;
}
.site-nav a:hover {
  color: var(--navy);
  background: var(--bg-tint);
}
.site-nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.site-nav .nav-cta a {
  margin-left: .5rem;
  padding: .7rem 1.2rem;
  background: var(--navy);
  color: #fff;
  border-bottom-color: transparent;
}
.site-nav .nav-cta a:hover {
  background: var(--navy-dark);
  color: #fff;
}

/* Small screens: a plain disclosure menu. No off-canvas trickery.
   Breakpoint is wider than the rest of the layout because six nav items
   (one of them "Lasting Powers of Attorney") need about 1160px.
   Keep in step with the resize check in main.js. */
@media (max-width: 1160px) {
  .js .nav-toggle { display: inline-flex; }

  .header-inner { flex-wrap: wrap; }

  /* Default (no JS): the nav simply stacks under the wordmark, always
     visible. With JS it collapses behind the Menu button. */
  .site-nav { width: 100%; }

  .js .site-nav {
    display: none;
    width: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: var(--gap-xs) var(--gap) var(--gap);
  }
  .js .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav li { margin: 0; }
  .site-nav a {
    padding: 1rem .5rem;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--border);
    background: var(--bg-tint);
  }
  .site-nav .nav-cta a {
    margin: var(--gap-sm) 0 0;
    text-align: center;
    border-radius: var(--radius);
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding-block: var(--gap-lg);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--gap-md);
  align-items: center;
}

.hero h1 { margin-bottom: var(--gap-sm); }
.hero .lede { max-width: 34em; }

/* Placeholder panel where the client's photograph will go (DRAFT: red). */
.hero__media {
  position: relative;
  min-height: 340px;
  border-radius: var(--radius);
  border: 3px dashed #e00000;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(224, 0, 0, .06) 0 12px,
      rgba(224, 0, 0, .12) 12px 24px
    ),
    #fff5f5;
  display: grid;
  place-items: center;
  padding: var(--gap);
  text-align: center;
  color: #c00000;
  font-size: .9375rem;
}

/* Hero photograph (replaces the placeholder panel above when in use). */
.hero__photo {
  display: block;
  min-height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media,
  .hero__photo { min-height: 200px; order: -1; }
  .hero__photo img { max-height: 280px; }
}

/* Page header for interior pages */
.page-head {
  background: var(--navy-dark);
  color: #e9edf3;
  padding-block: var(--gap-md);
}
.page-head h1 { color: #fff; margin-bottom: .5rem; }
.page-head .lede { color: #c3cfe0; max-width: 55ch; }

/* --------------------------------------------------------------------------
   7. Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumb {
  padding-block: .9rem;
  border-bottom: 1px solid var(--border);
  font-size: .9375rem;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before {
  content: "›";
  margin-right: .5rem;
  color: var(--ink-faint);
}
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   8. Trust strip
   -------------------------------------------------------------------------- */

.trust-strip {
  background: var(--navy-dark);
  color: #dfe6f0;
  padding-block: var(--gap-sm);
}
.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-xs) var(--gap-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.trust-strip svg { flex: none; color: var(--gold); }

/* --------------------------------------------------------------------------
   9. Cards / grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--gap);
}

/* Grid items default to min-width:auto, so one long unbreakable string (an
   email address, say) can force a track wider than the screen. */
.grid > *,
.feature > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  padding: var(--gap);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); }
.card__icon {
  color: var(--navy);
  margin-bottom: var(--gap-sm);
}
.card__link {
  margin-top: auto;
  padding-top: var(--gap-sm);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.card__link::after {
  content: "→";
  transition: transform .15s ease;
}

/* The whole card is clickable, but the real link stays the focus target. */
/* Bottom of a card (price + button): pinned so buttons line up across a row. */
.card__foot {
  margin-top: auto;
  padding-top: var(--gap-sm);
}
.card__foot .btn { width: 100%; }
.card .callout { margin-block: var(--gap-sm); }
.card .callout p { color: var(--ink); }

/* Price rows inside a card: label left, price right. */
.price-list {
  margin: 0 0 var(--gap-sm);
  border-top: 1px solid var(--border);
}
.price-list > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--gap-sm);
  padding-block: .6rem;
  border-bottom: 1px solid var(--border);
}
.price-list dt { font-weight: 600; }
.price-list dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy-dark);
}
.card .price-note {
  font-weight: 600;
  color: var(--ink);
  padding-block: .6rem;
  border-block: 1px solid var(--border);
}

.card--link { position: relative; }
.card--link:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card--link:hover .card__link::after { transform: translateX(3px); }
.card--link:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.card--link .card__link::before {
  content: "";
  position: absolute;
  inset: 0;
}
.card--link .card__link:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   10. Steps
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap);
}

.steps li {
  counter-increment: step;
  margin: 0;
  padding-left: 4rem;
  position: relative;
  min-height: 3rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border-radius: 50%;
}
.steps li { padding-top: .45rem; }
.steps h3 { margin-bottom: .35rem; }
.steps p { color: var(--ink-soft); margin-bottom: 0; }

.section--navy .steps li::before {
  background: #fff;
  color: var(--navy-dark);
}
.section--navy .steps p { color: #c3cfe0; }

/* --------------------------------------------------------------------------
   11. Feature panel (two-column layout)
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  align-items: center;
}
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }

/* Use where one column is much taller than the other and centring it would
   leave the short column floating in the middle. */
.feature--top { align-items: start; }

.tick-list {
  list-style: none;
  padding: 0;
  margin: var(--gap-sm) 0 0;
}
.tick-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .75rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.15rem;
  height: .6rem;
  border-left: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  transform: rotate(-45deg);
}
.section--navy .tick-list li::before { border-color: var(--gold); }

.panel {
  padding: var(--gap-md);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel--flat { box-shadow: none; }
.panel--narrow { max-width: 48rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   12. Callouts
   -------------------------------------------------------------------------- */

.callout {
  padding: var(--gap);
  background: var(--bg-tint);
  border-left: 5px solid var(--navy);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-block: var(--gap);
}
.callout :last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: .5rem; }

/* DRAFT MARKERS: anything not ready for launch is bright red so it can't be
   missed. Nothing styled like this may go live (see README "Checks"). */
.callout--placeholder {
  color: var(--ink);
  background: #ffe3e3;
  border-left: 6px solid #e00000;
  outline: 2px dashed #e00000;
  outline-offset: -2px;
}
.callout--placeholder::before {
  content: "DRAFT: not ready";
  display: block;
  margin-bottom: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c00000;
}

/* Marks copy that Sofia still has to supply. Remove .placeholder once the
   real wording is in. Sets its own colours so it stays legible on navy
   (footer, page head, CTA bands) as well as on white. */
.placeholder {
  color: #fff;
  background: #e00000;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 .25em;
}

/* --------------------------------------------------------------------------
   13. Detail / accordion (procedure steps, FAQs)
   -------------------------------------------------------------------------- */

.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details + details { border-top: 1px solid var(--border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: 1.15rem var(--gap);
  min-height: 56px;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-dark);
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--bg-tint); }

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-dark);
}
.faq details[open] summary { background: var(--bg-tint); }
.faq details[open] summary::after { content: "–"; }

.faq__body {
  padding: 0 var(--gap) var(--gap);
  max-width: var(--measure);
}
.faq__body :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.form {
  max-width: 42rem;
}

.form fieldset {
  margin: 0 0 var(--gap-md);
  padding: 0;
  border: 0;
}
.form legend {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy-dark);
  padding: 0;
  margin-bottom: .35rem;
}
.form fieldset > .hint { margin-bottom: var(--gap); }

.field { margin-bottom: var(--gap); }

.field label,
.field .field__label {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: .35rem;
  color: var(--ink);
}

.hint {
  display: block;
  font-size: .9375rem;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.hint--inline {
  display: inline;
  margin: 0;
  font-weight: 400;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: .75rem .9rem;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
}
.field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy);
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.field--inline-group { display: grid; gap: var(--gap-sm); }
@media (min-width: 640px) {
  .field--inline-group { grid-template-columns: 1fr 1fr; }
}

/* Radio / checkbox rows sized for imprecise taps. */
.choice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  margin: 0;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
}
.choice:hover { border-color: var(--navy); background: var(--bg-tint); }
.choice input {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: .12rem 0 0;
  accent-color: var(--navy);
}
.choice:has(input:checked) {
  border-color: var(--navy);
  background: var(--bg-tint);
}
.choice:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
  padding-top: var(--gap-xs);
}

/* Spam trap. Off-screen rather than display:none so naive bots still fill
   it in; aria-hidden + tabindex=-1 keep it away from people. */
.form__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form { position: relative; }

.form-note {
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   15. Contact details
   -------------------------------------------------------------------------- */

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Email addresses are long and unbreakable; wrap rather than overflow. */
  overflow-wrap: anywhere;
}
.contact-list li {
  display: flex;
  gap: var(--gap-sm);
  padding-block: var(--gap-sm);
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list svg { flex: none; color: var(--navy); margin-top: .25rem; }
.contact-list strong { display: block; }
.contact-list a { font-weight: 600; }

address { font-style: normal; }
.address-block {
  margin: 0 0 var(--gap-sm);
  padding-left: var(--gap-sm);
  border-left: 3px solid var(--border);
  overflow-wrap: anywhere;
}

/* Phone numbers and email addresses set a touch larger for legibility. */
.contact-big {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   16. Tables (fees)
   -------------------------------------------------------------------------- */

/* Wrapper scrolls sideways on narrow screens. It is focusable (tabindex=0)
   so keyboard users can scroll it, and labelled as a region. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline-offset: 2px; }
.table-wrap table { margin: 0; }
.table-wrap tr:last-child > * { border-bottom: 0; }
/* Multi-column comparisons: keep columns readable and scroll instead. */
table.table--wide { min-width: 40rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
}
th, td {
  padding: .9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
caption {
  text-align: left;
  font-weight: 600;
  padding: 0 0 .5rem;
}
tbody th {
  font-weight: 600;
  color: var(--ink);
}
.th-sub {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
}

thead th {
  background: var(--bg-tint);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy-dark);
  border-bottom: 2px solid var(--border-strong);
}

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--navy);
  color: #fff;
  padding-block: var(--gap-md);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cddcf0; max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-dark);
  color: #b9c6d8;
  padding-block: var(--gap-md) var(--gap);
  font-size: 1rem;
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--gap-sm);
}
.site-footer a { color: #dbe4f0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--gap-md);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; }

.site-footer .wordmark__name { color: #fff; }
.site-footer .wordmark__tag { color: #91a3bd; }

.footer-legal {
  margin-top: var(--gap-md);
  padding-top: var(--gap);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9375rem;
  color: #94a5bd;
}
.footer-legal p { max-width: 80ch; }
.footer-legal__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
  margin-bottom: var(--gap-sm);
}
.footer-legal__row p { flex: 1 1 26rem; margin: 0; }
.footer-legal address { line-height: 1.6; }

/* Box reserved for the SRA digital badge (roughly the badge's own size). */
.sra-badge {
  flex: none;
  width: 100%;
  max-width: 275px;
  min-height: 163px;
}
.sra-badge--placeholder {
  display: grid;
  place-items: center;
  padding: var(--gap-sm);
  text-align: center;
  border: 2px dashed #e00000;
  border-radius: var(--radius);
}
.footer-legal :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .cta-band, .trust-strip, .nav-toggle { display: none; }
  body { font-size: 11pt; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}