/* ================================
   D&P CARPET CLEANING SERVICES
   Premium palette — black + gold (matched to emblem logo)
   ================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand palette — black + gold, matched to the D&P emblem logo.
     Variable names kept from the base template; values re-skinned. */
  --green-deep: #141414;   /* rich black (headings/primary) */
  --green-dark: #0a0a0a;   /* near-black                    */
  --green-forest: #A87E16; /* deep gold (links/icons on light) */
  --green-sage: #D9C079;   /* light gold                    */
  --green-light: #F5C518;  /* bright gold (on-dark accent)  */
  --earth-brown: #A87E16;
  --earth-warm: #E2B007;
  --earth-light: #F5C518;  /* bright gold (nav/logo accent) */
  --accent-warm: #E2B007;  /* gold (CTAs)                   */
  --accent-warm-dark: #C99A06;
  --gold: #F5C518;
  --cream: #FAF8F2;
  --cream-dark: #F1EAD7;
  --white: #ffffff;
  --off-white: #FAF8F3;
  --gray: #6b7280;
  --gray-light: #9ca3af;
  --gray-dark: #374151;
  --text: #1f2937;
  --text-light: #4b5563;
  --border: rgba(0,0,0,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

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

/* ================================
   ANIMATIONS
   ================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   NAV
   ================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0);
  transition: all 0.4s ease;
}

.nav.scrolled {
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.3px;
}

.nav-logo-img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.nav-logo-text span {
  color: var(--earth-light);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--earth-light);
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--earth-light);
  transition: color 0.2s;
}

.nav-phone svg {
  flex-shrink: 0;
}

.nav-phone:hover {
  color: var(--white);
}

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s;
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 13, 13, 0.98);
  backdrop-filter: blur(20px);
  z-index: 999;
  padding: 32px 24px;
  flex-direction: column;
  gap: 0;
}

.mobile-menu.open {
  display: flex;
}

.mobile-link {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.2s;
}

.mobile-link:hover {
  color: var(--green-light);
}

.mobile-phone {
  color: var(--green-light) !important;
  margin-top: 16px;
  font-weight: 700 !important;
  border: none !important;
}

/* ================================
   HERO
   ================================ */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px 24px 80px;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(10,10,10,0.86) 0%, rgba(15,15,15,0.78) 45%, rgba(20,20,20,0.82) 100%),
    url('images/hero.jpg') center/cover no-repeat;
  background-color: #0d0d0d;
}

.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroKenBurns 21s infinite;
  will-change: opacity, transform;
}

.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 7s; }
.hero-slide:nth-child(3) { animation-delay: 14s; }

@keyframes heroKenBurns {
  0%   { opacity: 0; transform: scale(1.05); }
  4%   { opacity: 1; }
  33%  { opacity: 1; transform: scale(1.15); }
  38%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.05); }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, transparent 0%, rgba(10,10,10,0.45) 100%);
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 2;
  opacity: 0.5;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  animation: fadeUp 0.8s ease forwards;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(245, 197, 24, 0.12);
  border: 1px solid rgba(245, 197, 24, 0.35);
  color: var(--green-light);
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  margin-bottom: 28px;
}

.hero-badge svg {
  flex-shrink: 0;
}

.hero h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 68px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--white);
  margin-bottom: 24px;
}

.hero h1 span {
  color: var(--green-light);
}

.hero p {
  font-size: 19px;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================
   BUTTONS
   ================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--gold);
  color: #141414;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(245, 197, 24, 0.3);
}

