/* Brand palette taken from banks-surveyors.co.uk and the logo file (October 2026):
   --navy    #170E45  logo ground (sampled from logo.avif)
   --plum    #281A39  header band, body text, buttons on the live site
   --indigo  #141D77  headings on the live site
   --ground  #F6F6F6  page background on the live site
   --tan     #867760  logo gold (sampled from logo.avif tagline; the rule reads #857367)
   Layout: Trust & Authority (design-system/banks-chartered-surveyors/MASTER.md): navy hero
   with Luke's field photo, credentials strip, light fee band, then cards on light sections.
   Calibri throughout (Carlito where Calibri isn't installed), Phosphor icons. One accent (tan).
   White text on --tan is only 4.4:1, so it's only used at 19px bold or larger. */
/* Carlito, served from this site (SIL Open Font Licence). Stands in for Calibri where it isn't installed. */
@font-face { font-family: 'Carlito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/carlito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Carlito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/carlito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Carlito'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/carlito-latin-400-italic.woff2') format('woff2'); }

:root {
  --navy: #170E45;
  --plum: #281A39;
  --indigo: #141D77;
  --ground: #F6F6F6;
  --white: #FFFFFF;
  --tan: #867760;
  --tan-light: #A39580;
  --tan-dark: #6F6350;

  --bg: var(--ground);
  --surface: var(--white);
  --text: var(--plum);
  --muted: #5B5068;
  --heading: var(--indigo);
  --line: #DCD8E2;
  --note-bg: #ECE8E1;
  --on-navy: #D9D4E8;
  --navy-line: #2B2160;
  --field-bg: var(--white);
  --field-border: #847A93;
  --error: #B42318;

  --radius: 4px;
  --radius-card: 8px;
  --shadow-sm: 0 1px 2px rgb(23 14 69 / .06);
  --shadow-md: 0 4px 14px rgb(23 14 69 / .08);
  --shadow-lg: 0 14px 32px rgb(23 14 69 / .14);
  /* Review stars: decorative, always next to the rating in words */
  --star: #D8B25C;
  --star-on-light: #B98A2E;
  --icon-tint: #ECEEF8;
  /* Motion: short, and easing out (fast start, gentle stop) so nothing feels slow */
  --ease-out: cubic-bezier(.22, .7, .3, 1);
  --dur-fast: .15s;
  --dur-base: .25s;
  --dur-reveal: .4s;
  --font: "Calibri", "Carlito", "Segoe UI", sans-serif;
  /* Headings use the body typeface too; kept as its own token so it can be changed in one place */
  --font-heading: var(--font);
  --measure: 62ch;
}
/* One colour scheme on every device: the brand colours stay the same in dark mode. */
:root { color-scheme: light only; }

* { box-sizing: border-box; margin: 0; }
/* Keep focused fields and jump-link targets clear of the sticky header (WCAG 2.2 focus not obscured) */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 1.125rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
ul[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--tan); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.section { padding-block: clamp(4rem, 8vw, 6rem); }
section[id], .service-group, #enquiry { scroll-margin-top: 96px; }

/* Buttons */
button { font-family: inherit; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  cursor: pointer;
  padding: .8rem 1.4rem;
  border-radius: var(--radius);
  /* 19px bold keeps white on the logo gold at large-text contrast (4.4:1) */
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  background: var(--tan);
  color: var(--white);
}
.btn { gap: .55rem; }
.btn:hover { background: var(--tan-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-icon { width: 1.15em; height: 1.15em; flex: none; }
/* Icons sit beside text and inherit its colour */
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
/* Outline on light backgrounds */
.btn-outline-dark { background: transparent; color: var(--heading); box-shadow: inset 0 0 0 2px var(--heading); }
.btn-outline-dark:hover { background: var(--heading); color: var(--white); }
/* Outline on navy */
.btn-outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--tan); }
.btn-outline:hover { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 2px var(--tan); }
.btn-outline-dark:hover { box-shadow: inset 0 0 0 2px var(--heading); }

/* Section headings carry the short tan rule from the logo */
.section-title {
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.8vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.section-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1rem;
  background: var(--tan);
}
.section-intro { margin-top: 1.25rem; max-width: var(--measure); color: var(--muted); }

/* Links into the call-back form and onward pages */
.ask-link, .more-link, .text-link {
  display: inline-block;
  padding-block: .6rem;
  color: var(--heading);
  font-weight: 700;
  text-underline-offset: 4px;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 2px;
}
.ask-link:hover, .more-link:hover, .text-link:hover { text-decoration-color: currentColor; }

/* Header: stays in view so the call button is always one tap away */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 1px 0 var(--navy-line);
}
.site-header .wrap {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.logo { display: block; flex: none; }
/* SVG wordmark (scripts/build-logo.mjs): 60px tall keeps CHARTERED SURVEYORS above 13px */
.logo svg { display: block; height: 60px; width: auto; max-width: none; }
.site-nav { display: flex; align-items: center; gap: 1.75rem; margin-inline-start: auto; }
.site-nav > a, .nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font: 600 1.125rem var(--font);
  color: var(--on-navy);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.site-nav > a:hover, .nav-sub-toggle:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--tan);
}
.nav-sub-toggle::after {
  content: "";
  width: .45em;
  height: .45em;
  margin-inline-start: .45em;
  border-right: 2px solid var(--tan);
  border-bottom: 2px solid var(--tan);
  transform: translateY(-.15em) rotate(45deg);
}
.nav-sub-toggle[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }
.nav-item { position: relative; }
.sub-menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: -1rem;
  width: 22rem;
  padding: .5rem 0;
  list-style: none;
  background: var(--navy);
  border: 1px solid var(--navy-line);
  box-shadow: 0 12px 24px rgb(0 0 0 / .25);
}
.sub-menu a {
  display: block;
  padding: .6rem 1rem;
  color: var(--on-navy);
  text-decoration: none;
  font-weight: 600;
}
.sub-menu a:hover, .sub-menu a:focus-visible { color: var(--white); background: rgb(255 255 255 / .06); }
.sub-menu .sub-menu-all { border-top: 1px solid var(--navy-line); margin-top: .25rem; padding-top: .25rem; }
/* Without JavaScript the services list opens on hover or keyboard focus */
html:not(.js) .sub-menu { display: none; }
html:not(.js) .nav-item:hover .sub-menu,
html:not(.js) .nav-item:focus-within .sub-menu { display: block; }

