/* =============================================================================
   ItsDone Child Theme — assets/style.css
   ===========================================================================
   Composition:
   1) F tokens.css (sub-spec F evolve design system) — VERBATIM from
      clients/itsdone/design-translation/prototypes/evolve/tokens.css.
      Self-contained: own :root tokens with literal brand hex values that
      mirror clients/itsdone/agent-context/brand-tokens.json.
   2) WP layout-engine overrides (at the bottom) — !important rules that
      battle the .wp-container-*-is-layout-flex CSS WP injects AFTER our
      stylesheet, plus operator-accepted variants on top of F's design.

   See /mnt/work/projects/hermes-agency/HANDOFF.md for the deployment context.
   ============================================================================= */


/* =============================================================================
   ============ BEGIN sub-spec F tokens.css (evolve band) =====================
   ============================================================================= */

/* === Google Fonts import ================================================= */
/* === Custom properties (the token registry) ============================= */
:root {
  /* --- Typography --- */
  --font-family-display: 'Alexandria', system-ui, sans-serif;
  --font-family-body:    'Montserrat', system-ui, sans-serif;

  --font-size-display: clamp(2.4rem, 5vw, 3.4rem);
  --font-size-h1:      clamp(2rem,   4vw, 2.8rem);
  --font-size-h2:      clamp(1.4rem, 2.5vw, 1.875rem);
  --font-size-h3:      1.25rem;
  --font-size-h4:      1.0625rem;
  --font-size-body:    1rem;
  --font-size-small:   0.875rem;
  --font-size-label:   0.8125rem;

  --font-weight-display: 900;
  --font-weight-h1:      900;
  --font-weight-h2:      700;
  --font-weight-h3:      700;
  --font-weight-body:    400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-display: 1.08;
  --line-height-heading: 1.2;
  --line-height-body:    1.65;
  --line-height-tight:   1.3;

  /* --- Colour (literal hex from brand-tokens.json) --- */
  --color-primary:        #0c8558;
  --color-primary-dark:   #0b784f;
  --color-primary-light:  #6ff1c0;
  --color-primary-fg:     #ffffff;
  --color-accent:         #eac61e;
  --color-accent-fg:      #111111;
  --color-surface:        #fdf9e7;
  --color-surface-mid:    #f4f4f4;
  --color-text:           #111111;
  --color-muted:          #686868;
  --color-border:         #b3b3b3;
  --color-phone-red:      #cc0000;
  --color-white:          #ffffff;
  --color-overlay:        rgba(10, 50, 30, 0.62);
  --hero-overlay:         linear-gradient(
                            to right,
                            rgba(0, 0, 0, 0.72) 0%,
                            rgba(0, 0, 0, 0.48) 55%,
                            rgba(0, 0, 0, 0.14) 100%
                          );

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* --- Layout --- */
  --container-max:    80rem;
  --container-narrow: 65rem;
  --container-gutter: var(--space-4);

  /* --- Radius --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-pill: 9999px;
  --radius-card: 0.625rem;

  /* --- Shadows --- */
  --shadow-card:       0 2px 8px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.14);

  /* --- Buttons --- */
  --btn-padding-y:    0.75rem;
  --btn-padding-x:    1.75rem;
  --btn-padding:      var(--btn-padding-y) var(--btn-padding-x);
  --btn-radius:       1.5rem;
  --btn-font-weight:  700;
  --btn-font-size:    var(--font-size-body);
  --btn-transition:   background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;

  /* --- Icon card --- */
  --icon-card-bg:           var(--color-white);
  --icon-card-radius:       var(--radius-card);
  --icon-card-shadow:       var(--shadow-card);
  --icon-card-shadow-hover: var(--shadow-card-hover);
  --icon-circle-size:       3.5rem;
  --icon-circle-bg:         var(--color-primary);
  --icon-circle-fg:         var(--color-primary-fg);

  /* --- Pricing cube band --- */
  --price-band-bg:          var(--color-accent);
  --price-band-fg:          var(--color-accent-fg);
  --price-band-figure-size: 2rem;
  --price-band-label-size:  var(--font-size-small);

  /* --- Review card --- */
  --review-card-bg:     var(--color-white);
  --review-card-radius: var(--radius-card);
  --review-card-shadow: var(--shadow-card);
  --review-star-color:  var(--color-accent);

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}

/* === Reset ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* Kill the horizontal scrollbar caused by the full-bleed heroes' 100vw breakout
   (100vw spans under the vertical scrollbar; see .hero--bleed). Must be on BOTH
   html and body: root-only clip does not block viewport h-scroll in this layout
   (verified in Chrome). `clip` (not `hidden`) does NOT create a scroll container,
   so position:sticky descendants are unaffected. Also a safety net for any
   future full-width block an operator adds in the WP editor. */
html, body { overflow-x: clip; }
body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { padding-left: 0; list-style: none; margin: 0; }
p { margin-top: 0; }

/* === Typography =========================================================== */
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-white);
}

h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-display);
  margin: 0 0 var(--space-4) 0;
  color: inherit;
}

h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-4) 0;
  color: inherit;
}

h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-heading);
  margin: 0 0 var(--space-2) 0;
  color: inherit;
}

h4 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-2) 0;
  color: inherit;
}

p {
  margin-bottom: var(--space-3);
  line-height: var(--line-height-body);
}

.display-heading {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-display);
}

.text-muted { color: var(--color-muted); }
.text-center { text-align: center; }
.text-white { color: var(--color-white); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-phone { color: var(--color-phone-red); }
.text-small { font-size: var(--font-size-small); }
.text-label { font-size: var(--font-size-label); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-weight-bold); }
.text-italic { font-style: italic; }

/* === Layout primitives ==================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

/* Service-page prose blocks (intro / deep-dive / cost) */
.eyebrow {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--font-size-small);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.prose h2 { margin-bottom: var(--space-4); }
.prose p {
  max-width: 62ch;
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
.prose p:last-child { margin-bottom: 0; }
.deepdive-list {
  max-width: 62ch;
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
  line-height: 1.7;
  color: var(--color-text);
}
.deepdive-list li { margin-bottom: var(--space-2); }

/* How-it-works: numbered steps, big number in a left column, table-style rows */
.how-steps { list-style: none; margin: 0; padding: 0; }
.how-step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(17,17,17,0.1);
}
.how-step:first-child { padding-top: var(--space-2); }
.how-step:last-child { border-bottom: none; padding-bottom: var(--space-2); }
.how-step__num {
  font-family: var(--font-family-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 0.9;
  color: var(--color-primary);
  text-align: right;
}
.how-step__body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 60ch;
}
@media (max-width: 599.98px) {
  .how-step { grid-template-columns: 3rem 1fr; gap: var(--space-3); }
  .how-step__num { font-size: 2.25rem; }
}

/* Two-column text + image split (service intro / deep-dive) */
.section-split { align-items: center; gap: var(--space-7); }
.section-split .prose p { max-width: none; }
@media (max-width: 781px) { .section-split { gap: var(--space-5); } }

/* Multi-image collage: vertical stack filling the text column height */
.section-split .wp-block-column:has(.media-grid) { align-self: stretch; }
.media-grid { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; width: 100%; }
.media-grid .media-tile { flex: 1 1 0; min-height: 0; margin: 0; }
.media-grid .media-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}
/* Mobile: columns stack, so let tiles take a natural aspect instead of filling height */
@media (max-width: 781px) {
  .media-grid .media-tile { flex: none; }
  .media-grid .media-tile img { height: auto; aspect-ratio: 4 / 3; }
}

.section { padding: var(--space-7) 0; }
.section--sm { padding: var(--space-5) 0; }
.section--lg { padding: var(--space-8) 0; }

.section--white   { background: var(--color-white); }
.section--surface { background: var(--color-surface); }
.section--mid     { background: var(--color-surface-mid); }
.section--tint-green { background: #e6f4ec; }
.section--primary { background: var(--color-primary); color: var(--color-primary-fg); }
.section--dark    { background: var(--color-primary-dark); color: var(--color-primary-fg); }

.section--border-top    { border-top: 1px solid var(--color-border); }
.section--border-bottom { border-bottom: 1px solid var(--color-border); }
.section--accent-top    { border-top: 2px solid var(--color-primary); }

.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.flex-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.flex-center { justify-content: center; }
.flex-between { justify-content: space-between; }

/* === Buttons ============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-family: var(--font-family-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--btn-transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 2px 8px rgba(12, 133, 88, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}

.btn-secondary--white {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn-secondary--white:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-color: var(--color-accent);
}
.btn-accent:hover { filter: brightness(0.94); }

.btn-phone {
  background: var(--color-phone-red);
  color: var(--color-white);
  border-color: var(--color-phone-red);
}
.btn-phone:hover { filter: brightness(0.88); }

.btn--large { font-size: 1.25rem; padding: 1rem 2rem; }

/* === Site Navigation ====================================================== */
.site-nav {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 200;
}

.site-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-4);
}

.site-nav__logo img { height: 44px; width: auto; }

.site-nav__logo-text {
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-primary);
  text-decoration: none;
}

.site-nav__links {
  display: none;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
}

.site-nav__links a {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-text);
  transition: color var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-nav__links a:hover { color: var(--color-primary); }

.site-nav__phone {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-phone-red);
  text-decoration: none;
  font-size: var(--font-size-body);
  white-space: nowrap;
}

.site-nav__phone:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .site-nav__links { display: flex; }
}

/* === Hero ================================================================= */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  background: var(--color-primary-dark);
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero { min-height: 600px; }
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-gutter);
}

.hero__content {
  max-width: 600px;
  color: var(--color-white);
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.hero__h1 {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-display);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

.hero__subheading {
  font-size: 1.125rem;
  font-weight: var(--font-weight-body);
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--space-5);
  line-height: var(--line-height-body);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* === Trust strip =========================================================== */
.trust-strip {
  background: var(--color-primary-dark);
  color: var(--color-primary-fg);
  padding: var(--space-5) 0;
}

.trust-strip__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
}

.trust-badge__icon { font-size: 1.5rem; line-height: 1; }

.trust-badge__label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.trust-badge__value {
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.trust-badge--price {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}

.trust-badge--price .trust-badge__value {
  font-size: 1.5rem;
  color: var(--color-accent-fg);
}

.trust-badge--google {
  background: var(--color-white);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  min-width: 150px;
}

.trust-badge--google .trust-badge__label { color: var(--color-muted); text-transform: none; letter-spacing: 0; }
.trust-badge--google a { color: var(--color-primary); font-weight: var(--font-weight-bold); }

.trust-stars {
  color: #fbbc04;
  font-size: 1rem;
  letter-spacing: 0.1em;
}

.trust-strip__divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.25);
  display: none;
}
@media (min-width: 768px) {
  .trust-strip__divider { display: block; }
}

/* === Icon-grid ============================================================ */
.icon-card {
  background: var(--icon-card-bg);
  border-radius: var(--icon-card-radius);
  box-shadow: var(--icon-card-shadow);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.icon-card:hover {
  box-shadow: var(--icon-card-shadow-hover);
  transform: translateY(-2px);
}

.icon-card__circle {
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);
  border-radius: 50%;
  background: var(--icon-circle-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-card__circle svg,
.icon-card__circle span {
  font-size: 1.5rem;
  color: var(--icon-circle-fg);
  line-height: 1;
}

.icon-card__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-tight);
  margin: 0;
}

