:root{
    --navy:#0d2b45;
    --navy-deep:#081b2e;
    --aqua:#2fb2c2;
    --aqua-light:#8fe0e8;
    --marigold:#f2a13c;
    --marigold-deep:#d98a24;
    --sand:#f6f1e6;
    --ink:#132436;
    --white:#ffffff;
    --line:rgba(13,43,69,0.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Source Sans 3', sans-serif;
    color:var(--ink);
    background:var(--sand);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
    color:var(--navy);
    line-height:1.15;
  }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.18em;
    font-size:0.78rem;
    color:var(--aqua);
    font-weight:600;
    display:inline-block;
    margin-bottom:10px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-weight:600;
    font-size:0.92rem;
    padding:14px 26px;
    border-radius:3px;
    text-decoration:none;
    border:2px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--marigold); color:var(--navy-deep);}
  .btn-primary:hover{background:var(--marigold-deep); box-shadow:0 8px 20px rgba(242,161,60,0.35);}
  .btn-outline{background:transparent; border-color:rgba(255,255,255,0.55); color:#fff;}
  .btn-outline:hover{background:rgba(255,255,255,0.12);}
  .btn-navy{background:var(--navy); color:#fff;}
  .btn-navy:hover{background:var(--navy-deep);}

  /* HEADER */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--navy);
    border-bottom:3px solid var(--marigold);
  }
  header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:10px; padding-bottom:10px; gap:20px;}
  header .logo-block{display:flex; align-items:center; gap:12px;}
  header .logo-block img{height:56px; width:auto;}
  header nav{display:flex; align-items:center; gap:26px;}
  header nav a{
    color:#dfeef2; text-decoration:none; font-size:0.92rem;
    font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.03em;
  }
  header nav a:hover{color:var(--aqua-light);}
  .header-cta{display:flex; align-items:center; gap:14px;}
  .phone-link{
    color:#fff; text-decoration:none; font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem;
    display:flex; align-items:center; gap:8px;
  }
  .nav-toggle{display:none;}
  @media (max-width:920px){
    header nav{display:none;}
    .nav-toggle{display:block; background:none; border:1px solid rgba(255,255,255,0.4); color:#fff; padding:8px 12px; border-radius:3px;}
  }

  /* HERO */
  .hero{
    position:relative;
    background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 60%, #061422 100%);
    padding:64px 0 84px;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 85% 15%, rgba(47,178,194,0.25), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(242,161,60,0.12), transparent 40%);
    pointer-events:none;
  }
  .hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
  @media (max-width:900px){.hero .wrap{grid-template-columns:1fr;}}
  .hero h1{color:#fff; font-size:clamp(2.1rem, 4vw, 3.1rem); margin-bottom:18px;}
  .hero h1 span{color:var(--aqua-light);}
  .hero p.lede{color:#c9dbe4; font-size:1.12rem; max-width:520px; margin-bottom:28px;}
  .hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px;}
  .hero .trust-strip{
    display:flex; gap:22px; flex-wrap:wrap; color:#a9c2cf; font-size:0.86rem;
    border-top:1px solid rgba(255,255,255,0.15); padding-top:18px;
  }
  .hero .trust-strip strong{color:#fff;}

  /* BEFORE/AFTER SLIDER */
  .ba-slider{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,0.45);
    aspect-ratio: 4/3;
    border:3px solid rgba(255,255,255,0.15);
  }
  .ba-slider img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none;
  }
  .ba-slider .after-img{clip-path: inset(0 0 0 50%);}
  .ba-slider .divider{
    position:absolute; top:0; bottom:0; left:50%;
    width:3px; background:#fff; transform:translateX(-50%);
    box-shadow:0 0 12px rgba(0,0,0,0.5);
    pointer-events:none;
  }
  .ba-slider .handle{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:46px; height:46px; border-radius:50%; background:var(--marigold);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.4);
    pointer-events:none;
  }
  .ba-slider .handle svg{width:20px; height:20px;}
  .ba-slider input[type=range]{
    position:absolute; inset:0; width:100%; height:100%; margin:0;
    opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;
  }
  .ba-label{
    position:absolute; bottom:14px; font-family:'Oswald',sans-serif; text-transform:uppercase;
    letter-spacing:0.06em; font-size:0.72rem; color:#fff; background:rgba(8,27,46,0.65);
    padding:5px 10px; border-radius:2px;
  }
  .ba-label.left{left:14px;}
  .ba-label.right{right:14px;}
  .ba-caption{text-align:center; color:#a9c2cf; font-size:0.85rem; margin-top:12px;}

  /* SECTIONS COMMON */
  section{padding:76px 0;}
  .section-head{max-width:660px; margin:0 auto 44px; text-align:center;}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);}
  .section-head p{color:#4b5d6d; font-size:1.02rem; margin-top:12px;}

  /* LOCATION NOTE */
  .locale-note{
    background:var(--aqua); color:var(--navy-deep);
    padding:14px 0; text-align:center; font-size:0.92rem; font-weight:600;
  }
  .locale-note .wrap{display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;}

  /* ABOUT */
  .about{background:#fff;}
  .about .wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
  @media (max-width:900px){.about .wrap{grid-template-columns:1fr;}}
  .about img{border-radius:6px; box-shadow:0 24px 48px rgba(13,43,69,0.18);}
  .about h2{margin-bottom:16px;}
  .about p{color:#3d4f5f; margin-bottom:14px;}
  .stat-row{display:flex; gap:32px; margin-top:24px; flex-wrap:wrap;}
  .stat{border-left:3px solid var(--marigold); padding-left:14px;}
  .stat .num{font-family:'Oswald',sans-serif; font-size:1.8rem; color:var(--navy); font-weight:700;}
  .stat .label{font-size:0.82rem; color:#5c6d7c; text-transform:uppercase; letter-spacing:0.04em;}

  /* PAVER SPOTLIGHT */
  .spotlight{
    background:var(--navy-deep);
    color:#fff;
    position:relative;
  }
  .spotlight .eyebrow{color:var(--marigold);}
  .spotlight .section-head h2{color:#fff;}
  .spotlight .section-head p{color:#b7cdd8;}
  .process{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:20px;}
  @media (max-width:800px){.process{grid-template-columns:1fr;}}
  .process .step{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:6px;
    padding:28px 24px;
  }
  .process .step .step-num{
    font-family:'Oswald',sans-serif; font-size:0.85rem; color:var(--marigold);
    letter-spacing:0.1em; margin-bottom:10px; font-weight:600;
  }
  .process .step h3{color:#fff; font-size:1.15rem; margin-bottom:10px;}
  .process .step p{color:#b7cdd8; font-size:0.95rem;}

  .spotlight-gallery{
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:48px;
  }
  @media (max-width:800px){.spotlight-gallery{grid-template-columns:repeat(2,1fr);}}
  .spotlight-gallery figure{border-radius:5px; overflow:hidden; position:relative; aspect-ratio:3/4;}
  .spotlight-gallery img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
  .spotlight-gallery figure:hover img{transform:scale(1.06);}

  /* NEW CONSTRUCTION CALLOUT */
  .protect{background:var(--sand);}
  .protect .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  @media (max-width:900px){.protect .wrap{grid-template-columns:1fr;}}
  .protect img{border-radius:6px; box-shadow:0 24px 48px rgba(13,43,69,0.14);}
  .protect h2{margin-bottom:16px;}
  .protect p{color:#3d4f5f; margin-bottom:14px;}
  .protect ul{margin:18px 0; padding-left:20px; color:#3d4f5f;}
  .protect ul li{margin-bottom:8px;}

  /* SERVICES */
  .services{background:#fff;}
  .service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:10px;}
  @media (max-width:900px){.service-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.service-grid{grid-template-columns:1fr;}}
  .service-card{
    border:1px solid var(--line); border-radius:6px; padding:28px 24px;
    background:var(--sand); position:relative;
  }
  .service-card.featured{
    background:var(--navy); color:#fff; grid-column:span 1;
    border-color:var(--navy);
  }
  .service-card.featured h3, .service-card.featured .tag{color:#fff;}
  .service-card.featured p{color:#c3d5df;}
  .service-card .tag{
    font-family:'Oswald',sans-serif; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--marigold); font-weight:700; display:block; margin-bottom:8px;
  }
  .service-card h3{font-size:1.15rem; margin-bottom:10px;}
  .service-card p{color:#4b5d6d; font-size:0.94rem;}

  /* HANDYMAN */
  .handyman{background:var(--sand);}
  .handyman .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  @media (max-width:900px){.handyman .wrap{grid-template-columns:1fr;}}
  .handyman h2{margin-bottom:14px;}
  .handyman p{color:#3d4f5f; margin-bottom:16px;}
  .task-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin-top:20px;}
  .task-list div{
    font-size:0.92rem; color:#2c3d4c; display:flex; align-items:center; gap:8px;
  }
  .task-list div::before{
    content:"✓"; color:var(--aqua); font-weight:700;
  }
  .handyman-badge{
    background:#fff; border:1px solid var(--line); border-radius:6px; padding:24px; text-align:center;
  }
  .handyman-badge .num{font-family:'Oswald',sans-serif; font-size:3rem; color:var(--navy); font-weight:700; line-height:1;}
  .handyman-badge .num span{color:var(--marigold);}
  .handyman-badge .label{text-transform:uppercase; letter-spacing:0.06em; font-size:0.82rem; color:#5c6d7c; margin-top:8px;}

  /* GALLERY */
  .gallery{background:#fff;}
  .gallery-grid{
    display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:12px; margin-top:10px;
  }
  @media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
  .gallery-grid figure{overflow:hidden; border-radius:5px; position:relative;}
  .gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
  .gallery-grid figure:hover img{transform:scale(1.07);}
  .gallery-grid .tall{grid-row:span 2;}

  /* SERVICE AREA */
  .area{background:var(--navy); color:#fff;}
  .area .wrap{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
  @media (max-width:900px){.area .wrap{grid-template-columns:1fr;}}
  .area h2{color:#fff;}
  .area p{color:#c3d5df; margin-bottom:18px;}
  .area-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
  .area-chips span{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
    padding:8px 16px; border-radius:20px; font-size:0.86rem;
  }
  .area-disclaimer{
    background:rgba(242,161,60,0.1); border:1px solid rgba(242,161,60,0.35);
    border-radius:6px; padding:18px 20px; font-size:0.88rem; color:#f3d9b0; margin-top:24px;
  }
  .area-truck img{border-radius:6px; box-shadow:0 24px 48px rgba(0,0,0,0.35);}

  /* CONTACT */
  .contact{background:var(--sand);}
  .contact-box{
    background:#fff; border-radius:8px; padding:48px; box-shadow:0 20px 50px rgba(13,43,69,0.1);
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:center;
  }
  @media (max-width:800px){.contact-box{grid-template-columns:1fr; padding:32px 24px;}}
  .contact-box h2{margin-bottom:14px;}
  .contact-box p{color:#4b5d6d; margin-bottom:22px;}
  .contact-methods{display:flex; flex-direction:column; gap:16px;}
  .contact-method{
    display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line);
    border-radius:6px; text-decoration:none; color:var(--navy);
  }
  .contact-method:hover{border-color:var(--aqua);}
  .contact-method .icon{
    width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .contact-method .label{font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em; color:#8a99a6;}
  .contact-method .value{font-family:'Oswald',sans-serif; font-weight:600; font-size:1.02rem;}

  /* FOOTER */
  footer{background:var(--navy-deep); color:#9fb6c2; padding:48px 0 28px;}
  footer .wrap{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px;}
  @media (max-width:800px){footer .wrap{grid-template-columns:1fr; text-align:left;}}
  footer img{height:44px; margin-bottom:14px;}
  footer h4{color:#fff; font-size:0.95rem; margin-bottom:14px;}
  footer p, footer li{font-size:0.86rem; color:#8ea3af; line-height:1.8;}
  footer ul{list-style:none;}
  footer a{text-decoration:none; color:#8ea3af;}
  footer a:hover{color:var(--aqua-light);}
  .footer-bottom{
    max-width:1180px; margin:36px auto 0; padding:20px 24px 0; border-top:1px solid rgba(255,255,255,0.08);
    font-size:0.8rem; color:#6d8593; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }

  /* sticky mobile call bar */
  .mobile-call{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--marigold); padding:12px 18px; text-align:center;
  }
  .mobile-call a{
    color:var(--navy-deep); font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
    letter-spacing:0.04em; text-decoration:none; font-size:0.95rem;
  }
  @media (max-width:700px){
    .mobile-call{display:block;}
    body{padding-bottom:56px;}
  }