/*
 * shared.css — Al Madar Pro shared stylesheet
 * Used by: index.php, service.php
 * Generated from index.php inline styles
 */


/* SVG fill for nav WA button — white icon on dark nav background */
.btn-wa svg { fill: #fff !important; }
.wa-cta svg { fill: #fff !important; }
.wa-fab svg { fill: #fff !important; }


.theme-toggle{
  width:38px;height:22px;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);
  border-radius:12px;cursor:pointer;position:relative;transition:.3s;flex-shrink:0;
  display:flex;align-items:center;padding:2px;
}
.theme-toggle:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);}
.theme-toggle-knob{
  width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s;
  display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1;
  transform:translateX(0);
}
[data-theme="dark"] .theme-toggle{background:rgba(67,168,38,.25);border-color:rgba(67,168,38,.5);}
[data-theme="dark"] .theme-toggle-knob{transform:translateX(16px);background:var(--green-light);}
.theme-toggle-icon{pointer-events:none;font-size:10px;}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}

.topbar{background:var(--nav-bg);padding:9px 5%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;border-bottom:1px solid rgba(67,168,38,.35);max-width:100%;overflow:hidden;}
.topbar-left{display:flex;gap:22px;flex-wrap:wrap;min-width:0;flex:1 1 auto;}
.topbar-icon{color:var(--green-light);}
.topbar-svg{width:14px;height:14px;fill:var(--green-light);flex-shrink:0;}
.topbar-hours{font-size:12px;color:rgba(255,255,255,.52);}

.logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo-box{width:120px;height:54px;background:#111;display:flex;align-items:center;justify-content:center;padding:6px 10px;}
.logo-box-text{font-family:'Roboto Condensed',sans-serif;font-size:13px;font-weight:700;color:#fff;letter-spacing:1px;}
.nav-mob-user-link{color:var(--green-light);font-weight:700;}
.is-hidden{display:none !important;}
.logo-img-custom{height:64px;width:auto;max-width:260px;filter:brightness(1.09) contrast(1.06) drop-shadow(0 1px 4px rgba(0,0,0,.5));transition:filter .2s;display:block;object-fit:contain;}
.logo:hover .logo-img-custom{filter:brightness(1.16) contrast(1.08) drop-shadow(0 2px 8px rgba(0,0,0,.55));}
/* Transparent wrapper — no background/border so logo sits clean on nav */
.logo-img-wrap{background:transparent;border:none;padding:0;display:flex;align-items:center;}
.logo-name{font-family:'Roboto Condensed';font-size:18px;font-weight:700;color:#fff;line-height:1.1;}
.logo-ar{font-size:11px;color:rgba(255,255,255,.48);direction:rtl;margin-top:1px;}
.nav-links>li{position:relative;}
.nav-links>li>a{color:rgba(255,255,255,.8);text-decoration:none;font-family:'Open Sans';font-weight:600;font-size:13px;padding:0 14px;height:84px;display:flex;align-items:center;transition:.25s;border-bottom:3px solid transparent;border-top:3px solid transparent;}
.nav-links>li>a:hover{color:#fff;background:rgba(255,255,255,.06);}
.nav-links>li.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.nav-links>li.has-dropdown{position:relative;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;border-radius:4px;transition:.2s;}
.hamburger:hover{background:rgba(255,255,255,.1);}
.hamburger span{width:24px;height:2.5px;background:rgba(255,255,255,.9);display:block;border-radius:2px;transition:transform .3s,opacity .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.mob-menu-open .nav-links{
  display:flex!important;flex-direction:column;
  position:fixed;left:0;right:0;
  top:var(--nav-h, 87px);          /* set by JS to match actual nav height */
  background:var(--navy);
  padding:8px 0;gap:0;
  border-bottom:3px solid var(--green);
  z-index:998;
  max-height:calc(100vh - var(--nav-h,73px));
  overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.mob-menu-open .nav-links>li>a{
  height:50px;border-bottom:1px solid rgba(255,255,255,.06);
  padding:0 20px;font-size:14px;display:flex;align-items:center;
}
.mob-menu-open .nav-links>li>a:hover{background:rgba(255,255,255,.06);}
.mob-menu-open .has-dropdown .dropdown{
  position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;
  display:none;transition:none;
  box-shadow:none;border:none;
  border-left:3px solid var(--green);
  margin-left:24px;
  background:rgba(0,0,0,.18);
}
.mob-menu-open .has-dropdown.dd-open .dropdown{display:flex!important;flex-direction:column;}
.mob-menu-open .has-dropdown .dropdown a{padding:10px 16px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.05);}
.mob-menu-open .has-dropdown .dropdown a::before{content:"›";color:var(--green);margin-right:6px;}
.mob-menu-open .has-dropdown .dd-arrow{display:inline-block;transition:transform .25s;margin-left:4px;}
.mob-menu-open .has-dropdown.dd-open .dd-arrow{transform:rotate(180deg);}
.mob-backdrop{display:none;position:fixed;inset:0;z-index:997;background:rgba(0,0,0,.3);}
.mob-menu-open .mob-backdrop{display:block;}

.hero{min-height:92vh;display:flex;align-items:center;padding:0 5%;position:relative;overflow:hidden;background:var(--navy);}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0F1E24 0%,#232323 55%,#1F3640 100%);}
.hero-pattern{position:absolute;inset:0;opacity:.03;background-image:repeating-linear-gradient(45deg,#fff 0px,#fff 1px,transparent 1px,transparent 10px);}
.hero-bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--green);}
.hero-content{position:relative;z-index:2;max-width:760px;width:60%;padding-left:26px;}
@media(max-width:1100px){
  .hero-content{width:100%;max-width:none;padding-left:20px;padding-right:10px;}
}
.hero-pulse{width:8px;height:8px;background:var(--green-light);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero-badge span{font-size:11px;color:var(--green-light);letter-spacing:2px;text-transform:uppercase;font-family:'Roboto Condensed';}
.hero h1{font-family:'Roboto Condensed';font-size:clamp(36px,5.5vw,64px);line-height:1.05;color:#fff;font-weight:700;text-transform:uppercase;margin-bottom:10px;}
.hero h1 em{color:var(--green-light);font-style:normal;}
.hero-sub{font-family:'Roboto Condensed';font-size:18px;color:rgba(255,255,255,.55);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.hero-stats{display:flex;margin-top:42px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap;}
.hstat{padding:0 22px;border-right:1px solid rgba(67,168,38,.3);}
.hstat:first-child{padding-left:0;}
.hstat:last-child{border-right:none;}
.hstat-num{font-family:'Roboto Condensed';font-size:34px;color:var(--green-light);font-weight:700;line-height:1;}
.hstat-label{font-size:11px;color:rgba(255,255,255,.72);letter-spacing:1px;text-transform:uppercase;margin-top:4px;font-weight:600;}
.hero-right{position:absolute;right:0;top:0;bottom:0;width:42%;background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;clip-path:polygon(12% 0%,100% 0%,100% 100%,0% 100%);}
.hero-right-inner{display:flex;flex-direction:column;gap:14px;padding:40px 40px 40px 90px;width:100%;}
.hfeature-icon{font-size:20px;width:34px;text-align:center;flex-shrink:0;}
.hfeature-sub{font-size:11px;color:rgba(255,255,255,.38);margin-top:2px;}

.marquee-wrap{background:var(--green);padding:10px 0;overflow:hidden;}
.marquee{display:flex;gap:40px;animation:marquee 28s linear infinite;white-space:nowrap;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{font-family:'Roboto Condensed';font-size:13px;color:#fff;letter-spacing:2px;text-transform:uppercase;font-weight:700;}
.marquee-item::after{content:'◆';font-size:8px;color:rgba(255,255,255,.4);margin-left:14px;}

.section-tag::before{content:'';width:26px;height:2px;background:var(--green);display:inline-block;flex-shrink:0;}

.about-text p{font-size:14px;color:var(--text-grey);line-height:1.9;margin-bottom:15px;}
.about-text strong{color:var(--text-h);font-weight:600;}
.vm-text{font-size:13px;color:var(--text-grey);line-height:1.75;}
.about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:480px){
  .about-imgs{grid-template-columns:1fr;}
  .about-img.feat{grid-column:auto;}
}
.about-img img{width:100%;height:100%;object-fit:cover;}
.about-img-label{font-family:'Roboto Condensed';font-size:12px;color:var(--green);letter-spacing:1px;text-transform:uppercase;font-weight:700;}
.about-img.feat{grid-column:span 2;aspect-ratio:16/7;background:var(--navy);border-color:var(--navy);}
.about-img.feat .about-img-label{color:var(--green-light);}

.cta-strip{background:var(--green);padding:34px 5%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.cta-strip h3{font-family:'Roboto Condensed';font-size:24px;color:#fff;font-weight:700;text-transform:uppercase;}
.cta-strip p{font-size:13px;color:rgba(255,255,255,.8);margin-top:3px;}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap;}

.prod-img-wrap img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.prod-img-wrap .fallback{position:relative;z-index:1;}
.prod-card:hover .prod-img-wrap{border-bottom-color:var(--green);}
.prod-specs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
.prod-price{font-family:'Roboto Condensed';font-size:12px;color:var(--text-grey);margin-bottom:10px;}
.prod-price .amount{font-size:16px;color:var(--green);font-weight:700;}
.prod-price .orig{font-size:12px;color:var(--text-light);text-decoration:line-through;margin-left:6px;}
.member-disc{font-size:11px;color:var(--green-dark);margin-top:2px;font-weight:600;}
.discount-badge{background:var(--green);color:#fff;font-size:9px;padding:1px 5px;font-weight:700;margin-left:4px;vertical-align:middle;}
.price-hidden{display:inline-flex;align-items:center;gap:7px;background:var(--price-hidden-bg);border:1px solid rgba(180,83,9,.2);padding:4px 10px;margin-bottom:10px;}
.price-hidden-stars{font-family:'Roboto Condensed';font-size:18px;color:var(--price-hidden-text);font-weight:700;letter-spacing:3px;}
.price-hidden-label{font-size:11px;color:var(--price-hidden-text);font-weight:600;}
.login-hint{font-size:11px;color:var(--text-light);margin-bottom:8px;}
.login-hint a{color:var(--green);}
.pcta.solid{background:var(--green);color:#fff;}

.gal-item.wide{grid-column:span 2;}
.gal-item img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:.3s;}
.gal-fallback{position:relative;z-index:1;}
.gal-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(67,168,38,.88) 0%,transparent 60%);opacity:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;transition:.3s;z-index:2;}
.gal-item:hover .gal-overlay{opacity:1;}
.gal-text{font-family:'Roboto Condensed';font-size:12px;color:#fff;letter-spacing:1px;text-align:center;line-height:1.4;text-transform:uppercase;}

.infra-points{display:flex;flex-direction:column;gap:12px;}
.infra-text{font-size:12px;color:var(--text-grey);line-height:1.6;}
.infra-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.istat-num{font-family:'Roboto Condensed';font-size:36px;color:var(--green-light);line-height:1;font-weight:700;}
.istat-label{font-size:11px;color:rgba(255,255,255,.48);letter-spacing:1px;text-transform:uppercase;margin-top:5px;}

.pricing-note strong{color:var(--green);}
.price-card.featured::before{content:'MOST POPULAR';position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:10px;font-weight:700;letter-spacing:2px;padding:3px 13px;font-family:'Roboto Condensed';}
.price-plan{font-family:'Roboto Condensed';font-size:18px;color:var(--green);letter-spacing:1px;margin-bottom:5px;font-weight:700;text-transform:uppercase;}
.price-amount{font-family:'Roboto Condensed';font-size:40px;color:var(--text-h);line-height:1;font-weight:700;}
.price-unit-label{font-size:12px;color:var(--text-light);margin-bottom:16px;}
.price-features{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.price-features li{font-size:13px;color:var(--text-grey);display:flex;gap:8px;}
.price-features li::before{content:'✓';color:var(--green);flex-shrink:0;font-weight:700;}
.price-login-note{font-size:11px;color:var(--text-light);margin-top:9px;border-top:1px solid var(--border);padding-top:9px;}
.price-login-note a{color:var(--green);}

.stars{color:var(--green);font-size:14px;margin-bottom:10px;letter-spacing:2px;}
.testi-text::before{content:'"';position:absolute;left:0;top:-4px;font-size:26px;color:var(--green);font-family:Georgia,serif;line-height:1;}
.testi-author{display:flex;align-items:center;gap:10px;}
.testi-name{font-weight:700;font-size:13px;color:var(--text-h);}
.testi-role{font-size:11px;color:var(--text-light);}

.c-label{font-size:10px;color:var(--green);letter-spacing:2px;text-transform:uppercase;margin-bottom:2px;font-family:'Roboto Condensed';font-weight:700;}
.c-value{font-size:13px;color:var(--text-h);font-weight:600;}
.c-value a{color:var(--text-h);text-decoration:none;transition:.3s;}
.c-value a:hover{color:var(--green);}
.wa-cta svg{width:20px;height:20px;fill:currentColor;flex-shrink:0;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg input,.fg textarea,.fg select{background:var(--bg-input);border:1px solid var(--border-dark);border-left:3px solid var(--green);color:var(--text-h);padding:10px 13px;font-family:'Open Sans';font-size:13px;outline:none;transition:.3s;width:100%;}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(67,168,38,.08);}
.fg textarea{height:90px;resize:vertical;}

footer{background:var(--footer-bg);}
.footer-links a::before{content:'›';color:var(--green-light);font-size:14px;flex-shrink:0;}
.footer-cat:hover{background:var(--green-dark);}

.chat-bubble{position:fixed;bottom:26px;right:26px;z-index:999;width:58px;height:58px;background:var(--green);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(67,168,38,.5);transition:.3s;animation:float 3s ease-in-out infinite;}
.chat-bubble:hover{transform:scale(1.1);background:var(--green-dark);}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.chat-bubble svg{width:26px;height:26px;fill:#fff;}
.wa-fab{position:fixed;bottom:26px;right:26px;z-index:999;width:58px;height:58px;background:#25D366;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.5);transition:.3s;animation:float 3s ease-in-out infinite;text-decoration:none;}
.wa-fab:hover{transform:scale(1.1);background:#128C7E;box-shadow:0 6px 24px rgba(37,211,102,.6);}
.wa-fab svg{width:32px;height:32px;fill:#fff;}
.chat-badge{position:absolute;top:-5px;right:-5px;width:18px;height:18px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;border:2px solid var(--green);}
.chat-win.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all;}
.chat-av{width:36px;height:36px;background:rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Roboto Condensed';font-size:13px;color:#fff;font-weight:700;border:2px solid rgba(255,255,255,.28);}
.chat-nm{font-weight:700;color:#fff;font-size:13px;font-family:'Roboto Condensed';letter-spacing:.5px;text-transform:uppercase;}
.chat-st{font-size:10px;color:rgba(255,255,255,.8);letter-spacing:1px;}
.chat-x{margin-left:auto;background:rgba(255,255,255,.2);border:none;color:#fff;cursor:pointer;font-size:14px;padding:4px 8px;transition:.3s;}
.chat-x:hover{background:rgba(255,255,255,.32);}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg-lighter);}
.chat-msgs::-webkit-scrollbar{width:3px;}
.chat-msgs::-webkit-scrollbar-thumb{background:var(--green);}
.msg{max-width:85%;}
.msg.bot{align-self:flex-start;}
.msg.user{align-self:flex-end;}
.msg-bub{padding:10px 13px;font-size:12.5px;line-height:1.55;}
.msg.bot .msg-bub{background:var(--bg-card);border:1px solid var(--border);color:var(--text-body);border-radius:0 10px 10px 10px;}
.msg.user .msg-bub{background:var(--green);color:#fff;font-weight:600;border-radius:10px 10px 0 10px;}
.msg-time{font-size:10px;color:var(--text-light);margin-top:3px;padding:0 3px;}
.chat-qr{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.chat-inp-area{padding:10px;border-top:1px solid var(--border);display:flex;gap:7px;background:var(--bg-card);}
.chat-inp:focus{border-color:var(--green);}
.chat-send:hover{background:var(--green-dark);}
.typing-wrap{display:flex;gap:4px;align-items:center;padding:8px 12px;}
.td{width:6px;height:6px;background:var(--green);border-radius:50%;animation:bounce 1.4s infinite;opacity:.4;}
.td:nth-child(2){animation-delay:.2s;}
.td:nth-child(3){animation-delay:.4s;}
@keyframes bounce{0%,80%,100%{transform:scale(.8);opacity:.3}40%{transform:scale(1.1);opacity:1}}

.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal>p{font-size:13px;color:var(--text-grey);margin-bottom:20px;}
.modal-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:20px;}
.modal-tab.active{color:var(--green);border-bottom-color:var(--green);}
.modal-form{display:flex;flex-direction:column;gap:12px;}
.modal-submit:hover{background:var(--green-dark);border-color:var(--green-dark);}
.benefit-list{background:var(--green-pale);border:1px solid rgba(67,168,38,.2);border-left:4px solid var(--green);padding:12px;margin-top:12px;}
.benefit-list h4{font-family:'Roboto Condensed';font-size:12px;color:var(--green);letter-spacing:1px;margin-bottom:7px;text-transform:uppercase;font-weight:700;}
.benefit-item{font-size:12px;color:var(--text-grey);padding:2px 0;display:flex;gap:7px;}
.benefit-item::before{content:'✓';color:var(--green);font-weight:700;}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

@media(max-width:1100px){
  nav{height:80px;}
  .nav-links{height:80px;}
  .nav-links>li>a{height:80px;padding:0 10px;}
  .nav-cta{gap:6px;}
  .logo img,.logo-img-custom{height:56px!important;max-width:240px!important;}
  .hero-right{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .about-grid,.infra-grid,.contact-grid{grid-template-columns:1fr;gap:30px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gal-item.wide{grid-column:span 1;}
  .products-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:repeat(2,1fr);}
  .nav-links>li>a{padding:0 10px;font-size:12.5px;}
}
/* ── NAV BREAKPOINT (unified with nav.js MOBILE_BP=900) ────────────────── */
/* ── NAV BREAKPOINT (unified with nav.js MOBILE_BP=900) ──────────────────
   !important is deliberate here: there are later .nav-links rules further
   down in shared.css (post-refactor additions) that, due to source order at
   equal specificity, would otherwise re-show the desktop nav at phone widths.
   The .mob-menu-open .nav-links rule near line 61 has higher specificity
   (two classes) and its own !important, so it correctly re-shows the menu
   when the hamburger opens it. */
@media(max-width:900px){
  .nav-links{display:none !important;}
  .hamburger{display:flex !important;}
  .um-desktop{display:none !important;}
  .nav-cta .btn-quote{display:none !important;}
  .tb-hide-mob{display:none !important;}
}

@media(max-width:768px){
  nav{height:72px;}
  .logo img,.logo-img-custom{height:52px!important;max-width:220px!important;}
  .topbar{justify-content:center;flex-direction:column;gap:4px;}
  .topbar-left{flex-wrap:wrap;justify-content:center;gap:10px;}
  section{padding:44px 5%;}
  .footer-grid{grid-template-columns:1fr;gap:22px;}
  .chat-win{width:calc(100vw - 24px);right:12px;bottom:92px;height:calc(100vh - 160px);max-height:500px;}
  .chat-bubble,.wa-fab{bottom:20px;right:16px;width:52px;height:52px;}
  .modal{padding:20px;max-height:90vh;overflow-y:auto;}
  .cta-strip{flex-direction:column;text-align:center;gap:14px;}
  .hero-stats{gap:10px;flex-wrap:wrap;justify-content:center;}
  .hstat{padding:8px 14px;}
  .hero-content{padding-left:0;}
  .form-row{grid-template-columns:1fr;}
  .products-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .hero-btns{flex-direction:column;align-items:flex-start;gap:10px;}
  .hero-btns a,.hero-btns button{width:100%;text-align:center;}
  h1{font-size:clamp(28px,8vw,44px);}
  .section-title{font-size:clamp(22px,5vw,38px);}
  .logo-name{font-size:14px;}
  .about-vm{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .wa-label{display:none;}
  .topbar{padding:6px 4%;}
  nav{padding:0 4%;height:62px;}
  .logo img,.logo-img-custom{height:44px!important;max-width:180px!important;}
  .logo-name{font-size:13px;}
  .hero-content h1{font-size:clamp(24px,7vw,36px);}
  .hstat-num{font-size:26px;}
  .btn-quote,.btn-wa{padding:10px 16px;font-size:13px;}
  .prod-card{border-radius:0;}
  .price-card{padding:20px 16px;}
  .modal{padding:16px;margin:10px;}
  .chat-win{width:100vw;right:0;bottom:80px;border-radius:0;height:calc(100vh - 140px);max-height:460px;}
  .chat-bubble,.wa-fab{bottom:16px;right:14px;width:48px;height:48px;}
}


.svc-hero{background:var(--bg-section);padding:60px 20px;}
.svc-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.svc-hero-text h1{font-family:'Roboto Condensed',sans-serif;font-size:clamp(28px,5vw,52px);color:var(--text-h);font-weight:700;line-height:1.1;margin-bottom:16px;}
.svc-hero-desc{font-size:15px;color:var(--text-grey);line-height:1.8;margin-bottom:24px;max-width:500px;}
.svc-hero-img{border-radius:4px;overflow:hidden;max-height:360px;display:flex;align-items:center;justify-content:center;background:var(--bg-section);}
.svc-hero-img img{width:100%;height:100%;object-fit:cover;}
.svc-hero-fallback{font-size:80px;text-align:center;padding:40px;}
.breadcrumb{background:var(--bg-section);padding:10px 20px;border-bottom:1px solid var(--border);}
.breadcrumb-inner{max-width:1200px;margin:0 auto;font-size:12px;color:var(--text-grey);}
.breadcrumb a{color:var(--green-text);}
.body-text{font-size:15px;color:var(--text-grey);line-height:1.85;max-width:860px;}
.body-text h2,.body-text h3{font-family:'Roboto Condensed',sans-serif;color:var(--text-h);margin:24px 0 12px;}
.body-text ul{padding-left:20px;margin:12px 0;}
.body-text li{margin-bottom:6px;}
.gallery-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:28px;}
.gallery-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;transition:.3s;}
.gallery-strip img:hover{opacity:.85;}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:860px;}
details.faq-item{background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--green);}
details.faq-item summary{padding:16px 18px;font-weight:700;font-size:14px;color:var(--text-h);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::marker{display:none;content:'';}
details.faq-item summary::after{content:'＋';color:var(--green);font-size:16px;flex-shrink:0;margin-left:10px;}
details.faq-item[open] summary::after{content:'×';}
details.faq-item div{padding:0 18px 16px;font-size:13px;color:var(--text-grey);line-height:1.75;border-top:1px solid var(--border);}
.cta-band{background:var(--green);padding:48px 20px;text-align:center;}
.cta-band h2{font-family:'Roboto Condensed',sans-serif;font-size:clamp(22px,4vw,36px);color:#fff;font-weight:700;margin-bottom:12px;}
.cta-band p{color:rgba(255,255,255,.85);font-size:15px;margin-bottom:24px;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:24px;}
.related-card h3{font-family:'Roboto Condensed',sans-serif;font-size:16px;color:var(--text-h);margin-bottom:8px;}
.related-card p{font-size:12px;color:var(--text-grey);margin-bottom:10px;line-height:1.6;}
.related-card span{font-size:12px;font-weight:700;color:var(--green-text);}
@media(max-width:768px){.svc-hero-inner{grid-template-columns:1fr;}.svc-hero-img{display:none;}.gallery-strip{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.gallery-strip{grid-template-columns:1fr;}}

@media(max-width:768px){
  .btn-wa,.btn-quote,.btn-white,.btn-outline-white,.btn-svc-wa,.btn-svc-call{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .hamburger{min-width:44px;min-height:44px;align-items:center;justify-content:center;}
  .soc-btn{width:40px;height:40px;min-width:40px;}
  /* Footer mobile improvements */
  .footer-links li{margin-bottom:10px;}
  .footer-links a{padding:4px 0;display:inline-block;}
  /* Section spacing normalization */
  section{padding:48px 5%;}
  .svc-section{padding:44px 16px;}
  /* CTA strip stacked on mobile */
  .cta-strip .cta-btns{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
  .cta-strip .cta-btns a{width:100%;max-width:300px;text-align:center;}
}

.nav-cta .btn-wa{order:-1;}

.nav-links>li>a.active{
  color:#fff!important;
  border-bottom-color:var(--green)!important;
  font-weight:700;
}
.dropdown a.active{
  color:var(--green-light)!important;
  background:rgba(67,168,38,.10)!important;
  border-left-color:var(--green)!important;
  font-weight:600;
}

.footer-links li+li{margin-top:8px;}

.btn-svc-wa,.btn-svc-call{min-height:46px;}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM UI POLISH — v3
   Rules: no layout/position changes, only visual quality improvements
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.13), 0 3px 10px rgba(0,0,0,.07);
  --shadow-green: 0 4px 18px rgba(67,168,38,.22);
  --trans-fast: all .18s ease;
  --trans-base: all .24s ease;
  --trans-slow: all .34s ease;
  --green-text: #2D7A18;
  --green-btn-bg: #2D7A18;
  --footer-text: rgba(255,255,255,.62);
  --footer-link: rgba(255,255,255,.50);
  --footer-copy: rgba(255,255,255,.42);
}

body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
  letter-spacing: -.01em;
}
h1, h2, h3, h4 { letter-spacing: -.02em; }
p { line-height: 1.75; }
.section-title {
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 14px;
}
.section-sub {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-grey);
  max-width: 580px;
}
.section-tag {
  font-size: 11px;
  letter-spacing: 3.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.divider {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  margin: 14px 0 32px;
}

section { background: var(--bg-page); padding: 84px 5%; }
section.alt { background: var(--bg-section); padding: 84px 5%; }
.about-grid  { display:grid; grid-template-columns:1fr 1fr; margin-top: 48px; gap: 60px; }
.infra-grid  { display:grid; grid-template-columns:1.2fr 1fr; margin-top: 48px; gap: 40px; align-items: start; }
.infra-points { display: flex; flex-direction: column; gap: 18px; }
.infra-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.istat { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--green); padding: 22px 20px; transition: var(--trans-base); }
.istat:hover { box-shadow: var(--shadow-sm); }
.istat-num { font-family: 'Roboto Condensed', sans-serif; font-size: 32px; color: var(--green); font-weight: 700; line-height: 1; }
.istat-label { font-size: 11px; color: var(--text-grey); letter-spacing: 1px; text-transform: uppercase; margin-top: 6px; font-weight: 600; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; margin-top: 48px; gap: 56px; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); margin-top: 42px; gap: 20px; }
.gallery-grid  { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin-top: 42px; gap: 10px; }
.testi-grid    { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); margin-top: 42px; gap: 20px; }
.pricing-grid  { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.about-vm      { display:flex; flex-direction:column; gap: 14px; margin-top: 26px; }
.contact-items { gap: 14px; }

nav {
  background: var(--nav-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 72px;
  padding: 0 4.5%;
  box-shadow: 0 2px 20px rgba(0,0,0,.45), 0 1px 0 rgba(67,168,38,.6);
  border-bottom: 2px solid rgba(67,168,38,.3);
}
.nav-links { display:flex; list-style:none; height: 72px; }
.nav-links > li > a {
  height: 72px;
  padding: 0 15px;
  font-size: 12.5px;
  letter-spacing: .2px;
  transition: var(--trans-fast);
}
.nav-links > li > a:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--nav-bg);
  border-top: 2px solid var(--green);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.05);
  min-width: 340px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.nav-links > li.has-dropdown:hover .dropdown,
.nav-links > li.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown a {
  display: block;
  font-size: 13px;
  padding: 10px 18px;
  letter-spacing: .1px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--trans-fast);
  border-left: 3px solid transparent;
}
.dropdown a:visited { color: rgba(255,255,255,.88); }
.dropdown a:hover,
.dropdown a:focus {
  background: rgba(67,168,38,.14);
  color: var(--green-light);
  border-left-color: var(--green);
  padding-left: 22px;
  text-decoration: none;
}
.dropdown a::before { content: '›'; color: var(--green); font-size: 15px; margin-right: 6px; }
.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.nav-cta > * { flex-shrink: 0; }


.btn-wa, .btn-quote, .btn-login, .btn-white, .btn-outline-white,
.btn-svc-wa, .btn-svc-call, .pcta, .form-submit, .modal-submit,
.wa-cta, .footer-cat {
  transition: var(--trans-base);
  outline: none;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.btn-wa:focus-visible, .btn-quote:focus-visible,
.btn-svc-wa:focus-visible, .wa-cta:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
}

.btn-wa {
  background: var(--wa);
  color: #fff;
  border: 2px solid var(--wa);
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 17px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.btn-wa:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,211,102,.35);
}
.btn-wa:active { transform: translateY(0); }

.btn-quote {
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.35);
  padding: 9px 17px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-quote:hover {
  color: #fff;
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
}
.btn-quote:active { transform: translateY(0); }

.btn-login {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.btn-login:hover { background: rgba(255,255,255,.07); }

.btn-white {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
}
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.5);
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
}
.btn-outline-white:hover { transform: translateY(-1px); }

.pcta {
  background: transparent;
  color: var(--green-text);
  border: 1.5px solid var(--green-border);
  font-size: 11.5px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  letter-spacing: .3px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.pcta:visited { color: var(--green-text); }
.pcta.solid {
  background: var(--wa);
  color: #fff;
  border-color: var(--wa);
}
.pcta:hover { transform: translateY(-1px); }
.pcta.solid:hover { transform: translateY(-1px); box-shadow: var(--shadow-green); }
.pcta:active, .pcta.solid:active { transform: translateY(0); }

.form-submit {
  background: var(--green);
  color: #fff;
  border: 2px solid var(--green);
  padding: 13px 32px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
}
.form-submit:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.wa-cta {
  background: var(--wa);
  color: #fff;
  border: 2px solid var(--wa);
  padding: 15px 22px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-top: 14px;
}
.wa-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,.3); }

.btn-svc-wa {
  background: var(--wa);
  color: #fff;
  border: 2px solid var(--wa);
  padding: 14px 30px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  letter-spacing: .4px;
}
.btn-svc-wa:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-svc-call {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  padding: 12px 26px;
  font-size: 13.5px;
  border-radius: var(--radius-sm);
  letter-spacing: .3px;
  min-height: unset;
}
.btn-svc-call:hover { transform: translateY(-1px); }

.prod-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--trans-base);
  border-color: var(--border);
}
.prod-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--green-border);
  transform: translateY(-4px);
}
.prod-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-section);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-body { padding: 18px 18px 16px; }
.prod-name { font-size: 16px; margin-bottom: 8px; letter-spacing: -.01em; }
.prod-desc { font-size: 13px; line-height: 1.65; margin-bottom: 12px; }
.prod-cta { gap: 8px; margin-top: 2px; }

.vm-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--trans-base);
  padding: 18px 22px;
}
.vm-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(3px);
}

.infra-point {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--trans-base);
  padding: 16px 18px;
}
.infra-point:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.istat {
  border-radius: var(--radius-md);
  transition: var(--trans-base);
}
.istat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.price-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--trans-base);
  padding: 26px;
}
.price-card:hover {
  border-top-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.price-card.featured {
  box-shadow: var(--shadow-green), var(--shadow-sm);
}

.testi-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--trans-base);
  padding: 24px;
}
.testi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.contact-item {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--trans-base);
  padding: 14px 16px;
}
.contact-item:hover { box-shadow: var(--shadow-sm); }