.icon-card__benefit {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  margin: 0;
  line-height: var(--line-height-tight);
}

.icon-card__link {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: underline;
  margin-top: auto;
}

.icon-grid--4 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 768px) {
  .icon-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

.icon-grid--3 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .icon-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* === Pricing band ========================================================= */
.price-band {
  background: var(--color-surface);
  border-top: 4px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) 0;
}

.price-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  gap: var(--space-2);
}

.price-tile__icon { font-size: 2rem; line-height: 1; }

.price-tile__label {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.price-tile__desc {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  margin: 0;
  line-height: var(--line-height-tight);
}

.price-tile__price {
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-primary);
  background: var(--color-accent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  line-height: 1.4;
}

.price-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 768px) {
  .price-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}

/* === Interstitial CTA band ================================================ */
.cta-band {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  text-align: center;
  padding: var(--space-7) var(--container-gutter);
}

.cta-band h2 { color: var(--color-white); margin-bottom: var(--space-3); }
.cta-band p { margin-bottom: var(--space-5); opacity: 0.88; }

/* Custom-class siblings — used by the pattern after dropping the
   WP textColor:"background" slug-collision attrs. */
.cta-band .cta-band__heading,
.cta-band__heading {
  color: var(--color-white) !important;
  margin-bottom: var(--space-3);
}
.cta-band .cta-band__subtext,
.cta-band__subtext {
  color: var(--color-white) !important;
  opacity: 0.92;
  margin-bottom: var(--space-5);
}

/* === Reviews ==============================================================
   Operator: cards same height, "Read on Google" links Y-aligned, large
   gold stars, all card content centred. Achieved with flex-column +
   height:100% (mirroring the equal-height pattern used on icon-cards),
   text-align:center on the card body, justify-content:center on the
   reviewer + suburb inline row, and an enlarged star line. */
.review-card {
  background: var(--review-card-bg);
  border-radius: var(--review-card-radius);
  box-shadow: var(--review-card-shadow);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 3px solid var(--color-primary);
  height: 100%;
  text-align: center;
  align-items: center;
}

/* Column wrapper needs to stretch so the card can fill the row height —
   without this the column sizes to its content and the cards differ in
   height across the row. */
.wp-block-columns.grid-3 > .wp-block-column,
.reviews-strip .wp-block-columns > .wp-block-column {
  display: flex !important;
  align-items: stretch !important;
}
.wp-block-columns.grid-3 > .wp-block-column > .review-card,
.reviews-strip .wp-block-columns > .wp-block-column > .review-card {
  width: 100%;
}

/* Larger gold stars — operator: "Use large gold stars." */
.review-card__stars {
  color: var(--review-star-color) !important;
  font-size: 1.75rem !important;
  letter-spacing: 0.12em;
  line-height: 1;
  margin: 0;
}

.review-card__reviewer {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.review-card__suburb {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
}

/* The inline reviewer + suburb pair sits in a wp:group flex row; centre
   it within the card. */
.review-card > .wp-block-group {
  justify-content: center !important;
}

.review-card__quote {
  font-style: italic;
  color: var(--color-muted);
  line-height: var(--line-height-body);
  flex: 1;
  margin: 0;
  text-align: center;
}

/* Push the "Read on Google →" link to the bottom of the card so it
   Y-aligns across all three cards regardless of quote length. */
.review-card__link {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
  text-align: center;
  margin: auto auto 0 !important;
}
.review-card__link a { color: inherit; }
.review-card__link:hover { text-decoration: underline; }

.reviews-cta { text-align: center; margin-top: var(--space-5); }
.reviews-cta a { font-weight: var(--font-weight-bold); color: var(--color-primary); text-decoration: underline; }

/* === Areas strip ========================================================== */
.suburb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.suburb-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.suburb-pill:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-fg);
}

.areas-strip .section-cta-link {
  display: inline-block;
  margin-top: var(--space-4);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: underline;
}

/* === FAQ accordion (F's base; the WP overrides at bottom apply
        operator-accepted lighter variant) =============================== */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}

.faq-item__question {
  width: 100%;
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border: none;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-family: var(--font-family-display);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.faq-item__question:hover { background: var(--color-primary-dark); }
.faq-item__question[aria-expanded="true"] { background: var(--color-primary-dark); }

.faq-item__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--transition-base);
}

.faq-item__question[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }

.faq-item__answer {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  color: var(--color-text);
  line-height: var(--line-height-body);
  display: none;
}

.faq-item__answer[hidden] { display: none; }
.faq-item--open .faq-item__answer { display: block; }

/* === Owner proximity ====================================================== */
.owner-proximity {
  background: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.owner-proximity__img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-border);
}

.owner-proximity__text {
  font-size: var(--font-size-body);
  font-style: italic;
  color: var(--color-text);
  margin: 0;
}

.owner-proximity__text strong { font-style: normal; font-weight: var(--font-weight-bold); }

/* === Quote / callback form ================================================ */
.quote-form {
  background: var(--color-primary);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  color: var(--color-primary-fg);
}

.quote-form__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.form-field label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: rgba(255,255,255,0.88);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-field input,
.form-field select {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-field input::placeholder { color: rgba(255,255,255,0.55); }

.form-field input:focus,
.form-field select:focus { border-color: var(--color-accent); }

/* --- CF7 quote form (replaces the hand-rolled form). CF7 wraps each
   input in <span class="wpcf7-form-control-wrap">; mirror the
   .form-field look so the green-panel form matches the prior design. */
.quote-cf7 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quote-cf7__row,
.quote-cf7 .wpcf7-form > p {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}
.quote-cf7__row > label,
.quote-cf7 .wpcf7-form > p > label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.quote-cf7 label small {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  margin-left: var(--space-1);
}
.quote-cf7 .wpcf7-form-control-wrap { display: block; width: 100%; }
.quote-cf7 input[type="text"],
.quote-cf7 input[type="tel"],
.quote-cf7 input[type="email"],
.quote-cf7 textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.12);
  color: var(--color-white);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: 1.4;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.quote-cf7 textarea { min-height: 120px; resize: vertical; }
.quote-cf7 input::placeholder,
.quote-cf7 textarea::placeholder { color: rgba(255,255,255,0.55); }
.quote-cf7 input:focus,
.quote-cf7 textarea:focus {
  border-color: var(--color-accent);
  background: rgba(255,255,255,0.18);
}

/* Image upload zone — keep the plugin's drop area readable on green */
.quote-cf7 .wpcf7-images-optimize-upload-wrap,
.quote-cf7 .wpcf7-uploader-area,
.quote-cf7 .wpcf7-images-optimize-upload-area {
  background: rgba(255,255,255,0.08);
  border: 1.5px dashed rgba(255,255,255,0.45);
  border-radius: var(--radius-md);
  color: var(--color-white);
  padding: var(--space-4);
}
.quote-cf7 .wpcf7-images-optimize-upload-wrap * { color: inherit; }
.quote-cf7 .wpcf7-images-optimize-upload-wrap button,
.quote-cf7 .wpcf7-images-optimize-upload-wrap .button {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  border-radius: var(--btn-radius) !important;
  border: 0 !important;
  padding: var(--space-2) var(--space-4) !important;
  font-weight: 700 !important;
  cursor: pointer;
}

/* Submit button row — centred yellow pill. CF7 auto-wraps [submit] in a
   <p> with whitespace around the <input>. Collapse that whitespace via
   font-size: 0 on the <p> wrapper (the input itself restores its font
   size), then text-align:center centres the lone inline-block input
   without any text-node companions pulling the centring off. */
.quote-cf7 .quote-cf7__submit,
.wpcf7-form .quote-cf7__submit {
  display: block !important;
  width: 100% !important;
  margin: var(--space-4) 0 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 0 !important;
}
.quote-cf7 .quote-cf7__submit > p,
.wpcf7-form .quote-cf7__submit > p,
.quote-cf7 .quote-cf7__submit > span,
.wpcf7-form .quote-cf7__submit > span {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 0 !important;
}

/* CF7 injects <span class="wpcf7-spinner"> right after the submit at
   runtime, sized 24px + 24px left + 24px right margin = 72px of
   inline footprint, visibility:hidden but layout-bearing. Under
   text-align:center that 72px counts as content sitting to the right
   of the button, shifting the visible button 36px LEFT of true centre.
   Hide it completely so the button can claim the true centre. The
   form's response-output region + the post-submit confirmation message
   already provide submission feedback. */
.quote-cf7 .wpcf7-spinner,
.wpcf7-form .wpcf7-spinner {
  display: none !important;
}
.quote-cf7 .wpcf7-submit,
.wpcf7-form .wpcf7-submit {
  display: inline-block !important;
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  border-radius: var(--btn-radius) !important;
  border: 0 !important;
  padding: 0.9rem 2rem !important;
  font-family: var(--font-family-body);
  font-size: 1.0625rem !important;  /* restore from font-size:0 on parent */
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.quote-cf7 .wpcf7-submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(234, 198, 30, 0.35);
  transform: translateY(-1px);
}

/* CF7 response message — neutral surface so it pops against the green */
.quote-cf7 .wpcf7-response-output {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 0;
  border: 0;
  font-size: var(--font-size-body);
}

/* Required-field marker */
.quote-cf7 .wpcf7-not-valid-tip {
  color: #ffe680;
  font-size: var(--font-size-small);
  margin-top: var(--space-1);
  font-weight: 500;
}

.form-confirmation {
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  border-left: 4px solid var(--color-primary);
  display: none;
}

/* === Guarantee band ======================================================= */
.guarantee-band {
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px -26px rgba(12,133,88,0.30), 0 4px 14px rgba(0,0,0,0.04);
  padding: var(--space-6);
  text-align: center;
}

.guarantee-band h2 {
  font-family: var(--font-family-display);
  margin-bottom: var(--space-2);
}

.risk-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: center;
  margin-top: var(--space-5);
}

.risk-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text);
}

