*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#CC0000;
  --red-dark:#A00000;
  --red-light:#E81010;
  --dark:#111111;
  --dark2:#1C1C1C;
  --gray:#2A2A2A;
  --light:#F7F7F7;
  --white:#FFFFFF;
  --text-muted:#888;

  --text-body:#555;
  --text-soft:#666;
  --text-strong:#444;
  --border:#ddd;
  --border-2:#d8d8d8;
  --text-faint:#8a8a8a;
  --ok-bg:#e8f6ec;
  --ok-fg:#2d8a4e;
  --text-dim:#999;
}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;color:var(--dark);background:var(--white);cursor:none;overflow-x:hidden}
/* CURSOR */
#cursor-dot{position:fixed;width:8px;height:8px;background:var(--red);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%)}
#cursor-ring{position:fixed;width:32px;height:32px;border:2px solid var(--red);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%)}
@media(hover:none){#cursor-dot,#cursor-ring{display:none}body{cursor:auto}}/* LOADING SCREEN */
#loader{position:fixed;inset:0;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99997;transition:opacity .5s ease}
#loader.fade-out{opacity:0;pointer-events:none}
#loader img{width:160px;max-width:80vw;filter:drop-shadow(0 4px 24px rgba(204,0,0,.6))}
#loader-track{width:220px;height:4px;background:rgba(255,255,255,.15);border-radius:4px;margin-top:32px;overflow:hidden}
#loader-bar{height:100%;width:0;background:var(--white);border-radius:4px;transition:width 1.5s cubic-bezier(.4,0,.2,1)}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(17,17,17,.96);backdrop-filter:blur(8px);border-bottom:2px solid var(--red)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:70px}
.nav-logo img{height:52px;width:auto;display:block}
.navlinks{display:flex;align-items:center;gap:32px;list-style:none}
.navlinks a{color:var(--white);text-decoration:none;font-size:.88rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase;transition:color .2s}
.navlinks a:hover{color:var(--red)}
.nav-cta{background:var(--red)!important;color:var(--white)!important;padding:10px 22px;border-radius:4px;transition:background .2s!important}
.nav-cta:hover{background:var(--red-dark)!important;color:var(--white)!important}
.menu-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.menu-btn span{display:block;width:26px;height:2px;background:var(--white);border-radius:2px;transition:all .3s}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* HERO */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;padding-top:70px}
.hero-bg{position:absolute;inset:0;background-image:url('/images/gallery/20260417_173344.webp');background-size:cover;background-position:center;filter:brightness(.32)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(204,0,0,.2) 0%,rgba(0,0,0,.55) 100%)}
.hero-content{position:relative;max-width:1200px;margin:0 auto;padding:80px 20px;width:100%}
.hero-badge{display:inline-block;background:var(--red);color:var(--white);font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:6px 18px;border-radius:2px;margin-bottom:24px}
.hero h1{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:800;color:var(--white);line-height:1.1;margin-bottom:20px;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero h1 span{color:var(--red)}
.hero p{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,.82);max-width:560px;margin-bottom:40px;line-height:1.75}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.btn-primary{display:inline-block;background:var(--red);color:var(--white);padding:16px 36px;border-radius:4px;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase;transition:background .2s,transform .15s;border:2px solid var(--red)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px)}
.btn-outline{display:inline-block;background:transparent;color:var(--white);padding:16px 36px;border-radius:4px;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase;border:2px solid rgba(255,255,255,.5);transition:border-color .2s,background .2s,transform .15s}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08);transform:translateY(-2px)}
.hero-stats{display:flex;gap:56px;margin-top:64px;flex-wrap:wrap}
.hero-stat .num{font-size:2.6rem;font-weight:800;color:var(--white)}
.hero-stat .lbl{font-size:.75rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
@media(max-width:768px){  .hero-btns{flex-direction:column}
  .btn-primary,.btn-outline{width:100%;text-align:center;padding:16px 20px}
  .hero-stats{gap:28px}
  .hero-stat .num{font-size:2rem}
}/* TRUST BAR */
.trust-bar{background:var(--red);padding:16px 20px}
.trust-bar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:9px;color:var(--white);font-size:.82rem;font-weight:600;letter-spacing:.3px}
.trust-icon{opacity:.85}
@media(max-width:600px){.trust-bar-inner{gap:16px;justify-content:flex-start}.trust-item{font-size:.78rem}}/* SECTIONS */
section{padding:100px 20px}
.section-inner{max-width:1200px;margin:0 auto}
.section-label{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.section-title{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800;color:var(--dark);line-height:1.2;margin-bottom:16px}
.section-sub{font-size:1rem;color:var(--text-body);max-width:560px;line-height:1.75}
@media(max-width:768px){section{padding:64px 16px}}/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:0}
.about-img-wrap{position:relative}
.about-img-wrap img{width:100%;border-radius:8px;display:block;object-fit:cover;height:500px}
.about-badge{position:absolute;bottom:-24px;right:-24px;background:var(--red);color:var(--white);padding:26px 22px;border-radius:8px;text-align:center;min-width:120px;box-shadow:0 8px 32px rgba(204,0,0,.35)}
.about-badge .big{font-size:2.6rem;font-weight:800;display:block;line-height:1}
.about-badge .sm{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-top:5px;opacity:.85}
.about-text h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;color:var(--dark);margin-bottom:20px;line-height:1.2}
.about-text p{color:var(--text-body);line-height:1.8;margin-bottom:16px;font-size:.98rem}
.about-creds{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.cred-item{display:flex;align-items:center;gap:12px;font-size:.92rem;font-weight:600;color:var(--dark)}
.cred-check{width:22px;height:22px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:.6rem;flex-shrink:0;font-weight:800}
@media(max-width:768px){  .about-grid{grid-template-columns:1fr;gap:48px}
  .about-img-wrap img{height:300px}
  .about-badge{right:12px;bottom:-16px;padding:18px 14px}
  .about-badge .big{font-size:2rem}
}/* SERVICES */
.services-bg{background:var(--light)}
.services-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;flex-wrap:wrap;gap:20px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.service-card{background:var(--white);border-radius:8px;overflow:hidden;transition:transform .25s,box-shadow .25s;border:1px solid rgba(0,0,0,.06)}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.12)}
.service-img{height:210px;overflow:hidden}
.service-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.service-card:hover .service-img img{transform:scale(1.05)}
.service-body{padding:26px}
.service-icon{font-size:1.7rem;margin-bottom:12px}
.service-body h3{font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:8px}
.service-body p{color:var(--text-soft);font-size:.9rem;line-height:1.65}
.service-link{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700;font-size:.82rem;text-decoration:none;margin-top:16px;text-transform:uppercase;letter-spacing:.5px;transition:gap .2s}
.service-link:hover{gap:10px}
/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:48px}
.gallery-item{overflow:hidden;border-radius:6px;aspect-ratio:4/3}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .3s}
.gallery-item:hover img{transform:scale(1.07);filter:brightness(1.05)}
.gallery-item:first-child{grid-column:span 2;aspect-ratio:16/7}
@media(max-width:768px){  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-item:first-child{grid-column:span 2;aspect-ratio:16/9}
}@media(max-width:500px){  .gallery-grid{grid-template-columns:1fr}
  .gallery-item:first-child{grid-column:span 1;aspect-ratio:4/3}
}/* WHY US */
.why-bg{background:var(--dark)}
.why-bg .section-inner .section-title{color:var(--white)}
.why-bg .section-inner .section-sub{color:rgba(255,255,255,.55)}
.why-bg .section-inner .section-label{color:var(--red)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:48px}
.why-card{text-align:center;padding:36px 22px;background:rgba(255,255,255,.04);border-radius:8px;border:1px solid rgba(255,255,255,.07);transition:border-color .25s,background .25s}
.why-card:hover{border-color:var(--red);background:rgba(204,0,0,.06)}
.why-num{font-size:3.2rem;font-weight:800;color:var(--red);line-height:1;margin-bottom:18px;font-family:Georgia,serif}
.why-card h3{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:10px}
.why-card p{color:rgba(255,255,255,.5);font-size:.87rem;line-height:1.65}
/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px}
.testi-card{background:var(--white);border:1px solid rgba(0,0,0,.07);border-radius:8px;padding:32px;position:relative;transition:transform .25s,box-shadow .25s}
.testi-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.testi-stars{color:var(--red);font-size:1.05rem;margin-bottom:16px;letter-spacing:2px}
.testi-quote{color:var(--text-strong);font-size:.94rem;line-height:1.75;margin-bottom:22px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:1rem;flex-shrink:0}
.testi-name{font-weight:700;font-size:.9rem;color:var(--dark)}
.testi-loc{font-size:.76rem;color:var(--text-muted);margin-top:2px}
.testi-big-quote{position:absolute;top:18px;right:22px;font-size:4rem;color:rgba(204,0,0,.08);font-family:Georgia,serif;line-height:1;pointer-events:none}
/* CTA BANNER */
.cta-banner{background:var(--red);padding:90px 20px;text-align:center}
.cta-banner h2{font-size:clamp(1.7rem,4vw,3rem);font-weight:800;color:var(--white);margin-bottom:16px}
.cta-banner p{color:rgba(255,255,255,.85);font-size:1.1rem;margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7}
.btn-white{display:inline-block;background:var(--white);color:var(--red);padding:18px 44px;border-radius:4px;text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:.5px;text-transform:uppercase;transition:background .2s,transform .15s}
.btn-white:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}
/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;margin-top:60px;align-items:start}
.contact-info h3{font-size:1.4rem;font-weight:700;color:var(--dark);margin-bottom:28px}
.contact-items{display:flex;flex-direction:column;gap:22px}
.contact-item{display:flex;align-items:flex-start;gap:16px}
.contact-icon{width:50px;height:50px;background:var(--red);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.2rem;flex-shrink:0}
.contact-item-text strong{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);margin-bottom:4px}
.contact-item-text a,.contact-item-text span{font-size:.98rem;color:var(--dark);text-decoration:none;font-weight:500;line-height:1.5}
.contact-item-text a:hover{color:var(--red)}
.contact-form{background:var(--light);border-radius:8px;padding:44px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.form-group label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-body)}
.form-group input,.form-group textarea,.form-group select{padding:13px 16px;border:1.5px solid var(--border);border-radius:4px;font-size:.95rem;font-family:inherit;background:var(--white);transition:border-color .2s;color:var(--dark)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--red)}
.form-group textarea{resize:vertical;min-height:120px}
.btn-submit{width:100%;background:var(--red);color:var(--white);border:none;padding:16px;border-radius:4px;font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:background .2s,transform .15s}
.btn-submit:hover{background:var(--red-dark);transform:translateY(-1px)}
@media(max-width:768px){  .contact-grid{grid-template-columns:1fr;gap:40px}
  .form-row{grid-template-columns:1fr}
  .contact-form{padding:24px 16px}
}/* FOOTER */
footer{background:var(--dark2);padding:64px 20px 24px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand img{height:56px;width:auto;margin-bottom:18px;display:block}
.footer-brand p{color:rgba(255,255,255,.45);font-size:.88rem;line-height:1.75;max-width:280px}
.footer-col h4{color:var(--white);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{color:rgba(255,255,255,.45);text-decoration:none;font-size:.87rem;transition:color .2s}
.footer-col ul a:hover{color:var(--red)}
.footer-divider{border:none;border-top:1px solid rgba(255,255,255,.08);margin-bottom:22px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{color:rgba(255,255,255,.35);font-size:.8rem}
.footer-bottom a{color:rgba(255,255,255,.35);text-decoration:none;transition:color .2s}
.footer-bottom a:hover{color:var(--red)}
@media(max-width:768px){  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:span 2}
  .footer-bottom{flex-direction:column;text-align:center}
}@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:span 1}}/* SCROLL ANIMATIONS */
.fade-up{opacity:0;transform:translateY(32px);transition:opacity .65s ease,transform .65s ease}
.fade-up.visible{opacity:1;transform:none}
/* icons (replace emoji) */
.service-icon{color:var(--red);line-height:0;margin-bottom:14px}
.service-icon svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.contact-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* loader logo: stop flex main-axis stretch */
#loader img{height:auto;flex:0 0 auto;align-self:center;object-fit:contain}
/* hero: two columns with quote form on the right */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%}
.hero-left{min-width:0}
.hero-grid .hero-left h1{font-size:clamp(3rem,5.4vw,4.8rem)}
.hero-grid .hero-left p{max-width:520px}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding-top:90px}}/* quote card */
.qcard{background:var(--white);border-radius:10px;padding:30px 28px 26px;box-shadow:0 26px 70px rgba(0,0,0,.45);border-top:4px solid var(--red);position:relative}
.qcard h3{font-size:1.32rem;font-weight:800;color:var(--dark);line-height:1.25;margin-bottom:6px}
.qcard .qsub{font-size:.86rem;color:var(--text-soft);margin-bottom:20px;line-height:1.6}
.qcard .form-group{margin-bottom:14px}
.qcard label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-body);margin-bottom:6px}
.qcard input,.qcard select,.qcard textarea{width:100%;padding:12px 14px;border:1px solid var(--border-2);border-radius:5px;font-family:inherit;font-size:.94rem;color:var(--dark);background:var(--white);transition:border-color .18s,box-shadow .18s}
.qcard input:focus,.qcard select:focus,.qcard textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(204,0,0,.12)}
.qcard textarea{resize:vertical;min-height:82px}
.qcard .btn-submit{width:100%;background:var(--red);color:var(--white);border:none;padding:15px;border-radius:5px;font-family:inherit;font-weight:800;font-size:.92rem;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;transition:background .2s}
.qcard .btn-submit:hover{background:var(--red-dark)}
.qcard .btn-submit[disabled]{opacity:.65;cursor:not-allowed}
.qcard .qnote{font-size:.72rem;color:var(--text-faint);text-align:center;margin-top:14px;margin-bottom:0;max-width:none;line-height:1.5}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.qrow{grid-template-columns:1fr}}/* form success state */
.form-done{display:none;text-align:center;padding:34px 10px 26px}
.form-wrap.done .form-body{display:none}
.form-wrap.done .form-done{display:block}
.tick{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--ok-bg);display:flex;align-items:center;justify-content:center;animation:tickPop .38s cubic-bezier(.2,.9,.3,1.4) both}
.tick svg{width:34px;height:34px;stroke:var(--ok-fg);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tick svg path{stroke-dasharray:32;stroke-dashoffset:32;animation:tickDraw .42s .22s ease forwards}
@keyframes tickPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes tickDraw{to{stroke-dashoffset:0}}
.form-done p{font-size:1.06rem;font-weight:700;color:var(--dark);line-height:1.5}
.form-done span{display:block;font-size:.85rem;font-weight:400;color:var(--text-soft);margin-top:8px}
.contact-form .form-done p{color:var(--dark)}
/* about collage */
.about-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;border-radius:8px;overflow:hidden}
.about-collage img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;border-radius:6px}
@media(max-width:768px){.about-collage{gap:8px}}/* gallery button */
.gal-cta{display:flex;justify-content:center;margin:26px 0 6px}
.btn-gallery{display:inline-block;background:var(--red);color:var(--white);padding:15px 38px;border-radius:4px;text-decoration:none;font-weight:800;font-size:.9rem;letter-spacing:.6px;text-transform:uppercase;border:2px solid var(--red);transition:background .2s,transform .15s}
.btn-gallery:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px)}
/* reviews carousel */
.rev-wrap{position:relative;margin-top:48px}
.rev-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-card{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;background:var(--white);border-radius:8px;padding:30px 26px;border:1px solid rgba(0,0,0,.07);box-shadow:0 8px 26px rgba(0,0,0,.05);display:flex;flex-direction:column}
@media(max-width:1000px){.rev-card{flex:0 0 calc((100% - 24px)/2)}}@media(max-width:680px){.rev-card{flex:0 0 100%}.rev-track{gap:16px}}.rev-stars{color:var(--red);font-size:1rem;letter-spacing:2px;margin-bottom:14px}
.rev-quote{color:var(--text-body);font-size:.93rem;line-height:1.72;font-style:italic;flex:1}
.rev-author{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(0,0,0,.07)}
.rev-avatar{width:42px;height:42px;border-radius:50%;background:var(--red);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex-shrink:0}
.rev-name{font-weight:700;color:var(--dark);font-size:.92rem}
.rev-src{font-size:.76rem;color:var(--text-dim);margin-top:2px}
.rev-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:32px}
.rev-btn{width:46px;height:46px;border-radius:50%;border:2px solid rgba(0,0,0,.14);background:var(--white);color:var(--dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.rev-btn:hover:not([disabled]){background:var(--red);border-color:var(--red);color:var(--white)}
.rev-btn[disabled]{opacity:.3;cursor:default}
.rev-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rev-count{font-size:.82rem;color:var(--text-muted);font-weight:600;min-width:54px;text-align:center}
/* gallery page */
/* ───── header logo: larger so the lettering is legible ───── */
.nav-inner{height:96px}
.nav-logo img{height:82px;width:auto}
.hero{padding-top:106px}
@media(max-width:768px){  .nav-inner{height:78px}
  .nav-logo img{height:64px}
  .navlinks{top:78px}
  .hero{padding-top:98px}
}/* ───── hero quote card: red accents ───── */
.hero .qcard{border-top:5px solid var(--red);
  box-shadow:0 0 0 1px rgba(204,0,0,.18), 0 18px 46px rgba(204,0,0,.30), 0 34px 90px rgba(0,0,0,.42)}
.hero .qcard input,.hero .qcard select{border:1.5px solid rgba(204,0,0,.38)}
.hero .qcard input:hover,.hero .qcard select:hover{border-color:rgba(204,0,0,.6)}
.hero .qcard input:focus,.hero .qcard select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(204,0,0,.15)}
/* ───── about collage: every photo keeps its own proportions ───── */
.about-img-wrap .about-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;
  gap:12px;align-items:start;border-radius:0;overflow:visible}
