/* Daisy Cleaning Services — Design Tokens
   Palette codified by Beata 13.06.2026 — full list of approved swatches:
     primary sage         #6F7F73  - top bar
     dark forest          #123326  - footer
     main cream           #F7F5F0  - page background
     light beige cards    #FBF9F6
     section beige        #ECE9E5  - alternating section bands
     dark green text      #2F3A33
     almost-black text    #1E241F  - hero H1
     CTA gold             #B66A1E  - buttons, link arrows
     soft gold            #B66A1E  - eyebrows, dots, decorative
     white                #FFFFFF                                            */
:root {
  --c-primary: #6F7F73;          /* sage green — top bar */
  --c-primary-hover: #5D6B61;
  --c-primary-deep: #4A574E;
  --c-footer: #123326;           /* dark forest — footer */
  --c-bg: #F7F5F0;               /* warm cream — main page */
  --c-bg-section: #ECE9E5;       /* tinted band for alternating sections */
  --c-bg-2: #ECE9E5;             /* backwards-compatible alias for older uses */
  --c-card-cream: #FBF9F6;       /* light beige for cards / panels */
  --c-text: #2F3A33;             /* deep green-charcoal — body text */
  --c-text-darkest: #1E241F;     /* almost-black for hero H1 */
  --c-text-soft: #5C6660;
  --c-text-mute: #8A9089;
  --c-accent: #B66A1E;            /* amber gold — eyebrows, icons, decorative accents */
  --c-accent-deep: #9A5518;
  --c-button: #B66A1E;
  --c-button-hover: #9A5518;
  --c-white: #FFFFFF;
  --c-line: #E6E1D6;
  --c-card: #FFFFFF;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --ff-display: "Lora", "Source Serif 4", Georgia, serif;
  --ff-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  --shadow-sm: 0 1px 2px rgba(47,58,51,0.04), 0 1px 3px rgba(47,58,51,0.04);
  --shadow-md: 0 4px 16px rgba(47,58,51,0.06), 0 2px 4px rgba(47,58,51,0.04);
  --shadow-lg: 0 24px 60px -16px rgba(47,58,51,0.18), 0 8px 24px -12px rgba(47,58,51,0.10);

  --container: 1280px;
  --section-pad-y: 44px;
  --section-pad-y-sm: 28px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  line-height: 1.08;
}

h1 { font-size: clamp(40px, 5.6vw, 76px); }
h2 { font-size: clamp(32px, 3.6vw, 52px); }
h3 { font-size: clamp(22px, 2.0vw, 28px); }
h4 { font-size: 20px; line-height: 1.3; }

p {
  margin: 0;
  text-wrap: pretty;
  color: var(--c-text-soft);
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .container { padding: 0 22px; }
}
/* Large screens — widen the container so the top bar, sections, cards and
   footer stretch out further instead of capping at 1280px on big displays. */
@media (min-width: 1600px) {
  :root { --container: 1460px; }
}

.eyebrow {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: var(--c-accent);
}
.eyebrow.center::before { display: none; }
.eyebrow.center::after { display: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--c-button);
  color: #FFFFFF;
  border-color: var(--c-button);
}
.btn-primary:hover {
  background: var(--c-button-hover);
  border-color: var(--c-button-hover);
}
.btn-sage {
  background: var(--c-primary);
  color: #FFFFFF;
  border-color: var(--c-primary);
}
.btn-sage:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn-outline {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-text);
}
.btn-outline:hover {
  background: var(--c-text);
  color: var(--c-bg);
}
.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border-color: rgba(47,58,51,0.18);
}
.btn-ghost:hover { border-color: var(--c-text); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Solid cream so the sticky header doesn't pick up colour from the topbar
     (sage) bleeding through as it scrolls over it, and so the brand
     background token shows as exactly the spec'd #F7F5F0. */
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.topbar {
  background: var(--c-primary);
  color: rgba(247,245,240,0.92);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  gap: 24px 40px;
  justify-content: space-between; /* first badge to the left edge, middle centred, last to the right edge */
  flex-wrap: wrap;
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.03em;
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 11px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  line-height: 0; /* keeps the wrapper height equal to the image height */
}
.logo img {
  display: block;
  height: 60px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 720px) {
  .logo img { height: 60px; }
}
.footer-brand .logo img { height: 42px; }
.nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  padding: 10px 16px;
  border-radius: 8px;
  position: relative;
  transition: color 0.2s ease;
}
.nav a:hover { color: var(--c-accent-deep); }
.nav a.active {
  color: var(--c-text);
}
.nav a.active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: 4px;
  height: 1.5px;
  background: var(--c-accent);
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(47,58,51,0.18);
  width: 44px; height: 44px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn span {
  width: 18px; height: 1.5px;
  background: var(--c-text);
  position: relative;
}
.mobile-menu-btn span::before,
.mobile-menu-btn span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 1.5px;
  background: var(--c-text);
  transition: transform 0.3s ease;
}
.mobile-menu-btn span::before { top: -6px; }
.mobile-menu-btn span::after { top: 6px; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .header-cta .btn { display: none; }
  .topbar-inner { gap: 18px; font-size: 11px; justify-content: center; }
}

