/* ==========================================================================
   Alpha Waste Removal — style.css
   Theme: "Night Shift"  |  Palette: black / white / green
   Sections:
     01. Tokens
     02. Base + type
     03. Layout helpers
     04. Buttons + chips
     05. Header / nav
     06. Hero
     07. Trust bar
     08. Bento services
     09. Steps
     10. Reviews
     11. CTA band
     12. Calculator
     13. Areas + postcode check
     14. FAQ
     15. Forms
     16. Prose (legal pages)
     17. Footer
     18. Cookie banner
     19. WhatsApp FAB + mobile action bar
     20. Motion + a11y
   ========================================================================== */

/* 01. Tokens -------------------------------------------------------------
   Black page, white type, green accents. Two rules keep the rest honest:

   1. --ink and --white are TEXT colours only. Every surface comes from the
      elevation ladder below, so no rule has to double as both.
   2. Anything sitting ON a green fill takes --on-green, never --ink. --ink is
      white now; white-on-green is unreadable. */
:root {
  /* type colours */
  --ink:        #FFFFFF;   /* headings, strong */
  --ink-2:      #C7D0CB;   /* body copy */
  --muted:      #8B958F;
  --white:      #FFFFFF;

  /* green */
  --green:      #6DBE45;   /* logo green — fills & accents */
  --green-600:  #82D25A;   /* hover — the old one is swallowed by black */
  --green-700:  #93DE68;   /* green TEXT on black (was dark green on white) */
  --green-100:  #24401A;   /* tint border */
  --green-50:   #16240F;   /* tint fill */
  --on-green:   #0A0F08;   /* text and icons on a green fill */

  /* surfaces — an elevation ladder off pure black */
  --black:      #000000;   /* the page */
  --paper:      #0A0D0B;   /* alternating sections, control tracks */
  --surface:    #121614;   /* cards, inputs, anything raised */
  --panel:      #191E1B;   /* footer, CTA band, trust bar (was --ink) */
  --line:       #262C28;
  --line-dark:  rgba(255, 255, 255, .14);

  /* type */
  --font-display: 'Sora', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  --fs-h1:      clamp(2.15rem, 1.5rem + 2.2vw, 3.3rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.08rem + .4vw, 1.45rem);
  --fs-lede:    clamp(1.05rem, 1rem + .35vw, 1.24rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;

  /* space — one scale, used everywhere, so nothing looks accidental */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.75rem; --s-8: 3.5rem;
  --s-9: 5rem;    --s-10: 7rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* shape */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 38px;
  --pill: 999px;

  /* On black a shadow can only darken, so depth comes from the surface ladder
     and the borders. These stay for where a card overlaps a lighter panel. */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .5);
  --shadow:    0 12px 32px -12px rgba(0, 0, 0, .8);
  --shadow-lg: 0 34px 70px -30px rgba(0, 0, 0, .95);
  --ring: 0 0 0 3px rgba(109, 190, 69, .45);

  --wrap: 1180px;
  --wrap-narrow: 780px;
  --header-h: 76px;
}

/* 02. Base + type -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 var(--s-4);
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; }
li { margin-bottom: .4em; }
strong { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

::selection { background: var(--green); color: var(--on-green); }

.lede { font-size: var(--fs-lede); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }

/* eyebrow — chevron tick borrowed from the logo's "A" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0 0 var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 16px; height: 10px;
  background: currentColor;
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 72% 100%, 50% 55%, 28% 100%);
}
.section-dark .eyebrow { color: var(--green); }

/* 03. Layout helpers ----------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section-paper { background: var(--paper); }
.section-mint { background: var(--green-50); }
.section-dark { background: var(--panel); color: rgba(255, 255, 255, .78); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark strong { color: var(--white); }
/* <strong> defaults to near-black ink, which disappears on every dark panel —
   the footer, the CTA band and the calculator result. */
.site-footer strong, .cta-band strong, .calc-result strong { color: var(--white); }
.section-dark a { color: var(--green); }