.about-img-wrap .about-collage img{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;
  border-radius:8px;display:block}
@media(max-width:768px){.about-img-wrap .about-collage{gap:8px}}/* ───── project photos: frames follow each photo's real shape (masonry) ───── */
.gallery-grid{display:block;column-count:3;column-gap:12px;margin-top:48px}
.gallery-item,.gallery-item:first-child{break-inside:avoid;margin:0 0 12px;border-radius:8px;
  overflow:hidden;display:block;aspect-ratio:auto;grid-column:auto}
.gallery-item img{width:100%;height:auto;display:block}
@media(max-width:1000px){.gallery-grid{column-count:2}}@media(max-width:600px){.gallery-grid{column-count:1}}/* ───── gallery lightbox ───── */
body.lb-lock{overflow:hidden}
/* ───── "20 Years of Excellence" badge: top-left of the collage ───── */
.about-img-wrap .about-badge{top:-24px;left:-24px;bottom:auto;right:auto;z-index:2}
@media(max-width:768px){.about-img-wrap .about-badge{top:-16px;left:-8px}}/* ───── service card photos: reposition inside the fixed frame ───── */
.svc-tank .service-img img{object-position:50% 0%}
.svc-plumbing .service-img img{object-position:50% 10%}
.svc-bath .service-img img{object-position:50% 6%}


