/* ==========================================================================
   Maiya's Gardening & Renovation — main stylesheet
   --------------------------------------------------------------------------
   Layout concept: a "seed-catalogue" look. Warm cream paper, a deep-green
   service band, burgundy calls to action, and real photos and film.

   HOW TO READ THIS FILE (top to bottom)
     1. Design tokens: brand colours, fonts, sizes  <- change the brand here
     2. Base: page defaults, links, headings, keyboard focus
     3. Layout helpers: containers, section spacing, eyebrows
     4. Header + navigation (including the phone menu)
     5. Buttons
     6. Home page
        - Hero film (desktop/tablet), then the phone version with the
          story-style progress bar
        - Where we work (towns + Google Map)
        - Inner-page headers with arch photos, photo crop helpers
        - Video player (shared by the hero film and the services showreel)
        - Before/after label, services band, calendar, how it works,
          before/after slider, call-to-action band
     7. Inner pages: services, FAQs, gallery, reviews, contact, about
     8. Forms (contact + quote)
     9. Footer, floating Call/WhatsApp buttons, phone action bar
        Responsive breakpoints (tablet and smaller)
        Phone layout pass (everything that changes on phones, in one place)
    10. Motion preferences (calmer pages for people who ask for less motion)

   Breakpoints used: 1020px (tablet), 820px (small tablet), 640px (phone),
   560px and 380px (small phones).
   ========================================================================== */

/* 1. DESIGN TOKENS ------------------------------------------------------- */
:root {
  /* Brand palette (supplied by the client) */
  --bur: #A23F3B;        /* Primary  – burgundy/red: main calls to action  */
  --bur-dk: #82302D;     /* darker burgundy for hover/pressed states        */
  --grn: #315B35;        /* Secondary – deep garden green                   */
  --grn-dk: #24432A;     /* darker green for bands and the footer           */
  --olv: #8D9B38;        /* Accent – olive/leaf green                       */
  --gold: #C99A3D;       /* Highlight – warm gold                           */
  --cream: #F5EFE6;      /* Background – warm cream                         */

  /* Neutrals, tinted warm so they sit with the cream rather than fight it */
  --paper: #FCF8F2;      /* raised surfaces: cards, form fields            */
  --ink: #2B2420;        /* body text (warm near-black, AA on cream)        */
  --muted: #65594F;      /* secondary text                                  */
  --line: #E2D6C4;       /* hairlines and borders                           */
  --on-dark: #F5EFE6;    /* text on green / burgundy                        */

  /* Typography: a sturdy display serif, a friendly sans for reading,
     and a handwritten face used sparingly for "gardener's notes".        */
  --f-display: "Young Serif", Georgia, "Times New Roman", serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* Fluid type scale (clamp = min, preferred, max) */
  --t-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --t-lg: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --t-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --t-h2: clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
  --t-h1: clamp(2.5rem, 1.7rem + 3.9vw, 5rem);

  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 1px 2px rgba(43, 36, 32, .06), 0 12px 32px -12px rgba(43, 36, 32, .22);
  /* Page width: side margin grows with the screen (16px on phones, up to 64px),
     and content stops widening at 1440px on very large monitors */
  --gutter: clamp(16px, 4.5vw, 64px);
  --max: 1440px;
  --header-h: 76px;
  color-scheme: light;   /* the brand is a single, deliberate light look */
}

/* 2. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* belt-and-braces: never scroll sideways */
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; color: var(--grn-dk); }
h1 { font-size: var(--t-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); }
p { margin: 0 0 1em; max-width: 65ch; }
a { color: var(--bur); text-underline-offset: 3px; }
a:hover { color: var(--bur-dk); }
ul { padding-left: 1.2em; }
[hidden] { display: none !important; }

/* Visible keyboard focus everywhere (important for accessibility audits) */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* Screen-reader-only helper */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "Skip to content" link: hidden until a keyboard user tabs to it */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--grn); color: var(--on-dark); padding: .6em 1em; border-radius: 8px; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; color: var(--on-dark); }

/* 3. LAYOUT -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bur); margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.lead { font-size: var(--t-lg); color: var(--muted); }
.section-head { display: grid; gap: 4px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 860px; }
.section-head--split { max-width: none; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.hand { font-family: var(--f-hand); font-weight: 600; font-size: 1.45em; line-height: 1; color: var(--bur); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }

/* 4. HEADER + NAVIGATION ------------------------------------------------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100;
  background: rgba(245, 239, 230, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(43,36,32,.5); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--grn-dk); }
.brand img { width: 52px; height: 52px; }
.brand-name { display: grid; line-height: 1.05; }
.brand-name strong { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; color: var(--bur); }
.brand-name span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--grn); }

.nav-toggle { display: none; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: block; padding: .5em .8em; border-radius: 999px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: .96rem; transition: background .2s, color .2s;
}
.nav-list a:hover { background: rgba(141, 155, 56, .16); color: var(--grn-dk); }
.nav-list a[aria-current="page"] { color: var(--bur); background: rgba(162, 63, 59, .08); }
.nav-cta { margin-left: 8px; }
/* The quote button keeps its button colours (overrides the plain link styles above) */
.nav-list .btn, .nav-list .btn:hover, .nav-list .btn[aria-current="page"] { color: var(--on-dark); background: var(--bg); padding: .55em 1.05em; border-radius: 999px; }
.nav-list .btn[aria-current="page"] { --bg: var(--bur-dk); --bd: var(--bur-dk); }