.risk-item__check {
  width: 1.4rem; height: 1.4rem;
  padding: 0;   /* beat WP core's :where(.wp-block-group.has-background){padding:1.25em 2.375em} which was forcing an oval */
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.risk-item__check p { margin: 0; }

/* === Hub cards ============================================================ */
/* Residential / Commercial group label above each hub-card grid. */
.hub-group__heading {
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  text-align: center;
  letter-spacing: 0.02em;
  margin: var(--space-6) 0 var(--space-2);
}
.hub-group__heading:first-of-type {
  margin-top: 0;
}
/* Short intro paragraph under each group label. */
.hub-group__intro {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto var(--space-5);
  color: var(--color-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.hub-card {
  background: #e4f3ec;
  text-align: center;
  border-radius: var(--icon-card-radius);
  box-shadow: var(--icon-card-shadow);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  border-bottom: 3px solid var(--color-primary);
}

.hub-card:hover {
  box-shadow: var(--icon-card-shadow-hover);
  transform: translateY(-2px);
}

/* Equal-height service cards: stretch each card to its grid row height. */
.icon-grid--3 > .wp-block-column,
.icon-grid--4 > .wp-block-column { display: flex; }
.icon-grid--3 .hub-card,
.icon-grid--4 .hub-card { width: 100%; }

/* === Before / After ("See the difference") ================================ */
.before-after__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.before-after__pair {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: start;
}
.before-after__item {
  position: relative;
  border-radius: var(--radius-card, 0.75rem);
  overflow: hidden;
  box-shadow: var(--icon-card-shadow);
}
.before-after__item img {
  display: block;
  width: 100%;
  height: auto;
}
.before-after__label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
}
.before-after__label--before { background: #cc0000; }
.before-after__label--after { background: var(--color-primary); }
.before-after__caption {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  margin-top: var(--space-1);
}
@media (max-width: 640px) {
  .before-after__pair { grid-template-columns: 1fr; }
}

.hub-card__icon { font-size: 2rem; line-height: 1; }

.hub-card__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  margin: 0;
  color: var(--color-primary);
}

.hub-card__benefit {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  margin: 0;
}

.hub-card__cta {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: underline;
  margin-top: auto;
}

/* === Trust grid (4-card; about / service / area pages) ==================== */
.trust-card {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  text-align: center;
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.trust-card__icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  color: var(--color-accent);
}

.trust-card__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin: 0;
}

/* Centre the card icons horizontally (service hub cards + why-choose cards). */
.hub-card__icon { text-align: center; }
.trust-card__icon { margin-left: auto; margin-right: auto; }

.trust-card__body {
  font-size: var(--font-size-small);
  color: rgba(255,255,255,0.82);
  margin: 0;
  line-height: var(--line-height-body);
}

/* === Services-in-suburb table ============================================= */
.services-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.services-table thead tr {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}

.services-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-family-display);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.services-table tbody tr:nth-child(even) { background: var(--color-surface); }
.services-table tbody tr:nth-child(odd) { background: var(--color-white); }

.services-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-small);
}

.services-table td a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.services-table td a:hover { text-decoration: underline; }

/* === Related suburbs strip ================================================ */
.related-suburbs__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* === Section heading helper =============================================== */
.section-heading {
  text-align: center;
  margin-bottom: var(--space-6);
}

.section-heading h2 { margin-bottom: var(--space-2); }
.section-heading p { color: var(--color-muted); max-width: 600px; margin: 0 auto; }

.section-heading--left { text-align: left; }
.section-heading--left p { margin-left: 0; }

/* === Sticky mobile CTA bar ================================================ */
.sticky-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 56px;
  background: var(--color-primary-dark);
  display: flex;
  align-items: stretch;
  z-index: 300;
  border-top: 2px solid var(--color-accent);
  /* WP's useRootPaddingAwareAlignments adds 20px+ padding to wp-block-group
     elements; the sticky bar should have zero internal padding except for
     the safe-area-inset on devices with a home indicator / gesture bar. */
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* iOS home indicator + Android gesture bar take ~34px below bottom:0.
     Extend the bar's own background down via padding-bottom so the
     dark-green band fills the safe area, while the actual tap targets
     sit above the inset and remain fully visible. */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.sticky-mobile-bar__call,
.sticky-mobile-bar__quote {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-small);
  min-height: 44px;
}

/* Inner <p> wrappers from the pattern carry default WP paragraph spacing
   that pushes the link text past the bar height. Reset and prevent the
   link text from wrapping to two lines on narrow viewports (caused "Get
   Free Quote" to clip the bottom of the bar). */
.sticky-mobile-bar .sticky-mobile-bar__call > p,
.sticky-mobile-bar .sticky-mobile-bar__quote > p {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
.sticky-mobile-bar a {
  white-space: nowrap;
  padding: 0 var(--space-2);
}

.sticky-mobile-bar__call {
  color: var(--color-white);
  background: transparent;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.sticky-mobile-bar__quote {
  color: var(--color-accent-fg);
  background: var(--color-accent);
}

.sticky-mobile-bar__call:hover { background: rgba(255,255,255,0.08); }
.sticky-mobile-bar__quote:hover { filter: brightness(0.94); }

@media (min-width: 768px) {
  .sticky-mobile-bar { display: none; }
}

@media (max-width: 767px) {
  /* Body bottom-pad must also account for the safe-area inset so footer
     content doesn't end up hidden behind the bar on iOS/gesture devices. */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* === Site footer ========================================================== */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.88);
  padding: var(--space-7) 0 var(--space-4) 0;
}

.site-footer__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(5, 1fr); }
}

.site-footer__col h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col ul li { margin-bottom: var(--space-2); }
.site-footer__col ul a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: var(--font-size-small); }
.site-footer__col ul a:hover { color: var(--color-white); text-decoration: underline; }

.site-footer__col .site-footer__subhead {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55) !important;
  margin: var(--space-3) 0 var(--space-1);
}
.site-footer__col .site-footer__subhead--first { margin-top: 0; }

.site-footer__col p { font-size: var(--font-size-small); color: rgba(255,255,255,0.75); margin-bottom: var(--space-2); }
.site-footer__col a { color: rgba(255,255,255,0.75); text-decoration: none; }
.site-footer__col a:hover { color: var(--color-white); }

.site-footer__col .phone-link {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
}

.site-footer__bottom {
  max-width: var(--container-max);
  margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--container-gutter) 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: var(--font-size-small);
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}

/* === Contact + about helpers ============================================== */
.grid-2--top { align-items: start; }

.contact-details { margin-top: var(--space-4); }
.contact-details p { margin-bottom: var(--space-2); font-size: var(--font-size-body); }

/* === Team grid (About page) =============================================== */
.team-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

.team-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: center;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-surface-mid);
}

.team-card__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  padding: var(--space-3) var(--space-3) var(--space-1);
  margin: 0;
}

.team-card__role {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  padding: 0 var(--space-3) var(--space-3);
  margin: 0;
}

/* === Values grid (About page) ============================================= */
.values-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}

/* === Aggregate rating band (Reviews page) ================================= */
.aggregate-band {
  background: var(--color-primary-dark);
  color: var(--color-primary-fg);
  padding: var(--space-7) 0;
  text-align: center;
}

.aggregate-band__stars {
  font-size: 2.5rem;
  color: #fbbc04;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.aggregate-band__score {
  font-family: var(--font-family-display);
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.aggregate-band__label {
  font-size: var(--font-size-body);
  color: #ffffff;
  opacity: 0.88;
  margin-bottom: var(--space-5);
}

/* Stack the two CTAs, equal width, with a vertical gap between them. */
.aggregate-band .wp-block-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.aggregate-band .wp-block-button {
  width: 100%;
  max-width: 22rem;
}
.aggregate-band .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
}
/* White-outline secondary button on dark backgrounds (hero CTAs + aggregate band).
   The importer strips the block-comment colour/border attrs, so restate here. */
.btn-secondary--white .wp-block-button__link {
  color: #ffffff;
  border: 2px solid #ffffff;
  background: transparent;
}
.btn-secondary--white .wp-block-button__link:hover {
  color: var(--color-primary);
  background: #ffffff;
}

/* === Review card grid (Reviews page) ====================================== */
.reviews-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}

/* === Platform badges (Reviews page) ======================================= */
.platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-5);
}

.platform-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}
.platform-badge:hover { border-color: var(--color-primary); }
.platform-badge__stars { color: #fbbc04; font-size: 1rem; }

/* === About founder photo + eco stat ======================================= */
.founder-photo {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 100%;
  height: auto !important;
  align-self: start;
}
.founder-photo img {
  width: 100%;
  height: auto !important;
  display: block;
  border-radius: inherit;
}

.eco-stat {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* === Pricing inclusions list ============================================== */
.inclusions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .inclusions-list { grid-template-columns: 1fr 1fr; }
}

.inclusions-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-body);
}

