/* =====================================================================
   SITE CHROME
   Header, full-screen menu, box buttons and footer, shared by every
   page. Loaded before the page stylesheet. Colours the header needs are
   set on .site-header itself so it renders the same under either one.
   ===================================================================== */
:root{
  --header-h: 168px;
  --logo-pad: 26px;
  --edge: clamp(20px, 6.5vw, 96px);
}
html { scroll-padding-top: var(--header-h); }
.site-header {
  --green: #007F09;
  --green-light: #00CC0E;
  --text: #3A3A3A;
  --ink: #222222;
  --ink-rgb: 34, 34, 34;
  --white: #FFFFFF;
  --on-ink: #FFFFFF;
  --on-ink-soft: rgba(255, 255, 255, .74);
  font-family: Inter, "Inter Fallback", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; font-weight: 400;
}
.site-header ul { margin: 0; padding: 0; list-style: none; }
.site-header p, .site-header address { margin: 0; padding: 0; font-style: normal; }
.site-header a, .site-header a:hover { color: inherit; text-decoration: none; }
.site-header img, .site-header picture { display: block; max-width: 100%; height: auto; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Pages without a dark hero start with the solid bar and sit below it. */
main.pad-header { padding-top: var(--header-h); }


/* =========================================================
   HEADER
   Transparent over the hero, solid once the page scrolls.
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--on-ink);
}
.header-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding-inline: var(--edge);
  transition: background-color .3s ease, color .3s ease, height .5s cubic-bezier(.4, 0, .2, 1);
}
/* Scrim under the transparent bar so header text holds contrast
   over bright sky. Removed once the bar turns solid. */
.header-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .27) 0%, rgba(0, 0, 0, 0) 100%);
  transition: opacity .3s ease;
}
.site-header.is-scrolled .header-bar::before { opacity: 0; }

.site-header.is-scrolled .header-bar {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
}
/* Solid while the menu is open, so its links scroll under the bar
   instead of behind the logo and the close button. */
.site-header[data-open="true"] .header-bar {
  background: var(--ink);
  color: var(--on-ink);
}

/* Logo is sized by height so it always clears the bar by --logo-pad. */
.brand { justify-self: start; display: flex; align-items: center; padding-block: var(--logo-pad); transition: padding .5s cubic-bezier(.4, 0, .2, 1); }
.brand img {
  width: auto;
  height: calc(var(--header-h) - 2 * var(--logo-pad));
  filter: brightness(0) invert(1);
  transition: filter .3s ease, height .5s cubic-bezier(.4, 0, .2, 1);
}
.site-header.is-scrolled .brand img { filter: none; }
.site-header[data-open="true"] .brand img { filter: brightness(0) invert(1); }

/* Partway down the hero the bar and logo ease down to a shorter size. */
.site-header.is-compact { --header-h: 128px; --logo-pad: 20px; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.header-nav { display: none; }
.header-nav > ul { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); }
.header-nav a {
  display: inline-block;
  padding-block: 8px;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
  transition: background-size .25s ease;
}
.header-nav a:hover { background-size: 100% 2px; }
/* Current page: the top-level item keeps the hover underline. */
.header-nav > ul > li > a[aria-current="page"],
.header-nav .is-current > .nav-top { background-size: 100% 2px; }
.nav-tel-btn { font-weight: 600; letter-spacing: .04em; }

/* ---------- Dropdowns ----------
   The top-level trigger is a button, not a link: it opens a submenu rather
   than going anywhere, so pointer and keyboard users get the same control. */