/* Mobile navigation: a full-width panel under the header */
@media (max-width: 1020px) {
  .nav-toggle {
    display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--paper); color: var(--grn-dk); cursor: pointer;
  }
  .nav-toggle .bar { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .25s; }
  .nav-toggle .bar + .bar { margin-top: 5px; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    position: absolute; inset: 100% 0 auto 0; background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 24px; box-shadow: 0 24px 40px -24px rgba(43,36,32,.45);
    display: none;
  }
  .site-nav.is-open { display: block; animation: drop .22s ease-out; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-list a { padding: .85em 1em; border-radius: 10px; font-size: 1.05rem; }
  .nav-cta { margin: 10px 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* 5. BUTTONS ------------------------------------------------------------- */
.btn {
  --bg: var(--bur); --fg: var(--on-dark); --bd: var(--bur);
  display: inline-flex; align-items: center; gap: .55em; min-height: 48px;   /* 48px = Google tap-target guidance */
  padding: .75em 1.35em; border-radius: 999px; border: 2px solid var(--bd);
  background: var(--bg); color: var(--fg); font: 700 1rem/1 var(--f-body); text-decoration: none;
  cursor: pointer; transition: transform .18s, background .2s, box-shadow .2s, color .2s;
}
.btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(43,36,32,.6); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--primary:hover { --bg: var(--bur-dk); --bd: var(--bur-dk); }
.btn--green { --bg: var(--grn); --bd: var(--grn); }
.btn--green:hover { --bg: var(--grn-dk); --bd: var(--grn-dk); }
.btn--ghost { --bg: transparent; --fg: var(--grn-dk); --bd: var(--grn); }
.btn--ghost:hover { --bg: var(--grn); --fg: var(--on-dark); }
.btn--light { --bg: var(--cream); --fg: var(--bur); --bd: var(--cream); }
.btn--light:hover { --fg: var(--bur-dk); }
.btn--outline-light { --bg: transparent; --fg: var(--on-dark); --bd: rgba(245,239,230,.6); }
.btn--outline-light:hover { --bg: rgba(245,239,230,.12); }
.btn--sm { min-height: 42px; padding: .55em 1.05em; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* 6. HOME PAGE ----------------------------------------------------------- */

/* Phone number line under the hero buttons */
.hero-phone { margin-top: 18px; color: var(--muted); font-size: var(--t-sm); }
.hero-phone a { font-weight: 800; color: var(--grn-dk); text-decoration: none; font-size: 1.15rem; letter-spacing: .02em; }

/* Trust strip: the four promises the client asked for */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 4vw, 44px); padding: 0; list-style: none; }
.trust li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.trust svg { width: 26px; height: 26px; flex: none; color: var(--olv); }

/* Home hero film ------------------------------------------------------------
   The renovation film plays behind the headline inside a framed panel. A
   deep-green wash on the left keeps the text readable on every frame, and
   the six-stage filmstrip overlaps the panel's bottom edge onto the cream. */
.hero-film { position: relative; isolation: isolate; --hf-inset: clamp(0px, 1.6vw, 24px); --hf-overlap: 0px; }
.hero-film .hf-media {
  position: absolute; top: 0; bottom: var(--hf-overlap); left: var(--hf-inset); right: var(--hf-inset);
  aspect-ratio: auto; max-width: none; z-index: -1;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: none;
}
.hero-film .hf-media::after {
  background:
    linear-gradient(90deg, rgba(20, 36, 23, .9) 0%, rgba(20, 36, 23, .72) 36%, rgba(20, 36, 23, .18) 68%, rgba(20, 36, 23, 0) 100%),
    linear-gradient(0deg, rgba(20, 36, 23, .55) 0%, rgba(20, 36, 23, 0) 38%);
}
.hf-inner { position: relative; display: flex; align-items: center; min-height: clamp(480px, 64vh, 640px); padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 104px); }
.hf-copy { max-width: 660px; min-width: 0; color: var(--on-dark); }
.hf-copy h1 { color: var(--on-dark); font-size: clamp(2.4rem, 1.5rem + 3.3vw, 4.25rem); text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hf-copy h1 .accent { color: var(--gold); position: relative; white-space: nowrap; }
.hf-copy h1 .accent::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 60 4 120 4 170 9 S 260 16 297 6' fill='none' stroke='%23F5EFE6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hf-copy .eyebrow { color: var(--gold); }
.hf-copy .lead { color: rgba(245, 239, 230, .88); max-width: 50ch; margin-bottom: 1.6em; }
.hf-copy .hero-phone { color: rgba(245, 239, 230, .78); }
.hf-copy .hero-phone a { color: var(--on-dark); }

/* Top-right cluster: the before/after label plus pause and sound */
.hf-side { position: absolute; top: clamp(16px, 2.5vw, 28px); right: var(--gutter); display: flex; align-items: center; gap: 10px; z-index: 2; }
.hf-side .reel-tag { position: static; }
.hf-side .reel-btns { position: static; }
.hero-film .hf-media .reel-play { left: 52%; }

/* Rotating seal: a slow-turning ring of text around a leaf, bottom right */
.seal { position: absolute; right: var(--gutter); bottom: clamp(28px, 4vw, 48px); width: 148px; height: 148px; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: seal-spin 36s linear infinite; }
.seal-ring text { font: 700 11.5px/1 var(--f-body); fill: var(--cream); text-transform: uppercase; }
.seal-core { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--bur); color: var(--cream); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.seal-core svg { width: 34px; height: 34px; }
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* The four promises sit just under the hero film */
.trust.hf-trust { margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 1020px) {
  .seal { display: none; }
}
/* Phones: the film fills the screen behind the words, like a story ---------
   Same idea as desktop (film behind the headline) but shaped for a tall
   screen: the film covers the whole first screen, a dark-green fade rises
   from the bottom so the words read clearly, and a three-part progress bar
   across the top fills as the film moves from "Before" to "After". */
@media (max-width: 640px) {
  .hero-film { --hf-inset: 0px; }
  /* The film panel covers the whole hero, with softly rounded bottom corners */
  .hero-film .hf-media { inset: 0; border-radius: 0 0 28px 28px; }
  /* Keep the middle of each scene in view on a tall, narrow screen */
  .hero-film .reel-video { object-position: 50% 40%; }
  /* Fade: light at the top (for the progress bar), clear in the middle
     (to see the film), deep green at the bottom (behind the words) */
  .hero-film .hf-media::after {
    background: linear-gradient(180deg,
      rgba(20, 36, 23, .72) 0%, rgba(20, 36, 23, .3) 10%, rgba(20, 36, 23, 0) 18%,
      rgba(20, 36, 23, .1) 28%, rgba(20, 36, 23, .78) 50%, rgba(20, 36, 23, .9) 62%, rgba(20, 36, 23, .96) 100%);
  }
  /* The words sit at the bottom of a screen-tall hero. 100svh = the visible
     screen height on phones (100vh is the fallback for older browsers);
     the header and the bottom action bar are taken off so nothing hides. */
  .hf-inner {
    position: static; align-items: flex-end;
    min-height: calc(100vh - var(--header-h) - 68px);
    min-height: calc(100svh - var(--header-h) - 68px);
    padding-block: 120px 34px;
  }
  .hf-copy h1 { font-size: clamp(2.15rem, 9.4vw, 2.75rem); }
  .hf-copy .lead { font-size: 1rem; line-height: 1.55; margin-bottom: 1.3em; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
  .hf-copy .eyebrow { margin-bottom: .6rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
  /* The two buttons side by side, to leave more of the screen for the film */
  .hf-copy .btn-row > .btn { flex: 1 1 auto; white-space: nowrap; padding-inline: .9em; font-size: .95rem; }
  /* The phone number line is dropped here: the bottom bar already has Call */
  .hf-copy .hero-phone { display: none; }
  /* Pause and sound sit under the progress bar; the "before/after" pill is
     replaced on phones by the progress bar's own labels */
  .hf-side { top: 44px; right: 16px; }
  .hf-side .reel-tag { display: none; }
  /* Paused (reduced motion / Data Saver): play button in the clear middle */
  .hero-film .hf-media .reel-play { left: 0; right: 0; top: 0; bottom: 62%; }
}

/* Very narrow phones (about 380px and under): drop the arrow so both hero
   buttons still fit on one line */
@media (max-width: 380px) {
  .hf-copy .btn--primary svg { display: none; }
}

/* Story-style progress bar (phones only) ------------------------------------
   Three segments, each filled by main.js section 6 through the --p variable
   (0 = empty, 1 = full) as the film plays that part. */
.hf-story { display: none; }
@media (max-width: 640px) {
  .hf-story { position: absolute; z-index: 2; top: 12px; left: 16px; right: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; pointer-events: none; }
  .hf-seg { display: grid; gap: 6px; min-width: 0; }
  .hf-seg i { display: block; height: 3px; border-radius: 3px; background: rgba(245, 239, 230, .35); overflow: hidden; }
  .hf-seg i::after { content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--cream); border-radius: 3px; }
  .hf-seg b { font: 700 .66rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 239, 230, .78); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); transition: color .3s; }
  .hf-seg.is-current b { color: var(--gold); }
  [data-reel]:not(.is-enhanced) .hf-story { display: none; }
}