.inclusions-list__check {
  width: 22px; height: 22px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* === Utility helpers ====================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* =============================================================================
   ============ END sub-spec F tokens.css =====================================
   ============================================================================= */


/* =============================================================================
   WP LAYOUT-ENGINE OVERRIDES
   These battle WP's auto-injected .wp-container-*-is-layout-flex rules that
   ship AFTER our stylesheet. !important is necessary; lower-specificity
   selectors get pre-empted. Also: operator-accepted variants on top of F.
   ============================================================================= */

/* --- 4-col service icon-grid: WP injects flex-wrap: nowrap; force wrap ---
   F's `.icon-grid--4 { display: grid }` is overridden by WP's higher-specificity
   .wp-container-*-is-layout-flex rule. We accept WP's flex layout and force wrap. */
.wp-block-columns.icon-grid--4 {
  flex-wrap: wrap !important;
  gap: 1.25rem;
}
.wp-block-columns.icon-grid--4 > .wp-block-column {
  flex-basis: calc(25% - 1rem) !important;
  flex-grow: 0 !important;
  min-width: 0;
}
@media (max-width: 1200px) {
  .wp-block-columns.icon-grid--4 > .wp-block-column {
    flex-basis: calc(50% - 0.625rem) !important;
  }
}
@media (max-width: 600px) {
  .wp-block-columns.icon-grid--4 > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* --- Icon-card: flex-column so cards stretch to row height (operator:
       "all cards should be the same height and width"). Combined with
       .icon-card__link { margin: auto auto 0 } the link sticks to the
       bottom regardless of how short the benefit text is, and all 4 cards
       in a row land on the same bottom edge. --- */
.wp-block-group.icon-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
/* Column wrapper also needs height stretch so the inner card can fill it */
.wp-block-columns.icon-grid--4 > .wp-block-column {
  display: flex !important;
  align-items: stretch !important;
}
.wp-block-columns.icon-grid--4 > .wp-block-column > .icon-card {
  width: 100% !important;
}
/* Pattern uses .icon-card__name with h3 token (clamp 1.4-1.875rem) — overflows
   ~250px card width. Card variant must be smaller. */
.icon-card .icon-card__name {
  font-size: 1.125rem !important;
  line-height: 1.3 !important;
}

/* --- Price-tile pill content shouldn't wrap; size to content --- */
.price-tile__price {
  display: inline-block !important;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* --- Pricing 4-tile responsive grid ---
   Pattern hardcodes font-size:1.5rem inline on .price-tile__price; the
   "From $XXX" pill needs ~170px of content width. The existing base rule
   switches to 4-col at 768px, but each tile then has only ~140px of
   content area (truncates to "Fro..."). Keep 4-col only at desktop
   ≥1024px; 2-col covers tablet; 1-col on small phones for breathing room. */
@media (max-width: 1023.98px) {
  .price-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 599.98px) {
  .price-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .price-tile {
    padding: var(--space-4);
  }
}

/* --- Section + CTA band: F's .section has vertical padding only; add
       horizontal for the WP-block-group wrapper variants --- */
.wp-block-group.section {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.wp-block-group.cta-band {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px) {
  .wp-block-group.section,
  .wp-block-group.cta-band {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* --- WP's flex layout defaults section-heading group to row; force column --- */
.wp-block-group.section-heading {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}

/* --- FAQ accordion — operator-accepted variant overrides F's solid-green
       pill style. F's design at line 884-905 of tokens.css uses a big green
       button per accordion item; operator gate f3662d9 accepted the lighter
       transparent-background accordion. Keep until operator flips. --- */
.faq-item {
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
.faq-item__question {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 0 !important;
  padding: 1rem 0 !important;
  font-size: var(--font-size-h3) !important;
  line-height: 1.3 !important;
}
.faq-item__question:hover {
  background: transparent !important;
}
.faq-item__question[aria-expanded="true"] {
  background: transparent !important;
}
.faq-item__answer {
  background: transparent !important;
  padding: 0 0 1rem !important;
}

/* =============================================================================
   TRADESMAN EDITORIAL OVERRIDES (2026-06-15)
   ===========================================================================
   Operator feedback: F evolve was structurally sound but visually understated.
   Push the design toward an editorial trades aesthetic — bold display type,
   oversized numerals for trust signals, split-screen hero (no overlay text =
   readable H1), full-bleed sections, centred icon cards with 96px circles,
   megamenu, and a real site logo (uploaded via WP customizer).
   ============================================================================= */

/* --- Wider container for desktop editorial breathing room ---
   F's 80rem (1280px) feels narrow at >=1440px viewports. Push to 96rem (1536px)
   so trust strip + service grid + price band breathe. */
:root {
  --container-max: 96rem;
  --container-narrow: 70rem;

  /* Bigger display scale — hero H1 should land like a magazine cover line.
     Tuned down from 5rem max so the left content column can hold the H1
     in ~2-3 lines without forced hyphen-breaks. */
  --font-size-hero: clamp(2.25rem, 4vw, 3.5rem);
  --font-size-display: clamp(2.4rem, 4.5vw, 3.8rem);

  /* Larger icon circles (operator: "too small") */
  --icon-circle-size: 6rem;

  /* Trust-badge numeral scale — operator (round 2): "too large".
     Tuned down to read as compact editorial datum row, not magazine display. */
  --font-size-trust-numeral: clamp(1.125rem, 1.6vw, 1.5rem);
  --font-size-trust-label:   0.6875rem;
}

/* --- Full-bleed body container chassis ---
   For sections that need bg colour edge-to-edge but content max-width inside.
   .section--bleed: backgroundColor extends; content centred at --container-max.

   These elements live inside the constrained content layout, so the only way
   to reach the screen edge is the 50vw breakout. 100vw spans under the vertical
   scrollbar (by ~scrollbar/2 each side), which WOULD cause a horizontal
   scrollbar — but `html { overflow-x: clip }` (see Reset) absorbs that gutter
   with no scrollbar and no visible clipping. Keep the two in sync. */
.section--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- Hero: full-bleed wp:cover with strong overlay + white text ---
   Operator (2026-06-15 round 2): "use the old Hero with white font"
   + "let's use the full screen width". Reverted from split-screen back
   to image-with-overlay BUT push it edge-to-edge via align:full and
   add a much stronger overlay so the H1 reads at full contrast (the
   original problem from screenshot 156 was a weak gradient overlay). */
.hero.hero--bleed {
  /* Full-bleed edge-to-edge. The hero sits inside the constrained content
     layout, so it must break out with the 50vw technique (WP's .alignfull
     can't reach the edge from a constrained parent). The ~scrollbar/2 gutter
     this puts past each edge is absorbed by `html { overflow-x: clip }`
     (see Reset) — no horizontal scrollbar, nothing visibly clipped. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background: var(--color-primary-dark);
  overflow: hidden;
  isolation: isolate;
  padding: 0 !important;
}

.hero.hero--bleed .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}

/* Strong left-weighted dark overlay — readable white H1 guaranteed */
.hero.hero--bleed .hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.28) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero.hero--bleed .hero__inner,
.hero.hero--bleed .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-7) clamp(var(--space-4), 4vw, var(--space-7));
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero.hero--bleed .hero__content {
  max-width: 640px;
  color: var(--color-white);
}

/* Accent rule above the eyebrow */
.hero.hero--bleed .hero__content::before {
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  background: var(--color-accent);
  margin-bottom: var(--space-4);
}

.hero.hero--bleed .hero__eyebrow {
  font-family: var(--font-family-body);
  font-size: var(--font-size-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  margin: 0 0 var(--space-4) 0;
}

.hero.hero--bleed .hero__h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-hero);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0 0 var(--space-5) 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  hyphens: manual;
}

.hero.hero--bleed .hero__subheading {
  font-family: var(--font-family-body);
  font-size: 1.125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-6) 0;
  max-width: 40ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hero.hero--bleed .hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Hero micro trust row */
.hero.hero--bleed .hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.82);
}

.hero.hero--bleed .hero__trust strong {
  font-family: var(--font-family-display);
  font-weight: 900;
  color: var(--color-white);
  font-size: 1rem;
  margin-right: 0.25rem;
}

/* EST 2008 corner badge — bottom right of the hero */
.hero.hero--bleed .hero__badge {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-family: var(--font-family-body);
  font-size: var(--font-size-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: var(--space-2) var(--space-3);
  z-index: 3;
  text-transform: uppercase;
}

/* === Service hero variant: split layout with labelled image stack ========== */
.hero.hero--split {
  align-items: stretch;
  /* Full-bleed edge to edge via the 50vw breakout (see .hero--bleed above).
     The scrollbar-gutter overflow is absorbed by `html { overflow-x: clip }`. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  min-height: 640px;
}
/* Match the bleed hero's H1/subheading sizing so this hero is not taller than other pages. */
.hero.hero--split .hero__h1 {
  font-size: var(--font-size-hero);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5) 0;
}
.hero.hero--split .hero__subheading { max-width: 42ch; }
.hero--split .hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: stretch;
  width: 100%;
}
.hero-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}
/* Left-aligned stack; each image shown WHOLE (natural aspect, not cropped).
   Image height fills its third of the hero; width follows the aspect ratio, so
   the images are narrower than the column and the full garage/shed/carport shows. */
.hero-stack { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; justify-content: center; height: 100%; min-height: 0; }
.hero-stack__item {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-width: 100%;
  margin: 0;
}
.hero-stack__item img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}
.hero-stack__label {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  background: rgba(11,120,79,0.9);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-small);
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
}
@media (max-width: 880px) {
  .hero--split .hero-split { grid-template-columns: 1fr; }
  .hero-stack { align-items: stretch; }
  .hero-stack__item { flex: none; }
  .hero-stack__item img { height: auto; width: 100%; }
}

/* --- Trust strip: editorial numerals row ---
   Override F's centred-badge layout. Switch to a 4-up grid of label-over-numeral
   pairs with thin horizontal rules between. Cream surface on the trust strip
   (was dark green) so big numerals read at full contrast. */
.trust-strip {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-top: 1px solid rgba(17, 17, 17, 0.6);
  border-bottom: 1px solid rgba(17, 17, 17, 0.6);
  padding: var(--space-4) 0 !important;
}

.trust-strip__inner {
  max-width: var(--container-max) !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

@media (min-width: 768px) {
  .trust-strip__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 !important;
  }
}

/* Each badge becomes a vertical label-over-numeral pair, separated by rules.
   justify-content: flex-start so the LABEL row (and therefore the first line
   of text) aligns at the top across all 5 badges — operator: "padding from
   the top of each trust bar box align with each other". */
.wp-block-group.trust-badge,
.trust-strip__inner > .wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.125rem !important;
  padding: var(--space-2) var(--space-4) !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-align: left !important;
  min-width: 0;
}

@media (min-width: 768px) {
  .trust-strip__inner > .wp-block-group + .wp-block-group {
    border-left: 1px solid rgba(17, 17, 17, 0.18);
  }
}

/* Label small-caps + above the numeral.
   min-height reserves a 3-line (~2.7rem) band so the value below the label
   always starts at the same Y across all 5 badges, even when shorter labels
   only fill 1-2 lines. Operator: "second font text in each trust bar box
   aligned with each other". */
.trust-badge .trust-badge__label,
.trust-strip__inner .trust-badge__label {
  order: -1 !important;
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-trust-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--color-muted) !important;
  opacity: 1 !important;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  min-height: 2.7rem !important;
  align-self: stretch !important;
}

/* The numeral itself — compact editorial datum, not display */
.trust-badge .trust-badge__value,
.trust-strip__inner .trust-badge__value {
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-trust-numeral) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text) !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Kill icon + stars + review-link inside trust strip — editorial direction is
   label-over-numeral only. (Reviews CTA moves to the testimonials section.) */
.trust-strip .trust-badge__icon,
.trust-strip .trust-stars,
.trust-strip .trust-badge__review-link {
  display: none !important;
}

/* Remove F's accent-pill + google-card variants — flat editorial here */
.trust-badge--google,
.trust-badge--price {
  background: transparent !important;
  padding: var(--space-2) var(--space-5) !important;
  min-width: 0 !important;
  border-radius: 0 !important;
}

.trust-badge--google .trust-badge__value,
.trust-badge--price .trust-badge__value {
  color: var(--color-text) !important;
}

.trust-badge--price .trust-badge__value {
  color: var(--color-primary) !important;
}