.btn-primary:hover {
  background: #ffd633;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245, 197, 24, 0.45);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}

.btn-outline:hover {
  border-color: var(--green-light);
  color: var(--green-light);
  transform: translateY(-2px);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* ================================
   SECTIONS
   ================================ */
.section {
  padding: 74px 0;
}

.section-alt {
  background: var(--off-white);
}

/* Dark section — full-bleed forest green */
.section-dark {
  background: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.section-dark .container {
  position: relative;
  z-index: 1;
}

.section-dark .section-label {
  color: var(--accent-warm);
}

.section-dark .section-title {
  color: var(--white);
}

.section-dark .accent {
  color: var(--accent-warm);
}

.section-dark .section-sub {
  color: rgba(255,255,255,0.7);
}

/* Standardised section intro: label / title / subtitle centred,
   body content below stays left-aligned. */
.section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-warm);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 12px;
  text-align: center;
}

.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 44px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -1px;
  text-align: center;
}

.accent {
  color: var(--accent-warm);
}

.section-sub {
  font-size: 17px;
  color: var(--gray);
  max-width: 600px;
  line-height: 1.7;
  margin: 0 auto 48px;
  text-align: center;
}

/* ================================
   ABOUT
   ================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  margin-top: 40px;
}

.about-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  min-height: 320px;
}
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .about-image { min-height: 0; height: 240px; }
}

.about-text p {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 16px;
}

.about-text strong {
  color: var(--text);
}

.about-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.highlight-card {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all 0.3s;
}

.highlight-card:hover {
  border-color: rgba(45, 95, 45, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.highlight-icon {
  margin-bottom: 12px;
  color: var(--green-deep);
}

.highlight-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.highlight-card p {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
}

/* ================================
   SERVICES
   ================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.service-card {
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent-warm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card:hover {
  border-color: rgba(245, 197, 24, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-icon {
  margin-bottom: 14px;
  color: var(--green-deep);
  transition: color 0.3s ease;
}

.service-card:hover .service-icon {
  color: var(--accent-warm);
}

/* Also available — pill list */
.services-also {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px dashed rgba(0,0,0,0.12);
  text-align: center;
}

.services-also-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-right: 10px;
  vertical-align: middle;
}

.service-pill {
  display: inline-block;
  padding: 8px 16px;
  margin: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
  transition: all 0.25s ease;
  vertical-align: middle;
}

.service-pill:hover {
  border-color: var(--accent-warm);
  color: var(--accent-warm);
  transform: translateY(-2px);
}

.service-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.service-card p {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.6;
}

/* ================================
   PROJECTS
   ================================ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.project-card {
  position: relative;
  background: var(--off-white);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.2);
}

.project-info h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.2px;
}

.project-info p {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}

/* ================================
   WHY CHOOSE US
   ================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px;
}

.why-card {
  text-align: center;
  padding: 26px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}

.why-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(245, 197, 24, 0.4);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}

.why-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 197, 24, 0.15);
  border: 1px solid rgba(245, 197, 24, 0.3);
  border-radius: 50%;
  margin: 0 auto 14px;
  color: var(--accent-warm);
}
.why-icon svg { width: 26px; height: 26px; }

.why-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.why-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

/* ================================
   CONTACT
   ================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  margin-top: 8px;
}

.contact-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-content: start;
}

.contact-card {
  padding: 24px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.contact-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.contact-card h3 svg {
  color: var(--green-deep);
  flex-shrink: 0;
}

.contact-card p,
.contact-card a {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
  display: block;
}

.contact-card a:hover {
  color: var(--green-deep);
}

.contact-form-wrap {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}

.contact-form-wrap h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(45, 95, 45, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--gray-light);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-success {
  text-align: center;
  padding: 40px 20px;
}

.success-icon {
  color: #22c55e;
  margin-bottom: 16px;
}

.form-success h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  margin-bottom: 8px;
}

.form-success p {
  color: var(--gray);
  font-size: 15px;
}

/* ================================
   FOOTER
   ================================ */
