/* ====================== DESIGN TOKENS ====================== */
  :root{
    /* Brand */
    --ink:#0E1113;          /* asphalt near-black */
    --graphite:#171C20;
    --graphite-2:#20262C;
    --concrete:#F2F4F6;     /* light page bg */
    --surface:#FFFFFF;
    --surface-2:#EAECEF;
    --bone:#FBFBFC;

    --accent:#F4631E;       /* safety / construction orange (the ONE accent) */
    --accent-deep:#D14E10;
    --accent-soft:#FFE9DC;

    /* Text */
    --text:#13181B;
    --text-muted:#515A61;
    --text-on-dark:#F4F5F6;
    --muted-on-dark:#A7B0B7;

    /* Lines */
    --line:rgba(16,19,21,.12);
    --line-dark:rgba(255,255,255,.13);

    /* Shape scale (LOCKED): card 10, button 8, input 8, chip 6 */
    --r-card:10px; --r-btn:8px; --r-input:8px; --r-chip:6px;

    /* Type scale */
    --fs-display:clamp(2.6rem, 6.2vw, 5.6rem);
    --fs-h2:clamp(1.9rem, 3.6vw, 3.1rem);
    --fs-h3:clamp(1.25rem, 1.8vw, 1.6rem);
    --fs-lead:clamp(1.05rem, 1.4vw, 1.3rem);

    --maxw:1200px;
    --shadow:0 18px 50px -22px rgba(16,19,21,.35);
    --shadow-sm:0 6px 22px -14px rgba(16,19,21,.45);
    --ease:cubic-bezier(.16,1,.3,1);
  }

  /* ====================== RESET / BASE ====================== */
  *,*::before,*::after{box-sizing:border-box;}
  /* clip, NOT hidden: hidden makes these scroll containers, which silently
     disables position:sticky on every descendant (.site-header, .sd-aside) */
  html{scroll-behavior:smooth; overflow-x:clip;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body{
    margin:0; background:var(--concrete); color:var(--text);
    font-family:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }
  h1,h2,h3,h4{margin:0; line-height:1.04; letter-spacing:.5px;}
  .display{font-family:"Anton",Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:1px;}
  p{margin:0 0 1rem;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul{margin:0; padding:0; list-style:none;}
  .container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px);}
  .section{padding-block:clamp(64px,9vw,120px);}
  .eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-weight:700; text-transform:uppercase;
           letter-spacing:.16em; font-size:.78rem; color:var(--accent-deep);}
  .eyebrow::before{content:""; width:26px; height:3px; background:var(--accent); border-radius:2px;}
  .on-dark .eyebrow{color:var(--accent);}
  .lead{font-size:var(--fs-lead); color:var(--text-muted); max-width:60ch;}
  .on-dark{background:var(--ink); color:var(--text-on-dark);}
  .on-dark .lead{color:var(--muted-on-dark);}

  /* Skip link */
  .skip-link{position:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:var(--ink);
             padding:.7rem 1.1rem; font-weight:700; border-radius:0 0 var(--r-btn) 0;}
  .skip-link:focus{left:0;}

  /* Visible focus everywhere */
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:3px solid var(--accent); outline-offset:2px; border-radius:4px;
  }

  /* ====================== BUTTONS ====================== */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
       font-family:"Barlow"; font-weight:700; font-size:1rem; letter-spacing:.02em;
       padding:.92rem 1.5rem; border-radius:var(--r-btn); border:2px solid transparent;
       transition:transform .15s var(--ease), background .2s var(--ease), color .2s, border-color .2s; white-space:nowrap;}
  .btn:active{transform:translateY(1px) scale(.99);}
  .btn-primary{background:var(--accent); color:var(--ink); box-shadow:var(--shadow-sm);}
  .btn-primary:hover{background:var(--accent-deep); color:#fff;}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--ink); background:var(--ink); color:#fff;}
  .on-dark .btn-ghost,.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.35);}
  .on-dark .btn-ghost:hover,.hero .btn-ghost:hover{background:#fff; color:var(--ink); border-color:#fff;}
  .btn-lg{padding:1.05rem 1.9rem; font-size:1.08rem;}
  .btn-phone{background:transparent; color:inherit; border-color:transparent; padding-inline:.4rem;}

  /* ====================== UTILITY BAR ====================== */
  .utility{background:var(--ink); color:var(--muted-on-dark); font-size:.85rem; border-bottom:1px solid var(--line-dark);}
  .utility .container{display:flex; align-items:center; justify-content:center; gap:1rem; padding-block:.5rem;}
  .utility a{color:var(--text-on-dark);}
  .utility .u-left{display:flex; gap:1.4rem; flex-wrap:wrap;}
  .utility .u-item{display:inline-flex; align-items:center; gap:.4rem;}
  .utility .dot{color:var(--accent);}
  @media (max-width:760px){ .utility .u-left .u-hide{display:none;} }

  /* ====================== HEADER ====================== */
  .site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
               backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  .header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:84px;}
  .brand{display:flex; align-items:center; gap:.6rem; font-family:"Anton"; text-transform:uppercase;
          font-size:1.45rem; letter-spacing:1px; color:var(--ink);}
  .brand .mark{width:38px; height:38px; background:var(--accent); border-radius:8px; display:grid; place-items:center; color:var(--ink);}
  .brand .mark svg{width:24px;height:24px;}
  .brand small{display:block; font-family:"Barlow"; font-weight:700; font-size:.62rem; letter-spacing:.22em; color:var(--text-muted); margin-top:2px;}
  .brand-logo{height:64px; width:118px; display:block; flex:none;}
  .footer .brand-logo{height:80px; width:148px; margin-bottom:.9rem;}
  @media (max-width:600px){ .brand-logo{height:48px; width:89px;} }
  .primary-nav{display:flex; align-items:center; gap:.4rem;}
  .nav-menu{display:flex; align-items:center; gap:.55rem;}
  .nav-menu a{position:relative; padding:.6rem .95rem; font-weight:600; border-radius:var(--r-btn); color:var(--text); transition:background .2s,color .2s; white-space:nowrap;}
  .nav-menu a:hover{background:var(--surface-2);}
  .header-cta{display:flex; align-items:center; gap:.6rem;}
  .header-cta .tel{font-family:"Anton"; font-size:1.2rem; color:var(--ink); letter-spacing:.5px; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;}
  .header-cta .tel svg{width:18px;height:18px; color:var(--accent-deep);}
  /* Menu trigger — present at every breakpoint, opens the drawer */
  .menu-btn{display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
            font-family:"Barlow"; font-weight:700; font-size:.78rem; letter-spacing:.16em;
            text-transform:uppercase; color:var(--ink);
            background:none; border:2px solid var(--line); border-radius:var(--r-btn);
            padding:.6rem 1rem; transition:border-color .2s, color .2s;}
  .menu-btn:hover{border-color:var(--accent); color:var(--accent-deep);}
  .menu-bars{display:flex; flex-direction:column; gap:4px; width:18px;}
  .menu-bars span{display:block; height:2px; background:currentColor; border-radius:1px;
                  transition:width .25s var(--ease);}
  .menu-bars span:nth-child(2){width:60%;}
  .menu-btn:hover .menu-bars span:nth-child(2){width:100%;}

  /* Logo + links + phone + CTA + Menu need ~1120px; below that they fold into the drawer */
  @media (max-width:1180px){
    .header-cta .tel,.header-cta .btn-primary{display:none;}  /* compact header = logo + menu only */
    .nav-menu{display:none;}                                  /* links live in the drawer here */
  }

  /* ====================== MENU DRAWER ====================== */
  .drawer-backdrop{position:fixed; inset:0; z-index:199; background:rgba(14,17,19,.6);
                   opacity:0; visibility:hidden;
                   transition:opacity .38s var(--ease), visibility 0s linear .38s;}
  .drawer-backdrop.open{opacity:1; visibility:visible; transition:opacity .38s var(--ease), visibility 0s;}

  .drawer{position:fixed; top:0; right:0; bottom:0; z-index:200; width:min(430px,88vw);
          background:var(--ink); color:var(--text-on-dark);
          border-left:3px solid var(--accent);
          overflow-y:auto; overscroll-behavior:contain;
          transform:translateX(100%); visibility:hidden;
          transition:transform .42s var(--ease), visibility 0s linear .42s;}
  .drawer.open{transform:none; visibility:visible; transition:transform .42s var(--ease), visibility 0s;}
  .drawer-inner{padding:1.5rem clamp(1.4rem,4vw,2.1rem) 2.4rem;}

  .drawer-head{display:flex; align-items:center; justify-content:space-between; min-height:48px; margin-bottom:1.5rem;}
  .drawer-eyebrow{font-family:"Barlow"; font-weight:700; font-size:.7rem; letter-spacing:.24em;
                  text-transform:uppercase; color:var(--accent);}
  .drawer-close{display:grid; place-items:center; width:42px; height:42px; margin-right:-8px;
                background:none; border:0; border-radius:var(--r-chip); cursor:pointer;
                color:var(--text-on-dark); transition:background .2s, color .2s;}
  .drawer-close:hover{background:var(--graphite-2); color:var(--accent);}
  .drawer-close svg{width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round;}

  .drawer-section + .drawer-section{margin-top:1.9rem;}
  .drawer-title{font-family:"Barlow"; font-weight:700; font-size:.7rem; letter-spacing:.24em;
                text-transform:uppercase; color:var(--accent); margin:0 0 .85rem;
                padding-bottom:.65rem; border-bottom:1px solid var(--line-dark);}
  .drawer-list{list-style:none; margin:0; padding:0;}

  /* Primary destinations carry the weight — Anton, like the rest of the theme */
  .drawer-primary a{display:block; font-family:"Anton"; text-transform:uppercase; letter-spacing:.8px;
                    font-size:1.55rem; color:var(--text-on-dark); padding:.4rem 0;
                    transition:color .2s, transform .2s var(--ease);}
  .drawer-primary a:hover{color:var(--accent); transform:translateX(6px);}
  .drawer-primary a[aria-current="page"]{color:var(--accent);}

  /* Service shortcuts sit one step down the hierarchy */
  .drawer-services a{display:block; font-weight:600; font-size:.98rem; color:var(--muted-on-dark);
                     padding:.5rem 0; transition:color .2s, transform .2s var(--ease);}
  .drawer-services a:hover{color:#fff; transform:translateX(6px);}

  .drawer-tel{display:inline-block; font-family:"Anton"; font-size:1.5rem; letter-spacing:.5px;
              color:#fff; transition:color .2s;}
  .drawer-tel:hover{color:var(--accent);}
  .drawer-mail{display:block; margin-top:.4rem; font-weight:600; color:var(--muted-on-dark);}
  .drawer-mail:hover{color:var(--accent);}
  .drawer-hours{margin:.55rem 0 0; color:var(--muted-on-dark); font-size:.92rem;}

  .drawer-cta{display:flex; width:100%; margin-top:1.9rem;}

  body.drawer-locked{overflow:hidden;}

  /* Deep links from the drawer clear the sticky header */
  .section[id]{scroll-margin-top:96px;}

  @media (prefers-reduced-motion: reduce){
    .drawer,.drawer-backdrop{transition:none;}
    .drawer-primary a:hover,.drawer-services a:hover{transform:none;}
  }

  /* ====================== HERO ====================== */
  .hero{position:relative; color:var(--text-on-dark); overflow:hidden;
    background:var(--ink) url('img/hero.jpeg') center/cover no-repeat;}
  .hero::before{content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(14,17,19,.94) 0%, rgba(14,17,19,.86) 42%, rgba(14,17,19,.62) 100%),
               radial-gradient(900px 500px at 78% -8%, rgba(244,99,30,.22), transparent 60%),
               radial-gradient(700px 600px at 8% 110%, rgba(255,255,255,.05), transparent 60%);}
  .hero-grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px);
             align-items:center; padding-block:clamp(48px,7vw,92px);}
  .hero-grid > *{min-width:0;}  /* let grid cells shrink below content so big display type wraps instead of overflowing */
  .hero-copy{max-width:42rem;}
  .hero h1{font-size:var(--fs-display); margin-block:.4rem .9rem;}
  .hero h1 .hl{color:var(--accent);}
  .hero .lead{color:#D7DCE0; max-width:46ch; margin-bottom:1.6rem;}
  .hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.5rem;}
  .trust-chips{display:flex; gap:.5rem 1.2rem; flex-wrap:wrap; font-weight:600; font-size:.92rem; color:#CfD5DA;}
  .trust-chips li{display:inline-flex; align-items:center; gap:.45rem;}
  .trust-chips svg{width:18px; height:18px; color:var(--accent); flex:none;}

  /* Quote form card */
  .quote-card{background:var(--surface); color:var(--text); border-radius:var(--r-card); padding:clamp(20px,2.4vw,30px);
              box-shadow:var(--shadow); border-top:5px solid var(--accent);}
  .quote-card h2{font-family:"Anton"; text-transform:uppercase; font-size:1.5rem; letter-spacing:.5px;}
  .quote-card .sub{color:var(--text-muted); font-size:.95rem; margin-bottom:1rem;}
  .field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:.8rem; min-width:0;}
  .field input,.field select{min-width:0;}
  .field label{font-weight:600; font-size:.86rem;}
  .field .req{color:var(--accent-deep);}
  .field input,.field select{font:inherit; padding:.8rem .9rem; border:1.5px solid var(--line); border-radius:var(--r-input);
                             background:var(--bone); color:var(--text);}
  .field input::placeholder{color:#8b949b;}
  .field input:focus,.field select:focus{border-color:var(--accent); background:#fff;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
  .quote-card .btn{width:100%;}
  .form-note{font-size:.78rem; color:var(--text-muted); margin:.7rem 0 0; text-align:center;}
  .form-success{display:none; background:var(--accent-soft); border:1.5px solid var(--accent); color:#7a2c06;
                padding:1rem; border-radius:var(--r-input); font-weight:600; text-align:center;}
  @media (max-width:920px){ .hero-grid{grid-template-columns:1fr;} .hero-copy{max-width:none;} }

  /* ====================== PLACEHOLDER IMAGE CARD ====================== */
  .ph{position:relative; overflow:hidden; border-radius:var(--r-card); background:
        repeating-linear-gradient(45deg, #e4e7ea 0 14px, #dadde1 14px 28px);
      color:#6b7177; display:grid; place-items:center; text-align:center; min-height:200px; border:1px dashed #b9bec4;}
  .ph.dark{background:repeating-linear-gradient(45deg,#23292f 0 14px,#1c2127 14px 28px); color:#8b949b; border-color:#39404700;}
  .ph .ph-inner{display:grid; gap:.4rem; justify-items:center; padding:1rem;}
  .ph svg{width:34px; height:34px; opacity:.7;}
  .ph .ph-label{font-weight:700; letter-spacing:.04em; font-size:.8rem; text-transform:uppercase;}
  .ph .ph-dim{font-size:.72rem; opacity:.7;}
  .ph-ratio-16x9{aspect-ratio:16/9;}
  .ph-ratio-4x3{aspect-ratio:4/3;}
  .ph-ratio-1x1{aspect-ratio:1/1;}

  /* Real photo dropped into a placeholder frame */
  .ph.has-photo{background:none; border:0; padding:0; display:block; min-height:0;}
  .ph.has-photo > img{display:block; width:100%; height:100%; object-fit:cover;}
  .svc .ph.has-photo{aspect-ratio:3/2; flex:none;}
  .svc.feature .ph.has-photo{aspect-ratio:auto; flex:1 1 auto; min-height:220px; position:relative;}
  .svc.feature .ph.has-photo > img{position:absolute; inset:0;}
  @media (min-width:900px){ .svc.feature .svc-body{flex:0 0 auto;} }

  /* ====================== TRUST / CREDENTIAL MARQUEE ====================== */
  .trustbar{background:var(--surface); border-block:1px solid var(--line);}
  .trustbar .container{padding-block:1.4rem;}
  .trust-head{text-align:center; font-weight:600; color:var(--text-muted); font-size:.9rem; margin-bottom:1rem;}
  .marquee{overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
  .marquee-track{display:flex; gap:2.4rem; align-items:center; width:max-content; animation:scroll 32s linear infinite;}
  @keyframes scroll{to{transform:translateX(-50%);}}
  .marquee:hover .marquee-track{animation-play-state:paused;}
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto;} }
  .credential{display:inline-flex; align-items:center; gap:.5rem; font-family:"Anton"; text-transform:uppercase;
              font-size:1.15rem; letter-spacing:.5px; color:#3a4248; white-space:nowrap;}
  .credential svg{width:22px; height:22px; color:var(--accent-deep);}

  /* ====================== STATS BAND ====================== */
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border-radius:var(--r-card); overflow:hidden;}
  .stat{background:var(--ink); padding:clamp(22px,3vw,38px) 1.2rem; text-align:center;}
  .stat .num{font-family:"Anton"; font-size:clamp(2.4rem,5vw,3.6rem); color:var(--accent); line-height:1;}
  .stat .lbl{color:var(--muted-on-dark); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; margin-top:.5rem;}
  @media (max-width:720px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }

  /* ====================== SECTION HEAD ====================== */
  .sec-head{max-width:60ch; margin-bottom:clamp(28px,4vw,52px);}
  .sec-head.center{margin-inline:auto; text-align:center;}
  .sec-head h2{font-size:var(--fs-h2); margin:.5rem 0 .8rem;}

  /* ====================== SERVICES BENTO ====================== */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; grid-auto-flow:dense;}
  .svc{position:relative; background:var(--surface); border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line);
       box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); display:flex; flex-direction:column;}
  .svc:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
  .svc .ph{border-radius:0; border:0; border-bottom:1px solid var(--line); min-height:0;}
  .svc-body{padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1;}
  .svc-ico{width:46px; height:46px; border-radius:var(--r-btn); background:var(--accent-soft); color:var(--accent-deep);
           display:grid; place-items:center; margin-top:-2.6rem; position:relative; z-index:2; border:3px solid var(--surface);}
  .svc-ico svg{width:24px;height:24px;}
  .svc h3{font-size:var(--fs-h3); font-weight:800; font-family:"Barlow"; letter-spacing:0; text-transform:none;}
  .svc p{color:var(--text-muted); font-size:.95rem; margin:0;}
  .svc .more{margin-top:auto; font-weight:700; color:var(--accent-deep); display:inline-flex; align-items:center; gap:.35rem;}
  .svc .more svg{width:16px;height:16px; transition:transform .2s;}
  .svc:hover .more svg{transform:translateX(4px);}
  .svc.feature{grid-column:span 2;}
  .svc.feature .ph{min-height:220px;}  /* floor only; flex:1 (desktop) fills the rest so the body/icon stay visible */
  @media (min-width:900px){ .svc.feature{grid-row:span 2; flex-direction:column;} .svc.feature .ph{flex:1;} }
  @media (max-width:899px){ .services-grid{grid-template-columns:repeat(2,1fr);} .svc.feature{grid-column:span 2;} }
  @media (max-width:560px){ .services-grid{grid-template-columns:1fr;} .svc.feature{grid-column:span 1;} }

  /* ====================== WHY US (split) ====================== */
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;}
  .why-list{display:grid; gap:1.1rem; margin-top:1.2rem;}
  .why-item{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;}
  .why-item .wi-ico{width:50px;height:50px;border-radius:var(--r-btn); background:var(--ink); color:var(--accent);
                    display:grid;place-items:center; flex:none;}
  .why-item .wi-ico svg{width:26px;height:26px;}
  .why-item h3{font-family:"Barlow"; text-transform:none; letter-spacing:0; font-weight:800; font-size:1.15rem; margin-bottom:.2rem;}
  .why-item p{color:var(--text-muted); font-size:.95rem; margin:0;}
  .why-media{position:relative;}
  .badge-float{position:absolute; left:-14px; bottom:18px; background:var(--accent); color:var(--ink); border-radius:var(--r-card);
               padding:1rem 1.2rem; box-shadow:var(--shadow); font-weight:700; line-height:1.1; max-width:200px;}
  .badge-float .bf-num{font-family:"Anton"; font-size:2rem; display:block;}
  @media (max-width:860px){ .why-grid{grid-template-columns:1fr;} }

  /* ====================== PROCESS ====================== */
  .process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step;}
  .step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:1.5rem 1.3rem; counter-increment:step;}
  .step::before{content:counter(step,decimal-leading-zero); font-family:"Anton"; font-size:2.4rem; color:var(--accent); line-height:1; display:block; margin-bottom:.6rem;}
  .step h3{font-family:"Barlow"; text-transform:none; letter-spacing:0; font-weight:800; font-size:1.1rem; margin-bottom:.35rem;}
  .step p{color:var(--text-muted); font-size:.92rem; margin:0;}
  @media (max-width:820px){ .process-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:460px){ .process-grid{grid-template-columns:1fr;} }

  /* ====================== STORM / INSURANCE ====================== */
  .storm-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;}
  .check-list{display:grid; gap:.8rem; margin:1.2rem 0 1.6rem;}
  .check-list li{display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; font-weight:500;}
  .check-list .ck{width:26px;height:26px;border-radius:50%; background:var(--accent); color:var(--ink); display:grid;place-items:center; flex:none;}
  .check-list .ck svg{width:15px;height:15px;}
  .on-dark .check-list li{color:#D7DCE0;}
  @media (max-width:860px){ .storm-grid{grid-template-columns:1fr;} }

  /* ====================== FINANCING BAND ====================== */
  .finance{background:linear-gradient(110deg,var(--accent) 0%, var(--accent-deep) 100%); color:var(--ink); border-radius:var(--r-card); overflow:hidden;}
  .finance-inner{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; padding:clamp(28px,4vw,52px);}
  .finance h2{font-size:var(--fs-h2); color:var(--ink);}
  .finance-inner > div > p{margin-bottom:1.5rem;}
  .finance .big{font-family:"Anton"; font-size:clamp(3rem,8vw,5.5rem); line-height:1; color:var(--ink);}
  .finance .big small{font-size:1rem; font-family:"Barlow"; font-weight:700; display:block; margin-top:.55rem; line-height:1.4;}
  .finance-right .big + .big{margin-top:1.6rem;}
  .finance p{color:#3a1d08; font-weight:500;}
  .finance .btn-primary{background:var(--ink); color:#fff;}
  .finance .btn-primary:hover{background:#000;}
  .finance-right{text-align:center; background:rgba(14,17,19,.08); border-radius:var(--r-card); padding:2.4rem 1.8rem; border:2px dashed rgba(14,17,19,.25);}
  @media (max-width:760px){ .finance-inner{grid-template-columns:1fr; text-align:left;} }

  /* ====================== GALLERY ====================== */
  .filter-pills{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem;}
  .pill{border:1.5px solid var(--line); background:var(--surface); padding:.5rem 1rem; border-radius:999px; font-weight:600; cursor:pointer; font-size:.9rem; transition:.2s;}
  .pill[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
  .gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .shot{position:relative; overflow:hidden; border-radius:var(--r-card);}
  .shot .tag{position:absolute; left:10px; top:10px; z-index:2; background:rgba(14,17,19,.85); color:#fff; font-weight:700; font-size:.72rem;
             padding:.3rem .6rem; border-radius:var(--r-chip); text-transform:uppercase; letter-spacing:.06em;}
  .shot .ph{min-height:240px; transition:transform .6s var(--ease);}
  .shot:hover .ph{transform:scale(1.05);}
  @media (max-width:820px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .gallery-grid{grid-template-columns:1fr;} }

  /* ====================== REVIEWS ====================== */
  .reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .review{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:1.5rem; box-shadow:var(--shadow-sm);}
  .stars{display:flex; gap:2px; color:var(--accent); margin-bottom:.7rem;}
  .stars svg{width:18px;height:18px;}
  .review p{font-size:1rem; color:var(--text); font-style:italic;}
  .review .who{display:flex; align-items:center; gap:.7rem; margin-top:1rem; font-weight:700;}
  .review .who .av{width:40px;height:40px;border-radius:50%; background:var(--surface-2); display:grid;place-items:center; color:var(--text-muted); font-family:"Anton"; flex:none;}
  .review .who small{display:block; font-weight:500; color:var(--text-muted);}
  .review-note{margin-top:1.2rem; text-align:center; font-size:.85rem; color:var(--text-muted);}
  @media (max-width:820px){ .reviews-grid{grid-template-columns:1fr;} }

  /* ====================== SERVICE AREA ====================== */
  .area-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4vw,52px); align-items:center;}
  .towns{columns:2; column-gap:1.4rem; margin-top:1.2rem;}
  .towns li{padding:.35rem 0; font-weight:600; display:flex; align-items:center; gap:.5rem;}
  .towns svg{width:16px;height:16px;color:var(--accent-deep); flex:none;}
  @media (max-width:860px){ .area-grid{grid-template-columns:1fr;} }
  @media (max-width:420px){ .towns{columns:1;} }

  /* ====================== FAQ ====================== */
  .faq-wrap{max-width:820px; margin-inline:auto;}
  .faq{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); margin-bottom:.8rem; overflow:hidden;}
  .faq summary{cursor:pointer; list-style:none; padding:1.15rem 1.3rem; font-weight:700; font-size:1.08rem; display:flex; justify-content:space-between; gap:1rem; align-items:center;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary .pm{width:26px;height:26px;flex:none; position:relative;}
  .faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; background:var(--accent-deep); border-radius:2px; transition:.25s;}
  .faq summary .pm::before{top:50%; left:3px; right:3px; height:3px; transform:translateY(-50%);}
  .faq summary .pm::after{left:50%; top:3px; bottom:3px; width:3px; transform:translateX(-50%);}
  .faq[open] summary .pm::after{transform:translateX(-50%) scaleY(0);}
  .faq .faq-body{padding:0 1.3rem 1.2rem; color:var(--text-muted);}

  /* ====================== FINAL CTA ====================== */
  .final-cta{position:relative; overflow:hidden;}
  .final-cta::before{content:""; position:absolute; inset:0;
    background:radial-gradient(700px 420px at 85% 10%, rgba(244,99,30,.25), transparent 60%);}
  .final-inner{position:relative; text-align:center; max-width:760px; margin-inline:auto;}
  .final-inner h2{font-size:clamp(2.2rem,5.5vw,4rem); margin-bottom:1rem;}
  .final-inner h2 .hl{color:var(--accent);}
  .final-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem;}

  /* ====================== FOOTER ====================== */
  .footer{background:#0A0D0F; color:var(--muted-on-dark); padding-block:clamp(48px,6vw,72px) 0;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem;}
  .footer h4{font-family:"Barlow"; text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; color:#fff; margin-bottom:1rem;}
  .footer a{color:var(--muted-on-dark);}
  .footer a:hover{color:var(--accent);}
  .footer li{padding:.3rem 0;}
  .footer .brand{color:#fff; margin-bottom:.8rem;}
  .footer .brand small{color:var(--muted-on-dark);}
  .foot-contact li{display:flex; gap:.6rem; align-items:flex-start;}
  .foot-contact svg{width:18px;height:18px;color:var(--accent); flex:none; margin-top:3px;}
  .footer-bottom{border-top:1px solid var(--line-dark); margin-top:2.5rem; padding-block:1.4rem; font-size:.84rem;
                 display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
  .footer-bottom a{text-decoration:underline;}
  @media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

  /* ====================== MOBILE STICKY CTA BAR ====================== */
  .mobile-bar{display:none; position:fixed; bottom:0; left:0; right:0; z-index:95; background:var(--ink);
              border-top:1px solid var(--line-dark); padding:.6rem; gap:.5rem; box-shadow:0 -10px 30px -12px rgba(0,0,0,.5);}
  .mobile-bar .btn{flex:1;}
  .mobile-bar .btn-call{background:var(--graphite-2); color:#fff;}
  @media (max-width:720px){ .mobile-bar{display:flex;} body{padding-bottom:74px;} }

  /* ====================== REVEAL ANIMATION ====================== */
  .reveal{opacity:0; transform:translateY(28px);}
  .reveal.is-in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease);}
  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1!important; transform:none!important;} }

  /* ====================== INTERIOR PAGES (shared add-ons) ====================== */

  /* Nav active state */
  .nav-menu a[aria-current="page"]{ color:var(--accent-deep); }
  .nav-menu a[aria-current="page"]::after{ content:""; position:absolute; left:.95rem; right:.95rem; bottom:.18rem; height:3px; background:var(--accent); border-radius:2px; }

  /* Page hero (compact interior banner) */
  .page-hero{ position:relative; background:var(--ink); color:var(--text-on-dark); overflow:hidden; padding-block:clamp(46px,7vw,86px); }
  .page-hero::before{ content:""; position:absolute; inset:0;
    background:radial-gradient(820px 420px at 82% -20%, rgba(244,99,30,.22), transparent 60%); }
  .page-hero .container{ position:relative; z-index:1; }
  .page-hero .eyebrow{ color:var(--accent); }
  .page-hero h1{ font-size:clamp(2.4rem,5.4vw,4.2rem); margin:.5rem 0 .85rem; }
  .page-hero h1 .hl{ color:var(--accent); }
  .page-hero .lead{ color:#D7DCE0; max-width:62ch; }
  .breadcrumb{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.85rem; color:var(--muted-on-dark); margin-top:1.3rem; }
  .breadcrumb a{ color:var(--muted-on-dark); }
  .breadcrumb a:hover{ color:var(--accent); }
  .breadcrumb svg{ width:13px; height:13px; opacity:.6; }
  .breadcrumb [aria-current="page"]{ color:var(--text-on-dark); font-weight:600; }

  /* Media row (services zig-zag) */
  .media-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
  .media-row + .media-row{ margin-top:clamp(46px,6vw,82px); }
  .media-row.reverse .media-row-media{ order:2; }
  .media-row .ph{ min-height:330px; height:100%; }
  .media-row .svc-tag{ color:var(--accent-deep); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; margin-bottom:.55rem; }
  .media-row h3{ font-family:"Barlow"; text-transform:none; letter-spacing:0; font-weight:800; font-size:var(--fs-h3); margin-bottom:.45rem; }
  .media-row p{ color:var(--text-muted); }
  .media-row .check-list{ margin:1rem 0 1.4rem; }
  @media (max-width:820px){
    .media-row{ grid-template-columns:1fr; }
    .media-row.reverse .media-row-media{ order:0; }
    .media-row .ph{ min-height:240px; }
  }

  /* Values / 3-card */
  .values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .value{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:1.6rem; box-shadow:var(--shadow-sm); }
  .value .v-ico{ width:50px; height:50px; border-radius:var(--r-btn); background:var(--accent-soft); color:var(--accent-deep); display:grid; place-items:center; margin-bottom:.9rem; }
  .value .v-ico svg{ width:26px; height:26px; }
  .value h3{ font-family:"Barlow"; text-transform:none; letter-spacing:0; font-weight:800; font-size:1.15rem; margin-bottom:.4rem; }
  .value p{ color:var(--text-muted); font-size:.95rem; margin:0; }
  @media (max-width:820px){ .values-grid{ grid-template-columns:1fr; } }

  /* Contact page */
  .contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:start; }
  .info-list{ display:grid; gap:.9rem; margin-top:1.4rem; }
  .info-card{ display:flex; gap:1rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:1rem 1.2rem; box-shadow:var(--shadow-sm); color:inherit; }
  a.info-card{ transition:transform .15s var(--ease), box-shadow .2s; }
  a.info-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
  .info-card .i-ico{ width:48px; height:48px; border-radius:var(--r-btn); background:var(--ink); color:var(--accent); display:grid; place-items:center; flex:none; }
  .info-card .i-ico svg{ width:23px; height:23px; }
  .info-card .i-k{ font-weight:600; color:var(--text-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
  .info-card .i-v{ font-family:"Anton"; font-size:1.25rem; color:var(--ink); line-height:1.1; }
  .contact-form-card{ background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--accent); border-radius:var(--r-card); padding:clamp(20px,3vw,34px); box-shadow:var(--shadow); }
  .field textarea{ font:inherit; padding:.8rem .9rem; border:1.5px solid var(--line); border-radius:var(--r-input); background:var(--bone); color:var(--text); resize:vertical; min-height:140px; }
  .field textarea:focus{ border-color:var(--accent); background:#fff; outline:none; }
  @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

  /* Prose helper */
  .prose p{ max-width:65ch; color:var(--text-muted); }

  /* ====================== LEGAL PAGES ====================== */
  .legal-updated{ color:var(--muted-on-dark); font-size:.9rem; margin-top:.6rem; }
  .legal-body{ max-width:760px; }
  .legal-body h2{ font-family:"Barlow"; text-transform:none; letter-spacing:0; font-weight:800; font-size:1.3rem; color:var(--text); margin:2rem 0 .6rem; }
  .legal-body p{ color:var(--text-muted); }
  .legal-body ul{ list-style:disc; padding-left:1.3rem; margin:0 0 1.1rem; color:var(--text-muted); }
  .legal-body li{ margin-bottom:.5rem; }
  .legal-body a:not(.btn){ color:var(--accent-deep); font-weight:600; text-decoration:underline; }
  .legal-back{ margin-top:1.6rem; }

  /* ====================== SERVICE-AREA MAP (Leaflet, full-bleed) ====================== */
  .map-wrap{ position:relative; overflow:hidden; min-height:clamp(460px,62vh,660px); background:var(--concrete); }
  .map-fallback{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.2); transition:opacity .6s ease; }
  .map-canvas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; }
  .map-canvas .leaflet-container{ background:var(--concrete); font-family:"Barlow",sans-serif; }
  .poi-icon{ background:transparent; border:0; }
  .area-poi{ width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid #fff; cursor:pointer; box-shadow:0 2px 8px rgba(14,17,19,.4); position:relative; }
  .area-poi::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(244,99,30,.6); animation:poiPulse 2.4s ease-out infinite; }
  @keyframes poiPulse{ 0%{transform:scale(1);opacity:.7;} 100%{transform:scale(2.6);opacity:0;} }
  @media (prefers-reduced-motion: reduce){ .area-poi::after{ animation:none; } }
  .leaflet-popup-content{ font-family:"Barlow",sans-serif; margin:.55rem .85rem; line-height:1.4; }
  .leaflet-popup-content strong{ font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400; color:var(--accent-deep); letter-spacing:.03em; }
  .leaflet-popup-content-wrapper{ border-radius:8px; box-shadow:0 6px 20px rgba(14,17,19,.22); }
  .leaflet-control-attribution{ font-size:10px; }
  .map-fade{ position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(242,244,246,0) 50%, rgba(242,244,246,.5) 80%, rgba(242,244,246,.92) 100%),
      linear-gradient(180deg, rgba(242,244,246,.6) 0%, rgba(242,244,246,0) 14%, rgba(242,244,246,0) 86%, rgba(242,244,246,.6) 100%); }
  .map-inner{ position:relative; z-index:3; display:flex; justify-content:flex-end; padding-block:clamp(2rem,4vw,3.5rem); pointer-events:none; min-height:inherit; align-items:center; }
  .area-card{ pointer-events:auto; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-radius:var(--r-card); border-top:4px solid var(--accent); padding:clamp(1.8rem,3vw,2.6rem); width:min(420px,100%); box-shadow:0 20px 60px rgba(14,17,19,.2); }
  .area-card h3{ font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.5px; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink); margin-bottom:.6rem; }
  .area-card > p{ color:var(--text-muted); margin:0 0 1.5rem; }
  .area-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
  .area-btn{ display:block; width:100%; text-align:center; background:#fff; color:var(--ink); cursor:pointer; font-family:"Barlow",sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.05em; text-transform:uppercase; padding:.85rem 1rem; border-radius:var(--r-btn); border:1.5px solid var(--line); transition:background .2s,color .2s,transform .15s,border-color .2s; }
  .area-btn:hover{ transform:translateY(-2px); background:var(--concrete); border-color:var(--ink); }
  .area-btn-active{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
  .area-btn-active:hover{ background:var(--accent-deep); color:#fff; border-color:var(--accent-deep); }
  @media (max-width:860px){
    .map-wrap{ min-height:0; display:block; }
    .map-canvas{ position:relative; height:340px; z-index:1; }
    .map-fallback{ height:340px; bottom:auto; }
    .map-fade{ display:none; }
    .map-inner{ position:static; display:block; padding:1.4rem 0 0; pointer-events:auto; }
    .area-card{ width:100%; }
  }

  /* ====================== BEFORE / AFTER COMPARISON SLIDER ====================== */
  .ba-slider{ --pos:50%; position:relative; width:min(100%,980px); margin-inline:auto; aspect-ratio:1344/707;
    border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow); user-select:none; touch-action:pan-y; background:var(--ink); }
  .ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
  .ba-before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
  .ba-badge{ position:absolute; top:12px; z-index:3; font-weight:700; font-size:.72rem; padding:.3rem .6rem;
    border-radius:var(--r-chip); text-transform:uppercase; letter-spacing:.06em; pointer-events:none; }
  .ba-badge-before{ left:12px; background:rgba(14,17,19,.85); color:#fff; }
  .ba-badge-after{ right:12px; background:var(--accent); color:var(--ink); }
  .ba-divider{ position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:#fff; transform:translateX(-1.5px); z-index:3; pointer-events:none; }
  .ba-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%;
    background:#fff; color:var(--ink); display:grid; place-items:center; box-shadow:var(--shadow); }
  .ba-handle svg{ width:22px; height:22px; }
  .ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; }
  .ba-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:52px; height:100%; cursor:ew-resize; }
  .ba-range::-moz-range-thumb{ width:52px; height:100%; border:0; background:transparent; cursor:ew-resize; }
  .ba-range:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-card); }

  /* ====================== LIGHTBOX ====================== */
  .shot .has-photo img{ cursor:zoom-in; }
  .lightbox{ position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:24px;
    background:rgba(10,13,15,.93); opacity:0; transition:opacity .2s var(--ease); }
  .lightbox.open{ display:grid; opacity:1; }
  .lb-figure{ margin:0; max-width:min(1100px,94vw); max-height:90vh; display:flex; flex-direction:column; gap:.7rem; align-items:center; }
  .lb-img{ max-width:100%; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:var(--r-card); box-shadow:var(--shadow); }
  .lb-cap{ color:#fff; text-align:center; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
  .lb-close{ position:fixed; top:18px; right:22px; width:48px; height:48px; border:0; border-radius:50%;
    background:rgba(255,255,255,.14); color:#fff; font-size:1.9rem; line-height:1; cursor:pointer; z-index:301; transition:background .2s,color .2s; }
  .lb-close:hover{ background:var(--accent); color:var(--ink); }

/* Netlify honeypot: off-screen, never shown to humans. */
.hp-field { position: absolute; left: -9999px; }

  /* ====================== SERVICE DETAIL PAGE (V2 — article + sticky sidebar) ======================
     Used by service-details.html and any per-service clones. Additive: new .sd-* classes only. */
  .sd-layout{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr); gap:clamp(28px,4vw,56px); align-items:start; }
  .sd-article > .ph{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }
  .sd-article h2{ font-size:clamp(1.45rem,2.4vw,2rem); margin:clamp(2rem,3.5vw,2.8rem) 0 .8rem; }
  .sd-article h2:first-of-type{ margin-top:0; }
  .sd-article p{ color:var(--text-muted); max-width:65ch; }
  .sd-article .check-list{ margin:1.1rem 0 .4rem; }
  .sd-article .process-grid{ grid-template-columns:repeat(2,1fr); margin-top:1.2rem; }

  /* Material / system option rows */
  .sd-options{ display:grid; gap:14px; margin-top:1.2rem; }
  .sd-option{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--r-card); padding:1.15rem 1.3rem; }
  .sd-option h3{ font-family:"Barlow"; text-transform:none; letter-spacing:0; font-weight:800; font-size:1.08rem; margin-bottom:.3rem; }
  .sd-option h3 small{ font-weight:600; color:var(--text-muted); font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; margin-left:.5rem; }
  .sd-option p{ margin:0; font-size:.95rem; }

  /* Sticky rail: estimate card + trust card */
  .sd-aside{ position:sticky; top:104px; display:grid; gap:18px; }
  .sd-aside .quote-card .btn{ margin-top:.2rem; }
  .sd-tel-big{ display:block; text-align:center; font-family:"Anton"; font-size:1.55rem; letter-spacing:.5px; color:var(--ink); margin-top:.9rem; }
  .sd-tel-big:hover{ color:var(--accent-deep); }
  .sd-tel-label{ display:block; text-align:center; font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-top:.15rem; }
  .sd-aside .check-list{ margin:.9rem 0 0; gap:.65rem; }
  .sd-aside .check-list li{ font-size:.92rem; font-weight:600; }
  .sd-aside .check-list .ck{ width:22px; height:22px; }
  .sd-aside .check-list .ck svg{ width:13px; height:13px; }

  @media (max-width:920px){
    .sd-layout{ grid-template-columns:1fr; }
    .sd-aside{ position:static; }
  }
  @media (max-width:560px){
    .sd-article .process-grid{ grid-template-columns:1fr; }
  }