.header-nav .has-sub { position: relative; }
.nav-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
/* A parent item that is itself a link keeps the label-and-caret layout. */
.header-nav a.nav-top { display: inline-flex; }
.nav-top > svg { width: 10px; height: 6px; transition: transform .25s ease; }
.has-sub:hover .nav-caret,
.nav-top[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 3;
  display: block;
  min-width: 240px;
  margin: 0;
  padding: 8px 0;
  transform: translateY(8px);
  background: var(--white);
  color: var(--text);
  border-radius: 3px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
/* Bridges the gap between trigger and panel so the pointer can cross it
   without the submenu closing underneath it. The trigger is stacked above
   the bridge so the bridge never takes a click meant for the trigger. */
.nav-sub::before { content: ""; position: absolute; inset: -10px 0 100% 0; }
.has-sub > .nav-top { position: relative; z-index: 4; }
.has-sub:hover .nav-sub,
.has-sub:focus-within .nav-sub,
.nav-top[aria-expanded="true"] + .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}
.nav-sub li { display: block; }
.header-nav .nav-sub a {
  display: block;
  padding: 10px 20px;
  background: none;
  border-left: 3px solid transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.header-nav .nav-sub a:hover,
.header-nav .nav-sub a:focus-visible {
  background-color: var(--mint);
  border-left-color: var(--green);
  color: var(--green);
}
/* Current page inside a submenu. */
.header-nav .nav-sub li:not(.nav-sub-cta) > a[aria-current="page"] { border-left-color: var(--green); color: var(--green); }
/* Closing row of the submenu: a button rather than another list item, so it
   reads as the way out to the full list instead of one more service. */
/* Longer lists run in two columns, with the closing link across both. */
.nav-sub-wide { columns: 2; column-gap: 0; min-width: 400px; }
.nav-sub-wide li { break-inside: avoid; }
.nav-sub-wide .nav-sub-cta { column-span: all; }
.nav-sub-cta { margin: 8px 16px 4px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .1); }
.header-nav .nav-sub-cta a {
  padding: 9px 14px;
  border: 2px solid var(--green);
  border-radius: 3px;
  background-color: var(--green);
  color: var(--white);
  text-align: center;
  letter-spacing: .1em;
  transition: background-color .18s ease, color .18s ease;
}
.header-nav .nav-sub-cta a:hover,
.header-nav .nav-sub-cta a:focus-visible {
  background-color: var(--white);
  border-left-color: var(--green);
  color: var(--green);
}

/* Wide screens: inline links replace the menu button */
@media (min-width: 1320px){
  .header-nav { display: block; }
  .site-header .menu-btn, .site-header .menu-panel { display: none; }
}
/* Six menu items plus the phone button only fit a mid-size desktop at a
   slightly tighter setting. */
@media (min-width: 1320px) and (max-width: 1599px){
  .header-actions { gap: 18px; }
  .header-nav > ul { gap: 18px; }
  .header-nav a, .nav-top { font-size: 15px; letter-spacing: .07em; }
}


/* =========================================================
   BUTTONS
   Hover fill: a solid layer in --fill sweeps in from the left.
   ========================================================= */
.btn-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  border: 2px solid currentColor;
  border-radius: 3px;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  --fill: var(--on-ink);
  background-image: linear-gradient(var(--fill), var(--fill));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .45s cubic-bezier(.2, .7, .2, 1), color .3s ease, border-color .3s ease;
}
/* Text colour switches at once on hover so it never sits white-on-white under the sweeping fill. */
.btn-box:hover { background-size: 100% 100%; color: var(--green); border-color: var(--on-ink); transition-property: background-size, border-color; }
.site-header.is-scrolled .btn-box { --fill: var(--green); color: var(--green); }
.site-header.is-scrolled .btn-box:hover { color: var(--white); border-color: var(--green); transition-property: background-size, color, border-color; }
.site-header[data-open="true"] .btn-box { --fill: var(--on-ink); color: var(--on-ink); }
.site-header[data-open="true"] .btn-box:hover { color: var(--green); border-color: var(--on-ink); }

.site-header .btn-box { min-height: 52px; padding: 12px 20px; font-size: 17px; }
/* Outranks `.site-header a:hover`, which would keep the text white over the white fill. */
.site-header .btn-box:hover { color: var(--green); }

.btn-box-light { min-height: 56px; padding-inline: 34px; }


/* ---------- Menu button ---------- */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 17px;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-icon, .menu-icon::before, .menu-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, background-color .25s ease;
}
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -7px; }
.menu-icon::after { top: 7px; }
.site-header[data-open="true"] .menu-icon { background: transparent; }
.site-header[data-open="true"] .menu-icon::before { transform: translateY(7px) rotate(45deg); }
.site-header[data-open="true"] .menu-icon::after { transform: translateY(-7px) rotate(-45deg); }


/* ---------- Full-screen menu ---------- */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  padding: var(--header-h) 0 0;
  background: var(--ink);
  color: var(--on-ink);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.site-header[data-open="true"] .menu-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}
body:has(.site-header[data-open="true"]) { overflow: hidden; }
@media (min-width: 1320px){
  body:has(.site-header[data-open="true"]) { overflow: visible; }
}

