:root{
  --header-h:64px;
      --dark:#0b1221;
      --brand:#059669;
      --brand-hover:#047857;
      --muted:#f1f5f9;
      --text:#0f172a;
      --text-light:#334155;
      --card:#ffffff;
      --ring:#e2e8f0;
      --fw-regular:400;
      --fw-medium:500;
      --fw-semibold:600;
      --fw-bold:700;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    section[id]{scroll-margin-top:112px}
    body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);background:#fff;line-height:1.65;font-weight:var(--fw-regular);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto}
    strong{font-weight:var(--fw-semibold)}
    .container{max-width:1200px;margin:0 auto;padding:0 20px}

    /* Header */
    .fixed-header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(11,18,33,0.98);backdrop-filter:blur(8px)}
    .nav{height:64px;border-bottom:1px solid #1e293b}
    .nav .inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand img{display:block;height:36px;width:auto;aspect-ratio:150/36}
    .nav-links{display:none;gap:22px;font-size:14px;color:#e2e8f0;font-weight:var(--fw-medium);align-items:center}
    .nav-links a:hover{color:#fff}
    .phone-pill{background:rgba(255,255,255,0.06);border:1px solid rgba(226,232,240,0.25);color:#fff;padding:9px 16px;border-radius:999px;font-weight:var(--fw-semibold);box-shadow:0 12px 24px -18px rgba(0,0,0,0.8)}
    .menu-btn{display:inline-flex;color:#fff;background:none;border:0;font-size:28px;cursor:pointer;padding:0}
    @media(min-width:980px){
      .nav-links{display:flex}
      .menu-btn{display:none}
    }

    .trust-ribbon{
      height:36px;
      display:flex;
      align-items:center;
      border-bottom:1px solid #1e293b;
      background:linear-gradient(90deg, rgba(5,150,105,0.35), rgba(5,150,105,0.12));
      color:#e2e8f0;
      font-size:13px;
      font-weight:var(--fw-semibold);
      letter-spacing:0.2px;
      text-transform:uppercase;
    }
    .trust-ribbon .inner{
      /* desktop default */
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
    }
    .trust-marquee{overflow:hidden}
    .trust-track{display:flex;align-items:center;gap:14px;white-space:nowrap;will-change:transform}
    .trust-set{display:none !important}
    .trust-set.dup{display:none}
    .trust-ribbon .dot{opacity:0.7}

    /* Mobile: scrolling marquee so the ribbon never truncates */
    @media(max-width:979px){
      .trust-ribbon .inner{justify-content:flex-start}
      .trust-set.dup{display:flex}
      .trust-track{animation:trust-marquee 18s linear infinite}
      @keyframes trust-marquee{
        0%{transform:translateX(0)}
        100%{transform:translateX(-50%)}
      }
    }

    @media (prefers-reduced-motion: reduce){
      .trust-track{animation:none !important}
      .trust-set.dup{display:none}
      .trust-ribbon .inner{justify-content:center}
    }

    /* Mobile menu */
    .mobile{display:none;position:fixed;top:var(--header-h);left:0;right:0;background:#0b1221;border-top:1px solid #1e293b;z-index:59;padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));max-height:calc(100dvh - var(--header-h));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .mobile a{display:block;padding:14px 20px;color:#cbd5e1;font-size:16px;border-bottom:1px solid #1e293b}
    .mobile a:hover{color:#fff}

    /* Buttons */
    .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:13px 20px;font-weight:var(--fw-semibold);letter-spacing:0.2px;transition:transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s;cursor:pointer;border:1px solid transparent;box-shadow:0 10px 18px -12px rgba(0,0,0,0.45)}
    .btn:active{transform:scale(.98)}
    .btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(5,150,105,0.25), 0 14px 24px -14px rgba(0,0,0,0.55)}
    .btn-brand{background:linear-gradient(180deg, #10b981, var(--brand));color:#fff;border-color:rgba(16,185,129,0.35);box-shadow:0 14px 26px -14px rgba(5,150,105,0.85)}
    .btn-brand:hover{background:linear-gradient(180deg, #34d399, var(--brand-hover));transform:translateY(-1px);box-shadow:0 18px 34px -16px rgba(5,150,105,0.95)}
    .btn-dark{background:linear-gradient(180deg, #111c33, #0f172a);color:#fff;border-color:rgba(255,255,255,0.10);box-shadow:0 14px 26px -16px rgba(0,0,0,0.75)}
    .btn-ghost{background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(226,232,240,0.30);box-shadow:none}
    .btn-ghost:hover{background:rgba(255,255,255,0.10);border-color:rgba(226,232,240,0.55);transform:translateY(-1px)}
    .btn-outline{background:#ffffff;color:var(--brand);border:1px solid rgba(5,150,105,0.35);box-shadow:0 12px 22px -16px rgba(5,150,105,0.55)}
    .btn-outline:hover{background:#ecfdf5;border-color:rgba(5,150,105,0.55);transform:translateY(-1px)}

    /* Inline CTAs inside service description boxes */
    .cta-inline{display:flex;gap:12px;align-items:stretch;flex-wrap:nowrap}
    .cta-inline .btn{flex:1 1 0;min-width:0;white-space:nowrap}
    .cta-inline .btn + .btn{margin-left:0 !important}

    @media (max-width: 640px){
      .cta-inline{gap:10px}
      .cta-inline .btn{padding:12px 10px;font-size:13px;line-height:1.1}
    }

    /* Hero */
    .top-space{display:none}
    .hero{position:relative;padding:calc(var(--header-h) + 24px) 0 70px;color:#fff;overflow:hidden}
    
    /* REVERTED TO NEW VERSION (Index 66) BACKGROUND */
    .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
    .hero-media video{width:100%;height:100%;object-fit:cover;filter:blur(7px) brightness(0.55) saturate(1.05);transform:scale(1.07)}
    .hero-bg{position:absolute;inset:0;z-index:-1;background:
      radial-gradient(1200px 500px at 20% 10%, rgba(16,185,129,0.22), transparent 55%),
      radial-gradient(900px 500px at 80% 20%, rgba(59,130,246,0.18), transparent 60%),
      linear-gradient(rgba(11,18,33,0.90), rgba(11,18,33,0.74)),
      url('services/Exterior_Caulking.jpg');
      background-size:cover;background-position:center}
    
    .hero-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
    @media(min-width:900px){.hero-grid{grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center}}
    .hero h1{font-size:34px;line-height:1.08;font-weight:var(--fw-bold);margin:0 0 14px}
    @media(min-width:768px){.hero h1{font-size:52px}}
    .hero p{font-size:18px;color:#cbd5e1;margin:0 0 18px;max-width:620px}
    .chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
    .chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--fw-semibold);color:#e2e8f0;border:1px solid rgba(226,232,240,0.25);border-radius:999px;padding:8px 12px;background:rgba(15,23,42,0.35);text-decoration:none;cursor:pointer}
    .chip .mark{
      width:18px;height:18px;border-radius:999px;
      background:#1877F2;
      display:inline-flex;align-items:center;justify-content:center;
      position:relative;flex:0 0 18px;
      box-shadow:0 8px 18px rgba(24,119,242,0.35);
    }
    .chip .mark::after{
      content:"";
      position:absolute;
      left:50%; top:50%;
      width:6px; height:10px;
      border-right:2px solid #ffffff;
      border-bottom:2px solid #ffffff;
      transform:translate(-50%,-60%) rotate(45deg);
    }

    /* Mobile hero chips: force 2 columns and reduce text size */
    @media(max-width:560px){
      /* Make hero end closer to the image on mobile */
      .hero{padding-bottom:18px}
      .hero .container{padding-left:12px;padding-right:12px}

      .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
      .chip{width:100%;font-size:12px;padding:7px 10px;line-height:1.15}

      /* Mobile hero image: don't crop */
      .hero-card.hero-card-media{aspect-ratio:auto;min-height:0}
      .hero-card.hero-card-media picture{height:auto}
      .hero-card-img{height:auto;object-fit:contain !important;object-position:center !important}

      /* Mobile: keep the 2 hero-card CTA buttons on one row */
      .hero-card .cta-row{flex-wrap:nowrap}
      .hero-card .cta-row .btn{flex:1 1 0;min-width:0;padding:12px 10px;font-size:13px;line-height:1.1;white-space:normal}
    }

    /* Tablets too: never crop hero images (some iOS devices report wider CSS viewport) */
    @media(max-width:980px){
      .hero-card-img{object-fit:contain !important;object-position:center !important}
      .hero-card.hero-card-media{aspect-ratio:auto;min-height:0}
    }

    /* FAQ: add a clear dropdown arrow on each question */
    #faq details > summary{position:relative;padding-right:44px}
    #faq details > summary::after{
      content:"▾";
      position:absolute;
      right:16px;
      top:50%;
      transform:translateY(-50%);
      font-size:18px;
      opacity:.6;
      transition:transform .18s ease, opacity .18s ease;
    }
    #faq details[open] > summary::after{transform:translateY(-50%) rotate(180deg);opacity:.9}
    @media(max-width:420px){
      .chip{font-size:11px;padding:6px 9px}
      .chip .mark{width:16px;height:16px;flex:0 0 16px}
      .chip .mark::after{width:5px;height:9px}

      .hero-card .cta-row .btn{padding:11px 8px;font-size:12px}
    }
    .hero-card{background:rgba(255,255,255,0.98);color:var(--text);padding:22px;border-radius:16px;border:1px solid rgba(226,232,240,0.8);box-shadow:0 14px 30px rgba(0,0,0,0.25)}
    .hero-card.hero-card-media{padding:0;overflow:hidden;aspect-ratio:4 / 3;min-height:320px}
    .hero-card.hero-card-media picture{width:100%;height:100%;display:block}
    .hero-card-img{width:100%;height:100%;object-fit:cover;display:block}

    .hero-card h3{margin:0 0 8px;font-size:18px;font-weight:var(--fw-bold)}
    .hero-card p{margin:0 0 14px;font-size:14px;color:#475569}
    .hero-card ul{margin:0;padding-left:18px;color:#475569;font-size:14px;display:grid;gap:8px}
    .hero-card .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

    /* Sections */
    section{padding:54px 0}
    .section-title{font-size:30px;font-weight:var(--fw-bold);margin:0 0 10px;color:var(--dark)}
    .section-sub{font-size:16px;color:var(--text-light);max-width:760px;margin:0 0 26px;line-height:1.65}



/* Highlight service descriptions (intro text under each service title) */
.service-desc-highlight{
  position:relative;
  z-index:0;
  max-width:100%;
  background:linear-gradient(90deg, rgba(16,185,129,0.20), rgba(16,185,129,0.10));
  border:1px solid rgba(5,150,105,0.25);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:0 22px 46px -34px rgba(5,150,105,0.95);
  overflow:hidden;
}
.service-desc-highlight::before{
  content:"";
  position:absolute;
  inset:-50px -70px;
  background:
    radial-gradient(280px 170px at 18% 28%, rgba(16,185,129,0.38), transparent 62%),
    radial-gradient(300px 190px at 82% 70%, rgba(34,197,94,0.22), transparent 65%);
  pointer-events:none;
  z-index:-1;
}

.muted{background:var(--muted)}

    /* Services overview cards */
    .services-grid{display:grid;grid-template-columns:1fr;gap:18px}
    @media(min-width:620px){.services-grid{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:1020px){.services-grid{grid-template-columns:repeat(3,1fr)}}
    .card{background:#fff;border:1px solid var(--ring);border-radius:16px;overflow:hidden;box-shadow:0 6px 10px -6px rgba(0,0,0,0.18);transition:transform .18s}

    /* Highlight service items */
    .bg-services .services-grid .card{
      background:linear-gradient(180deg,#ecfdf5 0%,#ffffff 78%);
      border-color:rgba(5,150,105,0.28);
      box-shadow:0 18px 28px -22px rgba(5,150,105,0.65), 0 6px 10px -6px rgba(0,0,0,0.18);
    }
    .bg-services .services-grid .card:hover{
      transform:translateY(-4px);
      box-shadow:0 22px 34px -24px rgba(5,150,105,0.75), 0 10px 16px -10px rgba(0,0,0,0.20);
    }
    .card:hover{transform:translateY(-3px)}
    .card-img{height:190px;background:#e2e8f0;overflow:hidden;position:relative}
    .card-img img{width:100%;height:100%;object-fit:cover;display:block}
    .card-icon{
      position:absolute;
      top:12px;left:12px;
      width:40px;height:40px;border-radius:999px;
      background:rgba(255,255,255,0.95);
      border:1px solid rgba(226,232,240,0.9);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 8px 16px rgba(0,0,0,0.18);
    }
    .card-body{padding:18px}
    .card h3{margin:0 0 8px;font-size:18px;font-weight:var(--fw-bold)}
    .card p{margin:0;font-size:14px;color:var(--text-light)}
    .card a.block-link{display:block}
    .mini-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
    .mini-links a{font-size:13px;font-weight:var(--fw-semibold);color:var(--brand);background:#ecfdf5;border:1px solid rgba(5,150,105,0.25);border-radius:999px;padding:9px 13px;box-shadow:0 10px 18px -18px rgba(5,150,105,0.65)}
    .mini-links a:hover{background:#d1fae5}
/* TNSG-inspired home Services cards */
.tnsg-services-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:740px){.tnsg-services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.tnsg-services-grid{grid-template-columns:repeat(3,1fr)}}

.tnsg-card{
  background:#fff;
  border:1px solid rgba(148,163,184,.50);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 34px -26px rgba(2,6,23,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bg-services .tnsg-card{
  background:linear-gradient(180deg,#ecfdf5 0%,#ffffff 72%);
  border-color:rgba(5,150,105,0.26);
  box-shadow:0 20px 36px -30px rgba(5,150,105,0.40), 0 18px 34px -26px rgba(2,6,23,.30);
}
.tnsg-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 52px -36px rgba(2,6,23,.45);
  border-color:rgba(5,150,105,.34);
}
.tnsg-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.tnsg-img{height:250px;background:#e2e8f0;overflow:hidden;position:relative}
@media(max-width:520px){.tnsg-img{height:220px}}
.tnsg-img img{width:100%;height:100%;object-fit:cover;display:block}
.tnsg-icon{
  position:absolute;
  top:14px;left:14px;
  width:42px;height:42px;border-radius:999px;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(226,232,240,0.92);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 18px rgba(0,0,0,0.18);
  color:#059669;
}
.tnsg-body{
  padding:20px 20px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.tnsg-body h3{
  margin:0;
  font-size:20px;
  line-height:1.25;
  font-weight:var(--fw-bold);
  color:var(--dark);
}
.tnsg-body p{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--text-light);
}
@media(min-width:1020px){
  .tnsg-body h3{font-size:24px}
  .tnsg-body p{font-size:16px}
}
.tnsg-cta{
  margin-top:auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  column-gap:15px;
  row-gap:15px;
  justify-content:flex-start;
  font-weight:var(--fw-semibold);
  color:var(--brand);
}
.tnsg-arrow{
  width:46px;
  height:16px;
  transform:translateX(-30px);
  transition:transform 0.4s ease;
}
.tnsg-card:hover .tnsg-arrow{transform:translateX(0px)}
.tnsg-arrow .line{
  transform:scaleX(0);
  transform-origin:center right;
  transition:transform 0.4s ease;
}
.tnsg-card:hover .tnsg-arrow .line{transform:scaleX(1)}

    /* Service detail sections */
    .detail-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
    @media(min-width:960px){.detail-grid{grid-template-columns:1fr 1fr;gap:34px}}
    .detail-box{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:20px}
    .detail-box h3{margin:0 0 10px;font-size:18px;font-weight:var(--fw-bold)}
    .detail-box ul{margin:0;padding-left:18px;color:#475569;font-size:14px;display:grid;gap:8px}
    .kpi-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
    @media(min-width:620px){.kpi-row{grid-template-columns:repeat(3,1fr)}}
    .kpi{border:1px solid var(--ring);border-radius:14px;padding:14px;background:#fff}
    .kpi .t{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.4px;font-weight:var(--fw-bold)}
    .kpi .v{font-size:14px;color:var(--dark);font-weight:var(--fw-bold);margin-top:4px}

    /* Work */
    .case-grid{display:grid;grid-template-columns:1fr;gap:18px}
    @media(min-width:760px){.case-grid{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:1100px){.case-grid{grid-template-columns:repeat(3,1fr)}}
    .case-item{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--ring)}
    .case-meta{padding:16px}
    .case-loc{color:var(--brand);font-weight:var(--fw-bold);font-size:12px;text-transform:uppercase;margin-bottom:6px;display:block}
    .case-meta h3{margin:0 0 8px;font-size:16px;font-weight:var(--fw-bold)}
    .case-meta p{margin:0;font-size:14px;color:var(--text-light)}

    /* TikTok Manual (ADDED FROM OLD VERSION) */
    .video-grid{display:grid;gap:16px;margin-top:20px}
    @media(min-width:768px){.video-grid{grid-template-columns:repeat(3,1fr)}}
    .video-wrapper{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:9/16;position:relative}
    .video-wrapper video{width:100%;height:100%;object-fit:cover;display:block}

    /* FAQ */
    details{
      background:#fff;
      border:1px solid var(--ring);
      border-radius:12px;
      margin-bottom:12px;
      padding:14px 16px;
      box-shadow:0 14px 34px rgba(11,18,33,.08);
      transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    }
    details:hover{
      box-shadow:0 18px 44px rgba(11,18,33,.12);
      transform:translateY(-1px);
      border-color:rgba(0,0,0,.14);
    }
    details[open]{
      box-shadow:0 20px 54px rgba(11,18,33,.14);
      border-color:rgba(0,0,0,.16);
    }
    summary{font-weight:var(--fw-semibold);letter-spacing:0.1px;text-rendering:optimizeLegibility;display:flex;justify-content:space-between;list-style:none;color:var(--text);cursor:pointer}
    details p{margin:10px 0 0;color:var(--text-light);font-size:14px;line-height:1.65}
    summary::-webkit-details-marker{display:none}

    /* Contact */
    .contact-sec{background:linear-gradient(to bottom, #f8fafc, #fff)}
    .form-box{background:#fff;padding:22px;border-radius:16px;border:1px solid rgba(71,85,105,.35);box-shadow:0 20px 55px -30px rgba(2,6,23,.35), 0 10px 22px -14px rgba(2,6,23,.22), 0 0 0 1px rgba(2,6,23,.06)}
    .form-group{margin-bottom:14px}
    .form-group label{display:block;font-size:14px;font-weight:var(--fw-bold);margin-bottom:6px;color:var(--text)}
    .form-input{width:100%;padding:12px;border:1px solid rgba(71,85,105,.35);border-radius:10px;font-size:15px;color:var(--text);background:#f8fafc;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
    .form-input::placeholder{color:#64748b}
    .form-input:focus{outline:none;border-color:rgba(5,150,105,.70);background:#fff;box-shadow:0 0 0 4px rgba(5,150,105,.20)}
    .fine{font-size:13px;color:#64748b;margin-top:10px}

    /* Footer */
    footer{background:var(--dark);color:#94a3b8;padding:38px 0;font-size:14px}
    .footer-flex{display:flex;flex-direction:column;gap:18px}
    @media(min-width:860px){.footer-flex{flex-direction:row;justify-content:space-between;align-items:center}}
    footer a{color:#cbd5e1}
    footer a:hover{color:#fff}

    /* Floating CTA */
    .fab{
      position:fixed;
      bottom:22px;right:22px;
      background:var(--brand);color:#fff;
      padding:14px 18px;border-radius:999px;
      font-weight:var(--fw-bold);font-size:15px;
      border:0;cursor:pointer;
      box-shadow:0 10px 24px rgba(5,150,105,0.35);
      z-index:90;
      transition:transform .18s, box-shadow .18s, background .18s;
      animation:pulse-ring 2s infinite;
    }
    .fab:hover{transform:translateY(-2px);background:var(--brand-hover);box-shadow:0 14px 30px rgba(5,150,105,0.55)}
    @keyframes pulse-ring{
      0%{box-shadow:0 0 0 0 rgba(5,150,105,0.55)}
      70%{box-shadow:0 0 0 10px rgba(5,150,105,0)}
      100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}
    }

    /* Mobile sticky split contact bar */
    .mobile-sticky{
      display:none;
      position:fixed;
      left:12px;
      right:12px;
      bottom:12px;
      z-index:96;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(226,232,240,0.22);
      background:rgba(11,18,33,0.92);
      backdrop-filter:blur(10px);
      box-shadow:0 18px 40px rgba(0,0,0,0.35);
    }
    .msc-btn{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:14px 10px;
      font-weight:var(--fw-bold);
      font-size:15px;
      color:#fff;
      gap:8px;
      min-height:48px;
    }
    .msc-call{background:var(--brand)}
    .msc-call:hover{background:var(--brand-hover)}
    .msc-msg{background:#0f172a}
    .msc-msg:hover{background:#111c33}
    .msc-btn + .msc-btn{border-left:1px solid rgba(226,232,240,0.22)}

    /* Header mobile phone */
    .mobile-phone{display:none;align-items:center;justify-content:center;gap:8px}

    @media(max-width:979px){
      .mobile-sticky{display:none}
      .mobile-sticky.is-visible{display:flex}
      /* prevent overlap with sticky bar + safe area */
      body{padding-bottom:env(safe-area-inset-bottom)}
      body.sticky-on{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
      /* avoid double CTAs on mobile */
      .fab{display:none}
      /* show phone in header */
      .mobile-phone{
        display:inline-flex;
        padding:8px 10px;
        border-radius:999px;
        border:1px solid #334155;
        background:#0f172a;
        color:#fff;
        font-weight:var(--fw-bold);
        font-size:13px;
        white-space:nowrap;
      }
    }
    @media(max-width:420px){
      .msc-btn{font-size:14px;padding:13px 8px}
      .mobile-phone{font-size:12px;padding:7px 9px}
    }

    /* Modal */
    .modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
    .modal-panel{max-width:480px;width:100%;background:#fff;border-radius:18px;padding:22px;position:relative;box-shadow:0 22px 70px rgba(0,0,0,0.22)}
    .modal-close{position:absolute;top:14px;right:14px;border:0;background:none;font-size:24px;color:#94a3b8;cursor:pointer}
    .modal-close:hover{color:#0f172a}

    /* Helpers */
    .grid-two{display:grid;grid-template-columns:1fr;gap:18px}
    @media(min-width:980px){.grid-two{grid-template-columns:1.05fr 0.95fr;gap:34px}}
  

/* SEO content additions */
.trust-strip{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.trust-strip span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:8px 10px;border-radius:999px;font-size:.9rem}
.areas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:18px}
.areas-grid h3{margin:0 0 6px}

    /* Animated photo backgrounds (subtle) */
    .section-photo{position:relative;overflow:hidden}
    .section-photo::before{
      content:"";
      position:absolute;
      inset:-60px;
      background-image:var(--bg-photo);
      background-size:cover;
      background-position:center;
      opacity:0.12;
      filter:blur(14px) saturate(1.05);
      transform:scale(1.12);
      will-change:transform, background-position;
      animation:bg-pan 22s ease-in-out infinite alternate;
      pointer-events:none;
    }
    .section-photo::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(to bottom, rgba(255,255,255,0.86), rgba(255,255,255,0.93));
      pointer-events:none;
    }
    .section-photo > .container{position:relative;z-index:1}
    .section-photo.bg-services{--bg-photo:url('work/Exterior_siding.jpeg')}
    .section-photo.bg-work{--bg-photo:url('work/Old_silicone_removal_before_after.jpeg')}
    .section-photo.bg-faq{--bg-photo:url('work/Bathrooms_kitchens.jpeg')}
    .section-photo.bg-contact{--bg-photo:url('work/Window_door_re-caulking.jpeg')}
    .section-photo.bg-process{--bg-photo:url('work/Foam_insulation_air_sealing.jpg')}
    /* Process steps: blue highlight/glow */
    #process .services-grid .card{
      background:rgba(37,99,235,0.10);
      border:1px solid rgba(37,99,235,0.22);
      box-shadow:0 14px 30px -22px rgba(37,99,235,0.65);
      backdrop-filter: blur(6px);
    }
    #process .services-grid .card:hover{
      box-shadow:0 18px 38px -24px rgba(37,99,235,0.80);
      border-color: rgba(37,99,235,0.32);
    }
    #process .services-grid h3{color:#0b1221;}
    #process .services-grid p{color:#0b1221;}

    .section-photo.bg-bath{--bg-photo:url('assets/bg/bg-bath.jpg')}
    .section-photo.bg-exterior{--bg-photo:url('assets/bg/bg-exterior.jpg')}
    .section-photo.bg-fire{--bg-photo:url('assets/bg/bg-fire.jpg')}
    .section-photo.bg-areas{--bg-photo:url('assets/bg/bg-areas.jpg')}

/* Areas block - light single-tone blue highlight */
.section-photo.bg-areas{color:inherit}
.section-photo.bg-areas::after{
  background:rgba(37,99,235,0.08);
}

/* Desktop: make the floating "Get a Quote" (former Message) button 2x bigger */
@media(min-width:980px){
  /* Reduced by ~40% */
  .fab{padding:17px 22px;font-size:18px}
}

/* Mobile hero image: ensure it never crops (override comes AFTER base rules) */
@media(max-width:560px){
  .hero-card.hero-card-media{aspect-ratio:auto;min-height:0}
  .hero-card.hero-card-media picture{height:auto}
  .hero-card-img{height:auto;object-fit:contain;object-position:center}
}
.section-photo.bg-areas > .container{
  padding:34px 18px;
  border-radius:22px;
  background:rgba(37,99,235,0.06);
  border:1px solid rgba(37,99,235,0.16);
  box-shadow:0 14px 40px rgba(2,6,23,0.08);
}
.section-photo.bg-areas .section-sub{color:rgba(15,23,42,0.82)}
.section-photo.bg-areas .areas-grid > div{
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(37,99,235,0.14);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(2,6,23,0.08);
}

.section-photo.bg-areas .areas-grid > div{
  padding:16px 16px 14px;
}
.section-photo.bg-areas .areas-grid h3{
  font-size:18px;
  line-height:1.15;
}
.section-photo.bg-areas .areas-grid p{
  margin:0;
  line-height:1.55;
  overflow-wrap:anywhere;
}
@media (max-width: 980px){
  .areas-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (max-width: 560px){
  .areas-grid{grid-template-columns:1fr}
}
.section-photo.bg-areas .areas-grid h3{color:#0b1221}
.section-photo.bg-areas .areas-grid p{color:rgba(15,23,42,0.82)}
.section-photo.bg-areas .note{color:rgba(15,23,42,0.82)}
.section-photo.bg-areas a{color:inherit}
.section-photo.bg-areas a:hover{opacity:.92}


/* Areas section - photo layout (matches new design) */
.section-photo.bg-areas > .container.areas-feature{
  position:relative;
  padding:44px 26px;
  border-radius:26px;
  background:rgba(37,99,235,0.06);
  border:1px solid rgba(37,99,235,0.14);
  box-shadow:0 18px 60px rgba(2,6,23,0.10);
  overflow:hidden;
}
.section-photo.bg-areas > .container.areas-feature::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.35;
  pointer-events:none;
}
.section-photo.bg-areas > .container.areas-feature::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side, rgba(37,99,235,0.14), transparent 70%),
    radial-gradient(closest-side, rgba(16,185,129,0.10), transparent 70%);
  filter: blur(18px);
  opacity:.8;
  pointer-events:none;
}
.section-photo.bg-areas .areas-feature > *{position:relative; z-index:1;}

.areas-top{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:34px;
  align-items:center;
  margin-bottom:22px;
}
.areas-photo-wrap{
  position:relative;
  border-radius:22px;
  padding:12px;
}
.areas-photo-frame{
  position:absolute;
  inset:10px;
  border-radius:20px;
  box-shadow:0 22px 70px rgba(2,6,23,0.22);
  background:rgba(2,6,23,0.06);
}
.areas-photo{
  display:block;
  width:100%;
  height:100%;
  max-height:420px;
  object-fit:cover;
  border-radius:18px;
  border:10px solid rgba(2,6,23,0.18);
  box-shadow:0 18px 55px rgba(2,6,23,0.20);
  position:relative;
  z-index:1;
}
.areas-copy .section-title{margin:0 0 10px 0;}
.areas-copy .section-sub{margin:0 0 14px 0;}
.areas-lead{
  margin:0 0 18px 0;
  color:rgba(15,23,42,0.82);
  line-height:1.7;
}
.section-photo.bg-areas .areas-grid{
  margin-top:18px;
}
.section-photo.bg-areas .areas-grid > div{
  background:rgba(255,255,255,0.86);
  border:1px solid rgba(37,99,235,0.16);
  border-radius:18px;
  box-shadow:0 14px 34px rgba(2,6,23,0.10);
  padding:18px 18px 16px;
}
.section-photo.bg-areas .areas-grid h3{
  font-size:18px;
  margin:0 0 10px 0;
}
.section-photo.bg-areas .areas-grid p{
  margin:0;
  line-height:1.6;
  overflow-wrap:anywhere;
}
@media (max-width: 980px){
  .areas-top{grid-template-columns:1fr; gap:18px;}
  .areas-photo{max-height:360px;}
}
@media (max-width: 640px){
  .section-photo.bg-areas > .container.areas-feature{padding:28px 14px; border-radius:20px;}
  .areas-photo{border-width:8px;}
}

@media (max-width: 640px){
  .section-photo.bg-areas > .container{padding:26px 14px;border-radius:18px}
}
}

    .section-photo.bg-asmr{--bg-photo:url('assets/bg/bg-asmr.jpg')}

    @keyframes bg-pan{
      0%{transform:scale(1.12) translate3d(0,0,0);background-position:50% 50%}
      100%{transform:scale(1.28) translate3d(-2%, -2%, 0);background-position:55% 45%}
    }
    @media (prefers-reduced-motion: reduce){
      .section-photo::before{animation:none}
    }
    .contact-sec.section-photo{background:transparent}


    /* Full-width green highlight for list items (better readability) */
    .hero-card ul,
    .detail-box ul{
      list-style:none !important;
      margin:0 !important;
      padding:0 !important;
    }
    .hero-card ul li,
    .detail-box ul li{
      position:relative;
      padding:10px 12px 10px 44px;
      border-radius:12px;
      background:rgba(5,150,105,0.10);
      border:1px solid rgba(5,150,105,0.18);
      color:#0f172a;
    }
    .hero-card ul li::before,
    .detail-box ul li::before{
      content:"";
      position:absolute;
      left:12px;
      top:50%;
      width:20px;
      height:20px;
      margin-top:-10px;
      border-radius:999px;
      background:var(--brand);
      border:1px solid rgba(5,150,105,0.65);
      box-shadow:0 10px 18px -12px rgba(5,150,105,0.75);
    }
    .hero-card ul li::after,
    .detail-box ul li::after{
      content:"";
      position:absolute;
      left:22px;
      top:50%;
      width:7px;
      height:12px;
      border-right:2px solid #fff;
      border-bottom:2px solid #fff;
      transform:translate(-50%, -55%) rotate(45deg);
      box-sizing:border-box;
    }


/* Areas title highlight - subtle */
.bg-areas .section-title{
  display:block;
  width:100%;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(37,99,235,0.10);
  border:1px solid rgba(37,99,235,0.18);
  color:#0b1221;
  box-shadow:0 10px 24px rgba(2,6,23,0.08);
  margin:0 0 14px;
}
.bg-areas .section-sub{margin-top:0}
@media (max-width:560px){
  .bg-areas .section-title{font-size:24px;padding:12px 14px;border-radius:16px}
}
}


/* === Home: remove services mini chips handled in HTML === */

/* Stronger emphasis for service cards on home */
#services .card{
  box-shadow: 0 18px 44px -30px rgba(2,6,23,0.55), 0 10px 24px -18px rgba(2,6,23,0.25);
  border: 1px solid rgba(148,163,184,0.28);
}
#services .card:hover{
  box-shadow: 0 24px 60px -34px rgba(2,6,23,0.65), 0 14px 30px -22px rgba(2,6,23,0.28);
  transform: translateY(-2px);
}

/* FAQ -> darkening gradient towards bottom */
.section-photo.bg-faq::after{
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.92) 0%,
    rgba(235,245,255,0.94) 45%,
    rgba(11,18,32,0.86) 100%);
}

/* Continue dark theme into Contact so page bottom becomes black */
.contact-sec{background: transparent;}
.section-photo.bg-contact::after{
  background: linear-gradient(to bottom,
    rgba(11,18,32,0.82) 0%,
    rgba(5,8,15,0.98) 100%);
}
#contact .section-title,
#contact .section-sub,
#contact .muted-sub,
#contact p{color:#e2e8f0;}
#contact .section-title{color:#fff;}


/* Services dropdown */
.nav-item.has-dropdown{position:relative}
.nav-drop-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; cursor:pointer;
  color:#e5e7eb; font:inherit; font-weight:600;
  padding:10px 12px; border-radius:14px;
}
.nav-drop-btn .chev{font-size:12px; opacity:.85; transition:transform .18s ease}
.nav-drop-btn:focus-visible{outline:2px solid rgba(59,130,246,.55); outline-offset:2px}
.nav-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; left:auto;
  min-width:260px; max-width:calc(100vw - 24px);
  padding:10px;
  background:rgba(6,11,24,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.38);
  display:none; z-index:999;
  backdrop-filter: blur(10px);
}
.nav-dropdown a{
  display:block; padding:12px 12px;
  color:#e5e7eb; text-decoration:none;
  border-radius:12px; font-weight:600;
}
.nav-dropdown a:hover{background:rgba(255,255,255,.08)}
.nav-item.has-dropdown.open .nav-dropdown{display:block}
.nav-item.has-dropdown.open .nav-drop-btn .chev{transform:rotate(180deg)}


@media (max-width: 979px){
  .service-hero-actions a:nth-child(1),
  .service-hero-actions a:nth-child(2){display:none !important}
  .service-hero-actions{margin-top:12px}
  .service-hero-actions a:nth-child(3){
    flex:1 1 100% !important;
    width:100% !important;
    min-width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }
}

/* Mobile accordion in menu */
.mobile-accordion{border:0;border-radius:0;background:transparent}
.mobile-accordion summary{
  list-style:none;cursor:pointer;
  padding:14px 20px;
  color:#cbd5e1;
  font-size:16px;
  font-weight:600;
  border-bottom:1px solid #1e293b;
}
.mobile-accordion summary::-webkit-details-marker{display:none}
.mobile-accordion[open] summary{color:#ffffff}
.mobile-sub{padding:6px 0 10px}
.mobile-sub a{
  display:block;
  padding:12px 20px;
  color:#cbd5e1;
  font-size:15px;
  border-bottom:1px solid #1e293b;
  text-decoration:none;
}


/* Mobile: soften muted sections */
@media(max-width:979px){
  .muted{background:linear-gradient(to bottom, #eef2f7, #f7fafc);}
}


/* === NAV: Mobile menu unified style (no extra highlight blocks) === */
@media (max-width: 979px){
  .mobile-accordion{
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
  }
  .mobile-accordion summary{
    padding:18px 0 !important;
    font-weight:700 !important;
    color:#e5e7eb !important;
  }
  .mobile-accordion summary:active{opacity:.9}
/* Mobile menu: ensure Services aligns with other items */
#mobileMenu .mobile-accordion > summary{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:14px 20px !important;
}
#mobileMenu .mobile-sub a{
  box-sizing:border-box;
  padding:12px 20px !important;
}

  .mobile-sub{
    padding:0 0 6px !important;
    gap:0 !important;
    background:transparent !important;
  }
  .mobile-sub a{
    display:block !important;
    background:transparent !important;
    padding:14px 20px !important;
    border-radius:0 !important;
    color:#cbd5e1 !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
  }
  .mobile-sub a:first-child{border-top:1px solid rgba(255,255,255,.10) !important;}
}

/* === NAV: Desktop dropdown should open directly under Services === */
.nav-item.has-dropdown{position:relative}
.nav-dropdown{
  left:0 !important;
  right:auto !important;
  top:calc(100% + 8px) !important;
  max-width:calc(100vw - 24px) !important;
}


/* trust ribbon removed */
.trust-ribbon{display:none!important}

/* === Overrides: Video + Areas + Fade (Feb 2026) === */
.video-section{padding:54px 0}
.video-section .section-title{color:var(--dark)}
.video-section .section-sub{color:var(--text-light)}
.video-panel{
  margin:18px auto 0 auto;
  max-width:1120px;
  background:rgba(255,255,255,0.92) !important;
  border:1px solid rgba(148,163,184,.55);
  border-radius:22px;
  padding:18px;
  box-shadow:0 22px 70px rgba(2,6,23,0.14);
}
.video-grid{margin-top:0}
.video-wrapper{
  background:#0b1221 !important;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:9/16;
  position:relative;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 18px 46px rgba(2,6,23,0.25);
}

/* Service Area: light background like the rest of the site */
.section-photo.bg-areas::after{
  background:linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.96)) !important;
}
.section-photo.bg-areas > .container.areas-feature{
  background:rgba(255,255,255,0.92) !important;
  border:1px solid rgba(148,163,184,.55) !important;
  box-shadow:0 22px 70px rgba(2,6,23,0.14) !important;
}
.bg-areas .section-title{
  background:rgba(255,255,255,0.92) !important;
  border:1px solid rgba(148,163,184,.55) !important;
  box-shadow:0 14px 34px rgba(2,6,23,0.10) !important;
}

/* From Service Area: background fades darker to the bottom */
.fade-from-areas{
  background:linear-gradient(to bottom, #ffffff 0%, #ffffff 18%, #f8fafc 46%, #111c33 82%, #0b1221 100%);
}
.fade-from-areas .muted{background:transparent !important}
.fade-from-areas #faq,
.fade-from-areas #contact{background:transparent !important}
.fade-from-areas #faq.section-photo::before,
.fade-from-areas #faq.section-photo::after,
.fade-from-areas #contact.section-photo::before,
.fade-from-areas #contact.section-photo::after{display:none !important}
.fade-from-areas #faq > .container,
.fade-from-areas #contact > .container{
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(148,163,184,.55);
  border-radius:26px;
  box-shadow:0 22px 70px rgba(2,6,23,0.14);
  padding:44px 26px;
}
@media (max-width: 640px){
  .fade-from-areas #faq > .container,
  .fade-from-areas #contact > .container{padding:28px 14px;border-radius:20px}
  .video-panel{padding:14px;border-radius:18px}
  .video-wrapper{border-radius:16px}
}



    /* Contact section (home): improve text contrast on light panel */
.fade-from-areas #contact .section-title{color:#0b1221 !important;}
.fade-from-areas #contact .section-sub{color:#475569 !important;}


/* SEO architecture additions */
.breadcrumbs{padding:calc(var(--header-h) + 14px) 0 8px;background:#f8fafc;border-bottom:1px solid rgba(226,232,240,.85)}
.breadcrumbs .container{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:#64748b}
.breadcrumbs a{color:#0f766e;font-weight:700}
.breadcrumb-sep{opacity:.55}
.trust-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
.trust-card{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:22px;box-shadow:0 10px 22px -18px rgba(0,0,0,.28)}
.trust-card h3{margin:0 0 10px;font-size:18px;font-weight:900;color:#0b1221}
.trust-card p{margin:0;color:#475569;line-height:1.75;font-size:14px}
.split-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.local-links{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.local-links{grid-template-columns:repeat(2,1fr)}}
.local-link-card{display:block;background:#fff;border:1px solid var(--ring);border-radius:16px;padding:18px;box-shadow:0 10px 22px -18px rgba(0,0,0,.28)}
.local-link-card h3{margin:0 0 6px;font-size:18px;color:#0b1221}
.local-link-card p{margin:0;color:#475569;line-height:1.7;font-size:14px}
.kpi-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media(min-width:900px){.kpi-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:18px;text-align:center}
.kpi strong{display:block;font-size:26px;color:#0f766e;line-height:1}
.kpi span{display:block;margin-top:8px;color:#475569;font-size:13px;font-weight:700}
.note-list{margin:0;padding-left:18px;color:#475569;font-size:14px;display:grid;gap:8px}


.quote-trust-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0 0}
@media(min-width:760px){.quote-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust-card-compact{padding:18px}
.quote-steps{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.quote-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quote-step{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:16px;box-shadow:0 10px 22px -18px rgba(0,0,0,.28)}
.quote-step strong{display:block;font-size:14px;color:#0f766e;margin-bottom:6px}
.quote-step span{display:block;color:#475569;font-size:14px;line-height:1.7}
.quote-assurance{margin-top:10px;font-size:13px;line-height:1.65;color:#475569}
.quote-assurance a{font-weight:800;color:var(--brand)}


body.modal-open{overflow:hidden}
.form-input.input-error{border-color:#dc2626 !important;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.form-box button[disabled], .modal-panel button[disabled]{opacity:.7;cursor:not-allowed}
.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.cta-note{margin:10px 0 0;color:#cbd5e1;font-size:14px;line-height:1.7;max-width:620px}
.cta-note strong{color:#fff}
.lead-strip{padding-top:18px;padding-bottom:18px}
.lead-strip-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.lead-strip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lead-mini{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:16px 18px;box-shadow:0 10px 22px -18px rgba(0,0,0,.28)}
.lead-mini strong{display:block;margin:0 0 6px;color:#0b1221;font-size:15px;font-weight:900}
.lead-mini span{display:block;color:#475569;font-size:14px;line-height:1.7}
@media(max-width:979px){
  .hero-cta-row .btn-outline{width:100%}
}

/* proof + authority batch */
@media(min-width:1180px){.trust-grid.trust-grid-4{grid-template-columns:repeat(4,1fr)}}