/* Google-G icon inline with the "Google Reviews" label */
.trust-badge__label--google {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
.trust-badge__google-g {
  flex-shrink: 0;
  display: block;
}

/* --- Service icon-card: centred + 96px circles ---
   Operator: "service card content needs to be centered" + "icons too small". */
.icon-card,
.wp-block-group.icon-card {
  align-items: center !important;
  text-align: center !important;
  padding: var(--space-6) var(--space-4) !important;
  border: 1px solid var(--color-border);
  box-shadow: none;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.icon-card:hover,
.wp-block-group.icon-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 24px rgba(12, 133, 88, 0.12);
  transform: translateY(-3px);
}

/* Force a fixed 96px circle (override inline minHeight:3.5rem from pattern markup) */
.icon-card .icon-card__circle,
.wp-block-group .icon-card__circle {
  width: var(--icon-circle-size) !important;
  height: var(--icon-circle-size) !important;
  min-height: var(--icon-circle-size) !important;
  border-radius: 50% !important;
  margin: 0 auto var(--space-3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The glyph inside (emoji or icon paragraph) should be ~36px */
.icon-card .icon-card__circle p,
.icon-card .icon-card__circle span {
  font-size: 2.25rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.icon-card .icon-card__name {
  text-align: center !important;
  margin: 0 0 var(--space-2) !important;
}

.icon-card .icon-card__benefit {
  text-align: center !important;
  margin: 0 0 var(--space-3) !important;
}

.icon-card .icon-card__link {
  text-align: center !important;
  margin: auto auto 0 !important;
}

/* --- Site nav + logo + megamenu ---
   New rules. The pattern is rewritten alongside this to use wp:site-logo
   (with site-title removed) + a custom HTML megamenu list. */
.site-nav {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.site-nav__inner {
  max-width: var(--container-max) !important;
  height: 88px !important;
  gap: var(--space-6) !important;
  padding: 0 clamp(var(--space-4), 3vw, var(--space-6)) !important;
}

/* Hide wp:site-title if it's still in the markup; logo only */
.site-nav__inner .wp-block-site-title,
.site-nav .site-nav__logo-text {
  display: none !important;
}

/* Logo image height — SVG (aspect 2.94:1) inlined via wp:html anchor + <img>.
   At 64px height the logo renders ~188px wide, visibly taller than the phone CTA. */
.site-nav .site-nav__logo {
  line-height: 0;
  display: inline-flex;
  align-items: center;
}
.site-nav .site-nav__logo img,
.site-nav .custom-logo img {
  height: 64px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
}

/* Megamenu: custom HTML in nav pattern */
.megamenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-5);
  flex-wrap: nowrap;
  align-items: center;
}

@media (min-width: 900px) {
  .megamenu { display: flex; }
}

.megamenu > li {
  position: relative;
}

.megamenu > li > a,
.megamenu > li > button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.75rem 0;
  font-family: var(--font-family-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.megamenu > li > a:hover,
.megamenu > li > button:hover {
  color: var(--color-primary);
}

.megamenu > li[aria-current="page"] > a,
.megamenu > li.is-current > a {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

/* Caret indicator on parents with submenus */
.megamenu .has-submenu > a::after,
.megamenu .has-submenu > button::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 0.4rem;
  transition: transform var(--transition-fast);
}

.megamenu .has-submenu:hover > a::after,
.megamenu .has-submenu:focus-within > a::after {
  transform: rotate(180deg);
}

/* The dropdown panel */
.megamenu__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.18);
  padding: var(--space-5);
  min-width: 640px;
  z-index: 250;
}

.megamenu .has-submenu:hover > .megamenu__panel,
.megamenu .has-submenu:focus-within > .megamenu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.megamenu__panel--areas {
  min-width: 880px;
  max-width: min(980px, 92vw);
}

.megamenu__grid a,
.megamenu__group-list a {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.megamenu__grid a:hover,
.megamenu__group-list a:hover {
  border-left-color: var(--color-primary);
  background: var(--color-surface);
}

.megamenu__grid a small,
.megamenu__group-list a small {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-muted);
  letter-spacing: 0;
  text-transform: none;
}

.megamenu__panel--grouped { min-width: 680px; }

.megamenu__groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.megamenu__groups--4 { grid-template-columns: repeat(4, 1fr); }

.megamenu__group-label {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-3) var(--space-2);
  font-family: var(--font-family-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}

.megamenu__group-list { list-style: none; margin: 0; padding: 0; }

.megamenu__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.megamenu__footer a {
  font-family: var(--font-family-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  text-decoration: none;
}

.megamenu__footer a::after {
  content: " →";
}

/* Right-side phone CTA in nav: high-emphasis */
.site-nav__phone-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-white) !important;
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--btn-radius);
  border: 0;
  transition: background var(--transition-fast), filter var(--transition-fast),
              box-shadow var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.site-nav__phone-cta:hover {
  background: var(--color-primary);
  color: var(--color-white) !important;
  filter: brightness(1.15);
  box-shadow: 0 6px 18px rgba(12, 133, 88, 0.25);
  transform: translateY(-1px);
}

.site-nav__phone-cta::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2.5' ry='2.5'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E") no-repeat center / contain;
  display: inline-block;
  flex-shrink: 0;
}

/* Hide WP-emitted nav button + buttons wrapper since we control it ourselves */
.site-nav .wp-block-navigation,
.site-nav .site-nav__links,
.site-nav > .wp-block-buttons,
.site-nav .wp-block-buttons .site-nav__phone {
  display: none !important;
}

/* --- Stronger section transitions (editorial horizontal rules) --- */
.section + .section,
.wp-block-group.section + .wp-block-group.section {
  border-top: 1px solid var(--color-border);
}

/* --- Section headings: more editorial scale --- */
.section-heading h2,
.wp-block-group.section-heading h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.section-heading p,
.wp-block-group.section-heading p {
  font-size: 1.0625rem;
  color: var(--color-muted);
  max-width: 56ch;
}

/* --- Containers inside sections: widen on desktop --- */
.wp-block-group.container,
.section .container {
  max-width: var(--container-max);
}

/* Eco kg recycled — bump the green emoji + value pair on home trust strip
   into the same editorial style as other badges */
.trust-strip .trust-badge--eco { display: none; }

/* --- Sticky mobile bar: WP injects .is-layout-flex on the wp:group wrapper
       which gives it display:flex at higher source-order than my F-base
       rule. Force display:none ≥ 768px with !important so the bar can't
       float at the bottom of the desktop viewport. (Operator round 2:
       "floating footer bar text sits too low on the screen".) --- */
@media (min-width: 768px) {
  .wp-block-group.sticky-mobile-bar,
  .sticky-mobile-bar {
    display: none !important;
  }
}

/* On mobile (<768px), restore body bottom padding so content doesn't sit
   beneath the sticky bar (F's tokens.css line 1264 has the same rule but
   without specificity on .wp-block-group sticky variants). */
@media (max-width: 767px) {
  .wp-block-group.sticky-mobile-bar,
  .sticky-mobile-bar {
    display: flex !important;
  }
}

/* --- Footer: full-bleed bg + deeper dark green + brighter text ---
   Full-width achieved via wp:group align:"full" in the pattern (lets WP's
   useRootPaddingAwareAlignments handle the negative margins correctly).
   Previous primary-dark (#0b784f) was too light and left text reading as
   low-contrast/black. Use a richer dark green and lift all body/heading
   text to full white. --- */
.site-footer {
  background: #08301f !important;
  color: #ffffff !important;
  padding-top: var(--space-7) !important;
  padding-bottom: var(--space-4) !important;
}

/* alignfull on the constrained group: WP gives the footer 100vw + negative
   margins; the inner grid keeps its container-max width via this rule. */
.site-footer.alignfull > .site-footer__grid {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(var(--space-4), 3vw, var(--space-6));
  padding-right: clamp(var(--space-4), 3vw, var(--space-6));
}

.site-footer__col h2,
.site-footer__col-h {
  color: #ffffff !important;
  font-family: var(--font-family-display);
  font-weight: 800 !important;
  font-size: var(--font-size-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.site-footer__col p,
.site-footer__col li,
.site-footer__col li a,
.site-footer__col p a:not(.phone-link) {
  color: #ffffff !important;
  opacity: 0.92;
}

.site-footer__col ul a:hover,
.site-footer__col p a:not(.phone-link):hover {
  opacity: 1;
  text-decoration: underline;
}

.site-footer__col .phone-link {
  color: var(--color-accent) !important;
  opacity: 1;
}

.site-footer__bottom {
  max-width: var(--container-max);
  margin: var(--space-5) auto 0;
  padding: var(--space-4) clamp(var(--space-4), 3vw, var(--space-6)) 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: #ffffff !important;
  opacity: 0.78;
}

.site-footer__bottom p {
  color: #ffffff !important;
  margin: 0;
}

/* --- Centred CTA wrappers that lost their WP dynamic layout class.
   The importer strips <!-- wp:* --> markers from post_content (so the
   editor doesn't show validation warnings), but that also strips the
   block-comment that WP's render-side layout engine reads to inject
   the wp-container-* + is-content-justification-* classes. Restate the
   centering + breathing room explicitly so these stand-alone CTAs sit
   centred with a clear gap from the sections above and below. --- */
.services-strip__cta,
.quote-form__call-fallback {
  display: flex !important;
  justify-content: center !important;
}
.services-strip__cta .wp-block-buttons,
.quote-form__call-fallback .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
}

/* services-strip__cta sits between the icon-card grid and the pricing
   band — closer to the cards (operator: "closer to the service card
   section"), with breathing room below so it's not flush against the
   accent border-top of the pricing band. */
.services-strip__cta {
  margin-top: var(--space-4) !important;
  margin-bottom: var(--space-6) !important;
}

/* --- Areas Strip: intro paragraph + Melbourne map + centred View-all link --- */

/* Intro copy under the "Areas we serve" heading — body-size text, muted
   colour, narrow measure so it reads as supporting context not a wall. */
.areas-strip__intro {
  max-width: 64ch;
  margin: 0 auto var(--space-3);
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Operator: "View all 40+ suburbs.. link should be centered" — the
   wrapper got an explicit center class on the wp:group; centre via
   flex on the wrapper AND text-align in case the inner paragraph's
   layout doesn't propagate. */
.areas-strip__view-all {
  display: flex !important;
  justify-content: center !important;
  text-align: center;
}
.areas-strip__view-all .section-cta-link {
  display: inline-block;
}

/* Map figure under the suburb grid + View-all link. Surface frame so it
   reads as a deliberate visual block, generous corners to match the
   editorial rounded buttons. Now hosts a Leaflet map (#areas-map)
   instead of the iframe — Leaflet expects a fixed-height container. */
.areas-strip__map {
  margin: var(--space-6) auto 0;
  max-width: 96rem;
  border-radius: var(--btn-radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  background: #f3f5f7; /* shows while tiles load */
}
#areas-map {
  width: 100%;
  height: 480px;
}
@media (max-width: 768px) {
  #areas-map { height: 380px; }
}
.areas-strip__map-caption {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
/* Leaflet tooltip — keep on-brand */
.leaflet-tooltip {
  font-family: var(--font-family-body);
  font-weight: 700;
  font-size: 0.8125rem;
  background: var(--color-text);
  color: var(--color-white);
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.leaflet-tooltip-top:before { border-top-color: var(--color-text); }
.leaflet-popup-content {
  font-family: var(--font-family-body);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* quote-form__call-fallback is outside the green form panel, above the
   footer — needs more separation from the busy form above. */
.quote-form__call-fallback {
  margin-top: var(--space-7) !important;
  margin-bottom: var(--space-6) !important;
}

/* --- WP block buttons: explicit contrast + rounded edges + lighten-on-hover.
   F's .btn-primary etc. were authored for plain <a class="btn"> usage;
   when those classes land on .wp-block-button (the wrapper div), they
   don't reach the inner <a class="wp-block-button__link">. Restate the
   styling at the wp-block layer so every CTA picks it up.
   Operator: black text on dark green was the wrong contrast; round the
   edges; lighter colour on hover. --- */

/* Base — applies to every .wp-block-button__link unless a variant below
   overrides it. White text on the brand green, generous rounded edges,
   smooth lighten transition. */
/* Nuclear-specificity override — WP's :root :where(.wp-element-button,
   .wp-block-button__link) default + a per-pattern style.border.radius
   inline (resolved into the same :where rule) was beating my plain
   .wp-block-button .wp-block-button__link rule. Stack id + html for
   maximum specificity. */
html body .wp-block-button .wp-block-button__link,
html body .wp-block-button .wp-block-button__link.wp-element-button,
:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  border-radius: 1.5rem !important;
  padding: 0.9rem 1.75rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease !important;
  display: inline-block;
}


.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.wp-element-button:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 18px rgba(12, 133, 88, 0.25);
  transform: translateY(-1px);
}

/* Accent variant — yellow pill with dark text (text needs contrast against
   the bright accent, not white). Selector specificity intentionally
   matches the html-body-stacked base above so the variant wins on the
   later source order without needing a heavier hand. */
html body .wp-block-button.btn-accent .wp-block-button__link,
html body .wp-block-button.btn-accent .wp-block-button__link.wp-element-button,
html body .wp-block-button__link.has-accent-background-color,
html body .wp-block-button__link.has-accent-background-color.wp-element-button {
  background-color: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
}
html body .wp-block-button.btn-accent .wp-block-button__link:hover,
html body .wp-block-button__link.has-accent-background-color:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(234, 198, 30, 0.35);
}

/* Phone-red variant — red bg with white text. Pattern uses className
   .btn-phone on the .wp-block-button wrapper. */
html body .wp-block-button.btn-phone .wp-block-button__link,
html body .wp-block-button.btn-phone .wp-block-button__link.wp-element-button {
  background-color: var(--color-phone-red) !important;
  color: #ffffff !important;
}
html body .wp-block-button.btn-phone .wp-block-button__link:hover,
html body .wp-block-button.btn-phone .wp-block-button__link.wp-element-button:hover {
  filter: brightness(1.12);
  box-shadow: 0 6px 18px rgba(204, 0, 0, 0.3);
}

/* F's .btn-phone / .btn-primary / .btn-accent paint bg on whatever element
   carries the class. On plain <a class="btn btn-phone"> that's fine — the
   anchor IS the button. But when the class lands on the .wp-block-button
   wrapper DIV (via wp:button className), the wrapper paints its bg behind
   the rounded inner <a> link and the wrapper's square corners poke out as
   colored corners. Force the wrapper transparent so only the inner link
   paints. */
.wp-block-button.btn-primary,
.wp-block-button.btn-accent,
.wp-block-button.btn-phone {
  background: transparent !important;
  border: 0 !important;
}

/* === F's plain-<a> .btn system: flip hover direction lighter (operator:
       "change colour lighter on hover" — F's defaults were darken). === */
.btn-primary:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  filter: brightness(1.15);
  box-shadow: 0 6px 18px rgba(12, 133, 88, 0.25);
}
.btn-accent:hover { filter: brightness(1.08); }
.btn-phone:hover  { filter: brightness(1.12); }


/* ============================================================================
   Mobile nav: hamburger + full-screen slide-down drawer
   ----------------------------------------------------------------------------
   Below 900px (megamenu breakpoint), .megamenu is hidden by base rules and
   the header phone CTA is squeezed off the right edge. Add a hamburger
   toggle that drops down a full-width overlay drawer with stacked items
   and click-accordion submenus. JS in assets/js/mobile-nav.js sets
   data-nav-open on <body> and data-submenu-open on .has-submenu nodes.
   ============================================================================ */

/* Hamburger button — base (hidden on desktop, shown <900px) */
.site-nav__hamburger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--btn-radius);
  padding: 0.5rem 0.85rem;
  font-family: var(--font-family-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.site-nav__hamburger:hover,
.site-nav__hamburger:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-primary);
}