.footer {
  background: var(--green-dark);
  padding: 60px 0 30px;
  color: rgba(255,255,255,0.7);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.footer-logo span {
  color: var(--green-light);
}

.footer-brand p {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-bottom: 16px;
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.footer-col a,
.footer-col p {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: var(--green-light);
}

.footer-bottom {
  padding-top: 24px;
  text-align: center;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255,255,255,0.3);
}

.footer-powered {
  text-align: center;
  padding: 16px 0 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.75rem;
  opacity: 0.5;
  color: rgba(255,255,255,0.7);
}

.footer-powered a {
  color: inherit;
  text-decoration: underline;
}

.footer-powered a:hover {
  color: var(--green-light);
}

/* ================================
   STATS BAR
   ================================ */
.stats-bar {
  background: #1a1a1a;
  padding: 0;
}

.stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 22px 16px;
}

.stat-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ================================
   PROJECT IMAGES
   ================================ */
.project-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.1);
}

.project-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 20, 10, 0.92) 0%,
    rgba(10, 20, 10, 0.55) 35%,
    rgba(10, 20, 10, 0.1) 65%,
    transparent 100%
  );
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.project-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 22px;
  z-index: 2;
  transform: translateY(8px);
  transition: transform 0.4s ease;
}

.project-card:hover .project-info {
  transform: translateY(0);
}

.project-info::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent-warm);
  margin-bottom: 12px;
  transform-origin: left;
  transform: scaleX(0.6);
  transition: transform 0.4s ease;
}

.project-card:hover .project-info::before {
  transform: scaleX(1);
}

/* ================================
   TESTIMONIALS
   ================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  position: relative;
  transition: all 0.3s;
}

.testimonial-card:hover {
  border-color: rgba(45, 95, 45, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.testimonial-quote {
  color: var(--green-deep);
  margin-bottom: 8px;
}

.testimonial-text {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonial-author strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.testimonial-author span {
  font-size: 13px;
  color: var(--gray);
}

.testimonial-author span::before {
  content: '|';
  margin-right: 8px;
  color: var(--border);
}

.reviews-cta {
  text-align: center;
  margin-top: 36px;
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .nav-links, .nav-phone { display: none; }
  .hamburger { display: block; }

  .hero { min-height: auto; padding: 140px 20px 80px; }
  .hero h1 { font-size: 44px; }
  .hero p { font-size: 17px; }

  .section-title { font-size: 34px; }
  .section { padding: 72px 0; }

  .stats-inner { flex-wrap: wrap; }
  .stat-item { flex: 1 1 45%; }
  .stat-divider { display: none; }

  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-highlights { grid-template-columns: 1fr 1fr; }

  .services-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 36px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .btn { width: 100%; justify-content: center; }
  .about-highlights { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }

  .stats-inner { flex-direction: column; gap: 0; }
  .stat-item { flex: 1 1 100%; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .stat-item:last-child { border-bottom: none; }
  .stat-value { font-size: 14px; }
}

/* ========== CRITICAL MOBILE FIX ========== */
html, body { overflow-x: hidden; }

@media (max-width: 768px) {
    body { font-size: 15px; }
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.5rem !important; }
    .hero { min-height: 80vh; padding: 100px 20px 60px; }
    .hero p { font-size: 0.95rem; }
    .section { padding: 60px 0; }

    .services-grid,
    .projects-grid,
    .why-grid,
    .testimonials-grid,
    .about-grid,
    .about-highlights,
    .contact-grid,
    .footer-inner {
        grid-template-columns: 1fr !important;
    }

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

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .nav-links, .nav-phone { display: none; }
    .hamburger { display: block !important; }

    iframe { width: 100% !important; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.7rem !important; }
    h2 { font-size: 1.3rem !important; }
    .container { padding: 0 16px; }
    .hero { padding: 90px 16px 50px; }
}

/* ================================
   NAV LOGO IMAGE
   ================================ */
.nav-logo-img {
  /* A second rule for the same element, overriding the 46px one above — left
     as it was, because the header is laid out around 55px.

     The white backing is gone. It was here for a logo that needed lifting off
     the dark header; the badge brings its own dark disc and yellow ring, so a
     white circle behind it only added a ring that looked like a mistake. */
  height: 55px;
  width: 55px;
  object-fit: contain;
  transition: all 0.4s ease;
}

/* ================================
   HERO LOGO
   ================================ */
