:root{
    --black:#0a0a0a;
    --black-2:#141414;
    --text:#fafafa;
    --text-2:#9a9a9a;
    --text-3:#666;
    --yellow:#fcd80b;
    --line:#1c1c1c;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{
    -webkit-text-size-adjust:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
    background:var(--black);
  }
  body{
    margin:0;
    font-family:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background:var(--black);
    color:var(--text);
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  ul{margin:0;padding:0;list-style:none}
  button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

  h1,h2,h3,h4{
    font-family:"Inter", sans-serif;
    font-weight:700;
    letter-spacing:-0.03em;
    line-height:.95;
    margin:0;
    color:inherit;
  }

  .mono{
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .wrap{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:0 20px;
  }
  @media (min-width:768px){.wrap{padding:0 32px}}
  @media (min-width:1024px){.wrap{padding:0 48px}}

  /* === PHOTO PLACEHOLDER SYSTEM === */
  .photo{
    position:relative;
    background:linear-gradient(135deg, #1f1f1f 0%, #0d0d0d 100%);
    overflow:hidden;
  }
  .photo::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 12px);
    pointer-events:none;
  }
  .photo .ph-label{
    position:absolute; top:14px; right:14px;
    font-family:"JetBrains Mono", monospace;
    font-size:10px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
    padding:4px 8px;
    background:rgba(0,0,0,.6);
    border:1px solid rgba(255,255,255,.08);
    border-radius:3px;
    z-index:2;
  }
  .photo .ph-center{
    position:absolute;
    top:24px; left:50%;
    transform:translateX(-50%);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center;
    padding:0;
    z-index:1;
    opacity:.18;
    max-width:80%;
  }
  .photo .ph-icon{display:none;}
  .photo .ph-title{
    font-family:"Inter", sans-serif;
    font-weight:600;
    font-size:13px;
    color:rgba(255,255,255,.5);
    letter-spacing:-.01em;
    margin:0;
  }
  .photo .ph-sub{
    margin-top:6px;
    font-family:"JetBrains Mono", monospace;
    font-size:10px;
    font-weight:500;
    letter-spacing:.04em;
    color:rgba(255,255,255,.25);
    text-transform:uppercase;
  }

  /* === EMERGENCY === */
  .emergency{
    background:var(--black);
    color:var(--text-3);
    font-family:"JetBrains Mono",monospace;
    font-weight:500;
    font-size:11px;
    letter-spacing:.04em;
    padding:11px 0;
    text-align:center;
  }
  .emergency .wrap{display:flex; align-items:center; justify-content:center; gap:8px;}
  .emergency .pulse{
    width:6px; height:6px; border-radius:50%;
    background:var(--yellow);
    box-shadow:0 0 0 0 var(--yellow);
    animation:pulse 1.8s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(252,216,11,.5)}
    70%{box-shadow:0 0 0 6px rgba(252,216,11,0)}
    100%{box-shadow:0 0 0 0 rgba(252,216,11,0)}
  }
  .emergency a{color:var(--yellow); font-weight:600; white-space:nowrap;}
  .emergency .sep{color:#333;}

  /* === NAV === */
  .nav{
    background:rgba(10,10,10,.85);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    position:sticky;
    top:0;
    z-index:60;
  }
  .nav .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
    gap:16px;
  }
  @media (min-width:1024px){.nav .wrap{padding:18px 48px;}}

  /* === BRANDMARK === */
  .brandmark{display:flex; align-items:center; flex-shrink:0; gap:10px;}
  .brandmark .brand-logo{
    display:block;
    height:48px; width:auto;
    max-width:220px;
  }
  @media (min-width:1024px){
    .brandmark .brand-logo{height:60px; max-width:280px;}
  }
  footer .brandmark .brand-logo{height:64px; max-width:300px;}
  .brandmark .mark{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    background:var(--yellow);
    color:var(--black);
    border-radius:4px;
    font-family:"Inter", sans-serif;
    font-weight:800;
    font-size:18px;
    letter-spacing:-.04em;
  }
  .brandmark .name{
    display:flex; flex-direction:column; line-height:1;
  }
  .brandmark .name strong{
    font-family:"Inter", sans-serif;
    font-weight:800;
    font-size:15px;
    letter-spacing:-.02em;
    color:var(--text);
  }
  .brandmark .name span{
    margin-top:3px;
    font-family:"JetBrains Mono", monospace;
    font-size:9px;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-3);
  }
  @media (min-width:1024px){
    .brandmark .mark{width:42px; height:42px; font-size:20px;}
    .brandmark .name strong{font-size:16px;}
  }

  .nav-desktop{display:none; gap:32px; align-items:center;}
  .nav-desktop a{
    font-weight:500;
    font-size:14px;
    color:var(--text-2);
    transition:color .15s;
  }
  .nav-desktop a:hover{color:var(--text);}

  .nav-actions{display:flex; align-items:center; gap:10px;}
  .nav-call{
    display:none;
    font-family:"JetBrains Mono", monospace;
    font-size:13px;
    color:var(--text);
    font-weight:500;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 22px;
    font-weight:600;
    font-size:14px;
    border-radius:4px;
    background:var(--yellow);
    color:var(--black);
    transition:opacity .15s, transform .15s;
    white-space:nowrap;
    cursor:pointer;
    line-height:1;
    letter-spacing:-.005em;
  }
  .btn:hover{opacity:.9;}
  .btn .arrow{transition:transform .15s;}
  .btn:hover .arrow{transform:translateX(3px);}
  .btn.outline{
    background:transparent;
    color:var(--text);
    border:1px solid rgba(255,255,255,.2);
  }
  .btn.outline:hover{border-color:var(--text); background:rgba(255,255,255,.05);}
  .btn.sm{padding:10px 16px; font-size:13px;}
  .btn.lg{padding:18px 28px; font-size:15px;}
  .btn.xl{padding:22px 34px; font-size:16px; border-radius:6px;}
  /* Yellow-fill hover for any xl button — outline variants flip text to black */
  .btn.xl:hover{
    background-color:#fde13d !important;
    color:#0a0a0a !important;
    border-color:#fde13d !important;
  }
  .btn.xl:hover .arrow{color:#0a0a0a !important;}

  /* hamburger */
  .hamburger{
    width:36px; height:36px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    border-radius:4px;
  }
  .hamburger span{
    display:block; width:20px; height:2px; background:var(--text); border-radius:0;
    transition:transform .3s, opacity .2s;
  }
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-sheet{
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:var(--black);
    z-index:55;
    transform:translateY(-100%);
    transition:transform .3s cubic-bezier(.6,0,.2,1);
    padding:96px 28px 32px;
    overflow-y:auto;
  }
  .nav-sheet.open{transform:translateY(0);}
  .nav-sheet a{
    display:block;
    padding:24px 0;
    font-weight:700;
    font-size:36px;
    line-height:1;
    letter-spacing:-.03em;
    border-bottom:1px solid var(--line);
  }
  .nav-sheet .sheet-cta{
    margin-top:32px;
    display:flex; flex-direction:column; gap:8px;
  }
  .nav-sheet .sheet-cta a{
    border:0;
    padding:16px 20px;
    border-radius:6px;
    font-size:15px;
    text-align:center;
    font-weight:600;
    line-height:1;
    border-bottom:0;
  }
  .nav-sheet .sheet-cta a.primary{background:var(--yellow); color:var(--black);}
  .nav-sheet .sheet-cta a.secondary{background:transparent; color:var(--text); border:1px solid var(--line);}

  /* === STICKY MOBILE BAR === */
  .sticky-mobile-cta{
    position:fixed;
    bottom:0; left:0; right:0;
    background:var(--black);
    border-top:1px solid var(--line);
    z-index:50;
    display:flex;
    padding:10px 12px;
    gap:8px;
    transform:translateY(0);
    transition:transform .25s cubic-bezier(.6,0,.2,1), opacity .2s;
    will-change:transform;
  }
  .sticky-mobile-cta.is-hidden{
    transform:translateY(110%);
    opacity:0;
    pointer-events:none;
  }
  .sticky-mobile-cta a{
    flex:1;
    text-align:center;
    padding:16px 12px;
    font-weight:600;
    font-size:14px;
    border-radius:4px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .sticky-mobile-cta a.call{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15);}
  .sticky-mobile-cta a.quote{background:var(--yellow); color:var(--black);}
  @media (min-width:1024px){.sticky-mobile-cta{display:none}}
  body{padding-bottom:72px;}
  @media (min-width:1024px){body{padding-bottom:0;}}

  /* === HERO — full-bleed photo === */
  .hero{
    position:relative;
    min-height:88vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
  }
  @media (min-width:1024px){
    .hero{min-height:92vh;}
  }
  .hero-photo{
    position:absolute; inset:0;
    z-index:0;
  }
  .hero-photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,.98) 100%);
    z-index:1;
  }
  .hero-photo .ph-center .ph-icon{width:60px; height:60px; font-size:18px;}
  .hero-photo .ph-center .ph-title{font-size:16px;}
  .hero-photo .ph-center .ph-sub{font-size:12px;}

  .hero .wrap{
    position:relative;
    z-index:2;
    padding-top:80px;
    padding-bottom:48px;
  }
  @media (min-width:1024px){
    .hero .wrap{padding-top:160px; padding-bottom:80px;}
  }

  .hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:32px;
    padding:8px 14px;
    background:rgba(252,216,11,.12);
    border:1px solid rgba(252,216,11,.3);
    border-radius:999px;
    backdrop-filter:blur(8px);
  }
  .hero-eyebrow .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--yellow);
    box-shadow:0 0 8px var(--yellow);
  }

  .hero h1{
    font-weight:800;
    font-size:clamp(56px, 12vw, 156px);
    line-height:.92;
    letter-spacing:-.045em;
    margin:0 0 28px;
    max-width:1100px;
  }
  .hero h1 .accent{color:var(--yellow);}

  .hero-sub{
    font-size:18px;
    line-height:1.5;
    color:rgba(255,255,255,.85);
    max-width:560px;
    margin:0 0 40px;
    font-weight:400;
  }
  @media (min-width:768px){.hero-sub{font-size:20px;}}

  /* FIX 3: Hero CTA — single primary button + tap-to-call line below (no competing buttons) */
  .hero-cta-row{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:flex-start;
  }
  .hero-call-line{
    font-family:"JetBrains Mono", monospace;
    font-size:13px;
    letter-spacing:.04em;
    color:var(--text-2);
    margin:0;
  }
  .hero-call-line a{
    color:var(--text);
    font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.2);
    padding-bottom:1px;
  }
  .hero-call-line a:hover{border-bottom-color:var(--yellow); color:var(--yellow);}

  /* === STATS BAR === */
  .stats-bar{
    background:var(--black-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .stats-bar .wrap{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:0;
    padding-top:0;
    padding-bottom:0;
  }
  @media (min-width:768px){
    .stats-bar .wrap{grid-template-columns:repeat(4, 1fr);}
  }
  .stat-item{
    padding:24px 16px;
    border-right:1px solid var(--line);
    text-align:left;
    overflow:hidden;
    min-width:0;
  }
  .stat-item:nth-child(2n){border-right:0;}
  @media (min-width:768px){
    .stat-item:nth-child(2n){border-right:1px solid var(--line);}
    .stat-item:nth-child(4n){border-right:0;}
    .stat-item{padding:36px 24px;}
  }
  .stat-item:nth-child(-n+2){border-bottom:1px solid var(--line);}
  @media (min-width:768px){.stat-item:nth-child(-n+2){border-bottom:0;}}
  .stat-item strong{
    display:block;
    font-weight:700;
    font-size:24px;
    line-height:1;
    letter-spacing:-.03em;
    color:var(--text);
    word-break:keep-all;
    overflow-wrap:break-word;
  }
  @media (min-width:768px){.stat-item strong{font-size:28px;}}
  @media (min-width:1024px){.stat-item strong{font-size:32px;}}
  .stat-item span{
    display:block;
    margin-top:10px;
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    font-size:11px;
    letter-spacing:.08em;
    color:var(--text-3);
    text-transform:uppercase;
  }

  /* === SECTION HEAD === */
  .section{
    padding:80px 0;
  }
  @media (min-width:1024px){.section{padding:128px 0;}}

  .section-head{margin-bottom:48px; max-width:900px;}
  @media (min-width:1024px){.section-head{margin-bottom:72px;}}

  .section-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--yellow);
    margin-bottom:20px;
  }
  .section-eyebrow .num{color:var(--text-3);}

  .section-title{
    font-weight:700;
    font-size:clamp(40px, 7vw, 80px);
    line-height:1;
    letter-spacing:-.04em;
    margin:0 0 24px;
  }
  .section-title .muted{color:var(--text-3);}

  .section-deck{
    font-size:18px;
    line-height:1.55;
    color:var(--text-2);
    max-width:580px;
    margin:0;
    font-weight:400;
  }

  /* === SERVICES === */
  .services{background:var(--black);}

  .services-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  @media (min-width:768px){.services-grid{grid-template-columns:repeat(2,1fr); gap:12px;}}
  @media (min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr); gap:16px;}}

  .svc-card{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    cursor:pointer;
    background:var(--black-2);
    border-radius:4px;
  }
  @media (min-width:768px){
    .svc-card{aspect-ratio:3/4;}
  }

  .svc-card .photo{
    position:absolute; inset:0;
    aspect-ratio:auto; min-height:0;
    background:transparent; border:0; border-radius:0;
  }
  .svc-card .photo img{display:block; width:100%; height:100%; object-fit:cover;}

  /* Hero figures that swap their <img> for an inline autoplay <video> */
  figure.hero-photo video.hero-video-inline,
  figure.photo video.hero-video-inline{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
  }
  .svc-card .photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.98) 100%);
    transition:background .3s;
  }
  .svc-card:hover .photo::after{
    background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.95) 100%);
  }

  .svc-content{
    position:absolute;
    inset:auto 0 0 0;
    padding:28px 24px 24px;
    z-index:2;
  }
  @media (min-width:1024px){.svc-content{padding:36px 32px 32px;}}

  .svc-card h3{
    font-weight:700;
    font-size:32px;
    line-height:1;
    letter-spacing:-.025em;
    margin:0 0 10px;
    color:var(--text);
  }
  @media (min-width:1024px){.svc-card h3{font-size:36px;}}
  .svc-card p{
    font-size:14px;
    line-height:1.5;
    margin:0 0 18px;
    color:rgba(255,255,255,.75);
    max-width:420px;
  }
  .svc-link{
    display:inline-flex; align-items:center; gap:6px;
    font-weight:600;
    font-size:13px;
    color:var(--yellow);
  }
  .svc-link span{transition:transform .2s;}
  .svc-card:hover .svc-link span:last-child{transform:translateX(4px);}

  /* === EMERGENCY BANNER === */
  .emergency-banner{
    position:relative;
    overflow:hidden;
    min-height:480px;
    display:flex;
    align-items:center;
  }
  @media (min-width:1024px){.emergency-banner{min-height:560px;}}
  .emergency-banner .photo{position:absolute; inset:0;}
  .emergency-banner .photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.4) 100%);
  }
  .emergency-banner .wrap{position:relative; z-index:2;}
  .emergency-banner .eb-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--yellow);
    margin-bottom:20px;
  }
  .emergency-banner .eb-eyebrow .pulse{
    width:8px; height:8px; border-radius:50%;
    background:var(--yellow);
    box-shadow:0 0 0 0 var(--yellow);
    animation:pulse 1.6s infinite;
  }
  .emergency-banner h2{
    font-weight:800;
    font-size:clamp(40px, 8vw, 88px);
    line-height:.95;
    letter-spacing:-.04em;
    margin:0 0 20px;
    max-width:760px;
  }
  .emergency-banner h2 .accent{color:var(--yellow);}
  .emergency-banner p{
    font-size:17px;
    line-height:1.5;
    color:rgba(255,255,255,.8);
    max-width:520px;
    margin:0 0 32px;
  }
  .emergency-banner .cta-row{display:flex; flex-direction:column; gap:10px;}
  @media (min-width:480px){.emergency-banner .cta-row{flex-direction:row;}}

  /* === COVERAGE === */
  .coverage{background:var(--black);}
  .coverage-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
    align-items:start;
  }
  @media (min-width:1024px){.coverage-grid{grid-template-columns:1fr 1fr; gap:80px;}}

  .neighborhoods{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 32px;
  }
  @media (min-width:640px){.neighborhoods{grid-template-columns:repeat(3,1fr);}}
  .neighborhoods li{
    padding:14px 0;
    font-weight:500;
    font-size:15px;
    color:var(--text);
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:8px;
    border-bottom:1px solid var(--line);
  }
  .neighborhoods .miles{
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    font-size:11px;
    color:var(--text-3);
    letter-spacing:.04em;
  }

  /* === REVIEWS === */
  .reviews{background:var(--black);}
  .reviews-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
  }
  @media (min-width:768px){.reviews-grid{grid-template-columns:repeat(2,1fr); gap:32px 40px;}}

  .review{
    padding:32px 0 0 0;
    border-top:2px solid var(--text);
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .review.placeholder{
    border-top:2px dashed rgba(252,216,11,.4);
  }
  .review.placeholder .review-text{
    color:var(--text-3);
    font-style:italic;
    font-size:15px;
    font-weight:400;
  }
  .review.placeholder .review-meta strong,
  .review.placeholder .review-meta span{
    color:var(--text-3);
  }
  .review .stars{color:var(--yellow); font-size:14px; letter-spacing:3px;}
  .review.placeholder .stars{opacity:.3;}
  .review-text{
    font-weight:500;
    font-size:18px;
    line-height:1.45;
    margin:0;
    letter-spacing:-.015em;
    color:var(--text);
  }
  .review-meta{
    margin-top:auto;
    padding-top:16px;
  }
  .review-meta strong{
    display:block;
    font-weight:600;
    font-size:14px;
    color:var(--text);
  }
  .review-meta span{
    display:block;
    margin-top:4px;
    font-family:"JetBrains Mono", monospace;
    font-size:11px;
    color:var(--text-3);
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  /* === FORM SECTION === */
  .form-section{
    background:var(--black-2);
    padding:80px 0;
  }
  @media (min-width:1024px){.form-section{padding:128px 0;}}

  .form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:start;
  }
  @media (min-width:1024px){.form-grid{grid-template-columns:1.1fr .9fr; gap:80px;}}

  .lead-form-wrap{
    background:var(--black);
    border:1px solid var(--line);
    border-radius:8px;
    padding:32px;
  }
  @media (min-width:768px){.lead-form-wrap{padding:40px;}}

  .form-head{
    display:flex; align-items:center; gap:8px;
    margin-bottom:8px;
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--yellow);
  }
  .form-head .dot{
    width:6px; height:6px; border-radius:50%; background:var(--yellow);
    box-shadow:0 0 8px var(--yellow);
  }
  .lead-form-wrap h3{
    font-weight:700;
    font-size:28px;
    line-height:1;
    letter-spacing:-.03em;
    margin:0 0 8px;
  }
  .lead-form-wrap > p{
    margin:0 0 28px;
    color:var(--text-2);
    font-size:14px;
  }
  .lead-form{display:flex; flex-direction:column; gap:10px;}
  .lead-form input, .lead-form select{
    width:100%;
    padding:16px;
    border:1px solid var(--line);
    background:var(--black-2);
    font-family:"Inter", sans-serif;
    font-size:15px;
    font-weight:500;
    color:var(--text);
    border-radius:4px;
    -webkit-appearance:none;
    appearance:none;
    transition:border-color .15s;
  }
  .lead-form input::placeholder{color:var(--text-3);}
  .lead-form input:focus, .lead-form select:focus{
    outline:none;
    border-color:var(--yellow);
  }
  .lead-form select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:40px;
  }
  .lead-form button{margin-top:8px; width:100%;}

  /* === FINAL CTA === */
  .final{
    position:relative;
    overflow:hidden;
    min-height:520px;
    display:flex;
    align-items:center;
    text-align:center;
  }
  @media (min-width:1024px){.final{min-height:640px;}}
  .final .photo{position:absolute; inset:0;}
  .final .photo::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,.95) 80%);
  }
  .final .wrap{position:relative; z-index:2;}
  .final h2{
    font-weight:800;
    font-size:clamp(48px, 9vw, 104px);
    line-height:.95;
    letter-spacing:-.04em;
    margin:0 auto 36px;
    max-width:900px;
  }
  .final h2 .accent{color:var(--yellow);}
  .final-row{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    max-width:380px;
    margin:0 auto;
  }
  @media (min-width:480px){.final-row{flex-direction:row; justify-content:center; max-width:none;}}
  .final-mini{
    margin-top:24px;
    font-family:"JetBrains Mono", monospace;
    font-size:11px;
    color:var(--text-3);
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  /* === FOOTER === */
  footer{
    padding:64px 0 32px;
    background:var(--black);
    border-top:1px solid var(--line);
  }
  .footer-grid{display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:48px;}
  @media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px;}}

  footer .brandmark{margin-bottom:18px;}
  footer .bio{
    color:var(--text-2);
    font-size:14px;
    line-height:1.55;
    margin:0;
    max-width:300px;
  }
  footer h5{
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    font-size:11px;
    color:var(--text-3);
    margin:0 0 18px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  footer ul li{
    padding:6px 0;
    font-weight:400;
    font-size:14px;
  }
  footer ul li a{color:var(--text-2);}
  footer ul li a:hover{color:var(--text);}
  .footer-bottom{
    border-top:1px solid var(--line);
    padding-top:24px;
    display:flex; flex-direction:column; gap:12px;
    font-family:"JetBrains Mono", monospace;
    font-weight:500;
    font-size:11px;
    color:var(--text-3);
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  @media (min-width:640px){.footer-bottom{flex-direction:row; justify-content:space-between; align-items:center;}}

  @media (min-width:1024px){
    .nav-desktop{display:flex;}
    .nav-call{display:inline;}
    .hamburger{display:none;}
  }

  /* ROOFING-FIRST BLOCK */
  .roofing-block{padding-top:96px; padding-bottom:64px;}
  @media (min-width:1024px){.roofing-block{padding-top:140px; padding-bottom:96px;}}

  .roofing-hero{position:relative;}
  .roofing-card{
    display:block;
    position:relative;
    overflow:hidden;
    background:var(--black-2);
    border-radius:6px;
    cursor:pointer;
    aspect-ratio:auto;
    min-height:560px;
  }
  @media (min-width:1024px){
    .roofing-card{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      min-height:640px;
    }
  }
  .roofing-card .photo{
    position:absolute; inset:0;
  }
  @media (min-width:1024px){
    .roofing-card .photo{
      position:relative; inset:auto;
      grid-column:1; height:100%;
    }
  }
  .roofing-card .photo img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; display:block;
  }
  .roofing-card .photo::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.98) 100%);
  }
  @media (min-width:1024px){
    .roofing-card .photo::after{
      background:linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.95) 100%);
    }
  }

  .roofing-content{
    position:absolute;
    inset:auto 0 0 0;
    padding:32px 24px 32px;
    z-index:2;
  }
  @media (min-width:1024px){
    .roofing-content{
      position:relative; inset:auto;
      grid-column:2;
      padding:48px 48px 48px 0;
      align-self:center;
      max-width:560px;
      margin-left:-80px;
    }
  }

  .roofing-tags{
    display:flex; flex-wrap:wrap; gap:6px;
    margin-bottom:20px;
  }
  .rtag{
    font-family:"JetBrains Mono", monospace;
    font-size:10px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    color:var(--text-2);
    background:rgba(255,255,255,.03);
  }

  .roofing-card h3{
    font-weight:700;
    font-size:36px;
    line-height:.95;
    letter-spacing:-.03em;
    margin:0 0 16px;
    color:var(--text);
  }
  @media (min-width:1024px){.roofing-card h3{font-size:48px;}}

  .roofing-card p{
    font-size:15px;
    line-height:1.5;
    color:var(--text-2);
    margin:0 0 24px;
    max-width:440px;
  }
  @media (min-width:1024px){.roofing-card p{font-size:16px;}}

  .roofing-proof{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px 12px;
    margin:0 0 24px;
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.1);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  @media (min-width:480px){.roofing-proof{grid-template-columns:repeat(4, 1fr);}}
  .roofing-proof .proof-item strong{
    display:block;
    font-weight:700;
    font-size:14px;
    color:var(--yellow);
    line-height:1;
    letter-spacing:-.01em;
  }
  .roofing-proof .proof-item span{
    display:block;
    margin-top:4px;
    font-family:"JetBrains Mono", monospace;
    font-size:9.5px;
    color:var(--text-3);
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  /* WHILE WE'RE UP THERE STRIP */
  .while-up-there{padding-top:0;}
  @media (min-width:1024px){.while-up-there{padding-top:48px;}}

  .while-up-there .svc-card{aspect-ratio:1/1;}
  @media (min-width:768px){.while-up-there .svc-card{aspect-ratio:3/4;}}

  /* MAINTENANCE PROGRAM — homepage teaser */
  .maintenance-block{padding-top:64px; padding-bottom:96px;}
  @media (min-width:1024px){.maintenance-block{padding-top:96px; padding-bottom:140px;}}

  .maint-card{
    background:var(--black-2);
    border-radius:6px;
    overflow:hidden;
    position:relative;
    display:grid;
    grid-template-columns:1fr;
  }
  @media (min-width:1024px){
    .maint-card{grid-template-columns:1.1fr .9fr;}
  }
  .maint-content{
    padding:36px 24px 36px;
    order:2;
  }
  @media (min-width:1024px){
    .maint-content{padding:64px 56px; align-self:center; order:1;}
  }
  .maint-photo{
    aspect-ratio:4/3;
    order:1;
  }
  @media (min-width:1024px){
    .maint-photo{aspect-ratio:auto; order:2;}
  }
  .maint-badge{
    display:inline-block;
    font-family:"JetBrains Mono", monospace;
    font-size:11px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--black);
    background:var(--yellow);
    padding:5px 10px;
    border-radius:3px;
    margin-bottom:20px;
  }
  .maint-content h2{
    font-weight:700;
    font-size:clamp(32px, 5.5vw, 56px);
    line-height:1;
    letter-spacing:-.035em;
    margin:0 0 16px;
    color:var(--text);
  }
  .maint-content h2 .accent{color:var(--yellow);}
  .maint-content > p{
    font-size:16px;
    line-height:1.55;
    color:var(--text-2);
    margin:0 0 28px;
    max-width:480px;
  }
  .maint-features{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px 12px;
    margin:0 0 28px;
    padding:24px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .maint-features div strong{
    display:block;
    font-weight:700;
    font-size:22px;
    color:var(--yellow);
    line-height:1;
    letter-spacing:-.025em;
  }
  .maint-features div span{
    display:block;
    margin-top:6px;
    font-family:"JetBrains Mono", monospace;
    font-size:10px;
    color:var(--text-3);
    letter-spacing:.06em;
    text-transform:uppercase;
  }

/* === MAINTENANCE PAGE — page hero === */
  .mp-hero{
    padding:64px 20px 40px;
    border-bottom:1px solid var(--line);
  }
  @media (min-width:1024px){.mp-hero{padding:96px 48px 64px;}}
  .mp-hero .wrap{max-width:880px; margin:0 auto;}
  .mp-hero .section-eyebrow{margin-bottom:20px;}
  .mp-hero h1{
    font-weight:800;
    font-size:clamp(44px, 9vw, 96px);
    line-height:.94;
    letter-spacing:-.04em;
    margin:0 0 24px;
    color:var(--text);
  }
  .mp-hero h1 .accent{color:var(--yellow);}
  .mp-hero p{
    font-size:17px;
    line-height:1.55;
    color:var(--text-2);
    max-width:640px;
    margin:0 0 28px;
  }
  @media (min-width:1024px){.mp-hero p{font-size:19px;}}

  /* === TIERS === */
  .tiers-section{padding:64px 20px;}
  @media (min-width:1024px){.tiers-section{padding:96px 48px;}}
  .tiers-section .wrap{max-width:1200px; margin:0 auto;}

  .tiers-head{margin-bottom:40px; max-width:680px;}
  @media (min-width:1024px){.tiers-head{margin-bottom:56px;}}
  .tiers-head h2{
    font-weight:700;
    font-size:clamp(32px, 5.5vw, 56px);
    line-height:1;
    letter-spacing:-.035em;
    margin:14px 0 14px;
  }
  .tiers-head h2 .muted{color:var(--text-3);}
  .tiers-head p{
    font-size:16px;
    line-height:1.55;
    color:var(--text-2);
    margin:0;
  }

  .tier-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  @media (min-width:768px){
    .tier-grid{
      grid-template-columns:repeat(3, 1fr);
      gap:20px;
      align-items:stretch;
    }
  }
  .tier{
    background:var(--black-2);
    border:1px solid var(--line);
    border-radius:8px;
    padding:32px 24px 28px;
    display:flex;
    flex-direction:column;
    position:relative;
  }
  @media (min-width:1024px){.tier{padding:36px 28px 32px;}}
  .tier.featured{
    border-color:var(--yellow);
    box-shadow:0 0 0 1px var(--yellow);
  }
  .tier-popular{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--yellow);
    color:var(--black);
    font-family:"JetBrains Mono", monospace;
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:3px;
    white-space:nowrap;
  }
  .tier h3{
    font-weight:700;
    font-size:22px;
    letter-spacing:-.02em;
    line-height:1;
    margin:0 0 6px;
    color:var(--text);
  }
  .tier .tier-tag{
    font-family:"JetBrains Mono", monospace;
    font-size:10.5px;
    color:var(--text-3);
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 24px;
  }
  .tier-price{display:flex; align-items:baseline; gap:4px; margin:0 0 4px;}
  .tier-price strong{
    font-weight:800;
    font-size:48px;
    letter-spacing:-.04em;
    line-height:1;
    color:var(--text);
  }
  .tier-price .per{font-size:14px; color:var(--text-3);}
  .tier-billed{
    font-family:"JetBrains Mono", monospace;
    font-size:10.5px;
    color:var(--text-3);
    letter-spacing:.04em;
    margin:0 0 24px;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
  }
  .tier-features{
    list-style:none;
    padding:0;
    margin:0 0 28px;
    display:flex;
    flex-direction:column;
    gap:11px;
    flex:1;
  }
  .tier-features li{
    font-size:14px;
    line-height:1.45;
    color:var(--text-2);
    padding-left:24px;
    position:relative;
  }
  .tier-features li::before{
    content:"";
    position:absolute;
    left:2px; top:5px;
    width:12px; height:7px;
    border-left:2px solid var(--yellow);
    border-bottom:2px solid var(--yellow);
    transform:rotate(-45deg);
  }
  .tier .btn{width:100%; justify-content:center; padding:14px 20px;}
  .mp-fineprint{
    text-align:center;
    margin-top:32px;
    font-family:"JetBrains Mono", monospace;
    font-size:10.5px;
    color:var(--text-3);
    letter-spacing:.04em;
  }
  @media (min-width:1024px){.mp-fineprint{margin-top:40px;}}

  /* === WHAT WE LOOK FOR === */
  .checklist-section{
    padding:64px 20px;
    background:var(--black-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  @media (min-width:1024px){.checklist-section{padding:96px 48px;}}
  .checklist-section .wrap{max-width:1200px; margin:0 auto;}
  .checklist-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
  }
  @media (min-width:1024px){
    .checklist-grid{grid-template-columns:1fr 1.4fr; gap:80px;}
  }
  .checklist-grid h2{
    font-weight:700;
    font-size:clamp(32px, 5.5vw, 56px);
    line-height:1;
    letter-spacing:-.035em;
    margin:14px 0 18px;
  }
  .checklist-grid h2 .accent{color:var(--yellow);}
  .checklist-grid > div > p{
    font-size:16px;
    line-height:1.55;
    color:var(--text-2);
    margin:0 0 24px;
  }
  .checklist-meta{
    font-family:"JetBrains Mono", monospace;
    font-size:11px;
    color:var(--text-3);
    letter-spacing:.04em;
    line-height:1.6;
    border-top:1px solid var(--line);
    padding-top:20px;
  }
  .check-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  @media (min-width:640px){.check-list{grid-template-columns:1fr 1fr; gap:0 32px;}}
  .check-list li{
    padding:16px 0 16px 28px;
    border-bottom:1px solid var(--line);
    position:relative;
    font-size:14.5px;
    line-height:1.45;
    color:var(--text);
  }
  .check-list li::before{
    content:"";
    position:absolute;
    left:0; top:22px;
    width:14px; height:8px;
    border-left:2px solid var(--yellow);
    border-bottom:2px solid var(--yellow);
    transform:rotate(-45deg);
  }
  .check-list li small{
    display:block;
    margin-top:4px;
    font-size:12.5px;
    color:var(--text-3);
    font-weight:400;
  }

  /* === FAQ === */
  .faq-section{padding:64px 20px;}
  @media (min-width:1024px){.faq-section{padding:96px 48px;}}
  .faq-section .wrap{max-width:880px; margin:0 auto;}
  .faq-head{margin-bottom:40px;}
  .faq-head h2{
    font-weight:700;
    font-size:clamp(32px, 5.5vw, 56px);
    line-height:1;
    letter-spacing:-.035em;
    margin:14px 0 0;
  }
  .faq-head h2 .muted{color:var(--text-3);}
  details.faq-item{
    border-top:1px solid var(--line);
    padding:24px 0;
  }
  details.faq-item:last-of-type{border-bottom:1px solid var(--line);}
  details.faq-item summary{
    font-weight:600;
    font-size:18px;
    letter-spacing:-.015em;
    color:var(--text);
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  details.faq-item summary::-webkit-details-marker{display:none;}
  details.faq-item summary::after{
    content:"+";
    font-family:"JetBrains Mono", monospace;
    font-weight:400;
    font-size:24px;
    color:var(--yellow);
    line-height:1;
    transition:transform .2s;
  }
  details.faq-item[open] summary::after{content:"−";}
  details.faq-item .faq-body{
    margin-top:14px;
    font-size:15px;
    line-height:1.6;
    color:var(--text-2);
    max-width:680px;
  }
/* === GROUPED NAV SHEET (multi-page nav) === */
.nav-sheet{padding:88px 24px 40px;}
.nav-sheet .sheet-section{margin-bottom:24px;}
.nav-sheet .sheet-label{
  display:block;
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-3);
  padding:12px 0 4px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.nav-sheet .sheet-section a{
  display:block;
  padding:14px 0;
  font-weight:600;
  font-size:20px;
  line-height:1.1;
  letter-spacing:-.02em;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--text);
}
.nav-sheet .sheet-section a:hover{color:var(--yellow);}
.nav-sheet .sheet-section a:last-child{border-bottom:0;}
.nav-sheet .sheet-cta{margin-top:8px;}

/* === PAGE HERO (used on every non-home page) === */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:96px 20px 56px;
  border-bottom:1px solid var(--line);
  min-height:auto;
}
@media (min-width:768px){.page-hero{padding:120px 32px 72px;}}
@media (min-width:1024px){.page-hero{padding:140px 48px 88px;}}
.page-hero.hero-compact{padding-top:88px;}
@media (min-width:1024px){.page-hero.hero-compact{padding-top:120px;}}