.related-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 20px;
  transition: var(--trans-base);
}
.related-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.hero-badge { border-radius: var(--radius-sm); }
.hero-desc { font-size: 15px; line-height: 1.9; }

.about-img { border-radius: var(--radius-md); transition: var(--trans-base); aspect-ratio: 4/3; overflow: hidden; }
.about-img:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }

.pricing-note { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.spec-tag { border-radius: 3px; font-size: 10.5px; padding: 3px 8px; }

.gal-item {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  aspect-ratio: 4/3;
  transition: var(--trans-base);
  display: block;
}
.gal-item:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.gal-item:hover img { transform: scale(1.05); }

.fg input, .fg textarea, .fg select {
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  transition: var(--trans-base);
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(67,168,38,.10);
}
.fg label { font-size: 11px; margin-bottom: 5px; letter-spacing: 1.2px; }
.contact-form { gap: 14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap: 14px; }

.footer-main { padding: 56px 5% 40px; max-width: 100%; overflow: hidden; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap: 36px; max-width: 100%; }
.footer-grid > * { min-width: 0; }  /* allow children to shrink below content width */
.footer-name { font-size: 17px; letter-spacing: .5px; }
.footer-desc { font-size: 12.5px; line-height: 1.9; margin-top: 14px; color: var(--footer-text); }
.footer-sub { letter-spacing: 1.5px; color: rgba(255,255,255,.32); }
.footer-col h4 {
  font-size: 11px;
  letter-spacing: 2.5px;
  margin-bottom: 16px;
  padding-bottom: 10px;
}
.footer-links a {
  font-size: 12.5px;
  color: var(--footer-link);
  padding: 5px 0;
  line-height: 1.4;
  transition: var(--trans-fast);
}
.footer-links a:hover { color: var(--green-light); padding-left: 5px; }
.footer-social { gap: 8px; margin-top: 16px; display: flex; flex-wrap: wrap; }
.soc-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  transition: var(--trans-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.soc-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
  display: block;
}
.soc-btn:hover {
  border-color: var(--green-light);
  color: var(--green-light);
  background: rgba(67,168,38,.14);
  transform: translateY(-2px);
}
.footer-bottom { padding: 14px 5%; }
.footer-bottom p { font-size: 12px; color: var(--footer-copy); }
.footer-cat { border-radius: var(--radius-sm); padding: 7px 15px; font-size: 12px; }

.modal {
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.modal h3 { margin-bottom: 6px; font-size: 21px; }
.modal > p { font-size: 13.5px; line-height: 1.65; }
.modal-close {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans-fast);
}
.modal-close:hover { background: var(--bg-section); color: var(--green); }
.modal-tab { font-size: 12.5px; letter-spacing: 1px; padding: 10px; }
.modal-submit {
  padding: 13px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  letter-spacing: .5px;
}

.svc-breadcrumb { border-bottom: 1px solid var(--border); }
.svc-breadcrumb a { transition: var(--trans-fast); }
.svc-breadcrumb a:hover { color: var(--green); }

.svc-h2 { letter-spacing: -.02em; line-height: 1.1; margin-bottom: 12px; }
.svc-divider { height: 3px; border-radius: 2px; }
.svc-body { font-size: 15px; line-height: 1.85; }
.svc-body p { margin-bottom: 16px; }
.svc-body h3 { letter-spacing: -.01em; margin: 24px 0 10px; }

.svc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 36px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 28px 32px;
  margin-top: 32px;
}
.svc-stat-num { font-size: 34px; line-height: 1.05; }
.svc-stat-lbl { font-size: 11px; letter-spacing: 1.2px; margin-top: 5px; }

.svc-gallery img {
  border-radius: var(--radius-sm);
  transition: var(--trans-base);
}
.svc-gallery img:hover { opacity: .88; transform: scale(1.02); box-shadow: var(--shadow-sm); }

details.svc-faq {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: var(--trans-fast);
}
details.svc-faq summary { font-size: 14px; padding: 17px 20px; letter-spacing: .1px; }
details.svc-faq .faq-answer { font-size: 14px; line-height: 1.8; padding: 8px 20px 18px; }

.svc-cta { padding: 60px 24px; }
.svc-cta h2 { letter-spacing: -.02em; margin-bottom: 14px; }
.svc-cta-btns { gap: 14px; }

.chat-bubble, .wa-fab {
  box-shadow: 0 4px 22px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.15);
}
.chat-bubble:hover, .wa-fab:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.18);
}
.chat-win {
  border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
}
.chat-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.qr-btn { border-radius: 20px; font-size: 11.5px; padding: 5px 12px; }
.qr-btn:hover { transform: translateY(-1px); }
.chat-inp { border-radius: var(--radius-sm); }
.chat-send { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

a { transition: color .18s ease; }
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.85);
  font-size: 12.5px;
  text-decoration: none;
  transition: var(--trans-fast);
}
.topbar-item:hover,
.topbar-item:focus { color: var(--green-light); text-decoration: none; }
.topbar-item:visited { color: rgba(255,255,255,.85); }
.topbar-item .topbar-svg { fill: var(--green-light); color: var(--green-light); }

.vm-title { letter-spacing: .5px; font-size: 14px; }
.infra-title { letter-spacing: .3px; font-size: 13.5px; }
.testi-text { font-size: 13.5px; line-height: 1.85; }
.testi-avatar { border-radius: var(--radius-sm); }
.c-icon { border-radius: var(--radius-sm); }
.infra-icon { border-radius: var(--radius-sm); }

.hfeature { display:flex; flex-direction:column; align-items:center; transition: var(--trans-base); }
.hfeature:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.hfeature-name { font-size: 13.5px; letter-spacing: .1px; }

[data-theme="dark"] {
  --shadow-xs: 0 1px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.18);
  --shadow-sm: 0 3px 10px rgba(0,0,0,.30), 0 1px 4px rgba(0,0,0,.20);
  --shadow-md: 0 6px 22px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.24);
  --shadow-lg: 0 10px 36px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.28);
  --shadow-green: 0 4px 18px rgba(67,168,38,.18);
}
[data-theme="dark"] .prod-card { box-shadow: var(--shadow-xs); }
[data-theme="dark"] .prod-card:hover { box-shadow: var(--shadow-md), 0 0 0 1px var(--green-border); }
[data-theme="dark"] .price-card { box-shadow: var(--shadow-xs); }
[data-theme="dark"] .testi-card { box-shadow: var(--shadow-xs); }

@media(max-width:1100px) {
  nav { height: 76px; }
  .nav-links { height: 76px; }
  .nav-links > li > a { height: 76px; padding: 0 11px; }
  section { padding: 68px 5%; }
}

@media(max-width:768px) {
  section { padding: 52px 5%; }
  section.alt { padding: 52px 5%; }
  .section-title { margin-bottom: 12px; }
  .divider { margin: 12px 0 24px; }
  .products-grid { gap: 14px; }
  .testi-grid { gap: 14px; }
  .pricing-grid { gap: 14px; }
  .footer-main { padding: 44px 5% 32px; }
  .footer-grid { gap: 28px; }
  .footer-desc { max-width: 100%; }
  .modal { border-radius: var(--radius-md); padding: 24px; }
  /* Service page mobile */
  .svc-section { padding: 48px 20px; }
  .svc-hero { padding: 48px 20px 40px; }
  .svc-cta { padding: 44px 20px; }
  .svc-stats { gap: 24px; padding: 22px 24px; }
  .svc-cta-btns { flex-direction: column; align-items: stretch; }
}

@media(max-width:480px) {
  section { padding: 40px 4%; }
  section.alt { padding: 40px 4%; }
  .prod-card { border-radius: var(--radius-sm); }
  .price-card { border-radius: var(--radius-sm); padding: 20px 16px; }
  .testi-card { border-radius: var(--radius-sm); padding: 18px 16px; }
  .footer-main { padding: 36px 4% 28px; }
  .footer-col h4 { font-size: 10.5px; }
  .footer-links a { font-size: 12px; }
}

.btn-wa, .btn-quote, .btn-white, .btn-outline-white,
.btn-svc-wa, .btn-svc-call {
  min-height: 42px;
}
@media(max-width:768px) {
  .btn-wa, .btn-quote, .btn-white, .btn-outline-white,
  .btn-svc-wa, .btn-svc-call {
    min-height: 46px;
  }
  .hamburger { min-width: 44px; min-height: 44px; }
  .soc-btn { width: 40px; height: 40px; }
}

.footer-links { gap: 0; display: flex; flex-direction: column; }
.footer-links li { padding: 1px 0; }

.nav-links > li > a.active {
  color: #fff !important;
  border-bottom-color: var(--green-light) !important;
  background: rgba(67,168,38,.08) !important;
  font-weight: 700;
}

@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME VARIABLES — LIGHT (default) + DARK
   These must be defined here so all pages using shared.css get correct colours
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"],
:root {
  --green:#43A826; --green-dark:#359120; --green-light:#5DC93A;
  --green-pale:#EFF8EB; --green-border:rgba(67,168,38,0.25);
  --bg-page:#FFFFFF; --bg-section:#F5F5F5; --bg-card:#FFFFFF;
  --bg-input:#FFFFFF; --bg-lighter:#FAFAFA;
  --border:#E0E0E0; --border-dark:#CCCCCC;
  --navy:#232323; --navy-dark:#1A1A1A; --navy-mid:#2A2A2A;
  --nav-bg:#1A1A1A;
  --text-h:#1A1A1A; --text-body:#444444; --text-grey:#666666; --text-light:#999999;
  --wa:#25D366; --wa-dark:#128C7E;
  --shadow:rgba(0,0,0,0.08);
  --footer-bg:#111111;
  --price-hidden-bg:rgba(67,168,38,.08);
  --price-hidden-text:#2D7A18;
}

[data-theme="dark"] {
  --green:#43A826; --green-dark:#4EC730; --green-light:#6EDD4A;
  --green-pale:rgba(67,168,38,0.12); --green-border:rgba(67,168,38,0.20);
  --bg-page:#0F1923; --bg-section:#141E2A; --bg-card:#1A2535;
  --bg-input:#1A2535; --bg-lighter:#1D2939;
  --border:#2A3A4A; --border-dark:#3A4A5A;
  --navy:#0F1923; --navy-dark:#0A1118; --navy-mid:#1A2535;
  --nav-bg:#0F1923;
  --text-h:#F0F4F8; --text-body:#B0BEC5; --text-grey:#8A9BAA; --text-light:#607080;
  --wa:#25D366; --wa-dark:#128C7E;
  --shadow:rgba(0,0,0,0.30);
  --footer-bg:#080E14;
  --price-hidden-bg:rgba(67,168,38,.15);
  --price-hidden-text:#5DC93A;
}