/* ───── nav: phone + services dropdown (Build-Standards: Header) ───── */
.nav-phone{display:none;color:var(--white);text-decoration:none;font-weight:700;font-size:.95rem;white-space:nowrap}
.has-dd{position:relative}
.has-dd>button{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--white);font-size:.88rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase;
  font-family:inherit;padding:0;transition:color .2s}
.has-dd>button:hover{color:var(--red)}
.has-dd>button svg{width:10px;height:10px;fill:currentColor;transition:transform .25s}
.has-dd.open>button svg{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:236px;background:rgba(17,17,17,.98);border:1px solid rgba(255,255,255,.09);border-top:2px solid var(--red);
  border-radius:0 0 4px 4px;padding:6px 0;list-style:none;opacity:0;visibility:hidden;transition:all .22s;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.has-dd:hover .dd,.has-dd.open .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;padding:11px 20px;font-size:.82rem;text-transform:none;letter-spacing:.2px;font-weight:500}
.dd a:hover{background:rgba(204,0,0,.16);color:var(--red)}



/* ───── interior article pages ───── */
.art-head{padding:150px 20px 56px;text-align:center;background:var(--dark);position:relative}
.art-head .section-label{color:var(--red)}
.art-head h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:var(--white);line-height:1.15;margin-bottom:14px}
.art-head h1 span{color:var(--red)}
.art-head p{color:rgba(255,255,255,.72);max-width:640px;margin:0 auto;line-height:1.75;font-size:1rem}
.crumb{max-width:1200px;margin:0 auto;padding:18px 20px 0;font-size:.8rem;color:var(--text-soft)}
.crumb a{color:var(--text-soft);text-decoration:none}
.crumb a:hover{color:var(--red)}
.art-wrap{max-width:1200px;margin:0 auto;padding:36px 20px 90px;display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
@media(max-width:980px){.art-wrap{grid-template-columns:1fr;gap:40px;padding-top:28px}}
.art-body p{color:var(--text-body);line-height:1.9;font-size:1.03rem;margin-bottom:22px}
.art-body h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;color:var(--dark);margin:14px 0 18px}
.art-cta{margin-top:34px;padding:30px;background:var(--dark);border-radius:8px;border-left:5px solid var(--red)}
.art-cta h3{color:var(--white);font-size:1.3rem;font-weight:800;margin-bottom:8px}
.art-cta p{color:rgba(255,255,255,.72);margin-bottom:20px;font-size:.96rem;line-height:1.7}
.art-side{position:sticky;top:96px}
@media(max-width:980px){.art-side{position:static}}
.art-side h4{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:16px}
.art-side ul{list-style:none;margin-bottom:32px}
.art-side li{border-bottom:1px solid var(--border)}
.art-side li a{display:block;padding:13px 2px;color:var(--text-strong);text-decoration:none;font-size:.94rem;font-weight:500;transition:all .2s}
.art-side li a:hover{color:var(--red);padding-left:8px}
.art-side li a[aria-current="page"]{color:var(--red);font-weight:700}
.art-side .side-card{background:var(--light);border-radius:8px;padding:26px;text-align:center}
.art-side .side-card p{color:var(--text-body);font-size:.92rem;line-height:1.7;margin-bottom:18px}
.rev-list{display:grid;gap:20px}
.rev-list .rev-card{background:var(--light);border-radius:8px;padding:28px;border-left:4px solid var(--red)}
.rev-list .rev-card p{color:var(--text-body);line-height:1.85;font-size:.98rem;white-space:pre-line;margin:0}