/* Where we work: words and county lists beside the map ------------------- */
.area-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.area-copy { min-width: 0; }
.area-counties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 26px 0 22px; }
.area-county { min-width: 0; }
.area-county h3 { font: 800 .76rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--bur); margin-bottom: 10px; }
.area-county .areas { gap: 8px; }
.area-county .areas li { padding: 0; border: 0; background: none; }
/* Each town is a link to Google Maps; main.js (section 7) turns it into a
   button that drops a pin on the embedded map instead */
.town-pin {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: .4em .85em;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.town-pin svg { width: 15px; height: 15px; color: var(--bur); flex: none; transition: color .2s; }
.town-pin:hover { border-color: var(--olv); color: var(--grn-dk); }
.town-pin[aria-pressed="true"] { background: var(--grn); border-color: var(--grn); color: var(--on-dark); }
.town-pin[aria-pressed="true"] svg { color: var(--gold); }
/* "All areas" resets the map to the whole region */
.town-pin--all { background: none; border-style: dashed; }
.area-map-hint { display: flex; align-items: center; gap: 8px; margin: -6px 0 18px; font-size: .9rem; color: var(--muted); }
.area-map-hint svg { width: 18px; height: 18px; color: var(--bur); flex: none; }
.area-note { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--muted); }
.area-note svg { width: 20px; height: 20px; color: var(--bur); flex: none; margin-top: 3px; }
.area-map { margin: 0; min-width: 0; }
.area-map figcaption { margin-top: 10px; font-size: .85rem; color: var(--muted); }
/* Google Map: a framed window onto Google Maps. The cream panel behind it
   holds a backup link, which shows if the map ever fails to load. */
.area-map-frame { position: relative; aspect-ratio: 5 / 4; max-width: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--paper); }
.area-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.area-map-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--muted); }
.area-map-fallback svg { width: 34px; height: 34px; margin-inline: auto; color: var(--bur); }
.area-map figcaption a { font-weight: 700; }
@media (max-width: 900px) { .area-grid { grid-template-columns: minmax(0, 1fr); } }