.menu-toggle {
  display: none;
  min-height: 44px;
  padding: .5rem 1rem;
  background: transparent;
  color: var(--white);
  font: 700 1rem var(--font);
  border: 2px solid var(--tan);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle:hover { background: rgb(255 255 255 / .08); }


/* Hero: rural flyover video behind a navy overlay, copy left, call-back form right.
   The still poster shows until the video can play, and stays when motion is reduced. */
.hero { position: relative; isolation: isolate; background: var(--navy); color: var(--white); border-bottom: 4px solid var(--tan); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img, .hero-video-el { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-video-el { opacity: 0; transition: opacity .8s ease; }
.hero-video-el.is-playing { opacity: 1; }
/* Overlay: darkest under the text (white stays above 4.5:1 even over the brightest sky in the
   clip), fading out towards the form so the flyover shows */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(23 14 69 / .88) 0%, rgb(23 14 69 / .72) 50%, rgb(23 14 69 / .4) 70%, rgb(23 14 69 / .22) 100%);
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 27rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.eyebrow { font-size: .9375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tan-light); }
.hero .eyebrow { color: var(--white); }
.hero h1 {
  margin-top: .75rem;
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 400;
  /* Sized so the headline sits on three lines beside the form on a laptop */
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero-sub { margin-top: 1.5rem; max-width: 38rem; color: var(--white); font-size: 1.1875rem; }
.hero-copy { text-shadow: 0 1px 3px rgb(0 0 0 / .35); }
.hero-copy .btn, .hero-copy .video-toggle { text-shadow: none; }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.hero-meta {
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  color: var(--white);
  font-weight: 600;
}
.hero-meta li { display: inline-flex; align-items: center; gap: .55rem; }
.hero-meta a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-block: .65rem;
  margin-block: -.65rem;
  color: var(--white);
  text-decoration-color: var(--tan);
  text-underline-offset: 4px;
}
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .star { width: 1.05em; height: 1.05em; }
.video-toggle {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .4rem 1rem;
  background: rgb(255 255 255 / .08);
  color: var(--white);
  border: 1px solid rgb(255 255 255 / .45);
  border-radius: 999px;
  font: 700 .9375rem var(--font);
  cursor: pointer;
}
.video-toggle:hover { background: rgb(255 255 255 / .16); }
.video-toggle span { display: inline-flex; align-items: center; gap: .45rem; }
.video-toggle .video-toggle-play, .video-toggle[data-paused] .video-toggle-pause { display: none; }
.video-toggle[data-paused] .video-toggle-play { display: inline-flex; }

/* The call-back form as a white card in the hero */
.hero-form .enquiry-panel { border: 0; box-shadow: var(--shadow-lg); }

/* Compact call-back form (hero): smaller cards, best time as chips, note behind a toggle */
.callback-compact { padding: 1.25rem 1.5rem 1.5rem; }
.callback-compact .enquiry { gap: .9rem; }
.callback-compact .enquiry h2 { font-size: 1.65rem; }
.callback-compact .form-intro { margin-top: -.6rem; }
.callback-compact .step { gap: .85rem; }
.callback-compact .step h3 { font-family: var(--font); font-size: 1.125rem; font-weight: 800; }
.callback-compact .option-grid { gap: .5rem; }
.callback-compact .option-card { min-height: 48px; padding: .5rem .75rem; font-size: 1rem; }
.callback-compact .best-time .choices { gap: .4rem; }
.callback-compact .best-time .choice {
  position: relative;
  padding: 0 .9rem;
  border: 2px solid var(--field-border);
  border-radius: 999px;
  font-size: .9375rem;
}
.callback-compact .best-time .choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.callback-compact .best-time .choice:has(input:checked) { border-color: var(--heading); background: var(--icon-tint); color: var(--heading); }
.callback-compact .best-time .choice:has(input:focus-visible) { outline: 3px solid var(--tan); outline-offset: 2px; }
.note-toggle summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  color: var(--heading);
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.note-toggle[open] { display: grid; gap: .4rem; }
.note-toggle textarea {
  width: 100%;
  min-height: 5rem;
  font: inherit;
  color: var(--text);
  background: var(--field-bg);
  border: 2px solid var(--field-border);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  resize: vertical;
}
.note-toggle label { font-weight: 700; }
.callback-compact .form-privacy, .callback-compact .reply-note { font-size: .875rem; }

/* Homepage contact section without its own form: details beside the two actions */
.contact-no-form .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.contact-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.contact-no-form .phone { margin-top: 0; }

/* Credentials strip straight under the hero: rating and the three bodies */
.proof-strip { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
/* Four items of the same shape, split by thin rules: mark, then label over one line of detail */
.proof-list {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem 0;
  align-items: center;
  padding-block: 1.5rem;
  list-style: none;
}
.proof-item { flex: 0 1 auto; display: flex; align-items: center; gap: .9rem; min-width: 0; padding-inline: 1.5rem; }
.proof-item:last-child { padding-inline-end: 0; }
/* Wide screens: each item on one line, widths set by their content */
@media (min-width: 1181px) { .proof-label, .proof-sub { white-space: nowrap; } }
.proof-item:first-child { padding-inline-start: 0; }
.proof-item + .proof-item { border-inline-start: 1px solid var(--line); }
.proof-mark { flex: none; display: flex; align-items: center; }
.proof-mark img { height: 42px; width: auto; max-width: 6rem; object-fit: contain; }
.proof-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.proof-label { font-weight: 700; line-height: 1.25; color: var(--heading); }
.proof-sub { font-size: .875rem; line-height: 1.3; color: var(--muted); }
.proof-rating { display: flex; align-items: center; gap: .9rem; padding-block: .25rem; color: inherit; text-decoration: none; }
.proof-rating:hover .proof-sub { text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 3px; }
.proof-rating .stars { color: var(--star-on-light); font-size: 1.05rem; }
.proof-big { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }


/* Fee band: the "fees often paid for you" message, full width on the warm note colour */
.fee-block { background: var(--note-bg); color: var(--text); border-bottom: 1px solid var(--line); }
.fee-block .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  align-items: start;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 7vw, 5rem);
}
.fee-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 1.4rem;
}
.fee-icon .icon { vertical-align: 0; }
.fee-copy h2 {
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  text-wrap: balance;
}
.fee-copy h2::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: 1rem; background: var(--tan); }
.fee-copy p { margin-top: 1.25rem; max-width: var(--measure); }
.fee-copy h3 { color: var(--heading); font-size: 1.1875rem; font-weight: 800; }
.fee-copy > h3 { margin-top: 1.75rem; }
/* The fee checker card beside the copy, white on the warm band */
.fee-checker-embed .checker-panel { background: var(--surface); border: 0; box-shadow: var(--shadow-md); }
/* On wide screens the card stays in view while the copy beside it is read */
@media (min-width: 1001px) { .fee-checker-embed { position: sticky; top: 112px; } }
.checker-heading { margin-bottom: .9rem; color: var(--heading); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.fee-list { margin-top: .75rem; padding: 1rem 1.5rem; list-style: none; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.fee-list li { position: relative; padding: .6rem 0 .6rem 1.9rem; border-bottom: 1px solid var(--line); }
.fee-list li:last-child { border-bottom: 0; }
.fee-list li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: 1.05rem;
  width: .75rem;
  height: .42rem;
  border-left: 2px solid var(--tan-dark);
  border-bottom: 2px solid var(--tan-dark);
  transform: rotate(-45deg);
}
.fee-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.fee-small { font-size: .9375rem; font-style: italic; color: var(--muted); }


/* Service cards: icon, title, one-line summary, More and Ask links */
.card-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 0;
  list-style: none;
}
.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem 1.5rem .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: #C9C2D3; }
.service-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--icon-tint);
  color: var(--heading);
  font-size: 1.45rem;
}
.service-icon .icon { vertical-align: 0; }
.service-card h3 { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 700; line-height: 1.18; color: var(--heading); }
.service-card h3 a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; color: inherit; text-decoration: none; }
.service-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.service-card p { margin-top: .5rem; color: var(--muted); }
.service-card .fee-note { align-self: flex-start; color: var(--text); }
.card-links {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 1rem;
}
.service-card > p:last-of-type { margin-bottom: 1rem; }
/* One clear link per card; the arrow says it goes somewhere, the underline appears on hover */
.more-link { display: inline-flex; align-items: center; gap: .4rem; text-decoration-color: transparent; }
.more-link:hover, .more-link:focus-visible { text-decoration-color: var(--tan); }
/* "Ask us" fills in the call-back form: kept, but quieter than the main link */
.card-links .ask-link { padding-block: .7rem; color: var(--muted); font-weight: 600; font-size: .9375rem; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.card-links .ask-link:hover { color: var(--heading); text-decoration-color: currentColor; }
.link-arrow { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.more-link:hover .link-arrow { transform: translateX(3px); }
.fee-note {
  display: inline-block;
  margin-top: .5rem;
  padding: .2rem .6rem;
  background: var(--note-bg);
  color: var(--text);
  font-weight: 600;
  font-size: .9375rem;
  border-radius: var(--radius);
}
.checked-date { font-size: .9375rem; }

/* How it works: three numbered steps */
.steps { background: var(--surface); border-block: 1px solid var(--line); }
.steps-list {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}
.step-number {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--note-bg);
}
.step-item h3 { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 700; line-height: 1.18; color: var(--heading); }
.step-item p { margin-top: .5rem; color: var(--muted); max-width: 32ch; }
.steps-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; }


