:root{
      /* Industrial neutral palette with a rust accent */
      --bg:#0f1113;            /* near-black */
      --card:#171a1d;          /* gunmetal */
      --muted:#202429;         /* steel */
      --text:#e7ecef;          /* off-white */
      --sub:#a7b0b7;           /* cool gray */
      --accent:#c25b32;        /* rust */
      --accent-2:#00c2a8;      /* teal option */
      --line:#2a2f35;          /* divider */
      --ok:#37d67a;            /* success */
      --warn:#ffb703;          /* warning */
      --err:#ff5a5f;           /* error */
      --maxw:1200px;
      --radius:18px;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:radial-gradient(1200px 600px at 70% -10%, #1a1f24 0%, var(--bg) 60%);
      line-height:1.6;
    }
    a{color:var(--text); text-decoration:none}
    img{max-width:100%; display:block}
    .container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px}

    /* Header */
    header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(10px); background:rgba(15,17,19,.7); border-bottom:1px solid var(--line)}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.5px}
    .brand-mark{width:36px; height:36px; border-radius:10px; background:linear-gradient(145deg, var(--accent), #7c3415); display:grid; place-items:center; color:#1a0c06; font-weight:900}
    .brand small{display:block; font-weight:600; color:var(--sub); font-size:12px; letter-spacing:1px}
    nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0}
    .cta{background:var(--accent); color:#2b140a; padding:10px 14px; border-radius:12px; font-weight:700; box-shadow:var(--shadow)}
    .menu-btn{display:none; background:transparent; border:1px solid var(--line); color:var(--text); padding:8px 10px; border-radius:10px}

    /* Mobile menu */
    #mobileMenu{display:none; border-top:1px solid var(--line); background:rgba(23,26,29,.95)}
#mobileMenu[hidden]{display:none}
.vh{position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap}
.menu-btn{display:none; align-items:center; gap:10px}
.menu-btn .hamburger{display:inline-grid; gap:5px}
.menu-btn .bar{width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.menu-btn[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    #mobileMenu a{display:block; padding:14px 20px; border-bottom:1px solid var(--line)}

    /* Hero */
    .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
    .hero-inner{display:grid; gap:26px; grid-template-columns:1.1fr .9fr; align-items:center; padding:56px 0}
    .tag{display:inline-flex; align-items:center; gap:8px; background:#101417; border:1px solid var(--line); color:var(--sub); padding:8px 12px; border-radius:999px; font-size:12px}
    .hero h1{font-size:clamp(28px, 4vw, 48px); line-height:1.15; margin:10px 0 12px}
    .hero p{color:var(--sub); font-size:18px; max-width:58ch}
    .hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:var(--muted); color:var(--text); font-weight:700}
    .btn.primary{background:var(--accent); color:#2b140a; border-color:transparent}
    .hero-visual{position:relative}
    .hero-card{background:linear-gradient(180deg,#1d2227, #14171a); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
    .hero-card img{aspect-ratio:4/3; object-fit:cover; opacity:.9}
    .hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:14px}
    .stat{background:#0e1114; border:1px solid var(--line); border-radius:12px; padding:12px}
    .stat b{display:block; font-size:20px}
    .stat span{color:var(--sub); font-size:12px}

    /* Sections */
    section{padding:64px 0; border-bottom:1px solid var(--line)}
    .grid{display:grid; gap:22px}
    .two{grid-template-columns:1fr 1fr}
    .three{grid-template-columns:repeat(3,1fr)}
    .four{grid-template-columns:repeat(4,1fr)}

    .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
    .card h3{margin:8px 0}
    .eyebrow{font-size:12px; letter-spacing:1px; color:var(--sub); text-transform:uppercase}
    h2{font-size:clamp(24px, 3vw, 34px); margin:0 0 10px}
    .lead{color:var(--sub); max-width:65ch}

    /* Services */
    .service{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start}
    .icon{width:36px; height:36px; border-radius:10px; background:#0e1215; border:1px solid var(--line); display:grid; place-items:center}

    /* Gallery */
    .gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:10px}
    .g-item{grid-column:span 4; position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line)}
    .g-item img{aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease}
    .g-item:hover img{transform:scale(1.05)}

    /* Lightbox */
    .lightbox{position:fixed; inset:0; display:none; background:rgba(0,0,0,.8); place-items:center; z-index:100}
    .lightbox img{max-width:min(96vw,1200px); max-height:85vh; border-radius:12px; box-shadow:var(--shadow)}

    /* Process timeline */
    .timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
    .step{position:relative; padding:18px; border:1px dashed #2a3036; border-radius:14px}
    .step b{font-size:22px}

    /* Materials */
    .mat{display:flex; gap:12px; align-items:center}
    .swatch{width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background-size:cover; background-position:center}
    .swatch { cursor: zoom-in; }

    /* Comparison */
    .compare{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
    .compare table{width:100%; border-collapse:collapse}
    .compare th, .compare td{padding:14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
    .compare thead th{background:#12161a}
    .badge{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:var(--sub)}

    /* Testimonials */
    .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    blockquote{margin:0; background:#101417; border:1px solid var(--line); border-radius:14px; padding:18px}
    blockquote footer{color:var(--sub); margin-top:8px}

    /* CTA band */
    .cta-band{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center; background:linear-gradient(145deg,#121619,#0f1316); border:1px solid var(--line); border-radius:var(--radius); padding:24px}

    /* FAQ */
    details{background:#101417; border:1px solid var(--line); border-radius:12px; padding:14px}
    summary{cursor:pointer; font-weight:700}
    details[open]{background:#0d1114}

    /* Contact */
    form{display:grid; gap:12px}
    input,select,textarea{width:100%; padding:12px 14px; background:#0e1215; color:var(--text); border:1px solid var(--line); border-radius:12px}
    label{font-size:14px; color:var(--sub)}
    .form-row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
    .notice{font-size:13px; color:var(--sub)}
    .toast{position:fixed; right:16px; bottom:16px; background:#0f1417; border:1px solid var(--line); padding:12px 14px; border-radius:12px; display:none}

    /* Footer */
    footer{padding:28px 0; color:var(--sub)}
    .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
    .foot-grid a{color:var(--sub)}

    /* Utilities */
    .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:18px} .mt-6{margin-top:26px}
    .mb-0{margin-bottom:0}

    /* Responsive */
    @media (max-width: 980px){
      .hero-inner{grid-template-columns:1fr; padding:36px 0}
      .two{grid-template-columns:1fr}
      .three{grid-template-columns:1fr}
      .four{grid-template-columns:1fr 1fr}
      .timeline{grid-template-columns:1fr 1fr}
      .quotes{grid-template-columns:1fr 1fr}
      .cta-band{grid-template-columns:1fr}
      .foot-grid{grid-template-columns:1fr 1fr}
      .form-row{grid-template-columns:1fr}
      .menu-btn{display:inline-flex}
      nav ul{display:none}
      #mobileMenu{display:block}
    }
    @media (max-width: 640px){
      .four{grid-template-columns:1fr}
      .gallery .g-item{grid-column:span 12}
      .quotes{grid-template-columns:1fr}
      .foot-grid{grid-template-columns:1fr}
    }
    /* Mobile menu slide animation (overrides earlier rule) */
    #mobileMenu{display:block; max-height:0; overflow:hidden; opacity:0; transform:translateY(-4px); transition:max-height .35s ease, opacity .25s ease, transform .25s ease}
    #mobileMenu.open{max-height:80vh; opacity:1; transform:translateY(0)}
    /* Mobile menu slide animation + backdrop blur */
    #mobileMenu{display:block; max-height:0; overflow:hidden; opacity:0; transform:translateY(-4px); transition:max-height .35s ease, opacity .25s ease, transform .25s ease; backdrop-filter:saturate(130%) blur(10px); background:rgba(23,26,29,.75); border-top:1px solid var(--line); padding-inline:0}
    #mobileMenu.open{max-height:80vh; opacity:1; transform:translateY(0)}
    body.no-scroll{overflow:hidden}

    /* Accordion styles */
    .accordion-group{border-top:1px solid var(--line)}
    .accordion-toggle{width:100%; text-align:left; background:transparent; border:none; color:var(--text); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; font-weight:700}
    .accordion-toggle .chev{transition:transform .25s ease}
    .accordion.open .accordion-toggle .chev{transform:rotate(180deg)}
    .submenu{max-height:0; overflow:hidden; transition:max-height .3s ease}
    .submenu a{display:block; padding:12px 28px; border-top:1px solid var(--line)}

    /* Mobile menu slide animation + backdrop blur */
    #mobileMenu{display:block; max-height:0; overflow:hidden; opacity:0; transform:translateY(-4px); transition:max-height .35s ease, opacity .25s ease, transform .25s ease; backdrop-filter:saturate(130%) blur(10px); background:rgba(23,26,29,.75); border-top:1px solid var(--line); padding-inline:0}
    #mobileMenu.open{max-height:80vh; opacity:1; transform:translateY(0)}
    body.no-scroll{overflow:hidden}

    /* Accordion styles */
    .accordion-group{border-top:1px solid var(--line)}
    .accordion-toggle{width:100%; text-align:left; background:transparent; border:none; color:var(--text); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; font-weight:700}
    .accordion-toggle .chev{transition:transform .25s ease}
    .accordion.open .accordion-toggle .chev{transform:rotate(180deg)}
    .submenu{max-height:0; overflow:hidden; transition:max-height .3s ease}
    .submenu a{display:block; padding:12px 28px; border-top:1px solid var(--line)}

    /* Dropzone */
    .dropzone{border:1px dashed #2a3036; border-radius:12px; padding:16px; background:#0f1417; display:flex; align-items:center; justify-content:space-between; gap:12px}
    .dropzone .dz-text{color:var(--sub); font-size:14px}
    .dropzone .dz-btn{border:1px solid var(--line); padding:10px 12px; border-radius:10px; background:#0e1215; color:var(--text); font-weight:700}
    .dropzone.is-dragover{background:#12181c}