/* Inner-page heroes: words on the left, an arch-topped photo on the right
   (an arch like a garden gateway), with a gold outline offset behind it. */
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.page-hero-photo { position: relative; margin: 0; justify-self: end; width: min(100%, 400px); }
.page-hero-photo::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--gold); border-radius: 999px 999px var(--radius-lg) var(--radius-lg); pointer-events: none; }
.page-hero-photo img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow); }
.page-hero-photo .hand { position: absolute; left: -18px; bottom: 22px; z-index: 1; background: var(--cream); padding: 4px 14px; border-radius: 10px; transform: rotate(-4deg); box-shadow: var(--shadow); }
@media (max-width: 820px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero-photo { justify-self: stretch; width: auto; margin-right: 14px; }
  .page-hero-photo img { aspect-ratio: 4 / 3; border-radius: 180px 180px var(--radius-lg) var(--radius-lg); }
  .page-hero-photo::before { border-radius: 180px 180px var(--radius-lg) var(--radius-lg); }
  .page-hero-photo .hand { left: 10px; }
}

/* Crop helpers for 16:9 stills shown in taller frames (CSP blocks inline styles) */
.op-left { object-position: 22% 50%; }
.op-right { object-position: 78% 50%; }
.op-top { object-position: 50% 28%; }

/* A photo with the gold offset frame (About page) */
.framed { position: relative; margin: 0; }
.framed::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 2px solid var(--gold); border-radius: var(--radius-lg); pointer-events: none; }
.framed img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.framed figcaption { position: absolute; left: 18px; bottom: -16px; background: var(--cream); padding: 4px 14px; border-radius: 10px; transform: rotate(-3deg); box-shadow: var(--shadow); }
@media (max-width: 820px) { .framed::before { inset: 10px -8px -10px 8px; } }

/* Services page: the showreel on plain cream */
.showreel.showreel--plain { background: none; padding-block: clamp(32px, 5vw, 56px) 0; }

/* Showreel video ----------------------------------------------------------
   The section's background is half cream, half green, so the film frame
   straddles the hero and the services band and visually joins them. */
.showreel { background: linear-gradient(to bottom, var(--cream) 0 50%, var(--grn) 50% 100%); }
.reel-wrap { position: relative; margin: 0; }
.reel {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%;
  border-radius: var(--radius-lg); background: var(--grn-dk);
  box-shadow: 0 34px 60px -32px rgba(20, 30, 20, .7), 0 0 0 1px rgba(245, 239, 230, .08);
}
.reel-video { width: 100%; height: 100%; object-fit: cover; }
/* Dark scrims top and bottom so the white text and buttons stay readable on any frame */
.reel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 26, 18, .62) 0%, rgba(18, 26, 18, 0) 34%, rgba(18, 26, 18, 0) 62%, rgba(18, 26, 18, .6) 100%);
}
.reel-title {
  position: absolute; z-index: 2; left: clamp(16px, 3vw, 36px); top: clamp(14px, 3vw, 32px); margin: 0;
  max-width: 15ch; color: var(--on-dark); font-size: clamp(1.25rem, .8rem + 2.2vw, 2.7rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35); pointer-events: none;
}
.reel-title .hand { display: block; color: var(--gold); font-size: .6em; margin-bottom: .25em; transform: rotate(-2deg); transform-origin: left; }

/* Big centred play button: shown whenever the film is paused */
.reel-play {
  position: absolute; z-index: 2; inset: 0; margin: auto; width: clamp(64px, 9vw, 88px); height: clamp(64px, 9vw, 88px);
  border-radius: 50%; border: 0; background: var(--bur); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7); transition: transform .2s, opacity .3s;
}
.reel-play svg { width: 40%; height: 40%; margin-left: 6%; }
.reel-play:hover { transform: scale(1.07); }
[data-reel].is-playing .reel-play { opacity: 0; pointer-events: none; }

/* Small round controls, bottom right */
.reel-btns { position: absolute; z-index: 2; right: clamp(12px, 2.4vw, 24px); bottom: clamp(12px, 2.4vw, 24px); display: flex; gap: 8px; }
.reel-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--on-dark);
  background: rgba(18, 26, 18, .5); border: 1px solid rgba(245, 239, 230, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s;
}
.reel-btn:hover { background: var(--bur); border-color: var(--bur); }
.reel-btn svg { width: 20px; height: 20px; }
/* Each button holds two icons; the state classes on .reel pick which one shows */
[data-reel].is-playing .ico-play, [data-reel]:not(.is-playing) .ico-pause,
[data-reel].is-muted .ico-sound, [data-reel]:not(.is-muted) .ico-muted { display: none; }

/* Chapter buttons: overlaid bottom-left on larger screens, below the film on phones */
.reel-chapters {
  position: absolute; z-index: 2; left: clamp(12px, 2.4vw, 24px); bottom: clamp(12px, 2.4vw, 24px); right: 130px;
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.reel-chapter {
  display: grid; gap: 7px; width: 100%; min-width: 150px; min-height: 44px; padding: 9px 14px 10px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(245, 239, 230, .16); background: rgba(18, 26, 18, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: rgba(245, 239, 230, .78); font: 700 .86rem/1.2 var(--f-body); transition: background .2s, color .2s;
}
.reel-chapter:hover, .reel-chapter.is-active { color: var(--on-dark); background: rgba(18, 26, 18, .7); }
.reel-chapter .bar { display: block; height: 3px; border-radius: 3px; background: rgba(245, 239, 230, .25); overflow: hidden; }
/* --p (0 to 1) is set by main.js as each scene plays */
.reel-chapter .bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--gold); border-radius: 3px; }