/* Proof: Google rating, review quotes and case studies */
.proof { background: var(--bg); }
/* Google rating block in the reviews section */
.rating-card {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  max-width: 40rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.rating-score { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
.rating-out-of { font-size: 1.25rem; font-weight: 400; color: var(--muted); }
.rating-detail { display: grid; gap: .35rem; min-width: 0; flex: 1 1 16rem; }
.rating-detail .stars { color: var(--star-on-light); font-size: 1.25rem; }
.rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
.rating strong { font-size: 1.0625rem; color: var(--heading); }
.rating span { font-size: .9375rem; color: var(--muted); }
.rating-detail .text-link { justify-self: start; }
/* Grant funding chart: a navy band straight under the credentials strip. A big total on the left,
   one thick gold bar per scheme on the right. One series, so one colour and no legend; every bar has
   its label and amount beside it. site.js grows the bars and counts up the figures on first view */
.grants-band {
  --heading: var(--white);
  --text: var(--on-navy);
  --muted: #BDB5D1;
  background: linear-gradient(135deg, var(--navy) 0%, var(--plum) 100%);
  color: var(--text);
  border-bottom: 4px solid var(--tan);
}
.grants-chart { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 2.5rem 4.5rem; align-items: center; }
.grants-eyebrow { color: var(--tan-light); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.grants-title { margin-top: .4rem; color: var(--heading); font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.15; }
.grants-total { margin-top: 1.25rem; color: var(--muted); font-size: 1.0625rem; }
.grants-total-figure { display: block; color: var(--star); font-family: var(--font-heading); font-size: clamp(3rem, 7vw, 4.75rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.grants-note { margin-top: .75rem; color: var(--muted); font-size: .9375rem; }
.grants-summary .text-link { margin-top: 1rem; color: var(--white); text-decoration-color: var(--tan-light); }
.grant-bars { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.grant-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: baseline; }
.grant-label { color: var(--white); font-size: 1.125rem; font-weight: 700; }
.grant-label-note { color: var(--muted); font-weight: 400; }
.grant-value { color: var(--star); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The track is a faint baseline; the fill starts at the left edge with a rounded data end */
.grant-track { grid-column: 1 / -1; height: 26px; background: rgb(255 255 255 / .08); border-radius: 0 4px 4px 0; }
.grant-fill {
  display: block;
  height: 100%;
  max-width: 100%;
  background: linear-gradient(90deg, var(--tan) 0%, var(--star) 100%);
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  transition: transform 1.4s var(--ease-out) calc(var(--i, 0) * .2s);
}
.grants-chart.is-waiting .grant-fill { transform: scaleX(0); }
/* Progress towards the grants goal: a thin gold bar under the total, animated with the chart */
.grants-goal { margin-top: 1.25rem; }
.grants-goal-label { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .9375rem; }
.grants-goal-label strong { color: var(--white); }
.grants-goal-track { display: block; margin-top: .45rem; height: 10px; background: rgb(255 255 255 / .1); border-radius: 0 4px 4px 0; }
.grants-goal-fill { display: block; height: 100%; background: var(--star); border-radius: 0 4px 4px 0; transform-origin: left center; transition: transform 1.6s var(--ease-out) .3s; }
.grants-chart.is-waiting .grants-goal-fill { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .grants-goal-fill { transition: none; } }
@media (max-width: 900px) {
  .grants-chart { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .grant-fill { transition: none; } }
@media (forced-colors: active) {
  .grant-fill { background: CanvasText; }
  .grant-track { border: 1px solid CanvasText; }
}
.reviews, .case-studies {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 0;
  list-style: none;
}
.case-studies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review, .case-study {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tan);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.review .stars { color: var(--star-on-light); }
.review blockquote { margin-top: .75rem; font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.35; color: var(--heading); }
.review figcaption { margin-top: 1rem; color: var(--muted); font-size: 1rem; }
.case-study h3 { font-family: var(--font-heading); color: var(--heading); font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.case-study p { margin-top: .5rem; color: var(--muted); }

/* Land for sale */
.listings-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.listings { background: var(--surface); }
.listing {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.listing img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.listing-body { padding: 1.5rem clamp(1.25rem, 3vw, 2rem); }
.listing h3 { color: var(--heading); font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; line-height: 1.18; text-wrap: balance; }
.listing-facts {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1.5rem;
}
.listing-facts dt { font-size: .9375rem; color: var(--muted); }
.listing-facts dd { font-weight: 700; }
.listing-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.listing-actions .text-link { display: inline-flex; align-items: center; gap: .4rem; }
.all-listings { margin-top: 1rem; }

/* Property alerts sign-up */
.alerts-panel, .enquiry-panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.alerts-panel h3 { color: var(--heading); font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; line-height: 1.18; }
.alerts-panel > p { margin-top: .5rem; color: var(--muted); }
.alert-form { display: grid; gap: 1rem; margin-top: 1rem; }
.alert-form .choices { flex-direction: column; gap: 0; }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: 1rem; cursor: pointer; }
.consent input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--heading); }

/* About */
.about { background: var(--bg); border-block: 1px solid var(--line); }
/* Homepage About: four facts as small cards */
.about-facts { display: grid; gap: .75rem; min-width: 0; padding: 0; list-style: none; }
.about-facts li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.about-facts .icon { font-size: 1.5rem; margin-top: .05rem; color: var(--tan-dark); }
.about-facts strong { color: var(--heading); }
.about-side { display: grid; gap: 1rem; min-width: 0; }
.about-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--line); box-shadow: var(--shadow-md); }
.team-section { background: var(--surface); }
.about .wrap {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about-copy p { margin-top: 1.25rem; max-width: var(--measure); }
.about-copy .person-name { margin-top: 1.5rem; }
.about-copy .person-role { margin-top: 0; color: var(--muted); }
.bodies { display: grid; gap: 1.5rem; min-width: 0; padding: 0; list-style: none; }
.body { display: grid; grid-template-columns: 168px 1fr; gap: 1.25rem; align-items: center; }
.body-logo {
  width: 168px;
  height: 80px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: .5rem;
}
.body-logo img { max-height: 62px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.body h3 { font-size: 1.0625rem; font-weight: 800; color: var(--heading); }
.body p { color: var(--muted); }
.insurance { margin-top: 1.75rem; padding: 1rem 1.25rem; background: var(--note-bg); border-radius: var(--radius); font-weight: 600; }

/* Team */
.about .team-wrap { display: block; }
.team-title { margin-top: 4rem; color: var(--heading); font-size: 1.375rem; font-weight: 800; }
.team-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  padding: 0;
  list-style: none;
}
.person { display: grid; grid-template-columns: 120px 1fr; gap: 1.25rem; align-items: start; }
.person > div { min-width: 0; }
.person p { margin-top: .5rem; color: var(--muted); }
.person-name { color: var(--heading); font-weight: 800; font-size: 1.125rem; }
.person p.person-name { margin-top: 0; color: var(--heading); }
.person p.person-role { margin-top: 0; }
/* Read more toggle for longer bios */
.person-more summary { display: inline-flex; align-items: center; min-height: 44px; margin-top: .25rem; color: var(--tan-dark); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; list-style: none; }
.person-more summary::-webkit-details-marker { display: none; }
.person-more summary::after { content: "+"; margin-left: .4rem; text-decoration: none; }
.person-more[open] summary::after { content: "\2212"; }
.person-more .less-label, .person-more[open] .more-label { display: none; }
.person-more[open] .less-label { display: inline; }
.person-more summary:hover { color: var(--heading); }
.person-photo {
  width: 120px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--line);
}
.person-photo-placeholder {
  display: grid;
  place-items: center;
  padding: .5rem;
  text-align: center;
  font-size: .875rem;
  color: var(--muted);
  border: 1px dashed var(--field-border);
}


/* FAQ: each question its own card */
.faq { background: var(--surface); }
.faq-list { margin-top: 2rem; max-width: 52rem; display: grid; gap: .75rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq details[open] { border-color: #C9C2D3; box-shadow: var(--shadow-md); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.1rem 1.25rem;
  color: var(--heading);
  font-weight: 800;
  font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--tan-dark); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 1.25rem 1.25rem; max-width: var(--measure); color: var(--muted); }

/* Contact: details left, call-back form right */
.contact { background: var(--surface); border-top: 1px solid var(--line); }  .contact .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact .enquiry-panel { background: var(--bg); }
.contact-info { min-width: 0; }
.contact-lead { margin-top: 1.25rem; max-width: 48ch; font-size: 1.1875rem; }
.phone {
  display: inline-block;
  margin-top: 2rem;
  padding-block: .4rem;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--heading);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.phone:hover { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.contact-details {
  margin-top: 2rem;
  display: grid;
  /* Two columns when each fits on one line (the email address needs about 15rem), otherwise one */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem 2.5rem;
}
.contact-details dt { font-weight: 800; color: var(--heading); }
.contact-details dd { color: var(--text); overflow-wrap: anywhere; }
.contact-details a { display: inline-block; padding-block: .5rem; }
/* Link to Google Maps. Until there's a static map image ([[TODO]]) it's a plain button-style link
   rather than an empty map-sized box. */
.map-link {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem 1rem;
  color: var(--heading);
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-underline-offset: 4px;
}
.map-link .icon { font-size: 1.25rem; flex: none; }

/* Contact on navy (homepage and About), with the form as a white card */
.contact-navy { background: var(--navy); color: var(--on-navy); border-top: 4px solid var(--tan); }
.contact-navy .section-title { color: var(--white); }
.contact-navy .contact-lead { color: var(--on-navy); }
.contact-navy .phone { color: var(--white); }
.contact-navy .contact-details dt { color: var(--white); }
.contact-navy .contact-details dd { color: var(--on-navy); }
.contact-navy .contact-details a { color: var(--white); }
.contact-navy .map-link { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .4); color: var(--white); }
.contact-navy .enquiry-panel { background: var(--surface); border: 0; box-shadow: var(--shadow-lg); }
/* Panels set their own text colour so they read the same on navy or light sections */
.enquiry-panel, .alerts-panel { color: var(--text); }
.contact-details dt { display: flex; align-items: center; gap: .45rem; }
.contact-details dt .icon { color: var(--tan-light); }
.contact-navy + .site-footer, .site-footer { border-top: 1px solid var(--navy-line); }

/* Forms */
.enquiry { display: grid; gap: 1.25rem; }
.enquiry h2, .enquiry-sent h2 { color: var(--heading); font-family: var(--font-heading); font-size: 1.85rem; font-weight: 400; line-height: 1.2; }
.form-intro { margin-top: -.75rem; color: var(--muted); }
.form-about { margin-top: -.5rem; padding: .4rem .7rem; background: var(--note-bg); border-radius: var(--radius); font-size: .9375rem; }
.field { display: grid; gap: .4rem; min-width: 0; border: 0; padding: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field label, .field legend { font-weight: 700; color: var(--text); }
.field legend { margin-bottom: .4rem; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: var(--text);
  background: var(--field-bg);
  border: 2px solid var(--field-border);
  border-radius: var(--radius);
  padding: .6rem .8rem;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--tan);
  outline-offset: 1px;
  border-color: var(--heading);
}
.field [aria-invalid="true"] { border-color: var(--error); }
.field-help { margin-top: -.75rem; font-size: .9375rem; color: var(--muted); }
.field .field-help { margin-top: 0; }
.field-error { font-size: .9375rem; font-weight: 700; color: var(--error); }
.field-row + .field-help + .field-error { margin-top: -.75rem; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.choice { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--heading); }
.field label.consent { font-weight: 400; }
.form-privacy { font-size: .9375rem; color: var(--muted); }
.form-privacy a { color: var(--heading); text-underline-offset: 3px; }
.enquiry .btn, .alert-form .btn { justify-self: start; }
.btn[disabled] { opacity: .7; cursor: progress; }
.form-status { font-weight: 700; color: var(--error); }
.form-status a { color: inherit; }
/* Spam trap: off-screen, not display:none, so simple bots still see and fill it */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-panel, .alerts-panel { position: relative; overflow: hidden; }
.enquiry-panel:focus, .alerts-panel:focus { outline: none; }
.enquiry-sent p { margin-top: .75rem; }
.enquiry-sent a { color: var(--heading); font-weight: 700; }
.alert-sent { margin-top: 1rem; font-weight: 700; color: var(--heading); }

/* Step-by-step forms: progress line, tappable option cards, service chip */
.step-progress { margin-top: -.5rem; font-size: .9375rem; font-weight: 700; color: var(--tan-dark); }
.step { display: grid; gap: 1.1rem; min-width: 0; }
.step h3 { color: var(--heading); font-size: 1.375rem; font-weight: 800; line-height: 1.25; }
.step h3:focus { outline: none; }
.step h3:focus-visible { outline: 3px solid var(--tan); outline-offset: 3px; }
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.option-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: .7rem 1rem;
  background: var(--white);
  border: 2px solid var(--field-border);
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
/* The real radio sits over the whole card, invisible, so taps and screen readers both work */
.option-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option-card:hover { border-color: var(--heading); }
.option-card:has(input:checked) { border-color: var(--heading); background: #ECEEF8; box-shadow: inset 0 0 0 1px var(--heading); color: var(--heading); }
.option-card:has(input:focus-visible) { outline: 3px solid var(--tan); outline-offset: 2px; }
.step-next { justify-self: start; }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.link-button {
  min-height: 44px;
  padding: 0 .25rem;
  background: none;
  border: 0;
  color: var(--heading);
  font: 700 1rem var(--font);
  text-decoration: underline;
  text-decoration-color: var(--tan);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.service-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  padding: .15rem .5rem .15rem .9rem;
  background: var(--note-bg);
  border-radius: var(--radius);
}
.reply-note { margin-top: -.4rem; font-weight: 600; }
.prefer-email .consent { font-weight: 700; }
.callback .btn[type="submit"] { justify-self: start; }
/* Without JavaScript every step shows at once, so the step controls aren't needed */
html:not(.js) .step-progress,
html:not(.js) [data-next],
html:not(.js) [data-back],
html:not(.js) .prefer-email { display: none; }
html:not(.js) .step + .step { padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* Fee checker */
.fee-checker { background: var(--surface); border-bottom: 1px solid var(--line); }
.fee-checker .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.checker-call { margin-top: 1.75rem; }
.checker-panel { background: var(--bg); }
.checker-result { display: grid; gap: .9rem; padding: 1.25rem; background: var(--navy); color: var(--on-navy); border-radius: var(--radius); }
.checker-result h3 { color: var(--white); }
.checker-result .btn { justify-self: start; }
.result-sign { color: var(--white); font-weight: 800; font-size: 1.1875rem; }
.result-or { font-weight: 700; }

/* Footer */
.site-footer { background: var(--navy); color: var(--on-navy); padding-block: 3rem 2rem; font-size: .9375rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem clamp(2rem, 5vw, 4rem);
}
.site-footer h2 { color: var(--white); font-size: 1rem; font-weight: 800; margin-bottom: .5rem; }
.footer-brand h2 { margin-bottom: 1.25rem; }
.footer-logo { display: inline-block; }
.footer-logo svg { display: block; width: 15rem; max-width: 100%; height: auto; }
.site-footer p + p { margin-top: .6rem; }
.site-footer ul { padding: 0; list-style: none; }
.site-footer a { text-underline-offset: 4px; }
.site-footer li a, .site-footer p a { display: inline-block; padding-block: .65rem; }
/* Footer menus: plain until hovered or focused, so the columns read as lists, not a wall of underlines */
.site-footer li a { color: var(--on-navy); text-decoration-color: transparent; }
.site-footer li a:hover, .site-footer li a:focus-visible { color: var(--white); text-decoration-color: var(--tan-light); }
.footer-logos { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
/* Every plate the same height, logos unaltered on white */
.footer-logos > * { display: flex; align-items: center; height: 3.75rem; background: var(--white); border-radius: var(--radius); padding: .4rem .7rem; }
.footer-logos img { height: 44px; width: auto; }
.cmp-placeholder { color: var(--muted); font-size: .875rem; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--navy-line); }

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: .75rem 1rem;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  border-radius: var(--radius);
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + .75rem); }
main:focus { outline: none; }

/* Mobile call bar */
.call-bar { display: none; }

/* Gentle state changes instead of instant jumps */
a, .btn, button, summary, .field input, .field select, .field textarea, .option-card, .choice, .note-toggle textarea {
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              text-decoration-color var(--dur-fast) ease, box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out), filter var(--dur-fast) ease;
}
/* Reduced motion: no movement anywhere; things simply appear */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Print: show everything that is normally tucked away, keep the brand colours */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { scroll-behavior: auto; }
  body { padding-bottom: 0 !important; }
  .site-header { position: static; box-shadow: none; }
  .call-bar, .menu-toggle, .skip-link, .sub-menu { display: none !important; }
  .faq details > p { display: block !important; }
  details::details-content { content-visibility: visible; display: block; }
  .faq summary::after { content: none; }
  .service-card, .step-item, .listing, .person, .body, .faq details, .field, .review, .case-study { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  a { text-decoration: none; }
}

@media (max-width: 1000px) {
  .site-nav { display: none; }
  .site-header .btn { margin-inline-start: auto; }
  .menu-toggle { display: inline-block; flex: none; }
  /* Opened menu drops down under the header, one link per row */
  .site-nav[data-open] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    margin: 0;
    padding: .5rem clamp(1rem, 4vw, 2.5rem) 1rem;
    background: var(--navy);
    border-top: 1px solid var(--navy-line);
    box-shadow: 0 12px 24px rgb(0 0 0 / .25);
  }
  .site-nav[data-open] > a, .site-nav[data-open] .nav-sub-toggle {
    width: 100%;
    padding-block: .85rem;
    border-bottom: 1px solid var(--navy-line);
    font-size: 1.125rem;
  }
  .site-nav[data-open] .nav-sub-toggle { justify-content: space-between; }
  .site-nav[data-open] .sub-menu {
    position: static;
    width: auto;
    border: 0;
    box-shadow: none;
    padding: 0 0 .5rem 1rem;
    border-bottom: 1px solid var(--navy-line);
  }
  .hero .wrap, .fee-block .wrap, .contact .wrap, .fee-checker .wrap { grid-template-columns: 1fr; }
  .checker-panel { max-width: 36rem; }
  .contact .enquiry-panel { max-width: 36rem; }
  .reviews { grid-template-columns: 1fr; }
  .listings-grid { grid-template-columns: 1fr; }
  .alerts-panel { max-width: 36rem; }
}
@media (max-width: 860px) {
  .about .wrap { grid-template-columns: 1fr; }
  .case-studies, .team-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .menu-toggle { margin-inline-start: auto; }
  .site-header .btn { display: none; }
  .logo svg { height: 52px; }
  .call-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--navy);
    box-shadow: 0 -6px 18px rgb(23 14 69 / .25);
  }
  /* Smaller text here, so the call button uses the darker gold to keep white text at full contrast */
  .call-bar .btn { font-size: 1rem; padding: .75rem .5rem; }
  .call-bar .btn:not(.btn-outline) { background: var(--tan-dark); }
  .hero-actions .btn, .fee-actions .btn { width: 100%; }
  .field-row { grid-template-columns: 1fr; }
  body { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); background: var(--navy); }
  main { background: var(--bg); }
  .contact-details, .listing-facts { grid-template-columns: 1fr; }
  .body { grid-template-columns: 1fr; gap: .75rem; }
  /* Services and Information side by side, under the contact details */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .person { grid-template-columns: 96px 1fr; }
  .person-photo { width: 96px; }
  /* The fixed call bar covers the bottom of the screen on phones */
  html { scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
  .checker-result .btn { justify-self: stretch; }
}
@media (max-width: 359px) {
  .option-grid { grid-template-columns: 1fr; }
}