/* Mobile nav drawer */
.mobile-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(360px, 90vw);
  height: 100vh;
  background: var(--c-bg);
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-close {
  align-self: flex-end;
  background: none; border: none; cursor: pointer;
  font-size: 28px; color: var(--c-text);
  width: 44px; height: 44px;
}
.mobile-drawer nav {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}
.mobile-drawer nav a {
  font-family: var(--ff-display);
  font-size: 28px;
  color: var(--c-text);
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.mobile-drawer nav a.active { color: var(--c-accent-deep); }
.mobile-drawer .btn { margin-top: 32px; }
.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(47,58,51,0.4);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

/* Page transition */
.page {
  animation: pageIn 0.45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero — split layout */
.hero {
  position: relative;
  padding: 0; /* the photo fills top-to-bottom; text column carries its own padding */
  overflow: hidden; /* contain the bleeding image inside the section */
  min-height: 720px;
  background: #ECE9E5; /* shared hero backing across all subpages */
}
.hero-grid {
  /* No positioning context here on purpose — the .hero section above is
     `position: relative` and full viewport width. .hero-media anchors to
     .hero, not to .hero-grid, so the photo can extend to the actual
     viewport right edge instead of stopping at the 1280 px container. */
  min-height: 720px;
}
.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 540px;
  padding: 64px 0;
}
@media (max-width: 960px) {
  .hero-grid { min-height: 0; }
  .hero-copy { max-width: none; padding: 28px 0 32px; }
}
/* Commercial hero — H1 at -15% from original (global is -23%, too much for commercial).
   Eyebrow also slightly smaller to match the tighter heading. */
.hero-commercial .hero-copy h1,
.hero-airbnb .hero-copy h1,
.hero-domestic .hero-copy h1 { font-size: clamp(32px, 3.9vw, 51px); }
.hero-commercial .hero-copy .eyebrow,
.hero-airbnb .hero-copy .eyebrow { font-size: 11px; }
.hero-domestic .hero-copy .eyebrow { font-size: 11px; color: #B66A1E; }
.hero-domestic .hero-media img { object-position: center 20%; }
.hero-commercial .hero-media img { object-position: right center; }

/* Subpage heroes — match the home hero: shorter, copy vertically centred
   (so the text sits lower with even spacing top/bottom instead of clinging
   to the top), heading + lede at the home sizes. #ECE9E5 backing and the
   narrower photo come from the base .hero / .hero-media rules. */
.hero-commercial, .hero-airbnb, .hero-domestic, .hero-contact { min-height: 620px; }
.hero-commercial .hero-grid,
.hero-airbnb .hero-grid,
.hero-domestic .hero-grid,
.hero-contact .hero-grid { min-height: 620px; display: flex; align-items: center; }
.hero-commercial .hero-copy,
.hero-airbnb .hero-copy,
.hero-domestic .hero-copy,
.hero-contact .hero-copy { padding: 40px 0; }
.hero-commercial .hero-copy h1,
.hero-airbnb .hero-copy h1,
.hero-domestic .hero-copy h1,
.hero-contact .hero-copy h1 { font-size: clamp(27px, 3.15vw, 41px); }
.hero-commercial .hero-copy .lede,
.hero-airbnb .hero-copy .lede,
.hero-domestic .hero-copy .lede,
.hero-contact .hero-copy .lede { font-size: 17px; line-height: 1.8; }
@media (max-width: 960px) {
  .hero-commercial, .hero-airbnb, .hero-domestic, .hero-contact { min-height: 0; }
  .hero-commercial .hero-grid,
  .hero-airbnb .hero-grid,
  .hero-domestic .hero-grid,
  .hero-contact .hero-grid { min-height: 0; display: block; }
}

/* Home hero — reframed per Beata's notes:
   - #ECE9E5 backing (darkest of the light shades) for depth
   - shorter overall so there's less dead space under the copy
   - copy vertically centred instead of clinging to the top
   - photo ~18% narrower and shifted up so it shows more of the room
     rather than the foreground chairs, dissolving into the beige with a
     longer, gentler gradient
   - H1 ~10% smaller, lede a touch smaller with more line-height */
.hero-home { min-height: 620px; background: #ECE9E5; }
.hero-home .hero-grid { min-height: 620px; display: flex; align-items: center; }
.hero-home .hero-copy { padding: 40px 0; }
/* Photo width + gradient are left to the base .hero-media rule so the home
   hero is identical to the other pages — no home-specific override. */
.hero-home .hero-media img { object-position: center 32%; }
.hero-home .hero-copy h1 { font-size: clamp(27px, 3.15vw, 41px); }
.hero-home .hero-copy .lede { font-size: 17px; line-height: 1.8; }
@media (max-width: 960px) {
  .hero-home { min-height: 0; }
  .hero-home .hero-grid { min-height: 0; display: block; }
}

/* Hero H1 — tighter and a touch heavier than the section H2 default so
   it doesn't dwarf the eyebrow + lede sitting next to it. */
.hero-copy h1 {
  margin-top: 18px;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* The hero eyebrow is read at the top of a tall hero — give it a bit more
   weight than the default small eyebrow used in section heads, and use
   the brighter accent (#B66A1E) rather than the deeper hover-shade. */
.hero-copy .eyebrow {
  font-size: 14px;
  letter-spacing: 0.20em;
  color: var(--c-accent);
}
.hero-copy .lede {
  margin-top: 26px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-text-soft);
  max-width: 520px;
}
.hero-copy .cta-row {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-media {
  /* Shared 80vw framing + gradient across the home and subpage heroes so the
     fade reads identically everywhere (areas uses the separate .hero-wide
     hero). */
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 80vw;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.08) 8%, rgba(0,0,0,0.45) 22%, #000 38%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.08) 8%, rgba(0,0,0,0.45) 22%, #000 38%);
}
/* PLACEHOLDER — the mobile breakpoint below is the single source of truth */
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Hero floating badge */
.hero-badge {
  position: absolute;
  bottom: 28px;
  left: 28px;
  background: rgba(255,255,255,0.96);
  padding: 16px 20px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.hero-badge .ring {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-bg);
  display: grid; place-items: center;
  color: var(--c-accent-deep);
}
.hero-badge .stack { line-height: 1.2; }
.hero-badge .stack b { font-family: var(--ff-display); font-size: 22px; color: var(--c-text); font-weight: 500; }
.hero-badge .stack span { font-size: 12px; color: var(--c-text-soft); letter-spacing: 0.04em; }

@media (max-width: 960px) {
  /* On mobile the photo stacks below the text as a normal-flow strip
     — drop the absolute positioning and the desktop min-height. */
  .hero { padding: 0; min-height: 0; }
  .hero-grid { min-height: 0; }
  .hero-copy { padding: 28px 0 32px; max-width: none; }
  .hero-media {
    position: relative;
    width: 100%;
    height: 380px;
    top: auto; right: auto; bottom: auto;
  }
  .hero-media img { position: absolute; inset: 0; }
}

/* Hero — small trust block under the lede (home / contact pages)
   No box, no border — sits inline with the rest of the copy so it reads
   as part of the same passage instead of a tacked-on card. */
.hero-trust-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 0;
  background: transparent;
  border: none;
  max-width: 460px;
}
.hero-trust-card .icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  /* Gold badge — matches the CTA button colour (#B66A1E) and the
     mockup's "verified" feel, on a soft gold-tinted square. */
  background: rgba(182,106,30,0.14);
  color: var(--c-button);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hero-trust-card p {
  font-size: 13px;
  color: var(--c-text-soft);
  line-height: 1.5;
  margin: 0;
}

/* Hero — three small check pills under the CTA (home page) */
.hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--c-text-soft);
}
.hero-checks span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-checks .check {
  width: 20px; height: 20px;
  color: var(--c-button);
  flex-shrink: 0;
}

/* Benefits — 4 icon cards in a row (home page replaces the old trust-strip) */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align: center;
}
.benefit-card .icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--c-bg-section);
  color: var(--c-footer);
  display: grid; place-items: center;
  margin: 0 auto 22px;
  box-shadow: 0 4px 14px rgba(47,58,51,0.04), 0 1px 2px rgba(47,58,51,0.03);
}
.benefit-card .icon svg { width: 36px; height: 36px; }
.benefit-card h3 {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 8px;
}
.benefit-card p {
  font-size: 12.5px;
  color: var(--c-text-soft);
  line-height: 1.55;
  max-width: 220px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 480px) {
  .benefits-grid { grid-template-columns: 1fr; }
}
/* Variant: gold icons (airbnb page) */
.benefits-grid.gold .benefit-card .icon { color: var(--c-accent); background: rgba(182,106,30,0.12); }

