/* --- Global Styles & CSS Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth; /* Enables smooth scrolling between sections */
    /* Navbar links stop with the section's top edge just below the sticky navbar, so its padding shows */
    scroll-padding-top: 70px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #171717;
    /* Matches the navbar/footer, so overscrolling past the top or bottom shows dark, not grey */
    background-color: #171717;
  }

  body {
    line-height: 1.6;
    /* The page itself stays light grey */
    background-color: #fafafa;
    min-height: 100vh;
  }
  
  /* --- Utility Classes & Layout --- */
  .container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .section {
    padding: 80px 0;
  }
  
  .bg-light {
    background-color: #f5f5f5;
  }
  
  .section-title {
    text-align: center;
    margin-bottom: 50px;
  }
  
  .section-title h2 {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
  }
  
  .section-title .underline {
    height: 4px;
    width: 70px;
    background-color: #0284c7;
    margin: 12px auto 0;
    border-radius: 2px;
  }
  
  /* Grids */
  .grid {
    display: grid;
    gap: 30px;
  }
  
  .grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  /* Buttons */
  .btn {
    display: inline-block;
    padding: 14px 28px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
  }
  
  .btn-primary {
    background-color: #0284c7;
    color: #ffffff;
  }
  
  .btn-primary:hover {
    background-color: #0369a1;
  }
  
  .btn-secondary {
    background-color: #ffffff;
    color: #171717;
    border: 2px solid #e5e5e5;
  }
  
  .btn-secondary:hover {
    border-color: #0284c7;
    color: #0284c7;
  }
  
  .btn-full {
    width: 100%;
  }
  
  /* --- Header & Navigation --- */
  .navbar {
    position: sticky;
    top: 0;
    background-color: #171717;
    color: #ffffff;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
  }
  
  .logo {
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: -0.03em;
  }
  
  .logo span {
    color: #38bdf8;
    font-weight: 500;
  }
  
  .nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
  }
  
  .nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.2s ease;
  }
  
  /* .active marks the section currently on screen (set by the script at the bottom of index.html) */
  .nav-links a:hover,
  .nav-links a.active {
    color: #38bdf8;
  }
  
  /* --- Hero Section --- */
  .hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(to bottom, #f0fdf4, #fafafa);
    padding: 60px 0;
  }
  
  .hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
  }
  
  .highlight {
    color: #0284c7;
  }
  
  .hero-content p {
    font-size: 1.2rem;
    color: #525252;
    max-width: 650px;
    margin: 0 auto 35px;
  }
  
  .hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
  }
  
  /* --- Services Section --- */
  .card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }
  
  .card h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
  }
  
  .card p {
    color: #525252;
  }
  
  /* Areas We Serve (bottom of the page): a card with the towns grouped by county */
  .service-area {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-align: center;
  }

  .service-area p {
    color: #525252;
    max-width: 620px;
    margin: 0 auto;
  }

  /* One block per county; each block is centered in its column, with its towns left-aligned in two neat columns */
  .area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-items: center;
    gap: 36px 30px;
    margin: 36px 0;
    text-align: left;
  }

  .area-grid > div {
    width: 100%;
    max-width: 260px;
  }

  .area-grid h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }

  .area-grid ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #404040;
  }

  .service-area .area-note a {
    color: #0284c7;
    text-decoration: none;
    font-weight: 600;
  }

  .service-area .area-note a:hover {
    text-decoration: underline;
  }

  /* --- Projects Section --- */
  .project-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  /* <picture> shows a tiny blurred version (inline background-image) until the real photo loads */
  .photo {
    display: block;
    height: 220px;
    background-size: cover;
    background-position: center;
    background-color: #e5e5e5;
    overflow: hidden;
  }

  .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, opacity 0.4s ease;
  }

  /* Fade the photo in over the placeholder once loaded (the "loaded" class is added in index.html) */
  .js .photo img {
    opacity: 0;
  }

  .js .photo img.loaded {
    opacity: 1;
  }
  
  .project-card:hover img {
    transform: scale(1.03);
  }
  
  .project-info {
    padding: 20px;
  }
  
  .project-info .category {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .project-info h3 {
    font-size: 1.15rem;
    margin-top: 5px;
  }
  
  /* --- Contact Section --- */
  /* Narrow info column + wide form column; info stays in view while scrolling the long form */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }

  .contact-grid .contact-info {
    position: sticky;
    top: 100px;
  }

  /* Card around the Jobber form so it matches the rest of the site.
     Jobber's script adds .jobber-inline-work-request to this same div, whose CSS
     (margin: 0 auto; max-width: 760px) would shrink it to the iframe's default 300px
     inside the grid, so both are reset here. Jobber also sets this div's height to
     the iframe's height, so the card has no padding (the iframe has its own). */
  .contact-form,
  .contact-form.jobber-inline-work-request {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 400px;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .contact-form iframe.jobber-work-request {
    display: block;
    max-width: none;
  }

  @media (max-width: 900px) {
    .contact-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .contact-grid .contact-info {
      position: static;
    }
  }

  .contact-info h3 {
    font-size: 1.75rem;
    margin-bottom: 15px;
  }
  
  .contact-info p {
    color: #525252;
    margin-bottom: 30px;
  }
  
  .info-item {
    margin-bottom: 20px;
  }
  
  .info-item strong {
    display: block;
    font-size: 1rem;
    color: #171717;
  }
  
  .info-item p {
    margin-bottom: 0;
    color: #525252;
  }

  .info-item a {
    color: #0284c7;
    text-decoration: none;
  }

  .info-item a:hover {
    text-decoration: underline;
  }
  
  .contact-form-container {
    background-color: #ffffff;
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    color: #404040;
  }
  
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    font-size: 1rem;
    background-color: #fafafa;
    outline: none;
    transition: border-color 0.2s ease;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
    border-color: #0284c7;
    background-color: #ffffff;
  }
  
  /* --- Footer --- */
  .footer {
    background-color: #171717;
    color: #a3a3a3;
    text-align: center;
    padding: 30px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /* Mobile Responsiveness */
  @media (max-width: 768px) {
    /* The two-row mobile navbar is taller */
    html {
      scroll-padding-top: 88px;
    }

    .hero-content h1 {
      font-size: 2.5rem;
    }
    
    .hero-buttons {
      flex-direction: column;
    }

    .service-area {
      padding: 30px 20px;
    }
  
    /* Slides up out of view while scrolling down (the "nav-hidden" class is set in index.html) */
    .navbar {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .navbar.nav-hidden {
      transform: translateY(-100%);
      box-shadow: none;
    }

    /* Logo on top, links centered underneath, so nothing runs off the screen */
    .nav-container {
      flex-direction: column;
      justify-content: center;
      height: auto;
      padding-top: 12px;
      padding-bottom: 10px;
      gap: 6px;
    }

    .nav-links {
      gap: 20px;
    }

    .nav-links a {
      font-size: 0.75rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .navbar {
      transition: none;
    }
  }