/*
Theme Name:   Rankaleey
Theme URI:    https://rankaleey.com
Author:       Rankaleey
Description:  Custom theme for Rankaleey — local SEO and digital marketing for UK builders, contractors, and renovation trades.
Version:      1.6.2
Requires PHP: 7.4
Text Domain:  rankaleey
*/

/* ==========================================================================
   Rankaleey Homepage — design tokens
   ========================================================================== */

:root {
  --color-bg: oklch(0.98 0.004 75);
  --color-text: oklch(0.22 0.02 250);

  /* Brand green — CTA buttons, light-card accents/icons, dark-section highlights.
     Text/icons placed directly on --color-primary or --color-primary-light must
     use --color-on-primary (dark ink) or --color-primary-hover (darker green) —
     the bright green itself fails WCAG contrast as a text color on both white
     and its own tint. See PROJECT-STATUS.md-adjacent rebrand notes. */
  --color-primary: #4CCE67;
  --color-primary-hover: #2FA754;
  --color-primary-light: rgba(76, 206, 103, 0.14);
  --color-on-primary: #000F11;

  --color-accent: #2FA754;
  --color-accent-hover: #248a45;
  --color-on-accent: #000F11;

  --color-error: oklch(0.55 0.2 25);
  --color-error-bg: oklch(0.96 0.03 25);

  --color-amber: #4CCE67;
  --color-amber-light: #000F11;

  --color-body: oklch(0.35 0.02 250);
  --color-muted: oklch(0.45 0.02 250);
  --color-muted-2: oklch(0.42 0.02 250);
  --color-muted-3: oklch(0.5 0.02 250);
  --color-nav: oklch(0.4 0.02 250);
  --color-placeholder: oklch(0.55 0.01 250);

  --color-border: oklch(0.9 0.01 75);
  --color-border-2: oklch(0.88 0.01 75);
  --color-section-alt: oklch(0.96 0.008 75);

  --color-dark: #000F11;
  --color-dark-surface: #071A1D;
  --color-dark-border: rgba(255, 255, 255, 0.09);
  --color-dark-copy: rgba(255, 255, 255, 0.74);
  --color-dark-copy-2: rgba(255, 255, 255, 0.58);
  --color-dark-copy-3: rgba(255, 255, 255, 0.58);
  --color-dark-copy-4: rgba(255, 255, 255, 0.48);
  --color-dark-glow: radial-gradient(ellipse 900px 520px at 78% -10%, rgba(76, 206, 103, 0.20), transparent 62%), radial-gradient(ellipse 700px 460px at 6% 115%, rgba(76, 206, 103, 0.10), transparent 60%);

  --color-footer-bg: #000F11;
  --color-footer-border: rgba(255, 255, 255, 0.09);
  --color-footer-text: rgba(255, 255, 255, 0.74);
  --color-footer-muted: rgba(255, 255, 255, 0.48);

  --color-white: #fff;

  --font-heading: 'Archivo', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  --max-width: 1240px;
  --section-pad: 96px 32px;
  --section-pad-mobile: 64px 20px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

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

h1, h2, h3 { font-family: var(--font-heading); margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

input::placeholder { color: var(--color-placeholder); }

img, svg { max-width: 100%; }

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

#top, #services, #process, #results, #pricing, #audit {
  scroll-margin-top: 84px;
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color .15s;
}

/* ==========================================================================
   Site header  →  header.php
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 15, 17, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-dark-border);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-amber-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo__mark--sm {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.logo__text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.site-nav {
  display: flex;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark-copy);
}

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

.btn--primary-dark {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 11px 20px;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn--primary-dark:hover { background: var(--color-primary-hover); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:hover { background: var(--color-primary-light); }

.nav-toggle__icon-close { display: none; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-close { display: block; }

.mobile-menu {
  display: none;
}

/* ==========================================================================
   Hero  →  template-parts/section-hero.php
   ========================================================================== */

.hero-band {
  background: var(--color-dark-glow), var(--color-dark);
  overflow: hidden;
}

.hero {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 32px 88px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary-light);
  border: 1px solid rgba(76, 206, 103, 0.4);
  color: var(--color-primary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 24px;
}

.hero__title {
  font-weight: 800;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0 0 22px;
}

.hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-dark-copy);
  max-width: 480px;
  margin: 0 0 32px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn--accent {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 16px 28px;
  font-size: 16px;
}