/* Without JavaScript the browser's own controls are used, so hide ours */
[data-reel]:not(.is-enhanced) .reel-play,
[data-reel]:not(.is-enhanced) .reel-btns,
[data-reel]:not(.is-enhanced) .reel-tag,
[data-reel]:not(.is-enhanced) .bar,
[data-reel]:not(.is-enhanced) .reel-chapters { display: none; }

@media (max-width: 640px) {
  .reel-chapters { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .reel-chapter { min-width: 0; padding: 8px 10px 9px; font-size: .76rem; background: rgba(18, 26, 18, .35); }
  .reel-btn { width: 40px; height: 40px; }
  .reel-title .hand { display: none; }
}

/* "before / work in progress / after" label that follows the hero film
   (desktop and tablet; phones show the progress bar instead) */
.reel-tag {
  position: absolute; z-index: 2; top: 14px; left: 14px; padding: 4px 14px; border-radius: 999px;
  font: 600 1.35rem/1.2 var(--f-hand); color: var(--cream); background: rgba(43, 36, 32, .75);
  pointer-events: none; transition: background .3s;
}
.reel-tag[data-phase="work"] { background: var(--grn); }
.reel-tag[data-phase="after"] { background: var(--bur); }

/* Deep-green services band */
.band-green { background: var(--grn); color: var(--on-dark); position: relative; isolation: isolate; }
.band-green h2, .band-green h3 { color: var(--on-dark); }
.band-green .eyebrow { color: var(--gold); }
.band-green .lead { color: rgba(245,239,230,.82); }
.band-green::before { /* faint leaf texture made from the logo, purely decorative */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EFE6' stroke-width='.7' stroke-linecap='round'%3E%3Cpath d='M5 19c0-9 6-14 15-14 0 9-5 15-14 15'/%3E%3Cpath d='M5 19c3-4 6-6.5 10-9'/%3E%3C/svg%3E") right -90px top -70px / 460px no-repeat;
}
.service-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.service-card {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 22px; min-width: 0;
  background: var(--grn-dk); border-radius: var(--radius-lg); color: var(--on-dark); text-decoration: none;
  border: 1px solid rgba(245,239,230,.08); transition: transform .25s, background .25s;
}
.service-card:hover { transform: translateY(-6px); background: #1d3822; color: var(--on-dark); }
/* Photo sits flush with the card's top edge; the icon badge overlaps it */
.service-card .card-photo { display: block; margin: -26px -22px 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: var(--grn); }
.service-card .card-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.service-card:hover .card-photo img { transform: scale(1.06); }
.service-card .icon { position: relative; margin-top: -34px; margin-left: 2px; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--grn-dk); color: var(--gold); border: 2px solid rgba(201,154,61,.55); }
.service-card .icon svg { width: 32px; height: 32px; }
.service-card h3 { font-size: 1.35rem; margin: 6px 0 0; }
.service-card p { color: rgba(245,239,230,.78); font-size: .97rem; margin: 0; }
.service-card .more { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--gold); display: inline-flex; gap: .4em; align-items: center; }
.service-card:hover .more svg { transform: translateX(4px); }
.service-card .more svg { width: 18px; height: 18px; transition: transform .2s; }

/* Gardener's calendar: what we do when, through the UK year */
.calendar-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); }
.calendar { min-width: 760px; display: grid; grid-template-columns: 200px repeat(12, minmax(0, 1fr)); padding: 18px 22px 22px; font-size: .9rem; }
.calendar > * { padding: 10px 4px; }
.cal-month { text-align: center; font-weight: 700; color: var(--muted); letter-spacing: .06em; font-size: .78rem; text-transform: uppercase; border-radius: 8px 8px 0 0; }
.cal-label { font-weight: 700; color: var(--grn-dk); padding-left: 0; display: flex; align-items: center; }
.cal-cell { position: relative; display: flex; align-items: center; }
.cal-cell::before { content: ""; height: 14px; width: 100%; border-radius: 3px; background: transparent; }
.cal-cell.l1::before { background: rgba(141,155,56,.28); }
.cal-cell.l2::before { background: rgba(141,155,56,.62); }
.cal-cell.l3::before { background: var(--grn); }
/* Hatched = "nesting season: we check for birds before cutting" */
.cal-cell.nest::before { background: repeating-linear-gradient(135deg, rgba(201,154,61,.85) 0 4px, rgba(201,154,61,.25) 4px 8px); }
.cal-month.is-now, .cal-cell.is-now { background: rgba(162,63,59,.08); }
.cal-month.is-now { color: var(--bur); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: var(--t-sm); color: var(--muted); padding: 0; list-style: none; }
.cal-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cal-legend i { width: 26px; height: 12px; border-radius: 3px; display: inline-block; }
.cal-legend .k1 { background: rgba(141,155,56,.28); }
.cal-legend .k2 { background: rgba(141,155,56,.62); }
.cal-legend .k3 { background: var(--grn); }
.cal-legend .kn { background: repeating-linear-gradient(135deg, rgba(201,154,61,.85) 0 4px, rgba(201,154,61,.25) 4px 8px); }
.now-card { margin-top: 22px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: var(--grn); color: var(--on-dark); padding: 20px 24px; border-radius: var(--radius-lg); }
.now-card .hand { color: var(--gold); font-size: 2rem; }
.now-card p { margin: 0; max-width: none; }

/* How it works: a real sequence, so numbers are meaningful here */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; list-style: none; padding: 0; margin: 0; position: relative; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 68px; right: -12px; border-top: 2px dashed var(--line); z-index: -1; }
.steps li { position: relative; z-index: 1; min-width: 0; }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--bur); color: var(--bur); font: 400 1.5rem/1 var(--f-display);
}
.steps h3 { font-size: 1.25rem; margin-bottom: .3em; }
.steps p { color: var(--muted); font-size: .97rem; }