/* Domestic 4-icon bar — no circles, larger icons, amber #B66A1E */
.benefits-grid--domestic-icons .benefit-card .icon {
  background: none;
  box-shadow: none;
  width: auto; height: auto;
  color: #B66A1E;
  margin-bottom: 18px;
}
.benefits-grid--domestic-icons .benefit-card .icon svg { width: 46px; height: 46px; }
.benefits-grid--domestic-icons .benefit-card h3 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.benefits-grid--domestic-icons .benefit-card p { font-size: 13px; }

/* Airbnb 4-icon bar — no circles, larger icons, gold #B66A1E */
.benefits-grid--airbnb-icons .benefit-card .icon {
  background: none;
  box-shadow: none;
  width: auto; height: auto;
  color: #B66A1E;
  margin-bottom: 18px;
}
.benefits-grid--airbnb-icons .benefit-card .icon svg { width: 46px; height: 46px; }
.benefits-grid--airbnb-icons .benefit-card h3 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.benefits-grid--airbnb-icons .benefit-card p { font-size: 13px; }

/* Airbnb + domestic 4-icon info bar — client note: lighter band on #F7F5F0,
   shorter, tighter icon->heading->desc spacing, texts -5%, wider column gap. */
.benefits-bar { background: #F7F5F0; }
.section.benefits-bar { padding: 18px 0; }
.benefits-grid--airbnb-icons,
.benefits-grid--domestic-icons { gap: 20px 52px; }
.benefits-grid--airbnb-icons .benefit-card .icon,
.benefits-grid--domestic-icons .benefit-card .icon { margin-bottom: 12px; }
.benefits-grid--airbnb-icons .benefit-card h3,
.benefits-grid--domestic-icons .benefit-card h3 { margin-bottom: 5px; font-size: 11.5px; }
.benefits-grid--airbnb-icons .benefit-card p,
.benefits-grid--domestic-icons .benefit-card p { font-size: 12.5px; }

/* Home benefits — flat icons, no circular tiles, unified accent #B66A1E.
   Reads as a light info strip rather than a tall row of badges. */
.benefits-grid--flat .benefit-card .icon {
  background: none;
  box-shadow: none;
  width: auto; height: auto;
  color: #B66A1E;
  margin-bottom: 16px;
}
.benefits-grid--flat .benefit-card .icon svg { width: 54px; height: 54px; }

/* Under-hero "company blurb + icons" — pulled together into one slim
   information strip instead of two tall stacked sections. */
.section--intro-slim { padding: 40px 0 18px; }
.section--benefits-slim { padding: 8px 0 40px; }
@media (max-width: 720px) {
  .section--intro-slim { padding: 28px 0 14px; }
  .section--benefits-slim { padding: 6px 0 28px; }
}
/* Variant: three columns (areas page) */
.benefits-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .benefits-grid.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .benefits-grid.three { grid-template-columns: 1fr; } }
/* Variant: compact spacing (airbnb page — section reads lighter than the home one) */
.benefits-grid.compact .benefit-card .icon { width: 56px; height: 56px; margin-bottom: 14px; }
.benefits-grid.compact .benefit-card .icon svg { width: 26px; height: 26px; }
.benefits-grid.compact .benefit-card h3 { font-size: 15px; }
.benefits-grid.compact .benefit-card p { font-size: 13.5px; }

