/* Self-hosted fonts (replaces Google Fonts CDN) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/work-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/work-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/work-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
}

/* ==========================================================================
   Herts & Essex Removals & Storage — premium rebuild
   Same family (purple + near-black) as the original brand, refined with a
   brass accent, warmer neutrals and an editorial serif/sans pairing.
   ========================================================================== */

:root {
  --purple: #4a1f52;
  --purple-dark: #35153c;
  --purple-tint: #f3eef4;
  --brass: #a9833f;
  --brass-light: #c9a35f;
  --near-black: #1a1512;
  --ink: #2c2622;
  --text-grey: #5c5450;
  --heading: #231d1a;
  --cream: #faf7f2;
  --cream-deep: #f2ece2;
  --border: #e6ddd0;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', Arial, Helvetica, sans-serif;
  --font-script: 'Cormorant Garamond', Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-grey);
  line-height: 1.7;
  font-size: 16px;
  background: var(--cream);
}

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

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--brass); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 600;
  line-height: 1.2;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brass);
  margin-bottom: 10px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Header / nav ---- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  box-shadow: 0 2px 14px rgba(26,21,18,0.05);
  position: relative;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span { width: 28px; height: 2px; background: var(--near-black); display: block; }

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
nav.main-nav li { position: relative; }
nav.main-nav > ul > li > a {
  color: var(--heading);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
nav.main-nav > ul > li.active > a,
nav.main-nav > ul > li > a:hover {
  border-bottom-color: var(--brass);
  color: var(--purple);
}
nav.main-nav .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  min-width: 240px;
  padding: 10px 0;
  z-index: 50;
  box-shadow: 0 12px 28px rgba(26,21,18,0.1);
  /* The Areas We Cover dropdown now lists 15 entries (2 county
     overviews + 13 towns) -- cap its height and let it scroll so it
     never runs off the bottom of a shorter desktop viewport. */
  max-height: 72vh;
  overflow-y: auto;
}
nav.main-nav li:hover .dropdown { display: block; }
nav.main-nav .dropdown li a {
  display: block;
  padding: 9px 20px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-grey);
  border: none;
}
nav.main-nav .dropdown li a:hover { color: var(--purple); background: var(--purple-tint); }

/* ---- Simple page hero (service/legal/contact pages) ---- */
.page-hero {
  background: var(--cream-deep);
  padding: 34px 20px 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero h1 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 36px); position: relative; z-index: 1; }
.page-hero p { margin: 0 auto; max-width: 60ch; color: var(--text-grey); position: relative; z-index: 1; }
.page-hero .page-hero-mark { position: relative; z-index: 1; }
.breadcrumb { position: relative; z-index: 1; }
/* Same faded "&" as the purple hero, re-tinted for this lighter
   cream background -- a quiet background flourish used on every
   plainer page (about, contact, services, legal, quote forms) so the
   motif carries across the whole site, not just the homepage and
   town pages. Sits behind the heading, never on top of it. */
.page-hero-watermark {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 260px;
  line-height: 1;
  color: rgba(74,31,82,0.06);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
@media (max-width: 600px) {
  /* page-hero text is centered, so a vertically-centered watermark
     collides with it on a narrow phone; drop the watermark to the
     bottom-right corner instead, clear of the heading. */
  .page-hero-watermark { font-size: 150px; top: auto; bottom: -18%; right: -8%; transform: none; }
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  background: var(--cream-deep);
  font-size: 13px;
  padding: 12px 0;
  color: var(--text-grey);
}
.breadcrumb a { color: var(--purple); }

/* ---- Hero ---- */
.hero {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  color: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(201,163,95,0.18), transparent 55%);
  pointer-events: none;
}
.hero-grid {
  display: flex;
  align-items: stretch;
  gap: 44px;
  flex-wrap: wrap;
  padding: 56px 0;
  position: relative;
  z-index: 1;
}
/* On hero layouts without the stacked side-panel (the 5 area pages),
   stretch the photo to match the text column's height instead of
   leaving it at its small source size with empty purple below it. */