.art-body a:not(.btn-primary):not(.btn-outline){color:var(--red);text-decoration:none;border-bottom:1px solid rgba(204,0,0,.35);transition:border-color .2s}
.art-body a:not(.btn-primary):not(.btn-outline):hover{border-bottom-color:var(--red)}
.art-body .qcard a{border-bottom:none}

/* dropdown hover bridge: keeps hover alive across the gap between the
   Services button and the menu that opens below it */
@media(min-width:901px){
  .has-dd::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:24px}
  .has-dd>button{padding:6px 0}
}

/* loading screen: larger logo, pulsing in time with the bar */
#loader img{width:230px}
@keyframes bb-pulse{
  0%   {transform:scale(1);   filter:drop-shadow(0 4px 20px rgba(204,0,0,.45))}
  50%  {transform:scale(1.07);filter:drop-shadow(0 6px 34px rgba(204,0,0,.85))}
  100% {transform:scale(1);   filter:drop-shadow(0 4px 20px rgba(204,0,0,.45))}
}
#loader img{animation:bb-pulse 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#loader img{animation:none}}

/* service page photo sets: natural aspect ratios, never cropped square */
.svc-shots{margin:34px 0 8px;column-count:2;column-gap:14px}
@media(max-width:640px){.svc-shots{column-count:1}}
.svc-shots figure{break-inside:avoid;margin:0 0 14px;border-radius:8px;overflow:hidden;background:var(--light)}
.svc-shots img{width:100%;height:auto;display:block}
.svc-shots.one{column-count:1;max-width:760px}

