/* =========================
   Base
========================= */
:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #e5e7eb;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --shadow-soft: 0 6px 18px rgba(2, 6, 23, 0.06);

  /* Surrey brand (from logo) */
  --brand: #A88868;
  --brand-dark: #8f7359;

  /* Buttons / CTA */
  --btn: #A88868;
  --btn-text: #ffffff;

  --radius: 18px;
  --radius-sm: 12px;

  --gold: #f4b400; /* gold stars */
}

*{ box-sizing:border-box; }
html, body{ padding:0; margin:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

/* Default image rule (safe — overridden where we crop) */
img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

/* =========================
   Sitewide typography spacing (premium + uniform)
========================= */
p{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.section-header p:last-child,
.card p:last-child{
  margin-bottom: 0;
}

ul, ol{
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--muted);
}

li{
  margin: 0 0 10px;
  line-height: 1.6;
}

h1{ margin: 0 0 14px; font-size: 40px; line-height:1.15; letter-spacing:-0.02em; }
h2{ margin: 0 0 14px; font-size: 38px; line-height:1.15; color: var(--brand); }
h3{ margin: 0 0 10px; font-size: 18px; line-height:1.25; color: var(--text); }

strong{
  color: var(--text);
  font-weight: 800;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* =========================
   PREMIUM HEADER
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.header-inner{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto;
  padding: 14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.header-logo{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.logo-img{
  height: 44px;
  width:auto;
  max-width: 220px;
  display:block;
}

.logo-text{
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Nav layout */
.header-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 18px;
  flex-wrap: nowrap;
}

/* Nav text */
.header-nav .nav-link,
.nav-dropdown-summary{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #111;
  text-decoration:none;
}

.header-nav .nav-link:hover{
  opacity: 0.85;
}

/* Dropdown (details/summary) */
.nav-dropdown{
  position: relative;
}

.nav-dropdown-summary{
  list-style: none;
  cursor: pointer;
}

.nav-dropdown summary::-webkit-details-marker{ display:none; }

/* Chevron polish + rotate when open */
.nav-dropdown-summary:after{
  content: "▾";
  margin-left: 8px;
  font-size: 12px;
  opacity: 0.75;
  display: inline-block;
  transform: translateY(-1px);
  transition: transform 180ms ease, opacity 180ms ease;
}
.nav-dropdown[open] .nav-dropdown-summary:after{
  transform: translateY(-1px) rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.nav-dropdown .dropdown{
  position: absolute;
  top: calc(100% + 14px);

  /* Center under label */
  left: 50%;
  transform: translateX(-50%);

  min-width: 320px;
  max-width: 360px;
  padding: 10px;
  border-radius: 16px;

  background: rgba(15, 15, 16, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(168,136,104,0.22);
  box-shadow: 0 18px 50px rgba(0,0,0,0.24);

  display: none;
  z-index: 99999;
}

.nav-dropdown[open] .dropdown{ display:block; }

/* Dropdown links */
.dropdown-link{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 12px;
  border-radius: 12px;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;

  color: #fff !important;
  background: transparent;

  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.dropdown-link + .dropdown-link{
  margin-top: 6px;
}

.dropdown-link:hover{
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

/* Subtle Surrey dot */
.dropdown-link::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(168,136,104,0.9);
  box-shadow: 0 0 0 3px rgba(168,136,104,0.16);
  flex: 0 0 auto;
  opacity: 0.95;
}

/* CTA */
.nav-cta{
  background: var(--brand);
  color: var(--btn-text) !important;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}

.nav-cta:hover{ background: var(--brand-dark); }

/* Mobile header wrap */
@media (max-width: 980px){
  .header-inner{
    flex-wrap: wrap;
    padding: 12px 0;
  }
  .header-nav{
    width:100%;
    justify-content:flex-start;
    flex-wrap: wrap;
    gap: 12px 16px;
  }
}

/* Mobile dropdown sizing */
@media (max-width: 640px){
  .nav-dropdown .dropdown{
    width: calc(100vw - 24px);
    max-width: 360px;
    min-width: 0;
  }
}

/* =========================
   Layout helpers
========================= */
.section{ padding: 56px 0; }

.section-header{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto 22px auto;
}

.hero,
.section{ background: transparent; }

.cards-grid,
.includes-grid,
.mid-strip-grid,
.reviews-grid{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}

.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 980px){
  h1{ font-size: 34px; }
  h2{ font-size: 32px; }
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .section{ padding: 44px 0; }
  .cards-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: var(--shadow-soft);
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--btn); color: var(--btn-text); }
.btn-primary:hover{ background: var(--brand-dark); }
.btn-outline{
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover{ box-shadow: var(--shadow); }

/* =========================
   Hero (Premium crop system)
========================= */
.hero{ padding: 48px 0 28px 0; }

.hero-inner{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
}

.hero-subtitle{
  margin-top: 10px;
  font-size: 18px;
  color: var(--muted);
}

.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero-media{ margin-top: 24px; }

/* Crop box */
.hero-image{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 16 / 10;
}

/* Both slides fill & crop */
.hero-image > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fade for slide 2 (location.php) */
#hero-slide-2{
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-trust{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.trust-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}

.trust-stars{ color: var(--gold); letter-spacing: 2px; }

/* Hen Party Life Drawing: give image more space + taller hero */
.hero-inner--life{
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
}
.hero-inner--life .hero-image{
  aspect-ratio: 4 / 5;
}

/* Responsive hero */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-image{ aspect-ratio: 16 / 11; }
  .hero-inner--life .hero-image{ aspect-ratio: 16 / 11; }
}

/* =========================
   Card base
========================= */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.card p{ color: var(--muted); }

.service-card h3{ margin-bottom: 10px; }
.card-click{ display:block; }
.card-link{
  display:inline-block;
  margin-top: 10px;
  font-weight: 800;
  color: var(--brand);
}

/* Card media (addons) */
.has-media .card-media{
  margin: -22px -22px 16px -22px;
  overflow:hidden;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.has-media .card-media img{ width:100%; height:auto; display:block; }

/* =========================
   Includes / checklist grid
========================= */
.includes-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.include-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: var(--shadow-soft);
}
.include-icon{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(168, 136, 104, 0.12);
  color: var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  flex: 0 0 auto;
}
.include-text{ color: var(--text); font-weight: 600; }

@media (max-width: 980px){
  .includes-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .includes-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Mid image strip (Premium tiles)
========================= */
.mid-strip-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Tile is the crop box */
.mid-strip-item{
  position: relative;
  overflow:hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background:#fff;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Image fills tile */
.mid-strip-item img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Mobile: stack strip + slightly taller */
@media (max-width: 980px){
  .mid-strip-grid{ grid-template-columns: 1fr !important; }
  .mid-strip-item{ aspect-ratio: 16 / 10; }
}

/* =========================
   Reasons list (Surrey branded)
========================= */
.reasons-list{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.reasons-list li{
  background: #fff;
  border: 1px solid rgba(168,136,104,0.18);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  font-weight: 650;
  color: var(--text);
  position: relative;
  padding: 12px 14px 12px 52px;
}

/* Hide the ✅ in HTML list items */
.reasons-list li{
  text-indent: -18px;
  padding-left: 52px;
}
.reasons-list li::first-letter{ opacity: 0; }

.reasons-list li::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(168,136,104,0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A88868'%3E%3Cpath d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size: 16px 16px;
}

@media (max-width: 640px){
  .reasons-list{ grid-template-columns: 1fr; }
}

/* =========================
   Chips (Areas) + PIN
========================= */
.chips{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px 10px 38px; /* left padding for pin */
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow-soft);
  font-weight: 750;
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.chip:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.chip::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-repeat:no-repeat;
  background-position:center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A88868' d='M12 2c-3.314 0-6 2.686-6 6 0 4.5 6 14 6 14s6-9.5 6-14c0-3.314-2.686-6-6-6zm0 8.5A2.5 2.5 0 1 1 12 5.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* =========================
   Phone line
========================= */
.phone-line{
  margin-top: 14px;
  color: var(--muted);
}
.phone-line a{
  font-weight: 800;
  color: var(--brand);
}

/* =========================
   Reviews: Google-style
========================= */
.reviews-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
}
.reviews-summary{ margin-top: 10px; }

.reviews-summary-title{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 6px;
}

.reviews-summary-line{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);
}

.reviews-summary-stars{
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--gold);
}

.reviews-grid--google{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.review-card--google{
  padding: 22px;
  position: relative;
}

.google-top{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.google-stars{
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--gold);
}

.review-text--google{
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 18px 0;
}

.google-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-top: 8px;
}

.google-name strong{
  font-size: 22px;
  color: var(--text);
}

.google-meta{
  margin-top: 4px;
  font-size: 18px;
  color: var(--muted);
}

.google-avatar{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #0b57d0;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 20px;
  flex: 0 0 auto;
}

@media (max-width: 980px){
  .reviews-grid--google{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .reviews-grid--google{ grid-template-columns: 1fr; }
  .reviews-summary-title{ font-size: 20px; }
}

/* =========================
   FAQ (Premium open state)
========================= */
.faq-list{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  display:grid;
  gap: 12px;
}

.faq-item{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 6px 14px;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.faq-item summary{
  cursor: pointer;
  padding: 12px 0;
  font-weight: 850;
  color: var(--text);
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display:none; }

.faq-answer{
  padding: 0 0 14px 0;
  color: var(--muted);
}

/* Open state */
.faq-item[open]{
  border-color: rgba(168,136,104,0.55);
  background: rgba(168,136,104,0.08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.10);
}
.faq-item[open] summary{ color: var(--brand); }

/* =========================
   CTA strip
========================= */
.cta-strip{ padding-bottom: 72px; }

.cta-strip-inner{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.cta-strip-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .cta-strip-inner{ flex-direction: column; align-items:flex-start; }
}

/* =========================
   Small polish
========================= */
.section-header p{ font-size: 18px; }

/* =========================
   PRICES section fix (layout + text wrapping)
========================= */
.section.prices .cards-grid{ grid-template-columns: 1fr; }

.section.prices .includes-grid{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.section.prices .include-item{
  align-items: center;
  min-height: 64px;
}

.section.prices .include-text{
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1.25;
}

.section.prices .include-icon{
  background: rgba(168,136,104,0.14);
  color: var(--brand);
  width: 28px;
  height: 28px;
  font-size: 16px;
}

/* =========================
   Links (make internal links visible + premium)
========================= */
.section-header a,
.location-body a,
.card a,
.faq-answer a{
  color: var(--brand);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(168,136,104,0.35);
}

.section-header a:hover,
.location-body a:hover,
.card a:hover,
.faq-answer a:hover{
  color: var(--brand-dark);
  text-decoration-color: rgba(168,136,104,0.6);
}

/* =========================
   Footer (Surrey brand - WHITE)
========================= */
.site-footer{
  margin-top: 56px;
  background: #ffffff;
  color: var(--text);
  border-top: 1px solid rgba(0,0,0,0.08);
}

.site-footer a{
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
}

.site-footer a:hover{
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-inner{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding: 56px 0 22px;
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 44px;
  align-items: start;
}

.footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.footer-logo-img{
  height: 52px;
  width: auto;
  display: block;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}

.footer-logo-text{
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 20px;
  color: var(--text);
}

.footer-tagline{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.footer-nap .footer-contact-line{
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.footer-nap .footer-contact-line strong{
  color: var(--brand);
  font-weight: 900;
}

.footer-columns{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}

.footer-col h3{
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 900;
  color: var(--brand);
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer-links li{ margin: 0; }

.footer-links a{
  color: var(--text);
  font-weight: 750;
}

.footer-links a:hover{
  color: var(--brand-dark);
}

.footer-bottom{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 18px 0 28px;
}

.footer-bottom p{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  color: var(--brand);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 800;
}

.footer-bottom .footer-small{
  margin-top: 6px;
  color: var(--brand-dark);
  font-weight: 700;
}

@media (max-width: 980px){
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 44px 0 18px;
  }
  .footer-columns{
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

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

/* =========================================
   MOBILE IMAGE PREMIUM FIX (Hero + Mid Strips)
========================================= */

@media (max-width: 900px){

  .hero-inner,
  .section-header,
  .mid-strip-grid,
  .chips,
  .faq-list,
  .reasons-list,
  .cta-strip-inner,
  .reviews-grid{
    width: calc(100% - 24px) !important;
  }

  .hero-image{
    aspect-ratio: 16 / 12 !important;
    border-radius: 16px;
  }

  .hero-image > img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .mid-strip-item{
    aspect-ratio: 16 / 11 !important;
    border-radius: 16px;
  }

  .mid-strip-item img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* =========================================
   FORCE HERO + MID IMAGES TO FILL (NO WHITE FRAME)
========================================= */

.hero-image{
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  padding: 0 !important;
}

.hero-image{
  aspect-ratio: 16 / 10 !important;
}

.hero-inner--life .hero-image{
  aspect-ratio: 4 / 5 !important;
}

.hero-image > img,
#hero-slide-1,
#hero-slide-2{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#hero-slide-2{
  opacity: 0;
  transition: opacity 600ms ease;
}

.mid-strip-item{
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  background: transparent !important;
}

.mid-strip-item{
  aspect-ratio: 16 / 9 !important;
}

.mid-strip-item > img,
.mid-strip-item img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 900px){
  .hero-image{ aspect-ratio: 16 / 11 !important; }
  .hero-inner--life .hero-image{ aspect-ratio: 16 / 11 !important; }
  .mid-strip-item{ aspect-ratio: 16 / 10 !important; }
}

/* =========================
   CONTACT PAGE — FINAL OVERRIDES (Surrey)
========================= */

.page.contact .contact-wrap{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  display: block;
}

.page.contact .contact-form .form-row{
  display: block;
  margin: 0 0 16px;
}

.page.contact .contact-form label{
  display: block;
  font-weight: 850;
  margin: 0 0 8px;
  color: var(--text);
}

.page.contact .contact-form input[type="text"],
.page.contact .contact-form input[type="email"],
.page.contact .contact-form textarea{
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.4;
  background: #fff;
  color: var(--text);
}

.page.contact .contact-form textarea{
  min-height: 170px;
  resize: vertical;
}

.page.contact .contact-form input:focus,
.page.contact .contact-form textarea:focus{
  outline: none;
  border-color: rgba(168,136,104,0.55);
  box-shadow: 0 0 0 4px rgba(168,136,104,0.14);
}

.page.contact .form-actions{
  margin-top: 18px;
}

.page.contact .form-errors{
  border: 1px solid rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.06);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin: 0 0 16px;
}

.page.contact .form-success{
  border: 1px solid rgba(25, 135, 84, 0.25);
  background: rgba(25, 135, 84, 0.06);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}

.page.contact .hp-field,
.page.contact #website{
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================
   Request a quote (Surrey)
========================= */
.page.request-a-quote .quote-wrap{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 980px){
  .page.request-a-quote .quote-wrap{
    grid-template-columns: 1fr;
  }
}

/* =========================
   BLOG — FINAL WIDTH OVERRIDE (Premium Editorial)
========================= */

.blog-post,
.blog-post__content{
  width: 100% !important;
}

.blog-container{
  width: min(780px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
}

.blog-container p{
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 20px;
}

.blog-container h2{
  margin-top: 44px;
  margin-bottom: 16px;
  font-size: 30px;
  line-height: 1.2;
}

.blog-container h3{
  margin-top: 26px;
  margin-bottom: 10px;
}

.blog-container ul,
.blog-container ol{
  margin-bottom: 22px;
}

.blog-container li{
  margin-bottom: 10px;
}

.blog-container img{
  margin: 32px 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 640px){
  .blog-container{
    width: calc(100% - 28px) !important;
  }
}

.blog-post__header{
  width: min(780px, calc(100% - 48px)) !important;
  margin: 0 auto 32px auto !important;
}

.blog-post__hero{
  margin-top: 28px;
}

/* =========================
   BLOG — Comparison Table
========================= */

.comparison-table{
  margin: 36px 0;
}

.comparison-table h2{
  margin-bottom: 16px;
}

.comparison-table table{
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background: #fff;
}

.comparison-table th{
  background: var(--brand);
  color: #fff;
  text-align: left;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 16px;
}

.comparison-table td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  color: var(--text);
}

.comparison-table tbody tr:nth-child(even){
  background: rgba(168,136,104,0.06);
}

.comparison-table tbody tr:last-child td{
  border-bottom: none;
}

@media (max-width: 640px){
  .comparison-table{
    overflow-x: auto;
  }
  .comparison-table table{
    min-width: 520px;
  }
}

/* =========================
   BLOG INDEX — ELITE VERSION
========================= */

.blog-index{
  padding: 48px 0 70px;
}

.blog-index__header{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto 36px auto;
}

.blog-hero{
  background: linear-gradient(135deg, rgba(168,136,104,0.08), rgba(168,136,104,0.02));
  border: 1px solid rgba(168,136,104,0.18);
  border-radius: 20px;
  padding: 30px;
  box-shadow: var(--shadow-soft);
}

.blog-hero h1{
  font-size: 36px;
  margin-bottom: 10px;
}

.blog-hero__intro{
  font-size: 18px;
  color: var(--muted);
  max-width: 720px;
}

.blog-index__hub-links{
  margin-top: 16px;
  font-size: 15px;
  color: var(--muted);
}

.blog-featured{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto 48px auto;
}

.blog-featured a{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.blog-featured a:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.blog-featured__image{
  position: relative;
  overflow: hidden;
}

.blog-featured__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.blog-featured:hover img{
  transform: scale(1.06);
}

.blog-featured__content{
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(168,136,104,0.02),
    rgba(168,136,104,0.06)
  );
}

.blog-featured__meta{
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}

.blog-featured h2{
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--brand);
}

.blog-featured__cta{
  font-weight: 900;
  font-size: 15px;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-featured__cta::after{
  content: "→";
  transition: transform 0.2s ease;
}

.blog-featured a:hover .blog-featured__cta::after{
  transform: translateX(4px);
}

.blog-featured__image,
.blog-featured__content{
  min-height: 340px;
}

.blog-index__grid{
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.blog-card{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
}

.blog-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.12);
}

.blog-card__media{
  position: relative;
  overflow: hidden;
}

.blog-card__media img{
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover img{
  transform: scale(1.06);
}

.blog-card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.15),
    transparent
  );
}

.blog-card__body{
  padding: 20px;
}

.blog-card__meta{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.blog-card__title{
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 10px;
  font-weight: 800;
}

.blog-card__excerpt{
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 14px;
}

.blog-card__cta{
  font-weight: 800;
  font-size: 14px;
  color: var(--brand);
}

@media (max-width: 980px){
  .blog-featured a{
    grid-template-columns: 1fr;
  }
  .blog-featured__image{
    height: 260px;
  }
  .blog-index__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .blog-index{
    padding: 32px 0 50px;
  }
  .blog-index__grid{
    grid-template-columns: 1fr;
  }
  .blog-featured h2{
    font-size: 22px;
  }
}

/* =========================
   Location Body Width Fix
========================= */
.location-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.location-body .section-header {
  width: min(1100px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* =========================
   Editorial Layout
========================= */
.editorial {
  padding: 48px 0;
}

.editorial-inner {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
}

/* =========================
   Kirbytext Blockquote Fix
========================= */
.editorial-inner blockquote,
.location-body blockquote {
  position: relative;
  background: rgba(168,136,104,0.04) !important;
  border-left: 4px solid var(--brand) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 14px 18px !important;
  margin: 0 0 12px 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.editorial-inner blockquote em,
.location-body blockquote em {
  font-size: 15px !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.editorial-inner blockquote strong,
.location-body blockquote strong {
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: var(--brand) !important;
}
/* =========================
   Custom HTML Blocks — Surrey EMD
========================= */

.bb-custom-section {
  width: min(1100px, calc(100% - 48px));
  margin: 36px auto;
}

.bb-custom-section .card {
  box-shadow: var(--shadow);
}

.bb-custom-section h2 {
  color: var(--brand);
}

.bb-custom-section p,
.bb-custom-section li {
  color: var(--muted);
}

.bb-custom-section a {
  color: var(--brand);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.bb-custom-section a:hover {
  color: var(--brand-dark);
}

.bb-note {
  background: rgba(168,136,104,0.06);
  border: 1px solid rgba(168,136,104,0.18);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin: 20px 0;
}

.bb-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.bb-check-grid li {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px 14px 44px;
  position: relative;
  color: var(--text);
  font-weight: 650;
}

.bb-check-grid li::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(168,136,104,0.14);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.bb-quote {
  background: rgba(168,136,104,0.04);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 18px;
  margin: 18px 0;
}

.bb-quote p {
  color: var(--text);
  font-style: italic;
  margin-bottom: 8px;
}

.bb-quote cite {
  display: block;
  color: var(--brand);
  font-weight: 800;
  font-style: normal;
}

.bb-award-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.bb-award-square {
  width: 300px;
  aspect-ratio: 1 / 1;
  background: rgba(168,136,104,0.06);
  border: 1px solid rgba(168,136,104,0.18);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-award-square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.bb-two-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.bb-three-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.bb-table-wrap {
  overflow-x: auto;
  margin: 20px 0;
}

.bb-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  background: #fff;
}

.bb-table th {
  background: var(--brand);
  color: #fff;
  text-align: left;
  padding: 14px 16px;
  font-weight: 800;
}

.bb-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.bb-table tr:last-child td {
  border-bottom: none;
}

.bb-cta-card {
  background: rgba(168,136,104,0.06);
  border: 1px solid rgba(168,136,104,0.18);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.bb-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .bb-award-grid,
  .bb-two-grid,
  .bb-three-grid {
    grid-template-columns: 1fr;
  }

  .bb-award-square {
    width: min(100%, 320px);
    margin: 0 auto;
  }

  .bb-check-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .bb-custom-section {
    width: calc(100% - 28px);
  }

  .bb-cta-row .btn {
    width: 100%;
  }
}