.section-head { max-width: 46rem; margin-bottom: var(--s-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

/* minmax(0, 1fr) rather than 1fr: a plain 1fr track grows to the min-content
   width of its widest child, which lets one long word push the whole page
   sideways on a phone. min-width:0 on the children does the same job for
   anything nested. */
.grid { display: grid; gap: var(--s-5); }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

.stack > * + * { margin-top: var(--s-4); }
.center { text-align: center; }
.flow-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.center .flow-actions { justify-content: center; }

/* angled rule — repeats the logo motif as a divider */
.chevron-rule {
  height: 12px;
  background: repeating-linear-gradient(115deg, var(--green) 0 3px, transparent 3px 16px);
  opacity: .55;
  border: 0;
  margin: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
/* A card that is itself a link — the service cross-links and the 404 page. */
a.card-link {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green); color: inherit; }
.card .more {
  margin-top: auto;
  padding-top: .35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.card .more svg { width: 16px; height: 16px; transition: transform .2s ease; }
a.card-link:hover .more svg { transform: translateX(4px); }

.icon-badge {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--green-50);
  color: var(--green-700);
  margin-bottom: var(--s-4);
  flex: none;
}
.icon-badge svg { width: 26px; height: 26px; }

/* 04. Buttons + chips ---------------------------------------------------- */
.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--on-green);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: var(--pill);
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--green); --btn-fg: var(--on-green); }
.btn-primary:hover { --btn-bg: #8AD35F; }
/* Was a near-black pill, which is invisible on a black page. Inverted: the
   secondary CTA is now the white one, green stays the primary. */
.btn-dark { --btn-bg: var(--white); --btn-fg: var(--on-green); }
.btn-dark:hover { --btn-bg: #DDE4E0; }
.btn-white { --btn-bg: var(--white); --btn-fg: var(--on-green); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(255, 255, 255, .26); }
.btn-ghost:hover { --btn-bg: var(--green-50); --btn-bd: var(--green); }
/* Ghost buttons sit on three raised panels — the dark sections, the calculator
   result and the CTA band. Those are lighter than the page, so the button needs
   a lighter hairline than it uses on black or the outline disappears. */
.section-dark .btn-ghost,
.calc-result .btn-ghost,
.cta-band .btn-ghost { --btn-fg: var(--white); --btn-bd: var(--line-dark); }
.section-dark .btn-ghost:hover,
.calc-result .btn-ghost:hover,
.cta-band .btn-ghost:hover { --btn-bg: rgba(255,255,255,.08); --btn-bd: var(--green); }
.btn-wa { --btn-bg: #25D366; --btn-fg: var(--on-green); }
.btn-wa:hover { --btn-bg: #3BE07A; }
.btn-sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: var(--pill);
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-100);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: .01em;
}
.chip svg { width: 15px; height: 15px; }
.chip-dark { background: rgba(255,255,255,.08); border-color: var(--line-dark); color: var(--white); }

.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .65rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393DE68' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .72rem no-repeat;
}
.section-dark .tick-list li::before { background-color: rgba(109,190,69,.2); }

/* 05. Header / nav ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  background: var(--green);
  color: var(--on-green);
  padding: .75rem 1.15rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; color: var(--on-green); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -14px rgba(0,0,0,.9); }

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand-logo { height: 42px; width: auto; }
@media (max-width: 900px) { .brand-logo { height: 36px; } }
@media (max-width: 360px) { .brand-logo { height: 30px; } }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-text { display: grid; line-height: 1; }
.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink);
}
.brand-text span {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--green-700);
  font-weight: 700;
  margin-top: 3px;
}
.site-footer .brand-text strong { color: var(--white); }
.site-footer .brand-text span { color: var(--green); }

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
}
.nav-list li { margin: 0; }
.nav-list a {
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--pill);
  color: var(--ink-2);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav-list a:hover { background: var(--green-50); color: var(--ink); }
.nav-list a[aria-current="page"] { color: var(--ink); font-weight: 700; background: var(--green-50); }

.header-cta { display: flex; align-items: center; gap: .5rem; }
.header-phone { font-family: var(--font-display); font-weight: 700; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform .2s ease, background-color .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1020px) {
  .header-cta .btn-ghost { display: none; }
}
@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .header-cta { display: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: var(--s-4) 1.25rem var(--s-6);
    transform: translateY(-130%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { padding: .9rem .75rem; border-radius: var(--r-sm); font-size: 1.05rem; }
  .nav-list li + li { border-top: 1px solid var(--line); }
  .nav-drawer-cta { display: grid; gap: .6rem; margin-top: var(--s-4); }
}
@media (min-width: 901px) {
  .nav-drawer-cta { display: none; }
}

/* 05b. Credentials bar ---------------------------------------------------
   Directly under the header on every page. Licence and insurance are the
   first thing a customer looks for, so they do not get buried in the footer. */
.credbar {
  background: var(--panel);
  color: rgba(255, 255, 255, .74);
  position: relative;
  overflow: hidden;
}
.credbar::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(109, 190, 69, .14) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.credbar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding-block: .7rem;
  font-size: var(--fs-xs);
  text-align: center;
}
.credbar-item { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.credbar-item strong {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .01em;
}
.credbar-item svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.credbar-sep { width: 5px; height: 5px; border-radius: 50%; background: var(--green); opacity: .8; }

@media (max-width: 900px) {
  .credbar-inner { gap: .35rem 1rem; padding-block: .6rem; }
  .credbar-sep { display: none; }
  .credbar-item { width: 100%; }
}

/* social icons */
.social-links { display: flex; gap: .55rem; margin-top: var(--s-5); }
.social-links a {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line-dark);
  color: var(--white);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.social-links a:hover { background: var(--green); color: var(--on-green); transform: translateY(-2px); }
.social-links svg { width: 20px; height: 20px; }
.foot-list a svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: .35rem; }

