/* =========================================================
   Alpine Arborism — Stylesheet
   Brand: #075846 (logo green)
   ========================================================= */

:root {
  --brand: #075846;
  --brand-dark: #044033;
  --brand-light: #0a7a5e;
  --brand-pale: #e8f3ef;
  --accent: #f4a300;
  --accent-dark: #d98c00;
  --ink: #0f202e;
  --ink-soft: #45524e;
  --muted: #6c7873;
  --line: #e3e7e5;
  --bg: #ffffff;
  --bg-soft: #f6f9f7;
  --bg-tint: #eef4f1;
  --danger: #c0392b;
  --success: #1f8a4c;
  --radius: 3px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(7, 88, 70, 0.06), 0 1px 3px rgba(7, 88, 70, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(7, 88, 70, 0.08), 0 2px 4px -2px rgba(7, 88, 70, 0.05);
  --shadow-lg: 0 10px 25px -5px rgba(7, 88, 70, 0.12), 0 8px 10px -6px rgba(7, 88, 70, 0.08);
  --container: 1200px;
  --container-wide: 1320px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;

  /* Top-bar layout vars — drive header + logo overhang geometry. */
  --util-h: 42px;
  --header-h: 66px;
  --logo-img-h: 60px;
}

* { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--brand-light); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* =========================================================
   Top utility bar
   ========================================================= */
.utility-bar {
  background: #f3f4f4;
  color: #0f202e;
  font-size: 0.86rem;
  height: var(--util-h);
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: visible;
  line-height: 1.2;
  border-bottom: 1px solid var(--line);
}
.utility-bar a { color: #0f202e; }
.utility-bar a:hover { color: var(--brand); }
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  height: 100%;
  width: 100%;
}
.utility-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.utility-right span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.utility-bar .icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
  fill: currentColor;
}

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
  background: var(--bg);
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
  position: relative;
}

/* Logo overhang: the white card spans from the top of the utility bar (y=0
   in the viewport) down to the bottom of the header. Vertical padding is
   computed so the SVG sits centred inside that span at every breakpoint.
   The card overshoots the top by 6px (clipped by viewport) so sub-pixel
   rounding can't leave a green hairline. Padding-top is compensated by
   the same 6px so the image's visual position stays unchanged. */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--brand);
  padding-top: calc((var(--util-h) + var(--header-h) - var(--logo-img-h)) / 2 + 6px);
  padding-bottom: calc((var(--util-h) + var(--header-h) - var(--logo-img-h)) / 2);
  padding-left: 18px;
  padding-right: 18px;
  margin-top: calc(-1 * var(--util-h) - 6px);
  margin-bottom: -1px;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  z-index: 30;
}
.logo img {
  height: var(--logo-img-h);
  width: auto;
  display: block;
  /* Invert the green SVG to white, same trick as the footer logo. */
  filter: brightness(0) invert(1);
  opacity: 0.98;
}

/* Small desktop: shrink header + logo together; --util-h stays constant
   because the utility bar content doesn't change. */
@media (max-width: 1100px) {
  :root {
    --header-h: 56px;
    --logo-img-h: 50px;
  }
}

/* Tablet */
@media (max-width: 900px) {
  :root {
    --header-h: 50px;
    --logo-img-h: 44px;
  }
}
.logo-text {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand);
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo-text small {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.main-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav a {
  display: block;
  padding: 12px 14px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--brand-dark); text-decoration: none; }