.hero-logo {
  width: 200px;
  height: auto;
  margin: 0 auto 28px;
  border-radius: 8px;
  display: block;
}

/* ================================
   FOOTER LOGO IMAGE
   ================================ */
.footer-logo-img {
  height: 50px;
  width: auto;
  margin-bottom: 12px;
  border-radius: 4px;
}

/* ================================
   AREAS WE COVER
   ================================ */
.areas-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  margin-top: 32px;
  align-items: stretch;
}

.areas-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  min-height: 440px;
  background: var(--off-white);
}

.areas-map iframe {
  display: block;
  filter: saturate(0.9);
}

.areas-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
}

.areas-info h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 18px;
}

.areas-county-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 24px;
  list-style: none;
  padding: 0;
}

.areas-county-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.areas-county-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent-warm);
  border-radius: 50%;
  flex-shrink: 0;
}

.areas-note {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.areas-note a {
  color: var(--accent-warm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.areas-note a:hover {
  color: var(--accent-warm-dark);
}

@media (max-width: 768px) {
  .areas-grid { grid-template-columns: 1fr; gap: 24px; }
  .areas-map { min-height: 300px; }
}

/* ================================
   FAQ ACCORDION
   ================================ */
.faq-list {
  max-width: 750px;
  margin: 48px auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  gap: 16px;
}

.faq-question:hover {
  color: var(--green-deep);
}

.faq-chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--gray);
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-answer {
  max-height: 200px;
}

.faq-answer p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.7;
  padding-bottom: 20px;
}

/* ================================
   NEW SECTIONS RESPONSIVE
   ================================ */
@media (max-width: 768px) {
  .faq-list { max-width: 100%; }
}

@media (max-width: 480px) {
  .hero-logo { width: 110px; }
}

/* ================================
   CTA BAND
   ================================ */
.cta-band {
  background: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 60%, #1c1c1c 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.18) 0%, transparent 65%);
  pointer-events: none;
}

.cta-band::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -15%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(168, 213, 162, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.cta-band-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}

.cta-band-text h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 40px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.cta-band-text p {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  max-width: 480px;
}

.cta-band-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cta-band { padding: 60px 0; }
  .cta-band-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .cta-band-text p { margin: 0 auto; }
  .cta-band-actions { justify-content: center; }
  .cta-band-text h2 { font-size: 30px; }
}

/* ================================
   D&P ADDITIONS
   ================================ */

/* Logo placements */
.hero-logo {
  width: 132px;
  height: 132px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}
.footer-emblem {
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
}

/* Hero trust row */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 32px;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.hero-trust svg { color: var(--green-light); flex-shrink: 0; }

/* WhatsApp button */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  gap: 8px;
}
.btn-whatsapp:hover { background: #1da851; }

/* Results / before-after gallery — masonry so photos show full */
/*
  A grid, not CSS columns.

  `columns: 3` is masonry: it fills top-to-bottom, one column at a time, and
  every tile keeps its own height. With mixed portrait and landscape photos
  that reads as a ragged pile rather than a gallery, and the reading order runs
  down each column instead of across.
*/
/*
  Columns, not a grid.

  It was a 3-column grid of fixed 4:5 tiles, with the two tall photos spanning
  two rows. Two problems followed from that and both were visible: a span-2
  item is never exactly two rows tall, so the packing left holes down the
  right-hand side and under the last row — and every photo that was not 4:5
  got cropped to fit, which on a before-and-after is the words "Before" and
  "After" trimmed off the edge.

  Columns solve both. Each photo keeps its own shape, nothing is cropped,
  nothing has to be told its ratio, and the next phone photo dropped in here
  works whatever shape it is. The only cost is that it reads down the columns
  rather than across, which for a gallery nobody minds.
*/
.results-masonry {
  columns: 3;
  column-gap: 20px;
  margin-top: 12px;
}
.result-item {
  /* Whatever shape the photo is. break-inside keeps a picture and its
     caption together when the column breaks. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 20px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(20,20,20,0.08);
}
.result-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(20,20,20,0.22);
}
.result-item img {
  width: 100%;
  height: auto;
  display: block;
}

/*
  Two of these are before/after split TOP to BOTTOM rather than side to side,
  so cropping their height would cut the comparison in half and leave a photo
  that proves nothing. They take a double-height cell instead and stay whole.
*/
/* is-tall and is-wide are left in the markup but do nothing now — every
   photo is its own size. */
.result-item.is-tall {}
/* And one is a wide scene shot rather than a before/after. */
.result-item.is-wide {}

/*
  The caption sits over the foot of the picture rather than under it. With a
  fixed-ratio tile there is no room beneath, and a gradient keeps it readable
  whatever the photo does.
*/
.result-item { position: relative; }
.result-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(10,10,10,.82), rgba(10,10,10,0));
  color: #fff;
}
.result-item figcaption {
  padding: 26px 16px 12px;
  font-size: 14px;
  font-weight: 600;
}
.results-note {
  text-align: center;
  margin-top: 28px;
  color: var(--text-light);
  font-size: 15px;
}
.results-note a { color: var(--green-forest); font-weight: 600; }
.results-note a:hover { text-decoration: underline; }

