/* ==========================================================================
   Yorkshire Redundancy Partners
   Direction: municipal / chamber-of-commerce printing, contemporary rendition.
   See DIRECTION.md. Seed key 970ae2fa.

   Every value downstream references a token in :root. Change the token,
   never the instance.
   ========================================================================== */

:root {
  /* --- Committed field: ink green. Carries masthead, closing bands, panels. */
  --ink:        #101F1A;
  --ink-raised: #1A2F28;
  --ink-rule:   #33564A;        /* decorative dividers on ink only */
  --ink-rule-strong: #578778;   /* interactive borders on ink. 4.17:1 on --ink */

  /* --- Reading ground: cool paper grey. Deliberately not cream. */
  --paper:        #EDF0EE;
  --paper-raised: #FFFFFF;
  --paper-sunk:   #E3E8E5;

  /* --- Ink on paper */
  --text:     #131E1A;
  --text-mid: #43554E;

  /* --- Paper on ink */
  --on-ink:     #E8EDEA;
  --on-ink-mid: #A9BFB6;

  /* --- The single accent. Primary action only. Never decorative. */
  --brass:       #8E5D0C;   /* white label 5.64:1. Also 4.92:1 as a link on paper. */
  --brass-lift:  #734C0A;   /* hover. white label 7.59:1 */
  --on-brass:    #FFFFFF;

  /* --- Hairlines carry the structure that cards would otherwise carry. */
  --rule:        #C4CFCA;   /* decorative hairlines only */
  --rule-strong: #76887F;   /* interactive borders. 3.27:1 on --paper, 3.75:1 on white */

  --focus: #0B5FBF;

  /* --- Type */
  --display: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  --text-face: "Switzer", ui-sans-serif, system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.36vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.6vw, 1.8rem);
  --step-3:  clamp(1.73rem, 1.53rem + 0.98vw, 2.28rem);
  --step-4:  clamp(2.07rem, 1.76rem + 1.55vw, 2.89rem);
  --step-5:  clamp(2.49rem, 2.01rem + 2.4vw, 3.66rem);

  /* --- Space */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 6.5rem;

  --measure: 68ch;
  --shell: 76rem;
}

/* --------------------------------------------------------------- reset --- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--text-face);
  font-size: var(--step-0);
  line-height: 1.62;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p, ul, ol { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

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

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

.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 {
  position: absolute; left: var(--s-3); top: -100vh;
  background: var(--brass); color: var(--on-brass);
  padding: var(--s-2) var(--s-4); z-index: 50; font-weight: 600;
}
.skip:focus { top: var(--s-3); }

/* --------------------------------------------------------------- shell --- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

@media (min-width: 48rem) {
  .shell { padding-inline: var(--s-5); }
}

/* Sections are separated by hairlines, never by cards. */
.band { padding-block: var(--s-7); }
.band + .band { border-top: 1px solid var(--rule); }
.band--tight { padding-block: var(--s-6); }

.band--ink {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 0 !important;
}
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--on-ink); }
.band--ink a { color: var(--on-ink); }

/* ------------------------------------------------------------- masthead --- */

.masthead {
  background: var(--ink);
  color: var(--on-ink);
  border-bottom: 1px solid var(--ink-rule);
}

.masthead__row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 4.5rem;
  flex-wrap: wrap;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  color: var(--on-ink);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.wordmark svg { width: 1.5rem; height: 1.5rem; flex: none; align-self: center; }
.wordmark span { font-weight: 400; color: var(--on-ink-mid); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; }

.nav {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
  font-size: var(--step--1);
  max-width: none;
}
.nav a { color: var(--on-ink-mid); text-decoration: none; padding-block: var(--s-1); }
.nav a:hover { color: var(--on-ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--on-ink); text-decoration: underline; text-decoration-thickness: 2px; }

.masthead__tel {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--on-ink);
  text-decoration: none;
  white-space: nowrap;
}
.masthead__tel:hover { text-decoration: underline; }

@media (max-width: 61.99rem) {
  .nav { display: none; }
  .masthead__row { min-height: 3.75rem; }
}