/* Inner pages: navy band with breadcrumb, H1 and intro */
.page-hero { background: var(--navy); color: var(--white); border-bottom: 4px solid var(--tan); }
.page-hero .wrap { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2.75rem, 6vw, 4.5rem); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 .5rem; padding: 0; list-style: none; font-size: .9375rem; color: var(--on-navy); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: .5rem; color: var(--tan-light); }
.breadcrumb a { display: inline-block; padding-block: .6rem; color: var(--white); text-decoration-color: var(--tan); text-underline-offset: 3px; }
.breadcrumb [aria-current] { display: inline-block; padding-block: .6rem; }
.page-hero h1 {
  margin-top: .75rem;
  max-width: 24ch;
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.page-intro { margin-top: 1.25rem; max-width: 60ch; font-size: 1.1875rem; color: var(--on-navy); }
.page-hero .hero-actions { margin-top: 1.75rem; }
/* Service pages: trust facts in the right-hand column of the header, beside the H1 and buttons */
.page-hero .wrap:has(> .hero-facts) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem); column-gap: clamp(2rem, 5vw, 4.5rem); }
.page-hero .wrap:has(> .hero-facts) > * { grid-column: 1; }
.page-hero .wrap > .hero-facts { grid-column: 2; grid-row: 2 / span 3; align-self: center; }
/* .page-hero prefix so it beats the ul[role=list] reset */
.page-hero .hero-facts {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  list-style: none;
  background: rgb(255 255 255 / .06);
  border: 1px solid var(--navy-line);
  border-left: 4px solid var(--tan);
  border-radius: var(--radius-card);
  color: var(--on-navy);
  font-size: 1rem;
  line-height: 1.4;
}
.hero-facts li { display: flex; align-items: flex-start; gap: .65rem; }
.hero-facts .icon { flex: none; margin-top: .1rem; font-size: 1.25rem; color: var(--tan-light); }
.hero-facts .icon.star { color: var(--star); }
.hero-facts a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; color: var(--white); text-decoration-color: var(--tan); text-underline-offset: 3px; }
@media (max-width: 1000px) {
  .page-hero .wrap:has(> .hero-facts) { display: block; }
  .page-hero .hero-facts { margin-top: 1.75rem; max-width: 36rem; }
}