.hero-grid > div:not(.hero-side-panel) {
  display: flex;
  flex-direction: column;
}
.hero-grid > div:not(.hero-side-panel) .hero-photo {
  flex: 1;
  min-height: 220px;
}
.hero-grid > div:not(.hero-side-panel) .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-grid > div { flex: 1 1 380px; min-width: 0; }
.hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 46px); margin: 0 0 14px; }
.hero p.lead { font-size: 17px; color: #e9ddee; margin: 0 0 22px; max-width: 46ch; }
.hero .hero-photo {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
}
.hero .eyebrow { color: var(--brass-light); }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 14px 34px;
  border: 1px solid currentColor;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  font-weight: 600;
  border-radius: 2px;
  transition: all 0.15s ease;
}
.btn-purple {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.btn-purple:hover { background: var(--purple-dark); color: #fff; }
.btn-brass {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
}
.btn-brass:hover { background: #8e6c30; color: #fff; }
.btn-outline-white {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

/* ---- Sections ---- */
section { padding: 46px 0; }
section.alt { background: var(--cream-deep); }

.section-title { text-align: center; margin-bottom: 10px; font-size: clamp(24px, 3.2vw, 32px); }
.section-lead { text-align: center; max-width: 60ch; margin: 0 auto 26px; color: var(--text-grey); }

.two-col {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}
.two-col > div { flex: 1 1 340px; min-width: 0; }

/* ---- Service teaser cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 24px;
}
/* Bento-style sizing for the homepage's 3-card "What we do" grid: one
   larger featured card instead of three identical boxes in a row, to
   break up the block-after-block sameness a bit. Only applies here —
   .card-grid isn't reused elsewhere on the site. */
.card-grid .card:first-child {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}
.card-grid .card:first-child img { flex: 1; height: auto; min-height: 260px; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: 0 20px 40px rgba(26,21,18,0.1); transform: translateY(-2px); }
.card img { width: 100%; height: 200px; object-fit: cover; }
.card .card-body { padding: 18px 20px 20px; }
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { margin: 0 0 10px; font-size: 14.5px; }
.card .read-more { color: var(--purple); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.6px; }

/* ---- Checklist ---- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 30px; }
.checklist li {
  padding: 7px 0 7px 32px;
  position: relative;
  font-weight: 500;
  color: var(--heading);
  font-size: 15px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brass);
}
.checklist li::after {
  content: "\2713";
  position: absolute;
  left: 3px;
  top: 7px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
}

/* ---- Steps / icons ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; margin-top: 26px; }
.steps .icon-wrap {
  width: 58px; height: 58px; margin: 0 auto 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
}
.steps img { width: 28px; filter: brightness(0) invert(1); }

/* ---- CTA band ---- */
.cta-band {
  background: var(--near-black);
  color: #f1ece3;
  text-align: center;
  padding: 46px 20px;
}
.cta-band .eyebrow { color: var(--brass-light); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfc6bd; margin-bottom: 18px; max-width: 54ch; margin-left: auto; margin-right: auto; }

/* ---- Advice cards ---- */
.advice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.advice-grid .card img { height: 150px; }
.advice-grid h3 { font-size: 16px; }

/* ---- Peace of mind / protection lists on service pages ---- */
.bullet-list { padding-left: 20px; }
.bullet-list li { margin-bottom: 9px; }

/* ---- Stat strip (premium touch) ---- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.stat-strip .stat-num { font-family: var(--font-display); font-size: 34px; color: var(--purple); display: block; }
.stat-strip .stat-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-grey); }

/* ---- Footer ---- */
footer {
  background: var(--near-black);
  color: #a79e94;
  padding: 38px 0 20px;
  font-size: 14px;
}
footer .footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.85fr 0.95fr 0.9fr 1.1fr;
  gap: 22px;
  margin-bottom: 22px;
}
footer h4 { color: #f1ece3; font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; font-weight: 600; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 7px; }
footer a { color: #a79e94; }
footer a:hover { color: var(--brass-light); }
.footer-bottom {
  border-top: 1px solid #30281f;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #7d756c;
}
.footer-bottom a { color: #7d756c; }

.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.footer-social a:hover { background: rgba(255,255,255,0.18); }

.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 999;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.07); }
@media (max-width: 600px) {
  .whatsapp-float { width: 50px; height: 50px; bottom: 16px; right: 16px; }
}

/* ---- Blog / advice article pages ---- */
.article-wrap { max-width: 720px; margin: 0 auto; }
.article-meta { color: var(--text-grey); font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 18px; }
.article-hero-img { width: 100%; height: 320px; object-fit: cover; border-radius: 10px; margin-bottom: 28px; }
.article-wrap h2 { font-family: var(--font-display); font-size: 22px; color: var(--purple); margin: 30px 0 12px; }
.article-wrap p { margin-bottom: 14px; line-height: 1.7; }
.article-wrap .bullet-list { margin-bottom: 14px; }

/* ---- Contact page ---- */
.contact-details { margin-top: 20px; }
.contact-details p { margin: 6px 0; }

/* ---- Location pages ---- */
.local-facts {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 22px 24px;
}
.local-facts h3 { margin-top: 0; font-size: 17px; }
.local-facts ul { padding-left: 18px; margin: 0; }
.local-facts li { margin-bottom: 6px; font-size: 14.5px; }

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.area-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 20px;
}
.area-card h3 { margin: 0 0 6px; }
.area-card p { font-size: 14.5px; margin: 0 0 10px; }

/* Simple text-link "pills" for cross-linking to other area pages,
   used on pages that don't have a bespoke photo to put in a card
   (new town/county pages) — same job as .area-grid's photo cards,
   no image required. */
.area-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.area-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 11px 20px;
  color: var(--heading);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.area-pill:hover { background: var(--cream-deep); border-color: var(--purple); transform: translateY(-1px); }

/* Non-clickable variant of .area-pill, for towns we cover that don't
   have a dedicated page yet -- gives the town name real content on
   the page (so it isn't entirely absent from the site) without
   linking to a page that doesn't exist. Swap to .area-pill once a
   page is built for that town. */
.area-pill-muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 50px;
  padding: 10px 19px;
  color: var(--text-grey);
  font-weight: 500;
  font-size: 14px;
}

/* Placeholder hero visual for pages that don't have a bespoke photo
   yet — a simple on-brand graphic instead of a stock or mismatched
   photo, swap for a real photo once one exists for that page. */
.hero-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 320px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border: 1px dashed rgba(255,255,255,0.35);
  border-radius: 4px;
  padding: 30px;
}
.hero-photo-placeholder .monogram-badge {
  color: rgba(255,255,255,0.85);
  font-size: 44px;
}
.hero-photo-placeholder .monogram-amp { color: var(--brass-light); }
.hero-photo-placeholder p {
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  max-width: 24ch;
}

/* ---- Benefit cards (location landing pages) ---- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 6px;
}
.benefit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 22px 18px;
  text-align: center;
}
.benefit-card .icon-wrap {
  width: 50px; height: 50px; margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.benefit-card h3 { font-size: 16.5px; margin: 0 0 8px; }
.benefit-card p { font-size: 14px; margin: 0; }

/* ---- Photo gallery ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-item {
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.gallery-item img { width: 100%; height: 170px; object-fit: cover; }
/* One wider tile instead of four identical squares — this gallery
   repeats with the same 4-image layout on all 5 location pages, so a
   bit of size variety helps it not read as the same block over and
   over down the site. */
.gallery-grid .gallery-item:first-child { grid-column: span 2; }
.gallery-item figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-grey);
  background: #fff;
}

