@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-dark:   #1a3347;
  --color-accent: #5b9ab8;
  --color-nav:    #3d7a96;
  --color-border: #ddd;
  --color-bg-subtle: #f4f4f4;

  --text:              #333;
  --text-muted:        #666;
  --text-on-dark:      #fff;
  --text-on-dark-muted: rgba(255,255,255,0.65);

  --radius:    8px;
  --radius-lg: 12px;

  --__0-25: 0.25rem;
  --__0-5:  0.5rem;
  --__0-75: 0.75rem;
  --__1:    1rem;
  --__1-5:  1.5rem;
  --__2:    2rem;
  --__2-5:  2.5rem;
  --__3:    3rem;
  --__4:    4rem;

  --max-width: 1200px;
}

* {
  font-family: 'DM Sans', sans-serif;
  box-sizing: border-box;
}

body {
  color: var(--text);
  margin: 0;
}

a {
  color: var(--color-accent);
}

/*----------------------------------------------------------------------------
| Utilities
| Single-purpose helper classes for spacing, color, and text alignment.
----------------------------------------------------------------------------*/
.p-1 { padding: var(--__1); }
.p-2 { padding: var(--__2); }
.p-3 { padding: var(--__3); }

.px-1 { padding-left: var(--__1); padding-right: var(--__1); }
.px-2 { padding-left: var(--__2); padding-right: var(--__2); }
.px-3 { padding-left: var(--__3); padding-right: var(--__3); }

.py-1 { padding-top: var(--__1); padding-bottom: var(--__1); }
.py-2 { padding-top: var(--__2); padding-bottom: var(--__2); }
.py-3 { padding-top: var(--__3); padding-bottom: var(--__3); }

.mb-1 { margin-bottom: var(--__1) !important; }
.mb-2 { margin-bottom: var(--__2) !important; }
.mb-3 { margin-bottom: var(--__3) !important; }
.mb-4 { margin-bottom: var(--__4) !important; }

.mt-1 { margin-top: var(--__1) !important; }
.mt-2 { margin-top: var(--__2) !important; }
.mt-3 { margin-top: var(--__3) !important; }
.mt-4 { margin-top: var(--__4) !important; }
.constrain { max-width: var(--max-width); margin: auto; }

.shadow { box-shadow: 0 2px 12px rgba(0,0,0,0.1); }

.bg-light { background: #f5f5f5 !important; }
.bg-accent-light {
  background: #e6f2f7 !important;
  border-bottom: 3px solid var(--color-accent) !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  @media (max-width: 900px) {
    padding: var(--__1) !important;
    border-top: 3px solid var(--color-accent);
  }
}

.rounded { border-radius: var(--radius); }


/*----------------------------------------------------------------------------
| Typography
| Base font sizes for headings and body text with mobile overrides.
----------------------------------------------------------------------------*/
h1 { font-size: 3rem; margin: 0; }
h2 { font-size: 2.25rem; margin: 0; }
h3 { font-size: 1.25rem; margin: 0; }
h4 { font-size: 1.1rem; margin: 0; }
h5 { font-size: 1rem; margin: 0; }
p     { font-size: 1rem; margin: 0; }
small { font-size: 0.8rem; display: block; }

@media (max-width: 900px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.1rem; }
  h4 { font-size: 1rem; }
}

.text-center   { text-align: center; }
.text-muted    { color: var(--text-muted); }
.text-on-dark  { color: var(--text-on-dark); }
.text-light    { color: var(--text-on-dark-muted); }
.text-label    { font-size: 0.85rem; font-weight: 600; }
.text-eyebrow  { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.text-signoff  { font-weight: 700; font-style: italic; }

.bg-dark   { background: var(--color-dark); }
.bg-accent { background: var(--color-accent); }

/*----------------------------------------------------------------------------
| Button
| Primary, secondary, and contrast button variants.
----------------------------------------------------------------------------*/
button {
  background: var(--color-dark);
  color: var(--text-on-dark);
  padding: var(--__0-75) var(--__2);
  font-family: inherit;
  font-weight: 700;
  border: 2px solid var(--color-dark);
  cursor: pointer;
  border-radius: var(--radius);
  transition: filter 0.15s;

  &:hover { filter: brightness(1.2); }
}

.btn-secondary {
  background: transparent;
  color: var(--color-dark);
  border: 2px solid var(--color-dark);

  &:hover { filter: none; background: var(--color-dark); color: var(--text-on-dark); }
}

.btn-secondary.contrast {
  color: var(--text-on-dark);
  border-color: rgba(255,255,255,0.7);

  &:hover { filter: none; background: #fff; color: var(--color-dark); border-color: var(--text-on-dark); }
}

.btn-sm {
  font-size: 0.85rem;
  padding: 0.6rem 1.4rem;

  @media (max-width: 900px) {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
  }
}

.btn-full-mobile {
  @media (max-width: 900px) {
    width: 100%;
  }
}

/*----------------------------------------------------------------------------
| Input
| Label and text input field.
----------------------------------------------------------------------------*/
.input-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;

  input {
    padding: 0.6rem var(--__0-75);
    border: 1px solid var(--color-border);
    font-size: 1rem;
    font-family: inherit;
    width: 100%;

    &:focus {
      outline: none;
      border-color: var(--color-accent);
    }
  }
}

/*----------------------------------------------------------------------------
| Checkbox
| Checkbox input with a label.
----------------------------------------------------------------------------*/
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;

  .checkbox-group-label {
    margin-bottom: 0.15rem;
  }
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--__0-5);
  font-size: 1rem;
  cursor: pointer;
}