.page-hero .wrap{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0 auto;
}

.page-hero .hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(252,216,11,.08);
  border:1px solid rgba(252,216,11,.3);
  border-radius:99px;
  padding:6px 14px 6px 12px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--yellow);
  margin-bottom:24px;
}
.page-hero .hero-eyebrow .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--yellow);
}
.page-hero .hero-eyebrow.eb-pulse{
  background:rgba(255,90,90,.12);
  border-color:rgba(255,90,90,.35);
  color:#ff8585;
}
.page-hero .hero-eyebrow.eb-pulse .pulse{
  width:8px; height:8px;
  border-radius:50%;
  background:#ff5a5a;
  box-shadow:0 0 0 0 rgba(255,90,90,.7);
  animation:pulse 2s infinite;
}

.page-hero h1{
  font-weight:800;
  font-size:clamp(40px, 7.5vw, 84px);
  line-height:.96;
  letter-spacing:-.035em;
  margin:0 0 22px;
  color:var(--text);
  max-width:920px;
}
.page-hero h1 .accent{color:var(--yellow);}

.page-hero .hero-sub{
  font-size:clamp(16px, 1.6vw, 19px);
  line-height:1.55;
  color:var(--text-2);
  max-width:680px;
  margin:0 0 32px;
}

.page-hero .hero-cta-row{
  display:flex; flex-wrap:wrap;
  align-items:center; gap:18px;
  margin-top:8px;
}
.page-hero .hero-call-line{
  font-size:14px;
  color:var(--text-2);
  margin:0;
}
.page-hero .hero-call-line a{
  color:var(--yellow);
  font-weight:600;
  font-family:"JetBrains Mono", monospace;
  font-size:14px;
  letter-spacing:.02em;
}