/* ---- Inline request-a-visit panel ---- */
.request-panel {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
}
.request-panel > div:first-child { flex: 1 1 320px; min-width: 0; }
.request-form { flex: 1 1 340px; min-width: 0; }
.request-form input {
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 14px;
}
.request-form label { font-size: 13.5px; font-weight: 600; color: var(--heading); }

/* ---- FAQ ---- */
.faq-list { display: flex; flex-direction: column; gap: 9px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 13px 20px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--heading);
  font-size: 15px;
}
.faq-item p { margin: 10px 0 0; font-size: 14.5px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .card-grid, .advice-grid, .steps, .stat-strip, footer .footer-grid, .benefit-grid, .gallery-grid { grid-template-columns: 1fr 1fr; }
  .card-grid .card:first-child { grid-column: span 2; grid-row: span 1; }
  .card-grid .card:first-child img { min-height: 200px; }
  .gallery-grid .gallery-item:first-child { grid-column: span 2; }
  nav.main-nav { display: none; }
  .nav-toggle { display: flex; }
  .request-panel { padding: 28px; }

  /* The hamburger button previously had nothing wired up to it, so
     tapping it did nothing. This makes it open a dropdown panel
     under the header, with each "Services"/"Areas We Cover"/"Book a
     Visit" item expanding its own list on tap instead of the
     hover-only behaviour desktop uses. See the <script> near the end
     of the page for the toggle logic. */
  nav.main-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 16px 30px rgba(26,21,18,0.14);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    z-index: 60;
  }
  nav.main-nav.is-open ul {
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
  }
  nav.main-nav.is-open > ul > li { width: 100%; }
  nav.main-nav.is-open > ul > li > a {
    display: block;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
  }
  nav.main-nav.is-open > ul > li.active > a,
  nav.main-nav.is-open > ul > li > a:hover {
    border-bottom: 1px solid var(--border);
  }
  nav.main-nav.is-open .dropdown {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    background: var(--cream);
    min-width: 0;
    padding: 0;
  }
  nav.main-nav.is-open li:hover .dropdown { display: none; }
  nav.main-nav.is-open li.is-open > .dropdown { display: block; }
  nav.main-nav.is-open .dropdown li a { padding: 12px 36px; }
}
@media (max-width: 600px) {
  .card-grid, .advice-grid, .steps, .stat-strip, footer .footer-grid, .benefit-grid, .gallery-grid { grid-template-columns: 1fr; }
  .card-grid .card:first-child, .gallery-grid .gallery-item:first-child { grid-column: span 1; grid-row: span 1; }
  .card-grid .card:first-child img { min-height: 200px; }
  section { padding: 34px 0; }
  .hero-grid { padding: 40px 0; }
  .cta-band { padding: 34px 20px; }
}