/* Services overview SEO text block — responsive */
@media(max-width:900px){
  #services-overview > div > div{grid-template-columns:1fr !important;}
}
@media(max-width:768px){
  #services-overview > div > div{grid-template-columns:1fr !important;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM — v4 (final)
   Rules:
   - All CTAs/buttons share baseline: font-size, padding, min-height, radius,
     hover, active (translateY), focus-visible outline.
   - Primary / secondary / ghost tiers.
   - Fixes: tiny .pcta, cramped admin small buttons, wa-fab colour mismatch,
     inconsistent focus states.
   - Keeps existing class names so we don't break templates.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --btn-radius: 4px;
  --btn-font: 13px;
  --btn-font-lg: 14px;
  --btn-pad-y: 11px;
  --btn-pad-x: 22px;
  --btn-pad-y-sm: 8px;
  --btn-pad-x-sm: 14px;
  --btn-min-h: 42px;
  --btn-min-h-sm: 36px;
  --btn-weight: 700;
  --btn-trans: transform .18s ease, box-shadow .22s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

/* Baseline for every button-like element we control */
.btn-wa, .btn-quote, .btn-login, .btn-white, .btn-outline-white,
.btn-svc-wa, .btn-svc-call, .pcta, .form-submit, .modal-submit,
.wa-cta, .footer-cat, .qr-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  letter-spacing: .3px;
  line-height: 1.2;
  min-height: var(--btn-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--btn-trans);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Unified focus ring — visible on keyboard only */
.btn-wa:focus-visible, .btn-quote:focus-visible, .btn-login:focus-visible,
.btn-white:focus-visible, .btn-outline-white:focus-visible,
.btn-svc-wa:focus-visible, .btn-svc-call:focus-visible,
.pcta:focus-visible, .form-submit:focus-visible, .modal-submit:focus-visible,
.wa-cta:focus-visible, .footer-cat:focus-visible, .qr-btn:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
}

/* Unified pressed state */
.btn-wa:active, .btn-quote:active, .btn-login:active,
.btn-white:active, .btn-outline-white:active,
.btn-svc-wa:active, .btn-svc-call:active,
.pcta:active, .form-submit:active, .modal-submit:active,
.wa-cta:active, .footer-cat:active, .qr-btn:active {
  transform: translateY(1px) scale(.99);
  transition: transform .06s ease;
}

/* Disabled state */
.btn-wa[disabled], .btn-quote[disabled], .btn-login[disabled],
.btn-white[disabled], .btn-outline-white[disabled],
.btn-svc-wa[disabled], .btn-svc-call[disabled],
.pcta[disabled], .form-submit[disabled], .modal-submit[disabled],
.wa-cta[disabled], .footer-cat[disabled], .qr-btn[disabled],
button[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ─── Tier 1: PRIMARY GREEN (WhatsApp/CTA actions) ──────────────────────── */
.btn-wa, .wa-cta, .btn-svc-wa, .pcta.solid, .form-submit {
  background: var(--wa);
  color: #fff;
  border: 2px solid var(--wa);
  box-shadow: 0 2px 6px rgba(37,211,102,.22);
}
.btn-wa:hover, .wa-cta:hover, .btn-svc-wa:hover, .pcta.solid:hover, .form-submit:hover {
  background: var(--wa-dark, #128C7E);
  border-color: var(--wa-dark, #128C7E);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,211,102,.32);
}

/* form-submit is brand green rather than WhatsApp green — override tier */
.form-submit {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 2px 6px rgba(67,168,38,.22);
}
.form-submit:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 6px 20px rgba(67,168,38,.32);
}

/* modal-submit — brand green primary */
.modal-submit {
  background: var(--green);
  color: #fff;
  border: 2px solid var(--green);
  box-shadow: 0 2px 6px rgba(67,168,38,.22);
  width: 100%;
}
.modal-submit:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(67,168,38,.32);
}

/* ─── Tier 2: SECONDARY (outline on dark nav/footer) ────────────────────── */
.btn-quote, .btn-outline-white, .btn-svc-call {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
}
.btn-quote { color: rgba(255,255,255,.92); }
.btn-quote:hover, .btn-outline-white:hover, .btn-svc-call:hover {
  background: rgba(255,255,255,.08);
  border-color: #fff;
  color: #fff;
  transform: translateY(-1px);
}

/* ─── Tier 2b: SECONDARY on light backgrounds (e.g. product cards) ──────── */
.pcta {
  background: transparent;
  color: var(--green-text);
  border: 1.5px solid var(--green-border);
  font-size: 12.5px;                 /* bumped up from 11.5px */
  padding: 10px 16px;                /* bumped from 8px/14px */
  min-height: var(--btn-min-h-sm);   /* 36px — no longer tiny */
}
.pcta:hover {
  background: var(--green-pale);
  border-color: var(--green);
  color: var(--green-text);
  transform: translateY(-1px);
}

/* ─── Tier 3: WHITE (on green CTA strip) ────────────────────────────────── */
.btn-white {
  background: #fff;
  color: var(--green-text);
  border: 2px solid #fff;
}
.btn-white:hover {
  background: rgba(255,255,255,.9);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* ─── Tier 4: GHOST (login button, catalogue link, chat quick reply) ────── */
.btn-login {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  min-height: var(--btn-min-h-sm);
  font-size: 12.5px;
}
.btn-login:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
}

.footer-cat {
  background: var(--green);
  color: #fff;
  border: 1.5px solid var(--green);
  padding: var(--btn-pad-y-sm) 14px;
  min-height: var(--btn-min-h-sm);
  font-size: 12.5px;
}
.footer-cat:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-1px);
}