/* Process steps */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.process-step {
  text-align: center;
  padding: 8px;
}
.process-num {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-warm);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(249,115,22,0.35);
}
.process-step h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.process-step p {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  line-height: 1.6;
}

/* Testimonial stars */
.testimonial-stars {
  color: #F5A623;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

/* Postcodes */
.postcode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 20px;
}
.postcode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 700;
  color: var(--green-deep);
  box-shadow: 0 2px 8px rgba(20,20,20,0.06);
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(20,20,20,0.07);
}
.price-card--featured {
  border: 1px solid rgba(245,197,24,0.6);
  box-shadow: 0 18px 44px rgba(20,20,20,0.16);
  transform: translateY(-6px);
}
.price-card h3 {
  padding-bottom: 16px;
  border-bottom: 2px solid var(--cream-dark);
}
.price-card .price-list { flex: 1; }
.price-badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--accent-warm);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
}
.price-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: 18px;
}
.price-list { margin-bottom: 4px; }
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 15px;
  color: var(--text);
}
.price-list li:last-child { border-bottom: none; }
.price-list .price {
  font-weight: 700;
  color: var(--green-forest);
  white-space: nowrap;
}
.price-note {
  font-size: 13px;
  color: var(--text-light);
  margin: 14px 0 18px;
}
.price-card .btn { margin-top: 4px; }

/* Educational "why clean" cards */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.edu-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--green-forest);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 6px 20px rgba(20,20,20,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.edu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20,20,20,0.12);
}
.edu-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--cream-dark);
  color: var(--green-forest);
  margin-bottom: 16px;
}
.edu-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: 10px;
}
.edu-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-light);
}

/* Social icon rows */
.contact-socials {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}
.contact-socials a,
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: all 0.25s ease;
}
.contact-socials a {
  background: var(--cream-dark);
  color: var(--green-deep);
}
.contact-socials a:hover {
  background: var(--green-forest);
  color: #fff;
  transform: translateY(-2px);
}
.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.footer-socials a {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}
.footer-socials a:hover {
  background: var(--accent-warm);
  color: #fff;
}

/* Floating WhatsApp button */
.whatsapp-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 998;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(37,211,102,0.45);
}

@media (max-width: 900px) {
  .results-masonry { columns: 2; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .edu-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .results-masonry { columns: 1; }
  .edu-grid { grid-template-columns: 1fr; }
  .whatsapp-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; }
}

/* ================================
   CAROUSEL DOTS (desktop hidden)
   ================================ */
.carousel-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(20,20,20,0.18);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.carousel-dots button.active {
  background: var(--accent-warm);
  transform: scale(1.25);
}
.section-alt .carousel-dots button { background: rgba(20,20,20,0.18); }

