@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-c9407645.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --brand-charcoal: #2f323a;
  --brand-charcoal-soft: #4f545d;
  --brand-charcoal-muted: #6d737c;
  --brand-green: #46822a;
  --brand-green-dark: #35691f;
  --brand-silver: #acb2b9;
  --brand-silver-light: #e1e4e7;
  --brand-surface: #f3f4f5;
  --brand-white: #ffffff;

  --charcoal: var(--brand-charcoal);
  --charcoal-soft: var(--brand-charcoal-soft);
  --charcoal-muted: var(--brand-charcoal-muted);
  --logo-brown: var(--brand-charcoal);
  --logo-green: var(--brand-green);
  --warm-bg: var(--brand-surface);
  --warm-border: var(--brand-silver-light);
  --warm-border-dark: var(--brand-silver);
  --field-border: var(--brand-silver);
  --field-border-focus: var(--brand-green);
  accent-color: var(--brand-green);
}

html {
  background: var(--brand-white);
  scroll-padding-top: 6rem;
}

body {
  background-color: var(--brand-white);
  color: var(--brand-charcoal-soft);
  letter-spacing: 0;
}

body:has(.main-content) {
  background-color: var(--brand-surface) !important;
}

h1,
h2,
h3,
h4,
p {
  letter-spacing: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--brand-charcoal);
}

::selection {
  background: rgba(70, 130, 42, 0.22);
  color: var(--brand-charcoal);
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(70, 130, 42, 0.42);
  outline-offset: 3px;
}

/* Preserve the existing Tailwind class names while applying the official palette. */
.bg-\[\#55771F\],
.bg-accent-green,
.btn-primary,
.status-button-primary {
  background-color: var(--brand-green) !important;
}

.bg-\[\#55771F\]:hover,
.bg-accent-green:hover,
.btn-primary:hover,
.status-button-primary:hover {
  background-color: var(--brand-green-dark) !important;
  opacity: 1 !important;
}

.text-\[\#2F312B\],
.text-stone-800 {
  color: var(--brand-charcoal) !important;
}

.text-\[\#4A4C45\],
.text-stone-600 {
  color: var(--brand-charcoal-soft) !important;
}

.text-\[\#5A5C55\],
.text-\[\#6B6D65\] {
  color: var(--brand-charcoal-muted) !important;
}

.text-\[\#835328\] {
  color: var(--brand-green) !important;
}

.border-\[\#E8E4DB\] {
  border-color: var(--brand-silver-light) !important;
}

.bg-\[\#F4F1EA\] {
  background-color: var(--brand-surface) !important;
}

.accent-green,
.inline-link,
.service-back,
.service-kicker,
.card-kicker {
  color: var(--brand-green) !important;
}

/* Shared navigation */
nav.fixed.top-0 {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--brand-silver-light) !important;
  box-shadow: 0 1px 0 rgba(47, 50, 58, 0.04);
}

nav.fixed.top-0::after {
  background: var(--brand-green);
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  opacity: 0.88;
  position: absolute;
  width: 4.75rem;
}

nav.fixed.top-0 > div:first-child {
  height: 5.5rem;
}

nav.fixed.top-0 img[alt*="GroDrones"] {
  height: auto !important;
  max-height: 2.45rem;
  max-width: min(12.75rem, 42vw);
  object-fit: contain;
  width: auto !important;
}

.site-nav-links a:not([class*="bg-"]) {
  color: var(--brand-charcoal-soft);
  position: relative;
}

.site-nav-links a:not([class*="bg-"])::after {
  background: var(--brand-green);
  bottom: -0.45rem;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
  width: 100%;
}

.site-nav-links a:not([class*="bg-"]):hover,
.site-nav-links a:not([class*="bg-"]):focus-visible {
  color: var(--brand-charcoal) !important;
}

.site-nav-links a:not([class*="bg-"]):hover::after,
.site-nav-links a:not([class*="bg-"]):focus-visible::after {
  transform: scaleX(1);
}

#mobileMenu {
  background: rgba(255, 255, 255, 0.99) !important;
  border-color: var(--brand-silver-light) !important;
}

#mobileMenu a:not([class*="bg-"]) {
  border-bottom: 1px solid var(--brand-silver-light);
  color: var(--brand-charcoal-soft);
}

/* Page surfaces */
.service-hero,
.resources-hero,
.category-hero,
.article-hero {
  background: var(--brand-surface) !important;
  border-color: var(--brand-silver-light) !important;
}

.service-hero {
  border-top: 0;
}

.section-wrap-muted {
  background: var(--brand-surface);
  border-color: var(--brand-silver-light);
}

.service-card,
.detail-panel,
.contact-form-card,
.contact-action-card,
.resource-card,
.status-button-secondary {
  background: var(--brand-white);
  border-color: var(--brand-silver-light);
  box-shadow: 0 1px 2px rgba(47, 50, 58, 0.04);
}

.service-card:hover,
.contact-action-card:hover,
.resource-card:hover {
  border-color: rgba(70, 130, 42, 0.5);
  box-shadow: 0 14px 32px rgba(47, 50, 58, 0.09);
}

.service-card-icon,
.detail-icon,
.contact-action-icon {
  background: rgba(70, 130, 42, 0.09);
  border-color: rgba(70, 130, 42, 0.22);
  color: var(--brand-green);
}

.town-list span {
  background: rgba(70, 130, 42, 0.08);
  border-color: rgba(70, 130, 42, 0.22);
  color: var(--brand-charcoal);
}

.contact-field,
.water-demo-field,
input,
select,
textarea {
  border-color: var(--brand-silver);
}

.contact-field:focus,
.water-demo-field:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(70, 130, 42, 0.16);
}

.resources-cta,
.credential-panel,
.status-card-dark {
  background: var(--brand-charcoal) !important;
}

.resources-cta h2,
.resources-cta h3,
.credential-panel h2,
.credential-panel h3 {
  color: var(--brand-white);
}

.credential-panel > p,
.credential-panel > div > p,
.credential-panel li {
  color: rgba(255, 255, 255, 0.78) !important;
}

.hero-heading,
.hero-subhead,
.hero-credential {
  letter-spacing: 0;
}

.hero-text-backing {
  background: linear-gradient(to right, rgba(24, 27, 31, 0.58) 0%, rgba(24, 27, 31, 0.22) 58%, rgba(24, 27, 31, 0.05) 100%);
}

.hero-btn-secondary {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Footer uses the silver logo on the official charcoal field. */
.site-footer {
  background: var(--brand-charcoal) !important;
  border-top: 3px solid var(--brand-green) !important;
  color: var(--brand-silver);
  padding-bottom: 3rem;
  padding-top: 3rem;
}

.site-footer-inner {
  align-items: center;
}

.footer-logo {
  filter: none !important;
  height: 2.35rem !important;
  max-width: 13rem;
  opacity: 1 !important;
  width: auto !important;
}

.footer-social a,
.footer-nav,
.footer-meta {
  color: var(--brand-silver) !important;
  opacity: 1 !important;
}

.footer-social a:hover,
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--brand-white) !important;
}