/* 06. Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(4rem, 2rem + 7vw, 7rem);
  background: linear-gradient(178deg, var(--green-50) 0%, var(--black) 68%);
  overflow: hidden;
}
.hero::before {
  /* oversized chevron, echoing the logo mark */
  content: "";
  position: absolute;
  right: -6vw; top: -14vh;
  width: 62vw; height: 130%;
  background: var(--green);
  opacity: .14;
  clip-path: polygon(46% 0, 100% 100%, 74% 100%, 46% 40%, 18% 100%, 0 100%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -.035em;
}
.hero h1 .hl {
  color: var(--green-700);
  position: relative;
  white-space: nowrap;
}
.hero h1 .hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .28em;
  background: var(--green);
  opacity: .34;
  border-radius: 4px;
  z-index: -1;
}
.hero-copy .lede { max-width: 34rem; margin-top: var(--s-5); }
.hero-actions { margin-top: var(--s-6); }
.hero-meta {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.hero-visual { position: relative; }
.hero-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  transform: rotate(-1.2deg);
}
.hero-card img { border-radius: var(--r-lg); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.hero-float {
  position: absolute;
  background: var(--surface);
  border-radius: var(--r);
  padding: .8rem 1.05rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.25;
}
.hero-float small { display: block; font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: .74rem; letter-spacing: .02em; }
.hero-float .dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700);
  display: grid; place-items: center;
  flex: none;
}
.hero-float .dot svg { width: 18px; height: 18px; }
.hero-float--tl { top: -1.1rem; left: -1.4rem; }
.hero-float--br { bottom: -1.3rem; right: -1rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 26rem; margin-inline: auto; width: 100%; }
  .hero-card { transform: none; }
  .hero-float--tl { left: -.5rem; top: -.85rem; }
  .hero-float--br { right: -.5rem; bottom: -.9rem; }
  .hero::before { width: 120vw; right: -30vw; opacity: .07; }
}
@media (max-width: 520px) {
  .hero-float { font-size: .8rem; padding: .6rem .8rem; }
  .hero-float .dot { width: 28px; height: 28px; }
}

/* 07. Trust bar ---------------------------------------------------------- */
.trustbar-wrap { position: relative; z-index: 2; margin-top: calc(var(--section-y) * -.45); }
.trustbar {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.trustbar::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(109,190,69,.12) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.trust-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  color: rgba(255,255,255,.72);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.trust-item + .trust-item { border-left: 1px solid var(--line-dark); padding-left: var(--s-5); }
.trust-item strong { display: block; color: var(--white); font-family: var(--font-display); font-size: 1rem; }
.trust-item svg { width: 24px; height: 24px; color: var(--green); flex: none; }

@media (max-width: 900px) {
  .trustbar { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-5); }
  .trust-item + .trust-item { border-left: 0; padding-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line-dark); padding-top: var(--s-4); }
}
@media (max-width: 560px) {
  .trustbar-wrap { margin-top: calc(var(--section-y) * -.3); }
  .trustbar { grid-template-columns: 1fr; padding: var(--s-5); }
  .trust-item:nth-child(n+2) { border-top: 1px solid var(--line-dark); padding-top: var(--s-4); }
}