/* Top-level items use an underline bar instead of a background fill */
.main-nav > ul > li > a {
  position: relative;
  background: transparent !important;
}
.main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -2px;
  height: 4px;
  background: var(--brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.15s ease;
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a.active::after,
.main-nav > ul > li.has-dropdown:hover > a::after,
.main-nav > ul > li.has-dropdown:focus-within > a::after {
  transform: scaleX(1);
}

.main-nav .has-dropdown { position: relative; }
/* No dropdown caret — cleaner Rentokil-style look */
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 340px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
  list-style: none;
  margin: 0;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.dropdown li { display: block; }
.dropdown a {
  padding: 12px 14px;
  font-size: 0.93rem;
  font-weight: 600;
  border-radius: var(--radius);
  display: block;
  line-height: 1.3;
  color: var(--brand-dark);
}
.dropdown a:hover {
  background: var(--brand-pale);
  color: var(--brand-dark);
  text-decoration: none;
}
.dropdown a small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 3px;
}
.dropdown a:hover small { color: var(--ink-soft); }
.dropdown a.dd-cta {
  background: var(--brand);
  color: #fff;
  margin-top: 4px;
  text-align: center;
}
.dropdown a.dd-cta:hover { background: var(--brand-dark); color: #fff; }
.dropdown hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 0;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.header-phone .phone-icon {
  width: 36px;
  height: 36px;
  background: var(--brand-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-phone svg { width: 18px; height: 18px; fill: var(--brand); }
.header-phone span { line-height: 1.1; }
.header-phone small { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 500; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 28px; height: 28px; }
.nav-close { display: none; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-size: 0.97rem;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.2;
  font-family: inherit;
}
.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  background: var(--accent);
  color: #0f202e;
  border-color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #0f202e;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
/* Ensure dark text inside dark-themed footers too */
.site-footer .btn-primary,
.site-footer .btn-primary:link,
.site-footer .btn-primary:visited,
.site-footer .btn-primary:hover { color: #0f202e; }
.btn-secondary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-secondary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  text-decoration: none;
}
.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline:hover {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-tint); }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  background:
    linear-gradient(135deg, rgba(7, 88, 70, 0.92) 0%, rgba(4, 64, 51, 0.88) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23123a2d'/><stop offset='1' stop-color='%23044033'/></linearGradient></defs><rect fill='url(%23g)' width='1600' height='900'/><g opacity='0.18' fill='%23ffffff'><circle cx='200' cy='150' r='2'/><circle cx='1400' cy='200' r='2'/><circle cx='800' cy='100' r='1.5'/><circle cx='500' cy='300' r='1.5'/><circle cx='1100' cy='400' r='2'/></g></svg>");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 70px 0 60px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at top right, rgba(244, 163, 0, 0.10), transparent 60%);
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero p.lead {
  font-size: 1.18rem;
  color: #e0ece8;
  margin-bottom: 28px;
  max-width: 56ch;
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(244, 163, 0, 0.18);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
  border: 1px solid rgba(244, 163, 0, 0.3);
}
.hero-trust {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  color: #c8d8d3;
  font-size: 0.92rem;
}
.hero-trust .trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-trust svg {
  width: 22px;
  height: 22px;
  fill: var(--accent);
  flex-shrink: 0;
}

/* Hero inline form (Rentokil pattern) — fully square with a thick accent bar on top */
.hero-form {
  background: #ffffff;
  color: var(--ink);
  border-radius: 0;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.35);
  padding: 28px;
  position: relative;
}
.hero-form h2 {
  font-size: 1.45rem;
  margin: 0 0 18px;
  color: var(--brand-dark);
}
.hero-form .form-sub {
  display: none; /* "Takes about 60 seconds…" subhead removed in favour of the bar */
}
.hero-form .form-strip {
  background: var(--accent);
  height: 6px;
  padding: 0;
  margin: -28px -28px 22px;
  border-radius: 0;
  display: block;
  font-size: 0;
  line-height: 0;
}

/* =========================================================
   Forms
   ========================================================= */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-group {
  margin-bottom: 14px;
}
label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
label .req { color: var(--danger); }
.field-help {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 4px 0 0;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.97rem;
  font-family: inherit;
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(7, 88, 70, 0.18);
}
textarea { resize: vertical; min-height: 110px; }

/* =========================================================
   Floating-label field — notched-outline pattern, CSS-only.
   - Resting label sits at top:16px (= input padding-top) so it overlays
     the first line of text wherever the .float-field wrapper happens to
     be (independent of any extra .field-help paragraph below).
   - Floated label moves to top:-8px and shrinks to 0.75rem, sitting
     centred on the top border. The label has a white background so
     it cleanly "cuts through" the border line behind it.
   ========================================================= */
.float-field {
  position: relative;
  margin-bottom: 14px;
}
.float-field > input,
.float-field > textarea,
.float-field > select {
  width: 100%;
  padding: 16px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 0;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 1.4;
}
.float-field > textarea {
  padding: 16px 14px 12px;
  min-height: 108px;
  line-height: 1.5;
  resize: vertical;
}
.float-field > input:focus,
.float-field > textarea:focus,
.float-field > select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(7, 88, 70, 0.18);
}
.float-field > input:hover:not(:focus),
.float-field > textarea:hover:not(:focus),
.float-field > select:hover:not(:focus) {
  border-color: var(--brand-light);
}

/* Resting label: positioned absolutely at the input's text baseline.
   We use a hard pixel `top` instead of `top: 50%` because the .float-field
   wrapper can also contain a .field-help paragraph below the input, which
   would otherwise inflate the wrapper height and push the centred label
   visually below the input's true centre. The fixed `top: 16px` matches
   the input's padding-top so the label sits exactly over the first line
   of text. */
.float-field > label {
  position: absolute;
  left: 12px;
  top: 16px;
  margin: 0;
  padding: 0 4px;
  background: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
  transition:
    top 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s ease,
    font-weight 0.15s ease,
    letter-spacing 0.15s ease;
}
.float-field > label .req { color: var(--danger); }

/* Floated state: label sits centred on the top border (notched-outline look).
   At font-size 0.75rem and line-height 1.4 the label height is ~16.8px,
   so `top: -8px` puts its visual centre on the border (y = 0).            */
.float-field > input:focus + label,
.float-field > input:not(:placeholder-shown) + label,
.float-field > textarea:focus + label,
.float-field > textarea:not(:placeholder-shown) + label,
.float-field--select > label {
  top: -8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.float-field > input:not(:focus):not(:placeholder-shown) + label,
.float-field > textarea:not(:focus):not(:placeholder-shown) + label,
.float-field--select > select:not(:focus):valid + label {
  color: var(--brand-dark);
}

/* Selects: light fill, custom chevron, italic muted placeholder text.
   The placeholder <option value=""> selected state is detected by :invalid
   (the select has `required` so an empty value is invalid).            */
.float-field--select > select {
  background-color: var(--bg-soft);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23075846'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 22px;
  padding-right: 42px;
  cursor: pointer;
  font-weight: 500;
}
.float-field--select > select:invalid,
.float-field--select > select option[value=""] {
  color: var(--muted);
  font-style: italic;
}
.float-field--select > select option {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
  background: #ffffff;
}
.float-field--select > select option[disabled] {
  color: var(--muted);
  font-style: italic;
}
/* When a real option is chosen, restore normal styling */
.float-field--select > select:valid {
  color: var(--ink);
  font-style: normal;
}

/* The floated label for a coloured-fill select straddles two backgrounds:
   the form card (white) above the border and the select's own --bg-soft fill
   below it. A vertical hard-stop gradient at 50% matches each half to its
   neighbour so the label looks notched into the border instead of a white
   pill sitting on top of a grey box. */
.float-field--select > label {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 50%,
    var(--bg-soft) 50%,
    var(--bg-soft) 100%
  );
}

/* Help text under a field */
.float-field > .field-help {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* Autofill: don't let browser yellow override our white card */
.float-field > input:-webkit-autofill,
.float-field > input:-webkit-autofill:hover,
.float-field > input:-webkit-autofill:focus,
.float-field > textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #ffffff inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 9999s ease-out, color 9999s ease-out;
}
/* Autofill triggers :not(:placeholder-shown) on most browsers, but Chrome
   has historical quirks. Force-float the label when the input has been
   autofilled. */
.float-field > input:-webkit-autofill + label,
.float-field > textarea:-webkit-autofill + label {
  top: 7px;
  transform: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Disabled state */
.float-field > input:disabled,
.float-field > textarea:disabled,
.float-field > select:disabled {
  background: var(--bg-soft);
  color: var(--muted);
  cursor: not-allowed;
}

.checkbox-group, .radio-group {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.checkbox-item, .radio-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.12s;
  background: #fff;
}
.checkbox-item:hover, .radio-item:hover {
  border-color: var(--brand);
  background: var(--brand-pale);
}
.checkbox-item input, .radio-item input {
  margin: 3px 0 0;
  accent-color: var(--brand);
  flex-shrink: 0;
}
.checkbox-item span, .radio-item span {
  font-size: 0.93rem;
  line-height: 1.4;
}

.file-drop {
  border: 2px dashed var(--brand);
  background: var(--brand-pale);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.file-drop:hover, .file-drop.dragover {
  background: #dceee7;
  border-color: var(--brand-dark);
}
.file-drop svg {
  width: 36px;
  height: 36px;
  fill: var(--brand);
  margin: 0 auto 6px;
}
.file-drop strong { display: block; color: var(--brand-dark); margin-bottom: 2px; }
.file-drop small { color: var(--muted); font-size: 0.82rem; }
.file-drop input[type="file"] { display: none; }
.file-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.file-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-tint);
  border: 1px solid var(--line);
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb button {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1;
}

.form-consent {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.5;
}

/* Form steps (multi-step) */
.form-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 36px;
}
.form-step-pip {
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
}
.form-step-pip.active { background: var(--brand); }
.form-step { display: none; }
.form-step.active { display: block; }

.form-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.form-nav .btn { flex: 1; }

/* =========================================================
   Sections / Layout helpers
   ========================================================= */
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section-lg { padding: 100px 0; }
.section-soft { background: var(--bg-soft); }
.section-brand { background: var(--brand); color: #fff; }
.section-brand h1, .section-brand h2, .section-brand h3 { color: #fff; }
.section-brand p { color: #d2e3dd; }

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.section-head .eyebrow {
  display: inline-block;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 1.08rem; color: var(--ink-soft); }

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

/* =========================================================
   Service cards
   ========================================================= */
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: all 0.2s ease;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--ink);
}
.service-card .icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--brand-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.service-card .icon-wrap svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-card h3 {
  font-size: 1.18rem;
  margin-bottom: 10px;
  color: var(--brand-dark);
}
.service-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 16px;
  flex-grow: 1;
}
.service-card .learn-more {
  color: var(--brand);
  font-weight: 700;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =========================================================
   Why choose us / feature blocks
   ========================================================= */
.feature {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.feature .feature-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature .feature-icon svg { width: 26px; height: 26px; fill: var(--brand); }
.feature h4 {
  margin: 4px 0 6px;
  font-size: 1.08rem;
  color: var(--brand-dark);
}
.feature p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

/* =========================================================
   Stats
   ========================================================= */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.stat {
  text-align: center;
  padding: 24px 12px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat .stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent);
  display: block;
  line-height: 1.1;
}
.stat .stat-label {
  font-size: 0.92rem;
  color: #d2e3dd;
  margin-top: 4px;
}

/* =========================================================
   Testimonials
   ========================================================= */
.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.testimonial .stars {
  color: var(--accent);
  font-size: 1.1rem;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.testimonial blockquote {
  margin: 0 0 18px;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
}
.testimonial blockquote::before { content: "“"; color: var(--brand); font-size: 1.4rem; font-weight: 700; margin-right: 2px; }
.testimonial blockquote::after { content: "”"; color: var(--brand); font-size: 1.4rem; font-weight: 700; }
.testimonial .author {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}
.testimonial .author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.testimonial .author strong { color: var(--brand-dark); display: block; }
.testimonial .author span { color: var(--muted); font-size: 0.85rem; }

/* =========================================================
   Areas list
   ========================================================= */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 30px;
}
.areas-grid a {
  display: block;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.93rem;
  text-decoration: none;
  transition: all 0.15s;
}
.areas-grid a:hover {
  background: var(--brand-pale);
  border-color: var(--brand);
  color: var(--brand-dark);
  text-decoration: none;
}
.areas-grid a::before {
  content: "📍 ";
  margin-right: 4px;
}

/* =========================================================
   Blog cards
   ========================================================= */
.blog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  height: 100%;
}
.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  text-decoration: none;
}
.blog-card .blog-img {
  aspect-ratio: 16 / 9;
  background: var(--brand);
  background-image:
    linear-gradient(135deg, rgba(7,88,70,0.85), rgba(4,64,51,0.95)),
    radial-gradient(circle at 30% 30%, rgba(244,163,0,0.3), transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.blog-card .blog-img svg {
  width: 64px;
  height: 64px;
  fill: rgba(255, 255, 255, 0.85);
  opacity: 0.9;
}
.blog-card .blog-body {
  padding: 22px 24px 26px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.blog-card .blog-meta {
  display: flex;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.blog-card .blog-meta .cat {
  background: var(--brand-pale);
  color: var(--brand-dark);
  padding: 2px 10px;
  border-radius: 50px;
  font-weight: 600;
}
.blog-card h3 {
  font-size: 1.12rem;
  margin-bottom: 10px;
  line-height: 1.3;
  color: var(--brand-dark);
}
.blog-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  flex-grow: 1;
  margin-bottom: 14px;
}
.blog-card .read-more {
  color: var(--brand);
  font-weight: 700;
  font-size: 0.9rem;
}

/* =========================================================
   Article body (single blog post)
   ========================================================= */
.article-hero {
  background: var(--bg-soft);
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--line);
}
.article-hero .breadcrumb {
  margin-bottom: 18px;
}
.article-hero h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  margin-bottom: 16px;
  max-width: 22ch;
}
.article-hero .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--muted);
  font-size: 0.92rem;
}
.article-meta .cat {
  background: var(--brand);
  color: #fff;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
}

