/* ===========================================================================
   Whitehills Care — shared page furniture
   ---------------------------------------------------------------------------
   Loaded LAST, after style.css, brand.css and header.css, so these rules win
   without editing the older stylesheets.

   Every colour pairing below was measured against WCAG 2.1 AA rather than
   chosen by eye. The ratios are quoted where they drove the decision, because
   the brand gold is a mid colour and several of the obvious pairings fail.

   Re-measured September 2026, when the gold moved to the press advert's own
   (#C09041) and the site kept its #006D77 teal and navy footer. The new gold
   is darker than the #C9AA71 it replaced, so gold on white improved and gold
   on the teal and the navy moved the other way.
   =========================================================================== */

:root {
  /* Alternating section wash. Full-strength gold cannot carry a whole section
     of muted text, so this is a tint of it, and it holds every pairing:
     body 11.18:1, muted 5.47:1, teal headings 4.95:1, --gold-ink ticks 3.67:1. */
  --section-alt: #F1E7D0;

  /* Muted body text, darkened from #6B7280. On the gold wash the old value was
     3.93:1 (fails); this is 5.47:1, and it improves every white section too. */
  --text-muted: #5A5A6E;

  /* Gold for text on a dark hero, the navy footer and the contact sidebar. The
     brand gold is 3.16:1 on the hero scrim, which fails for small text; this
     passes at 4.54:1, and reads 7.98:1 on the navy footer. Not for small text
     on the #006D77 teal itself, where it is only 4.0:1. */
  --gold-on-dark: #E9CC96;
  /* Brand gold is 2.87:1 on white, which is fine for a large fill and too faint
     for a small mark: the tick bullets were barely visible. This is the same
     hue carried far enough to read at bullet size (4.51:1). Brand gold itself is
     untouched, so buttons and rules keep the brand colour exactly. */
  --gold-ink: #96702F;

  --hero-scrim: 0.65;   /* retained for anything still referencing it */
}

/* --- One hero, every page ------------------------------------------------ */
/* The photograph is no longer tinted teal. A neutral scrim keeps the image its
   own colour while carrying the text contrast, which the coloured gradient was
   doing at the cost of turning every photo the same shade of teal. */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-navy);   /* holds the text if the image 404s */
  min-height: 52vh;
  padding: 5rem 0;
}

.page-hero--tall { min-height: 68vh; }

/* The hero sits between two identical bands of page background.
   The top one already existed: `main { padding-top: 10px }` in style.css shows
   10px of body background below the navbar, with the navbar's
   `box-shadow: 0 4px 6px rgba(0,0,0,0.1)` falling across it. This mirrors it
   below - the same 10px, the same background, and the same shadow cast
   downward, so the two bands match rather than merely being the same height. */
.page-hero {
  margin-bottom: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* A focused scrim rather than a flat one, so the photograph reads brighter
     without giving up the text contrast.
     A flat 0.65 darkened the whole image evenly. Simply lightening it was not
     an option: several of these photographs contain genuine 255-white
     highlights inside the area the text sits over (compassionate_hands and
     visiting_care both do), so a flat 0.45 would put white text at 3.36:1 and
     fail even the large-text threshold.
     This holds ~0.60 behind the centred text block (6.5:1 worst case) and
     falls to 0.26 at the edges, which is what makes the image look brighter. */
  background: radial-gradient(ellipse 80% 90% at 50% 50%,
                              rgba(0, 0, 0, 0.55) 0%,
                              rgba(0, 0, 0, 0.55) 52%,
                              rgba(0, 0, 0, 0.30) 78%,
                              rgba(0, 0, 0, 0.14) 100%);
  z-index: 0;
}

.page-hero > * { position: relative; z-index: 1; }

.page-hero__inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1rem;
}

.page-hero__eyebrow {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.85rem;
}

.page-hero__title {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.15rem;
}