/* ---- Pass 7: market stats + subtle video note ---- */
.source-note {
  font-size: 12.5px;
  color: var(--text-grey);
  margin-top: 10px;
  line-height: 1.5;
}
.video-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-grey);
}
.video-note a {
  color: var(--purple);
  text-decoration: underline;
}
.hero .video-note {
  color: rgba(255,255,255,0.75);
}
.hero .video-note a {
  color: var(--brass-light);
}


/* ---- Pass 8: hero watermark + proper button-shaped hero CTAs ----
   (the actual watermark rule lives further down, under "Pass 11" —
   this used to duplicate it with a conflicting width/opacity/filter
   set, which was the bug: two rules for the same selector, each
   setting different properties, so the computed style was an
   unintended merge of both. Removed here, consolidated below.) */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 6px 0 0;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-radius: 6px;
  text-decoration: none;
  min-width: 240px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.hero-cta-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-cta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.3;
}
.hero-cta-text strong {
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.hero-cta-text small {
  font-size: 12.5px;
  font-weight: 400;
}
.hero-cta-primary {
  background: var(--brass);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}
.hero-cta-primary .hero-cta-icon { background: rgba(255,255,255,0.22); }
.hero-cta-primary .hero-cta-text small { color: rgba(255,255,255,0.85); }
.hero-cta-primary:hover { background: #8e6c30; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,0.32); }
.hero-cta-secondary {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.hero-cta-secondary .hero-cta-icon { background: rgba(255,255,255,0.14); }
.hero-cta-secondary .hero-cta-text small { color: rgba(255,255,255,0.7); }
.hero-cta-secondary:hover { background: rgba(255,255,255,0.16); border-color: #fff; color: #fff; transform: translateY(-2px); }
@media (max-width: 600px) {
  .hero-cta { min-width: 0; width: 100%; }
}

/* Mobile-only "Request a Call Back" CTA -- pairs with "Book Your Home
   Visit" in the same size/style so neither has to sit full-width
   alone on a phone. Hidden on desktop, which keeps its original Book
   Your Home Visit + Our Story pairing untouched. */
.hero-cta-callback {
  display: none;
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.hero-cta-callback .hero-cta-icon { background: rgba(255,255,255,0.14); }
.hero-cta-callback .hero-cta-text small { color: rgba(255,255,255,0.7); }
.hero-cta-callback:hover { background: rgba(255,255,255,0.16); border-color: #fff; color: #fff; transform: translateY(-2px); }
@media (max-width: 900px) {
  .hero-side-panel .hero-cta-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .hero-side-panel .hero-cta-group .hero-cta {
    width: auto;
    min-width: 0;
    padding: 13px 10px;
  }
  .hero-side-panel .hero-cta-group .hero-cta-text strong { font-size: 11px; letter-spacing: 0.6px; }
  .hero-side-panel .hero-cta-group .hero-cta-text small { font-size: 10.5px; }
  .hero-side-panel .hero-cta-group .hero-cta-icon { width: 34px; height: 34px; }
  .hero-cta-callback { display: flex; }
}


/* ---- Pass 9: phone CTA + pulsating "tips" badge ---- */
.hero-cta-call {
  background: rgba(255,255,255,0.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.hero-cta-call .hero-cta-icon { background: rgba(255,255,255,0.14); }
.hero-cta-call .hero-cta-text small { color: rgba(255,255,255,0.7); }
.hero-cta-call:hover { background: rgba(255,255,255,0.16); border-color: #fff; color: #fff; transform: translateY(-2px); }

.hero-tips-pill {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(201,163,95,0.5);
  color: #fff;
  padding: 11px 18px 11px 12px;
  border-radius: 50px;
  text-decoration: none;
  font-family: var(--font-body);
  margin-top: 14px;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.hero-tips-pill:hover { background: rgba(255,255,255,0.15); border-color: var(--brass-light); transform: translateY(-1px); color: #fff; }
.hero-tips-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(201,163,95,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.hero-tips-icon::before,
.hero-tips-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(201,163,95,0.7);
  animation: tips-pulse 2.6s ease-out infinite;
}
.hero-tips-icon::after { animation-delay: 1.3s; }
@keyframes tips-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  75% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hero-tips-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.hero-tips-text strong {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}
.hero-tips-text small {
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
}

/* ---- Pass 11: statement logo + H&E monogram + text watermark ---- */
.logo-wrap img { height: 84px !important; width: auto; }
footer .footer-grid img[alt*="Herts"] { height: 56px !important; }

/* Same lettering as the real logo (grey "Herts"/"Essex", purple italic
   "&"), just shortened to the two initials — not a separate badge
   design, a condensed version of the one logo. */
.monogram-badge {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--text-grey);
  letter-spacing: -0.5px;
}
.monogram-amp {
  color: var(--purple);
  font-weight: 700;
  font-style: italic;
  font-size: 1.25em;
  margin: 0 1px;
  line-height: 0.8;
}
.footer-brand .monogram-badge { margin-bottom: 12px; color: #cfc6bd; }
.page-hero .monogram-badge { margin-bottom: 10px; justify-content: center; width: 100%; }

/* The hero's faded background "&" -- sits behind all hero content
   (z-index 0, .hero has overflow:hidden so it never spills past the
   purple band), large and very low-opacity so it reads as a quiet
   texture, never as something competing with the heading or buttons
   printed on top of it. */
.hero-watermark {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-54%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 560px;
  line-height: 1;
  color: rgba(255,255,255,0.09);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
@media (max-width: 900px) {
  .hero-watermark { font-size: 320px; right: -8%; }
  .logo-wrap img { height: 60px !important; }
}


/* ---- Pass 12: tap-to-call hero pills + softer, blended CTA boxes ---- */
.hero-side-panel {
  display: flex;
  flex-direction: column;
}
/* Mobile-only hero photo, placed in the HTML before .hero-grid so it
   renders above all the hero text with no flexbox reordering needed
   (a flex-order + display:contents version of this was tried first,
   but some mobile browsers don't apply "order" reliably to children
   of a display:contents wrapper, so the photo stayed stuck after the
   text). Hidden entirely on desktop, where the original photo in
   .hero-side-panel is used instead. */
.mobile-hero-photo { display: none; }
@media (max-width: 900px) {
  .mobile-hero-photo {
    display: block;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
  }
  .mobile-hero-photo img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
  }
}
/* On mobile, the homepage hero's two columns stack in DOM order, which
   buried a lot of text and the call-back form below the (now-hidden
   on mobile) original photo. Unbox both column wrappers
   (display:contents) so their contents become direct flex items of
   .hero-grid, then reorder those items with a sensible mobile reading
   order: the mobile-hero-photo above handles the photo itself; this
   just orders the text, then the stats, then the form/CTAs/phone/tips.
   Desktop is untouched. */
@media (max-width: 900px) {
  .hero-grid { flex-direction: column; padding-top: 16px; }
  .hero-grid > .hero-intro-col,
  .hero-grid > .hero-side-panel {
    display: contents;
  }
  .hero-grid .hero-photo { display: none; }
  .hero-grid .eyebrow { order: 1; align-self: flex-start; }
  .hero-grid > .hero-intro-col h1,
  .hero-grid > .hero-intro-col p.lead,
  .hero-grid > .hero-intro-col p.video-note {
    order: 1;
  }
  .hero-grid .hero-stat-quad { display: none; }
  .hero-grid .hero-cta-group { order: 4; }
  .hero-grid .hero-quick-actions { order: 5; }
  .hero-grid .hero-quick-form { order: 6; }
}

/* Mobile action area: on a phone the old layout stacked four
   separately-boxed elements (callback form, two CTA buttons, two
   phone pills, a tips pill) right on top of each other — too much
   going on, and some of those didn't read as tappable once simplified
   to plain text. Now: ONE clear primary action (Book Your Home Visit,
   full-width gold button), the old secondary CTA/phone pills/tips
   pill are hidden on mobile (superseded by .hero-quick-actions below,
   a compact grid of real icon buttons), and the callback form sits at
   the very end with a quieter, divider-only style instead of its own
   heavy panel. Desktop keeps the original boxed layout untouched. */
@media (max-width: 900px) {
  .hero-grid .hero-cta-group { margin-top: 2px; }
  .hero-grid .hero-cta-secondary,
  .hero-grid .hero-phone-row,
  .hero-grid .hero-tips-pill {
    display: none;
  }

  .hero-grid .hero-quick-form {
    background: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.18);
    border-radius: 0;
    padding: 20px 0 0;
    margin: 22px 0 0;
    scroll-margin-top: 20px;
  }
  .hero-grid .hero-quick-form h3 {
    font-size: 11px;
    opacity: 0.8;
    letter-spacing: 1.2px;
  }
}

/* Compact grid of real, tappable icon buttons — Request a Call Back
   (scrolls to the form above), Our Story, Moving Tips, and a direct
   tap-to-call button per office. Hidden on desktop, which keeps its
   original CTA buttons, phone pills and tips pill exactly as before. */
.hero-quick-actions { display: none; }
@media (max-width: 900px) {
  .hero-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  .hero-quick-action {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    padding: 11px 12px;
    color: #fff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .hero-quick-action:hover,
  .hero-quick-action:active {
    background: rgba(255,255,255,0.16);
    border-color: var(--brass-light);
    transform: translateY(-1px);
  }
  .hero-quick-action-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(201,163,95,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 420px) {
  .hero-quick-actions { grid-template-columns: 1fr; }
}

/* Mobile-only stat band, shown after the hero instead of inside it
   (see .hero-grid .hero-stat-quad { display:none } above). Hidden on
   desktop, where the 2x2 quad already sits beside the hero photo. */
.mobile-stat-band { display: none; }
@media (max-width: 900px) {
  .mobile-stat-band {
    display: block;
    background: var(--cream-deep);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
  }
  .mobile-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .mobile-stat-item { text-align: center; }
  .mobile-stat-item .stat-num {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--purple);
    display: block;
    line-height: 1.1;
  }
  .mobile-stat-item .stat-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-grey);
    margin-top: 6px;
    display: block;
  }
}
.hero-side-panel .hero-photo {
  margin-top: 22px;
}
.hero-side-panel .hero-photo img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Full-width hero banner, desktop only -- the homepage photo shown
   above the purple hero content (headline, stats, call-back/CTA
   panel) with the logo overlaid, rather than buried at the bottom of
   the sidebar. Hidden on mobile, where .mobile-hero-photo already
   does this same job (photo first, above the text) at a smaller,
   non-full-bleed size that suits a phone. */
.hero-top-banner { display: none; }
@media (min-width: 901px) {
  .hero-top-banner {
    display: block;
    position: relative;
    width: 100%;
    height: 440px;
    overflow: hidden;
  }
  .hero-top-banner-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-top-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 480px 220px at 50% 50%, rgba(32,10,42,0.55) 0%, rgba(32,10,42,0) 72%),
      linear-gradient(180deg, rgba(42,13,56,0.2) 0%, rgba(32,10,42,0.55) 100%);
  }
  .hero-top-banner-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
  }
  .hero-top-banner-logo img {
    height: 150px;
    width: auto;
    /* Turn the purple brand mark into a soft white silhouette and
       fade it right back, so it reads as a watermark sitting on top
       of the photo rather than a logo badge floating over it. */
    filter: brightness(0) invert(1);
    opacity: 0.22;
  }
  /* The old sidebar photo is now redundant once the full-width banner
     above is showing the same image -- hide it on desktop the same
     way it's already hidden on mobile (see .hero-grid .hero-photo
     under the max-width:900px rules below). */
  .hero-side-panel .hero-photo { display: none; }
}
/* Stat quad, left column of the hero, under the video-note line.
   2x2, large, sized to fill the square gap next to the hero photo. */
.hero-stat-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
  max-width: 420px;
  height: 300px;
}
.hero-stat-quad-item {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}
.hero-stat-quad-item .stat-num {
  font-family: var(--font-display);
  font-size: 38px;
  color: #fff;
  display: block;
  line-height: 1.1;
}
.hero-stat-quad-item .stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.75);
  margin-top: 8px;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .hero-stat-quad { height: auto; max-width: none; }
  .hero-stat-quad-item { padding: 18px 10px; }
}
.hero-phone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hero-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 50px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hero-phone-pill:hover { background: rgba(255,255,255,0.18); border-color: #fff; color: #fff; transform: translateY(-1px); }

/* Softer, glowing CTA boxes that blend into the purple hero rather than
   sitting as flat rectangles on top of it. */
.hero-cta {
  position: relative;
  border-radius: 12px;
  isolation: isolate;
}
.hero-cta::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: inherit;
  filter: blur(13px);
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
.hero-cta-primary {
  background: linear-gradient(135deg, var(--brass) 0%, #8e6c30 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.hero-cta-primary:hover { background: linear-gradient(135deg, #b4904f 0%, #7c5e29 100%); }
.hero-cta-secondary,
.hero-cta-call {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.35);
}
.hero-cta-secondary::before,
.hero-cta-call::before { opacity: 0.08; }

/* Tips pill: a quiet glow so it blends into the hero like the other
   boxes, rather than a hard-edged block. */
.hero-tips-pill { position: relative; isolation: isolate; border-radius: 50px; }
.hero-tips-pill::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: inherit;
  filter: blur(12px);
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}

/* ---- Pass 13: statement logo, with a soft glow and a gentle
   twinkle sweep. Scoped to pages that have the purple hero (home +
   the town pages) via body.has-hero, so the plainer legal/service
   page headers are untouched.
   This used to be sized at up to 180px tall and pulled upward so it
   deliberately bled down out of the header and across the top of the
   hero below it -- on a page with a tall hero that left room to
   breathe, but once the mobile hero got its own full-width photo and
   the space above the hero heading was tightened up (per an earlier
   request to "lose nearly all the spacing"), the oversized logo
   started landing directly on top of the hero heading text instead
   of sitting cleanly above it. Sized to fit inside the header band
   here instead, so it can't collide with anything below it; the
   hero's own faded "&" watermark (above) is what now provides the
   large background flourish behind the hero text. ---- */
body.has-hero .site-header {
  position: relative;
  z-index: 20;
}
body.has-hero .site-header .container { position: relative; }
body.has-hero nav.main-nav,
body.has-hero .nav-toggle { margin-left: auto; }

body.has-hero .logo-wrap {
  position: relative;
  z-index: 5;
  display: block;
}
body.has-hero .logo-wrap img {
  height: 84px !important;
  width: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
  position: relative;
  z-index: 2;
}
/* Soft ambient glow halo behind the logo, breathing gently. Muted on
   purpose — an earlier brighter version read as "turned the
   brightness up", this one should feel like a quiet shimmer. */
body.has-hero .logo-wrap::before {
  content: "";
  position: absolute;
  inset: -20px -26px;
  background: radial-gradient(circle, rgba(201,163,95,0.55) 0%, rgba(201,163,95,0.18) 45%, transparent 75%);
  filter: blur(18px);
  z-index: 1;
  pointer-events: none;
  animation: logo-glow-breathe 3.6s ease-in-out infinite;
}
@keyframes logo-glow-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.06); }
}
/* Twinkle: a narrow light band sweeps across the logo every few
   seconds, clipped tightly to the image so it reads as a glint, not a
   flash. */
.logo-shine {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
}
body.has-hero .logo-shine::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -40%;
  width: 28%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%);
  transform: translateX(-10%) skewX(-18deg);
  opacity: 0;
  animation: logo-twinkle-sweep 4.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes logo-twinkle-sweep {
  0% { transform: translateX(-30%) skewX(-18deg); opacity: 0; }
  6% { opacity: 0.9; }
  28% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}