/* Commercial page benefits — gold icons, vertical separators, #FBF9F6 bg on section */
.section-head--commercial { max-width: none; }
.section-head--commercial h2 { font-size: clamp(19px, 2.2vw, 36px); white-space: nowrap; }
.section-head--commercial h2::after { background: #B66A1E; width: 48px; height: 2px; }
.benefits-grid--commercial .benefit-card { position: relative; padding: 0 20px; }
.benefits-grid--commercial .benefit-card + .benefit-card::before {
  content: "";
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: var(--c-line);
}
/* Flat gold icons — no circular tile, larger glyph, tighter gap to the
   heading below (matches the home benefit-card icons). */
.benefits-grid--commercial .benefit-card .icon {
  color: #B66A1E;
  background: none;
  box-shadow: none;
  border-radius: 0;
  width: auto; height: auto;
  margin-bottom: 12px;
}
.benefits-grid--commercial .benefit-card .icon svg { width: 56px; height: 56px; }
.benefits-grid--commercial .benefit-card p { font-size: 11.5px; }
@media (max-width: 880px) {
  .section-head--commercial h2 { white-space: normal; }
  .benefits-grid--commercial .benefit-card + .benefit-card::before { display: none; }
}

/* Areas page — remove the duplicate "Areas We Cover" eyebrow (done in the
   template) and hang the gold underline under the h2 instead; slightly wider
   gap between the three location cards. */
.section-head--areas h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--c-accent);
  margin: 12px auto 0;
}
.benefits-grid--areas { gap: 44px; }

/* Areas page — 3 location cards with cream bg, gold icons, serif h3 */
.benefits-grid--areas .benefit-card {
  background: var(--c-card-cream);
  border-radius: var(--r-lg);
  padding: 36px 24px 32px;
  border: 1px solid rgba(0,0,0,0.06);
}
.benefits-grid--areas .benefit-card .icon {
  color: var(--c-accent);
  background: transparent;
  border: none; /* flat — no circular tile, consistent with the trust shield */
  box-shadow: none;
  width: auto; height: auto;
}
.benefits-grid--areas .benefit-card .icon svg { width: 84px; height: 84px; }
.benefits-grid--areas .benefit-card h3 {
  font-family: var(--ff-display);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-text);
}
.benefits-grid--areas .benefit-card h3::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--c-accent);
  margin: 8px auto 12px;
}
.benefits-grid--areas .benefit-card p { font-size: 13.5px; }

/* Areas — "Trusted Across Central Scotland" icon-left + text-right block */
.areas-trust-block {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 820px;
  margin: 0 auto;
  background: var(--c-card-cream);
  border-radius: var(--r-lg);
  padding: 32px 40px;
  border: 1px solid rgba(0,0,0,0.06);
}
/* Flat shield — no circular tile, larger glyph (per client ~20-25%). */
.areas-trust-icon {
  flex-shrink: 0;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
}
.areas-trust-icon svg { width: 42px; height: 42px; }
.areas-trust-text .eyebrow {
  display: block;
  color: var(--c-accent);
  font-size: 17px; /* larger than the description below it, per client */
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}
.areas-trust-text .eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--c-accent);
  margin-top: 6px;
  margin-bottom: 12px;
}
.areas-trust-text p {
  font-family: var(--ff-display);
  font-size: clamp(14px, 1.4vw, 16px); /* smaller than the heading above */
  line-height: 1.5;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 640px) {
  .areas-trust-block { flex-direction: column; text-align: center; padding: 28px 24px; }
  .areas-trust-text .eyebrow::after { margin-left: auto; margin-right: auto; }
}

/* Trust bar — 4-column footer section on the home page (replaces the old
   CTA band + areas strip). Each cell is icon + title + body. */
/* Bottom info row — four columns (Areas We Cover, Trusted Local Company,
   Eco-Friendly Products, Satisfaction Guarantee) sitting on #F7F5F0 just
   above the footer. Compact, with flat #123326 icons (no circular tiles). */
.trust-bar-section {
  background: #F7F5F0;
  padding: 26px 0 34px;
}
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.trust-bar-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.trust-bar-item .icon {
  width: auto; height: auto;
  background: none;
  border: none;
  border-radius: 0;
  color: #B66A1E; /* match the flat gold benefit-card icons above */
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: none;
  margin-top: 2px;
}
.trust-bar-item .icon svg { width: 46px; height: 46px; }
.trust-bar-item { gap: 18px; }
.trust-bar-item h4 { margin-top: 0; }
.trust-bar-item h4 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-button);
  margin: 2px 0 8px;
}
.trust-bar-item p,
.trust-bar-item ul {
  font-size: 14px;
  color: var(--c-text-soft);
  line-height: 1.55;
  margin: 0;
}
.trust-bar-item ul {
  list-style: none;
  padding: 0;
}
.trust-bar-item ul li {
  padding: 2px 0;
}
@media (max-width: 880px) {
  .trust-bar { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 480px) {
  .trust-bar { grid-template-columns: 1fr; }
}

/* Hero — wide / panoramic variant */
.hero-wide {
  position: relative;
  padding: 36px 0 0;
}
.hero-wide-inner {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
}
.hero-wide-inner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-wide-inner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(247,245,240,0.96) 0%, rgba(247,245,240,0.7) 38%, rgba(247,245,240,0.0) 64%);
}
.hero-wide-copy {
  position: relative;
  z-index: 2;
  padding: 80px;
  max-width: 620px;
}
.hero-wide-copy h1 { margin-top: 22px; }
.hero-wide-copy .lede {
  margin-top: 24px;
  font-size: 17px;
  color: var(--c-text-soft);
}
.hero-wide-copy .cta-row { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 820px) {
  .hero-wide-inner { min-height: 460px; }
  .hero-wide-copy { padding: 36px 24px; max-width: none; }
  .hero-wide-inner::after { background: linear-gradient(180deg, rgba(247,245,240,0.94) 0%, rgba(247,245,240,0.6) 70%); }
}