.qr-btn {
  background: var(--green-pale);
  color: var(--green-text);
  border: 1px solid var(--green-border);
  padding: 6px 12px;
  min-height: 30px;
  font-size: 11.5px;
  border-radius: 20px;
}
.qr-btn:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* ─── Admin compact buttons — fix "cramped" reports ─────────────────────── */
.btn, .btn-sm {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: var(--btn-trans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn {
  font-size: 13px;
  padding: 9px 16px;
  min-height: 38px;
}
.btn-sm {
  font-size: 12px;
  padding: 7px 12px;    /* was 4-5px in some admin templates — cramped */
  min-height: 30px;
}
.btn:focus-visible, .btn-sm:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 2px;
}
.btn:active, .btn-sm:active {
  transform: translateY(1px) scale(.99);
  transition: transform .06s ease;
}

/* ─── Floating WhatsApp button — consistent --wa colour (was hardcoded) ─── */
.wa-fab {
  background: var(--wa) !important;
  box-shadow: 0 4px 22px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.15),
              0 0 0 1px rgba(0,0,0,.02);
}
.wa-fab:hover {
  background: var(--wa-dark, #128C7E) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.18);
}
.wa-fab:focus-visible {
  outline: 3px solid var(--green-light);
  outline-offset: 4px;
}

/* ─── Mobile minimum touch targets ──────────────────────────────────────── */
@media(max-width:768px){
  .btn-wa, .btn-quote, .btn-white, .btn-outline-white,
  .btn-svc-wa, .btn-svc-call, .form-submit, .modal-submit, .wa-cta {
    min-height: 46px;
    padding: 12px 22px;
  }
  .pcta { min-height: 40px; font-size: 13px; }
  .btn-login { min-height: 40px; }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; padding: 8px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER POLISH — v4
   - Raise low-contrast text from .50/.42 to meet WCAG AA on dark footer
   - Move footer-bottom layout to CSS (was inline styles in _footer.php)
   - Prevent catalogue/UAE badge wrapping collapse at narrow widths
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --footer-link: rgba(255,255,255,.72);  /* was .50 */
  --footer-copy: rgba(255,255,255,.62);  /* was .42 */
  --footer-fine: rgba(255,255,255,.68);  /* fine-print / VAT notice */
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom-row p {
  color: var(--footer-copy);
  font-size: 12px;
  margin: 0;
}
.footer-bottom-badges {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.footer-uae {
  font-size: 12px;
  color: var(--footer-fine);
  white-space: nowrap;
}
.footer-fine {
  font-size: 11.5px;
  color: var(--footer-fine);
  line-height: 1.65;
  margin: 0;
}
.footer-fine strong {
  color: rgba(255,255,255,.82);
  font-weight: 700;
}

@media(max-width:640px){
  .footer-bottom-row { flex-direction: column; align-items: flex-start; }
  .footer-bottom-badges { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL POLISH — v5
   - Extend :focus-visible to small/icon controls for keyboard accessibility
   - Raise footer-sub and footer-text contrast (WCAG AA on dark bg)
   - Add .btn-lg size modifier for hero CTAs (replaces inline padding/font)
   - Normalize active/pressed state on all interactive controls
   ═══════════════════════════════════════════════════════════════════════════ */

/* Icon/small controls — keyboard focus visibility */
.soc-btn,
.theme-toggle,
.hamburger,
.modal-close,
.modal-tab,
.chat-bubble,
.chat-send,
.chat-x,
.topbar-item {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.soc-btn:focus-visible,
.theme-toggle:focus-visible,
.hamburger:focus-visible,
.modal-close:focus-visible,
.modal-tab:focus-visible,
.chat-bubble:focus-visible,
.chat-send:focus-visible,
.chat-x:focus-visible,
.topbar-item:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Hamburger — slightly tighter ring so it stays inside nav */
.hamburger:focus-visible { outline-offset: 2px; }
/* Theme toggle already has a rounded track — match its shape */
.theme-toggle:focus-visible { outline-offset: 2px; border-radius: 999px; }
/* Social buttons are round; use round ring */
.soc-btn:focus-visible { border-radius: 50%; outline-offset: 3px; }
/* Chat FAB — round */
.chat-bubble:focus-visible { border-radius: 50%; outline-offset: 4px; outline-width: 3px; }

/* Pressed state on all small controls */
.soc-btn:active,
.theme-toggle:active,
.hamburger:active,
.modal-close:active,
.chat-bubble:active,
.chat-send:active,
.chat-x:active,
.topbar-item:active {
  transform: scale(.95);
  transition: transform .06s ease;
}

/* Footer contrast — raise dim text so it reads on dark background */
:root {
  --footer-text: rgba(255,255,255,.80);  /* was .62 — footer-desc */
}
.footer-sub {
  color: rgba(255,255,255,.56);  /* was .32 — still subtle but readable */
}

/* .btn-lg — size modifier for hero/prominent CTAs (replaces inline padding) */
.btn-lg {
  font-size: 14px;
  padding: 13px 24px;
  min-height: 46px;
}
@media(max-width:768px){
  .btn-lg { font-size: 14px; padding: 13px 22px; min-height: 48px; }
}

/* Admin buttons — add focus-visible that was missing */
.btn:focus-visible, .btn-sm:focus-visible,
.pg button:focus-visible, .pg a[role="button"]:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ensure keyboard users see focus on icon-only admin controls */
button[aria-label]:focus-visible,
a[aria-label]:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE HARDENING — v6
   - Service chips (shared class, wraps cleanly on mobile)
   - Container/section max-width guards so nothing exceeds viewport
   - Image/video safety: prevent oversized media from forcing horizontal scroll
   ═══════════════════════════════════════════════════════════════════════════ */

/* Service chip pills — shared class (replaces inline styles) */
.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 4px;
  max-width: 100%;
}
.svc-chip {
  font-size: 12px;
  color: var(--green-text);
  text-decoration: none;
  background: var(--green-pale);
  border: 1px solid var(--green-border);
  padding: 5px 12px;
  border-radius: 20px;
  transition: var(--trans-fast);
  line-height: 1.4;
  /* allow wrap when needed — no nowrap at narrow widths */
  white-space: nowrap;
  max-width: 100%;
}
.svc-chip:hover,
.svc-chip:focus { background: var(--green); color: #fff; border-color: var(--green); }
.svc-chip:visited { color: var(--green-text); }
.svc-chip:visited:hover { color: #fff; }
/* Ghost/muted variant — used for "All Services →" link on service pages */
.svc-chip--ghost {
  color: var(--text-grey);
  background: transparent;
  border-color: var(--border);
}
.svc-chip--ghost:hover,
.svc-chip--ghost:focus { background: var(--bg-section); color: var(--green-text); border-color: var(--green-border); }
.svc-chip--ghost:visited { color: var(--text-grey); }
@media(max-width:480px){
  .svc-chip { white-space: normal; }
}

/* Universal media safety — images and videos never force horizontal scroll */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}
/* Preserve intentional sizes on icons that set explicit dimensions */
.soc-btn svg, .topbar-svg, .hamburger span, .theme-toggle-icon,
.btn-wa svg, .btn-svc-wa svg, .btn-svc-call svg, .wa-cta svg, .wa-fab svg,
.chat-bubble svg, .chat-send svg, .modal-close svg {
  max-width: none;
  height: auto;
}

/* Force section padding to be symmetric on all viewports */
@media(max-width:480px){
  section { padding: 40px 16px; }
  .svc-section { padding: 40px 16px; }
  .topbar { padding: 9px 16px; }
  nav { padding: 0 16px; }
  .footer-main { padding: 36px 16px 24px; }
  .footer-bottom { padding: 14px 16px; }
  .hero { padding: 0 16px; }
  .hero-content { padding-left: 0; padding-right: 0; }
  .hero-bar { display: none; }  /* decorative left bar just steals width on narrow screens */
}

/* Product/service grids — never push below zero-width children */
.products-grid > *,
.gallery-grid > *,
.pricing-grid > *,
.testi-grid > *,
.infra-grid > *,
.about-grid > * {
  min-width: 0;
}

/* Tab-like rows with potentially long labels — allow scroll rather than break */
.nav-links {
  max-width: 100%;
}

/* Long word-breaks (email addresses, URLs in body text) */
.footer-links a, .footer-desc, .c-value, .contact-item { overflow-wrap: anywhere; word-break: break-word; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE FINAL OVERRIDES — v7
   These rules live at the end of the file so they always win by source order.
   They fix cascade bugs where earlier mobile rules were being overridden by
   later desktop rules (e.g. .footer-grid 2fr 1fr 1fr 1fr at line 848 was
   winning over line 283's 1fr at ≤768px).
   ═══════════════════════════════════════════════════════════════════════════ */

@media(max-width:1100px){
  /* Footer collapses to 2 cols at tablet */
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

@media(max-width:768px){
  /* Footer single column — this was being overridden by later desktop rule */
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-col h4 { margin-top: 8px; }

  /* Products/pricing/testi single column on phones */
  .products-grid { grid-template-columns: 1fr !important; }
  .pricing-grid  { grid-template-columns: 1fr !important; }
  .testi-grid    { grid-template-columns: 1fr !important; }
  .gallery-grid  { grid-template-columns: 1fr !important; }

  /* Infrastructure: cards above, stats below */
  .infra-grid    { grid-template-columns: 1fr !important; gap: 24px !important; }
  .infra-stats   { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* About grid — single column */
  .about-grid    { grid-template-columns: 1fr !important; gap: 28px !important; }
  .about-imgs    { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .about-img.feat { grid-column: span 2 !important; }

  /* Contact grid */
  .contact-grid  { grid-template-columns: 1fr !important; gap: 28px !important; }
  .form-row      { grid-template-columns: 1fr !important; }

  /* Topbar content stacking + centered */
  .topbar        { padding: 8px 16px !important; flex-direction: column !important; gap: 6px !important; }
  .topbar-left   { justify-content: center !important; flex-wrap: wrap !important; gap: 14px !important; width: 100%; }
  .topbar-hours  { font-size: 11px; }

  /* Hero layout — phone */
  .hero          { padding: 32px 16px !important; min-height: auto !important; }
  .hero-content  { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .hero-bar      { display: none !important; }
  .hero h1       { font-size: clamp(30px, 8vw, 44px) !important; }
  .hero-sub      { font-size: 14px !important; }
  .hero-desc     { font-size: 14px !important; }
  .hero-btns     { flex-direction: column !important; align-items: stretch !important; width: 100%; }
  .hero-btns a, .hero-btns button { width: 100% !important; text-align: center; }
  .hero-stats    { justify-content: space-between !important; gap: 8px !important; }
  .hstat         { padding: 8px 6px !important; border-right: none !important; flex: 1 1 auto !important; text-align: center; }
  .hstat-num     { font-size: 22px !important; }
  .hstat-label   { font-size: 9.5px !important; letter-spacing: .5px !important; }

  /* Service page hero — phone */
  .svc-hero-inner { grid-template-columns: 1fr !important; gap: 20px !important; }
  .svc-hero       { padding: 32px 16px !important; }
  .svc-hero-img   { aspect-ratio: 16/10 !important; max-height: 220px !important; }
  .svc-section    { padding: 36px 16px !important; }
  .svc-stats      { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 18px !important; }
  .svc-benefits   { grid-template-columns: 1fr !important; }
  .related-grid   { grid-template-columns: 1fr !important; }
  .svc-gallery    { grid-template-columns: 1fr !important; }

  /* Section padding */
  section { padding: 40px 16px !important; }

  /* Footer — single column, proper stacking */
  .footer-main   { padding: 36px 16px 24px !important; }
  .footer-col h4 { font-size: 11px; letter-spacing: 2px; margin-bottom: 12px; }
  .footer-links  { padding-left: 0; list-style: none; }
  .footer-links li { padding-left: 0; }
  .footer-social { justify-content: flex-start; margin-top: 14px; }

  /* Footer bottom — stack, full-width catalogue button */
  .footer-bottom     { padding: 14px 16px !important; gap: 12px; }
  .footer-bottom-row { flex-direction: column !important; align-items: flex-start !important; }
  .footer-bottom-badges { width: 100%; justify-content: flex-start; }

  /* CTA strip stacked */
  .cta-strip { flex-direction: column; text-align: center; gap: 14px; padding: 32px 16px !important; }
  .cta-btns  { flex-direction: column; width: 100%; }
  .cta-btns a { width: 100%; text-align: center; }

  /* Services chip wrap + font tightening at small widths */
  .service-chips { gap: 6px; }
  .svc-chip      { font-size: 11.5px; padding: 5px 10px; white-space: normal; }
}

/* Very narrow phones — iPhone SE, Galaxy Fold, etc. */
@media(max-width:430px){
  nav            { padding: 0 14px !important; }
  .topbar        { padding: 8px 14px !important; }
  .topbar-left   { gap: 10px !important; font-size: 11.5px; }
  .topbar-hours  { display: inline-flex; align-items:center; }
  section        { padding: 32px 14px !important; }
  .hero          { padding: 24px 14px !important; }
  .svc-section   { padding: 28px 14px !important; }
  .footer-main   { padding: 28px 14px 20px !important; }
  .svc-stats     { grid-template-columns: 1fr !important; }
  .about-imgs    { grid-template-columns: 1fr !important; }
  .about-img.feat { grid-column: auto !important; }
  .infra-stats   { grid-template-columns: 1fr !important; }
  .hero h1       { font-size: clamp(28px, 8.5vw, 38px) !important; }
  .section-title { font-size: clamp(22px, 6vw, 32px) !important; }
}

/* Final defence — no element may ever force horizontal scroll */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
img, video, iframe { max-width: 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOGUE CTA — prominent primary button after OUR PRODUCT RANGE cards
   Matches old-site placement and emphasis. Wrapper only renders when a
   catalogue file exists (see templates/index.php), so no empty gap appears
   if the admin hasn't uploaded one.
   ═══════════════════════════════════════════════════════════════════════════ */
.catalogue-cta-wrap {
  text-align: center;
  margin-top: 36px;
  padding: 0 10px;
}
.btn-catalogue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  min-height: 48px;
  border: none;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 14px rgba(67,168,38,.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer;
  max-width: 100%;
}
.btn-catalogue:hover,
.btn-catalogue:focus {
  background: #389920;
  box-shadow: 0 6px 20px rgba(67,168,38,.50);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.btn-catalogue:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(67,168,38,.35);
}
.btn-catalogue:focus-visible {
  outline: 3px solid var(--green-light, #7ED957);
  outline-offset: 3px;
}
.btn-catalogue:visited { color: #fff; }
.btn-catalogue-icon { font-size: 18px; line-height: 1; }
.catalogue-cta-sub {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-grey);
  letter-spacing: 0.3px;
}

/* Tablet + mobile — tighter spacing, full-width button at narrow widths */
@media (max-width: 768px) {
  .catalogue-cta-wrap { margin-top: 28px; }
  .btn-catalogue { font-size: 14px; padding: 13px 24px; }
}
@media (max-width: 430px) {
  .btn-catalogue { width: 100%; max-width: 320px; padding: 13px 18px; }
  .catalogue-cta-sub { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM POLISH LAYER — v8
   ───────────────────────────────────────────────────────────────────────────
   Non-destructive refinements on top of the existing system. This layer:
   - Refines easing, shadows, radii (premium feel without redesign)
   - Tightens typography hierarchy for headings and section sub-text
   - Upgrades card surfaces (richer backgrounds, softer elevation)
   - Polishes nav link states, dropdown, hero badge/pulse
   - Adds restrained motion to hovers and reveals
   - Improves footer hierarchy (spacing, typography, link scale)
   Brand direction unchanged: dark luxury green, same tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Premium spacing scale — used by polish layer, doesn't override existing */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 22px;
  --space-lg: 36px;
  --space-xl: 56px;
  --space-2xl: 88px;

  /* Premium easing — softer, more cinematic than default ease */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* Refined shadow system — layered for depth, not dark */
  --shadow-premium-sm: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
  --shadow-premium-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-premium-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
  --shadow-premium-green: 0 8px 24px rgba(67,168,38,.18), 0 2px 6px rgba(67,168,38,.10);
}

[data-theme="dark"] {
  --shadow-premium-sm: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.32);
  --shadow-premium-md: 0 4px 14px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.28);
  --shadow-premium-lg: 0 14px 40px rgba(0,0,0,.50), 0 4px 14px rgba(0,0,0,.32);
}

/* ── TYPOGRAPHY REFINEMENT ─────────────────────────────────────────────── */

h1, h2, h3 {
  letter-spacing: -0.022em;
  font-feature-settings: "ss01", "kern";
}
.section-title {
  font-family: 'Roboto Condensed', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
}
.section-sub {
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 620px;
  color: var(--text-grey);
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 3.8px;
  color: var(--green);
  text-transform: uppercase;
  font-weight: 700;
}

/* ── SURFACE REFINEMENT — cards, dropdowns, modals ─────────────────────── */

.prod-card,
.price-card,
.testi-card,
.infra-point,
.istat,
.gal-item {
  box-shadow: var(--shadow-premium-sm);
  transition: transform .32s var(--ease-out),
              box-shadow .32s var(--ease-out),
              border-color .24s var(--ease-out);
  border-radius: 10px;
}
.prod-card:hover,
.price-card:hover,
.testi-card:hover,
.infra-point:hover,
.istat:hover,
.gal-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-premium-lg);
}

/* Lift dropdown surface — compact 2-column grid, integrated with nav */
.dropdown {
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-premium-lg), 0 0 0 1px rgba(255,255,255,.04);
  padding: 6px 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* 2-column layout: halves the height for 8 services */
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 360px;
}
.dropdown a {
  font-size: 12.5px;
  padding: 8px 16px;
  letter-spacing: 0.05px;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
  /* Remove the padding-left slide so columns stay aligned */
  white-space: normal;
  line-height: 1.3;
}
.dropdown a:hover,
.dropdown a:focus {
  padding-left: 16px;  /* keep padding stable — no indent shift in grid */
  background: rgba(67,168,38,.12);
  color: var(--green-light);
  border-left-color: var(--green);
}
.dropdown a.active {
  /* Softer active highlight on service pages — was too strong */
  background: rgba(67,168,38,.09) !important;
  color: var(--green-light) !important;
  border-left-color: var(--green) !important;
  font-weight: 600;
}

/* ── NAV LINK POLISH ───────────────────────────────────────────────────── */

.nav-links > li > a {
  position: relative;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color .2s var(--ease-out);
}
.nav-links > li > a::after {
  content: '';
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--green);
  transition: width .28s var(--ease-out), left .28s var(--ease-out);
  border-radius: 2px;
}
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after {
  width: calc(100% - 30px);
  left: 15px;
}
@media (max-width: 900px) {
  .nav-links > li > a::after { display: none; }
}

/* ── HERO REFINEMENT ───────────────────────────────────────────────────── */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  background: rgba(67,168,38,.12);
  border: 1px solid rgba(67,168,38,.28);
  border-radius: 100px;
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 100%;
}
.hero-badge span {
  font-size: 10.5px;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: var(--green-light);
  text-transform: uppercase;
  white-space: normal;
  line-height: 1.4;
}
.hero-desc {
  font-size: 15.5px;
  line-height: 1.72;
  max-width: 560px;
  color: rgba(255,255,255,.72);
  margin: 18px 0 32px;
}

/* Hero gradient overlay — richer than flat rgba */
.hero-bg {
  background: linear-gradient(135deg, #0D1B22 0%, #1A2A32 45%, #1B3540 100%);
}
.hero-pattern {
  opacity: .025;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.8) 0, rgba(255,255,255,.8) 1px, transparent 1px, transparent 12px);
}

/* ── BUTTON POLISH ──────────────────────────────────────────────────────── */

.btn-quote,
.btn-wa,
.btn-white,
.btn-outline-white,
.btn-svc-call,
.btn-svc-wa,
.wa-cta,
.pcta,
.btn-catalogue,
.form-submit,
.modal-submit {
  font-family: 'Roboto Condensed', 'Inter', sans-serif;
  letter-spacing: 0.5px;
  transition: transform .18s var(--ease-out),
              background .22s var(--ease-out),
              box-shadow .24s var(--ease-out),
              border-color .22s var(--ease-out),
              color .22s var(--ease-out);
}

.btn-quote:hover,
.btn-wa:hover,
.btn-svc-wa:hover,
.wa-cta:hover,
.pcta:hover,
.btn-catalogue:hover,
.form-submit:hover,
.modal-submit:hover {
  transform: translateY(-1.5px);
}
.btn-quote:active,
.btn-wa:active,
.btn-svc-wa:active,
.wa-cta:active,
.pcta:active,
.btn-catalogue:active,
.form-submit:active,
.modal-submit:active {
  transform: translateY(0);
  transition-duration: .08s;
}

/* ── FOOTER REFINEMENT ─────────────────────────────────────────────────── */

footer { border-top: 1px solid rgba(255,255,255,.06); }

.footer-main { padding-top: 68px; padding-bottom: 48px; }

.footer-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  margin-bottom: 4px;
}
.footer-sub {
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  display: block;
  margin-bottom: 14px;
}
.footer-desc {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,255,255,.62);
  max-width: 360px;
}
.footer-col h4 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 700;
}
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,.64);
  padding: 7px 0;
  display: inline-block;
  text-decoration: none;
  transition: color .2s var(--ease-out), padding-left .24s var(--ease-out);
}
.footer-links a:visited { color: rgba(255,255,255,.64); text-decoration: none; }
.footer-links a:hover { color: var(--green-light); padding-left: 4px; text-decoration: none; }
.footer-links a:focus-visible { outline: 2px solid var(--green-light); outline-offset: 2px; border-radius: 2px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 20px 5%;
  background: rgba(0,0,0,.25);
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,.58); }
.footer-fine {
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.54);
  margin-top: 12px;
  max-width: 900px;
}

/* ── DIVIDER REFINEMENT ────────────────────────────────────────────────── */

.divider {
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%);
  box-shadow: 0 1px 3px rgba(67,168,38,.22);
}

/* ── STATS / INFRASTRUCTURE POLISH ─────────────────────────────────────── */

