@layer reset, base, theme, components, utilities;

@import url("base/tokens-aliases.css") layer(theme);
@import url("base/layout.css") layer(utilities);
@import url("base/utilities.css") layer(utilities);
@import url("base/typography.css") layer(utilities);

@import url("../components/locator-banner/locator-banner.css") layer(components);
@import url("../components/local-banner/local-banner.css") layer(components);
@import url("../components/services-nav/services-nav.css") layer(components);
@import url("../components/outdoor-system/outdoor-system.css") layer(components);
@import url("../components/sprinkler-services-section/sprinkler-services-section.css") layer(components);
@import url("../components/lighting-services-section/lighting-services-section.css") layer(components);
@import url("../components/additional-services-section/additional-services-section.css") layer(components);
@import url("../components/local-header/local-header.css") layer(components);
@import url("../components/local-hero/local-hero.css") layer(components);
@import url("../components/local-expertise/local-expertise.css") layer(components);
@import url("../components/communities-section/communities-section.css") layer(components);
@import url("../components/local-services-section/local-services-section.css") layer(components);
@import url("../components/cta-bars/cta-bars.css") layer(components);
@import url("../components/stats-strip/stats-strip.css") layer(components);
@import url("../components/promo-hero/promo-hero.css") layer(components);
@import url("../components/process-section/process-section.css") layer(components);
@import url("../components/local-feature-grid/local-feature-grid.css") layer(components);
@import url("../components/local-testimonials-section/local-testimonials-section.css") layer(components);
@import url("../components/about-section/about-section.css") layer(components);
@import url("../components/financing-section/financing-section.css") layer(components);
@import url("../components/perks-section/perks-section.css") layer(components);
@import url("../components/announcement-bar/announcement-bar.css") layer(components);
@import url("../components/button/button.css") layer(components);
@import url("../components/link-underline/link-underline.css") layer(components);
@import url("../components/service-card/service-card.css") layer(components);
@import url("../components/stat-card/stat-card.css") layer(components);
@import url("../components/accordion-item/accordion-item.css") layer(components);
@import url("../components/testimonial-card/testimonial-card.css") layer(components);
@import url("../components/nav-dropdown/nav-dropdown.css") layer(components);
@import url("../components/site-header/site-header.css") layer(components);
@import url("../components/hero/hero.css") layer(components);
@import url("../components/split-section/split-section.css") layer(components);
@import url("../components/services-section/services-section.css") layer(components);
@import url("../components/testimonials-section/testimonials-section.css") layer(components);
@import url("../components/faq-section/faq-section.css") layer(components);
@import url("../components/faq-split/faq-split.css") layer(components);
@import url("../components/trust-logos/trust-logos.css") layer(components);
@import url("../components/wave-divider/wave-divider.css") layer(components);
@import url("../components/local-page-sections/local-page-sections.css") layer(components);
@import url("../components/local-cta/local-cta.css") layer(components);
@import url("../components/reviews-intro-section/reviews-intro-section.css") layer(components);
@import url("../components/reviews-grid-section/reviews-grid-section.css") layer(components);
@import url("../components/reviews-cta-section/reviews-cta-section.css") layer(components);
@import url("../components/contact-form/contact-form.css") layer(components);
@import url("../components/contact-form-section/contact-form-section.css") layer(components);
@import url("../components/contact-methods-section/contact-methods-section.css") layer(components);
@import url("../components/contact-customer-bar/contact-customer-bar.css") layer(components);
@import url("../components/contact-info-cards/contact-info-cards.css") layer(components);
@import url("../components/contact-service-area/contact-service-area.css") layer(components);
@import url("../components/site-footer/site-footer.css") layer(components);

/* ── Reset ─────────────────────────────────────────────────────────────── */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    hanging-punctuation: first last;
    text-wrap: pretty;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  p,
  ul,
  figure,
  table {
    margin: 0;
  }

  ul {
    padding: 0;
    list-style: none;
  }

  img,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
  }

  table {
    border-collapse: collapse;
    inline-size: 100%;
  }
}

/* ── Theme tokens ──────────────────────────────────────────────────────── */