/* keep the placeholder photo backdrop sitting BEHIND the content */
.page-hero .hero-photo{position:absolute; inset:0; z-index:0;}
.page-hero .hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.85) 60%, rgba(10,10,10,.98) 100%);
  z-index:1;
}

/* === STATS BAR (under hero on every page) === */
.stats-bar{
  background:var(--black-2);
  border-bottom:1px solid var(--line);
  padding:20px 20px;
}
.stats-bar .wrap{
  max-width:1100px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px 24px;
}
@media(min-width:768px){.stats-bar .wrap{grid-template-columns:repeat(4, 1fr);}}
.stat-item{
  display:flex; flex-direction:column; gap:2px;
  border-left:2px solid var(--yellow);
  padding-left:12px;
}
.stat-item strong{
  font-weight:700; font-size:15px;
  color:var(--text); letter-spacing:-.01em;
  line-height:1.1;
}
.stat-item span{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-3);
}

/* === SECTION (generic content section used across new pages) === */
.section{padding:64px 20px;}
@media (min-width:1024px){.section{padding:96px 48px;}}
.section .wrap{max-width:1100px; margin:0 auto;}
.section .section-eyebrow{
  display:inline-flex;
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:14px;
}
.section .section-eyebrow .num{color:var(--yellow); margin-right:8px;}
.section .section-title{
  font-weight:800;
  font-size:clamp(28px, 4.5vw, 44px);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 16px;
}
.section .section-title .muted{color:var(--text-3); font-weight:500;}
.section .section-title .accent{color:var(--yellow);}
.section .section-deck{
  font-size:17px;
  line-height:1.6;
  color:var(--text-2);
  max-width:720px;
  margin:0;
}
.section .section-head{margin-bottom:32px;}