/* Below ~30rem the full wordmark plus the Doncaster qualifier plus the phone
   number exceeds the viewport and forces a horizontal scrollbar. Drop the
   qualifier and step the wordmark down rather than let the page overflow. */
@media (max-width: 30rem) {
  .wordmark { font-size: var(--step-0); gap: 0.4rem; }
  .wordmark span { display: none; }
  .wordmark svg { width: 1.15rem; height: 1.15rem; }
  .masthead__tel { font-size: var(--step--1); }
}

/* ----------------------------------------------------------------- hero --- */

.hero { background: var(--ink); color: var(--on-ink); padding-block: var(--s-7) var(--s-8); }

.hero__grid {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.72fr) minmax(17rem, 1fr); gap: var(--s-7); }
}

.hero h1 { color: var(--on-ink); max-width: 18ch; }

.hero__lead {
  font-size: var(--step-1);
  color: var(--on-ink);
  margin-top: var(--s-4);
  max-width: 46ch;
}
.hero__sub { color: var(--on-ink-mid); margin-top: var(--s-3); max-width: 52ch; }

/* The standing register: coverage as proof, present in the first viewport. */
.register {
  border: 1px solid var(--ink-rule);
  background: var(--ink-raised);
  padding: var(--s-4);
}
.register__title {
  font-family: var(--display);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-ink-mid);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--ink-rule);
}
.register__list { list-style: none; margin: 0; padding: 0; max-width: none; }
.register__list li + li { border-top: 1px solid var(--ink-rule); }
.register__list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-2);
  color: var(--on-ink);
  text-decoration: none;
}
.register__list a:hover { text-decoration: underline; }
.register__count { color: var(--on-ink-mid); font-size: var(--step--1); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- action --- */

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  padding: 0.85rem var(--s-4);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.btn--primary { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }
.btn--primary:hover { background: var(--brass-lift); border-color: var(--brass-lift); }

.btn--ghost-ink { background: transparent; color: var(--on-ink); border-color: var(--ink-rule-strong); }
.btn--ghost-ink:hover { background: var(--ink-raised); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--paper-raised); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ----------------------------------------------------------- two column --- */

.split { display: grid; gap: var(--s-6); }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .split--lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.section-head { margin-bottom: var(--s-5); }
.section-head p { color: var(--text-mid); margin-top: var(--s-3); }

/* ----------------------------------------------------------- prose list --- */

.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding-block: var(--s-3); border-top: 1px solid var(--rule); }
.list-plain li:first-child { border-top: 0; padding-top: 0; }
.list-plain strong { font-family: var(--display); font-weight: 700; display: block; margin-bottom: 0.15rem; }
.list-plain p { color: var(--text-mid); margin: 0; }

/* Numbered register of steps. The sequence carries information here. */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
}
.steps li:first-child { border-top: 0; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
  font-size: var(--step-1);
  line-height: 1.15;
}
.steps h3 { margin-bottom: 0.35rem; }
.steps p { color: var(--text-mid); margin: 0; }

/* ------------------------------------------------------------ town rows --- */

/* Register rows, not cards. Children nest visibly beneath their county parent. */
.county-group + .county-group { margin-top: var(--s-6); }
.county-group__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--text);
}
.county-group__head h3 { font-size: var(--step-2); }
.county-group__head a { color: var(--text-mid); font-size: var(--step--1); text-decoration: underline; }
.county-group__blurb { color: var(--text-mid); margin: var(--s-3) 0 0; font-size: var(--step--1); }

.town-list {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0 0 0 var(--s-4);
  border-left: 1px solid var(--rule);
  max-width: none;
}
/* Two columns, never three. County town counts vary (1 to 9), and three
   CSS columns leave a visibly empty third column on any county with four. */
@media (min-width: 40rem) {
  .town-list { columns: 2; column-gap: var(--s-5); }
}
.town-list li { break-inside: avoid; }
.town-list a {
  display: block;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--text);
}
.town-list a:hover { color: var(--brass-lift); text-decoration: underline; }