@layer theme {
  :root {
    /* Colors */
    --color-sunshine-yellow: #ffdc27;
    --color-forest-green: #03400f;
    --color-pacific-green: #30b454;
    --color-franchise-green: #11733f;
    --color-deep-teal: #033e40;
    --color-off-white: #f8f8f8;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-muted: #5b6b60;
    --color-border: #dbe6df;
    --color-border-subtle: #e3e9e5;
    --color-border-nav: rgb(3 62 64 / 0.3);
    --color-card-on-dark: rgb(113 132 26 / 0.4);
    --color-card-border-on-dark: rgb(255 220 39 / 0.4);
    --color-button-hover: #fff9db;
    --color-row-alt: #fafbfa;

    /* Typography */
    --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    --font-serif-display: "DM Serif Text", "Source Serif 4", Georgia, serif;
    --font-sans: "Roboto", system-ui, sans-serif;
    --font-condensed: "Roboto Condensed", "Roboto", sans-serif;

    --text-display-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    --text-display-leading: 1.09;
    --text-section-serif-size: 2.5rem;
    --text-section-serif-leading: 1.2;
    --text-h2-size: clamp(1.75rem, 1.2rem + 1.5cqi, 2.5rem);
    --text-h2-leading: 1.2;
    --text-h3-size: clamp(1.5rem, 1.2rem + 0.8cqi, 2rem);
    --text-h3-leading: 1.2;
    --text-h4-size: clamp(1.125rem, 1rem + 0.5cqi, 1.5rem);
    --text-h4-leading: 1.4;
    --text-h5-size: clamp(1rem, 0.95rem + 0.25cqi, 1.25rem);
    --text-h5-leading: 1.4;
    --text-body-size: 1rem;
    --text-body-leading: 1.5;
    /* Extension: common UI label size (not in Figma type ramp) */
    --text-sm-size: 0.875rem;
    --text-sm-leading: 1.5;

    /* Spacing */
    --spacing-1: 4px;
    --spacing-2: 8px;
    /* Extension: fills gap between spacing-2 and spacing-4 (not in Figma scale) */
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-15: 60px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-25: 100px;
    /* Extension: fills gap between spacing-25 and spacing-50 */
    --spacing-30: 120px;
    --spacing-50: 200px;

    /* Layout */
    --canvas-max: 1440px;
    --page-margin: 80px;
    --container-max: 1280px;
    --heading-max: 768px;
    /* Form width matches heading max in Figma styleguide (both 768px) */
    --form-width: var(--heading-max);
    --form-half-field: 372px;
    --form-field-gutter: var(--spacing-6);
    --section-padding-block: 100px;
    --section-padding-inline: 80px;
    --card-width: 405px;
    --card-gutter: 32px;
    --card-height: 424px;
    --card-media-height: 150px;
    --icon-size-sm: 10px;
    --icon-size-md: 22px;
    --icon-size-lg: 44px;

    /* Radius */
    --radius-button: 8px;
    --radius-chip: 8px;
    --radius-dropdown: 0 0 8px 8px;
    --radius-leaf-sm: 20px 0 20px 0;
    --radius-leaf-lg: 40px 0 40px 0;
    --announcement-height: 30px;
    --header-height: 72px;
    --text-announcement-size: 13px;
    --text-announcement-leading: 20px;
    --nav-dropdown-item-width: 245px;

    /* Layout: flexbox-only, mobile-first */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1440px;

    /* Responsive layout tokens — desktop default (≥1440 / canvas) */
    --hero-title-size: clamp(2rem, 1.1rem + 4vw, 4rem);
    --hero-container-padding-end: 150px;

    /* Misc */
    --transition-fast: 150ms ease;
    --focus-color: var(--color-pacific-green);
  }

  /* Laptop: 1280–1439 (e.g. 1366×768 width) */
  @media (max-width: 1439px) {
    :root {
      --page-margin: 48px;
      --section-padding-block: 80px;
      --section-padding-inline: 48px;
      --spacing-25: 80px;
      --hero-title-size: clamp(2rem, 1rem + 2.8vw, 3.25rem);
      --hero-container-padding-end: 120px;
    }
  }

  /* Tablet landscape / small laptop: 1024–1279 */
  @media (max-width: 1279px) {
    :root {
      --page-margin: 24px;
      --section-padding-block: 64px;
      --section-padding-inline: 24px;
      --spacing-25: 64px;
      --hero-title-size: clamp(3rem, 2.5rem + 2.5vw, 3.5rem);
      --hero-container-padding-end: 100px;
    }
  }

  /* Tablet portrait: ≤1023 */
  @media (max-width: 1023px) {
    :root {
      --hero-container-padding-end: 0;
    }
  }

  /* Large phone: 640–767 */
  @media (max-width: 767px) {
    :root {
      --page-margin: 20px;
      --section-padding-inline: 20px;
    }
  }

  @media (max-width: 639px) {
    :root {
      --page-margin: 16px;
      --section-padding-block: 48px;
      --section-padding-inline: 16px;
      --spacing-25: 48px;
      --text-section-serif-size: clamp(1.75rem, 1.1rem + 2.5vw, 2.5rem);
    }
  }

  /* Short viewports — e.g. 1366×768, 1280×720 */
  @media (max-width: 1439px) and (max-height: 820px) {
    :root {
      --section-padding-block: 64px;
      --spacing-25: 64px;
      --hero-container-padding-end: 96px;
    }
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */

@layer base {
  html {
    overflow-x: clip;
  }

  body {
    min-block-size: 100dvb;
    overflow-x: clip;
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    font-weight: 400;
    line-height: var(--text-body-leading);
    color: var(--color-forest-green);
    background: var(--color-white);
  }

  h1,
  h2 {
    font-family: var(--font-serif);
    font-weight: 700;
    text-wrap: balance;
  }

  h1 {
    font-family: var(--font-serif);
    font-size: var(--text-display-size);
    line-height: var(--text-display-leading);
  }

  h2 {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-leading);
  }

  h3,
  h4,
  h5 {
    font-family: var(--font-sans);
    font-weight: 700;
    text-wrap: balance;
  }

  h3 {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-leading);
  }

  h4 {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-leading);
  }

  h5 {
    font-size: var(--text-h5-size);
    line-height: var(--text-h5-leading);
  }

  :focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

  .text-body--medium {
    font-weight: 500;
  }

  .text-body--semibold {
    font-weight: 600;
  }
}