/* 08. Bento services ----------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.bento-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.bento-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green); color: inherit; }
.bento-item h3 { margin-bottom: .5rem; }
.bento-item p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.bento-item .more {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.bento-item .more svg { width: 16px; height: 16px; transition: transform .2s ease; }
a.bento-item:hover .more svg { transform: translateX(4px); }

.bento-item--feature {
  grid-column: span 2;
  background: var(--panel);
  color: rgba(255,255,255,.76);
  border-color: transparent;
  flex-direction: row;
  align-items: center;
  gap: var(--s-6);
}
.bento-item--feature::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(109,190,69,.13) 0 2px, transparent 2px 24px);
  pointer-events: none;
}
.bento-item--feature > * { position: relative; z-index: 1; }
.bento-item--feature h3 { color: var(--white); font-size: 1.7rem; }
.bento-item--feature p { color: rgba(255,255,255,.72); font-size: var(--fs-body); }
.bento-item--feature .icon-badge { background: rgba(109,190,69,.16); color: var(--green); width: 74px; height: 74px; margin: 0; }
.bento-item--feature .icon-badge svg { width: 34px; height: 34px; }
.bento-item--feature .more { color: var(--green); }

/* wide green card that closes the bento grid */
.bento-item--wide {
  grid-column: span 2;
  background: var(--green-50);
  border-color: var(--green-100);
  flex-direction: row;
  align-items: center;
  gap: var(--s-6);
}
.bento-item--wide h3 { margin-bottom: .4rem; }
.bento-item--wide p { color: var(--ink-2); margin-bottom: 0; }
.bento-item--wide .btn { flex: none; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-item--feature, .bento-item--wide { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-item--feature, .bento-item--wide {
    grid-column: span 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
}

/* 09. Steps -------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 34px; left: 12%; right: 12%;
  border-top: 2px dashed rgba(109, 190, 69, .38);
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step-num {
  width: 68px; height: 68px;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 2px solid var(--green);
  color: var(--green-700);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  box-shadow: 0 0 0 8px var(--green-50);
}
.section-paper .step-num, .section-mint .step-num { background: var(--surface); }
.step p { color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: var(--s-5); text-align: left; }
  .steps::before { display: none; }
  .step { display: grid; grid-template-columns: 68px 1fr; gap: var(--s-4); align-items: start; text-align: left; }
  .step-num { margin: 0; width: 58px; height: 58px; font-size: 1.25rem; box-shadow: 0 0 0 6px var(--green-50); }
  .step h3 { margin-bottom: .3rem; }
}

/* 10. Reviews ------------------------------------------------------------ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: start; }
/* Middle column sits lower, on each row of three. */
.reviews > :nth-child(2), .reviews > :nth-child(5) { margin-top: var(--s-6); }
.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.review blockquote { margin: 0 0 var(--s-5); font-size: 1.03rem; color: var(--ink-2); }
.review figcaption { display: flex; align-items: center; gap: .75rem; }
.review .avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  flex: none;
}
.review cite { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--ink); display: block; font-size: .95rem; }
.review figcaption span { font-size: var(--fs-xs); color: var(--muted); }
.stars { display: flex; gap: 2px; color: var(--green); margin-bottom: var(--s-4); }
.stars svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .reviews { grid-template-columns: 1fr; }
  .reviews > :nth-child(2), .reviews > :nth-child(5) { margin-top: 0; }
}

/* Google listing band */
.google-band {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--s-5);
  max-width: 46rem;
}
.google-band > p { margin: 0; color: var(--ink-2); }
.google-band-brand { display: flex; align-items: center; gap: .9rem; }
.google-band-brand strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
}
.google-band-brand span { font-size: var(--fs-xs); color: var(--muted); }
/* Deliberately still a white disc: the four-colour Google G is a brand asset and
   is only legible on white. It is the one light surface left on the site. */
.google-mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  display: grid; place-items: center;
  flex: none;
}
.google-mark svg { width: 22px; height: 22px; }