/* ------------------------------------------------------------- neighbours - */

.neighbours { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; max-width: none; }
.neighbours a {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--rule-strong);
  text-decoration: none;
  font-size: var(--step--1);
}
.neighbours a:hover { border-color: var(--text); }

/* ----------------------------------------------------------- breadcrumb --- */

/* No `max-width: none` here. `.crumb` sits on the same element as `.shell`,
   so cancelling the max-width breaks the shared left edge and floats the
   breadcrumb 112px left of every other section. The inner <ol> handles it. */
.crumb { font-size: var(--step--1); color: var(--text-mid); padding-block: var(--s-3); }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; max-width: none; }
.crumb li::after { content: "/"; margin-left: 0.4rem; color: var(--rule-strong); }
.crumb li:last-child::after { content: ""; }
.crumb a { color: var(--text-mid); }

/* ------------------------------------------------------------ quotation --- */

.quote { border-top: 2px solid var(--text); padding-top: var(--s-4); max-width: 44ch; }
.quote blockquote { margin: 0; font-family: var(--display); font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.02em; }
.quote figcaption { margin-top: var(--s-3); color: var(--text-mid); font-size: var(--step--1); }
.band--ink .quote { border-top-color: var(--on-ink-mid); }
.band--ink .quote figcaption { color: var(--on-ink-mid); }

/* ---------------------------------------------------------------- notes --- */

.note {
  border: 1px solid var(--rule-strong);
  padding: var(--s-4);
  background: var(--paper-raised);
}
.note h3 { font-size: var(--step-0); margin-bottom: var(--s-2); }
.note p { color: var(--text-mid); margin-bottom: var(--s-2); font-size: var(--step--1); }
.note p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- FAQ --- */

.faq { border-top: 1px solid var(--rule); max-width: var(--measure); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  padding-block: var(--s-3);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--text-mid); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-bottom: var(--s-4); }
.faq details > div > p { color: var(--text-mid); }

/* ---------------------------------------------------------------- form --- */

.form { display: grid; gap: var(--s-4); max-width: 34rem; }
.form--wide { max-width: none; }

.field { display: grid; gap: var(--s-1); }
.field label { font-weight: 600; font-size: var(--step--1); }
.field .hint { color: var(--text-mid); font-size: var(--step--1); }

.field input, .field textarea, .field select {
  font: inherit;
  font-size: var(--step-0);
  color: var(--text);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: 0.7rem var(--s-3);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--text); }
.field textarea { min-height: 8rem; resize: vertical; }

.band--ink .field label { color: var(--on-ink); }
.band--ink .field .hint { color: var(--on-ink-mid); }

.field--error input, .field--error textarea, .field--error select { border-color: #A31515; border-width: 2px; }
.field__error { color: #A31515; font-size: var(--step--1); font-weight: 600; }
.band--ink .field__error { color: #FF9C9C; }

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

.form__status { padding: var(--s-3); border: 1px solid var(--rule-strong); font-size: var(--step--1); }
.form__status[data-tone="error"] { border-color: #A31515; border-width: 2px; color: #A31515; font-weight: 600; }
.band--ink .form__status[data-tone="error"] { color: #FF9C9C; border-color: #FF9C9C; }

.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------------- footer --- */

.footer { background: var(--ink); color: var(--on-ink-mid); padding-block: var(--s-7) var(--s-5); }
.footer a { color: var(--on-ink-mid); }
.footer a:hover { color: var(--on-ink); }

.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .footer__grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }

.footer h2 {
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-ink);
  margin-bottom: var(--s-3);
}
.footer ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.footer li + li { margin-top: var(--s-2); }
.footer address { font-style: normal; }

.footer__tel {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--on-ink) !important;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: var(--s-2);
}

.footer__base {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: var(--step--1);
}

.accreditations { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; margin: 0; max-width: none; }

/* ------------------------------------------------------------- utility --- */

.lede { font-size: var(--step-1); max-width: 52ch; }
.muted { color: var(--text-mid); }
.band--ink .muted { color: var(--on-ink-mid); }
.stack > * + * { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

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