.btn--accent:hover { background: var(--color-primary-hover); }

.link-arrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-white);
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
}

.link-arrow:hover { color: var(--color-primary); border-color: var(--color-primary); }

.hero__visual { position: relative; }

.ranking-card {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  padding: 32px 28px 26px;
}

.ranking-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
}

.ranking-card__label {
  color: var(--color-dark-copy);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ranking-card__trend {
  color: var(--color-amber);
  font-size: 13px;
  font-weight: 700;
}

.ranking-card__chart { overflow: visible; display: block; }
.ranking-card__gridline { stroke: var(--color-dark-border); stroke-width: 1; }
.ranking-card__line { stroke: var(--color-amber); stroke-width: 4; stroke-linecap: round; }
.ranking-card__area { fill: rgba(76, 206, 103, 0.13); }
.ranking-card__dot { fill: var(--color-dark-surface); stroke: var(--color-amber); stroke-width: 2.5; }
.ranking-card__dot--end { fill: var(--color-amber); stroke: var(--color-dark-surface); stroke-width: 3; }

.ranking-card__months {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-dark-copy-4);
}

.ranking-card__badge {
  position: absolute;
  bottom: -18px;
  right: 18px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ranking-card__badge-figure {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-on-primary);
}

.ranking-card__badge-copy {
  line-height: 1.2;
  color: var(--color-on-primary);
}

/* ==========================================================================
   Tools marquee  →  template-parts/section-tools-marquee.php
   ========================================================================== */

.tools-marquee {
  background: var(--color-section-alt);
  padding: 36px 0;
}

.tools-marquee__eyebrow {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-3);
  margin: 0 0 20px;
}

.tools-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.tools-marquee__track {
  display: flex;
  width: max-content;
  animation: tools-marquee-scroll 34s linear infinite;
  /* Keeps this on its own compositor layer for the life of the animation
     instead of the browser deciding partway through — some browsers will
     otherwise stop repainting a masked, animated element after the first
     iteration, which read as "the loop stops" even though the CSS is
     technically still running underneath. */
  will-change: transform;
}

.tools-marquee__viewport:hover .tools-marquee__track {
  animation-play-state: paused;
}

/* Two plain sibling flex items, each holding the full tool list once —
   deliberately not one real group plus a display:contents duplicate,
   which leaves zero ambiguity about how any given browser sizes
   width:max-content against display:contents children. Second group is
   presentation-only. */
.tools-marquee__group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-right: 14px;
}

.tools-marquee__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.tools-marquee__chip svg {
  color: var(--color-primary-hover);
  flex-shrink: 0;
  filter: grayscale(1);
  transition: filter 0.2s;
}

.tools-marquee__chip:hover svg {
  filter: grayscale(0);
}

@keyframes tools-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .tools-marquee__track {
    animation: none;
  }

  .tools-marquee__group:last-child {
    display: none;
  }
}

/* ==========================================================================
   Trust strip  →  template-parts/section-trust-strip.php
   ========================================================================== */

.trust-strip {
  background: var(--color-dark);
  padding: 28px 32px;
}

.trust-strip__list {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.trust-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--color-dark-copy);
}

.trust-strip__item svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-amber);
}

.trust-strip__item span {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
}

/* ==========================================================================
   Shared section heading
   ========================================================================== */

