/* ── Self-hosted fonts ── */
@font-face{
  font-family:'Oswald';
  src:url('/fonts/oswald-v57-latin-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('/fonts/oswald-v57-latin-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('/fonts/oswald-v57-latin-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('/fonts/oswald-v57-latin-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('/fonts/work-sans-v24-latin-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('/fonts/work-sans-v24-latin-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('/fonts/work-sans-v24-latin-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
    --ink:#12161B;
    --graphite:#262C33;
    --steel:#5B6570;
    --hairline:#3A4149;
    --paper:#EEF0F2;
    --paper-dim:#DEE2E6;
    --chrome:#B9C0C8;
    --signal:#E8571C;
    --signal-dim:#C4481A;
    --white:#FFFFFF;

    --display: 'Oswald', sans-serif;
    --body: 'Work Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--signal); font-weight:500;
  }
  h1,h2,h3{font-family:var(--display); text-transform:uppercase; letter-spacing:.01em; line-height:1.05;}

  /* ---------- Top bar ---------- */
  .topbar{
    background:var(--ink); color:var(--paper);
    font-family:var(--mono); font-size:13px;
    border-bottom:1px solid var(--hairline);
  }
  .topbar .wrap{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:10px; padding-bottom:10px;
    gap:12px; flex-wrap:wrap;
  }
  .topbar .area{color:var(--chrome);}
  .topbar .phone{color:var(--white); font-weight:500; letter-spacing:.02em;}
  .topbar .phone span{color:var(--signal);}

  /* ---------- Header / nav ---------- */
  header.site{
    background:var(--ink);
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--hairline);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; padding-bottom:16px;
  }
  .logo{
    font-family:var(--display); color:var(--white); font-size:20px;
    letter-spacing:.04em; text-transform:uppercase;
  }
  .logo span{color:var(--signal);}
  .nav-links{display:flex; gap:28px; font-size:14px; color:var(--chrome); list-style:none;}
  .nav-links a:hover{color:var(--white);}
  .nav-links li.has-dropdown{position:relative;}
  .nav-dropdown{
    position:absolute; top:100%; left:0; margin-top:0; padding-top:14px;
    z-index:60; display:none;
  }
  .nav-dropdown-inner{
    background:var(--ink); border:1px solid var(--hairline); border-radius:4px;
    min-width:230px; padding:10px 0;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
  }
  .nav-links li.has-dropdown:hover .nav-dropdown{display:block;}
  .nav-trigger{cursor:pointer;}
  .nav-dropdown .dd-label{
    font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--steel); padding:6px 18px; margin-top:4px;
  }
  .nav-dropdown a{display:block; padding:8px 18px; font-size:13.5px; color:var(--chrome); text-decoration:none;}
  .nav-dropdown a:hover{color:var(--white); background:rgba(255,255,255,.05);}
  .nav-dropdown .dd-divider{border-top:1px solid var(--hairline); margin:8px 0;}
  .topbar .area a{color:inherit; text-decoration:none;}
  .topbar .area a:hover{color:var(--white); text-decoration:underline;}
  footer .col p a{color:inherit; text-decoration:none;}
  footer .col p a:hover{color:var(--chrome); text-decoration:underline;}
  .nav-cta{
    background:var(--signal); color:var(--white); font-family:var(--display);
    text-transform:uppercase; font-size:13px; letter-spacing:.04em;
    padding:10px 18px; border-radius:2px; white-space:nowrap;
  }
  .nav-cta:hover{background:var(--signal-dim);}
  .menu-toggle{
    display:none; background:none; border:none; cursor:pointer; padding:8px;
    flex-direction:column; gap:5px; margin-left:8px;
  }
  .menu-toggle span{display:block; width:24px; height:2px; background:var(--signal); transition:transform .2s, opacity .2s;}
  .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ---------- Hero ---------- */
  .hero{
    background:var(--ink); color:var(--white);
    padding:64px 0 0;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  }
  .hero h1{
    font-size:clamp(34px, 4.6vw, 56px);
    margin:16px 0 20px;
    color:var(--white);
  }
  .hero h1 em{
    font-style:normal; color:var(--signal);
  }
  .hero p.lead{
    font-size:17px; color:var(--chrome); max-width:46ch; margin-bottom:28px;
  }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
  .btn{
    font-family:var(--display); text-transform:uppercase; letter-spacing:.04em;
    font-size:14px; padding:15px 26px; border-radius:2px; text-align:center;
    display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:none;
  }
  .btn-primary{background:var(--signal); color:var(--white);}
  .btn-primary:hover{background:var(--signal-dim);}
  .btn-ghost{background:transparent; color:var(--white); border:1px solid var(--hairline);}
  .btn-ghost:hover{border-color:var(--chrome);}

  /* --- Hero photo --- */
  .hero-photo{
    position:relative;
    background:#1B2027;
    border:1px solid var(--hairline);
    border-radius:6px;
    aspect-ratio:4/3.2;
    overflow:hidden;
  }
  .hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .hero-photo-caption{
    display:flex; justify-content:space-between; margin-top:14px;
    font-family:var(--mono); font-size:11px; color:var(--steel);
  }
  .hero-photo-caption b{color:var(--white); font-weight:500;}

  /* ---------- Trust bar ---------- */
  .trustbar{
    background:var(--graphite); color:var(--paper);
    border-bottom:1px solid var(--hairline);
  }
  .trustbar .wrap{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    padding-top:22px; padding-bottom:22px;
  }
  .trust-item{
    text-align:center; padding:0 12px; border-left:1px solid var(--hairline);
  }
  .trust-item:first-child{border-left:none;}
  .trust-item .num{font-family:var(--mono); font-size:20px; color:var(--signal);}
  .trust-item .lbl{font-size:12px; color:var(--chrome); text-transform:uppercase; letter-spacing:.05em; margin-top:4px;}

  /* ---------- Section base ---------- */
  section{padding:76px 0;}
  .section-head{max-width:640px; margin-bottom:48px;}
  .section-head h2{font-size:clamp(26px,3.2vw,36px); margin-top:10px;}
  .section-head p{color:var(--steel); margin-top:14px; font-size:16px;}

  /* ---------- How it works ---------- */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .step{
    background:var(--white); border:1px solid var(--paper-dim); border-radius:4px; padding:28px 24px;
    position:relative;
  }
  .step .n{
    font-family:var(--mono); font-size:13px; color:var(--signal); margin-bottom:14px; display:block;
  }
  .step h3{font-size:19px; margin-bottom:10px; letter-spacing:0;}
  .step p{color:var(--steel); font-size:14.5px;}

  /* ---------- Before / after ---------- */
  .compare-wrap{background:var(--ink); color:var(--white);}
  .compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px;}
  .compare-card{
    background:var(--graphite); border:1px solid var(--hairline); border-radius:6px; overflow:hidden;
  }
  .compare-card .shots{display:grid; grid-template-columns:1fr 1fr;}
  .compare-card .shot{
    aspect-ratio:4/3; background:#1B2027;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    font-family:var(--mono); font-size:12px; color:var(--steel); text-align:center; padding:20px;
  }
  .compare-card .shot img{width:100%; height:100%; object-fit:cover; display:block;}
  .compare-card .shot-lbl{
    position:absolute; margin-top:-28px; margin-left:8px;
    font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--white); background:rgba(0,0,0,.55); padding:3px 8px; border-radius:3px; display:inline-block;
  }
  .compare-card .shot-wrap{position:relative;}
  .compare-card .lbl{
    padding:14px 18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    display:flex; justify-content:space-between; border-top:1px solid var(--hairline);
  }
  .compare-card .lbl b{color:var(--signal); font-weight:500;}
  .compare-card .caption{padding:0 18px 20px; font-size:13.5px; color:var(--chrome); line-height:1.6; text-transform:none; letter-spacing:normal; font-family:var(--body);}

  /* ---------- Service area ---------- */
  .area-section .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
  .town-grid{
    display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;
  }
  .town-pill{
    font-family:var(--mono); font-size:12.5px; padding:6px 12px; border:1px solid var(--paper-dim);
    border-radius:100px; color:var(--steel); background:var(--white);
  }
  .area-note{
    background:var(--white); border:1px solid var(--paper-dim); border-radius:6px; padding:26px;
  }
  .area-note h3{font-size:17px; letter-spacing:0; margin-bottom:10px;}
  .area-note p{color:var(--steel); font-size:14.5px; margin-bottom:16px;}

  /* ---------- Story (solo operator trust block) ---------- */
  .story{background:var(--graphite); color:var(--paper);}
  .story .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
  .story h2{color:var(--white); font-size:clamp(26px,3.2vw,36px);}
  .story p{color:var(--chrome); font-size:16px; margin-top:16px;}
  .story .stat-row{display:flex; gap:32px; margin-top:28px; flex-wrap:wrap;}
  .story .stat b{display:block; font-family:var(--mono); font-size:24px; color:var(--signal);}
  .story .stat span{font-size:12px; color:var(--steel); text-transform:uppercase; letter-spacing:.04em;}
  .story-photo{
    background:#1B2027;
    border:1px solid var(--hairline); border-radius:6px; aspect-ratio:4/3.4;
    display:flex; align-items:center; justify-content:center; text-align:center; padding:0; overflow:hidden;
  }
  .story-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .story-photo .msg{font-family:var(--mono); font-size:12.5px; color:var(--steel); max-width:24ch;}

  /* ---------- Pricing (soft framing, no hard numbers yet) ---------- */
  .pricing-box{
    background:var(--white); border:1px solid var(--paper-dim); border-radius:6px;
    padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;
  }
  .pricing-box p{color:var(--steel); font-size:15.5px; margin-top:10px;}
  .price-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:14px;}
  .price-table th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); padding-bottom:10px; border-bottom:1px solid var(--paper-dim);}
  .price-table td{padding:9px 0; border-bottom:1px solid var(--paper-dim);}
  .price-table td:last-child{text-align:right; color:var(--signal); font-weight:500;}
  .factor-list{list-style:none; font-size:14px; color:var(--steel); margin-top:14px;}
  .factor-list li{padding:6px 0; border-bottom:1px dashed var(--paper-dim); display:flex; justify-content:space-between;}
  .factor-list li b{color:var(--ink); font-weight:500;}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px;}
  .faq-item{border-bottom:1px solid var(--paper-dim); padding:20px 0;}
  .faq-item summary{
    font-family:var(--display); text-transform:uppercase; letter-spacing:.01em;
    font-size:16px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+"; font-family:var(--mono); color:var(--signal); font-size:20px;}
  .faq-item[open] summary::after{content:"–";}
  .faq-item p{color:var(--steel); font-size:15px; margin-top:12px; max-width:64ch;}

  /* ---------- Testimonials ---------- */
  .testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .testimonial{
    background:var(--white); border:1px solid var(--paper-dim); border-radius:4px; padding:26px;
    display:flex; flex-direction:column; justify-content:space-between; min-height:180px;
  }
  .testimonial p{font-size:15px; color:var(--ink); margin-bottom:16px;}
  .testimonial .who{font-family:var(--mono); font-size:12px; color:var(--steel);}
  .stars{color:var(--signal); font-size:13px; letter-spacing:2px; margin-bottom:10px;}
  .placeholder-note{
    grid-column:1/-1; font-family:var(--mono); font-size:12px; color:var(--steel);
    border:1px dashed var(--paper-dim); border-radius:4px; padding:14px 18px; margin-top:6px;
  }

  /* ---------- Final CTA ---------- */
  #reviews{padding-bottom:40px;}
  .final-cta{
    background:var(--signal); color:var(--white); text-align:center; padding-top:56px;
  }
  .final-cta h2{color:var(--white); font-size:clamp(28px,4vw,42px);}
  .final-cta p{max-width:520px; margin:16px auto 30px; font-size:16px; opacity:.95;}
  .final-cta .btn-primary{background:var(--ink); color:var(--white);}
  .final-cta .btn-primary:hover{background:#000;}
  .final-cta .btn-ghost{border-color:rgba(255,255,255,.5);}
  .final-cta-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

  /* ---------- Footer ---------- */
  footer{background:var(--ink); color:var(--steel); padding:40px 0 28px;}
  footer .wrap:not(.foot-bottom){
    display:flex; justify-content:flex-start; flex-wrap:wrap; gap:80px;
    font-size:13px; border-bottom:1px solid var(--hairline); padding-bottom:24px; margin-bottom:18px;
    max-width:900px;
  }
  footer .foot-bottom{font-family:var(--mono); font-size:11.5px; color:#4A525B;}
  footer .wrap .col h4{
    font-family:var(--display); text-transform:uppercase; font-size:13px; letter-spacing:.05em; color:var(--chrome); margin-bottom:10px;
  }

  /* --- Click-to-zoom lightbox --- */
  .zoomable{cursor:zoom-in;}
  .lightbox-overlay{
    position:fixed; inset:0; background:rgba(10,12,15,.92);
    display:none; align-items:center; justify-content:center;
    z-index:9999; padding:24px; cursor:zoom-out;
  }
  .lightbox-overlay.active{display:flex;}
  .lightbox-overlay img{
    max-width:92vw; max-height:88vh; object-fit:contain;
    border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .lightbox-close{
    position:absolute; top:20px; right:28px;
    color:var(--white); font-family:var(--mono); font-size:14px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
    padding:8px 14px; border-radius:4px; cursor:pointer;
  }

  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero{padding-top:36px;}
    nav.wrap{position:relative; flex-wrap:wrap;}
    .menu-toggle{display:flex;}
    .nav-links{
      display:none; position:absolute; top:100%; left:0; right:0;
      background:var(--ink); flex-direction:column; gap:0;
      border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
      padding:6px 0; max-height:80vh; overflow-y:auto;
    }
    .nav-links.open{display:flex;}
    .nav-links > li{width:100%;}
    .nav-links > li > a, .nav-links > li > .nav-trigger{
      display:flex; align-items:center; justify-content:space-between;
      padding:15px 24px; border-bottom:1px solid var(--hairline); font-size:15px;
    }
    .nav-links li.has-dropdown:hover .nav-dropdown{display:none;}
    .nav-links li.has-dropdown.mobile-open .nav-dropdown{display:block;}
    .nav-dropdown{position:static; padding-top:0; margin-top:0;}
    .nav-dropdown-inner{border:none; border-radius:0; box-shadow:none; background:var(--graphite); padding:4px 0;}
    .nav-dropdown a{padding:12px 34px;}
    .trustbar .wrap{grid-template-columns:repeat(2,1fr); row-gap:18px;}
    .trust-item:nth-child(3){border-left:none;}
    .steps{grid-template-columns:1fr;}
    .compare-grid{grid-template-columns:1fr;}
    .area-section .wrap{grid-template-columns:1fr;}
    .testimonial-grid{grid-template-columns:1fr;}
    footer .wrap{flex-direction:column;}
    .story .wrap{grid-template-columns:1fr;}
    .pricing-box{grid-template-columns:1fr;}
  }