.article-body {
  padding: 50px 0 80px;
}
.article-body h2 {
  margin-top: 1.6em;
  font-size: 1.6rem;
}
.article-body h3 { margin-top: 1.4em; font-size: 1.25rem; }
.article-body p, .article-body li { font-size: 1.04rem; line-height: 1.75; color: var(--ink); }
.article-body ul, .article-body ol { padding-left: 1.4em; margin-bottom: 1.2em; }
.article-body li { margin-bottom: 0.4em; }
.article-body blockquote {
  border-left: 4px solid var(--accent);
  background: var(--bg-soft);
  margin: 1.5em 0;
  padding: 16px 20px;
  font-style: italic;
  color: var(--ink-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body .callout {
  background: var(--brand-pale);
  border-left: 4px solid var(--brand);
  padding: 18px 22px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5em 0;
}
.article-body .callout strong { color: var(--brand-dark); }

.toc {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 30px;
}
.toc h4 { margin: 0 0 10px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.toc ol { margin: 0; padding-left: 18px; }
.toc li { font-size: 0.95rem; margin-bottom: 4px; }

/* =========================================================
   Breadcrumbs
   ========================================================= */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band {
  background: var(--brand);
  color: #fff;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.cta-band .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: #d2e3dd; margin: 0; font-size: 1.08rem; }
.cta-band .cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================================
   Page hero (interior pages)
   ========================================================= */
.page-hero {
  background:
    linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  padding: 80px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse at right, rgba(244,163,0,0.12), transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; max-width: 22ch; }
.page-hero p.lead { color: #d2e3dd; font-size: 1.15rem; max-width: 56ch; margin: 18px 0 0; }
.page-hero .breadcrumb { color: #b8cfc7; margin-bottom: 16px; }
.page-hero .breadcrumb a { color: #d8ece5; }

/* =========================================================
   Two-column content layout (service detail pages)
   ========================================================= */
.content-two-col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}
.sidebar-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 100px;
}
.sidebar-form h3 {
  color: var(--brand-dark);
  margin: 0 0 14px;
  font-size: 1.15rem;
}
.sidebar-form .form-strip {
  background: var(--accent);
  color: #0f202e;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px;
  margin: -24px -24px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sidebar-card {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-top: 24px;
  text-align: center;
}
.sidebar-card h4 { color: #fff; margin-bottom: 6px; }
.sidebar-card p { color: #c8d8d3; font-size: 0.92rem; margin-bottom: 14px; }
.sidebar-card .phone-big {
  display: block;
  color: var(--accent);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-bottom: 8px;
}
.sidebar-card .phone-big:hover { color: var(--accent); }

/* Checklist */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.checklist li {
  padding: 8px 0 8px 32px;
  position: relative;
  color: var(--ink);
  font-size: 0.97rem;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  width: 22px;
  height: 22px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand-dark);
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-pale);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 600;
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: "−";
  background: var(--brand);
  color: #fff;
}
.faq-item .faq-answer {
  padding: 0 30px 22px 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: #0a1e18;
  color: #b8cfc7;
  padding: 70px 0 30px;
  font-size: 0.93rem;
}
.site-footer a { color: #d8ece5; }
.site-footer a:hover { color: var(--accent); text-decoration: none; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 50px;
}
.site-footer h5 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 9px; }
.footer-about p { color: #95aba4; margin-bottom: 18px; line-height: 1.65; font-size: 0.92rem; }
.footer-logo { margin-bottom: 18px; }
.footer-logo img { height: 76px; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-contact div { margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; fill: var(--accent); flex-shrink: 0; margin-top: 3px; }
.footer-bottom {
  border-top: 1px solid #1d3a31;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: #7d958d;
  font-size: 0.85rem;
}
.footer-bottom a { color: #95aba4; }

/* =========================================================
   Floating quick-quote button (mobile)
   ========================================================= */
.floating-cta {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 40;
  gap: 10px;
}
.floating-cta .btn { flex: 1; box-shadow: var(--shadow-lg); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; gap: 36px; }
  .hero-form { max-width: 500px; }
  .content-two-col { grid-template-columns: 1fr; }
  .sidebar-form { position: static; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section-lg { padding: 70px 0; }
  .hero { padding: 50px 0 40px; }
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .header-phone span:not(.phone-icon) { display: none; }

  /* Mobile: drop the overhang. Utility bar back to natural (auto) height
     so its content can wrap. Logo sits inline in the header normally. */
  :root {
    --util-h: auto;
    --header-h: 50px;
    --logo-img-h: 50px;
  }
  .utility-bar {
    height: auto;
    padding: 6px 0;
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .utility-bar .container {
    justify-content: center;
    flex-wrap: wrap;
  }
  .utility-right {
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .logo {
    margin: 0;
    padding: 0;
    background: transparent;
  }
  .logo img {
    height: var(--logo-img-h);
    /* On mobile the green box is gone, so show the SVG in its native green. */
    filter: none;
    opacity: 1;
  }
  .site-header .container { min-height: var(--header-h); }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band .container { grid-template-columns: 1fr; text-align: center; }
  .cta-band .cta-buttons { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .floating-cta { display: flex; }

  /* Mobile nav drawer */
  .main-nav.open {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 86%;
    max-width: 360px;
    background: #fff;
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    padding: 70px 20px 30px;
    overflow-y: auto;
    z-index: 60;
  }
  .main-nav.open > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav.open a { padding: 14px 12px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .main-nav.open .has-dropdown > a::after { float: right; }
  .main-nav.open .dropdown {
    position: static;
    box-shadow: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 0 16px;
    background: var(--bg-soft);
    margin: 0;
    display: none;
  }
  .main-nav.open .has-dropdown.expanded .dropdown { display: block; }
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 55;
  }
  .nav-backdrop.show { display: block; }
  .main-nav.open .nav-close {
    display: block;
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: 0;
    font-size: 1.8rem;
    color: var(--ink);
    cursor: pointer;
  }
  .main-nav.open .dropdown {
    transform: none;
    left: 0;
  }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  :root {
    --header-h: 46px;
    --logo-img-h: 42px;
  }
  .hero-form { padding: 22px 18px; }
  .hero-form .form-strip { margin: -22px -18px 18px; }
  .utility-bar .container { justify-content: center; }
  .utility-right { gap: 8px; font-size: 0.72rem; }
  .site-header .container { gap: 10px; }
}

/* Accessibility */
.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;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Print */
@media print {
  .utility-bar, .site-header, .site-footer, .hero-form, .sidebar-form, .floating-cta, .cta-band { display: none; }
  body { color: #0f202e; }
}