/* === NEIGHBORHOODS LIST (used on location pages) === */
.neighborhoods{
  list-style:none; padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:0;
}
@media (min-width:640px){.neighborhoods{grid-template-columns:1fr 1fr;}}
@media (min-width:1024px){.neighborhoods{grid-template-columns:repeat(3,1fr);}}
.neighborhoods li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:15px; font-weight:500;
  color:var(--text);
}
.neighborhoods li a{color:var(--text);}
.neighborhoods li a:hover{color:var(--yellow);}
.neighborhoods .miles{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; color:var(--text-3);
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* === REVIEWS SECTION (shared) === */
.section.reviews .reviews-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
  margin-top:24px;
}
@media (min-width:768px){.section.reviews .reviews-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1024px){.section.reviews .reviews-grid{grid-template-columns:repeat(3,1fr);}}
.section.reviews .review{
  background:var(--black-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:24px 26px;
}
.section.reviews .review .stars{color:var(--yellow); font-size:13px; margin-bottom:12px; letter-spacing:.1em;}
.section.reviews .review .review-text{
  font-size:15px; line-height:1.55;
  color:var(--text); margin:0 0 16px;
}
.section.reviews .review-meta{display:flex; flex-direction:column; gap:2px;}
.section.reviews .review-meta strong{font-weight:700; font-size:14px; color:var(--text); letter-spacing:-.01em;}
.section.reviews .review-meta span{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
}

/* ==========================================================================
   SMART MOTION LAYER
   Added in audit pass: scroll reveals, hover lifts, CTA arrow nudges,
   FAQ smooth expand, hero stagger entrance, reduced-motion fallback.
   ========================================================================== */

/* --- Scroll-revealed sections --------------------------------------------
   Attach .reveal to any block that should fade-up as it enters the viewport.
   The IntersectionObserver in JS toggles .is-revealed.
*/
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),
             transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.is-revealed{
  opacity:1;
  transform:translateY(0);
}
/* Stagger children when a parent has .reveal-stagger */
.reveal-stagger.is-revealed > *{
  animation:childRise .7s cubic-bezier(.2,.7,.2,1) backwards;
}
.reveal-stagger.is-revealed > *:nth-child(1){animation-delay:.05s;}
.reveal-stagger.is-revealed > *:nth-child(2){animation-delay:.12s;}
.reveal-stagger.is-revealed > *:nth-child(3){animation-delay:.19s;}
.reveal-stagger.is-revealed > *:nth-child(4){animation-delay:.26s;}
.reveal-stagger.is-revealed > *:nth-child(5){animation-delay:.33s;}
.reveal-stagger.is-revealed > *:nth-child(6){animation-delay:.4s;}
@keyframes childRise{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

/* --- Hero entrance -------------------------------------------------------- */
.page-hero .hero-eyebrow,
.page-hero h1,
.page-hero .hero-sub,
.page-hero .hero-cta-row{
  opacity:0;
  animation:heroIn .65s cubic-bezier(.2,.7,.2,1) forwards;
}
.page-hero .hero-eyebrow{animation-delay:.05s;}
.page-hero h1{animation-delay:.13s;}
.page-hero .hero-sub{animation-delay:.21s;}
.page-hero .hero-cta-row{animation-delay:.29s;}
@keyframes heroIn{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}

/* --- Hover lift on tile cards -------------------------------------------- */
.phase, .review, .cost-cell, .tier, .service-strip a{
  transition:transform .25s cubic-bezier(.2,.7,.2,1),
             border-color .25s ease,
             background .25s ease,
             box-shadow .25s ease;
  will-change:transform;
}
.phase:hover, .review:hover, .cost-cell:hover, .tier:hover, .service-strip a:hover{
  transform:translateY(-2px);
  border-color:rgba(252,216,11,.22);
}
@media (hover:none){
  .phase, .review, .cost-cell, .tier, .service-strip a{transform:none !important;}
}

/* --- CTA arrow nudge ------------------------------------------------------ */
.btn .arrow{
  display:inline-block;
  transition:transform .2s cubic-bezier(.2,.7,.2,1);
}
.btn:hover .arrow{transform:translateX(5px);}
.btn:active .arrow{transform:translateX(2px);}

/* --- Primary CTA glow on hover ------------------------------------------- */
.btn:not(.outline):not(.sm){
  transition:transform .15s ease, box-shadow .25s ease, background .15s ease;
}
.btn:not(.outline):not(.sm):hover{
  box-shadow:0 14px 40px -12px rgba(252,216,11,.55);
  transform:translateY(-1px);
}
.btn:not(.outline):not(.sm):active{
  transform:translateY(0);
}

/* --- Form field focus ----------------------------------------------------- */
.lead-form input,
.lead-form select{
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.lead-form input:focus,
.lead-form select:focus{
  outline:none;
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(252,216,11,.12);
}

/* --- FAQ smooth height expand -------------------------------------------- */
/* Native <details> jumps open. This makes it expand smoothly using the
   grid-template-rows 0fr → 1fr trick (no JS needed) */
.faq-item{
  transition:background .2s ease, border-color .2s ease;
}
.faq-item summary{
  cursor:pointer;
  user-select:none;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  margin-left:auto;
  font-family:"JetBrains Mono", monospace;
  font-weight:500;
  font-size:18px;
  color:var(--yellow);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
  display:inline-block;
}
.faq-item[open] summary::after{
  content:"−";
  transform:rotate(180deg);
}
.faq-item .faq-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1);
}
.faq-item[open] .faq-body{
  grid-template-rows:1fr;
}
.faq-item .faq-body > *{
  overflow:hidden;
  min-height:0;
}