.footer-social a {
  align-items: center;
  border: 1px solid rgba(172, 178, 185, 0.28);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
  width: 2.5rem;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--brand-green);
}

.footer-nav a {
  color: inherit;
}

.footer-meta {
  font-weight: 500;
}

/* Utility pages */
.status-page {
  background: var(--brand-surface);
  color: var(--brand-charcoal-soft);
}

.status-header {
  background: var(--brand-white);
  border-color: var(--brand-silver-light);
}

.status-logo {
  height: 2.35rem;
  width: auto;
}

.status-card {
  background: var(--brand-white);
  border: 1px solid var(--brand-silver-light);
  box-shadow: 0 18px 44px rgba(47, 50, 58, 0.08);
  max-width: 36rem;
  padding: 3rem;
}

/* Keep Spray Conditions statuses distinct while aligning its chrome. */
.main-content,
.results-panel,
.forecast-panel,
.metric-detail-card {
  border-color: var(--brand-silver-light);
}

.controls-bar,
.results-panel,
.forecast-panel {
  background-color: var(--brand-white);
}

.tab-button.active,
.tab-button[aria-selected="true"] {
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color: var(--brand-white) !important;
}

@media (max-width: 767px) {
  nav.fixed.top-0 > div:first-child {
    height: 5rem;
  }

  nav.fixed.top-0 img[alt*="GroDrones"] {
    max-height: 2rem;
    max-width: min(11.5rem, 58vw);
  }

  .hero-text-backing {
    background: linear-gradient(to bottom, rgba(24, 27, 31, 0.46), rgba(24, 27, 31, 0.2));
  }

  .status-card {
    padding: 2rem 1.35rem;
  }

  .footer-brand {
    gap: 1rem;
  }

  .footer-logo {
    height: 2.05rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}