.site-nav__hamburger-bars {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}

.site-nav__hamburger-bars span {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  transform-origin: center;
}

/* Hamburger → X transform when drawer is open */
body[data-nav-open="true"] .site-nav__hamburger-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body[data-nav-open="true"] .site-nav__hamburger-bars span:nth-child(2) {
  opacity: 0;
}
body[data-nav-open="true"] .site-nav__hamburger-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Visibility: hamburger only below 900px; phone CTA only at/above 900px */
@media (max-width: 899.98px) {
  .site-nav__hamburger { display: inline-flex; }
  .site-nav .site-nav__phone-cta { display: none !important; }

  /* Logo shrinks slightly on mobile so the row stays compact */
  .site-nav__inner {
    height: 72px !important;
    gap: var(--space-3) !important;
  }
  .site-nav .site-nav__logo img,
  .site-nav .custom-logo img {
    height: 48px !important;
  }

  /* Megamenu becomes a full-screen overlay drawer.
     Header is sticky at top:0 with the shrunken 72px height, so the drawer
     anchors at top:72px. !important beats the base .megamenu display:none
     rule even when the drawer is closed (we toggle visibility via opacity
     + visibility so the transition is animatable). */
  .megamenu {
    display: flex !important;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: var(--space-4) clamp(var(--space-4), 5vw, var(--space-6)) var(--space-6);
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  }

  body[data-nav-open="true"] .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Top-level item rows in the drawer */
  .megamenu > li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .megamenu > li > a,
  .megamenu > li > button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0.25rem;
    font-size: 1rem;
    letter-spacing: 0.06em;
  }

  /* Caret as expand-indicator — bigger on mobile */
  .megamenu .has-submenu > a::after,
  .megamenu .has-submenu > button::after {
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 6px;
    margin-left: 0.6rem;
    transform: rotate(0deg);
  }

  /* Reset the desktop caret rotation rule on mobile (caret rotates only
     when accordion is actually open, not on hover/focus). */
  .megamenu .has-submenu:hover > a::after,
  .megamenu .has-submenu:focus-within > a::after {
    transform: rotate(0deg);
  }

  /* Submenu panels: hide entirely (display: none) when closed so they
     don't reserve vertical space in the drawer. */
  .megamenu__panel {
    display: none;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
    background: transparent;
  }

  /* Open state — JS sets data-submenu-open="true" on the parent <li>.
     Must set display/opacity/visibility/transform explicitly because
     the desktop :hover/:focus-within reveal rule (specificity 30) fires
     when the user taps the submenu link and focuses it; without these
     explicit values the desktop rule's transform: translateX(-50%) would
     shift the panel half off-screen on mobile. */
  .megamenu .has-submenu[data-submenu-open="true"] > a::after {
    transform: rotate(180deg);
  }
  .megamenu .has-submenu[data-submenu-open="true"] > .megamenu__panel {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: var(--space-2) 0 var(--space-3) var(--space-3);
  }

  .megamenu__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .megamenu__groups--4 { grid-template-columns: 1fr; }

  .megamenu__panel--areas {
    min-width: 0;
    max-width: none;
  }

  .megamenu__groups {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .megamenu__grid a {
    padding: 0.625rem var(--space-3);
    border-left-width: 2px;
  }

  .megamenu__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
  }

  /* In-drawer phone CTA: surface a tap-to-call inside the drawer so the
     primary contact action is one tap away even after hiding the header
     CTA. Uses the real <li class="megamenu__call-cta"> with {{PHONE_*}}
     substitutions — single source of truth in site-defaults.yml. */
  .megamenu .megamenu__call-cta {
    border-bottom: 0;
    margin-top: var(--space-5);
  }
  .megamenu .megamenu__call-cta > a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: var(--color-white) !important;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    border-radius: var(--btn-radius);
    letter-spacing: 0.02em;
    text-transform: none;
  }
}

/* Hide the in-drawer call-CTA <li> on desktop — header already has the
   green phone pill on the right. */
@media (min-width: 900px) {
  .megamenu .megamenu__call-cta { display: none !important; }
}

/* Lock body scroll while drawer is open */
body[data-nav-open="true"] {
  overflow: hidden;
}

/* Safety reset: if viewport widens past breakpoint while drawer is open,
   revert to desktop megamenu instantly. */
@media (min-width: 900px) {
  body[data-nav-open="true"] {
    overflow: auto;
  }
  body[data-nav-open="true"] .megamenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}


/* ============================================================================
   Home services strip: 2-card audience layout
   ----------------------------------------------------------------------------
   Replaces the previous 8-card icon grid with two larger audience-segment
   cards (Household / Commercial). Each card uses the .icon-card base
   plus .icon-card--feature for the bigger typography + scenarios prose.
   Bottom CTA "See all rubbish removal services →" still funnels equity
   to /rubbish-removal/ (the master services hub keyword target).
   ============================================================================ */

/* 2-col grid at all desktop/tablet widths; 1-col stack below 600px.
   WP's .wp-container-*-is-layout-flex overrides F's grid, so go flex+wrap
   to match the existing .icon-grid--4 approach. */
.wp-block-columns.icon-grid--2 {
  flex-wrap: wrap !important;
  gap: var(--space-5) !important;
}
.wp-block-columns.icon-grid--2 > .wp-block-column {
  flex-basis: calc(50% - 1rem) !important;
  flex-grow: 0 !important;
  min-width: 0;
  display: flex !important;
  align-items: stretch !important;
}
.wp-block-columns.icon-grid--2 > .wp-block-column > .icon-card {
  width: 100% !important;
}
@media (max-width: 599.98px) {
  .wp-block-columns.icon-grid--2 > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Feature variant: bigger card padding + heading at the full display scale
   (the squeezed .icon-card .icon-card__name {font-size:1.125rem} rule was
   for the cramped 4-col layout; we have room here). Very-light brand-green
   tint distinguishes these audience cards from the cream section bg. */
.icon-card.icon-card--feature,
.wp-block-group.icon-card.icon-card--feature {
  padding: var(--space-7) var(--space-6) !important;
  gap: var(--space-3) !important;
  background: #eaf5ef !important;
}

.icon-card.icon-card--feature .icon-card__name {
  font-size: var(--font-size-h3) !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--space-3) !important;
}

.icon-card.icon-card--feature .icon-card__lead {
  font-size: 1.0625rem;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
  text-align: center;
  max-width: 36ch;
}

.icon-card.icon-card--feature .icon-card__scenarios {
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  text-align: center;
  max-width: 42ch;
}

/* CTA pill at the bottom of the card — visually present, not a button
   element (whole card is the link). Matches the green-on-cream "All
   services" treatment from the megamenu footer. */
.icon-card.icon-card--feature .icon-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: auto auto 0 !important;
  padding: 0.625rem var(--space-4);
  background: var(--color-primary);
  color: var(--color-white) !important;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--btn-radius);
  text-align: center;
  transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.icon-card.icon-card--feature:hover .icon-card__link {
  filter: brightness(1.12);
  box-shadow: 0 6px 18px rgba(12, 133, 88, 0.25);
}


/* ============================================================================
   Hero flush against the sticky nav
   ----------------------------------------------------------------------------
   WP injects a 24px block-gap (--wp--style--block-gap) between sibling
   top-level blocks inside .wp-site-blocks. The header template part and
   <main> are siblings, so <main> gets margin-top: 24px even though we
   want hero content to butt directly against the nav's bottom border.
   Only zero this when the first content block is a .hero — pages that
   start with a regular section keep the existing spacing.
   ============================================================================ */
main:has(> .wp-block-post-content > .hero:first-child),
main:has(> .entry-content > .hero:first-child) {
  margin-top: 0 !important;
}

/* === Area page patterns ===================================================== */
.area-copy__photo { margin: var(--space-5) 0; }
.area-copy__photo img { width: 100%; height: auto; display: block; border-radius: var(--radius, 8px); }
.area-copy__photo figcaption { margin-top: var(--space-2); font-size: var(--font-size-small); color: var(--color-muted); }
.area-council__name {
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.area-council__logo {
  height: 48px;
  width: auto;
  flex: 0 0 auto;
}
.area-council__booking a { font-weight: 700; }

/* === Areas index page (service-areas hub) ================================== */
.areas-index__intro {
  max-width: 52rem;
  text-align: center;
  color: var(--color-text-muted, var(--color-muted));
}

.areas-index__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--space-7);
}