/* ── Components ────────────────────────────────────────────────────────── */

@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--spacing-6);
    inset-block-start: var(--spacing-6);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-button);
    background: var(--color-sunshine-yellow);
    color: var(--color-forest-green);
    font-weight: 600;
    text-decoration: none;
    translate: 0 -200%;
    transition: translate var(--transition-fast);
    z-index: 100;
  }

  .skip-link:focus {
    translate: 0;
  }

  .container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  .site-header-stack .container,
  .announcement-bar .container,
  .hero .container,
  .local-banner .container,
  .local-location-banner .container,
  .services-nav .container,
  .outdoor-system .container,
  .sprinkler-services-section .container,
  .additional-services-section .container,
  .locator-banner .container,
  .stats-strip .container,
  .services .container,
  .services-grid .container,
  .promo-hero .container,
  .about-section .container,
  .local-expertise .container,
  .communities-section .container,
  .cta-bars .container,
  .process-section .container,
  .local-feature-grid .container,
  .local-cta .container,
  .financing-section .container,
  .contact-methods-section .container,
  .contact-customer-bar .container,
  .contact-form-section .container,
  .contact-info-cards .container,
  .contact-service-area .container {
    padding-inline: 0;
  }

  .section {
    padding-block: var(--section-padding-block);
    padding-inline: var(--page-margin);
    border-block-end: 1px solid var(--color-pacific-green);
  }

  .section--alt {
    background: var(--color-off-white);
  }

  .section__title {
    margin-block-end: var(--spacing-6);
  }

  .section__title--center {
    text-align: center;
    margin-inline: auto;
  }

  .section__title--serif-lg {
    font-family: var(--font-serif);
    font-size: var(--text-section-serif-size);
    line-height: var(--text-section-serif-leading);
    font-weight: 700;
    max-inline-size: var(--heading-max);
  }

  .section__title--serif-lg.section__title--center {
    margin-inline: auto;
  }

  /* Large step numerals — Figma: DM Serif Text 56/67, Pacific green */
  .Number {
    margin: 0;
    font-family: var(--font-serif-display);
    font-size: 56px; /* styleguide-exception: step numeral */
    font-weight: 400;
    line-height: 67px;
    color: var(--color-pacific-green);
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Style guide hero */
  .sg-hero {
    padding-block: var(--spacing-25) var(--spacing-16);
    padding-inline: var(--page-margin);
    border-block-end: 1px solid var(--color-pacific-green);
  }

  .sg-hero h1 {
    max-inline-size: var(--heading-max);
  }

  /* Colour swatches */
  .colour-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
  }

  .colour-swatch {
    display: grid;
    gap: var(--spacing-4);
    inline-size: min(100%, 219px);
  }

  .colour-swatch__chip {
    block-size: 132px;
    border-radius: var(--radius-chip);
  }

  .colour-swatch__chip--bordered {
    border: 1px solid var(--color-border);
  }

  .colour-swatch__name {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
  }

  .colour-swatch__desc {
    color: var(--color-muted);
    font-size: 14.5px;
    line-height: 1.5;
  }

  /* Font showcase */
  .font-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--spacing-6);
  }

  .font-card {
    padding: var(--spacing-9);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--color-white);
  }

  .font-card__sample {
    margin-block-end: var(--spacing-4);
    font-size: clamp(2rem, 1.5rem + 2cqi, 3rem);
    line-height: 1.15;
  }

  .font-card__sample--serif {
    font-family: var(--font-serif);
    font-weight: 700;
  }

  .font-card__sample--sans {
    font-family: var(--font-sans);
    font-weight: 400;
  }

  .font-card__weight {
    font-weight: 700;
    margin-block-end: var(--spacing-4);
  }

  .font-card__desc {
    color: var(--color-muted);
  }

  /* Type table */
  .type-table {
    max-inline-size: 699px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-button);
    overflow: hidden;
  }

  .type-table thead {
    background: var(--color-forest-green);
    color: var(--color-sunshine-yellow);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .type-table th,
  .type-table td {
    padding: 10px 24px;
    text-align: start;
    vertical-align: middle;
  }

  .type-table tbody tr:nth-child(even) {
    background: var(--color-row-alt);
  }

  .type-table__meta {
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.55;
  }

  .type-table__sample--h1 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 1rem + 4cqi, 4rem);
    line-height: 1.15;
  }

  .type-table__sample--h2 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(1.5rem, 1rem + 2cqi, 2.5rem);
    line-height: 1.2;
  }

  .type-table__sample--h3 {
    font-weight: 700;
    font-size: clamp(1.25rem, 1rem + 1cqi, 2rem);
    line-height: 1.2;
  }

  .type-table__sample--h4 {
    font-weight: 700;
    font-size: clamp(1.125rem, 1rem + 0.5cqi, 1.5rem);
    line-height: 1.4;
  }

  .type-table__sample--h5 {
    font-weight: 700;
    font-size: clamp(1rem, 0.95rem + 0.25cqi, 1.25rem);
    line-height: 1.4;
  }

  .type-table__sample--body {
    font-size: 12.5px;
  }

  /* Spacing scale */
  .spacing-scale {
    display: grid;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    overflow: hidden;
  }

  .spacing-row {
    display: grid;
    grid-template-columns: 150px 56px 1fr;
    align-items: center;
    gap: var(--spacing-4);
    padding: 8px 16px;
    border-block-end: 1px solid var(--color-border);
    font-family: ui-monospace, monospace;
    font-size: 12px;
  }

  .spacing-row:last-child {
    border-block-end: none;
  }

  .spacing-row:nth-child(even) {
    background: var(--color-row-alt);
  }

  .spacing-row__bar {
    block-size: 14px;
    background: var(--color-pacific-green);
    border-radius: 2px;
  }

  /* Layout specs table */
  .layout-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    overflow: hidden;
  }

  .layout-table tr {
    border-block-end: 1px solid var(--color-border);
  }

  .layout-table tr:last-child {
    border-block-end: none;
  }

  .layout-table tr:nth-child(even) {
    background: var(--color-row-alt);
  }

  .layout-table th,
  .layout-table td {
    padding: 10px 16px;
    text-align: start;
    vertical-align: top;
  }

  .layout-table th {
    inline-size: 230px;
    font-weight: 600;
  }

  .layout-table td {
    color: var(--color-muted);
    font-family: ui-monospace, monospace;
    font-size: 13px;
  }

  /* Navbar demo */
  .navbar-demo {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    overflow: hidden;
  }

  .navbar-demo__top {
    padding: 5px var(--page-margin);
    background: var(--color-forest-green);
    color: var(--color-white);
    font-size: 14px;
  }

  .navbar-demo__top-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-4);
    max-inline-size: var(--container-max);
    margin-inline: auto;
  }

  .navbar-demo__main {
    padding: 11px var(--page-margin);
    background: var(--color-white);
    border-block-start: 1px solid var(--color-border);
  }

  .navbar-demo__main-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
    max-inline-size: var(--container-max);
    margin-inline: auto;
    min-block-size: 50px;
  }

  .navbar-demo__logo {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-forest-green);
    text-decoration: none;
  }

  .navbar-demo__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
  }

  .navbar-demo__nav a {
    color: var(--color-forest-green);
    font-weight: 500;
    text-decoration: none;
  }

  .navbar-demo__nav a:where(:hover, :focus-visible) {
    color: var(--color-pacific-green);
    text-decoration: underline;
  }

  .navbar-demo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    align-items: center;
  }

  /* Home page */
  .site-page {
    min-block-size: 100dvb;
    display: flex;
    flex-direction: column;
  }

  .site-page > main {
    flex: 1 0 auto;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-width)), 1fr));
    gap: var(--card-gutter);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .prose {
    max-inline-size: var(--heading-max);
  }

  .prose p {
    color: var(--color-muted);
  }
}

/* ── Utilities ─────────────────────────────────────────────────────────── */

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

/* Unlayered overrides — wins over @layer */
.announcement-bar .link--highlight {
  color: var(--color-sunshine-yellow);
}

.announcement-bar .link--highlight:hover {
  text-decoration: none;
}