.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.eyebrow {
  color: var(--color-primary-hover);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.section-heading h2 {
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.section-heading__lede {
  font-size: 16.5px;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   Services  →  template-parts/section-services.php
   ========================================================================== */

.services {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-pad);
}

.services .section-heading h2 { margin-bottom: 14px; }
.services .section-heading { margin-bottom: 56px; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px;
  transition: border-color .15s;
}

.service-card:hover { border-color: rgba(76, 206, 103, 0.4); }

.service-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.service-card__shape {
  width: 16px;
  height: 16px;
  background: var(--color-primary-hover);
  display: block;
}

.service-card__shape--square { border-radius: 4px; }
.service-card__shape--circle { border-radius: 50%; }
.service-card__shape--round { border-radius: 2px; }

.service-card h3 {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 10px;
}

.service-card h3 a { color: inherit; }
.service-card h3 a:hover { color: var(--color-primary-hover); }

.service-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

/* ==========================================================================
   Process  →  template-parts/section-process.php
   ========================================================================== */

.process {
  background: var(--color-dark-glow), var(--color-dark);
  padding: var(--section-pad);
  overflow: hidden;
}

.process__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.process .eyebrow { color: var(--color-primary); }
.process .section-heading h2 { color: var(--color-white); }

.process .section-heading { margin-bottom: 64px; }

.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

.process__steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--color-dark-border);
  z-index: 0;
}

.process__step {
  position: relative;
  z-index: 1;
}

.process__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.process__step h3 {
  font-weight: 700;
  font-size: 17px;
  color: var(--color-white);
  margin: 0 0 8px;
}

.process__step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark-copy);
  margin: 0;
}

/* ==========================================================================
   Case studies  →  template-parts/section-case-studies.php
   ========================================================================== */

.case-studies {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-pad);
}

.case-studies__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.case-study-card {
  position: relative;
  background: var(--color-dark);
  border-radius: 14px;
  color: var(--color-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.case-study-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(76, 206, 103, 0.35);
}

/* Radius lives on the image itself, matching the card's own 14px, rather
   than clipping via overflow:hidden on .case-study-card — overflow:hidden
   there would also clip the hover box-shadow glow above, since box-shadow
   paints outside the border box. */
.case-study-card__screenshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--color-dark-border);
}

.case-study-card__body {
  padding: 36px;
}

.case-study-card__trade {
  font-size: 13px;
  color: var(--color-dark-copy-2);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}

.case-study-card h3 {
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 24px;
}

.case-study-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.case-study-card__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
  color: var(--color-amber);
}

.case-study-card__label {
  font-size: 12.5px;
  color: var(--color-dark-copy-2);
  margin-top: 4px;
}

.case-study-card__quote {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-dark-copy);
  margin: 24px 0 0;
  border-top: 1px solid var(--color-dark-border);
  padding-top: 20px;
}

/* Outline CTA — only this link is clickable, not the whole card. The card
   itself still gets the hover lift/glow (see .case-study-card:hover above),
   and this button fills solid green as part of that same hover, but its
   click target is just its own box. */
.case-study-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding: 10px 18px;
  border: 1.5px solid var(--color-primary);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.case-study-card:hover .case-study-card__link {
  color: var(--color-on-primary);
  background: var(--color-primary);
}

/* ==========================================================================
   Pricing  →  template-parts/section-pricing.php
   ========================================================================== */

.pricing {
  background: var(--color-section-alt);
  padding: var(--section-pad);
}

.pricing__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing-card {
  background: var(--color-white);
  border-radius: 14px;
  padding: 36px 32px;
  border: 1px solid var(--color-border);
  position: relative;
}

.pricing-card--popular {
  border: 2px solid var(--color-primary);
  transform: scale(1.02);
}

.pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.pricing-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 6px;
}

.pricing-card__desc {
  font-size: 14px;
  color: var(--color-muted-3);
  margin-bottom: 22px;
  min-height: 38px;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 26px;
}

.pricing-card__amount {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 38px;
}

.pricing-card__period {
  font-size: 14px;
  color: var(--color-muted-3);
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-body);
}

.pricing-card__features svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary-hover);
}

.btn--pricing-light,
.btn--pricing-dark {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px;
  border-radius: 7px;
  font-size: 14.5px;
}

/* Both variants are now the same solid green — kept as separate classes
   (rather than merged/renamed) only because the template still assigns
   them conditionally on is_popular; visually there is no "light"/"dark"
   distinction left, by design, so every tier's CTA reads equally
   clickable. */
.btn--pricing-light,
.btn--pricing-dark {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--pricing-light:hover,
.btn--pricing-dark:hover {
  background: var(--color-primary-hover);
}

/* ==========================================================================
   Stats band  →  template-parts/section-stats.php
   ========================================================================== */

.stats {
  background: var(--color-dark);
  padding: 72px 32px;
}

.stats__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stats__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 42px;
  color: var(--color-amber);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.stats__label {
  font-size: 14px;
  color: var(--color-dark-copy-3);
  margin-top: 8px;
}

/* ==========================================================================
   Final CTA / audit form  →  template-parts/section-cta-audit.php
   ========================================================================== */

.cta-audit {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.cta-audit__copy h2 {
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  line-height: 1.1;
}

.cta-audit__copy p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 24px;
  max-width: 420px;
}

.cta-audit__benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-audit__benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--color-nav);
}

.cta-audit__benefits svg { color: var(--color-primary-hover); }

.audit-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 36px;
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.3);
}

.audit-form h3,
.audit-form-card__success h3 {
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 20px;
}

.audit-form__field { margin-bottom: 14px; }
.audit-form__field:last-of-type { margin-bottom: 0; }

.audit-form input,
.audit-form textarea,
.audit-form select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border-2);
  border-radius: 7px;
  font-size: 14.5px;
  font-family: inherit;
  color: inherit;
  background: var(--color-white);
}

.audit-form textarea {
  resize: vertical;
  min-height: 60px;
}

.audit-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.audit-form__radio-group {
  display: flex;
  gap: 20px;
  margin-bottom: 4px;
}

.audit-form__radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  cursor: pointer;
}

.audit-form__radio-group input[type="radio"] {
  accent-color: var(--color-primary);
}

.audit-form__conditional {
  margin-top: 10px;
}

.audit-form__no-website-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

/* Honeypot — off-screen (not display:none, which some bots skip) so it
   still has real computed dimensions and stays a functional trap, while
   aria-hidden + tabindex="-1" keep real keyboard/screen-reader users from
   ever encountering it. */
.audit-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.audit-form__field--consent {
  margin-top: 4px;
}

.audit-form__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
  cursor: pointer;
}

.audit-form__consent-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.audit-form__consent-label a {
  color: inherit;
  text-decoration: underline;
}

.audit-form-card__error {
  background: var(--color-error-bg);
  border-left: 3px solid var(--color-error);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.audit-form-card__error p {
  margin: 0;
  font-size: 14px;
  color: var(--color-error);
}

.audit-form__submit {
  width: 100%;
  text-align: center;
  padding: 14px;
  font-size: 15px;
  margin-top: 6px;
}

.audit-form__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.audit-form-card__success {
  text-align: center;
  padding: 40px 0;
}

.audit-form-card__success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.audit-form-card__success h3 { margin-bottom: 8px; }

.audit-form-card__success p {
  font-size: 14.5px;
  color: var(--color-muted-3);
  margin: 0;
}

/* ==========================================================================
   Site footer  →  footer.php
   ========================================================================== */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 64px 32px 28px;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--color-footer-border);
}

.footer-about__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer-about__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-white);
}

.footer-about p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 280px;
  margin: 0;
}

.footer-col__title {
  color: var(--color-white);
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.footer-col a:hover { color: var(--color-white); }

.site-footer__bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--color-footer-muted);
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   Interior pages — services archive, single service, single location
   (new, not part of the original homepage design; extends the same system)
   ========================================================================== */