/* --- Mobile sheet slide-in ----------------------------------------------- */
.nav-sheet{
  transition:opacity .3s ease, visibility .3s ease;
}
.nav-sheet .sheet-section,
.nav-sheet .sheet-cta{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.nav-sheet.open .sheet-section,
.nav-sheet.open .sheet-cta{
  opacity:1;
  transform:translateY(0);
}
.nav-sheet.open .sheet-section:nth-child(1){transition-delay:.05s;}
.nav-sheet.open .sheet-section:nth-child(2){transition-delay:.10s;}
.nav-sheet.open .sheet-section:nth-child(3){transition-delay:.15s;}
.nav-sheet.open .sheet-cta{transition-delay:.20s;}

/* --- Sticky bar slide-in/out --------------------------------------------- */
.sticky-mobile-cta{
  transition:transform .3s cubic-bezier(.2,.7,.2,1),
             opacity .25s ease;
}
.sticky-mobile-cta.is-hidden{
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
}

/* --- Skip-to-content link (a11y) ----------------------------------------- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
  z-index:9999;
}
.skip-link:focus{
  position:fixed;
  left:12px; top:12px;
  width:auto; height:auto;
  padding:10px 16px;
  background:var(--yellow);
  color:var(--black);
  font-weight:700;
  font-size:14px;
  border-radius:4px;
  text-decoration:none;
  outline:2px solid var(--black);
}

/* --- Safe-area-inset for iPhone notches/home-indicators ----------------- */
.emergency{padding-top:env(safe-area-inset-top, 0);}
.sticky-mobile-cta{padding-bottom:calc(env(safe-area-inset-bottom, 0) + 8px);}

/* --- prefers-reduced-motion: ALWAYS WIN ---------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1; transform:none;}
}

/* --- Page transition (used inside site-preview.html) -------------------- */
.page-route{
  animation:none;
}
.page-route.is-active{
  animation:routeIn .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes routeIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

/* ==========================================================================
   FORM v2 — name + phone + email + service + city + urgent + comment
   plus honeypot anti-bot trap
   ========================================================================== */

.lead-form{display:flex; flex-direction:column; gap:12px;}

.lead-form .lf-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:480px){.lead-form .lf-row{grid-template-columns:1fr;}}

.lead-form input,
.lead-form select,
.lead-form textarea{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  padding:13px 14px;
  appearance:none;
  -webkit-appearance:none;
}
.lead-form textarea{
  resize:vertical;
  min-height:90px;
  font-family:inherit;
  line-height:1.5;
}
.lead-form input::placeholder,
.lead-form textarea::placeholder{color:var(--text-3);}
.lead-form select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%239a9a9a' stroke-width='1.5' fill='none'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.lead-form select:invalid{color:var(--text-3);}
.lead-form select option{color:var(--text); background:var(--black-2);}

/* Urgent toggle — custom styled checkbox */
.lead-form .urgent-toggle{
  display:flex;
  align-items:flex-start;
  gap:11px;
  cursor:pointer;
  padding:10px 4px 4px;
  font-size:13.5px;
  line-height:1.4;
  color:var(--text-2);
  user-select:none;
}
.lead-form .urgent-toggle input{
  position:absolute;
  opacity:0;
  width:0; height:0;
}
.lead-form .urgent-box{
  flex-shrink:0;
  width:18px; height:18px;
  border:1.5px solid var(--text-3);
  border-radius:4px;
  background:transparent;
  transition:all .15s ease;
  position:relative;
  margin-top:1px;
}
.lead-form .urgent-toggle input:checked ~ .urgent-box{
  background:var(--yellow);
  border-color:var(--yellow);
}
.lead-form .urgent-toggle input:checked ~ .urgent-box::after{
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:4px; height:9px;
  border:solid var(--black);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.lead-form .urgent-toggle input:focus ~ .urgent-box{
  box-shadow:0 0 0 3px rgba(252,216,11,.2);
}
.lead-form .urgent-toggle:hover .urgent-box{border-color:var(--yellow);}
.lead-form .urgent-toggle input:checked ~ .urgent-text{color:var(--text);}

/* Honeypot — visually hidden but accessible to bots */
.hp-trap{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
  pointer-events:none;
}

/* Form fineprint */
.form-fineprint{
  font-size:11.5px;
  color:var(--text-3);
  margin-top:14px;
  line-height:1.5;
  font-family:"JetBrains Mono", monospace;
  letter-spacing:.02em;
}

/* Lead form thank-you */
.lead-form-thank h3{
  font-weight:700;
  font-size:22px;
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.lead-form-thank p{
  margin:0;
  color:var(--text-2);
  font-size:14px;
}
.lead-form-thank a{color:var(--yellow); font-weight:600;}


/* ==========================================================================
   REVIEWS CAROUSEL — scroll-snap mobile-first, dots + arrows
   ========================================================================== */

.reviews-carousel{position:relative;}

.carousel-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0;
}
.carousel-track::-webkit-scrollbar{display:none;}

.carousel-item{
  flex:0 0 calc(100% - 8px);
  scroll-snap-align:center;
}
@media(min-width:768px){
  .carousel-item{flex:0 0 calc(50% - 8px);}
}
@media(min-width:1024px){
  .carousel-item{flex:0 0 calc(33.333% - 11px);}
}
.carousel-item .review{height:100%;}

.carousel-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-top:28px;
}

.carousel-prev,
.carousel-next{
  background:var(--black-2);
  border:1px solid var(--line);
  color:var(--text);
  width:44px; height:44px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  transition:border-color .2s ease, color .2s ease, transform .15s ease;
  font-family:inherit;
}
.carousel-prev:hover,
.carousel-next:hover{
  border-color:var(--yellow);
  color:var(--yellow);
}
.carousel-prev:active,
.carousel-next:active{
  transform:scale(.94);
}
.carousel-prev:disabled,
.carousel-next:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.carousel-dots{
  display:flex;
  gap:8px;
  align-items:center;
}
.carousel-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--line);
  border:none;
  cursor:pointer;
  transition:background .25s ease, width .25s ease, border-radius .25s ease;
  padding:0;
}
.carousel-dot.is-active{
  background:var(--yellow);
  width:22px;
  border-radius:4px;
}
.carousel-dot:hover:not(.is-active){background:var(--text-3);}