/*----------------------------------------------------------------------------
| Card
| White padded container with a soft drop shadow.
----------------------------------------------------------------------------*/
.card {
  background: #fff;
  padding: var(--__2-5);
  width: 100%;
  @media (max-width: 900px) {
    box-shadow: none;
  }
}

/*----------------------------------------------------------------------------
| Header
| Three-tier header — top band, brand section, and sticky nav bar.
----------------------------------------------------------------------------*/
.header-top-band {
  background: var(--color-dark);

  .header-top-band-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.4rem var(--__2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-on-dark-muted);

    a { color: var(--text-on-dark); text-decoration: none; font-weight: 600; }
  }

  @media (max-width: 900px) {
    .header-top-band-inner { padding: var(--__0-5) var(--__1); }
  }
}

.header-brand {
  background: #fff;
  border-bottom: 1px solid var(--color-border);

  .header-brand-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--__1) var(--__2);
    padding-right: 0;
    display: flex;
    align-items: center;
    gap: var(--__1);

    .header-logo-wrap {
      background: var(--color-dark);
      border-radius: 22%;
      padding: var(--__0-5);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .header-logo {
      height: 32px;
      width: auto;
      display: block;
      image-rendering: pixelated;
    }

    .header-name {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--color-dark);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .header-tagline {
      color: var(--text-muted);
      font-size: 0.82rem;
      margin-top: 0.15rem;
    }
  }

  @media (max-width: 900px) {
    .header-brand-inner {
      padding: var(--__1) var(--__1);
      padding-right: 0;

      .header-name { font-size: 1.25rem; }
      .header-tagline { font-size: 0.75rem; }
    }
  }
}

.header-nav {
  background: var(--color-nav);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 100;

  .header-nav-inner {
    max-width: var(--max-width);
    height: 50px;
    margin: 0 auto;
    padding: 0 var(--__2);
    display: flex;
    align-items: center;

    a {
      color: var(--text-on-dark);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9rem;
      opacity: 0.85;
      height: 50px;
      line-height: 50px;
      padding: 0 var(--__0-5);

      &.active {
        opacity: 1;
        border-bottom: 2px solid #fff;
      }
    }

    button { margin-left: auto; }
  }

  @media (max-width: 900px) {
    .header-nav-inner {
      padding: 0 var(--__1);

      a { font-size: 0.82rem; padding: 0 var(--__0-25); }
    }
  }
}

/*----------------------------------------------------------------------------
| Banner
| Full-width background image with centered dark overlay and two CTAs.
----------------------------------------------------------------------------*/
.banner-a {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  .banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    z-index: 0;
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 1;
  }

  .banner-a-inner {
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding: var(--__3) var(--__2);
    color: var(--text-on-dark);
  }

  .banner-a-eyebrow {
    opacity: 0.8;
    margin-bottom: var(--__1);
  }

  h1 {
    color: var(--text-on-dark);
    margin-bottom: var(--__1);
    line-height: 1.1;
  }

  p {
    opacity: 0.88;
    line-height: 1.65;
    margin-bottom: var(--__2);
  }

  .banner-a-actions {
    display: flex;
    gap: var(--__1);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  @media (max-width: 900px) {
    min-height: 80vh;
    align-items: center;

    .banner-a-inner {
      padding: var(--__2) 1.25rem;
      width: 100%;
    }

    .banner-a-eyebrow {
      font-size: 0.7rem;
      letter-spacing: 1px;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: var(--__0-75);
    }

    p {
      font-size: 0.92rem;
      margin-bottom: var(--__1-5);
    }

    .banner-a-actions {
      justify-content: center;
    }
  }
}