/* Running text on service, legal and listing pages */
.prose { min-width: 0; max-width: var(--measure); }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.5rem; color: var(--heading); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.prose h2:first-child, .prose .checked-date + h2 { margin-top: 0; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li + li { margin-top: .4rem; }
.prose li::marker { color: var(--tan-dark); }
.prose a { color: var(--heading); font-weight: 700; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose .checked-date { display: inline-block; padding: .2rem .6rem; background: var(--note-bg); border-radius: var(--radius); font-weight: 600; }

/* Service page: copy beside the call-back form */
/* Areas we cover: one card per council district, its places as a run of text (not chips, which
   would look tappable) */
.office-details address { font-style: normal; }
.office-details .office-where { display: block; margin-top: .25rem; font-weight: 700; }
.district-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.district { margin: 0; padding: 1rem 1.1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.district h3 { margin: 0; color: var(--heading); font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.district-note { margin-top: .15rem; color: var(--tan-dark); font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
ul.place-list { display: flex; flex-wrap: wrap; margin-top: .55rem; padding: 0; list-style: none; color: var(--muted); line-height: 1.6; }
ul.place-list li { margin: 0; }
.district-link { display: inline-block; margin-top: .4rem; padding-block: .6rem; color: var(--heading); font-weight: 700; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
ul.place-list li:not(:last-child)::after { content: "·"; content: "·" / ""; margin-inline: .45rem; color: var(--tan); }
.service-layout, .listing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
/* The form column follows the reader only where the whole column fits on screen; on a laptop a sticky
   column taller than the window would hide its own send button */
@media (min-height: 1050px) { .service-aside, .listing-aside { position: sticky; top: 96px; } }
/* "Our director" panel above the form on service pages */
.surveyor {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.surveyor-photo { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; background: var(--line); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); }
.surveyor figcaption { display: grid; gap: .1rem; min-width: 0; line-height: 1.3; }
.surveyor-label { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tan-dark); }
.surveyor-name { color: var(--heading); font-size: 1.0625rem; }
.surveyor-creds { font-size: .9375rem; color: var(--muted); }
.surveyor-link {
  justify-self: start;
  padding-block: .7rem;
  margin-block: -.55rem -.7rem;
  color: var(--heading);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration-color: var(--tan);
  text-underline-offset: 3px;
}
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Listings */
.listing-stack { display: grid; gap: 1.5rem; min-width: 0; }
.listing-image { display: block; }
.listing-title a { color: inherit; text-decoration: none; }
.listing-title a:hover { text-decoration: underline; text-decoration-color: var(--tan); }
.about-sell { padding-top: 0; }
.sub-title { margin-top: 2.5rem; color: var(--heading); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.listing-main > p { margin-top: 1rem; max-width: var(--measure); }
.listing-main > p a { color: var(--heading); font-weight: 700; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.gallery picture { grid-column: 1 / -1; }
.gallery img { width: 100%; border-radius: var(--radius); }
.placeholder-box {
  display: grid;
  place-items: center;
  min-height: 8rem;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  background: var(--bg);
  border: 1px dashed var(--field-border);
  border-radius: var(--radius);
}
.placeholder-inline { min-height: 0; justify-items: start; }
.fact-list {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  border-top: 1px solid var(--line);
}
.fact-list > div { padding-block: .75rem; border-bottom: 1px solid var(--line); }
.fact-list dt { font-size: .9375rem; color: var(--muted); }
.fact-list dd { font-weight: 700; }
.material-info { grid-template-columns: 1fr; }
.material-info > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }

/* About page: the team, led by the director */
.team-lead {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 4vw, 3rem);
  align-items: start;
  padding-bottom: 2.5rem;
  border-bottom: 2px solid var(--line);
}
.lead-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--line); }
.team-lead-text { max-width: var(--measure); }
.team-lead-text .person-name { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.team-lead-text .person-role { color: var(--muted); }
.team-lead-text p + p { margin-top: 1rem; }
.team-section .team-grid { margin-top: 2.5rem; }

@media (max-width: 1000px) {
  .service-layout, .listing-layout { grid-template-columns: 1fr; }
  .service-aside, .listing-aside { position: static; max-width: 36rem; }
}
@media (max-width: 520px) {
  .fact-list, .material-info > div { grid-template-columns: 1fr; }
  .material-info > div { gap: 0; }
}
@media (max-width: 860px) {
  .team-lead { grid-template-columns: 1fr; }
}

/* 404 page */
.not-found-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.not-found .sub-title { margin-top: 0; }
.link-list { margin-top: 1rem; border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a {
  display: block;
  padding-block: .8rem;
  color: var(--heading);
  font-weight: 700;
  text-decoration-color: var(--tan);
  text-underline-offset: 4px;
}
@media (max-width: 1000px) {
  .not-found-grid { grid-template-columns: 1fr; }
  .not-found .enquiry-panel { max-width: 36rem; }
}

/* Rating shown by the call-back form heading */
.form-proof { margin-top: -.75rem; font-size: .9375rem; font-weight: 600; }
.form-proof a { display: inline-block; padding-block: .65rem; margin-block: -.65rem; color: var(--heading); text-decoration-color: var(--tan); text-underline-offset: 3px; }

/* Service pages: their own FAQs and the last-updated line */
.prose .page-faqs { margin-top: 1rem; }
.prose .page-faqs details p { margin-top: 0; }
.prose .updated { margin-top: 2.5rem; font-size: .9375rem; color: var(--muted); }

/* Legal pages: contents list beside the text on wide screens, above it on phones.
   Text keeps a readable line length; tables get the full column. */
.legal-layout { display: grid; gap: 2rem; align-items: start; }
.legal-layout:has(> .toc) { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.legal-layout .prose { max-width: 48rem; }
.legal-layout .prose > :not(table) { max-width: var(--measure); }
.toc {
  position: sticky;
  top: 112px;
  padding: 1rem 1.25rem 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tan);
  border-radius: var(--radius-card);
}
.toc h2 { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin-top: .35rem; padding: 0; list-style: none; }
.toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: .3rem;
  color: var(--heading);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.toc a:hover { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 1000px) {
  .legal-layout:has(> .toc) { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-width: 36rem; }
}
.prose h3 { margin-top: 1.75rem; color: var(--heading); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.prose h2 + h3 { margin-top: 1rem; }

/* Fee and policy tables: a plain grid on wide screens, one card per row on phones */
.fee-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5;
}
.prose .fee-table { margin-top: 1.25rem; }
.fee-table th, .fee-table td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.fee-table thead th { border-top: 0; background: var(--navy); color: var(--white); font-size: .9375rem; }
.fee-table tbody th { width: 34%; color: var(--heading); font-weight: 700; }
.table-note { font-size: .9375rem; color: var(--muted); }
@media (max-width: 640px) {
  .fee-table, .fee-table tbody, .fee-table tr, .fee-table th, .fee-table td { display: block; }
  .fee-table { background: none; border: 0; border-radius: 0; }
  .fee-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fee-table tr { padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--tan); border-radius: var(--radius-card); }
  .fee-table tr + tr { margin-top: .75rem; }
  .fee-table th, .fee-table td, .fee-table tbody th { width: auto; padding: 0; border: 0; }
  .fee-table td { margin-top: .6rem; }
  /* Column name above each value; hidden from screen readers, which already announce the header */
  .fee-table td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Trust & Authority layout: tablet and phone */
/* Credentials two by two below 1180px, with the rule only between the two items on each row */
@media (max-width: 1180px) {
  .proof-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-item:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-form { max-width: 34rem; }
  .hero::before { background: linear-gradient(180deg, rgb(23 14 69 / .8) 0%, rgb(23 14 69 / .72) 55%, rgb(23 14 69 / .45) 100%); }
  .contact-no-form .wrap { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .steps-list { grid-template-columns: 1fr; gap: 1.75rem; }
  .step-item { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; }
  .step-number { grid-row: span 2; margin-bottom: 0; }
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .proof-list { padding-block: 1.25rem; }
  /* Phones: mark above the words, so the text gets the full column */
  .proof-item, .proof-rating { flex-direction: column; align-items: flex-start; gap: .5rem; padding-inline-end: .75rem; }
  .proof-item:nth-child(even) { padding-inline-start: .9rem; }
  .proof-mark img { height: 34px; }
  .proof-big { font-size: 2rem; }
  .proof-label { font-size: .9375rem; }
  .callback-compact { padding: 1.1rem 1rem 1.25rem; }
  .steps-actions .btn { width: 100%; }
}

/* ------------------------------------------------------------------
   Motion. Everything here is small (12px or less), quick (0.4s or less)
   and switched off by the reduced-motion rule above.
   ------------------------------------------------------------------ */

/* Scroll reveals: the script adds .reveal only to things below the first screen,
   so content is never hidden without JavaScript, and nothing above the fold flickers */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* Header gains a soft shadow once the page scrolls */
.site-header { transition: box-shadow var(--dur-base) ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--navy-line), 0 6px 20px rgb(23 14 69 / .25); }

/* Hero call-back form settles in as the page opens */
@keyframes settle-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-form .enquiry-panel { animation: settle-in .5s var(--ease-out) .15s both; }

/* Menus open with a quick fade */
@keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sub-menu:not([hidden]) { animation: fade-down var(--dur-fast) var(--ease-out); }
.site-nav[data-open] { animation: fade-down var(--dur-base) var(--ease-out); }

/* FAQ answers fade in when opened */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
details[open] > :not(summary) { animation: fade-in var(--dur-base) ease; }
.faq summary::after { transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Buttons press in slightly */
.btn:active, .link-button:active, .video-toggle:active { transform: translateY(1px) scale(.99); }

/* ----- Forms ----- */

/* Each new step slides in from the side it comes from */
@keyframes step-forward { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes step-back { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.step.step-enter-forward { animation: step-forward .3s var(--ease-out); }
.step.step-enter-back { animation: step-back .3s var(--ease-out); }

/* Progress bar under "Step 1 of 2", growing as the visitor moves on */
.js .step-progress { position: relative; padding-bottom: .55rem; }
.js .step-progress::before, .js .step-progress::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  border-radius: 3px;
}
.js .step-progress::before { background: var(--line); }
.js .step-progress::after {
  background: var(--tan);
  transform: scaleX(var(--progress, .5));
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}

/* Option cards: lift on hover, press on tap, tick appears when chosen */
.option-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.option-card:active { transform: scale(.98); }
.option-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .75rem;
  width: .45rem;
  height: .8rem;
  margin-top: -.5rem;
  border-right: 2px solid var(--heading);
  border-bottom: 2px solid var(--heading);
  opacity: 0;
  transform: rotate(45deg) scale(.6);
  transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);
}
/* Room for the tick is always kept, so choosing a card never moves its text */
.option-card, .callback-compact .option-card { padding-right: 1.9rem; }
.option-card:has(input:checked)::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* Fields: a soft ring on focus, on top of the existing outline */
.field input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.field textarea:focus-visible,
.note-toggle textarea:focus-visible { box-shadow: 0 0 0 5px rgb(20 29 119 / .08); }

/* Things that appear inside forms fade in rather than jumping */
@keyframes fade-up-small { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.field-error:not([hidden]), .form-status:not([hidden]), .service-chip:not([hidden]),
[data-email-field]:not([hidden]), [data-step-error]:not([hidden]), .form-about:not([hidden]) {
  animation: fade-up-small var(--dur-base) var(--ease-out);
}

/* Sending: the button breathes gently while it waits */
@keyframes sending { 50% { opacity: .75; } }
.btn[disabled] { animation: sending 1.2s ease-in-out infinite; }

/* Thank-you panel and its tick */
.enquiry-sent:not([hidden]), .alert-sent:not([hidden]) { animation: settle-in .45s var(--ease-out); }
.sent-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 50%; background: var(--icon-tint); color: var(--heading); font-size: 1.6rem; }
.sent-icon .icon { vertical-align: 0; }
@keyframes tick-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.enquiry-sent:not([hidden]) .sent-icon { animation: tick-in .45s var(--ease-out) .1s both; }

/* Less white (October 2026): the cards that hold information are navy with gold accents, and the
   credentials strip and "how it works" band match the navy header. Each navy area redefines the
   colour tokens, so headings, text, links, icons and light chips inside it all follow */
.proof-strip, .steps,
.service-card, .rating-card, .review, .case-study, .district, .surveyor, .faq-list details {
  --heading: var(--white);
  --text: var(--on-navy);
  --muted: #BDB5D1;
  --line: var(--navy-line);
  --surface: var(--navy);
  --icon-tint: rgb(255 255 255 / .08);
  --note-bg: rgb(255 255 255 / .1);
  --tan-dark: var(--tan-light);
  --star-on-light: var(--star);
  background: var(--navy);
  color: var(--text);
  border-color: var(--navy-line);
}
/* Cards sit on the light grey page, with a gold edge along the top */
.service-card, .rating-card, .review, .case-study, .district, .surveyor { border-top: 3px solid var(--tan); }
.service-card:hover { border-color: var(--tan); border-top-color: var(--star); }
.service-icon, .district h3 { color: var(--star); }
.faq-list details[open] summary { color: var(--star); }
/* The credentials strip continues the navy hero; the body logos keep a white plate so they stay unaltered */
.proof-strip { border-top: 1px solid rgb(255 255 255 / .12); border-bottom: 3px solid var(--tan); box-shadow: none; }
.proof-mark picture { display: flex; padding: .3rem .45rem; background: var(--white); border-radius: var(--radius); }
.proof-big { color: var(--star); }
/* "How it works": a navy band with gold step numbers */
.steps { border-block: 0; }
.steps .step-number { background: var(--star); color: var(--navy); box-shadow: 0 0 0 4px rgb(255 255 255 / .1); }
/* Sections that were white are now the light grey page colour, so the navy cards stand out */
.faq, .team-section, .fee-checker, .related, .contact:not(.contact-navy) { background: var(--ground); }
.contact:not(.contact-navy) .enquiry-panel, .fee-checker .checker-panel { background: var(--white); }

/* LinkedIn and Facebook: each brand's logo in navy on a gold circle (footer and contact page) */
.social-links { display: flex; gap: .75rem; margin-top: 1.25rem; padding: 0; list-style: none; }
ul.social-links li a {
  padding: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--star);
  color: var(--navy);
  font-size: 1.5rem;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
ul.social-links li a:hover { color: var(--navy); background: var(--tan-light); transform: translateY(-1px); }
ul.social-links li a:focus-visible { outline: 3px solid var(--tan); outline-offset: 3px; }
.social-links .icon { vertical-align: 0; }
@media (forced-colors: active) { .social-links a { border: 2px solid LinkText; } }
/* In the header beside the menu links, and beside the call button in the homepage hero */
.social-links.social-header, .social-links.social-hero { margin-top: 0; gap: .5rem; }
.social-links.social-hero { align-self: center; }
/* Laptops: tighter menu spacing so the links, icons and call button stay on one line */
/* Laptops: tighter menu spacing, and the social icons wait for the hero and footer, so the links and
   call button stay on one line even with a browser scrollbar taking width */
@media (min-width: 1001px) and (max-width: 1180px) { .site-nav { gap: 1.1rem; } .site-nav .social-header { display: none; } }
.site-nav > a, .site-header .btn { white-space: nowrap; }

/* Listings: a status label (For sale, Sold STC, Sold, To let, Let) on every card and listing page,
   navy with gold text; the sold and let cards are smaller and sit in a grid of their own */
.listing-status {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .25rem .7rem;
  background: var(--navy);
  color: var(--star);
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gallery { position: relative; }
.listing-status-photo { position: absolute; top: 1rem; left: 1rem; margin: 0; box-shadow: var(--shadow-md); }
.listing-summary { margin-top: 1.5rem; max-width: var(--measure); font-size: 1.125rem; }
.listings-done { background: var(--ground); border-top: 1px solid var(--line); }
.listing-grid-done { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.listing-compact img { aspect-ratio: 4 / 3; }
.listing-compact .listing-body { padding: 1rem 1.15rem 1.25rem; }
.listing .listing-compact h3, .listing-compact .listing-title { font-size: 1.2rem; }
.listing-compact .listing-facts { grid-template-columns: 1fr; gap: .4rem; margin-top: .6rem; }

/* Farm grants page: "Which grant windows are open now?" call-out, navy with a gold edge */
.grant-window-callout {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--navy);
  color: var(--on-navy);
  border-left: 4px solid var(--star);
  border-radius: var(--radius-card);
}
.prose .grant-window-callout p { margin-top: 0; }
.prose .grant-window-callout p + p { margin-top: .4rem; }
.grant-window-title { color: var(--white); font-size: 1.15rem; font-weight: 700; }
.prose .grant-window-callout .btn { margin-top: 1rem; color: var(--white); text-decoration: none; }

/* Tables in page copy (grant items and payment rates): navy header row, gold rule, rates kept on one line */
.prose table:not([role]) { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .9688rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.prose table:not([role]) thead th { padding: .65rem .8rem; background: var(--navy); color: var(--white); text-align: left; font-weight: 700; border-bottom: 3px solid var(--tan); }
.prose table:not([role]) td { padding: .6rem .8rem; border-top: 1px solid var(--line); vertical-align: top; }
.prose table:not([role]) tbody tr:nth-child(even) td { background: var(--ground); }
.prose table:not([role]) td:last-child, .prose table:not([role]) th:last-child, .prose table:not([role]) td:nth-child(2) { white-space: nowrap; }
/* Phones: the rates wrap rather than widening the page */
@media (max-width: 640px) { .prose table:not([role]) td { white-space: normal !important; } .prose table:not([role]) td, .prose table:not([role]) th { padding: .5rem .55rem; } }

/* Desktop: the header runs edge to edge, logo at the far left and the call button at the far right,
   rather than sitting in the 1200px column. Phones and tablets keep the column. */
@media (min-width: 1001px) { .site-header .wrap { max-width: none; padding-inline: clamp(1.5rem, 3vw, 3rem); } }

/* Google reviews: a navy band like the grant chart. The rating summary and gold arrow buttons sit on the
   left; the review cards (plum, gold stars, a soft gold quote mark) scroll and snap on the right.
   Nothing moves on its own. */
.proof {
  --heading: var(--white);
  --text: var(--on-navy);
  --muted: #BDB5D1;
  background: linear-gradient(135deg, var(--navy) 0%, var(--plum) 100%);
  color: var(--text);
  border-block: 4px solid var(--tan);
}
.proof .section-title { color: var(--white); }
.reviews-carousel { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2.5rem 3rem; align-items: center; }
.reviews-summary { display: grid; gap: .45rem; justify-items: start; }
.reviews-score { color: var(--star); font-family: var(--font-heading); font-size: 4.25rem; font-weight: 700; line-height: 1; }
.reviews-score span { color: var(--muted); font-size: 1.4rem; font-weight: 400; }
.reviews-summary .stars { color: var(--star); font-size: 1.3rem; }
.reviews-count { color: var(--white); font-weight: 700; line-height: 1.35; }
.reviews-summary .text-link { color: var(--white); text-decoration-color: var(--tan-light); }
.carousel-controls { display: flex; gap: .6rem; margin-top: 1rem; }
.carousel-controls[hidden] { display: none; }
.carousel-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--star);
  color: var(--navy);
  font-size: 1.35rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.carousel-btn:hover { background: var(--tan-light); transform: translateY(-1px); }
.carousel-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.carousel-btn[aria-disabled="true"] { opacity: .35; cursor: default; transform: none; }
.carousel-btn .icon { vertical-align: 0; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(88%, 22rem);
  gap: 1.25rem;
  margin: 0;
  padding: .25rem .25rem 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--tan) transparent;
}
.carousel-track:focus-visible { outline: 3px solid var(--star); outline-offset: 4px; border-radius: var(--radius-card); }
.carousel-slide { scroll-snap-align: start; display: flex; }
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 1.6rem 1.5rem 1.4rem;
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .12);
  border-top: 3px solid var(--star);
  border-radius: var(--radius-card);
}
.review-card::before {
  content: "“" / "";
  position: absolute;
  top: .1rem;
  right: 1rem;
  font-family: Georgia, serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--star);
  opacity: .3;
}
.review-card .stars { color: var(--star); font-size: 1.1rem; }
.review-card blockquote { flex: 1; margin: .85rem 0 0; color: var(--white); font-size: 1.0625rem; line-height: 1.6; }
.review-card figcaption { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .12); }
.review-card figcaption > span:last-child { display: grid; }
.review-card figcaption strong { color: var(--white); }
.review-card figcaption > span:last-child > span { color: var(--tan-light); font-size: .875rem; }
.review-initial { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--star); color: var(--navy); font-weight: 800; }
.review-card blockquote p + p { margin-top: .7rem; }
/* Long reviews show the first lines with a fade, and "Read more" opens the rest in place */
.review-card blockquote.is-clamped { max-height: 10.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.review-more { align-self: flex-start; margin-top: .6rem; padding: .55rem 0; background: none; border: 0; color: var(--star); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.review-more:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
@media (max-width: 860px) {
  .reviews-carousel { grid-template-columns: 1fr; gap: 1.5rem; }
  .reviews-summary { grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; }
  .reviews-score { grid-row: span 2; font-size: 3.25rem; }
  .reviews-summary .text-link, .carousel-controls { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

/* Static maps: an OpenStreetMap image with a gold pin, linking to Google Maps */
.map-image { position: relative; display: block; margin-top: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); text-decoration: none; }
.map-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.map-image-link { position: absolute; left: .75rem; top: .75rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .85rem; background: var(--navy); color: var(--white); border-radius: var(--radius); font-weight: 700; font-size: .9375rem; }
.map-image:hover .map-image-link, .map-image:focus-visible .map-image-link { background: var(--indigo); }
.map-image:focus-visible { outline: 3px solid var(--tan); outline-offset: 3px; }
.office-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; margin-top: 2rem; }
.office-maps figure { margin: 0; }
.office-maps figcaption { margin-top: .5rem; color: var(--muted); font-size: .9375rem; font-weight: 700; }