/* Areas hero — dark overlay left-only, white text, gold accents */
.hero-wide--areas {
  padding: 0;
}
.hero-wide--areas .hero-wide-inner {
  border-radius: 0;
}
.hero-wide--areas .hero-wide-inner::after {
  background: linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.68) 35%, rgba(0,0,0,0.20) 62%, rgba(0,0,0,0.0) 80%);
}
.hero-areas-copy .eyebrow { color: var(--c-accent); display: block !important; margin-bottom: 20px; }
.hero-areas-copy h1 { color: #fff; font-size: clamp(26px, 3.1vw, 41px); margin-top: 16px; }
.areas-h1-gold { color: var(--c-accent); }
.hero-areas-copy .lede { color: rgba(255,255,255,0.92); font-size: 16px; }
.hero-areas-copy strong { font-weight: 600; color: #fff; }
.btn-ghost-white {
  border: 2px solid rgba(255,255,255,0.75);
  color: #fff;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.2s, background 0.2s;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.btn-ghost-white:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }
@media (max-width: 820px) {
  .hero-wide--areas .hero-wide-inner::after { background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.50) 70%, rgba(0,0,0,0.10) 100%); }
}

/* Sections */
.section {
  padding: var(--section-pad-y) 0;
}
.section.tight { padding: 28px 0; }
@media (max-width: 720px) {
  .section { padding: var(--section-pad-y-sm) 0; }
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.section-head h2 {
  color: var(--c-footer);
  position: relative;
  display: inline-block;
  font-size: clamp(25px, 2.9vw, 42px);
}
.section-head h2::after { content: none; }
.section-head .eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.section-head .eyebrow::before { display: none; }
.section-head .eyebrow::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--c-accent);
  margin-top: 10px;
}
.section-head h2 { margin-top: 14px; }
.section-head p { margin-top: 18px; font-size: 17px; color: var(--c-text-soft); }
.section-head.left { text-align: left; margin: 0 0 36px; }

/* Centred intro paragraphs — no panel, no card. The visual rhythm comes
   from the surrounding .section.tinted band, not from a boxed inset. */
.intro-panel {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.intro-panel p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-text-soft);
}
.intro-panel p + p { margin-top: 16px; }

/* Full-bleed tinted section band — switches the cream page to a deeper
   beige (#ECE9E5) for the full width of the viewport. Used to break the
   home page rhythm: cream hero -> tinted intro band -> cream benefits
   -> cream services -> tinted trust band -> dark forest footer. */
.section.tinted { background: var(--c-bg-section); }
.section-head.left .eyebrow { display: inline-flex; }

/* Home "Our Cleaning Services" band — lightest shade (#FBF9F6); the cards
   inside it sit on #F7F5F0 so they read as distinct panels. */
#services { background: #FBF9F6; }

/* Home "Our Cleaning Services" heading — ~10% smaller than the default
   section head, with a subtle gold underline. No top margin on the h2
   (the section padding already carries the space above it). */
#services .section-head h2 { font-size: clamp(22px, 2.6vw, 38px); margin-top: 0; }
#services .section-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: #B66A1E;
  margin: 14px auto 0;
}

/* Service cards grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 960px) {
  .services-grid { grid-template-columns: 1fr; gap: 22px; }
}
.svc-card {
  background: #F7F5F0; /* card fill — sits on the lighter #FBF9F6 services band */
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid var(--c-line);
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.svc-media {
  height: 210px;
  overflow: hidden;
  position: relative;
}
.svc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.svc-card:hover .svc-media img { transform: scale(1.05); }
.svc-body {
  padding: 24px 28px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.svc-body h3 {
  margin: 0 0 12px;
  font-family: var(--ff-display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--c-footer);
}
.svc-body p {
  font-size: 12px;
  line-height: 1.65;
  flex: 1;
  color: var(--c-text-soft);
}
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-button);
  border-top: 1px solid var(--c-line);
  padding-top: 18px;
  transition: gap 0.3s ease, color 0.3s ease;
}
.svc-card:hover .svc-link { gap: 14px; color: var(--c-button-hover); }

/* Why us / feature list */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 60px;
}
.feature-grid li {
  list-style: none;
  padding: 22px 0;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 16px;
  color: var(--c-text);
}
.feature-grid li:last-child:nth-child(odd) { /* if odd count, leave last full-bleed underline */ }
.feature-grid .num {
  font-family: var(--ff-display);
  font-size: 22px;
  color: var(--c-accent-deep);
  font-weight: 500;
  min-width: 32px;
}
@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* Two-column section (intro w/ image) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split.reverse > :first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 38px; }
  .split.reverse > :first-child { order: 0; }
}
.split-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 5/4;
  background: var(--c-bg-2);
}
.split-img img { width:100%; height:100%; object-fit: cover; display: block; }
/* Variant: subtle right-edge fade so the image softens into the text column
   instead of ending on a hard line. Used on the airbnb main content split. */
.split-img.fade-edge {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
}
.split.reverse .split-img.fade-edge {
  /* Mirror the fade when the image is on the right side of the split. */
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to left, #000 0%, #000 92%, transparent 100%);
}

/* Compact check-bulleted list — used in split copy alongside the body
   paragraphs. Lighter than .svc-list which is a 2-column standalone block. */
.check-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
/* 2×2 grid variant */
/* Two balanced columns via multicol so each column stacks tightly and both
   start AND end at the same height regardless of which items wrap. */
.check-list--grid {
  column-count: 2;
  column-gap: 16px;
}
.check-list--grid li { break-inside: avoid; }
/* Amber checkmarks for domestic page */
.check-list--amber li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B66A1E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-color: rgba(182,106,30,0.12);
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 15px;
  color: var(--c-text);
}
.check-list li::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(182,106,30,0.16);
  color: var(--c-accent-deep);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8916C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.split-copy h2 { margin-top: 16px; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 24px; }
.split-copy p { margin-top: 18px; font-size: 17px; color: var(--c-text-soft); }
.split-copy p + p { margin-top: 14px; }

/* Domestic split — same wide-from-left layout as airbnb, eyebrow amber.
   #ECE9E5 band, ~12% shorter, wider (3/2) image, and a longer hero-style
   edge fade so the photo dissolves naturally into the section. */