@media (max-width: 900px) {
  body.has-hero .logo-wrap img { height: 64px !important; }
}
@media (max-width: 600px) {
  body.has-hero .logo-wrap img { height: 56px !important; }
  body.has-hero .site-header { padding: 10px 0; }
}

/* ---- Pass 14: hero quick-enquiry form, testimonials, areas-we-cover block ---- */
.hero-quick-form {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 16px 18px 18px;
  margin-bottom: 16px;
}
.hero-quick-form h3 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px;
  font-weight: 600;
  font-family: var(--font-body);
}
.hero-quick-form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.hero-quick-form input {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  padding: 9px 12px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13.5px;
}
.hero-quick-form-postcode { margin-bottom: 10px; }
.hero-quick-form input::placeholder { color: rgba(255,255,255,0.65); }
.hero-quick-form input:focus { outline: none; border-color: var(--brass-light); background: rgba(255,255,255,0.16); }
.hero-quick-form-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--brass) 0%, #8e6c30 100%);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 11px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-quick-form-btn:hover { background: linear-gradient(135deg, #b4904f 0%, #7c5e29 100%); transform: translateY(-1px); }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 8px;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 22px 24px;
}
.testimonial-stars { color: var(--brass); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.testimonial-card p { font-size: 14px; color: var(--text-grey); font-style: italic; margin: 0 0 14px; line-height: 1.55; }
.testimonial-author { font-weight: 600; font-size: 13.5px; color: var(--heading); }
.testimonial-author span { display: block; font-weight: 400; font-size: 12px; color: var(--text-grey); margin-top: 2px; }

.areas-grid { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.areas-photo { flex: 1 1 360px; min-width: 0; }
.areas-photo img { width: 100%; height: 320px; object-fit: cover; border-radius: 4px; box-shadow: 0 20px 40px rgba(26,21,18,0.12); }
.areas-grid > div:last-child { flex: 1 1 380px; min-width: 0; }
.areas-intro { color: var(--text-grey); margin: 10px 0 14px; }
.areas-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 20px; padding: 0; margin: 0 0 16px; }
.areas-list li a { font-weight: 600; color: var(--purple); }
.areas-list li a:hover { text-decoration: underline; }
.areas-note { font-size: 13.5px; color: var(--text-grey); }

@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: 1fr; }
  .areas-list { grid-template-columns: 1fr; }
}



/* Enquiry forms (js/forms.js) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-status:empty { display: none; }
.form-status { margin-top: 14px; padding: 14px 16px; border-radius: 6px; font-size: 15px; line-height: 1.5; text-align: left; }
.form-status--ok { background: #eef6ef; border: 1px solid #b9d9bd; color: #1f4a26; }
.form-status--error { background: #fbefee; border: 1px solid #e6c1bd; color: #6b231c; }
.form-status a { color: inherit; font-weight: 600; text-decoration: underline; }
.hero-quick-form .form-status { flex-basis: 100%; }