.page-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 32px 16px;
  text-align: center;
}

.page-hero__eyebrow {
  color: var(--color-primary-hover);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.page-hero h1 {
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.page-hero p {
  font-size: 16.5px;
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

.service-detail,
.location-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.service-detail__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.service-detail__icon .service-card__shape,
.service-detail__icon .service-card__shape--square,
.service-detail__icon .service-card__shape--circle,
.service-detail__icon .service-card__shape--round {
  width: 20px;
  height: 20px;
}

.service-detail h1,
.location-detail h1 {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  line-height: 1.15;
}

.service-detail__body,
.location-detail__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body);
}

.service-detail__body p,
.location-detail__body p {
  margin: 0 0 20px;
}

.location-meta {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-on-primary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.generic-single {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.generic-single__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body);
}

.generic-single__body p {
  margin: 0 0 20px;
}

/* ==========================================================================
   Case study detail (single-case_study.php)
   ========================================================================== */

.case-study-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.case-study-detail__trade {
  font-size: 13px;
  color: var(--color-muted-3);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

.case-study-detail h1 {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  line-height: 1.15;
}

.case-study-detail__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: var(--color-section-alt);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 32px;
}

.case-study-detail__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  color: var(--color-primary-hover);
}

.case-study-detail__label {
  font-size: 12.5px;
  color: var(--color-muted-3);
  margin-top: 4px;
}

.case-study-detail__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body);
}

.case-study-detail__body p {
  margin: 0 0 20px;
}

.case-study-detail__body h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 40px 0 16px;
  line-height: 1.25;
}

.case-study-detail__body h2:first-child {
  margin-top: 0;
}

.case-study-detail__body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--color-text);
  margin: 28px 0 10px;
}

.case-study-detail__body ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.case-study-detail__body ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}

.case-study-detail__body ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-hover);
}

.case-study-detail__body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  margin: 8px 0 24px;
}

.case-study-detail__quote {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 8px 0 32px;
  padding: 24px 28px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-section-alt);
  border-radius: 0 10px 10px 0;
}

/* ==========================================================================
   Package detail (single-package.php)
   ========================================================================== */

.package-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.package-detail h1 {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  line-height: 1.15;
}

.package-detail__desc {
  font-size: 16.5px;
  color: var(--color-muted);
  margin: 0 0 20px;
}

.package-detail__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 28px;
}

.package-detail__amount {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 42px;
}

.package-detail__period {
  font-size: 15px;
  color: var(--color-muted-3);
}

.package-detail__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  padding: 24px;
  background: var(--color-section-alt);
  border-radius: 14px;
}

.package-detail__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--color-body);
}

.package-detail__features svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary-hover); }

.package-detail__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body);
  margin-bottom: 28px;
}

.package-detail__body p {
  margin: 0 0 20px;
}

/* ==========================================================================
   Blog — listing (home.php) and single post (single.php)
   ========================================================================== */

.blog {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-pad);
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card__body {
  padding: 24px;
}

.blog-card__meta {
  font-size: 12.5px;
  color: var(--color-muted-3);
  margin-bottom: 10px;
}

.blog-card__title {
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 10px;
}

.blog-card__title a:hover { color: var(--color-primary-hover); }

.blog-card__excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 16px;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary-hover);
}

.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-nav);
}

.pagination .page-numbers.current {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.pagination .page-numbers.dots {
  border-color: transparent;
}

.blog-post {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.blog-post__meta {
  font-size: 13px;
  color: var(--color-muted-3);
  margin-bottom: 14px;
}

.blog-post h1 {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  line-height: 1.15;
}

.blog-post__thumb {
  margin-bottom: 32px;
}

.blog-post__thumb img {
  width: 100%;
  border-radius: 14px;
  display: block;
}

.blog-post__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-body);
}

.blog-post__body p {
  margin: 0 0 20px;
}