.section--domestic-split { overflow: hidden; background: #ECE9E5; padding: 34px 0; }
.split--domestic { grid-template-columns: 1.3fr 0.7fr; gap: 56px; }
.split--domestic .split-img {
  border-radius: var(--r-lg); /* all corners rounded, contained card */
  background: var(--c-bg);
  aspect-ratio: 3/2;
}
.split--domestic .split-img.fade-edge {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
}
.eyebrow--domestic { color: #B66A1E; }
.eyebrow--domestic::before { background: #B66A1E; }
@media (max-width: 900px) {
  .split--domestic { grid-template-columns: 1fr; }
  .split--domestic .split-img { margin-left: 0; border-radius: var(--r-lg); aspect-ratio: 5/4; }
}

/* Airbnb split — image wider, bleeds to left edge, no white bar.
   #ECE9E5 band, ~12% shorter, wider (3/2) image, and a longer hero-style
   edge fade so the photo dissolves naturally into the section. */
.section--airbnb-split { overflow: hidden; background: #ECE9E5; padding: 34px 0; }
.split--airbnb { grid-template-columns: 1.3fr 0.7fr; gap: 56px; }
.split--airbnb .split-img {
  border-radius: var(--r-lg); /* all corners rounded, contained card */
  background: var(--c-bg);
  aspect-ratio: 3/2;
}
.split--airbnb .split-img.fade-edge {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
}
@media (max-width: 900px) {
  .split--airbnb { grid-template-columns: 1fr; }
  .split--airbnb .split-img { margin-left: 0; border-radius: var(--r-lg); aspect-ratio: 5/4; }
}
/* Airbnb + domestic split copy — heading -10%, body a touch smaller (3-5%),
   and tighter checklist spacing so the text + button end roughly level with
   the image bottom. */
.split--airbnb .split-copy h2,
.split--domestic .split-copy h2 { font-size: clamp(22px, 2.35vw, 34px); margin-bottom: 18px; }
.split--airbnb .split-copy p,
.split--domestic .split-copy p { font-size: 16px; }
.split--airbnb .check-list,
.split--domestic .check-list { margin-top: 10px; }

/* Commercial split — heading -10% from here, body a touch smaller, and the
   image widened so it fills the section more proportionally (bleeds to the
   left edge like the airbnb/domestic splits). */
.section--commercial-split { overflow: hidden; }
.split--commercial { grid-template-columns: 1.2fr 0.8fr; gap: 56px; }
.split--commercial .split-img {
  border-radius: var(--r-lg); /* all corners rounded, contained card */
  background: var(--c-bg);
  aspect-ratio: 4/3;
}
.hero-commercial ~ .section .split-copy h2,
.split--commercial .split-copy h2 {
  font-size: clamp(20px, 2.5vw, 40px);
  letter-spacing: -0.025em;
}
.split--commercial .split-copy p { font-size: 14px; }
/* Cleaner, gentler edge fade — keeps most of the sharp photo crisp and only
   softens the last sliver into the section (fixes the previous smudgy blur). */
.split--commercial .split-img.fade-edge {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
}
@media (max-width: 900px) {
  .split--commercial { grid-template-columns: 1fr; }
  .split--commercial .split-img { margin-left: 0; border-radius: var(--r-lg); aspect-ratio: 5/4; }
}

/* Trust / stats strip */
.trust-strip {
  background: var(--c-bg-2);
  border-radius: var(--r-xl);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 48px;
  align-items: center;
}
.trust-strip h3 { font-size: 30px; line-height: 1.15; }
.trust-stat { border-left: 1px solid var(--c-line); padding-left: 28px; }
.trust-stat b {
  display: block;
  font-family: var(--ff-display);
  font-size: 42px;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1;
}
.trust-stat span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--c-text-soft);
  letter-spacing: 0.06em;
}
@media (max-width: 900px) {
  .trust-strip { grid-template-columns: 1fr 1fr; padding: 40px 28px; gap: 32px; }
  .trust-strip > :first-child { grid-column: 1 / -1; }
  .trust-stat { padding-left: 22px; }
  .trust-stat b { font-size: 32px; }
}

/* FAQ */
.faq {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-top: 1px solid var(--c-line);
  padding: 24px 0;
  cursor: pointer;
}
.faq-item:last-child { border-bottom: 1px solid var(--c-line); }
.faq-q {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  font-family: var(--ff-display);
  font-size: 22px;
  color: var(--c-text);
  line-height: 1.25;
}
.faq-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  color: var(--c-text);
}
.faq-item.open .faq-toggle {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(.2,.7,.2,1), margin 0.3s ease;
}
.faq-item.open .faq-a {
  max-height: 400px;
  margin-top: 14px;
}
.faq-a p {
  color: var(--c-text-soft);
  font-size: 16px;
  line-height: 1.65;
  padding-right: 60px;
}

/* CTA band */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: 80px 64px;
  background: var(--c-text);
  color: var(--c-bg);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 48px;
  align-items: center;
}
.cta-band h2 { color: var(--c-bg); }
.cta-band p { color: rgba(247,245,240,0.7); margin-top: 18px; font-size: 17px; }
.cta-band .btn-primary { background: var(--c-button); border-color: var(--c-button); }
.cta-band .btn-primary:hover { background: var(--c-button-hover); border-color: var(--c-button-hover); }
@media (max-width: 820px) {
  .cta-band { grid-template-columns: 1fr; padding: 48px 28px; gap: 24px; }
}

/* Photo CTA — full-width "Get in Touch" with photo peeking under green overlay */
.section--cta-photo { padding: 0; }
.cta-photo-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  margin: 0 32px;
  min-height: 0; /* height driven by content — ~30% shorter Get-in-Touch band per client */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}