.areas-index__group-heading {
  font-size: var(--font-size-h4, 1.125rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary);
}

.areas-index__grid {
  justify-content: flex-start;
}

@media (max-width: 600px) {
  .areas-index__groups {
    grid-template-columns: 1fr;
  }
}

/* ===== Blog collection ===== */
.blog-collection .section-heading { text-align: center; }
.blog-grid__list { gap: var(--wp--preset--spacing--space-5); }
.blog-card { overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .2s ease; }
.blog-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.blog-card__image img { width: 100%; height: 200px; object-fit: cover; }
.blog-card__cat a { text-transform: uppercase; letter-spacing: .04em; }
.blog-card__title { margin: .25rem 0; line-height: 1.25; }
.blog-card__title a { text-decoration: none; }
.blog-card__excerpt, .blog-card__date { padding: 0 var(--wp--preset--spacing--space-4); }
@media (max-width: 900px) { .blog-grid__list { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 600px) { .blog-grid__list { grid-template-columns: 1fr !important; } }

/* ===== Blog pagination — circular number chips + arrow pills (brand green) ===== */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  font-family: var(--font-family-display);
}
.blog-pagination .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
/* Number chips: circular, outlined; hover fills brand green and lifts */
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  border: 1.5px solid rgba(12, 133, 88, 0.3);
  background: #fff;
  color: var(--color-primary-dark);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.blog-pagination a.page-numbers:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-fg);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(12, 133, 88, 0.25);
}
.blog-pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-fg);
}
.blog-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  min-width: 1.25rem;
}
/* Prev / Next as pill buttons with directional arrows */
.blog-pagination .wp-block-query-pagination-next,
.blog-pagination .wp-block-query-pagination-previous {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.75rem;
  padding: 0 1.3rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-fg);
  font-family: var(--font-family-display);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.blog-pagination .wp-block-query-pagination-next:hover,
.blog-pagination .wp-block-query-pagination-previous:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(12, 133, 88, 0.25);
}
.blog-pagination .wp-block-query-pagination-next::after  { content: "\2192"; font-size: 1.1em; }
.blog-pagination .wp-block-query-pagination-previous::before { content: "\2190"; font-size: 1.1em; }
.blog-pagination a:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .blog-pagination a { transition: none; }
  .blog-pagination a:hover { transform: none; }
}

/* ===== Blog single ===== */
.blog-single__hero { text-align: left; }
.blog-single__title { line-height: 1.15; margin: .25rem 0 .5rem; }
.blog-single__meta { align-items: center; }
.blog-single__image img { width: 100%; max-height: 460px; object-fit: cover; }
.blog-single__main { max-width: 720px; }
.blog-single__main p, .blog-single__main li { line-height: 1.7; }
.blog-sidebar { position: sticky; top: 96px; align-self: flex-start; }
.blog-sidebar__block ul { list-style: none; margin: 0; padding: 0; }
.blog-related .section-heading { text-align: center; margin-bottom: var(--wp--preset--spacing--space-6); }
@media (max-width: 900px) {
  .blog-single__cols { flex-wrap: wrap !important; }
  .blog-single__main, .blog-single__aside { flex-basis: 100% !important; }
  .blog-sidebar { position: static; }
}

/* ===== Blog single meta dates + sidebar CTA ===== */
.blog-single__meta .meta-label { font-weight: 700; }
.blog-single__updated { opacity: .85; }
.blog-sidebar__cta { text-align: center; }
.blog-sidebar__cta a { color: inherit; text-decoration: underline; }
.blog-cta .cta-band__heading,
.blog-cta .cta-band__subtext { text-align: center; }

/* ===== Blog card + sidebar padding polish =====
   The block-comment style attrs (padding/radius) don't emit as inline styles
   on these hand-authored static patterns, so card/sidebar content rendered
   flush to the edge with square corners. Style via the BEM classes instead. */

/* Cards (collection grid + "More from the blog") */
.blog-card { border-radius: 12px; }
.blog-card__image { margin-bottom: var(--wp--preset--spacing--space-3, 1rem); }
.blog-card__cat,
.blog-card__title,
.blog-card__excerpt,
.blog-card__date {
  padding-left: var(--wp--preset--spacing--space-4, 1.25rem);
  padding-right: var(--wp--preset--spacing--space-4, 1.25rem);
}
.blog-card__cat { margin-top: var(--wp--preset--spacing--space-3, 1rem); display: block; }
.blog-card__date { padding-bottom: var(--wp--preset--spacing--space-4, 1.25rem); }

/* Sidebar cards: real padding + rounded corners + tidy list spacing */
.blog-sidebar__block {
  padding: var(--wp--preset--spacing--space-4, 1.25rem);
  border-radius: 12px;
}
.blog-sidebar__block h3 { margin: 0 0 .75rem; }
.blog-sidebar__block ul { list-style: none; margin: 0; padding: 0; }
.blog-sidebar__block li { margin: 0 0 .5rem; line-height: 1.4; }
.blog-sidebar__block li:last-child { margin-bottom: 0; }
.blog-sidebar__block li a { text-decoration: none; }
.blog-sidebar__block li a:hover { text-decoration: underline; }
.blog-sidebar__cta {
  padding: var(--wp--preset--spacing--space-5, 1.5rem) var(--wp--preset--spacing--space-4, 1.25rem);
  border-radius: 12px;
}
.blog-sidebar__cta > *:last-child { margin-bottom: 0; }