.menu-nav { display: flex; align-items: center; padding: clamp(32px, 6vh, 72px) var(--edge); }
.menu-links li { overflow: hidden; }
.menu-links > li { margin-bottom: 6px; }
.menu-links > li:not(.menu-group) > a { display: flex; align-items: center; min-height: 44px; }
/* Groups own the mask on their own title so the nested list isn't clipped. */
.menu-links > .menu-group { overflow: visible; }
.menu-links > li > a,
.menu-group-title {
  display: block;
  padding-block: 2px;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--on-ink);
}
.menu-group-title { margin: 0; overflow: hidden; }
.menu-links > li > a { transform: translateY(100%); transition: color .2s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.menu-group-title a { white-space: nowrap; }
.menu-group-title > span { display: flex; align-items: center; gap: 10px; transform: translateY(100%); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* Submenus are collapsed until their toggle opens them. Without
   JavaScript the toggles are hidden and every submenu stays open. */
.menu-sub-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 3px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.js .menu-sub-toggle { display: inline-flex; }
.site-header .menu-sub-toggle:focus-visible { outline-offset: -4px; }
.menu-sub-toggle svg { width: 16px; height: 10px; transition: transform .25s ease; }
.menu-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-header .menu-sub { margin: 0; padding: 4px 0 14px 2px; }
.js .menu-group:not(.is-open) > .menu-sub { display: none; }
.menu-sub a {
  display: inline-block;
  padding-block: 8px;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  transform: translateY(100%);
  transition: color .2s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.menu-sub-cta { margin-top: 10px; }
.menu-sub-cta a {
  padding: 8px 18px;
  border: 2px solid var(--green-light);
  border-radius: 3px;
  color: var(--green-light);
  transition: color .2s ease, transform .5s cubic-bezier(.2, .7, .2, 1), background-color .2s ease;
}
.menu-sub-cta a:hover { background-color: var(--green-light); color: var(--ink); }
.site-header[data-open="true"] .menu-links > li > a,
.site-header[data-open="true"] .menu-sub a,
.site-header[data-open="true"] .menu-group-title > span { transform: none; }
.menu-links > li:nth-child(2) :is(a, .menu-group-title > span) { transition-delay: 0s, .05s; }
.menu-links > li:nth-child(3) > a { transition-delay: 0s, .10s; }
.menu-links > li:nth-child(4) > a { transition-delay: 0s, .14s; }
.menu-links > li:nth-child(5) > a { transition-delay: 0s, .18s; }
.menu-links > li:nth-child(6) > a { transition-delay: 0s, .22s; }
.menu-links a:hover { color: var(--green-light); }
/* Current page, and the group it belongs to. */
.menu-links a[aria-current="page"],
.menu-links .is-current > .menu-group-title a { color: var(--green-light); }

.menu-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px clamp(24px, 4vw, 56px);
  border-left: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
}
.menu-tag { font-size: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green-light); }
.menu-info address { font-size: 16px; line-height: 1.7; color: var(--on-ink-soft); }
.menu-social { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding-block: 8px; }
.menu-social:hover { text-decoration: underline; text-underline-offset: .2em; }


/* =========================================================
   COMPACT HEADER (1319px and below)
   ========================================================= */
@media (max-width: 1319px){
  :root { --header-h: 124px; --logo-pad: 18px; }
  .site-header.is-compact { --header-h: 98px; --logo-pad: 14px; }
  .menu-panel { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .menu-nav { padding-block: 32px 16px; }
  .menu-info {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-inline: var(--edge);
    padding-inline: 0;
    align-items: flex-start;
    text-align: left;
  }
}
@media (max-width: 767px){
  .header-actions { gap: 16px; }
  /* On phones the number lives in the menu, not the bar. */
  .nav-tel-btn { display: none; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce){
  .site-header *, .site-header *::before, .site-header *::after { transition: none !important; }
  .menu-links a { transform: none; }
}


/* ==========================================================================
   Dialogs
   A fixed-width card that runs edge to edge once the screen is narrower
   than it. Used by the quote widget on every page.
   ========================================================================== */
.modal {
  width: 640px; max-width: 100vw; padding: 13px 10px; border: 0; border-radius: 10px;
  background-color: #FFFFFF; box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
}
.modal::backdrop { background-color: rgba(0, 0, 0, 0.8); }
.modal iframe { display: block; width: 100%; height: 600px; border: 0; }
.modal-close {
  position: absolute; top: 12px; right: 22px; z-index: 2;
  width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  color: #007F09; font: 400 22px/30px Arial, sans-serif;
}


/* ==========================================================================
   Site footer
   Self-contained: its colours are set here so the same block works in both
   stylesheets.
   ========================================================================== */
.site-footer {
  --ft-edge: clamp(20px, 6.5vw, 96px);
  --ft-line: rgba(255, 255, 255, .16);
  --ft-soft: rgba(255, 255, 255, .72);
  padding: clamp(56px, 7vw, 88px) var(--ft-edge) 0;
  background: #222222; color: #FFFFFF;
  font-size: 15px; line-height: 1.6; text-align: left;
}
.site-footer p, .site-footer ul, .site-footer h2 { margin: 0; padding: 0; }
.site-footer ul { list-style: none; }
.site-footer a { color: inherit; text-decoration: none; }
.footer-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px clamp(28px, 3.5vw, 56px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.footer-logo { display: block; width: 68px; height: auto; filter: brightness(0) invert(1); }
.site-footer .footer-head {
  margin-bottom: 18px;
  font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-light);
}
.footer-col p + p { margin-top: 10px; }
.footer-col p a { overflow-wrap: anywhere; }
.footer-note { font-size: 14px; color: var(--ft-soft); }
.footer-areas { margin-top: -5px; }
.footer-areas li + li { margin-top: 2px; }
.footer-areas a { display: inline-block; padding-block: 5px; }
.footer-areas .footer-areas-all { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.footer-links { margin-top: -5px; }
.footer-links li + li { margin-top: 2px; }
.footer-links a { display: inline-block; padding-block: 5px; }
.footer-col a:hover, .footer-base p a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.footer-base {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px 24px;
  padding-block: 24px 32px; border-top: 1px solid var(--ft-line);
  font-size: 14px; color: var(--ft-soft);
}
/* License line and copyright sit centred above the social links; the credit stays on the right. */
.footer-base-brand { grid-column: 1; grid-row: 1 / span 3; align-self: center; justify-self: start; display: flex; align-items: center; gap: 16px; }
.footer-base-brand a { flex: none; }
/* Line breaks are set in the markup; they are dropped once the row stacks. */
.footer-tagline { font-size: 13px; line-height: 1.5; white-space: nowrap; color: var(--ft-soft); }
.footer-copy { grid-column: 2; grid-row: 2; text-align: center; }
.footer-social { grid-column: 2; grid-row: 3; justify-self: center; display: flex; gap: 12px; }
.footer-license { grid-column: 2; grid-row: 1; text-align: center; font-size: 12px; letter-spacing: .02em; }
/* Sits close above the copyright line: cancels most of the 16px row gap. */
.footer-base > .footer-license { margin: 0 0 -12px; }
.footer-credit { grid-column: 3; grid-row: 1 / span 3; align-self: center; justify-self: end; display: inline-flex; }
.footer-credit a { display: inline-flex; opacity: .75; transition: opacity .2s ease; }
.footer-credit a:hover { opacity: 1; }
.footer-credit img { display: block; height: 22px; width: auto; }
.footer-base p a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.footer-social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--ft-line); border-radius: 50%; color: #FFFFFF;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: #FFFFFF; border-color: #FFFFFF; color: #222222; }
.footer-social svg { display: block; width: 18px; height: 18px; fill: currentColor; }
/* The bottom row stacks below 1200px; three columns crowd the logo and tagline. */
@media (max-width: 1199px) {
  .footer-base { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .footer-base-brand { grid-column: 1; grid-row: 1; justify-self: center; flex-direction: column; gap: 12px; }
  .footer-tagline { white-space: normal; max-width: 34ch; }
  .footer-tagline br { display: none; }
  .footer-license { grid-column: 1; grid-row: 2; max-width: 60ch; }
  .footer-copy { grid-column: 1; grid-row: 3; }
  .footer-social { grid-column: 1; grid-row: 4; }
  .footer-credit { grid-column: 1; grid-row: 5; justify-self: center; }
}
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .footer-grid { gap: 36px 24px; }
  /* Keeps the email address on one line in a half-width column. */
  .footer-col p a[href^="mailto:"] { font-size: clamp(12px, 3.6vw, 15px); white-space: nowrap; }
}