/* FAQ accordion on the realtor/landlord page */
.faq{border-bottom:1px solid var(--border);padding:2px 0}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:700;color:var(--dark);
  font-size:1.02rem;position:relative;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq[open] summary{color:var(--red)}
.faq p{padding:0 0 20px;margin:0;color:var(--text-body);line-height:1.85;font-size:.99rem}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE DRAWER — Mobile-Optimization Standard, Part D
   Mobile only. Nothing below 900px-wide affects desktop rendering.
   Tokens per Section 0b, measured not chosen:
     --nav-bg  #111111  L=0.0056 -> WHITE text, 18.88:1   (DARK preset)
     --nav-accent #CC0000  L=0.1284 -> WHITE CTA text, 5.89:1
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --nav-bg:var(--dark);
  --nav-accent:var(--red);
  --nav-scrim:rgba(17,17,17,.55);
  --nav-fg:#ffffff;
  --nav-fg-2:rgba(255,255,255,.85);
  --nav-fg-3:rgba(255,255,255,.80);
  --nav-rule:rgba(255,255,255,.12);
  --nav-cta-fg:#ffffff;
}

.nav-backdrop{display:none}
.nav-close{display:none}

@media(max-width:900px){
  /* Rule 11 — z-index ladder: header 900, backdrop 1000, drawer 1001, close 1002 */
  nav{z-index:900}

  /* Rule 9 — a filtered ancestor becomes the containing block for the fixed
     drawer. The header carries backdrop-filter, and the drawer cannot be moved
     to body level without breaking the desktop header, so the override is the fix. */
  body.nav-open nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:transparent!important;box-shadow:none!important;border-bottom-color:transparent!important;
    z-index:1001!important}
  body.nav-open .menu-btn{display:none}

  /* Section 8 — backdrop + scroll lock */
  .nav-backdrop{display:block;position:fixed;inset:0;background:var(--nav-scrim);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1000}
  .nav-backdrop.show{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden;height:100%}

  /* Section 1 — the drawer. bottom:0, never height:100vh (iOS). */
  .navlinks{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(86vw,360px);height:auto;
    background:var(--nav-bg);
    font-family:inherit;
    line-height:1.65;
    display:block;
    align-items:normal;justify-content:normal;
    padding:110px 24px 40px;      /* header measured 80px + 30 */
    margin:0;gap:0;
    list-style:none;
    transform:translateX(110%);
    transition:transform .35s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
    z-index:1001;
    border-top:none;
  }
  .navlinks.open{transform:none}

  .nav-close{display:block;position:absolute;top:20px;right:20px;width:42px;height:42px;
    border:none;background:transparent;cursor:pointer;z-index:1002;padding:0}
  .nav-close::before,.nav-close::after{content:"";position:absolute;top:50%;left:50%;
    width:22px;height:2px;background:var(--nav-fg);border-radius:2px}
  .nav-close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .nav-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

  /* Level 1 — top-level rows. Rule 4: dividers on direct children only. */
  .navlinks > li{display:block;width:100%;margin:0;border-bottom:1px solid var(--nav-rule)}
  .navlinks > li > a,
  .navlinks .dd-trigger{
    color:var(--nav-fg)!important;
    font-size:1.05rem;font-weight:600;
    padding:16px 2px;
    text-align:left;
    display:block;width:100%;
    text-transform:none;letter-spacing:normal;
    border-bottom:none;
  }
  .navlinks > li > a::after{display:none!important}
  .navlinks .dd-trigger{display:flex;align-items:center;justify-content:space-between;
    background:none;border:none;font-family:inherit;cursor:pointer}
  .navlinks .dd-trigger svg{width:15px;height:15px;transition:transform .3s ease;fill:currentColor}
  .has-dd.dd-open .dd-trigger svg{transform:rotate(180deg)}

  /* Level 2 — Rule 5: max-height, never height:auto */
  .has-dd .dd{
    position:static;transform:none;opacity:1;visibility:visible;
    display:block;background:transparent;border:none;box-shadow:none;border-radius:0;
    margin:0;padding:0 0 0 12px;min-width:0;list-style:none;
    max-height:0;overflow:hidden;
    transition:max-height .35s ease;
  }
  .has-dd.dd-open .dd{max-height:2800px;padding-bottom:6px}
  .has-dd .dd > li{border:none;margin:0}
  .has-dd .dd > li > a{
    display:block;
    color:var(--nav-fg-2)!important;
    font-size:.96rem;font-weight:500;
    padding:10px 0;
    white-space:normal;
    border-bottom:none;background:none;
    text-transform:none;letter-spacing:normal;
  }
  .has-dd .dd > li > a:hover{background:none;color:var(--nav-accent)!important}

  /* Rule 15 — CTA last, full width, label copied verbatim from the header */
  .navlinks > li.nav-cta-row{border-bottom:none}
  .navlinks > li.nav-cta-row > a.nav-cta{
    display:block;width:100%;
    margin-top:28px;                 /* the one permitted margin — Rule 3 */
    padding:16px 20px;
    text-align:center;
    font-family:inherit;
    font-size:1rem;font-weight:700;
    border:none;border-radius:4px;
    background:var(--nav-accent)!important;
    color:var(--nav-cta-fg)!important;
    text-transform:none;letter-spacing:normal;
  }

  /* Section 6b — current-page indicator. Inset shadow, not border: zero layout shift. */
  .navlinks a[aria-current="page"]{font-weight:800;color:var(--nav-fg)!important;
    box-shadow:inset 2px 0 0 var(--nav-accent)}
  .navlinks .dd-current > .dd-trigger{color:var(--nav-accent)!important}
  .navlinks > li.nav-cta-row > a.nav-cta[aria-current="page"]{box-shadow:none}
}