/* Before/after slider (accessible: driven by a real range input) */
.ba { --pos: 50%; position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: var(--line); box-shadow: var(--shadow); user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba .ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--cream); pointer-events: none; }
.ba .ba-line::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A23F3B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba input[type="range"]:focus-visible + .ba-line::after { outline: 3px solid var(--gold); outline-offset: 3px; }
.ba-tag { position: absolute; top: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(43,36,32,.72); color: var(--cream); font: 600 1.25rem/1.2 var(--f-hand); pointer-events: none; }
.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; background: var(--bur); }

/* Areas covered */
.areas { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.areas li { padding: .5em 1em; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 600; font-size: .95rem; }
.areas li:nth-child(3n+1) { border-color: rgba(141,155,56,.6); }

/* Burgundy call-to-action band */
.cta-band { background: var(--bur); color: var(--on-dark); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 340px; height: 340px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EFE6' stroke-width='.7' stroke-linecap='round'%3E%3Cpath d='M5 19c0-9 6-14 15-14 0 9-5 15-14 15'/%3E%3Cpath d='M5 19c3-4 6-6.5 10-9'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .22; z-index: -1; transform: rotate(-8deg); }
.cta-band h2 { color: var(--on-dark); margin-bottom: .25em; }
.cta-band p { color: rgba(245,239,230,.88); margin: 0; }

/* 7. INNER PAGES --------------------------------------------------------- */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 84px) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero-copy { max-width: 680px; min-width: 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; font-size: var(--t-sm); color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.breadcrumb a { color: var(--muted); }

/* Services detail rows */
.service-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.service-row:last-of-type { border-bottom: 0; }
.service-row:nth-of-type(even) .service-media { order: 2; }
.service-media { position: relative; min-width: 0; }
.service-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.service-media .hand { position: absolute; left: 18px; bottom: -18px; background: var(--cream); padding: 4px 14px; border-radius: 10px; transform: rotate(-3deg); box-shadow: var(--shadow); }
.service-copy { min-width: 0; }
.ticks { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%; background: var(--olv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EFE6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.note { border-left: 4px solid var(--gold); background: rgba(201,154,61,.1); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .97rem; margin-bottom: 1.4em; }
.note strong { color: var(--grn-dk); }
.service-index { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* FAQ accordion: native <details>, so it works with no JavaScript */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 22px; transition: border-color .2s; }
.faq details[open] { border-color: var(--olv); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative; font-weight: 700; color: var(--grn-dk); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 var(--f-display); color: var(--bur); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--muted); }

/* Gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-btn { min-height: 44px; padding: .5em 1.1em; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 600 .95rem/1 var(--f-body); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.filter-btn:hover { border-color: var(--olv); }
.filter-btn[aria-pressed="true"] { background: var(--grn); border-color: var(--grn); color: var(--on-dark); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; grid-auto-flow: dense; }
.g-item { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--line); min-width: 0; }
.g-item.wide { grid-column: span 2; }
.g-item button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.g-item button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.g-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.g-item.wide img { aspect-ratio: 8 / 3; }
.g-item:hover img { transform: scale(1.04); }
.g-item figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; justify-content: space-between; align-items: end; gap: 8px; pointer-events: none; }
.g-item figcaption span { background: rgba(252,248,242,.94); color: var(--grn-dk); padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ba-grid figure { margin: 0; min-width: 0; }
.ba-grid figcaption { margin-top: 12px; font-weight: 700; color: var(--grn-dk); }
.placeholder-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius); background: rgba(141,155,56,.14); border: 1px dashed var(--olv); font-size: .95rem; margin-bottom: 28px; }
.placeholder-note p { margin: 0; max-width: none; }
.placeholder-note svg { width: 22px; height: 22px; flex: none; color: var(--grn); margin-top: 2px; }

/* Lightbox (<dialog> element = built-in focus trapping and Esc to close) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; }
.lightbox::backdrop { background: rgba(28, 24, 21, .86); }
.lightbox img { width: 100%; border-radius: var(--radius); }
.lightbox p { color: var(--cream); text-align: center; margin: 12px auto 0; font-family: var(--f-hand); font-size: 1.6rem; }
.lightbox-close { position: absolute; top: 10px; right: 10px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--cream); color: var(--bur); font-size: 1.6rem; cursor: pointer; }

/* Reviews */
.review-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-bottom: 40px; }
.review-panel { background: var(--grn); color: var(--on-dark); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); }
.review-panel h2 { color: var(--on-dark); font-size: var(--t-h3); }
.review-panel p { color: rgba(245,239,230,.85); }
.promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.promise-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.promise-list svg { width: 40px; height: 40px; color: var(--bur); }
.promise-list strong { display: block; color: var(--grn-dk); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.review-card { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.review-card.is-template { border-style: dashed; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1.1rem; }
.review-card blockquote { margin: 0; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.5; color: var(--ink); }
.review-card figcaption { margin-top: auto; font-weight: 700; color: var(--grn-dk); font-size: .95rem; }
.review-card figcaption span { display: block; font-weight: 500; color: var(--muted); font-size: .88rem; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-cards { display: grid; gap: 14px; }
.contact-card { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
a.contact-card:hover { border-color: var(--olv); transform: translateY(-2px); color: var(--ink); }
.contact-card .icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--bur); color: var(--on-dark); }
.contact-card .icon--green { background: var(--grn); }
.contact-card .icon--gold { background: var(--gold); }
.contact-card .icon svg { width: 26px; height: 26px; }
.contact-card strong { display: block; font-size: 1.1rem; color: var(--grn-dk); }
.contact-card span { color: var(--muted); font-size: .95rem; }

/* About page: photo mosaic (one large image, two small) */
.photo-mosaic { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; }
.photo-mosaic figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; min-width: 0; background: var(--line); }
.photo-mosaic .pm-main { grid-row: span 2; }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .photo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .photo-mosaic .pm-main { grid-column: 1 / -1; grid-row: auto; }
  .photo-mosaic img { aspect-ratio: 4 / 3; }
}

/* About page */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.values li { padding: 26px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.values svg { width: 40px; height: 40px; color: var(--olv); margin-bottom: 12px; }
.values h3 { font-size: 1.3rem; }
.values p { color: var(--muted); margin: 0; }
.about-figure { margin: 0; position: relative; }
.about-figure img { width: 100%; max-width: 440px; margin-inline: auto; }
.about-figure figcaption { text-align: center; margin-top: 8px; }

/* 8. FORMS --------------------------------------------------------------- */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 700; font-size: .95rem; color: var(--grn-dk); padding: 0; }
.field .hint { font-size: .85rem; color: var(--muted); font-weight: 500; }
.field .req { color: var(--bur); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font: 500 1rem/1.4 var(--f-body);   /* 16px+ stops iOS zooming on focus */
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--grn); box-shadow: 0 0 0 4px rgba(49,91,53,.15); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bur); }
.error-msg { color: var(--bur); font-size: .86rem; font-weight: 600; min-height: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: .55em 1.05em; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; cursor: pointer; transition: all .2s; }
.chip-check span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--olv); transition: all .2s; }
.chip-check input[type="radio"] + span::before { border-radius: 50%; }
.chip-check input:checked + span { background: var(--grn); border-color: var(--grn); color: var(--on-dark); }
.chip-check input:checked + span::before { background: var(--gold); border-color: var(--gold); }
.chip-check input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--grn); flex: none; }
/* Honeypot: hidden from people, visible to spam bots that fill every field */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; }
.form-status { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); font-weight: 600; }
.form-status.is-success { background: rgba(141,155,56,.18); color: var(--grn-dk); border: 1px solid var(--olv); }
.form-status.is-error { background: rgba(162,63,59,.1); color: var(--bur-dk); border: 1px solid var(--bur); }
.form-status .btn-row { margin-top: 12px; }

