/* --- Global Styles & CSS Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth; /* Enables smooth scrolling between sections */
    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;
  }
  
  .nav-links a:hover {
    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;
  }
  
  /* --- 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) {
    .hero-content h1 {
      font-size: 2.5rem;
    }
    
    .hero-buttons {
      flex-direction: column;
    }
  
    /* 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;
    }
  }