@media(max-width:900px){
  .navlinks > li.nav-close-row{display:list-item;border-bottom:none;height:0;margin:0;padding:0;overflow:visible}
}

@media(max-width:900px){
  /* Part A — the three header elements: logo, phone, burger. Nothing else. */
  .menu-btn{display:flex}
  .nav-phone{display:block;margin-left:auto;margin-right:16px}
  .has-dd{position:static;width:100%}
}

.bb-form{scroll-margin-top:126px}

@media(max-width:900px){
  /* B.2.3/B.2.4 — mobile header is 80px; desktop offset stays 126px */
  .bb-form{scroll-margin-top:100px}
}

@media(max-width:900px){
  /* The desktop hover/open rule still fires after a tap and drags the submenu
     off the panel with translateX(-50%). Neutralise it below the breakpoint. */
  .has-dd:hover .dd,
  .has-dd.open .dd,
  .has-dd.dd-open .dd{
    transform:none!important;
    left:auto!important;right:auto!important;top:auto!important;
    opacity:1;visibility:visible;
  }
}

@media(max-width:900px){
  /* Rule 11 — the custom cursor sits at z-index 99998/99999, above the drawer.
     @media(hover:none) hides it on real phones; this covers hybrid touch devices. */
  body.nav-open #cursor-dot,body.nav-open #cursor-ring{display:none!important}
}

.nav-close-row{display:none}