.istat {
  padding: 24px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 6px;
}
.istat-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 34px;
  color: var(--green);
  letter-spacing: -0.01em;
  line-height: 1;
}
.istat-label {
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-grey);
  margin-top: 8px;
  font-weight: 700;
}
.infra-point {
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.infra-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--green-pale);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.infra-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-h);
  margin-bottom: 4px;
}
.infra-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-grey);
}

/* ── PRODUCT CARD POLISH ───────────────────────────────────────────────── */

.prod-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prod-card:hover .prod-img-wrap {
  border-bottom-color: var(--green);
}
.prod-img-wrap {
  border-bottom: 3px solid transparent;
  transition: border-color .28s var(--ease-out);
}
.prod-body {
  padding: 20px 20px 18px;
}

/* ── TOP BAR REFINEMENT ────────────────────────────────────────────────── */

.topbar {
  padding: 10px 5%;
  font-size: 12.5px;
  background: #0A0A0A;
  border-bottom: 1px solid rgba(67,168,38,.22);
}
.topbar-item {
  color: rgba(255,255,255,.82);
  letter-spacing: 0.2px;
}

/* ── HAMBURGER POLISH ──────────────────────────────────────────────────── */

.hamburger {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 4px 14px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hamburger span {
  width: 22px;
  height: 2.5px;
  background: #fff;
  border-radius: 999px;
  transition: transform .28s var(--ease-out), opacity .24s var(--ease-out), background .2s ease;
}
.hamburger:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.hamburger:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(67,168,38,.22),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 4px 14px rgba(0,0,0,.12);
}

/* ── MOBILE MENU POLISH ────────────────────────────────────────────────── */

.mob-menu-open .nav-links {
  background: linear-gradient(180deg, var(--navy) 0%, #0F1A22 100%);
  box-shadow: var(--shadow-premium-lg);
  border-top: 1px solid rgba(67,168,38,.18);
}

/* ── FORM POLISH ───────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  transition: border-color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(67,168,38,.15);
}

/* ── SCROLL REVEAL — smoother ─────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE RHYTHM — premium pass ──────────────────────────────────── */

@media (min-width: 1100px) {
  section { padding: 96px 5%; }
  section.alt { padding: 96px 5%; }
}
@media (max-width: 900px) {
  section { padding: 64px 5%; }
  .section-title { font-size: clamp(26px, 5vw, 34px); }
}
@media (max-width: 430px) {
  section { padding: 48px 16px !important; }
  .section-title { font-size: clamp(24px, 7vw, 30px) !important; }
  .section-sub { font-size: 14.5px; line-height: 1.7; }
}

/* ── PREFERS-REDUCED-MOTION — respect user preference ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM POLISH — v9
   Send Message button + helper text composition. Replaces inline-styled
   helper paragraph with a reusable .form-helper class and gives the button
   a more intentional desktop/mobile rhythm.
   ═══════════════════════════════════════════════════════════════════════════ */
.form-submit {
  min-width: 200px;
  min-height: 48px;
  cursor: pointer;
}
.form-helper {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 10px;
  line-height: 1.6;
  max-width: 520px;
}
@media (max-width: 600px) {
  .form-submit { width: 100%; min-height: 50px; font-size: 14.5px; }
  .form-helper { text-align: center; font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL AUDIT FIX BLOCK — v10
   All remaining real issues from full code + live-site audit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ISTAT SPAN VARIANTS (infra facility card) ─────────────────────────
   Replaces inline style="grid-column:span 2" on the manufacturing card     */
.istat--span2   { grid-column: span 2; }
.istat--address .istat-num { font-size: 18px !important; line-height: 1.4; }
@media(max-width:430px){
  .istat--span2 { grid-column: auto; }
}

/* ── 2. SEO BODY LINKS — services-overview + service contextual blocks ────
   Replaces repeated inline style="color:var(--green-text);font-weight:600"  */
.seo-link {
  color: var(--green-text);
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease;
}
.seo-link:visited { color: var(--green-text); }
.seo-link:hover   { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

/* ── 3. VAT NOTICE BOX — pricing section ─────────────────────────────────
   Replaces inline-styled VAT disclosure div                                 */
.vat-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--green-pale);
  border: 1px solid rgba(67,168,38,.22);
  border-left: 4px solid var(--green);
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--text-grey);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.vat-notice-icon { font-size: 16px; flex-shrink: 0; }

/* ── 4. FOOTER LINKS — polished default state, no browser underlines ──────
   Belt-and-suspenders: covers both the v3 early rule and the v8 rule        */
.footer-links a,
.footer-links a:link,
.footer-links a:visited {
  text-decoration: none !important;
  color: rgba(255,255,255,.64);
}
.footer-links a:hover,
.footer-links a:focus {
  text-decoration: none;
  color: var(--green-light);
}

/* ── 5. FOOTER SOCIAL ICONS — visited state ──────────────────────────────  */
.soc-btn:visited { color: rgba(255,255,255,.78); }

/* ── 6. DROPDOWN — prevent column-break on exactly 1 item ────────────────
   If there is only 1 service the grid would look odd — min-content guard    */
.dropdown { min-width: clamp(240px, 40vw, 420px); }

/* ── 7. NAV CTA — WhatsApp btn order on desktop ──────────────────────────  */
.nav-cta .btn-wa { order: 0; }  /* reset; was -1 in earlier rule            */

/* ── 8. HERO STATS — tighter spacing on 375-430px ───────────────────────  */
@media(max-width:430px){
  .hero-stats { gap: 0 !important; }
  .hstat      { flex: 1 1 50% !important; text-align: center; padding: 10px 4px !important; border-right: none !important; }
}

/* ── 9. GALLERY GRID — prevent wide item clipping at 768-900px ───────────  */
@media(max-width:900px){
  .gal-item.wide { grid-column: span 1 !important; }
}

/* ── 10. SERVICE PAGE STATS — tighter stacking on mid-widths ─────────────  */
@media(max-width:600px){
  .svc-stats { gap: 18px 24px; padding: 20px 16px; }
}

/* ── 11. CONTACT FORM — polished Send Message button row alignment ────────  */
.contact-form > button.form-submit,
.contact-form > .form-submit {
  align-self: flex-start;
}
@media(max-width:600px){
  .contact-form > button.form-submit,
  .contact-form > .form-submit { align-self: stretch; }
}

/* ── 12. CTA STRIP — buttons never clip on 360-430px ─────────────────────  */
@media(max-width:430px){
  .cta-strip { padding: 28px 14px !important; }
  .cta-btns a, .cta-btns button { font-size: 13.5px; }
}

/* ── 13. PRICING NOTE — login link polished ──────────────────────────────  */
.pricing-note a { color: var(--green); text-decoration: none; font-weight: 700; }
.pricing-note a:hover { text-decoration: underline; }

/* ── 14. SECTION TITLE LINKS (e.g. "View Full Gallery" inline cta) ───────  */
.inline-cta-link {
  color: var(--green-text);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .18s ease, gap .18s ease;
}
.inline-cta-link:visited { color: var(--green-text); }
.inline-cta-link:hover   { color: var(--green); gap: 7px; }

/* ── 15. TOPBAR HOURS — hide on very narrow phones gracefully ─────────────
   Already hidden at ≤430px; also hide at 360px in case it slips through     */
@media(max-width:390px){
  .topbar-hours { display: inline-flex; align-items:center; }
}

@media(max-width:480px){
  .topbar-hours{
    font-size:11px;
    white-space:nowrap;
  }
}

/* ── 16. MOBILE NAV — ensure .mob-menu-open dropdown stays flex column ────
   v10 dropdown is now display:grid on desktop; override for mobile context  */
.mob-menu-open .has-dropdown.dd-open .dropdown {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
}

/* ── 17. RELATED CARD LINK — no default underline ───────────────────────  */
.related-card, .related-card:visited { text-decoration: none; }

/* ── 18. SVC BREADCRUMB LINKS ────────────────────────────────────────────  */
.svc-breadcrumb a:visited { color: var(--green-text); }

/* ── 19. ABOUT IMAGE LABEL — positioned correctly ────────────────────────  */
.about-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,.45);
  font-size: 10.5px;
}

/* ── 20. PAGE LOADER — reduced z-index clash risk ────────────────────────  */
/* loader uses z-index:99999 inline — keep for safety, no override needed    */

/* ── 21. MARQUEE — prevent overflow at narrow widths ─────────────────────  */
.marquee-wrap { overflow: hidden; max-width: 100vw; }

/* ── 22. FOOTER GRID FINAL GUARD — beats any earlier desktop rule ─────────
   These must be the absolute last grid rules in the file                    */