/* 11. CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--panel);
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--s-6);
  align-items: center;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(109,190,69,.13) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); margin-bottom: var(--s-3); }
.cta-band p { color: rgba(255,255,255,.74); margin-bottom: 0; }
.cta-actions { display: grid; gap: .7rem; }
.cta-phone {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.cta-phone:hover { color: var(--green); }
.cta-phone svg { width: 26px; height: 26px; color: var(--green); }

@media (max-width: 820px) {
  .cta-band { grid-template-columns: 1fr; }
}

/* 12. Calculator --------------------------------------------------------- */
.calc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.calc-head {
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--green-50);
}
.calc-head h2 { margin-bottom: .35rem; }
.calc-head p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.calc-body { padding: var(--s-6); display: grid; gap: var(--s-7); }

.calc-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-step legend {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: var(--s-4);
  padding: 0;
}
.calc-step legend .n {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-green);
  display: grid; place-items: center;
  font-size: .85rem;
  flex: none;
}

.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  height: 100%;
  padding: .9rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.opt span small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.opt span:hover { border-color: var(--green); background: var(--green-50); }
.opt input:checked + span { border-color: var(--green); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green); }
.opt input:focus-visible + span { outline: 2px solid var(--green-700); outline-offset: 2px; }

.seg {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.seg .opt span {
  border: 0;
  border-radius: var(--pill);
  padding: .55rem 1.1rem;
  background: transparent;
  font-size: .9rem;
  box-shadow: none;
}
.seg .opt input:checked + span { background: var(--green); color: var(--on-green); box-shadow: none; }
.seg .opt span:hover { background: var(--green-100); }
.seg .opt input:checked + span:hover { background: var(--green); }

.method-panel[hidden] { display: none; }
.qty-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

/* Typed quantities — bin bags and flights of stairs. */
.num-field { flex: none; width: 11rem; }
.num-field input[type="number"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  padding: .7rem .9rem;
}

.stepper { display: inline-flex; align-items: center; gap: .5rem; }
.stepper button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.3rem;
  font-family: var(--font-display);
  cursor: pointer;
  display: grid; place-items: center;
  line-height: 1;
  transition: border-color .15s ease, background-color .15s ease;
}
.stepper button:hover { border-color: var(--green); background: var(--green-50); }
.stepper output {
  min-width: 5.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.range-row { display: grid; gap: .5rem; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--pill);
  background: var(--green-100);
  outline: none;
  margin: .75rem 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green);
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green);
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.range-scale { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }

.calc-result {
  background: var(--panel);
  color: rgba(255,255,255,.76);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
}
.calc-result::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(109,190,69,.12) 0 2px, transparent 2px 24px);
  pointer-events: none;
}
.calc-result > * { position: relative; z-index: 1; }
.price-range {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.price-range span { color: var(--green); }
.calc-summary { font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.calc-summary b { color: var(--white); }
.calc-note { font-size: var(--fs-xs); color: rgba(255,255,255,.55); }
.calc-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.price-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table.price-table { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--surface); }
table.price-table th, table.price-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
table.price-table thead th { background: var(--paper); font-family: var(--font-display); color: var(--ink); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
table.price-table tbody th { font-family: var(--font-display); color: var(--ink); font-weight: 700; }
table.price-table tr:last-child td, table.price-table tr:last-child th { border-bottom: 0; }

/* single items */
.items-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .55rem; }
.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .55rem .55rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .16s ease, background-color .16s ease;
}
.item-row.is-picked { border-color: var(--green); background: var(--green-50); }
.item-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink); line-height: 1.25; }
.item-name small { display: block; font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: var(--fs-xs); }
.stepper-sm button { width: 36px; height: 36px; font-size: 1.05rem; }
.stepper-sm output { min-width: 1.75rem; font-size: 1rem; }

/* before / after gallery */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.ba-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ba-media { position: relative; aspect-ratio: 4 / 5; background: var(--paper); }
.ba-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.ba-card[data-ba="before"] img[data-when="before"],
.ba-card[data-ba="after"] img[data-when="after"] { opacity: 1; }
.ba-tag {
  position: absolute;
  left: .8rem; top: .8rem;
  z-index: 2;
  background: rgba(0, 0, 0, .78);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: var(--pill);
}
.ba-card[data-ba="after"] .ba-tag { background: var(--green); color: var(--on-green); }
.ba-foot { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: .8rem; justify-items: start; }
.ba-foot h3 { font-size: 1.05rem; margin: 0; }
.ba-foot p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.ba-toggle { display: inline-flex; padding: 3px; gap: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--pill); }
.ba-toggle button {
  border: 0;
  background: transparent;
  padding: .42rem .9rem;
  border-radius: var(--pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  color: var(--ink-2);
  cursor: pointer;
}
.ba-toggle button[aria-pressed="true"] { background: var(--green); color: var(--on-green); }

@media (max-width: 960px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ba-grid { grid-template-columns: 1fr; } }

/* plain gallery shots */
.shot {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.shot figcaption {
  padding: 1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
}

.price-cell {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.2rem;
  text-align: right;
  white-space: nowrap;
}
table.price-table th small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); }