/* === Contact page (redesigned 2026-06-21) ================================== */
/* Lead: accent eyebrow + intro. */
.contact-lead { max-width: 44rem; margin: 0 auto var(--space-6); text-align: center; }
.contact-eyebrow {
  display: inline-block;
  font-size: var(--font-size-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.contact-intro { font-size: 1.15rem; line-height: 1.6; color: var(--color-muted); margin: 0; }

/* Two balanced cards of equal height; stack on mobile (WP columns <782px). */
.contact-grid { align-items: stretch; }
.contact-grid > .wp-block-column { display: flex; }
.contact-grid > .wp-block-column > .wp-block-group { width: 100%; }

/* Shared kicker above each card heading. */
.contact-card__kicker {
  display: inline-block;
  font-size: var(--font-size-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.contact-card__heading {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-h2);
  margin: 0 0 var(--space-5);
}

/* Left: elevated white form card with a brand-tinted soft shadow. */
.contact-form-card {
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px -26px rgba(12,133,88,0.30), 0 4px 14px rgba(0,0,0,0.04);
}

/* CF7 fields inside the white card: soft filled fields, comfortable padding,
   green focus ring. Scoped to text-like inputs so the gold submit is untouched. */
.quote-cf7--light .quote-cf7__row { gap: 0.4rem; }
.quote-cf7--light .quote-cf7__row > label {
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: var(--font-size-small);
}
.quote-cf7--light input[type="text"],
.quote-cf7--light input[type="tel"],
.quote-cf7--light input[type="email"],
.quote-cf7--light select,
.quote-cf7--light textarea {
  width: 100%;
  background: #f5f7f6;
  color: var(--color-text);
  border: 1.5px solid #e1e4e2;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: 1.4;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.quote-cf7--light input::placeholder,
.quote-cf7--light textarea::placeholder { color: #9a9a9a; }
.quote-cf7--light input[type="text"]:focus,
.quote-cf7--light input[type="tel"]:focus,
.quote-cf7--light input[type="email"]:focus,
.quote-cf7--light select:focus,
.quote-cf7--light textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(12,133,88,0.16);
  outline: none;
}
.quote-cf7--light .quote-cf7__submit { margin-top: var(--space-2); }
.quote-cf7--light .quote-cf7__submit input[type="submit"] {
  width: 100%;
  padding: 0.95rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.quote-cf7--light .quote-cf7__submit input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(234,198,30,0.85);
  filter: brightness(1.02);
}

/* Right: rich green info card with gradient depth + decorative glow.
   !important beats WP's .has-primary-background-color preset rule. */
.contact-info-card.has-background {
  background: linear-gradient(158deg, var(--color-primary) 0%, var(--color-primary-dark) 62%, #0a6446 100%) !important;
}
.contact-info-card {
  color: var(--color-primary-fg);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -26px rgba(12,133,88,0.55);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contact-info-card::after {
  content: "";
  position: absolute;
  top: -35%; right: -28%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(111,241,192,0.20) 0%, transparent 70%);
  pointer-events: none;
}
.contact-info-card > * { position: relative; z-index: 1; }
.contact-card__heading--light {
  color: var(--color-white);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-h2);
  margin: 0 0 var(--space-5);
}

.contact-icon { width: 1.25rem; height: 1.25rem; color: var(--color-accent); flex: none; }

/* Hero click-to-call. */
.contact-info-card__phoneblock { margin-bottom: var(--space-2); }
.contact-info-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-family-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  color: var(--color-white);
  text-decoration: none;
}
.contact-info-card__phone .contact-icon { width: 1.5rem; height: 1.5rem; }
.contact-info-card__phone:hover { color: var(--color-primary-light); }
.contact-info-card__mobile {
  display: inline-block;
  margin-top: 0.4rem;
  color: rgba(255,255,255,0.82);
  font-size: var(--font-size-small);
  text-decoration: none;
}
.contact-info-card__mobile:hover { text-decoration: underline; }

.contact-info-card__divider {
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin: var(--space-4) 0;
}

/* Info rows with line icons. */
.contact-info-list { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.contact-info-list__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.contact-info-list .contact-icon { margin-top: 2px; }
.contact-info-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-info-list__label {
  font-size: var(--font-size-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.66);
}
.contact-info-list__value { color: var(--color-white); word-break: break-word; }
.contact-info-list a.contact-info-list__value { text-decoration: none; }
.contact-info-list a.contact-info-list__value:hover { text-decoration: underline; }
.contact-info-list__value--muted { color: rgba(255,255,255,0.78); font-size: var(--font-size-small); }

/* Google rating chip. */
.contact-info-card__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: var(--space-4);
  margin-top: auto;   /* fills the card: pulls the chip to the bottom when the card is stretched to match the form */
  border-top: 1px solid rgba(255,255,255,0.18);
}
.contact-info-card__stars { color: var(--color-accent); letter-spacing: 2px; font-size: 1.05rem; }
.contact-info-card__ratingnum { font-weight: 800; color: var(--color-white); }
.contact-info-card__ratingtext { color: rgba(255,255,255,0.78); font-size: var(--font-size-small); }

/* === Breadcrumbs (Rank Math) ============================================== */
.breadcrumbs-bar {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.breadcrumbs-bar .rank-math-breadcrumb p {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}
.breadcrumbs-bar .rank-math-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumbs-bar .rank-math-breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.breadcrumbs-bar .rank-math-breadcrumb .separator {
  margin: 0 0.45em;
  color: var(--color-border);
}
.breadcrumbs-bar .rank-math-breadcrumb .last {
  color: var(--color-text);
  font-weight: 600;
}

/* "What we take" item lists (item-type pages): indented rows with larger icons,
   icon in a fixed column so multi-line labels stay aligned. */
.wwt-grid {
  list-style: none;
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.wwt-tile {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: start;
  gap: var(--space-3);
}
.wwt-tile__icon {
  font-size: 1.75rem;
  line-height: 1.4;
  text-align: center;
}
.wwt-tile__label {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}
@media (max-width: 599.98px) {
  .wwt-grid { padding-left: var(--space-3); }
  .wwt-tile { grid-template-columns: 2rem 1fr; gap: var(--space-2); }
  .wwt-tile__icon { font-size: 1.5rem; }
}


/* Recent-articles widget: featured-image thumbnail cards.
   The front-end does not load WordPress's external wp-block-library stylesheet,
   so the latest-posts featured image must be sized/cropped here explicitly. */
.blog-sidebar .wp-block-latest-posts__list li { margin-bottom: var(--space-4, 1.25rem); }
.blog-sidebar .wp-block-latest-posts__list li:last-child { margin-bottom: 0; }
.blog-sidebar .wp-block-latest-posts__featured-image { margin: 0 0 .5rem; }
.blog-sidebar .wp-block-latest-posts__featured-image a { display: block; }
.blog-sidebar .wp-block-latest-posts__featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
}
.blog-sidebar .wp-block-latest-posts__post-title {
  display: block;
  font-family: var(--font-family-display, sans-serif);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.3;
  margin: 0 0 .15rem;
}
.blog-sidebar .wp-block-latest-posts__post-date {
  display: block;
  font-size: var(--font-size-small, .85rem);
  color: var(--color-muted, #666);
}

/* --- Author EEAT --- */
.author-card {
  display: flex;
  gap: var(--wp--preset--spacing--space-5, 2rem);
  align-items: flex-start;
  flex-wrap: wrap;
}
.author-card__photo {
  width: 200px;
  height: 200px;
  border-radius: var(--wp--custom--border-radius--lg, 16px);
  object-fit: cover;
  flex: 0 0 auto;
}
.author-card__body { flex: 1 1 320px; }
.author-card__name { margin: 0 0 0.25rem; }
.author-card__role { color: var(--wp--preset--color--text-muted, #5a6470); font-weight: 600; margin: 0 0 1rem; }
.author-card__bio { margin: 0 0 1.25rem; }
.author-card__chips-label { font-weight: 700; margin: 0 0 0.5rem; }
.knows-about-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.knows-about-chips li {
  background: var(--wp--preset--color--surface, #f4f6f5);
  border: 1px solid var(--wp--preset--color--border, #e2e6e4);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .author-card { justify-content: center; text-align: center; }
  .knows-about-chips { justify-content: center; }
}

/* --- Author bio box (per post) --- */
.author-bio-box__inner {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--wp--preset--color--surface, #f4f6f5);
  border: 1px solid var(--wp--preset--color--border, #e2e6e4);
  border-radius: var(--wp--custom--border-radius--card, 12px);
  padding: 1.25rem 1.5rem;
}
.author-bio-box__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.author-bio-box__eyebrow { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--text-muted, #5a6470); margin: 0 0 0.25rem; }
.author-bio-box__name { font-weight: 700; margin: 0 0 0.5rem; }
.author-bio-box__bio { margin: 0 0 0.75rem; font-size: 0.95rem; }
.author-bio-box__link { font-weight: 600; color: var(--wp--preset--color--primary, #0c8558); text-decoration: none; }
@media (max-width: 600px) { .author-bio-box__inner { flex-direction: column; align-items: center; text-align: center; } }

/* --- Blog/page body lists: restore bullets and numbers (global `ul, ol { list-style: none }` reset strips them) --- */
.entry-content ul:not([class]),
.entry-content ul.wp-block-list,
.entry-content ol:not([class]),
.entry-content ol.wp-block-list {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}
.entry-content ul:not([class]),
.entry-content ul.wp-block-list { list-style: disc outside; }
.entry-content ol:not([class]),
.entry-content ol.wp-block-list { list-style: decimal outside; }
.entry-content ul:not([class]) > li,
.entry-content ul.wp-block-list > li,
.entry-content ol:not([class]) > li,
.entry-content ol.wp-block-list > li { margin: 0 0 0.4rem; }

/* === Accessibility: WCAG AA text-contrast fixes (P3, 2026-06-25) === */
/* CTA band subtext was opacity:0.92 on green -> ~4.2:1; full white = 4.65:1. */
.cta-band .cta-band__subtext, .cta-band__subtext { opacity: 1 !important; }
/* Primary-green links on cream/surface backgrounds fail 4.5:1 (4.41); the
   darker brand green clears it (5.2:1). */
.reviews-cta a { color: var(--color-primary-dark); }
/* Quote/contact form fields: white text on a light translucent fill can't
   meet 4.5:1 on the green band. Darken the field fill (keeps the on-green
   look) and lift the placeholder so both pass. */
.quote-cf7 input[type="text"],
.quote-cf7 input[type="tel"],
.quote-cf7 input[type="email"],
.quote-cf7 textarea,
.form-field input,
.form-field select { background: rgba(0, 0, 0, 0.32); }
.quote-cf7 input:focus,
.quote-cf7 textarea:focus { background: rgba(0, 0, 0, 0.42); }
.quote-cf7 input::placeholder,
.quote-cf7 textarea::placeholder,
.form-field input::placeholder { color: rgba(255, 255, 255, 0.8); }
/* Quote-form helper <small> text on the green band: white clears 4.5:1
   (the inherited light green #bbddd0 was only 3.18:1). */
.quote-cf7 label small,
.quote-cf7__row label small { color: var(--color-white); opacity: 1; }
/* Photo-upload widget (images-optimize-upload-cf7 plugin) ships low-contrast
   greys on white + white-on-light-blue button. Raise to AA. */
.images-optimize-upload-inner h3 { color: #2b2b2b !important; }
.images-optimize-upload-inner span { color: #595959 !important; }
a.images-optimize-upload-button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
/* Suburb "services in this area" table links sit on cream (4.4:1 in green);
   the darker brand green clears AA. */
.services-table td a { color: var(--color-primary-dark); }
/* Trust-card body text was 0.82 white on green (3.66:1); full white = 4.65:1. */
.trust-card__body { color: var(--color-white); }
/* Hub-card "learn more" CTA was primary green on a pale-green tint (4.06:1);
   darker brand green clears AA. (The card name heading is large text, passes.) */
.hub-card__cta.has-primary-color, .hub-card__cta { color: var(--color-primary-dark) !important; }

/* === Area pages: "Why choose" — 1-up mobile, 2-up tablet/desktop ========== */
/* On suburb/service-area pages the shared trust-grid (4-up desktop, 2-up
   600-1200px) felt too crowded. Stack the cards in a single column on mobile,
   then split to two columns from tablet up (the four cards form a tidy 2x2).
   Scoped via the `itsdone-area` body class (added in functions.php). The grid
   renders as CSS Grid (.icon-grid--4 sets display:grid), so we override
   grid-template-columns, not flex; !important + higher specificity wins. */
.itsdone-area .wp-block-columns.trust-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-4) !important;
}
@media (min-width: 768px) {
  .itsdone-area .wp-block-columns.trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* === Portrait-mobile: stack two-up card grids to a single column ==========
   On phones (<=600px, matching the .blog-grid__list breakpoint) the 2-up card
   grids (hub/feature/service cards, plus team & pricing) are too narrow to read
   comfortably. Force a single column so the cards are full-width and legible.
   The area-page "Why choose" grid already stacks via its own scoped !important
   rule above, which still wins, so it is untouched here. Landscape phones and
   tablets (>600px) keep the multi-column layout. */
@media (max-width: 600px) {
  .icon-grid--4,
  .grid-4,
  .team-grid,
  .price-grid { grid-template-columns: 1fr; }
}

/* === Portrait-mobile: quote form submit button fit ========================
   The quote form sits inside nested padded containers (section ->
   container--narrow -> green quote panel with 2rem side padding) that shrink the
   form to ~206px on phones, while the CF7 submit's intrinsic nowrap width
   (~240px for "Send quote request" = 176px text + 2rem+2rem padding) overflowed
   and was clipped by the form's overflow:hidden. Fix: trim the panel's side
   padding so the form is roomier, make the submit fill the panel, trim its own
   side padding so the label fits on one line, and allow wrapping as a safety
   net. The padding override must beat the .wpcf7-form .wpcf7-submit !important
   rule, so it carries !important too. */
@media (max-width: 600px) {
  .quote-form { padding-left: 1rem; padding-right: 1rem; }
  .quote-cf7 .wpcf7-submit,
  .wpcf7-form .wpcf7-submit {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    white-space: normal;
  }
}

/* === Portrait-mobile: keep the quote form usably wide when deeply nested ===
   On the what-we-take hub + item pages the quote form's section is nested
   INSIDE the cards section/container, so the side padding of the form's own
   wrappers (section--white + container--narrow) compounds on top of the cards
   wrappers and starves the form to ~150px (illegible). Drop the padding of the
   form's OWN wrappers only (scoped via :has so the cards wrappers, which need
   their gutters, are untouched). Brings the form back to ~238px like the home
   page. Browsers without :has simply keep the current (narrow) behaviour. */
@media (max-width: 600px) {
  .section:has(> .container--narrow > .quote-form),
  .container--narrow:has(> .quote-form) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Red phone/call block-button: centre the label. WP's .wp-block-button__link is
   inline-block with text-align:start, so a full-width call-fallback button
   ("Or call Rob directly: ...") rendered left-aligned. Centre it on all
   viewports (the plain <a class="btn btn-phone"> variant is already flex-centred). */
html body .wp-block-button.btn-phone .wp-block-button__link,
html body .wp-block-button.btn-phone .wp-block-button__link.wp-element-button { text-align: center; }

/* === Contact page polish: card padding + light form fields ================
   Both the white form card and the green "Get in touch" card shipped with no
   internal padding, so content sat flush to the edges and the green card's
   "Get in touch" heading was clipped by its own overflow:hidden. Give them
   generous, matching padding (tighter on phones). Also re-assert the light
   field treatment: the contact form carries .quote-cf7--light, but the dark
   rgba(0,0,0,.32) fill + white placeholder (meant for the green quote panel)
   appear later in the file and were winning the specificity tie, turning the
   white card's fields into grey boxes with near-invisible placeholders. */
.contact-form-card,
.contact-info-card { padding: var(--space-6) var(--space-5); }
@media (max-width: 600px) {
  .contact-form-card,
  .contact-info-card { padding: var(--space-5) var(--space-3); }
}
.quote-cf7--light input[type="text"],
.quote-cf7--light input[type="tel"],
.quote-cf7--light input[type="email"],
.quote-cf7--light select,
.quote-cf7--light textarea { background: #f5f7f6; }
.quote-cf7--light input:focus,
.quote-cf7--light select:focus,
.quote-cf7--light textarea:focus { background: var(--color-white); }
.quote-cf7--light input::placeholder,
.quote-cf7--light textarea::placeholder { color: #9a9a9a; }

/* Contact "Get in touch" card: drop the decorative radial glow (::after). On the
   tall, narrow card its circular fade read as a shadow band across the middle.
   The linear gradient alone is clean and professional. */
.contact-info-card::after { content: none; }