/* =====================================================================
   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);
}
.site-header[data-open="true"] .header-bar {
  background: transparent;
  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; }
.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);
}
/* 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;
}
.btn-box:hover { background-size: 100% 100%; color: var(--green); border-color: var(--on-ink); }
.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); }
.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; }

.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; }
/* Groups own the mask on their own title so the nested list isn't clipped. */
.menu-group { overflow: visible; margin-bottom: 18px; }
.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-soft);
}
.menu-group-title { margin: 0 0 6px; overflow: hidden; color: var(--on-ink); }
.menu-links > li > a { transform: translateY(100%); transition: color .2s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.menu-group-title > span { display: block; transform: translateY(100%); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.menu-sub { margin: 0; padding-left: 2px; }
.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); }

.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; }
}


/* ==========================================================================
   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);
}
/* Copyright sits centred above the social links; the credit stays on the right. */
.footer-base-brand { grid-column: 1; grid-row: 1 / span 2; 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: 1; text-align: center; }
.footer-social { grid-column: 2; grid-row: 2; justify-self: center; display: flex; gap: 12px; }
.footer-credit { grid-column: 3; grid-row: 1 / span 2; 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; }
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .footer-grid { gap: 36px 24px; }
  .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-copy { grid-column: 1; grid-row: 2; }
  .footer-social { grid-column: 1; grid-row: 3; }
  .footer-credit { grid-column: 1; grid-row: 4; justify-self: center; }
}