/* 13. Areas + postcode check --------------------------------------------- */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; }
.area-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .95rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}
.area-card svg { width: 17px; height: 17px; color: var(--green-700); flex: none; }

.postcode-check { display: flex; gap: .6rem; flex-wrap: wrap; }
.postcode-check input { flex: 1 1 12rem; text-transform: uppercase; }
.pc-result { margin-top: var(--s-4); font-size: var(--fs-sm); }
.pc-result:empty { display: none; }
.pc-result .ok { color: var(--green-700); font-weight: 700; }
.pc-result .no { color: var(--ink); font-weight: 700; }

/* 14. FAQ ---------------------------------------------------------------- */
.qa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: .7rem;
  overflow: hidden;
}
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3.25rem 1.15rem 1.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  position: relative;
  font-size: 1.02rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  right: 1.35rem; top: 50%;
  width: 13px; height: 2px;
  background: var(--green-700);
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 transparent;
}
.qa summary::before {
  content: "";
  position: absolute;
  right: 1.68rem; top: 50%;
  width: 2px; height: 13px;
  background: var(--green-700);
  transform: translateY(-50%);
  transition: opacity .2s ease, transform .2s ease;
}
.qa[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.qa summary:hover { background: var(--green-50); }
.qa .qa-body { padding: 0 1.35rem 1.35rem; color: var(--ink-2); font-size: var(--fs-sm); }
.qa .qa-body p:last-child { margin-bottom: 0; }

/* 15. Forms -------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
/* Grid items default to min-width:auto, so a <select> with a long option can
   push the whole track wider than the phone. */
.form-grid > * { min-width: 0; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  color: var(--ink);
}
.field .req { color: var(--green-700); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7D0CB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: #79837D; }
.hint { font-size: var(--fs-xs); color: var(--muted); }
/* The old #B3261E is unreadable on black — this is the same red lifted until it
   clears 4.5:1 against the input surface. */
.field-error { font-size: var(--fs-xs); color: #FF7A6E; font-weight: 700; }
.field-error:empty { display: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #FF7A6E; }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-sm); }
.consent input[type="checkbox"] { width: 20px; height: 20px; margin: .18rem 0 0; accent-color: var(--green-600); flex: none; }

.form-status {
  border-radius: var(--r-sm);
  padding: .9rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  color: var(--ink);
}
.form-status:empty { display: none; }

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

/* 16. Prose (legal pages) ------------------------------------------------ */
.prose { max-width: 44rem; }
.prose h2 { font-size: 1.55rem; margin-top: var(--s-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin-top: var(--s-6); }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--s-5);
  border-radius: var(--r-sm);
}
.table-scroll table { margin-bottom: 0; min-width: 30rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-5); font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: .7rem .85rem; text-align: left; vertical-align: top; }
.prose th { background: var(--paper); font-family: var(--font-display); color: var(--ink); }

.page-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  right: -4vw; top: -40%;
  width: 34vw; height: 180%;
  background: var(--green);
  opacity: .13;
  clip-path: polygon(46% 0, 100% 100%, 74% 100%, 46% 40%, 18% 100%, 0 100%);
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head p.lede { max-width: 40rem; }
.breadcrumb { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s-3); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green-700); }

.notice {
  border-left: 4px solid var(--green);
  background: var(--green-50);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-6);
}

/* service detail rows */
.svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
}
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc-visual {
  background: var(--green-50);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  min-height: 240px;
}
.svc-visual::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(109,190,69,.16) 0 2px, transparent 2px 24px);
}
.svc-visual svg { width: 110px; height: 110px; color: var(--green-700); position: relative; z-index: 1; }
.svc:nth-child(even) .svc-visual { order: -1; }
.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.25rem;
  margin-bottom: var(--s-4);
}
.price-tag small { font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: .8rem; }