/* ================================
   IMAGE BREAKER (full-bleed photo band)
   ================================ */
.image-breaker {
  position: relative;
  min-height: clamp(300px, 42vw, 480px);
  background: url('images/action-grey.jpg') center / cover no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.image-breaker-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(12,16,22,0.5), rgba(12,16,22,0.62));
}
.image-breaker-text {
  position: relative;
  z-index: 1;
  color: #fff;
  max-width: 720px;
  padding: 0 24px;
}
.image-breaker-kicker {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-warm);
  margin-bottom: 12px;
}
.image-breaker-text h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 12px;
}
.image-breaker-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}
.image-breaker--commercial {
  background-image: url('images/comm-office.jpg');
}

/* Guarantee band (dark, centred) */
.guarantee-band { text-align: center; }
.guarantee-band .section-label { display: inline-block; }
.guarantee-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 8px auto 14px;
  max-width: 720px;
}
.guarantee-sub {
  color: rgba(255,255,255,0.75);
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 28px;
}
@media (max-width: 768px) {
  .image-breaker { background-attachment: scroll; min-height: 320px; }
}

/* ================================
   MOBILE SWIPE CAROUSELS
   (testimonials + results — scroll-snap)
   ================================ */
@media (max-width: 768px) {
  .testimonials-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 6px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }

  .testimonial-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
    margin: 0;
  }

  .carousel-dots { display: flex; }
}

/* Sticky mobile call bar — keeps the number big + tap-to-call on phones */
.call-bar { display: none; }
@media (max-width: 768px) {
  .call-bar {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: var(--accent-warm); color: #171717;
    font-weight: 800; font-size: 17px; letter-spacing: .01em;
    padding: 15px 16px; text-decoration: none;
    box-shadow: 0 -6px 22px rgba(0,0,0,0.30);
  }
  .call-bar svg { width: 20px; height: 20px; }
  .whatsapp-fab { bottom: 82px; }
  body { padding-bottom: 60px; }
}

/* ===== Policy pages (privacy) =====
   One readable column on the cream ground. The nav is position:fixed and
   carries `scrolled` from the start on these pages, so the top padding here
   is clearing it rather than decoration. */
.policy {
  padding: 130px 0 80px;
  background: var(--cream);
}
.policy-eyebrow {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-forest);
  margin: 0 0 12px;
}
.policy h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(34px, 5.5vw, 48px);
  line-height: 1.08;
  color: var(--green-deep);
  margin: 0 0 16px;
}
.policy-lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--gray);
  max-width: 62ch;
  margin: 0 0 44px;
}
.policy-body { max-width: 68ch; }
.policy-body h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 21px;
  color: var(--green-deep);
  margin: 36px 0 10px;
}
.policy-body h2:first-child { margin-top: 0; }
.policy-body p {
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 14px;
}
.policy-body a {
  color: var(--green-forest);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policy-body a:hover { color: var(--green-deep); }
.policy-updated {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--cream-dark);
  font-size: 14px;
  color: var(--gray);
}

/* The two halves of the coverage list: London's own postcodes, then the
   counties around it. Labelled, because twenty pills in one block reads as
   a wall rather than as "everywhere". */
.postcode-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray, #6b6b6b);
    margin: 18px 0 8px;
}
.postcode-label:first-of-type { margin-top: 14px; }

/* The gallery's "show all" on phones. Six photos, then the rest on request —
   fifteen in one column is nine screens of scrolling. */
.results-masonry.is-clipped .result-item:nth-child(n+7) { display: none; }
.results-more {
  display: block;
  margin: 4px auto 0;
  padding: 12px 26px;
  font: inherit;
  font-weight: 700;
  color: var(--ink, #141414);
  background: transparent;
  border: 1px solid rgba(20,20,20,.18);
  border-radius: 999px;
  cursor: pointer;
}
.results-more:hover { border-color: var(--accent, #F5C518); }
.results-more[hidden] { display: none; }