/* Quote stepper */
.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 28px; counter-reset: qs; }
.stepper li { counter-increment: qs; display: grid; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.stepper li::before { content: ""; height: 6px; border-radius: 6px; background: var(--line); transition: background .3s; }
.stepper li.is-active, .stepper li.is-done { color: var(--grn-dk); }
.stepper li.is-active::before { background: var(--bur); }
.stepper li.is-done::before { background: var(--olv); }
.q-step h2 { font-size: var(--t-h3); }
.q-step { display: grid; gap: 22px; }
.quote-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.quote-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 16px; }
.quote-aside .review-panel h2 { font-size: 1.4rem; }

/* Privacy / legal pages */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--t-h3); margin-top: 1.6em; }

/* 9. FOOTER, FLOATING BUTTONS, MOBILE BAR -------------------------------- */
.site-footer { background: var(--grn-dk); color: rgba(245,239,230,.82); padding-block: clamp(56px, 7vw, 88px) 28px; margin-top: clamp(56px, 8vw, 96px); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid h2 { font-family: var(--f-body); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-brand .brand-name strong { color: var(--on-dark); }
.footer-brand .brand-name span { color: var(--olv); }
.footer-brand p { margin-top: 14px; font-size: .95rem; }
.footer-phone { font: 400 1.6rem/1.2 var(--f-display); color: var(--on-dark) !important; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(245,239,230,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; }

/* Floating Call + WhatsApp buttons (desktop/tablet) */
.fab-stack { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: grid; gap: 12px; }
.fab { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); transition: transform .2s; position: relative; }
.fab:hover { transform: scale(1.08); color: #fff; }
.fab svg { width: 28px; height: 28px; }
.fab--call { background: var(--bur); }
.fab--wa { background: #1F8A4C; }   /* a deeper WhatsApp green that still passes contrast with white */
.fab--wa::after { /* gentle pulse to draw the eye, disabled for reduced motion */
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1F8A4C; animation: pulse 2.6s ease-out infinite;
}
.fab-label { position: absolute; right: 72px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--ink); color: var(--cream); font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fab:hover .fab-label, .fab:focus-visible .fab-label { opacity: 1; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* Mobile action bar replaces the floating buttons on small screens */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  .fab-stack { display: none; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--grn-dk); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px;
    box-shadow: 0 -10px 30px -12px rgba(0,0,0,.4);
  }
  .mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 12px; color: var(--on-dark); text-decoration: none; font-size: .78rem; font-weight: 700; }
  .mobile-bar a svg { width: 22px; height: 22px; }
  .mobile-bar .mb-call { background: var(--bur); }
  .mobile-bar .mb-wa { background: #1F8A4C; }
  .mobile-bar .mb-quote { background: var(--gold); color: var(--grn-dk); }
}

/* RESPONSIVE BREAKPOINTS ------------------------------------------------- */
@media (max-width: 1020px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-grid, .ba-grid, .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-aside { position: static; }
}
@media (max-width: 820px) {
  .grid-2, .service-row, .contact-grid, .review-summary { grid-template-columns: minmax(0, 1fr); }
  .service-row:nth-of-type(even) .service-media { order: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .steps li::after { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-item.wide { grid-column: auto; }
  .g-item.wide img { aspect-ratio: 4 / 3; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .section-head--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .service-cards, .trust, .reviews-grid, .ba-grid, .values, .footer-grid, .form-grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .g-item.wide { grid-column: auto; }
  .g-item.wide img { aspect-ratio: 4 / 3; }
  .brand img { width: 44px; height: 44px; }
  .brand-name strong { font-size: 1.25rem; }
  .now-card { grid-template-columns: minmax(0, 1fr); }
}

/* PHONE LAYOUT PASS ---------------------------------------------------------
   One place for small-screen refinements, so phones get layouts designed for
   them rather than desktop sections squeezed into one long column. */
@media (max-width: 640px) {
  /* Tighter rhythm: less empty space between sections */
  .section { padding-block: 52px; }
  .section--tight { padding-block: 36px; }
  .section-head { margin-bottom: 24px; }
  .eyebrow { font-size: .76rem; letter-spacing: .1em; }
  .lead { font-size: 1.04rem; }

  /* Button pairs: full width and stacked, so every pair lines up */
  .btn-row { gap: 10px; }
  .btn-row > .btn { flex: 1 1 100%; justify-content: center; }

  /* Promises under the hero: a neat 2 x 2 grid */
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .trust li { padding: 10px 12px; font-size: .84rem; gap: 8px; }
  .trust svg { width: 22px; height: 22px; }

  /* Service cards: a sideways swipe instead of four tall stacked cards */
  .service-cards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter);
  }
  .service-card { flex: 0 0 80%; scroll-snap-align: start; }
  .service-card:hover { transform: none; }

  /* Calendar: all twelve months fit on screen (initials only), no sideways scroll */
  .calendar { min-width: 0; grid-template-columns: 84px repeat(12, minmax(0, 1fr)); padding: 12px 10px 14px; }
  .calendar > * { padding: 7px 1px; }
  .cal-label { font-size: .72rem; line-height: 1.2; padding-right: 6px; }
  .cal-month { font-size: 0; letter-spacing: 0; }
  .cal-month::first-letter { font-size: .7rem; }
  .cal-cell::before { height: 12px; border-radius: 2px; }
  .now-card { padding: 18px; gap: 6px; }

  /* How it works: a compact vertical timeline */
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding-bottom: 20px; }
  .steps li::before { grid-row: span 2; width: 44px; height: 44px; margin: 0; font-size: 1.15rem; background: var(--cream); position: relative; z-index: 1; }
  .steps h3 { font-size: 1.12rem; margin: 9px 0 2px; }
  .steps p { margin: 0; }
  .steps li:not(:last-child)::after { display: block; content: ""; position: absolute; left: 21px; right: auto; top: 46px; bottom: 0; width: 0; border-top: 0; border-left: 2px dashed var(--line); z-index: 0; }

  /* Inner-page headers: a shorter photo so the page gets going sooner */
  .page-hero { padding-block: 22px 34px; }
  .page-hero-grid { gap: 22px; }
  .page-hero-photo img, .page-hero-photo::before { aspect-ratio: 16 / 10; border-radius: 120px 120px var(--radius-lg) var(--radius-lg); }
  .page-hero-photo .hand { font-size: 1.25rem; bottom: 14px; }

  /* Services page: film chapters sit on cream here, so give them solid chips */
  .showreel--plain .reel-chapter { background: var(--paper); color: var(--grn-dk); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .showreel--plain .reel-chapter.is-active { border-color: var(--bur); color: var(--bur); background: var(--paper); }
  .showreel--plain .reel-chapter .bar { background: var(--line); }
  .service-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .service-index .btn { justify-content: center; font-size: .84rem; padding-inline: .6em; }
  .service-row { padding-block: 40px; gap: 26px; }

  /* Gallery: filters in one swipeable row, photos in a tidy two-column grid */
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g-item { border-radius: var(--radius); }
  .g-item img { aspect-ratio: 1 / 1; }
  .g-item.wide { grid-column: span 2; }
  .g-item.wide img { aspect-ratio: 16 / 9; }
  .g-item figcaption { left: 8px; bottom: 8px; right: 8px; }
  .g-item figcaption span { font-size: .72rem; padding: 3px 9px; }
  .ba-tag { font-size: 1.05rem; padding: 2px 10px; }

  /* Quote form: choices in an even two-column grid */
  .chip-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chip-check span { width: 100%; font-size: .9rem; padding: .55em .8em; }
  .stepper li { font-size: .74rem; }
  .form-actions .btn { flex: 1 1 auto; justify-content: center; }
  .form-card { padding: 20px 16px; }

  /* About: the six promises become compact rows */
  .values { gap: 10px; }
  .values li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .values svg { grid-row: span 2; width: 32px; height: 32px; margin: 2px 0 0; }
  .values h3 { font-size: 1.12rem; margin-bottom: .2em; }

  /* Where we work: Greater Manchester (seven towns) gets the full width */
  .area-county:first-child { grid-column: 1 / -1; }
  .area-counties { gap: 16px 18px; }
  /* A squarer map window on phones, so the whole area fits */
  .area-map-frame { aspect-ratio: 1 / 1; }

  /* Calls to action and footer */
  .cta-band { padding: 28px 22px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer-brand, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { margin-top: 32px; }
}
/* The phone action bar covers the bottom of the screen: pad the footer
   instead of the page, so no stray cream strip shows beneath it */
@media (max-width: 720px) {
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Reveal-on-scroll. JavaScript only adds .will-reveal to sections that start
   BELOW the fold, so the first screen is always fully visible (good for
   Google's Largest Contentful Paint score and for link previews). */
.will-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.will-reveal.is-visible { opacity: 1; transform: none; }

/* 10. MOTION PREFERENCES ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .will-reveal { opacity: 1; transform: none; }
  .fab--wa::after { display: none; }
}