.blog-post__back {
  margin-top: 40px;
}

/* ==========================================================================
   Responsive — tablet (≤1023px)
   ========================================================================== */

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

  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Responsive — mobile (≤767px)
   ========================================================================== */

@media (max-width: 767px) {
  .site-nav { display: none; }
  .site-header__cta { display: none; }
  .nav-toggle { display: flex; }

  .mobile-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 20px 20px;
    border-top: 1px solid var(--color-dark-border);
    background: var(--color-dark);
  }

  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu__nav a {
    padding: 14px 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-dark-copy);
    border-bottom: 1px solid var(--color-dark-border);
  }

  .mobile-menu__nav a:last-child {
    border-bottom: none;
  }

  .mobile-menu__cta {
    margin-top: 12px;
    text-align: center;
  }

  .site-header__inner {
    padding: 16px 20px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 20px 56px;
  }

  .hero__title { font-size: 34px; }

  .trust-strip__list {
    grid-template-columns: 1fr;
  }

  .services,
  .process,
  .case-studies,
  .pricing,
  .cta-audit {
    padding: var(--section-pad-mobile);
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .process__steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .process__steps::before { display: none; }

  /* Rail (circle + connector line) / content (heading + body) two-column
     split — the number no longer sits directly above the heading/body in
     the same column, so the line behind it can never run into the text.
     Rail is 64px (circle 48px, centered, 8px clearance either side);
     content starts 18px after that. align-items: start keeps the circle
     pinned to the top of its row even when the heading wraps to two lines
     and grows the row taller. */
  .process__step {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 18px;
    align-items: start;
  }

  .process__number {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 0;
  }

  .process__step h3 {
    grid-column: 2;
    grid-row: 1;
  }

  .process__step p {
    grid-column: 2;
    grid-row: 2;
  }

  /* Vertical equivalent of the desktop connector line, confined to the rail
     column so it never underlaps the content column's text. Drawn per-step
     rather than once on .process__steps, so it self-corrects to each step's
     actual rendered height (which now varies with how much the heading/body
     wrap inside the narrower content column): top: 24px starts it at this
     step's own circle center (still 24px — the circle's own height is
     unchanged, only its column changed); left: 31.25px centers a 1.5px line
     within the 64px rail (32px rail-center minus half the line's width);
     height: calc(100% + 36px) — 100% of this step's own grid-row-driven
     height plus the 36px mobile row gap — lands the bottom edge exactly at
     the next step's circle center, with no hardcoded total-height guess. */
  .process__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 31.25px;
    width: 1.5px;
    height: calc(100% + 36px);
    background: rgba(76, 206, 103, 0.3);
    z-index: -1;
  }

  .case-studies__grid {
    grid-template-columns: 1fr;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
  }

  .pricing-card--popular {
    transform: none;
  }

  .stats {
    padding-bottom: 28px;
  }

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

  /* Single-column stack with a divider between stats instead of a grid gap
     — reuses the exact same subtle green line treatment as the "How It
     Works" vertical connector (rgba(76,206,103,0.3), 1.5px) for visual
     consistency between the two. Item padding replaces the grid gap so the
     divider sits centered in the space between stats rather than doubling
     up with it; first/last shed the padding that would otherwise stack on
     top of .stats' own top/bottom section padding. */
  .stats__item {
    padding: 22px 0;
  }

  .stats__item:first-child {
    padding-top: 0;
  }

  .stats__item:last-child {
    padding-bottom: 0;
  }

  .stats__item:not(:first-child) {
    border-top: 1.5px solid rgba(76, 206, 103, 0.3);
  }

  .cta-audit {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-detail,
  .location-detail,
  .blog-post,
  .blog,
  .generic-single,
  .case-study-detail,
  .package-detail {
    padding: var(--section-pad-mobile);
  }

  .case-study-detail__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog__grid {
    grid-template-columns: 1fr;
  }
}