.page-hero__lead {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  font-size: 1.12rem;
  line-height: 1.75;
  color: #fff;
  max-width: 640px;
  margin: 0 auto;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

/* --- Gold call to action ------------------------------------------------- */
/* Dark text, not white: white on the brand gold is 2.87:1 and fails outright.
   Charcoal is 4.78:1. */
.btn-gold,
.btn-gold:visited {
  background: var(--brand-gold);
  border: 2px solid var(--brand-gold);
  color: #2C2C3A;
  font-weight: 700;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-gold:hover,
.btn-gold:focus {
  background: #CFA157;          /* lighter, so the label contrast only improves */
  border-color: #CFA157;
  color: #2C2C3A;
}

.btn-gold:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* On a dark hero an outline button needs a visible edge of its own. */
.btn-hero-ghost,
.btn-hero-ghost:visited {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-weight: 600;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  text-decoration: none;
}
.btn-hero-ghost:hover,
.btn-hero-ghost:focus { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* --- Alternating sections ------------------------------------------------ */
.section-alt { background: var(--section-alt) !important; }
.section-white { background: #fff !important; }

/* --- Tick lists ---------------------------------------------------------- */
/* One bullet treatment everywhere: a gold tick, no circle, aligned to the first
   line of its text. The tick is decorative - the wording carries the meaning -
   so the gold does not need to meet the 3:1 non-text contrast minimum. */
.tick-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.tick-list > li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.85rem;
  line-height: 1.7;
}

.tick-list > li::before {
  content: '\f633';                       /* bi-check-lg: the uncircled tick,
                                             the bolder of the two so it still
                                             reads at bullet size */
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--gold-ink);
  font-size: 1.05em;
  line-height: 1.6;
}

.tick-list--two-col { columns: 2; column-gap: 2.5rem; }
.tick-list--two-col > li { break-inside: avoid; }

@media (max-width: 767.98px) {
  .tick-list--two-col { columns: 1; }
}

/* A gold tick used inline in markup rather than as a list bullet. */
.tick-gold { color: var(--brand-gold); }

/* --- No hover transforms on content cards -------------------------------- */
/* The homepage package cards and the standards cards are not interactive
   surfaces; the link inside them is. The inherited .card:hover also inverted
   them to navy, which changed every colour pairing on hover to untested ones. */
.no-hover-card,
.no-hover-card:hover {
  transform: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
  background-color: #fff !important;
  color: inherit !important;
  border-color: transparent !important;
  transition: none !important;
}
.no-hover-card:hover img { transform: scale(1.04) !important; }

/* --- Footer contact and regulatory lists ---------------------------------- */
/* Icons are decorative: the address, email address and phone number say what
   they are without them, so they carry aria-hidden and no text alternative. */
.footer-contact,
.footer-reg { margin: 0; padding: 0; }

.footer-contact > li,
.footer-reg > li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.footer-contact > li > i,
.footer-reg > li > i {
  color: var(--brand-gold);
  flex: 0 0 auto;
  margin-top: 0.22em;
  font-size: 0.95rem;
}

.footer-contact a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.footer-contact a:hover,
.footer-contact a:focus { color: #fff; text-decoration: underline; }

.footer-reg > li { font-size: 0.82rem; margin-bottom: 0.55rem; }

/* --- Policy pages --------------------------------------------------------- */
.privacy-h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: #2C2C3A;
  margin: 2.5rem 0 0.85rem;
}

/* --- Footer: two-column link list ---------------------------------------- */
/* Ten links in one narrow ribbon was what left this column 195px shorter than
   its neighbour. Two columns makes it wide and shallow instead. */
.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 1.5rem;
  margin: 0;
  padding: 0;
}
.footer-links-grid > li { margin-bottom: 0.2rem; }
.footer-links-grid a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-links-grid a:hover,
.footer-links-grid a:focus { color: #fff; text-decoration: underline; }

@media (max-width: 575.98px) {
  .footer-links-grid { grid-template-columns: 1fr; }
}

/* --- Footer: accreditation band ------------------------------------------ */
.footer-accreditations {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  /* 3rem of margin on top of 2.5rem of padding left roughly 90px of empty navy
     between the columns and the marks, which the uneven column heights made
     look like a fault rather than a gap. */
  margin-top: 1rem;
  padding: 1.75rem 0 0.5rem;
}

/* The one sub-heading level. Column headings keep .footer-heading; this sits
   clearly below them so five headings stop competing at one weight. */
.footer-sublabel {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Gold TEXT on the navy footer, so the lighter gold: brand gold is 4.31:1
     there and this is 7.98:1. The icons below are non-text and keep the brand
     colour, which clears the 3:1 they need. */
  color: var(--gold-on-dark);
  margin-bottom: 1.5rem;
}

.accreditation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.accreditation-grid > li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.6;
}

.accreditation-grid img {
  flex: 0 0 auto;
  border-radius: 4px;
  background: #fff;
  padding: 3px;
}

.accreditation-grid > li > i {
  flex: 0 0 auto;
  color: var(--brand-gold);
  font-size: 1.9rem;
  line-height: 1;
  margin-top: 0.1rem;
}

.accreditation-title {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  margin-bottom: 0.2rem;
}

.accreditation-ref {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.76rem;
  margin-top: 0.35rem;
}
.accreditation-ref a { color: var(--gold-on-dark); text-decoration: none; }
.accreditation-ref a:hover,
.accreditation-ref a:focus { color: #fff; text-decoration: underline; }

@media (max-width: 991.98px) {
  .accreditation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .accreditation-grid { grid-template-columns: 1fr; }
}

/* --- Footer: social chips ------------------------------------------------ */
/* A 20%-white border on the navy is 1.84:1 against a 3:1 minimum for UI
   components. Gold is 4.31:1 and puts the brand colour somewhere it was
   otherwise absent from the whole footer. */
.footer-social a {
  border-color: var(--brand-gold) !important;
  color: var(--brand-gold) !important;
  background: transparent !important;
}
.footer-social a:hover,
.footer-social a:focus {
  background: var(--brand-gold) !important;
  color: var(--footer-bg) !important;
}

/* --- Icons take their colour from what they sit in ------------------------ */
/* style.css carries a bare `i { color: var(--primary-color); }`. An element
   selector beats an INHERITED value however specific the ancestor's rule is,
   so every <i> on the site is brand teal unless something targets the <i>
   itself - and on the teal surfaces that is teal on teal. Three places were
   showing an icon nobody could see:

     contact sidebar chips   1.29:1  teal glyph inside a gold ring
     footer social chips     1.23:1  and had been since before the rebrand
     home page trust strip   1.00:1  the wrapper sets gold, the <i> ignored it
     solid CTA buttons       1.00:1  exactly the button's own colour
     job card View Role      1.00:1  same again, on a class that is not .btn
     careers value cards     2.74:1  teal glyph on a gold chip meant to be charcoal

   A blanket `a i, button i { color: inherit }` is NOT the fix: measured across
   the site it would also repaint the contact page's social icons charcoal and
   turn the trust-strip and phone-CTA icons white, all three of which are
   deliberately a different colour from their link's label.

   Inheriting is the right answer for all three: an icon next to a label
   belongs in the colour of that label. Setting each one to a fixed colour
   instead would need revisiting every time a surface changes. */
.contact-detail-row .icon-wrap i,
.footer-social a i,
.trust-strip-item .trust-icon i,
.phone-cta i,
.btn i,
.btn-view-role i,
.value-card .vc-icon i { color: inherit; }

/* The trust strip sits on the #006D77 teal, where brand gold is 2.12:1, under
   the 3:1 a graphic needs. The lighter gold is 3.29:1, and it is the same gold
   the logo uses on the teal nav directly above. */
.trust-strip-item .trust-icon { color: var(--brand-gold-light); }

/* Bootstrap's .text-warning is #FFC107, which is 1.51:1 on the cream card the
   careers page shows when the vacancy feed is down - an alert icon nobody can
   see, on the one block whose whole job is to be noticed. Same hue, carried to
   4.63:1. */
.api-error-card .text-warning { color: #8A6D00 !important; }

/* --- Required-field asterisk --------------------------------------------- */
/* style.css carries `label:after { content: " *" }`, which put a red asterisk
   on EVERY label on the site whether the field was required or not - so
   "Email (optional):" was marked mandatory. Django omits the `required`
   attribute on optional widgets, so the asterisk can key off the control the
   label belongs to rather than being painted on everything.

   If :has() is unavailable the asterisk simply does not render, which is the
   safe direction to fail: no marks at all beats marking optional fields
   mandatory. The "(optional)" in the label text says it either way. */
label::after { content: none !important; }

label:has(+ input[required])::after,
label:has(+ select[required])::after,
label:has(+ textarea[required])::after,
label:has(+ div input[required])::after {
  content: " *" !important;
  color: #dc3545;
}

/* --- Contact sidebar ------------------------------------------------------ */
/* Gold on the icons and labels, and more readable with it. Measured against the
   sidebar's own gradient (#004E57 to #1C3557):
     brand gold  3.28 - 4.31:1  fine for icons (non-text needs 3:1), but under
                                4.5:1 for 14px label text
     light gold  6.08 - 7.98:1  clears AA for the labels
   The filled chip was rgba(255,255,255,0.16), only 1.55:1 against the sidebar -
   a shape you could barely see. A gold ring is 3.28 - 4.31:1 and reads as deliberate. */
.contact-detail-row .icon-wrap {
  background: transparent !important;
  border: 1.5px solid var(--brand-gold);
  color: var(--brand-gold);
}

.contact-detail-row .detail-label {
  color: var(--gold-on-dark) !important;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.contact-detail-row .detail-text { color: #fff !important; }

/* Keep the rules between rows visible but quieter than the gold. */
.contact-detail-row { border-bottom-color: rgba(255, 255, 255, 0.14) !important; }

.contact-sidebar h3 { color: #fff; }
.contact-sidebar h3 > i,
.contact-sidebar .fa-phone,
.contact-sidebar .fa-phone-alt { color: var(--brand-gold); }

/* The map card: a gold dashed edge and a gold pin, so it reads as part of the
   same family rather than a stray dotted box. */
.map-placeholder-inner {
  border-color: rgba(201, 170, 113, 0.65) !important;
  background: rgba(201, 170, 113, 0.08) !important;
}
.map-placeholder-inner i { color: var(--brand-gold) !important; }
.map-placeholder-inner:hover { background: rgba(201, 170, 113, 0.16) !important; }

/* The phone button gets the brand colour too, and gains contrast doing it. */
.phone-cta {
  border-color: var(--brand-gold) !important;
  background: rgba(201, 170, 113, 0.14) !important;
}
.phone-cta:hover,
.phone-cta:focus {
  background: var(--brand-gold) !important;
  color: #10283A !important;
  border-color: var(--brand-gold) !important;
}

/* --- Consent checkbox ----------------------------------------------------- */
/* The bundled Bootstrap is a partial build: .form-check-input carries only
   `float:left; margin-left:-1.5em`, with no `appearance:none` and no tick
   image, while `.form-check-input:checked` sets background-color on what is
   still a native control. The result was a box with no visible check state.

   Drawing it ourselves is the only way to be sure: an explicit box, an explicit
   tick, in the brand colour. The tick is an inline SVG background rather than a
   pseudo-element, because ::after is unreliable on a replaced element. */
.gdpr-row input[type="checkbox"],
.form-check-input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0.15rem 0 0 0;
  float: none;                      /* the partial build floats it left */
  /* Literal hex, not var(--brand-teal): if that variable is ever missing the
     fill silently fails and the tick renders white on white - an invisible
     consent control, which is the one control that must never be ambiguous. */
  border: 2px solid #006D77;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.gdpr-row input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:checked {
  background-color: #006D77;
  border-color: #006D77;
  /* White tick, 4.5:1-plus against the teal fill (white on #006D77 is 6.08:1). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.5 3.5L15 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.gdpr-row input[type="checkbox"]:focus-visible,
.form-check-input[type="checkbox"]:focus-visible {
  outline: 3px solid #C09041;
  outline-offset: 2px;
}

/* The label sits beside the box, not indented under a floated one. */
.form-check:has(> .form-check-input[type="checkbox"]) {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-left: 0;
}
.form-check-label { line-height: 1.6; }

/* --- Submission confirmation --------------------------------------------- */
.submitted-card {
  background: #fff;
  border: 1px solid rgba(0, 109, 119, 0.14);
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.submitted-tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #006D77;
  color: #fff;                       /* 6.08:1 on the teal */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
}

.submitted-heading {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: #2C2C3A;
  margin-bottom: 0.75rem;
}

.submitted-lead {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto;
}

/* The contact list reuses the footer treatment, recoloured for a light card. */
.submitted-contact {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}
.submitted-contact > li { color: var(--text-muted); }
.submitted-contact > li > i { color: var(--brand-gold); }
.submitted-contact a { color: var(--brand-teal); text-decoration: none; }
.submitted-contact a:hover,
.submitted-contact a:focus { text-decoration: underline; }

.submitted-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.25rem;
}
.submitted-secondary {
  border-radius: 30px;
  padding: 0.8rem 2rem;
  border-color: var(--brand-teal);
  color: var(--brand-teal);
  font-weight: 600;
}

/* A notice above the card, for the cases worth telling the enquirer about. */
.submitted-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  background: #FFF8E6;
  border: 1px solid #E6D3A3;
  color: #5B4708;                    /* 7.4:1 on the cream */
}
.submitted-notice > i { color: #CFA157; flex: 0 0 auto; margin-top: 0.15rem; }


/* --- Footer: compact and typographically uniform ------------------------- */
/* The footer mixed the heading serif (Cormorant) for its column headings with
   the body sans for everything else, at several line-heights. One family, one
   rhythm - a footer is a reference block, not a place for display type. */
#footer,
#footer p,
#footer a,
#footer li,
#footer span,
#footer div {
  font-family: var(--font-body);
}

footer .footer-heading {
  font-family: var(--font-body) !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.9rem;
}

.footer-links-grid a { line-height: 1.5; }

#footer .footer-contact > li { margin-bottom: 0.6rem; line-height: 1.5; }
#footer p { margin-bottom: 0.6rem; line-height: 1.55; }
.footer-top { padding: 2.5rem 0 0.5rem; }

/* Accreditations: logo first, wording underneath it. Reading a mark then its
   explanation is the order people actually scan a footer badge in. */
.accreditation-grid > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.accreditation-grid img,
.accreditation-grid > li > i {
  margin-bottom: 0.15rem;
}

.accreditation-grid > li > i { font-size: 2.1rem; }

/* --- Coverage map --------------------------------------------------------- */
.surrey-map-figure {
  margin: 0 auto;
  max-width: 1140px;
  text-align: center;
}

.surrey-map-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0, 109, 119, 0.14);
  background: #F4F7F7;
}

.surrey-map-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: center;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.map-key { display: inline-flex; align-items: center; gap: 0.5rem; }

.map-swatch {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.map-swatch--county { background: #9BCACE; border: 1.5px solid #006D77; }
.map-swatch--town {
  width: 11px;
  height: 11px;
  background: #FFFFFF;
  border: 2px solid #123B41;
  border-radius: 50%;
}
.map-swatch--office { background: #C09041; border-radius: 50%; }

/* The Open Government Licence requires the source to be acknowledged. Small,
   but present - not hidden. */
.map-attribution {
  text-align: center;
  margin: 1.5rem auto 0;
  max-width: 720px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #6B7280;
}
.map-attribution a { color: var(--brand-teal); }

/* The same information the map carries, in text. The map is an <img>, so its
   labels reach neither a screen reader nor a search engine; this does. */
.borough-list {
  max-width: 1140px;
  margin: 2.75rem auto 0;
  padding: 2rem 2rem 1.5rem;
  background: var(--section-alt);
  border-radius: 14px;
}

.borough-list h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: #2C2C3A;
  text-align: center;
  margin: 0 0 1.5rem;
}

.borough-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.15rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.borough-list li {
  border-left: 3px solid var(--brand-gold);
  padding-left: 0.9rem;
}

.borough-list li strong {
  display: block;
  font-weight: 600;
  color: var(--brand-teal);
  font-size: 0.98rem;
}

.borough-list li span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4A4A5A;
}

.borough-list__note {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: #4A4A5A;
}

@media (max-width: 575.98px) {
  .borough-list { padding: 1.5rem 1.25rem 1.25rem; }
  .surrey-map-figure figcaption { gap: 0.5rem 1.25rem; font-size: 0.85rem; }
}

/* Enquiry form validation summary. The forms rendered {{ form.field }} with no
   {{ form.field.errors }} anywhere, so a rejected submission re-showed the form
   with nothing said about why. Contrast on the gold wash: #8A2A2A gives 6.9:1. */
.enquiry-errors {
  border: 1px solid #C77;
  border-left: 4px solid #8A2A2A;
  border-radius: 8px;
  background: #FDF4F4;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
}

.enquiry-errors__title {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: #8A2A2A;
}

.enquiry-errors ul {
  margin: 0;
  padding-left: 1.15rem;
  color: #4A4A5A;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Enquiry honeypot. Not type="hidden" and not display:none - bots skip both.
   It must be a real, focusable-by-nothing text input that a person never sees
   and a screen reader never announces, while remaining present in the DOM for
   an automated filler to find and complete. */
.enquiry-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}