@media (max-width: 820px) {
  .svc { grid-template-columns: 1fr; padding-block: var(--s-7); }
  .svc:nth-child(even) .svc-visual { order: 0; }
  .svc-visual { min-height: 180px; padding: var(--s-6); }
  .svc-visual svg { width: 78px; height: 78px; }
}

/* 17. Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--panel);
  color: rgba(255,255,255,.68);
  padding-block: var(--s-9) var(--s-6);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: -8vw; bottom: -50%;
  width: 40vw; height: 160%;
  background: var(--green);
  opacity: .11;
  clip-path: polygon(46% 0, 100% 100%, 74% 100%, 46% 40%, 18% 100%, 0 100%);
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
}
.footer-grid h4 {
  color: var(--white);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.foot-list { list-style: none; padding: 0; margin: 0; }
.foot-list li { margin-bottom: .55rem; }
.foot-list a, .site-footer .footer-brand p a { color: rgba(255,255,255,.68); text-decoration: none; font-size: var(--fs-sm); }
.foot-list a:hover { color: var(--green); }
.footer-brand p { font-size: var(--fs-sm); max-width: 24rem; margin-top: var(--s-4); }
.footer-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-4); }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.5); text-decoration: none; }
.footer-bottom a:hover { color: var(--green); }
.footer-bottom .links { display: flex; gap: 1.1rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* 18. Cookie banner ------------------------------------------------------ */
.cookie {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 120;
  max-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  transform: translateY(150%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.cookie.is-visible { transform: translateY(0); }
.cookie h4 { font-size: 1.02rem; margin-bottom: .4rem; }
.cookie p { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s-4); }
.cookie-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cookie-actions .btn { flex: 1 1 auto; }

@media (max-width: 560px) {
  .cookie { bottom: calc(72px + 1rem); }
}

/* 19. WhatsApp FAB + mobile action bar ----------------------------------- */
.wa-fab {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 110;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .6);
  text-decoration: none;
  transition: transform .2s ease;
}
.wa-fab svg { width: 33px; height: 33px; }
.wa-fab:hover { transform: scale(1.07); color: #fff; }
.wa-fab::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: wa-pulse 2.4s ease-out infinite;
}
.wa-label {
  position: absolute;
  right: calc(100% + .7rem);
  top: 50%;
  transform: translateY(-50%) scale(.9);
  transform-origin: right center;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  padding: .5rem .8rem;
  border-radius: var(--pill);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-fab:hover .wa-label, .wa-fab:focus-visible .wa-label { opacity: 1; transform: translateY(-50%) scale(1); }

@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.action-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 115;
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.action-bar a {
  display: grid;
  place-items: center;
  gap: .18rem;
  padding: .5rem .25rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
}
.action-bar a svg { width: 21px; height: 21px; color: var(--green-700); }
/* Green fill, so this one flips to the dark foreground — both label and icon. */
.action-bar a.is-primary { background: var(--green); color: var(--on-green); }
.action-bar a.is-primary svg { color: var(--on-green); }
.action-bar a.is-wa svg { color: #4BE08C; }

@media (max-width: 780px) {
  .action-bar { display: grid; }
  .wa-fab { display: none; }
  body { padding-bottom: 74px; }
}

/* 20. Motion + a11y ------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--green-700);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Content is visible by default and only hidden for the animation when JS is
   running, so a script failure can never leave the page blank. */
.reveal { transition: opacity .6s ease, transform .6s ease; }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; }

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

/* 21. Licence number ------------------------------------------------------
   Every printed instance of CBDU034669 links to the Natural Resources Wales
   public register. It appears on light body text, on the dark credentials bar
   and inside footer chips, so it takes its colour from whatever it sits in
   and only turns green on hover. Listed last so it wins over the section and
   footer link colours. */
a.lic-link,
.section-dark a.lic-link,
.site-footer a.lic-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
a.lic-link:hover,
a.lic-link:focus-visible,
.section-dark a.lic-link:hover,
.site-footer a.lic-link:hover {
  color: var(--green);
  text-decoration-style: solid;
}

@media print {
  .site-header, .site-footer, .wa-fab, .action-bar, .cookie, .cta-band { display: none !important; }
  body { padding-bottom: 0; }
}