.cta-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(95,111,99,0.82);
}
.cta-photo-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 16px 48px;
  max-width: 700px;
}
.cta-photo-title {
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--c-bg);
  margin: 0;
  line-height: 1.05;
}
.cta-photo-sub {
  color: rgba(247,245,240,0.95);
  font-size: 14px;
  margin: 5px 0 0;
  font-weight: 500;
}
.cta-photo-desc {
  color: rgba(247,245,240,0.65);
  font-size: 13px;
  margin: 4px auto 0;
  /* wide enough to keep the longest desc to 2 lines on desktop */
  max-width: 600px;
  line-height: 1.5;
}
.cta-photo-content .btn { margin-top: 12px; padding-top: 11px; padding-bottom: 11px; }
.cta-photo-content .cta-sub { font-size: 11.5px; color: rgba(247,245,240,0.5); margin-top: 10px; }
@media (max-width: 720px) {
  /* On mobile the desc naturally flows to more lines — give it room to breathe */
  .cta-photo-wrap { margin: 0 16px; min-height: auto; }
  .cta-photo-content { padding: 30px 24px; }
  .cta-photo-title { font-size: clamp(28px, 7vw, 38px); }
  .cta-photo-desc { max-width: none; }
}

/* Areas page — cta-photo title -10% from default */
.section--cta-photo-areas .cta-photo-title { font-size: clamp(24px, 2.35vw, 31px); }

/* Sage CTA panel — centred email-only CTA used on subpages (commercial,
   etc.). Mirrors the brand top-bar tone so the page closes on the same
   colour it opened with. */
.cta-sage {
  background: #5F6F63;
  color: var(--c-bg);
  border-radius: var(--r-xl);
  padding: 56px 48px 44px;
  text-align: center;
}
.cta-sage .eyebrow { color: var(--c-accent); display: inline-flex; }
.cta-sage h2 { color: var(--c-bg); margin-top: 14px; }
.cta-sage > p { color: rgba(247,245,240,0.85); margin: 14px auto 0; max-width: 560px; font-size: 16px; }
.cta-sage .btn { margin-top: 28px; }
.cta-sage .cta-sub { font-size: 13px; color: rgba(247,245,240,0.7); margin-top: 18px; }
@media (max-width: 720px) {
  .cta-sage { padding: 40px 26px 32px; }
}

/* Simple text-only 3-column trust strip — sits at the bottom of a
   subpage as a clean horizontal divider. No icons, no graphics. */
.trust-strip-section { background: #F7F5F0; }
.trust-strip-simple {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 64px;
  padding: 13px 0;
  font-family: var(--ff-body);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--c-text-soft);
  text-align: center;
}
.trust-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--c-text-soft);
}
.trust-strip-item svg { width: 24px; height: 24px; color: #B66A1E; flex-shrink: 0; } /* +50% per client */
@media (max-width: 720px) {
  .trust-strip-simple { gap: 18px; flex-direction: column; padding: 20px 0; }
}

/* Service list checklist */
.svc-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.svc-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: var(--c-text);
}
.svc-list .check {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(182,106,30,0.16);
  color: var(--c-accent-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
@media (max-width: 720px) { .svc-list { grid-template-columns: 1fr; } }

/* Areas Map / list */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .areas-grid { grid-template-columns: 1fr; } }
.area-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.area-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(182,106,30,0.4);
}
.area-card .pin {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-accent);
  color: var(--c-accent-deep);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.area-card h3 { font-size: 30px; margin-bottom: 14px; }
.area-card p { font-size: 15px; line-height: 1.6; }
.area-card ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.area-card ul li {
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--c-bg);
  color: var(--c-text-soft);
}

/* Areas map header */
.areas-locs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 36px;
}
.areas-locs span {
  font-family: var(--ff-display);
  font-size: 22px;
  color: var(--c-text);
}
.areas-locs .sep {
  color: var(--c-accent);
  font-size: 14px;
}

/* Contact */
.contact-section { background: #F7F5F0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: start;
}
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form .full { grid-column: 1 / -1; }

/* Icon-prefixed fields */
.cf-field { position: relative; }
.cf-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-accent);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
.cf-field:has(textarea) .cf-icon { top: 14px; transform: none; }
/* Slightly larger form icons per client */
.cf-icon svg { width: 18px; height: 18px; }
.contact-form .cf-field input,
.contact-form .cf-field select { padding-left: 42px; }
.contact-form .cf-field textarea { padding-left: 42px; padding-top: 12px; }