@media(max-width:1100px){
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media(max-width:768px){
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ── 23. FOOTER BOTTOM — stacking on phone ───────────────────────────────  */
@media(max-width:640px){
  .footer-bottom-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* ── 24. SMOOTH SCROLL — not on service page (too far) ───────────────────  */
/* html{scroll-behavior:smooth} already set; fine globally                   */

/* ── 25. BTN-CATALOGUE — full width on very narrow phones ────────────────  */
@media(max-width:390px){
  .btn-catalogue { width: 100%; max-width: 300px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUG FIX BLOCK — v11  (from live-site screenshot audit)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: SVG icon fill on buttons ─────────────────────────────────────
   The top-of-file rule forced ALL btn-wa/wa-cta/wa-fab SVGs to #1A1A1A
   (dark). That made the WA icon look dark/black on the green "Get Quote"
   pcta.solid button (Image 4). Fix: remove the blanket dark fill override
   and let each button control its own SVG color via currentColor or explicit
   fill on the element. Only the nav WhatsApp button needed the dark icon
   (it sits on a dark nav bg). -------------------------------------------- */
.btn-wa svg      { fill: currentColor; }
.wa-cta svg      { fill: currentColor; }
.pcta.solid svg  { fill: #fff !important; }
.pcta svg        { fill: currentColor; }
/* FAB stays white */
.wa-fab svg      { fill: #fff !important; }

/* ── FIX 2: footer <ul> — remove browser bullet points ───────────────────
   Image 7 shows bullet circles (•) before each footer link because the
   <ul class="footer-links"> was missing list-style:none. The CSS had
   .footer-links a::before adding the › arrow, but browser default bullets
   were also showing alongside it. Fix: kill list bullets on the <ul>. ----- */
ul.footer-links,
.footer-links {
  list-style: none !important;
  margin: 0;
  padding-left: 0 !important;
}
.footer-links li {
  list-style: none !important;
  padding-left: 0;
}

/* ── FIX 3: FAQ summary | pipe character (Image 6) ───────────────────────
   In Firefox and some Chromium versions, <summary> shows its disclosure
   triangle as a "|" glyph when list-style:none is set but ::marker is not
   explicitly hidden. Fix: hide the marker pseudo-element on ALL summary
   elements across the site. Also covers the homepage FAQ <details>. ------- */
summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  display: none;
  content: '';
}

/* ── FIX 4: "Load More Photos" & "More Questions? WhatsApp Us" buttons ────
   Images 1 & 3: btn-quote uses white/transparent text on the light
   bg-section (alt) — invisible. These buttons appear outside the dark nav
   on light-background sections.
   Fix: give these out-of-nav uses of btn-quote a proper light-context style
   by adding a .btn-quote--light variant, AND fix the specific instances:
   - loadMoreGal button in gallery section (alt = light bg)
   - FAQ WhatsApp button at bottom of FAQ section (alt = light bg)
   Rather than a new class (would require template change), override
   the specific context: buttons inside section.alt get dark text. --------- */
section.alt .btn-quote,
section.alt button.btn-quote,
#faq .btn-quote,
#gallery .btn-quote {
  color: var(--green-text) !important;
  border-color: var(--green) !important;
  background: transparent !important;
}
section.alt .btn-quote:hover,
#faq .btn-quote:hover,
#gallery .btn-quote:hover {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}

/* ── FIX 5: Services nav active underline on service pages (Image 5) ──────
   On service pages the "Services" nav link gets class="active" which adds
   a green border-bottom underline (from .nav-links > li > a.active rule).
   This looks fine but the line appears to hang below the nav visually.
   The ::after pseudo-element underline from v8 polish conflicts with the
   border-bottom approach. Unify: use ONLY the ::after underline for active
   state on desktop, remove border-bottom from the active rule. ------------ */
@media(min-width:901px) {
  .nav-links > li > a.active {
    border-bottom-color: transparent !important;
  }
}
/* On mobile the ::after is hidden, keep border-bottom as fallback */
@media(max-width:900px) {
  .nav-links > li > a.active {
    border-bottom-color: var(--green) !important;
  }
}

/* ── FIX 6: dropdown grid — restore display:flex for browsers that don't
   support display:grid on a <div> that also has opacity/visibility ─────────
   The v10 2-col grid works in Chrome/Edge but can break in Safari 14 and
   Firefox <70 because we set display:grid but the base rule uses display:flex.
   Belt-and-suspenders: use CSS columns instead which degrades gracefully. -- */
.dropdown {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 320px;        /* forces 2-col wrapping at ~8 items */
}
@supports (display: grid) {
  .dropdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: none;
    flex-direction: unset;
    flex-wrap: unset;
  }
}
/* Mobile: always single column regardless of grid support */
.mob-menu-open .has-dropdown.dd-open .dropdown {
  display: flex !important;
  flex-direction: column !important;
  max-height: none !important;
  grid-template-columns: unset !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL FIX BLOCK — v12
   Fixes: chatbot window, SVG icon fill, CSS deduplication, remaining polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. CHAT WINDOW — COMPLETE BASE DEFINITION ────────────────────────────
   The .chat-win element had NO base rule defining its hidden state.
   It only had .chat-win.open for the reveal, and partial overrides in
   later blocks. Without the base: fixed positioning, flex layout, opacity,
   transform, and pointer-events — the window either showed always or never.
   This is the definitive base rule. Lives at end of file so it wins.       */
.chat-win {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 360px;
  height: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95) translateY(12px);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s ease;
  overflow: hidden;
  /* border-radius and box-shadow come from v3 premium block — no need to repeat */
}
.chat-win.open {
  opacity: 1;
  pointer-events: all;
  transform: scale(1) translateY(0);
}

/* Chat header — was only partially defined */
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--green);
  flex-shrink: 0;
}

/* Chat input field — was never fully defined */
.chat-inp {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-dark);
  color: var(--text-h);
  padding: 8px 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  outline: none;
  min-width: 0;
}

/* Chat send button */
.chat-send {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s ease;
}

/* Mobile overrides for chat window */
@media (max-width: 768px) {
  .chat-win {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 88px;
    height: min(480px, calc(100vh - 160px));
  }
}
@media (max-width: 480px) {
  .chat-win {
    width: 100vw;
    right: 0;
    bottom: 80px;
    height: calc(100vh - 140px);
    border-radius: 0;
  }
}

/* ── 2. SVG ICON FILL — definitive fix ────────────────────────────────────
   Line 9 has fill:#1A1A1A !important which overrides everything including
   the v11 fix. This overrides it with higher specificity + !important.
   btn-wa and wa-cta: white SVG so it's readable on green/wa background.
   wa-fab: always white. pcta.solid: white icon on green. pcta (ghost): currentColor. */
.btn-wa svg,
.btn-svc-wa svg,
.wa-cta svg { fill: #fff !important; }
.wa-fab svg { fill: #fff !important; }
.pcta.solid svg { fill: #fff !important; }
.pcta:not(.solid) svg { fill: currentColor !important; }

/* ── 3. TOPBAR HOURS — ensure it's NEVER hidden unintentionally ──────────
   The v7 block at 430px restores it with display:inline-flex which is correct.
   The v10 block at 390px also restores it. But there was a comment in the
   code saying "hide at 430px" that was never implemented. Currently it
   shows at all widths — this is correct behavior for the live site. Leave it.
   However, ensure it wraps safely and doesn't break layout.                */
@media (max-width: 430px) {
  .topbar-hours { font-size: 11px; white-space: nowrap; flex-shrink: 0; }
}

/* ── 4. FOOTER BULLETS — belt-and-suspenders guarantee ──────────────────
   Multiple rules above set list-style:none but browser stylesheet precedence
   can still win on some mobile browsers. This is the final word.            */
.footer-links,
.footer-links li,
.footer-links ul {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ── 5. FAQ PIPE CHARACTER — ensure all summary elements suppressed ───────
   summary::marker needs to be on every summary, not just specific classes.
   The global rule in v11 handles it but reinforce for specificity.          */
details > summary,
details > summary::-webkit-details-marker,
details > summary::before {
  list-style: none;
}
details > summary::marker { display: none !important; content: '' !important; }
details.svc-faq > summary::marker { display: none !important; content: '' !important; }
details.faq-item > summary::marker { display: none !important; content: '' !important; }

/* ── 6. BTN-QUOTE ON LIGHT BACKGROUND — comprehensive fix ───────────────
   btn-quote was white text on white/light backgrounds in gallery, faq,
   and service-page sections. The v11 fix covered section.alt — extend to
   any light-background context that might have missed.                      */
.svc-section .btn-quote,
.svc-section button.btn-quote {
  color: var(--green-text) !important;
  border-color: var(--green) !important;
  background: transparent !important;
}
.svc-section .btn-quote:hover {
  background: var(--green) !important;
  color: #fff !important;
}

/* ── 7. DROPDOWN — definitive position+display without conflicts ─────────
   The v10 2-col grid + v11 @supports fallback can fight each other.
   Collapse into a single clean rule set that always works.                  */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--nav-bg);
  border-top: 2px solid var(--green);
  min-width: 340px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
  padding: 6px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.10);
}
.nav-links > li.has-dropdown:hover .dropdown,
.nav-links > li.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Mobile dropdown always single column */
.mob-menu-open .has-dropdown .dropdown,
.mob-menu-open .has-dropdown.dd-open .dropdown {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  max-height: none !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.mob-menu-open .has-dropdown .dropdown { display: none !important; }
.mob-menu-open .has-dropdown.dd-open .dropdown { display: flex !important; }

/* ── 8. CHAT BUBBLE — ensure NOT hidden by wa-fab SVG fill override ──────
   The chat bubble is separate from wa-fab, ensure its SVG is always white  */
.chat-bubble svg { fill: #fff !important; width: 26px; height: 26px; }

/* ── 9. PREMIUM CHAT UI — matches site design language ──────────────────  */
.chat-head {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  border-bottom: none;
}
.msg.bot .msg-bub {
  border-radius: 4px 12px 12px 12px;
}
.msg.user .msg-bub {
  border-radius: 12px 4px 12px 12px;
}
.chat-inp-area {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.qr-btn {
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 20px;
  background: var(--green-pale);
  color: var(--green-text);
  border: 1px solid var(--green-border);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.qr-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ── 10. WHATSAPP FALLBACK BUBBLE — only when ai_chat is OFF ────────────
   wa-fab z-index and animation already defined. Ensure it never conflicts
   with chat bubble when both might theoretically be visible.                */
.wa-fab { z-index: 998; }
.chat-bubble { z-index: 999; }

/* ── 11. SECTION.ALT BTN-QUOTE — ensure works on both light themes ───────*/
[data-theme="light"] section.alt .btn-quote,
[data-theme="light"] #faq .btn-quote,
[data-theme="light"] #gallery .btn-quote {
  color: var(--green-text) !important;
  border-color: var(--green) !important;
}
[data-theme="light"] section.alt .btn-quote:hover,
[data-theme="light"] #faq .btn-quote:hover,
[data-theme="light"] #gallery .btn-quote:hover {
  background: var(--green) !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY BATCHED LOAD-MORE — v13
   Controls visibility, transitions, and button layout for the batched
   gallery reveal system. Works alongside existing .gal-item and .reveal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden gallery items — visually gone but space-less (not display:none which
   breaks grid layout). We use visibility+opacity+height collapse approach. */
.gal-item.gal-hidden {
  display: none;   /* simple display:none is fine here because JS inserts
                      them back before the grid reflows — no layout flash */
}

/* Appearing state — the item is back in the DOM but starts transparent
   so the staggered fade-in from JS feels smooth */
.gal-item.gal-appearing {
  animation: galFadeIn .4s ease both;
}
@keyframes galFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Load More button wrapper */
.gallery-load-more {
  text-align: center;
  margin-top: 36px;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Reuse .btn-catalogue styling already in shared.css.
   No extra rules needed — just the wrapper positioning above. */

/* Count hint below the button */
#galCountHint {
  font-size: 12px;
  color: var(--text-light);
  letter-spacing: 0.2px;
  margin: 0;
}

/* Mobile — tighter spacing */
@media (max-width: 600px) {
  .gallery-load-more { margin-top: 24px; }
  #galCountHint { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY + PERFORMANCE FINAL PASS — v13
   skip-link, main landmark, focus improvements, CLS prevention
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SKIP TO CONTENT LINK ─────────────────────────────────────────────────
   Visually hidden until focused — surfaces for keyboard/screen reader users  */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100000;
  background: var(--green);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top .15s ease;
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--green-light);
  outline-offset: 2px;
}

/* ── MAIN LANDMARK ────────────────────────────────────────────────────────
   No visual style needed — landmark is semantic only                        */
main { display: block; } /* IE11 compat */

/* ── REDUCED MOTION: page loader ─────────────────────────────────────────
   If user prefers reduced motion, hide loader instantly — no animation     */
@media (prefers-reduced-motion: reduce) {
  #pageLoader { display: none !important; }
}

/* ── FOCUS VISIBLE: ensure every interactive element shows focus ring ─────
   Supplements existing :focus-visible rules — catches any missed elements  */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 2px;
}

/* ── CLS PREVENTION: logo image dimensions ───────────────────────────────
   Prevent layout shift while logo loads by reserving space                 */
.logo-img-custom {
  height: 64px;
  width: auto;
  aspect-ratio: auto;
}

/* ── PERFORMANCE: reduce animation on low-end devices ────────────────────
   Already handled by prefers-reduced-motion block above but belt+suspenders */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  .chat-bubble, .wa-fab { animation: none; }
  .hero-pulse { animation: none; }
  .td { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ── TOUCH TARGET: minimum 44×44px on all interactive elements ───────────
   Already handled by min-height rules but ensure buttons/links on mobile  */
@media (max-width: 768px) {
  .soc-btn, .modal-close, .chat-x, .theme-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── CONTRAST: improve low-contrast elements ─────────────────────────────
   topbar-hours was rgba(255,255,255,.52) — raise to .70 for WCAG AA       */
.topbar-hours { color: rgba(255,255,255,.70); }

/* ── GALLERY IMAGES: explicit aspect ratio for CLS prevention ────────────
   Already use aspect-ratio:4/3 on .gal-item — belt+suspenders             */
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── PRINT STYLES: hide non-content elements ─────────────────────────────  */
@media print {
  .topbar, nav, .hamburger, .wa-fab, .chat-bubble, .chat-win,
  .modal-overlay, #pageLoader, .skip-link { display: none !important; }
  main { padding: 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HEADER POLISH — v14
   Target: 360–430px phones feel balanced, not crowded.
   Strategy:
   - Reduce nav height slightly on phones
   - Logo scales down proportionally
   - nav-cta gap tightened
   - WhatsApp btn becomes icon-only below 430px (text already hidden via .wa-label)
   - WhatsApp btn padding reduced so it reads as an icon control, not a CTA block
   - Theme toggle stays the same (already small)
   - Hamburger stays clearly tappable
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 430px and below: tighten the action group ───────────────────────────── */
@media (max-width: 430px) {
  nav {
    height: 60px !important;
    padding: 0 12px !important;
  }
  .logo-img-custom {
    height: 38px !important;
    max-width: 160px !important;
  }
  /* Tighten the whole action group */
  .nav-cta {
    gap: 6px !important;
  }
  /* WhatsApp button: icon-only, smaller padding */
  .nav-cta .btn-wa {
    padding: 7px 9px !important;
    min-height: 36px !important;
    font-size: 0 !important;         /* hide any residual text */
    gap: 0 !important;
    box-shadow: none !important;
  }
  .nav-cta .btn-wa svg {
    width: 17px !important;
    height: 17px !important;
  }
  /* Quote button already hidden at 900px — keep hidden */
  /* Theme toggle — keep current size, it's already small */
  /* Hamburger — keep min 40px touch target */
  .hamburger {
    padding: 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* ── 375px and below: maximum compactness ────────────────────────────────── */
@media (max-width: 375px) {
  nav {
    height: 56px !important;
    padding: 0 10px !important;
  }
  .logo-img-custom {
    height: 34px !important;
    max-width: 140px !important;
  }
  .nav-cta {
    gap: 4px !important;
  }
  /* On 360px: hide WA button entirely — hamburger is primary action */
  .nav-cta .btn-wa {
    display: none !important;
  }
  /* Keep theme toggle and hamburger */
  .hamburger {
    padding: 7px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

/* ── 390px: mid-size — WA icon only, slightly reduced logo ──────────────── */
@media (min-width: 376px) and (max-width: 390px) {
  nav {
    height: 58px !important;
  }
  .logo-img-custom {
    height: 36px !important;
    max-width: 150px !important;
  }
  .nav-cta {
    gap: 5px !important;
  }
  .nav-cta .btn-wa {
    padding: 7px 9px !important;
    min-height: 36px !important;
    box-shadow: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HEADER — DEFINITIVE PASS v15
   ─────────────────────────────────────────────────────────────────────────
   This block is the single source of truth for nav/header from 800px down.
   All rules use !important to override the conflicting legacy rules above
   (lines 288-321, 365-370, 1035-1041, 1077-1082, 1397-1402) which set
   min-height:44-46px, height:72px, logo:52px etc. at ≤768px.

   Breakpoints covered:
   ─ 800px  (large phones landscape, small tablets)
   ─ 768px  (iPad portrait, large phones)
   ─ 600px  (medium phones landscape)
   ─ 480px  (standard phones)
   ─ 430px  (iPhone 14 Pro Max, Pixel 7)
   ─ 390px  (iPhone 14 Pro)
   ─ 375px  (iPhone SE 3rd gen, standard iPhone)
   ─ 360px  (Galaxy S series, Moto G)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 800px: first mobile-feel breakpoint ────────────────────────────────── */
@media (max-width: 800px) {
  nav {
    height: 68px !important;
    padding: 0 20px !important;
  }
  .logo-img-custom {
    height: 48px !important;
    max-width: 200px !important;
  }
  .nav-cta { gap: 8px !important; }
  /* btn-wa: keep text but tighter padding */
  .nav-cta .btn-wa {
    padding: 8px 14px !important;
    min-height: 38px !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }
  /* Hamburger: comfortable touch target */
  .hamburger {
    padding: 9px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  /* theme toggle: standard */
  .theme-toggle {
    min-width: unset !important;
    min-height: unset !important;
    width: 38px !important;
    height: 22px !important;
  }
}

/* ── 600px: phones in landscape / larger phones ──────────────────────────── */
@media (max-width: 600px) {
  nav {
    height: 64px !important;
    padding: 0 16px !important;
  }
  .logo-img-custom {
    height: 44px !important;
    max-width: 180px !important;
  }
  .nav-cta { gap: 7px !important; }
  /* btn-wa: icon + small text still ok at this size */
  .nav-cta .btn-wa {
    padding: 7px 12px !important;
    min-height: 36px !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }
  .nav-cta .btn-wa svg {
    width: 15px !important;
    height: 15px !important;
  }
  .hamburger {
    padding: 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .theme-toggle {
    min-width: unset !important;
    min-height: unset !important;
  }
}

/* ── 480px: standard phones portrait ────────────────────────────────────── */
@media (max-width: 480px) {
  nav {
    height: 62px !important;
    padding: 0 14px !important;
  }
  .logo-img-custom {
    height: 40px !important;
    max-width: 170px !important;
  }
  .nav-cta { gap: 6px !important; }
  /* btn-wa: icon only — text hidden via .wa-label */
  .nav-cta .btn-wa {
    padding: 7px 10px !important;
    min-height: 36px !important;
    font-size: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
  }
  .nav-cta .btn-wa svg {
    width: 16px !important;
    height: 16px !important;
  }
  .hamburger {
    padding: 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .theme-toggle {
    min-width: unset !important;
    min-height: unset !important;
    width: 36px !important;
    height: 20px !important;
  }
}

/* ── 430px: iPhone Pro Max, Pixel 7 ─────────────────────────────────────── */
@media (max-width: 430px) {
  nav {
    height: 58px !important;
    padding: 0 12px !important;
  }
  .logo-img-custom {
    height: 36px !important;
    max-width: 160px !important;
  }
  .nav-cta { gap: 5px !important; }
  .nav-cta .btn-wa {
    padding: 6px 9px !important;
    min-height: 34px !important;
    font-size: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
    border-width: 1.5px !important;
  }
  .nav-cta .btn-wa svg {
    width: 16px !important;
    height: 16px !important;
  }
  .hamburger {
    padding: 7px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    gap: 4px !important;
  }
  .hamburger span {
    width: 20px !important;
    height: 2px !important;
  }
  .theme-toggle {
    width: 34px !important;
    height: 20px !important;
    min-width: unset !important;
    min-height: unset !important;
  }
  .theme-toggle-knob {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ── 390px: iPhone 14 Pro standard ──────────────────────────────────────── */
@media (max-width: 390px) {
  nav {
    height: 56px !important;
    padding: 0 11px !important;
  }
  .logo-img-custom {
    height: 34px !important;
    max-width: 150px !important;
  }
  .nav-cta { gap: 4px !important; }
  .nav-cta .btn-wa {
    padding: 6px 8px !important;
    min-height: 32px !important;
    border-radius: 4px !important;
  }
  .nav-cta .btn-wa svg { width: 15px !important; height: 15px !important; }
  .hamburger {
    padding: 7px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* ── 375px: iPhone SE, standard iPhone ──────────────────────────────────── */
@media (max-width: 375px) {
  nav {
    height: 54px !important;
    padding: 0 10px !important;
  }
  .logo-img-custom {
    height: 32px !important;
    max-width: 140px !important;
  }
  .nav-cta { gap: 4px !important; }
  /* Hide WA button — hamburger is the only needed action */
  .nav-cta .btn-wa {
    display: none !important;
  }
  .hamburger {
    padding: 6px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  .hamburger span { width: 18px !important; }
  .theme-toggle {
    width: 32px !important;
    height: 18px !important;
  }
}

/* ── 360px: Galaxy S, Moto G, narrow Android ────────────────────────────── */
@media (max-width: 360px) {
  nav {
    height: 52px !important;
    padding: 0 8px !important;
  }
  .logo-img-custom {
    height: 30px !important;
    max-width: 130px !important;
  }
  .nav-cta { gap: 3px !important; }
  .nav-cta .btn-wa { display: none !important; }
  .hamburger {
    padding: 5px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
}

/* ── HAMBURGER OPEN STATE: fix transform for smaller spans ──────────────── */
@media (max-width: 430px) {
  .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }
}
@media (max-width: 375px) {
  .hamburger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg) !important; }
  .hamburger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg) !important; }
}

/* ── MOBILE MENU TOP OFFSET: nav height sync ────────────────────────────── */
/* JS sets --nav-h via setNavHeight() in nav.js. CSS fallback values here   */
/* match the heights above so the menu positions correctly before JS fires   */
@media (max-width: 800px) { :root { --nav-h: 68px; } }
@media (max-width: 600px) { :root { --nav-h: 64px; } }
@media (max-width: 480px) { :root { --nav-h: 62px; } }
@media (max-width: 430px) { :root { --nav-h: 58px; } }
@media (max-width: 390px) { :root { --nav-h: 56px; } }
@media (max-width: 375px) { :root { --nav-h: 54px; } }
@media (max-width: 360px) { :root { --nav-h: 52px; } }


/* ═══════════════════════════════════════════════════════════════════════════
   iOS SAFARI COMPATIBILITY PATCH
   - Safe CSS-only additions
   - Zero impact on Windows / Chrome / Edge / Firefox desktop
   - Applied at bottom to avoid cascade conflicts
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Momentum scrolling (iOS Safari) — ignored by all non-WebKit browsers   */
body {
  -webkit-overflow-scrolling: touch;
}

/* 2. iOS zoom-on-focus fix — input/textarea/select font-size must be ≥16px  */
/*    on mobile. Desktop is unaffected (rule is inside @media max-width:768). */
/*    font-size:16px is the threshold iOS Safari uses before auto-zooming.   */
@media (max-width: 768px) {
  .fg input,
  .fg textarea,
  .fg select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* 3. Footer link tap targets — ensure ≥44px touch area on mobile            */
/*    Uses padding instead of min-height to avoid layout shift.              */
/*    Does NOT change desktop layout (inside @media max-width:768).          */
@media (max-width: 768px) {
  .footer-links a {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* 4. iOS Safari — remove native input/button styling                        */
/*    Scoped to TEXT inputs, textarea, select, and buttons only.             */
/*    EXCLUDES: file, checkbox, radio — those rely on native browser UI.     */
/*    Safe on Windows Chrome/Edge/Firefox — they have explicit CSS anyway.   */
input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Restore a subtle select arrow — the native one is hidden by appearance:none */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2343A826' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  padding-right: 32px;
}

/* 5. iOS — WhatsApp FAB safe-area bottom padding for iPhone home bar        */
/*    env(safe-area-inset-bottom) is non-zero on iPhone X+.                 */
/*    Harmless on Android/desktop (env() resolves to 0 or is ignored).      */
.wa-fab,
.chat-bubble {
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 768px) {
  .wa-fab,
  .chat-bubble {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 430px) {
  .wa-fab,
  .chat-bubble {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* 6. iOS — body scroll lock when mobile menu is open                       */
/*    Without this, iOS Safari scrolls the page behind the open nav menu.   */
/*    position:fixed + width:100% prevents the rubber-band scroll bleed.    */
/*    Only applies when JS adds .mob-menu-open — desktop is unaffected.     */
body.mob-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   UI POLISH v2 — Premium upgrades: nav, dropdown, mobile menu, buttons,
   cards, sections. CSS-only, no layout/structure changes. Cross-platform safe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. NAV GLASS EFFECT + SCROLL SHADOW ─────────────────────────────────── */
nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .3s ease, background .3s ease;
  border-bottom: 1px solid rgba(67,168,38,.18);
}
nav.scrolled {
  box-shadow: 0 4px 32px rgba(0,0,0,.55), 0 1px 0 rgba(67,168,38,.5);
}

/* ── 2. NAV LINK — refined underline animation ────────────────────────────── */
.nav-links > li > a {
  letter-spacing: .25px;
  font-weight: 600;
}

/* ── 3. DESKTOP DROPDOWN — premium 2-column grid ─────────────────────────── */
.dropdown {
  border-top: 2px solid var(--green);
  border-radius: 0 0 12px 12px;
  min-width: 380px;
  padding: 10px 0 12px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top center;
  transition: opacity .2s cubic-bezier(.25,.8,.25,1),
              transform .2s cubic-bezier(.25,.8,.25,1),
              visibility .2s;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.nav-links > li.has-dropdown:hover .dropdown,
.nav-links > li.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Dropdown divider between columns */
.dropdown a {
  font-size: 13px;
  padding: 11px 18px;
  color: rgba(255,255,255,.82);
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .16s ease, color .16s ease, border-color .16s ease, padding-left .16s ease;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  letter-spacing: .1px;
}
.dropdown a:hover,
.dropdown a:focus {
  background: rgba(67,168,38,.13);
  color: #7dda5a;
  border-left-color: var(--green);
  padding-left: 22px;
}
.dropdown a.active {
  background: rgba(67,168,38,.1) !important;
  color: #7dda5a !important;
  border-left-color: var(--green) !important;
  font-weight: 600;
}

/* ── 4. BTN-WA — stronger green glow ─────────────────────────────────────── */
.btn-wa {
  background: linear-gradient(135deg, #25D366 0%, #1db954 100%);
  border: none;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 2px 8px rgba(37,211,102,.3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
}

/* ── 5. BTN-QUOTE — crisper ghost style ──────────────────────────────────── */
.btn-quote {
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 6px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-quote:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.75);
  transform: translateY(-1px);
}

/* ── 6. PRODUCT CARDS — elevated hover ───────────────────────────────────── */
.prod-card {
  transition: transform .22s cubic-bezier(.25,.8,.25,1),
              box-shadow .22s cubic-bezier(.25,.8,.25,1),
              border-color .22s ease;
  will-change: transform;
}
.prod-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.1);
}

/* ── 7. INFRA STAT CARDS ─────────────────────────────────────────────────── */
.istat {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.istat:hover {
  transform: translateY(-3px);
  border-left-color: var(--green);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), -2px 0 0 var(--green);
}

/* ── 8. SECTION TITLES — tighter tracking ────────────────────────────────── */
.section-title {
  letter-spacing: -.035em;
}

/* ── 9. CTA STRIP — subtle pulse on WA button ────────────────────────────── */
.cta-strip .btn-white {
  border-radius: 6px;
  font-weight: 700;
}

/* ── 10. FORM INPUTS — focus ring improvement ────────────────────────────── */
.fg input:focus,
.fg textarea:focus,
.fg select:focus {
  box-shadow: 0 0 0 3px rgba(67,168,38,.12), 0 0 0 1px var(--green);
  border-left-width: 4px;
}

/* ── 11. FOOTER LINKS — hover underline ──────────────────────────────────── */
.footer-links a {
  transition: color .18s ease, padding-left .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}

/* ── 12. SCROLL REVEAL — smoother easing ─────────────────────────────────── */
.reveal {
  transition: opacity .65s cubic-bezier(.25,.8,.25,1),
              transform .65s cubic-bezier(.25,.8,.25,1);
}

/* ── 13. HERO CTA BUTTONS — full width on mobile ────────────────────────── */
@media (max-width: 768px) {
  .hero-btns .btn-white,
  .hero-btns .btn-outline-white {
    justify-content: center;
  }
}

/* ── 14. NAV SCROLL CLASS — applied by JS ────────────────────────────────── */
/* (nav.scrolled applied when window.scrollY > 30) */

/* ── 15. MOBILE MENU — show 2–3 items before scrolling ──────────────────── */
/* Target: ~3 items visible (each item ~52px tall) + some breathing room.
   We clamp the max-height so the panel is visibly taller on first open,
   encouraging users to see there's more to scroll through.
   This overrides the earlier calc(100vh - var(--nav-h)) cap.            */
@media (max-width: 900px) {
  .mob-menu-open .nav-links {
    /* Show approximately 3.4 items before scrolling kicks in.
       Each nav item is 50px tall → 3 items = 150px + padding.
       We raise the min visible height so the panel feels immediately useful.
       max-height allows full scroll if needed; initial visual = ~3 items.  */
    max-height: min(72vh, calc(100dvh - var(--nav-h, 62px)));
    /* Snap the viewport so items feel intentional, not cut off */
    scroll-snap-type: y proximity;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--green);
    /* Subtle inner shadow at bottom shows more content below */
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 32px), transparent 100%);
  }

  /* Each item snaps cleanly */
  .mob-menu-open .nav-links > li {
    scroll-snap-align: start;
  }

  /* Item height — comfortable tap targets, slightly taller than before */
  .mob-menu-open .nav-links > li > a {
    height: 54px;
    padding: 0 22px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .15px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s ease;
  }
  .mob-menu-open .nav-links > li > a:hover,
  .mob-menu-open .nav-links > li > a:active {
    background: rgba(255,255,255,.07);
  }
  .mob-menu-open .nav-links > li > a.active {
    color: #7dda5a;
    border-left: 3px solid var(--green);
    background: rgba(67,168,38,.08);
  }

  /* Dropdown sub-items — clear indent, bigger tap area */
  .mob-menu-open .has-dropdown .dropdown a {
    padding: 12px 20px 12px 28px;
    font-size: 13.5px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .15s ease;
  }
  .mob-menu-open .has-dropdown .dropdown a:hover,
  .mob-menu-open .has-dropdown .dropdown a:active {
    background: rgba(67,168,38,.1);
    color: #7dda5a;
  }

  /* Services accordion — smooth expand */
  .mob-menu-open .has-dropdown.dd-open .dropdown {
    border-left: 3px solid var(--green);
    margin-left: 18px;
    background: rgba(0,0,0,.2);
    border-radius: 0 0 4px 4px;
  }

  /* Arrow rotation — smoother */
  .mob-menu-open .has-dropdown .dd-arrow {
    transition: transform .25s cubic-bezier(.25,.8,.25,1);
    font-size: 11px;
  }
  .mob-menu-open .has-dropdown.dd-open .dd-arrow {
    transform: rotate(180deg);
  }

  /* Hamburger button — extra tap comfort */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 16. MOBILE MENU — extra small screens ───────────────────────────────── */
@media (max-width: 480px) {
  .mob-menu-open .nav-links {
    max-height: min(68vh, calc(100dvh - var(--nav-h, 62px)));
  }
  .mob-menu-open .nav-links > li > a {
    height: 52px;
    font-size: 14px;
  }
}

/* ── 17. GALLERY ITEM HOVER ───────────────────────────────────────────────── */
.gal-item {
  transition: transform .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.gal-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  z-index: 2;
  position: relative;
}

/* ── 18. TESTIMONIAL CARDS — hover lift ──────────────────────────────────── */
.testi-card {
  transition: transform .22s ease, box-shadow .22s ease;
}
.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
}

/* ── 19. SERVICE PAGE — CTA BUTTONS ──────────────────────────────────────── */
.btn-svc-wa {
  background: linear-gradient(135deg, #25D366, #1db954);
  border: none;
  border-radius: 6px;
}
.btn-svc-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37,211,102,.4);
}
.btn-svc-call {
  border-radius: 6px;
}

/* ── 20. RELATED CARDS ────────────────────────────────────────────────────── */
.related-card {
  transition: transform .2s ease, box-shadow .2s ease;
  border-radius: 6px;
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}