/*----------------------------------------------------------------------------
| Services
| Centered header + dark icon cards with glow shadow.
----------------------------------------------------------------------------*/
.services-header {
  max-width: 800px;
  margin-bottom: var(--__3);

  p { margin-top: var(--__0-75); }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;

  @media (max-width: 900px) {
    grid-template-columns: repeat(4, 280px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }
}

.services-card {
  background: var(--color-dark);
  border-radius: var(--radius);
  padding: var(--__2) var(--__1-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--__0-75);
  box-shadow: 0 8px 32px rgba(26,51,71,0.35);

  @media (max-width: 900px) {
    scroll-snap-align: start;
  }

  svg { width: 52px; height: 52px; color: var(--color-accent); margin-bottom: var(--__0-5); }
}

.services-link { margin-top: auto; padding-top: var(--__0-75); font-weight: 700; color: var(--color-accent); text-decoration: none; }

/*----------------------------------------------------------------------------
| Service Area
| Split layout — text left, bordered county list right.
----------------------------------------------------------------------------*/
.sa-split {
  display: flex;
  gap: var(--__4);
  @media (max-width: 800px) {
    display: block;
  }
}

.sa-split-text {
  display: flex;
  flex-direction: column;
  gap: var(--__1);
  max-width: 800px;
  @media (max-width: 800px) {
    padding-bottom: var(--__2);
  }
}

.sa-split-list {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  @media (max-width: 800px) {
    min-width: 100px;
  }
}

.sa-list-item {
  padding: var(--__1) 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  &:first-child { border-top: 1px solid var(--color-border); }
}

/*----------------------------------------------------------------------------
| Reviews
| Three customer review cards displayed side by side.
----------------------------------------------------------------------------*/
.reviews {

  .reviews-header {
    margin-bottom: var(--__3);

    p { margin-top: var(--__0-5); }
  }

  .reviews-list {
    display: flex;
    gap: var(--__1-5);

    @media (max-width: 900px) {
      gap: var(--__1);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;

      &::-webkit-scrollbar { display: none; }
    }
  }

  .review {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-dark) !important;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(26,51,71,0.35);

    @media (max-width: 900px) {
      flex: 0 0 280px;
      scroll-snap-align: start;
      padding: var(--__1) var(--__1-5);
    }

    .review-stars {
      color: #f5c842;
      font-size: 1.1rem;
      margin-bottom: var(--__0-75);
    }

    .review-text {
      flex: 1;
      margin-bottom: var(--__1);
    }

    .review-name {
      font-weight: 600;
    }
  }

  .reviews-google {
    margin-top: var(--__1-5);
    font-size: 0.9rem;
  }
}

/*----------------------------------------------------------------------------
| Why
| Why choose us section with a header and three supporting points.
----------------------------------------------------------------------------*/
.why {
  .why-header {
    margin-bottom: var(--__2-5);

    h2 { margin-bottom: var(--__1); }
  }

  .why-points {
    display: flex;
    flex-direction: column;
    gap: var(--__1-5);
  }

  .why-point {
    h4 { margin-bottom: 0.4rem; }
  }
}

/*----------------------------------------------------------------------------
| Satisfaction
| Satisfaction and rain guarantee section with guarantee details.
----------------------------------------------------------------------------*/
.satisfaction {
  .satisfaction-guarantees {
    text-align: left;

    h4 { margin-bottom: var(--__0-75); }
    p + p { margin-top: var(--__0-75); }
  }
}

/*----------------------------------------------------------------------------
| Form
| Two-column quote request form with contact info sidebar.
----------------------------------------------------------------------------*/
.contact-form {
  max-width: var(--max-width);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;

  .left {
    .row {
      display: flex;
      gap: var(--__1);

      @media (max-width: 900px) {
        flex-direction: column;
      }
    }
  }

  .right {
    background: var(--color-dark);
    color: var(--text-on-dark);
  }

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
    border-radius: 0;
    border: none;
    .contact-form-form { padding: var(--__1-5) var(--__1); }
    .contact-form-sidebar { padding: var(--__1-5) var(--__1); }
    .left { padding: var(--__1-5) var(--__1); background: var(--color-bg-subtle); border-top: 1px solid var(--color-border); }
    .right { padding: var(--__1-5) var(--__1); }
  }
}

/*----------------------------------------------------------------------------
| Footer
| Closing message, contact details, and social links on accent background.
----------------------------------------------------------------------------*/
.footer {
  background: var(--color-accent);
  color: var(--text-on-dark);

  .footer-inner {
    padding: var(--__2) var(--__2);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--__2);

    @media (max-width: 900px) {
      flex-direction: column;
      padding: var(--__1);
    }
  }

  .footer-text {
    p { margin-bottom: var(--__0-5); }

    .footer-signoff {
      margin-top: var(--__1);
    }
  }

  .footer-divider {
    border-left: 1px solid rgba(255,255,255,0.4);
    align-self: stretch;
  }

  a {
    color: var(--text-on-dark);
    font-weight: 600;
    text-decoration: none;
  }

  .footer-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--__0-75);
    flex-shrink: 0;
  }

  .footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;

    i { font-size: 1.5rem; }
  }
}