/* Service checkboxes */
.cf-services { margin-top: 4px; }
.cf-services-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text-soft);
  margin-bottom: 12px;
}
.cf-optional { font-weight: 400; color: var(--c-text-mute); }
.cf-required-star { color: #a04545; font-weight: 700; margin-left: 2px; }
.cf-field-error {
  font-size: 12.5px;
  color: #a04545;
  margin-top: 8px;
  margin-bottom: 0;
}
.cf-input--error {
  border-color: #d08080 !important;
  box-shadow: 0 0 0 3px rgba(160,69,69,0.12) !important;
}
.cf-services--error .cf-services-grid {
  outline: 2px solid rgba(160,69,69,0.35);
  outline-offset: 4px;
  border-radius: 8px;
}
/* Service picker — clickable tiles that highlight when selected */
.cf-services-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1080px) { .cf-services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .cf-services-grid { grid-template-columns: repeat(2, 1fr); } }
.cf-check {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
}
.cf-check input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-check-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 92px;
  padding: 14px 10px;
  text-align: center;
  border-radius: 12px;
  border: 1.5px solid var(--c-line);
  background: transparent; /* blend with the form fields instead of standing out white */
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cf-check:hover .cf-check-tile {
  border-color: var(--c-accent);
  background: rgba(182,106,30,0.05);
}
.cf-check-icon { color: var(--c-accent); display: flex; }
.cf-check-text {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--c-text);
}
/* corner tick badge, shown only when selected */
.cf-check-mark {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
/* selected state */
.cf-check:has(input:checked) .cf-check-tile {
  border-color: var(--c-accent);
  background: rgba(182,106,30,0.10);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.cf-check:has(input:checked) .cf-check-text {
  color: var(--c-accent-deep);
  font-weight: 600;
}
.cf-check:has(input:checked) .cf-check-mark { opacity: 1; transform: scale(1); }
/* keyboard focus */
.cf-check:has(input:focus-visible) .cf-check-tile {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Form result banners — sit above the form, prominent enough to read at a glance after redirect. */
.form-success,
.form-errors {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 28px;
  border-radius: var(--r-lg);
  margin-bottom: 28px;
  scroll-margin-top: 120px; /* keeps banner clear of the sticky header on anchor jump */
  animation: form-result-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.form-success {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: var(--shadow-md);
}
.form-success h3 {
  font-family: var(--ff-display);
  color: var(--c-white);
  margin: 0 0 6px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
}
.form-success p {
  color: rgba(255,255,255,0.92);
  font-size: 16px;
  margin: 0;
}
.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: var(--c-white);
  flex-shrink: 0;
}
.form-errors {
  background: #fdf3f3;
  color: #7a2e2e;
  border: 1px solid #e8c5c5;
}
.form-errors h4 {
  font-family: var(--ff-body);
  font-weight: 600;
  margin: 0 0 8px;
  font-size: 16px;
  color: #7a2e2e;
}
.form-errors ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: #8a3e3e;
}
.form-errors-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f4d6d6;
  color: #a04545;
  flex-shrink: 0;
}
@keyframes form-result-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .form-success,
  .form-errors { padding: 22px 20px; gap: 14px; }
  .form-success-icon { width: 44px; height: 44px; }
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background: #F7F5F0; /* same as the section background per client */
  border: 1px solid #E6E1DA;
  border-radius: 10px;
  padding: 11px 16px;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--c-text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--c-text-mute); }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(182,106,30,0.12);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-side .info-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
}
.contact-side .info-item:last-child { border-bottom: none; }
.contact-side .icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-accent-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contact-side h4 { font-family: var(--ff-body); font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.contact-side p { font-size: 14px; color: var(--c-text-soft); }

/* Right-column info cards on the contact page */
.contact-cards {
  display: grid;
  gap: 14px;
  align-content: start;
  grid-template-rows: repeat(3, 1fr);
}
.contact-card {
  background: #FBF9F6;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: 90px;
}
.contact-card .icon {
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: #B66A1E;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contact-card .icon svg { width: 30px; height: 30px; } /* flat, ~25% larger */
.contact-card h4 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 5px;
  color: var(--c-text);
}
.contact-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-text-soft);
  margin: 0;
}
.contact-form button[type=submit],
.cf-submit { height: 46px; padding: 0 28px; }

/* Footer */
.site-footer {
  background: var(--c-footer);
  color: var(--c-white);
  padding: 12px 0 10px;
  margin-top: 0; /* sits flush on the Areas We Cover strip — no white gap */
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
.footer-grid h5 { color: var(--c-button);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-bg);
  margin: 0 0 8px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.footer-grid li { line-height: 1.2; }
.footer-grid li a { font-size: 14px; color: rgba(255,255,255,0.78); transition: color 0.2s ease; }
/* Footer Contact block — icon + text rows. Email is the primary contact
   (full opacity cream); location is informational; phone (if set) is
   intentionally muted so it never out-shouts the email or the form CTA. */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
  font-size: 14px;
  color: rgba(247,245,240,0.78);
}
.contact-list li .icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--c-button);        /* gold accent per palette */
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contact-list li a { font-size: 14px; color: rgba(255,255,255,0.88); }
.contact-list li { color: rgba(255,255,255,0.82); }
.contact-list li.contact-phone { padding-top: 6px; }
.contact-list li.contact-phone .icon {
  /* Match the muted text styling — fainter bubble, fainter stroke,
     a touch smaller so the whole row reads as the quietest element
     in the Contact block. */
  width: 24px; height: 24px;
  background: rgba(247,245,240,0.05);
  color: rgba(247,245,240,0.35);
}
.contact-list li.contact-phone a {
  font-size: 11px;
  color: rgba(247,245,240,0.32);
  letter-spacing: 0.02em;
}
.contact-list li.contact-phone a:hover { color: rgba(247,245,240,0.6); }
.contact-list li.contact-phone:hover .icon { color: rgba(247,245,240,0.6); }
.footer-grid li a:hover { color: var(--c-button); }
.footer-brand .logo-text .name { color: var(--c-bg); }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.68); margin-top: 8px; max-width: 320px; line-height: 1.5; }

/* Reveal on scroll — content is visible by default; animation only when JS adds .js class.
   Critical for SEO + no-JS users: never hide content unless we know JS is running. */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Image placeholders style */
.img-loading {
  background: linear-gradient(110deg, var(--c-bg-2) 30%, #E4DECF 50%, var(--c-bg-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Decorative ornament */
.orn-line {
  width: 80px; height: 1.5px;
  background: var(--c-accent);
  margin: 22px auto 0;
}
.orn-line.left { margin-left: 0; margin-right: 0; }

/* Testimonial */
.testimonial {
  padding: 96px 0;
  text-align: center;
}
.testimonial blockquote {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.0vw, 42px);
  line-height: 1.25;
  color: var(--c-text);
  max-width: 900px;
  margin: 0 auto;
  letter-spacing: -0.01em;
}
.testimonial blockquote::before {
  content: "\201C";
  display: block;
  font-size: 80px;
  line-height: 0.5;
  color: var(--c-accent);
  margin-bottom: 18px;
}
.testimonial cite {
  display: block;
  margin-top: 28px;
  font-family: var(--ff-body);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}

/* Service intro w/ image card */
.svc-intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) { .svc-intro-grid { grid-template-columns: 1fr; } }
.svc-feature-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: 36px;
  border: 1px solid var(--c-line);
}
.svc-feature-card .icon {
  width: 56px; height: 56px;
  background: rgba(182,106,30,0.16);
  color: var(--c-accent-deep);
  display: grid; place-items: center;
  border-radius: 16px;
  margin-bottom: 22px;
}
.svc-feature-card h3 { font-size: 24px; margin-bottom: 12px; }
.svc-feature-card p { font-size: 15px; line-height: 1.6; }

/* Small daisy mark */
.daisy-mark {
  width: 100%; height: 100%;
}