/* ===================================================================
   Concept-2-combined — BROWN FRAME theme
   Light editorial palette inside a deep-brown page frame.
   Ported verbatim from the prototype's inline <style> block; the two
   React-specific selectors (#root wrappers) are mapped to .aws-frame /
   .aws-wrap, and the nav logo swap is handled directly in the markup.
   =================================================================== */

/* Light-only brand palette — reinforce the color-scheme meta tag in CSS so
   browsers don't apply automatic dark-mode color overrides. */
:root { color-scheme: only light; }

/* Page frame — visible on the sides above 1440px */
body { margin: 0; background: #4a3320; }
.aws-frame { min-height: 100vh; background: #4a3320; }
.aws-wrap  { max-width: 1440px; margin: 0 auto; }

/* Concept-2 light theme — matches Concept-2 */
.hf {
  --hf-ink: #0d0d0d;
  --hf-ink-2: #2a2a2a;
  --hf-paper: #f5f1e8;
  --hf-paper-2: #ece6d6;
  --hf-paper-3: #e6dfcc;
  --hf-gold: #c9a24a;
  --hf-gold-2: #d8b25a;
  --hf-muted: #7a7468;
  --hf-line: #1f1d1a;
  --hf-rule: #d7cfbd;
  background: var(--hf-paper); color: var(--hf-ink);
}
.hf .hf-form { background: #ece6d6; }
.hf .hf-form input,
.hf .hf-form textarea,
.hf .hf-form select { background: #f5f1e8; color: #0d0d0d; }
.hf .hf-form input::placeholder,
.hf .hf-form textarea::placeholder { color: #7a7468; }
.hf-nav img { height: 90px !important; width: auto !important; }

/* Hero hierarchy & balance — Concept-2-combined only */
.hf .hf-a-h1 .hf-gold { font-size: 26px !important; letter-spacing: -.005em; }
.hf .hf-a-hero .hf-a-h1 { margin-bottom: 10px !important; }
.hf .hf-a-lede { line-height: 1.3 !important; }
/* Match About headline to "Five capabilities" hf-h2 weight + size */
.hf .c2a-about-quote { font-size: 52px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -.015em !important; }
.hf .c2a-about-quote .hf-gold { font-weight: 700 !important; }

/* Keep "Turnkey Wastewater Management" on a single line */
.hf #services .hf-h2 { white-space: nowrap !important; }

/* Services: 5 equal tiles straight across */
.hf .c2c-svc--row5 {
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: auto !important;
}
.hf .c2c-svc--row5 > .c2c-tile { padding: 24px; min-height: 0; }
.hf .c2c-svc--row5 .c2c-svc-row { margin-bottom: 0; }
.hf .c2c-svc--row5 .c2c-svc-glyph { font-size: 44px; }
.hf .c2c-svc--row5 .c2c-tile-h { font-size: 22px; margin: 6px 0 8px; }
.hf .c2c-svc--row5 .c2c-tile-p { font-size: 13px; }

/* ===== Brown frame override =====
   Recolors the three black surfaces — outer page frame (visible on sides
   above 1440px), top util bar, and footer — to a deep dark brown. */
.aws-frame { background: #4a3320 !important; }
.hf-util   { background: #4a3320 !important; border-bottom-color: #4a3320 !important; }
.hf-footer { background: #4a3320 !important; border-top-color: #4a3320 !important; }
/* No inner drop-shadow, so the side-frame brown reads the same tone */
.aws-wrap { box-shadow: none !important; }
/* Footer's internal divider hairline reads off the dark base — nudge it warmer */
.hf-footer .hf-footer-top { border-bottom-color: #5e4329 !important; }
/* Halve the footer logo */
.hf-footer img { height: 82px !important; width: auto !important; }

/* ===== Contact-form status messages ===== */
.hf-form-status { margin: 0; font-size: 14px; line-height: 1.5; }
.hf-form-status--ok {
  color: var(--hf-ink); font-weight: 600;
  padding: 28px 4px; text-align: center;
  border-top: 2px solid var(--hf-gold);
}
.hf-form-status--err { color: #8a2b2b; font-weight: 500; }

/* ===== Hamburger toggle ===== */
/* Hidden on desktop; responsive.css reveals it ≤768px. Bars drawn with the
   span + its ::before/::after, animating to an X when .hf-nav.is-open. */
.hf-nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--hf-rule);
  border-radius: 2px; cursor: pointer; position: relative;
}
.hf-nav-toggle-bar,
.hf-nav-toggle-bar::before,
.hf-nav-toggle-bar::after {
  position: absolute; left: 50%; width: 22px; height: 2px;
  background: var(--hf-ink); transform: translateX(-50%);
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.hf-nav-toggle-bar { top: 50%; margin-top: -1px; }
.hf-nav-toggle-bar::before { content: ""; top: -7px; }
.hf-nav-toggle-bar::after  { content: ""; top: 7px; }
.hf-nav.is-open .hf-nav-toggle-bar { background: transparent; }
.hf-nav.is-open .hf-nav-toggle-bar::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.hf-nav.is-open .hf-nav-toggle-bar::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }