:root{
  --cyan:#19d6ff; --cyan2:#8ff0ff; --blue:#0879f2; --navy:#061826; --navy2:#0b2337;
  --ink:#071424; --muted:#607386; --white:#fff; --soft:#eefbff; --line:#d6edf6; --green:#10c83f;
  --shadow:0 24px 70px rgba(3,24,43,.12); --shadow2:0 35px 90px rgba(8,121,242,.18);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Sans Georgian","Segoe UI",Arial,sans-serif;color:var(--ink);background:#f8fdff;line-height:1.7;overflow-x:hidden}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.top-line{height:4px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--cyan));background-size:200% 100%;animation:shine 5s linear infinite}.site-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(25,214,255,.18);box-shadow:0 12px 40px rgba(6,24,38,.06)}.header-inner{max-width:1240px;margin:auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:10px;font-weight:1000;letter-spacing:-.04em}.brand img{height:62px;width:auto}.brand span{font-size:22px}.brand b{color:var(--cyan)}.nav{display:flex;align-items:center;gap:20px;font-weight:900;font-size:15px}.nav>a,.dropdown-trigger{position:relative;padding:18px 2px;cursor:pointer}.nav>a:after,.dropdown-trigger:after{content:"";position:absolute;left:0;right:0;bottom:10px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--blue));transform:scaleX(0);transform-origin:left;transition:.26s}.nav>a:hover:after,.dropdown:hover .dropdown-trigger:after,.nav a.active:after{transform:scaleX(1)}.dropdown{position:relative}.dropdown-menu{position:absolute;top:56px;left:-18px;width:330px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border:1px solid rgba(25,214,255,.25);border-radius:24px;padding:12px;box-shadow:var(--shadow2);opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transition:.22s}.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.dropdown-menu a{display:flex;gap:10px;align-items:center;padding:13px 14px;border-radius:16px;color:var(--navy);font-weight:850}.dropdown-menu a:hover{background:linear-gradient(135deg,#e9fbff,#fff);color:var(--blue);transform:translateX(3px)}.socials,.footer-socials{display:flex;gap:11px;align-items:center;overflow:visible}.socials a,.footer-socials a{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid rgba(25,214,255,.28);box-shadow:0 10px 26px rgba(6,24,38,.08);transition:.24s;overflow:visible}.socials a:hover,.footer-socials a:hover{transform:translateY(-5px) rotate(-4deg);box-shadow:0 18px 40px rgba(25,214,255,.25)}.socials img,.footer-socials img{width:24px;height:24px;object-fit:contain}.menu-toggle{display:none;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border:0;border-radius:14px;padding:10px 13px;font-size:22px}.section{padding:86px 22px}.container{max-width:1180px;margin:auto}.narrow{max-width:980px}.center{text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(25,214,255,.11);border:1px solid rgba(25,214,255,.22);color:var(--blue);padding:8px 14px;border-radius:999px;font-weight:1000;font-size:13px;letter-spacing:.08em;text-transform:uppercase}.section h2,.content h2{font-size:clamp(28px,3.4vw,46px);line-height:1.18;letter-spacing:-.04em;margin:16px 0}.section p{color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;padding:14px 22px;font-weight:1000;box-shadow:0 18px 42px rgba(8,121,242,.24);transition:.24s;cursor:pointer}.btn:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(8,121,242,.30)}.btn.white{background:#fff;color:var(--blue);border:1px solid rgba(25,214,255,.35)}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 20%,rgba(25,214,255,.18),transparent 28%),linear-gradient(180deg,#fff 0%,#f2fbff 100%)}.hero-inner{max-width:1240px;margin:auto;padding:46px 22px 0;text-align:center}.hero h1{font-size:clamp(34px,5.1vw,72px);line-height:1.08;letter-spacing:-.055em;margin:20px auto 18px;max-width:1050px}.hero h1 span{color:var(--blue)}.hero-sub{max-width:820px;margin:0 auto 26px;color:var(--muted);font-weight:600}.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:24px 0 38px}.hero-grid{position:relative;isolation:isolate;margin:0 -22px;background:#061826;background-image:linear-gradient(90deg,rgba(6,24,38,.88),rgba(6,24,38,.68),rgba(6,24,38,.88)),url("doorgo banner.png");background-size:520px auto;padding:54px 22px;display:grid;grid-template-columns:repeat(3,minmax(210px,330px));gap:28px;justify-content:center}.hero-grid:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(25,214,255,.20),transparent 46%);z-index:-1}.hero-tile{position:relative;overflow:hidden;border-radius:34px;min-height:380px;box-shadow:0 30px 80px rgba(0,0,0,.34);transform:translateY(0);animation:float 7s ease-in-out infinite}.hero-tile:nth-child(2){animation-delay:-2.2s}.hero-tile:nth-child(3){animation-delay:-4s}.hero-tile img{width:100%;height:100%;object-fit:cover;transition:.5s}.hero-tile:hover img{transform:scale(1.08)}.hero-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,24,43,.08),rgba(3,24,43,.78))}.hero-tile span{position:absolute;left:22px;right:22px;bottom:24px;color:#fff;font-size:24px;font-weight:1000;line-height:1.25;z-index:2}.tile-icon{position:absolute;top:20px;left:20px;width:64px;height:64px;border-radius:22px;background:rgba(255,255,255,.9);display:grid;place-items:center;z-index:3;box-shadow:0 15px 35px rgba(0,0,0,.18)}.tile-icon img{width:34px;height:34px;object-fit:contain}.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}.trust{padding:18px;border:1px solid rgba(25,214,255,.25);border-radius:22px;background:rgba(255,255,255,.82);box-shadow:0 12px 30px rgba(6,24,38,.06);font-weight:900}.video-row,.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.video-card{position:relative;min-height:245px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#eafeff,#fff);border:1px solid rgba(25,214,255,.22);box-shadow:var(--shadow);display:grid;place-items:center;text-align:center;padding:24px;transition:.3s}.video-card:hover{transform:translateY(-7px)}.video-card:before{content:"";position:absolute;inset:0;background:url("doorgo banner.png") center/360px auto;opacity:.08}.play{position:relative;width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));display:grid;place-items:center;color:#fff;font-size:34px;box-shadow:0 20px 44px rgba(8,121,242,.27);padding-left:5px}.video-card h3{position:relative;margin:18px 0 0;font-size:19px}.services-strip{background:#061826;color:#fff;background-image:linear-gradient(rgba(6,24,38,.86),rgba(6,24,38,.78)),url("doorgo banner.png");background-size:520px auto}.services-strip p{color:#d8f5ff}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}.service-card{background:#fff;border:1px solid rgba(25,214,255,.18);border-radius:34px;overflow:hidden;box-shadow:var(--shadow);transition:.32s;position:relative}.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow2)}.card-img{height:230px;overflow:hidden;position:relative}.card-img img{width:100%;height:100%;object-fit:cover;transition:.45s}.card-img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(6,24,38,.12));transition:.25s}.service-card:hover .card-img img{transform:scale(1.07)}.service-card:hover .card-img:after{background:linear-gradient(180deg,rgba(6,24,38,.34),rgba(8,121,242,.24))}.icon-badge{width:92px;height:92px;border-radius:50%;background:#fff;border:8px solid #fff;display:grid;place-items:center;margin:-46px 0 0 30px;position:relative;z-index:2;box-shadow:0 16px 40px rgba(6,24,38,.14);transition:.25s}.icon-badge img{width:46px;height:46px;object-fit:contain}.service-card:hover .icon-badge{background:linear-gradient(135deg,var(--cyan),var(--blue));transform:rotate(-5deg) scale(1.04)}.service-card:hover .icon-badge img{filter:brightness(0) invert(1)}.card-body{padding:24px 30px 32px}.card-body h3{font-size:25px;line-height:1.28;margin:0 0 12px;letter-spacing:-.03em}.card-body p{color:var(--muted);margin-bottom:20px}.card-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:1000}.card-link:after{content:"→"}.page-title{background:#fff;text-align:center;padding:46px 22px 28px}.page-title h1{font-size:clamp(30px,4vw,56px);line-height:1.12;letter-spacing:-.045em;margin:0}.page-title p{color:var(--muted);max-width:830px;margin:13px auto 0}.banner-hero{height:270px;background:#061826;background-image:linear-gradient(rgba(6,24,38,.62),rgba(6,24,38,.62)),url("doorgo banner.png");background-size:540px auto;background-position:center;display:grid;place-items:center;color:#fff;text-align:center}.banner-hero h2{font-size:clamp(34px,5vw,70px);letter-spacing:-.04em;text-shadow:0 10px 30px rgba(0,0,0,.35)}.content{max-width:1100px;margin:auto;padding:64px 22px}.service-top{background:#061826;background-image:linear-gradient(rgba(6,24,38,.72),rgba(6,24,38,.72)),url("doorgo banner.png");background-size:520px auto;padding:0 22px}.service-photo{max-width:980px;margin:auto;border-radius:0 0 36px 36px;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.32)}.service-photo img{width:100%;height:430px;object-fit:cover}.lead-card{background:linear-gradient(135deg,#fff,#effcff);border:1px solid rgba(25,214,255,.20);border-radius:34px;padding:34px;box-shadow:var(--shadow);position:relative;overflow:hidden}.lead-card:before{content:"";position:absolute;right:-80px;top:-80px;width:210px;height:210px;border-radius:50%;background:rgba(25,214,255,.14)}.info-grid,.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}.info-box,.feature{background:#fff;border:1px solid rgba(25,214,255,.20);border-radius:26px;padding:24px;box-shadow:0 14px 40px rgba(6,24,38,.07);transition:.28s}.info-box:hover,.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow2)}.mini-icon{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--cyan),var(--blue));display:grid;place-items:center;margin-bottom:12px}.mini-icon img{width:27px;height:27px;object-fit:contain;filter:brightness(0) invert(1)}.price-box{margin:28px 0;padding:24px;border-radius:26px;background:linear-gradient(135deg,#e9fbff,#fff);border:1px solid rgba(25,214,255,.26);box-shadow:0 16px 48px rgba(8,121,242,.11);font-weight:900}.price-box b{color:var(--blue)}.text-section{margin:44px 0}.text-section h2{font-size:clamp(26px,3vw,40px);margin-bottom:14px;display:flex;align-items:center;gap:12px}.text-section h2:before{content:"";width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 18px rgba(25,214,255,.45);flex:0 0 auto}.pill-list{display:flex;gap:10px;flex-wrap:wrap}.pill-list span{padding:10px 14px;border-radius:999px;background:#eafaff;border:1px solid rgba(25,214,255,.24);color:var(--blue);font-weight:850}.steps{counter-reset:step;display:grid;gap:14px}.step{counter-increment:step;background:#fff;border:1px solid rgba(25,214,255,.2);border-radius:24px;padding:20px;box-shadow:0 12px 34px rgba(6,24,38,.06)}.step h3:before{content:counter(step);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;margin-right:10px}.faq details{background:#fff;border:1px solid rgba(25,214,255,.22);border-radius:20px;padding:18px 20px;margin:12px 0;box-shadow:0 10px 28px rgba(6,24,38,.05);transition:.24s}.faq details[open]{box-shadow:var(--shadow);border-color:rgba(25,214,255,.46)}.faq summary{font-weight:1000;cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";float:right;color:var(--blue);font-size:22px}.faq details[open] summary:after{content:"–"}.cta-band{margin:50px 0;border-radius:34px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:22px;box-shadow:var(--shadow2);position:relative;overflow:hidden}.cta-band:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(25,214,255,.22),transparent 38%)}.cta-band>*{position:relative}.cta-band p{color:#dff8ff}.related{padding:74px 22px;background:#061826;background-image:linear-gradient(rgba(6,24,38,.84),rgba(6,24,38,.80)),url("doorgo banner.png");background-size:520px auto;color:#fff;overflow:hidden}.related h2{text-align:center}.related-track{display:flex;gap:24px;width:max-content;animation:marquee 22s linear infinite}.related-track:hover{animation-play-state:paused}.related .service-card{width:340px;color:var(--ink);flex:0 0 auto}.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.contact-card{text-align:center;padding:38px 24px;border-radius:34px;background:#fff;border:1px solid rgba(25,214,255,.22);box-shadow:var(--shadow);transition:.3s;overflow:hidden;position:relative}.contact-card:hover{transform:translateY(-8px)}.contact-card:after{content:"";position:absolute;right:-48px;bottom:-70px;width:160px;height:160px;border-radius:50%;background:rgba(25,214,255,.12)}.contact-card img{width:78px;height:78px;margin:0 auto 18px;padding:17px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));border:8px solid #fff;box-shadow:0 20px 44px rgba(8,121,242,.22);filter:brightness(0) invert(1)}.map-box{height:360px;border-radius:36px;background:linear-gradient(135deg,#e9fbff,#fff);border:1px solid rgba(25,214,255,.24);box-shadow:var(--shadow);display:grid;place-items:center;text-align:center;color:var(--blue);font-weight:1000;position:relative;overflow:hidden}.map-box:before{content:"";position:absolute;inset:0;background:url("doorgo banner.png") center/420px auto;opacity:.07}.about-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}.operator-box{background:linear-gradient(135deg,#e9fbff,#fff);border-radius:40px;padding:28px;border:1px solid rgba(25,214,255,.22);box-shadow:var(--shadow)}.operator-box img{margin:auto;filter:drop-shadow(0 26px 40px rgba(8,121,242,.16))}.footer{background:linear-gradient(135deg,#02070b,#061826 55%,#03111b);color:#fff;padding:60px 22px;position:relative;overflow:hidden}.footer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 20%,rgba(25,214,255,.16),transparent 34%),radial-gradient(circle at 90% 0%,rgba(8,121,242,.14),transparent 38%)}.footer-inner{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr 1.1fr 1.1fr;gap:34px;position:relative}.footer h3{margin-top:0}.footer a{display:block;margin:9px 0;color:#dff7ff;transition:.2s}.footer a:hover{color:var(--cyan);transform:translateX(4px)}.footer p{color:#d7ebf2}.footer-logo{width:160px;background:#fff;border-radius:20px;padding:8px;margin-bottom:12px}.phone-float{position:fixed;left:26px;bottom:26px;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#18e053,#08a620);display:grid;place-items:center;z-index:100;box-shadow:0 18px 38px rgba(9,191,32,.35),0 0 0 12px rgba(9,191,32,.10);animation:pulse 2.3s ease-in-out infinite}.phone-float img{width:34px;height:34px;filter:brightness(0) invert(1)}.phone-float:hover{transform:scale(1.08) rotate(-8deg)}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}.reveal.in-view{opacity:1;transform:translateY(0)}
@keyframes shine{to{background-position:200% 0}}@keyframes float{50%{transform:translateY(-14px)}}@keyframes pulse{50%{transform:scale(1.06)}}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-365px)}}
@media(max-width:980px){.header-inner{padding:10px 16px}.brand img{height:56px}.brand span{display:none}.menu-toggle{display:block}.nav,.socials{display:none}.nav.open{display:flex;position:absolute;left:12px;right:12px;top:82px;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border:1px solid rgba(25,214,255,.25);border-radius:24px;box-shadow:var(--shadow2);flex-direction:column;align-items:stretch;padding:14px}.dropdown-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:16px;margin-top:6px}.hero-grid,.service-grid,.video-row,.gallery-grid,.info-grid,.feature-grid,.contact-cards,.about-split,.footer-inner,.trust-row{grid-template-columns:1fr}.hero-grid{padding:34px 18px}.hero-tile{min-height:300px;animation:none}.section{padding:58px 18px}.content{padding:44px 18px}.service-photo img{height:300px}.cta-band{display:block}.related-track{animation:none;display:grid;width:auto}.related .service-card{width:auto}.footer{padding-bottom:120px}.phone-float{width:64px;height:64px;left:18px;bottom:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* v4 polish: richer DoorGO motion, centered contact cards, fixed footer socials */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 10% 12%,rgba(25,214,255,.10),transparent 24%),radial-gradient(circle at 90% 18%,rgba(8,121,242,.09),transparent 28%),linear-gradient(180deg,#fbfeff,#f3fcff);}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(25,214,255,.65),transparent);}
.brand img{filter:drop-shadow(0 10px 18px rgba(25,214,255,.18));transition:.35s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:translateY(-2px) rotate(-2deg) scale(1.03)}
.nav>a,.dropdown-trigger{transition:.24s}.nav>a:hover,.dropdown-trigger:hover{color:var(--blue);transform:translateY(-1px)}
.socials a,.footer-socials a{position:relative;isolation:isolate;overflow:hidden!important;border:1px solid rgba(25,214,255,.45);background:linear-gradient(135deg,#fff,#eafbff);box-shadow:0 12px 28px rgba(6,24,38,.10),inset 0 0 0 3px rgba(255,255,255,.8)}
.socials a:before,.footer-socials a:before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 180deg,var(--cyan),#fff,var(--blue),var(--cyan));z-index:-2;animation:socialSpin 5s linear infinite;opacity:.35}
.socials a:after,.footer-socials a:after{content:"";position:absolute;inset:3px;border-radius:inherit;background:#fff;z-index:-1}
.socials img,.footer-socials img{width:23px!important;height:23px!important;object-fit:contain;transform:none!important;filter:none!important;position:relative;z-index:2}
.footer-socials{gap:13px;justify-content:flex-start;margin:22px 0 12px;flex-wrap:wrap;overflow:visible!important}
.footer-socials a{width:50px!important;height:50px!important;flex:0 0 50px;margin:0!important;display:grid!important;place-items:center!important;transform-origin:center}
.footer small{display:block;margin-top:12px;color:#e9fbff;font-weight:800}.footer-logo{box-shadow:0 20px 46px rgba(25,214,255,.12)}
.footer-inner>div:first-child{display:flex;flex-direction:column;align-items:flex-start}.phone-float{transition:.25s}.phone-float:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(24,224,83,.4);animation:phoneRing 1.9s ease-out infinite}.phone-float img{animation:phoneWiggle 2.1s ease-in-out infinite}

.contact-page-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f6fdff 0%,#fff 58%,#f2fbff 100%)}
.contact-page-section:before{content:"";position:absolute;inset:0;background:url("doorgo banner.png") center 30px/520px auto;opacity:.035;pointer-events:none}.contact-page-section .container{position:relative;z-index:1}
.contact-intro{max-width:820px;margin:0 auto 34px;text-align:center;color:var(--muted);font-weight:700}.contact-cards{align-items:stretch;justify-items:center;gap:30px;margin-top:14px}.contact-card{width:100%;min-height:305px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 28px 32px;border-radius:32px;background:linear-gradient(180deg,#fff 0%,#fbfeff 58%,#eefbff 100%);border:1px solid rgba(25,214,255,.35);box-shadow:0 26px 70px rgba(5,47,74,.10);overflow:hidden;isolation:isolate}.contact-card:before{content:"";position:absolute;inset:auto -60px -85px auto;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(25,214,255,.24),rgba(25,214,255,.03) 65%,transparent);z-index:-1;transition:.35s}.contact-card:after{right:-70px;bottom:-85px;width:190px;height:190px;background:rgba(25,214,255,.13);transition:.35s}.contact-card:hover:before{transform:scale(1.18)}
.contact-card img{display:block!important;width:92px!important;height:92px!important;object-fit:contain!important;margin:0 auto 22px!important;padding:24px!important;border-radius:50%!important;background:linear-gradient(135deg,var(--blue),var(--cyan))!important;border:10px solid #fff!important;outline:2px dashed rgba(25,214,255,.62);outline-offset:7px;box-shadow:0 18px 44px rgba(8,121,242,.22)!important;filter:brightness(0) invert(1)!important;opacity:1!important;transform:none!important;position:relative;z-index:1;animation:softFloat 4.5s ease-in-out infinite}.contact-card:nth-child(2) img{animation-delay:-1.3s}.contact-card:nth-child(3) img{animation-delay:-2.5s}.contact-card:hover img{animation-play-state:paused;transform:translateY(-6px) scale(1.05)!important;outline-color:rgba(8,121,242,.75)}
.contact-card h3{margin:18px 0 8px;font-size:25px;letter-spacing:-.03em;color:var(--navy);font-weight:1000}.contact-card p{margin:0;color:#536b7e;font-weight:800;max-width:260px}.contact-card a{color:var(--blue);font-weight:1000}.map-box{min-height:360px;margin-top:16px;border-radius:38px;background:linear-gradient(135deg,#e8fbff,#fff 58%,#dcf8ff);border:1px solid rgba(25,214,255,.40);box-shadow:0 32px 85px rgba(8,121,242,.12);overflow:hidden}.map-box:after{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;border-radius:50%;background:rgba(25,214,255,.12);transform:translate(-50%,-50%);animation:mapPulse 2.8s ease-in-out infinite}.map-box>div{position:relative;z-index:1;background:rgba(255,255,255,.80);backdrop-filter:blur(8px);border:1px solid rgba(25,214,255,.26);border-radius:22px;padding:18px 24px;box-shadow:0 18px 44px rgba(6,24,38,.08)}

.hero-tile,.service-card,.video-card,.contact-card,.operator-box,.lead-card{will-change:transform}.service-card:before,.video-card:after{content:"";position:absolute;left:-80%;top:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:.65s}.service-card:hover:before,.video-card:hover:after{left:135%}.btn,.card-link{position:relative;overflow:hidden}.btn:before{content:"";position:absolute;left:-70%;top:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:.55s}.btn:hover:before{left:120%}.banner-hero h2{animation:titleFloat 4.4s ease-in-out infinite}.page-title h1{position:relative;display:inline-block}.page-title h1:after{content:"";position:absolute;left:12%;right:12%;bottom:-14px;height:4px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent);animation:shine 4s linear infinite;background-size:200% 100%}

@keyframes socialSpin{to{transform:rotate(360deg)}}
@keyframes phoneRing{0%{opacity:.8;transform:scale(.92)}100%{opacity:0;transform:scale(1.35)}}
@keyframes phoneWiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-10deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-6deg)}40%{transform:rotate(0)}}
@keyframes softFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes mapPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.7)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:980px){.footer-inner>div:first-child{align-items:center;text-align:center}.footer-socials{justify-content:center}.contact-card{min-height:250px}.contact-card img{width:82px!important;height:82px!important}.contact-page-section{padding-top:54px}.map-box{min-height:280px}}

/* v5 premium polish — less template-like, stronger handmade DoorGO feel */
:root{--cyan:#20d8ff;--cyan2:#a9f4ff;--blue:#0877ed;--deep:#031725;--ink:#071827;--paper:#fbfeff;--muted:#536a7d;--ring:rgba(32,216,255,.36)}
body{background:linear-gradient(180deg,#fbfeff 0%,#f3fbff 42%,#ffffff 100%);letter-spacing:-.01em}.top-line{height:3px;background:linear-gradient(90deg,#0b7bff,#28dcff,#7ff6ff,#0b7bff);background-size:300% 100%}.site-header{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(18,139,208,.16);box-shadow:0 18px 60px rgba(1,34,56,.08)}.header-inner{max-width:1280px;padding:13px 26px}.brand img{height:54px}.brand span{font-size:21px}.nav{gap:24px}.nav>a,.dropdown-trigger{font-size:14.5px}.socials a,.footer-socials a{overflow:visible!important;box-shadow:0 12px 32px rgba(6,37,58,.10),0 0 0 6px rgba(32,216,255,.06)!important}.socials img,.footer-socials img{width:22px!important;height:22px!important;object-fit:contain!important;filter:none!important;opacity:1!important}.page-title{padding:42px 22px 32px;background:linear-gradient(180deg,#fff,#f5fcff);position:relative;overflow:hidden}.page-title:before{content:"";position:absolute;inset:auto 8% -70px auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(32,216,255,.16),transparent 65%)}.page-title h1{font-size:clamp(28px,3.4vw,48px);font-weight:1000}.banner-hero{height:245px;position:relative;background-image:linear-gradient(120deg,rgba(3,23,37,.86),rgba(5,42,66,.70)),url("doorgo banner.png");background-size:620px auto;overflow:hidden}.banner-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 35%,rgba(32,216,255,.16) 43%,transparent 54%);animation:bannerSweep 8s ease-in-out infinite}.banner-hero h2{position:relative;font-weight:1000;letter-spacing:.04em;text-transform:none}.hero{background:radial-gradient(circle at 18% 12%,rgba(32,216,255,.20),transparent 30%),radial-gradient(circle at 86% 24%,rgba(8,119,237,.11),transparent 34%),linear-gradient(180deg,#fff,#f4fcff)}.hero-inner{padding-top:62px}.hero h1{text-wrap:balance}.hero-sub{font-size:18px}.trust-row{max-width:980px;margin-left:auto;margin-right:auto}.trust{position:relative;overflow:hidden;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border-color:rgba(32,216,255,.24)}.trust:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--cyan),var(--blue))}.hero-grid,.services-strip,.related{background-image:linear-gradient(120deg,rgba(3,17,27,.92),rgba(5,36,56,.80)),url("doorgo banner.png");background-size:680px auto;background-attachment:fixed}.hero-tile{border-radius:36px;border:1px solid rgba(255,255,255,.16);box-shadow:0 34px 90px rgba(0,0,0,.38)}.hero-tile:after{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(3,23,37,.82))}.tile-icon,.icon-badge{box-shadow:0 18px 44px rgba(0,0,0,.18),0 0 0 8px rgba(32,216,255,.10)}.service-card{border-radius:32px;border-color:rgba(32,216,255,.23);box-shadow:0 24px 64px rgba(1,37,60,.10)}.service-card:after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--blue));transform:scaleX(.22);transform-origin:left;transition:.35s}.service-card:hover:after{transform:scaleX(1)}.card-body h3{font-size:24px}.card-link{background:rgba(8,119,237,.08);padding:10px 16px;border-radius:999px}.video-card{background:linear-gradient(145deg,#fff,#eafbff);box-shadow:0 24px 60px rgba(1,37,60,.10)}.play{box-shadow:0 18px 40px rgba(8,119,237,.24),0 0 0 10px rgba(32,216,255,.13)}.footer{background:linear-gradient(135deg,#02080d 0%,#031725 52%,#07324b 100%);border-top:1px solid rgba(32,216,255,.18)}.footer-inner{align-items:start}.footer-logo{width:150px;border-radius:24px}.footer p,.footer a{font-size:15px}.phone-float{box-shadow:0 20px 48px rgba(0,191,65,.36),0 0 0 10px rgba(0,213,77,.13)!important}

/* Contact v5: visible icons + polished non-empty layout */
.contact-page-section{padding:76px 22px 92px;background:radial-gradient(circle at 10% 16%,rgba(32,216,255,.12),transparent 30%),linear-gradient(180deg,#f7fdff,#fff 48%,#f5fcff)}.contact-page-section:before{opacity:.025!important;background-size:700px auto!important}.contact-hero-card{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin:0 auto 34px;padding:34px 38px;border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(232,250,255,.82));border:1px solid rgba(32,216,255,.32);box-shadow:0 30px 90px rgba(4,44,68,.10);position:relative;overflow:hidden}.contact-hero-card:before{content:"";position:absolute;inset:-80px -120px auto auto;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle,rgba(32,216,255,.25),transparent 66%)}.contact-hero-card:after{content:"";position:absolute;left:-60px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(8,119,237,.11),transparent 68%)}.mini-kicker{display:inline-flex;padding:8px 13px;border-radius:999px;color:#0070dd;font-weight:1000;background:#e9fbff;border:1px solid rgba(32,216,255,.34);margin-bottom:10px}.contact-hero-card h2{margin:0 0 8px;font-size:clamp(24px,3vw,38px);line-height:1.2;letter-spacing:-.04em;position:relative}.contact-hero-card p{margin:0;color:#5c7284;font-weight:700;max-width:720px;position:relative}.contact-main-btn{white-space:nowrap;position:relative}.contact-cards-polished{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px!important;margin:0 auto 34px!important}.contact-card{min-height:270px!important;padding:34px 30px 30px!important;border-radius:32px!important;background:linear-gradient(180deg,#fff 0%,#fbfeff 70%,#eefbff 100%)!important;border:1px solid rgba(32,216,255,.42)!important;box-shadow:0 26px 74px rgba(5,52,78,.12)!important;position:relative!important;overflow:hidden!important;text-align:center!important}.contact-card:hover{transform:translateY(-9px)!important;box-shadow:0 38px 95px rgba(8,119,237,.16)!important}.contact-card>img{display:none!important}.contact-icon{width:94px;height:94px;border-radius:30px;display:grid;place-items:center;margin:0 auto 26px;background:linear-gradient(135deg,#ffffff,#e9fbff);border:1px solid rgba(32,216,255,.55);box-shadow:0 18px 50px rgba(7,56,86,.12),inset 0 0 0 7px rgba(32,216,255,.08);position:relative;z-index:2;transform:rotate(-3deg);transition:.3s}.contact-icon:before{content:"";position:absolute;inset:-8px;border-radius:34px;border:1px dashed rgba(8,119,237,.28);animation:iconOrbit 6s linear infinite}.contact-icon img{display:block!important;width:46px!important;height:46px!important;object-fit:contain!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none!important;opacity:1!important;animation:none!important;transform:none!important;position:relative!important;z-index:3!important}.contact-card:hover .contact-icon{transform:rotate(0) translateY(-5px);background:linear-gradient(135deg,var(--cyan),var(--blue))}.contact-card:hover .contact-icon img{filter:brightness(0) invert(1)!important}.contact-card h3{font-size:26px!important;margin:0 0 10px!important;color:#071827!important;font-weight:1000!important}.contact-card p{font-size:16px!important;line-height:1.7!important;color:#516a7d!important;font-weight:800!important;margin:0 auto!important}.contact-card a{color:#0877ed!important}.map-panel{min-height:330px;border-radius:38px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(225,248,255,.92)),url("doorgo banner.png") center/620px auto;border:1px solid rgba(32,216,255,.40);box-shadow:0 30px 90px rgba(5,52,78,.11);display:grid;place-items:center;position:relative;overflow:hidden}.map-panel:before{content:"";position:absolute;inset:22px;border-radius:30px;border:1px dashed rgba(8,119,237,.22)}.map-copy{background:rgba(255,255,255,.86);border:1px solid rgba(32,216,255,.34);border-radius:22px;padding:18px 28px;text-align:center;box-shadow:0 20px 48px rgba(7,56,86,.10);position:relative}.map-copy span{display:block;color:#0877ed;font-weight:1000}.map-copy b{color:#194057}.map-box{display:none!important}

@keyframes bannerSweep{0%,100%{transform:translateX(-45%);opacity:.5}50%{transform:translateX(55%);opacity:1}}@keyframes iconOrbit{to{transform:rotate(360deg)}}
@media(max-width:980px){.contact-hero-card{grid-template-columns:1fr;text-align:center;padding:28px}.contact-main-btn{white-space:normal}.contact-cards-polished{grid-template-columns:1fr!important}.contact-card{min-height:230px!important}.hero-grid,.services-strip,.related{background-attachment:scroll}.footer-inner{grid-template-columns:1fr!important}.socials{display:none!important}}


/* =========================================================
   DoorGO v7 MOBILE PREMIUM UPDATE
   Goal: phone UI should feel custom, polished, animated, and not template-like.
   ========================================================= */

:root{
  --mobile-glass: rgba(255,255,255,.82);
  --mobile-card: rgba(255,255,255,.94);
  --mobile-border: rgba(25,214,255,.28);
}

/* Better base motion */
@keyframes dgFloatSoft{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes dgGlowSweep{0%{transform:translateX(-120%) rotate(18deg);opacity:0}18%{opacity:.55}58%{opacity:.1}100%{transform:translateX(140%) rotate(18deg);opacity:0}}
@keyframes dgPhonePulse{0%{box-shadow:0 0 0 0 rgba(16,200,63,.38),0 18px 40px rgba(16,200,63,.32)}70%{box-shadow:0 0 0 16px rgba(16,200,63,0),0 18px 40px rgba(16,200,63,.32)}100%{box-shadow:0 0 0 0 rgba(16,200,63,0),0 18px 40px rgba(16,200,63,.32)}}
@keyframes dgCardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dgBgDrift{0%{background-position:0 0, center}100%{background-position:220px 0, center}}

/* Universal polish */
.btn,.card-link,.contact-main-btn,.phone-float,.footer-socials a,.socials a,.menu-toggle{
  position:relative;
  overflow:hidden;
}
.btn:before,.card-link:before,.contact-main-btn:before,.menu-toggle:before{
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  width:55px;
  left:-75px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:rotate(18deg);
  transition:.65s ease;
}
.btn:hover:before,.card-link:hover:before,.contact-main-btn:hover:before,.menu-toggle:hover:before{left:125%}

.service-card,.contact-card,.info-box,.feature,.video-card,.lead-card,.operator-box,.map-panel,.contact-hero-card{
  animation:dgCardIn .58s cubic-bezier(.2,.8,.2,1) both;
}

.phone-float{
  animation:dgPhonePulse 2.1s infinite;
}

/* Header/social visibility fix */
.socials,.footer-socials{
  overflow:visible!important;
}
.socials a,.footer-socials a{
  flex:0 0 auto;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.socials img,.footer-socials img{
  object-fit:contain!important;
  display:block!important;
}

/* Contact icon consistency */
.contact-card .contact-icon,
.contact-card > img{
  object-fit:contain!important;
  background:linear-gradient(145deg,#ffffff,#eafaff)!important;
  border:1px solid rgba(25,214,255,.34)!important;
}

/* Mobile-first upgrade */
@media(max-width: 760px){
  html{scroll-padding-top:84px}
  body{
    background:
      radial-gradient(circle at 10% 3%,rgba(25,214,255,.20),transparent 28%),
      radial-gradient(circle at 90% 0%,rgba(8,121,242,.14),transparent 32%),
      linear-gradient(180deg,#f8fdff 0%,#ffffff 42%,#f4fbff 100%)!important;
  }

  body:after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    opacity:.45;
    background-image:
      linear-gradient(rgba(8,121,242,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(8,121,242,.035) 1px, transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(to bottom,transparent,black 16%,black 80%,transparent);
  }

  .top-line{
    height:5px;
    background:linear-gradient(90deg,#00d7ff,#0879f2,#83f4ff,#00d7ff);
    background-size:260% 100%;
    animation:shine 4.5s linear infinite!important;
  }

  .site-header{
    top:10px;
    width:calc(100% - 24px);
    margin:0 auto;
    border-radius:24px;
    border:1px solid rgba(25,214,255,.20);
    box-shadow:0 18px 42px rgba(6,24,38,.13);
    background:rgba(255,255,255,.76)!important;
    backdrop-filter:blur(20px) saturate(1.25);
  }

  .header-inner{
    min-height:72px;
    padding:10px 12px!important;
    gap:10px;
  }

  .brand{
    min-width:0;
    gap:8px;
  }

  .brand img{
    height:50px!important;
    max-width:118px;
    object-fit:contain;
    filter:drop-shadow(0 10px 16px rgba(8,121,242,.16));
  }

  .brand span{
    display:block!important;
    font-size:0!important;
  }

  .brand span:after{
    content:"DoorGO";
    font-size:19px;
    line-height:1;
    font-weight:1000;
    letter-spacing:-.055em;
    color:var(--ink);
  }

  .brand b{color:var(--blue)}

  .menu-toggle{
    display:grid!important;
    place-items:center;
    margin-left:auto;
    width:48px;
    height:48px;
    padding:0!important;
    border-radius:18px!important;
    font-size:0!important;
    box-shadow:0 14px 32px rgba(8,121,242,.23);
  }

  .menu-toggle:after{
    content:"";
    width:22px;
    height:15px;
    display:block;
    background:
      linear-gradient(#fff,#fff) left top/100% 2.5px no-repeat,
      linear-gradient(#fff,#fff) left center/70% 2.5px no-repeat,
      linear-gradient(#fff,#fff) left bottom/100% 2.5px no-repeat;
    border-radius:4px;
    transition:.25s ease;
  }

  body.menu-open .menu-toggle:after{
    height:22px;
    background:
      linear-gradient(#fff,#fff) center/100% 2.5px no-repeat;
    transform:rotate(45deg);
    box-shadow:0 0 0 0 #fff;
  }

  body.menu-open .menu-toggle:before{
    content:"";
    width:22px;
    height:2.5px;
    background:#fff;
    position:absolute;
    left:13px;
    top:23px;
    transform:rotate(-45deg);
    border-radius:4px;
  }

  .nav{
    display:flex!important;
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    top:94px!important;
    z-index:99;
    flex-direction:column;
    align-items:stretch!important;
    gap:8px!important;
    padding:16px!important;
    border-radius:28px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(237,251,255,.94))!important;
    border:1px solid rgba(25,214,255,.26)!important;
    box-shadow:0 28px 80px rgba(6,24,38,.22)!important;
    backdrop-filter:blur(22px);
    opacity:0;
    transform:translateY(-12px) scale(.965);
    pointer-events:none;
    transition:.28s cubic-bezier(.2,.8,.2,1);
    max-height:calc(100vh - 118px);
    overflow:auto;
  }

  .nav.open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }

  .nav a,.dropdown-trigger{
    min-height:46px;
    padding:12px 14px!important;
    border-radius:17px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(8,121,242,.08);
    color:#092338!important;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 8px 20px rgba(6,24,38,.045);
  }

  .nav a.active,.nav a:hover,.dropdown-trigger:hover{
    background:linear-gradient(135deg,rgba(25,214,255,.18),rgba(8,121,242,.10));
    border-color:rgba(25,214,255,.32);
  }

  .dropdown-menu{
    position:static!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    width:100%!important;
    margin-top:8px!important;
    padding:8px!important;
    border-radius:20px!important;
    background:rgba(6,24,38,.045)!important;
    box-shadow:none!important;
    border:1px solid rgba(25,214,255,.15)!important;
  }

  .dropdown-menu a{
    font-size:14px;
    min-height:42px;
    margin:4px 0;
    background:rgba(255,255,255,.78);
  }

  .socials{
    display:flex!important;
    position:fixed;
    left:28px;
    right:28px;
    top:auto;
    bottom:24px;
    z-index:100;
    justify-content:center;
    gap:12px!important;
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:.28s ease;
  }

  body.menu-open .socials{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .socials a{
    width:46px!important;
    height:46px!important;
    padding:10px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(25,214,255,.22);
    box-shadow:0 14px 34px rgba(6,24,38,.15);
  }

  .socials img{
    width:22px!important;
    height:22px!important;
    filter:none!important;
  }

  body.menu-open:before{
    content:"";
    position:fixed;
    inset:0;
    z-index:88;
    background:rgba(2,14,25,.22);
    backdrop-filter:blur(3px);
  }

  .hero,.banner-hero{
    border-radius:0 0 34px 34px;
    overflow:hidden;
    background:
      radial-gradient(circle at 18% 4%,rgba(25,214,255,.34),transparent 26%),
      radial-gradient(circle at 100% 18%,rgba(8,121,242,.18),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#ecfbff 100%)!important;
  }

  .hero-inner{
    padding:30px 17px 0!important;
    text-align:left!important;
  }

  .eyebrow{
    border-radius:999px;
    box-shadow:0 10px 26px rgba(8,121,242,.08);
    font-size:11.5px!important;
    padding:7px 12px!important;
  }

  .hero h1,.page-title h1,.banner-hero h1{
    font-size:clamp(31px,9vw,44px)!important;
    letter-spacing:-.06em!important;
    line-height:1.06!important;
    text-align:left!important;
  }

  .hero-sub,.banner-hero p,.page-title p{
    font-size:15.5px!important;
    line-height:1.65;
    text-align:left!important;
    color:#577080!important;
  }

  .hero-actions{
    justify-content:flex-start!important;
    gap:10px!important;
    margin:20px 0 28px!important;
  }

  .btn{
    min-height:48px;
    padding:12px 17px!important;
    font-size:14px;
    box-shadow:0 13px 30px rgba(8,121,242,.20)!important;
  }

  .hero-grid{
    margin:0 -17px!important;
    padding:26px 17px 30px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    background:
      linear-gradient(180deg,rgba(6,24,38,.92),rgba(7,31,49,.84)),
      url("doorgo banner.png") center/360px auto repeat!important;
    animation:dgBgDrift 18s linear infinite;
  }

  .hero-tile{
    min-height:230px!important;
    border-radius:28px!important;
    transform:none!important;
    box-shadow:0 22px 55px rgba(0,0,0,.28)!important;
  }

  .hero-tile:nth-child(2){
    transform:translateX(10px)!important;
    width:calc(100% - 10px);
  }

  .hero-tile:nth-child(3){
    transform:translateX(-10px)!important;
    width:calc(100% - 10px);
    margin-left:10px;
  }

  .hero-tile img{
    height:100%!important;
    object-fit:cover;
  }

  .hero-tile .tile-caption{
    padding:16px!important;
    font-size:15px;
    backdrop-filter:blur(10px);
  }

  .section,.content{
    padding:50px 16px!important;
  }

  .container{
    width:100%;
    max-width:100%;
  }

  .center{text-align:left!important}

  .section h2,.content h2{
    font-size:clamp(27px,8vw,38px)!important;
    line-height:1.15!important;
    letter-spacing:-.052em!important;
  }

  .service-grid,.contact-cards,.feature-grid,.info-grid,.gallery-grid,.video-row,.trust-row{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  .service-grid{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:6px 16px 18px!important;
    margin-left:-16px;
    margin-right:-16px;
    scrollbar-width:none;
  }

  .service-grid::-webkit-scrollbar{display:none}

  .service-card{
    flex:0 0 86%;
    scroll-snap-align:center;
    border-radius:30px!important;
    box-shadow:0 20px 52px rgba(6,24,38,.12)!important;
    border:1px solid rgba(25,214,255,.22)!important;
  }

  .service-card:nth-child(even){
    margin-top:18px;
  }

  .card-img{
    height:205px!important;
  }

  .icon-badge{
    width:78px!important;
    height:78px!important;
    margin:-39px 0 0 22px!important;
    border-width:7px!important;
  }

  .icon-badge img{
    width:40px!important;
    height:40px!important;
  }

  .card-body{
    padding:20px 22px 26px!important;
  }

  .card-body h3{
    font-size:21px!important;
    line-height:1.25;
  }

  .card-body p{
    font-size:14.5px!important;
  }

  .card-link{
    width:100%;
    justify-content:center;
    min-height:46px;
    margin-top:10px;
  }

  .lead-card,.info-box,.feature,.faq,.price-box{
    border-radius:26px!important;
    padding:22px!important;
    box-shadow:0 16px 40px rgba(6,24,38,.09)!important;
  }

  .lead-card{
    background:
      linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,250,255,.94))!important;
    border:1px solid rgba(25,214,255,.24)!important;
  }

  .service-photo img,.hero-photo img{
    height:230px!important;
    border-radius:28px!important;
  }

  .pill-list{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto;
    padding-bottom:8px;
    scrollbar-width:none;
  }

  .pill-list::-webkit-scrollbar{display:none}
  .pill-list span,.pill-list li{
    white-space:nowrap;
    flex:0 0 auto;
  }

  .contact-cards{
    display:grid!important;
    margin-top:18px;
  }

  .contact-card{
    min-height:auto!important;
    padding:24px 18px!important;
    border-radius:28px!important;
    display:grid;
    grid-template-columns:70px 1fr;
    gap:16px;
    align-items:center;
    text-align:left!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.98),rgba(230,250,255,.94))!important;
  }

  .contact-card:after{
    width:110px!important;
    height:110px!important;
    right:-42px!important;
    bottom:-52px!important;
  }

  .contact-card .contact-icon,
  .contact-card > img{
    width:66px!important;
    height:66px!important;
    margin:0!important;
    padding:15px!important;
    border-radius:24px!important;
    filter:none!important;
  }

  .contact-card h3{
    margin:0 0 3px!important;
    font-size:20px!important;
  }

  .contact-card p,.contact-card a{
    font-size:14.5px!important;
    margin:0!important;
  }

  .premium-contact .contact-cards{
    gap:14px!important;
  }

  .contact-hero-card,.map-panel{
    border-radius:30px!important;
    padding:24px!important;
  }

  .map-panel{
    min-height:270px!important;
  }

  .about-split{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }

  .operator-box{
    min-height:280px!important;
    border-radius:30px!important;
    padding:18px!important;
    background:
      radial-gradient(circle at 20% 0%,rgba(25,214,255,.20),transparent 32%),
      linear-gradient(145deg,#ffffff,#edfaff)!important;
  }

  .operator-box img{
    max-height:285px;
    margin:auto;
    animation:dgFloatSoft 4.5s ease-in-out infinite;
  }

  .video-card{
    border-radius:28px!important;
  }

  .video-card .play{
    transform:scale(.9);
  }

  .cta-band{
    border-radius:30px!important;
    padding:26px 20px!important;
    margin:22px 0!important;
    background:
      linear-gradient(145deg,rgba(6,24,38,.94),rgba(8,121,242,.74)),
      url("doorgo banner.png") center/320px auto repeat!important;
  }

  .related-track{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:16px!important;
    padding-bottom:18px;
    animation:none!important;
    scrollbar-width:none;
  }

  .related-track::-webkit-scrollbar{display:none}

  .related .service-card{
    flex:0 0 86%;
    width:auto!important;
    scroll-snap-align:center;
  }

  .footer{
    padding:42px 18px 118px!important;
    border-radius:34px 34px 0 0;
    margin-top:20px;
    background:
      radial-gradient(circle at 20% 0%,rgba(25,214,255,.18),transparent 30%),
      linear-gradient(180deg,#071c2b,#05121d)!important;
  }

  .footer-inner{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }

  .footer-logo{
    justify-content:flex-start!important;
  }

  .footer-socials{
    display:flex!important;
    gap:12px!important;
    flex-wrap:wrap;
  }

  .footer-socials a{
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.10)!important;
    border:1px solid rgba(255,255,255,.12);
    padding:11px!important;
  }

  .footer-socials img{
    width:22px!important;
    height:22px!important;
  }

  .phone-float{
    left:auto!important;
    right:16px!important;
    bottom:18px!important;
    width:66px!important;
    height:66px!important;
    border-radius:22px!important;
    background:linear-gradient(135deg,#16d94f,#07aa35)!important;
  }

  .phone-float img{
    width:30px!important;
    height:30px!important;
    object-fit:contain;
  }

  /* Mobile sticky action bar */
  .mobile-action-bar{
    position:fixed;
    left:14px;
    right:92px;
    bottom:18px;
    z-index:96;
    height:66px;
    border-radius:22px;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(25,214,255,.22);
    box-shadow:0 18px 48px rgba(6,24,38,.18);
    backdrop-filter:blur(18px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 9px 8px 14px;
    transform:translateY(110px);
    transition:.35s cubic-bezier(.2,.8,.2,1);
  }

  body.show-mobile-bar .mobile-action-bar{
    transform:translateY(0);
  }

  .mobile-action-bar strong{
    display:block;
    color:#061826;
    font-size:13px;
    line-height:1.1;
  }

  .mobile-action-bar span{
    display:block;
    color:#607386;
    font-size:11.5px;
    font-weight:700;
  }

  .mobile-action-bar a{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 14px;
    border-radius:16px;
    color:#fff;
    background:linear-gradient(135deg,var(--cyan),var(--blue));
    font-weight:1000;
    font-size:13px;
    box-shadow:0 10px 24px rgba(8,121,242,.22);
  }
}

@media(max-width: 420px){
  .brand img{height:46px!important;max-width:104px}
  .brand span:after{font-size:17px}
  .header-inner{min-height:68px}
  .hero h1,.page-title h1,.banner-hero h1{font-size:31px!important}
  .hero-tile{min-height:210px!important}
  .service-card,.related .service-card{flex-basis:90%}
  .contact-card{grid-template-columns:60px 1fr;padding:20px 16px!important}
  .contact-card .contact-icon,.contact-card > img{width:58px!important;height:58px!important;padding:13px!important}
  .mobile-action-bar{right:88px;left:12px}
  .mobile-action-bar strong{font-size:12px}
  .mobile-action-bar span{font-size:10.5px}
  .mobile-action-bar a{padding:0 11px;font-size:12px}
}

/* Desktop gets a little more handcrafted polish without changing layout too much */
@media(min-width:761px){
  .service-card:nth-child(2){transform:translateY(22px)}
  .service-card:nth-child(2):hover{transform:translateY(10px)}
  .hero-tile:nth-child(2){margin-top:26px}
  .hero-tile:nth-child(3){margin-top:8px}
  .contact-card:nth-child(2){transform:translateY(22px)}
  .contact-card:nth-child(2):hover{transform:translateY(10px)}
}


/* =========================================================
   DoorGO v8 Gallery + stronger mobile polish
   ========================================================= */
.gallery-hero{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(232,250,255,.88)),url("doorgo banner.png") center/620px auto;position:relative;overflow:hidden;border-bottom:1px solid rgba(25,214,255,.22)}
.gallery-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(25,214,255,.22),transparent 32%),radial-gradient(circle at 88% 28%,rgba(8,121,242,.14),transparent 28%);pointer-events:none}.gallery-hero .container{position:relative}.split-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}.split-head p{max-width:430px;font-weight:750}.real-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.real-gallery-card{position:relative;margin:0;border-radius:30px;overflow:hidden;background:#fff;border:1px solid rgba(25,214,255,.22);box-shadow:0 22px 62px rgba(4,42,65,.10);cursor:pointer;isolation:isolate;min-height:420px}.real-gallery-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(3,23,37,.82));z-index:1;opacity:.88;transition:.28s}.real-gallery-card:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-90px;width:70px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(18deg);z-index:2;transition:.65s}.real-gallery-card:hover:after{left:130%}.real-gallery-card img{width:100%;height:100%;min-height:420px;object-fit:cover;transition:.48s}.real-gallery-card:hover img{transform:scale(1.07)}.real-gallery-card figcaption{position:absolute;left:20px;right:20px;bottom:20px;z-index:3;color:#fff}.real-gallery-card figcaption b{display:block;font-size:20px;line-height:1.25;margin-bottom:6px}.real-gallery-card figcaption span{display:block;color:rgba(255,255,255,.82);font-weight:700;font-size:14px}.video-soon-section{background:linear-gradient(180deg,#fff,#f2fbff)}.video-placeholder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:900px;margin:30px auto 0}.video-placeholder{min-height:240px;border-radius:32px;background:linear-gradient(135deg,#06243a,#0d4d70);color:#fff;border:1px solid rgba(25,214,255,.28);box-shadow:0 30px 80px rgba(3,24,43,.18);display:grid;place-items:center;text-align:center;padding:28px;position:relative;overflow:hidden}.video-placeholder:before{content:"";position:absolute;inset:0;background:url("doorgo banner.png") center/520px auto;opacity:.08}.video-placeholder>*{position:relative}.placeholder-play{width:74px;height:74px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 0 10px rgba(25,214,255,.16),0 20px 50px rgba(0,0,0,.22);margin:auto}.video-placeholder h3{font-size:24px;margin:18px 0 6px}.video-placeholder p{color:rgba(255,255,255,.78);margin:0}.gallery-lightbox{position:fixed;inset:0;background:rgba(2,12,20,.82);z-index:999;display:none;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(10px)}.gallery-lightbox.open{display:flex}.gallery-lightbox img{max-height:86vh;max-width:min(920px,96vw);border-radius:26px;box-shadow:0 30px 90px rgba(0,0,0,.45)}.gallery-lightbox button{position:absolute;top:18px;right:18px;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#071424;font-weight:1000;font-size:22px;cursor:pointer}

/* Remove old video-template feel */
.video-card{border-radius:30px}.video-card .play{background:linear-gradient(135deg,var(--cyan),var(--blue))!important}

/* Mobile-first comfort */
@media(max-width:760px){
 body{background:#f7fcff;font-size:15px;padding-bottom:84px}.top-line{height:3px}.site-header{position:sticky;background:rgba(255,255,255,.94)}.header-inner{padding:9px 14px;gap:10px}.brand img{height:46px}.brand span{font-size:18px}.menu-toggle{display:grid!important;place-items:center;width:46px;height:46px;border-radius:16px;box-shadow:0 12px 30px rgba(8,121,242,.22);z-index:100}.nav{position:fixed;left:14px;right:14px;top:74px;display:flex!important;flex-direction:column;align-items:stretch;gap:6px;background:rgba(255,255,255,.96);border:1px solid rgba(25,214,255,.28);border-radius:28px;padding:14px;box-shadow:0 28px 80px rgba(3,24,43,.22);opacity:0;visibility:hidden;transform:translateY(-12px) scale(.98);transition:.24s;max-height:calc(100vh - 94px);overflow:auto}.nav.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.nav>a,.dropdown-trigger{padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#fff,#f2fcff);border:1px solid rgba(25,214,255,.16)}.dropdown-menu{position:static!important;width:100%!important;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:none!important;border-radius:18px;margin-top:6px;display:none}.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}.socials{display:none!important}.hero-inner{padding:28px 16px 0}.hero h1{font-size:34px;letter-spacing:-.04em}.hero-sub{font-size:15px}.hero-actions{gap:10px;margin-bottom:26px}.btn{width:100%;max-width:330px;padding:13px 18px}.trust-row{grid-template-columns:1fr 1fr;gap:10px}.trust{padding:13px;border-radius:18px}.hero-grid{grid-template-columns:1fr;gap:18px;padding:28px 16px;background-size:420px auto}.hero-tile{min-height:260px;border-radius:28px}.hero-tile span{font-size:20px}.section{padding:52px 16px}.services-grid,.cards-grid,.contact-cards-polished,.gallery-grid,.real-gallery-grid,.video-placeholder-grid{grid-template-columns:1fr!important;gap:18px!important}.service-card{border-radius:26px}.card-image{height:210px}.card-body{padding:24px}.page-title{padding:46px 16px}.banner-hero{height:175px;background-size:420px auto}.footer{padding-bottom:94px}.footer-inner{gap:28px}.footer-socials{gap:12px;justify-content:flex-start}.footer-socials a{width:50px;height:50px}.footer-socials img{width:27px;height:27px}.phone-float{width:62px!important;height:62px!important;left:18px!important;right:auto!important;bottom:92px!important}.mobile-action-bar{left:10px!important;right:10px!important;bottom:10px!important;border-radius:22px!important;padding:10px 10px 10px 14px!important;background:rgba(4,21,32,.93)!important;border:1px solid rgba(25,214,255,.22)!important;box-shadow:0 18px 60px rgba(0,0,0,.32)!important}.mobile-action-bar a{border-radius:16px!important;background:linear-gradient(135deg,#10c83f,#19d6ff)!important}.contact-hero-card{border-radius:26px}.contact-card{min-height:210px!important}.contact-icon{width:78px;height:78px;border-radius:24px}.contact-icon img{width:38px!important;height:38px!important}.map-panel{min-height:250px;border-radius:28px}.real-gallery-card{min-height:330px;border-radius:26px}.real-gallery-card img{min-height:330px}.split-head{display:block}.video-placeholder{min-height:210px;border-radius:26px}.placeholder-play{width:64px;height:64px}.operator-box{grid-template-columns:1fr!important;text-align:center}.operator-box img{margin:auto;max-width:220px}
}
@media(max-width:420px){.hero h1{font-size:30px}.section h2,.content h2{font-size:28px}.trust-row{grid-template-columns:1fr}.brand span{display:none}.real-gallery-card{min-height:300px}.real-gallery-card img{min-height:300px}.footer-logo{width:130px}}


/* =========================================================
   DoorGO v9 cleanup: less repeated text, stronger gallery structure
   ========================================================= */
.gallery-modern-hero{
  min-height:330px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(120deg,rgba(3,23,37,.72),rgba(8,121,242,.30)),
    url("doorgo banner.png") center/560px auto repeat,
    linear-gradient(135deg,#061826,#eafbff)!important;
  color:#fff;
  border-bottom:0;
}
.gallery-modern-hero:before{opacity:.55;background:radial-gradient(circle at 22% 15%,rgba(25,214,255,.34),transparent 32%),radial-gradient(circle at 80% 55%,rgba(255,255,255,.18),transparent 28%)}
.gallery-modern-hero .eyebrow{color:#aef3ff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24)}
.gallery-modern-hero h1{color:#fff;text-shadow:0 18px 55px rgba(0,0,0,.35)}
.gallery-hero-inner{text-align:center}.gallery-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}.gallery-hero-actions .btn.white{background:rgba(255,255,255,.92);color:#061826}
.gallery-studio{background:linear-gradient(180deg,#f5fcff,#fff 42%,#eefaff)}
.gallery-layout-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}.gallery-layout-head h2{margin:0}.mini-cta{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(25,214,255,.35);background:#fff;color:#0879f2;font-weight:1000;padding:12px 18px;box-shadow:0 14px 34px rgba(8,121,242,.09);transition:.25s}.mini-cta:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(8,121,242,.16)}
.portfolio-masonry{grid-template-columns:repeat(12,1fr)!important;grid-auto-rows:120px;gap:18px!important}.portfolio-masonry .real-gallery-card{grid-column:span 4;grid-row:span 3;min-height:0;border-radius:28px;box-shadow:0 24px 70px rgba(4,42,65,.14)}.portfolio-masonry .real-gallery-card:nth-child(1){grid-column:span 5;grid-row:span 4}.portfolio-masonry .real-gallery-card:nth-child(2){grid-column:span 3;grid-row:span 3}.portfolio-masonry .real-gallery-card:nth-child(3){grid-column:span 4;grid-row:span 4}.portfolio-masonry .real-gallery-card:nth-child(5){grid-column:span 5;grid-row:span 3}.portfolio-masonry .real-gallery-card:nth-child(8){grid-column:span 5;grid-row:span 4}.portfolio-masonry .real-gallery-card img{height:100%;min-height:0}.portfolio-masonry .real-gallery-card figcaption{left:18px;right:18px;bottom:18px}.portfolio-masonry .real-gallery-card figcaption b{font-size:18px}.portfolio-masonry .real-gallery-card:before{background:linear-gradient(180deg,transparent 50%,rgba(3,23,37,.86))}.portfolio-masonry .real-gallery-card:hover{transform:translateY(-8px)}
.gallery-video-clean{background:#061826;color:#fff;position:relative;overflow:hidden}.gallery-video-clean:before{content:"";position:absolute;inset:0;background:url("doorgo banner.png") center/520px auto repeat;opacity:.045}.gallery-video-clean .container{position:relative}.gallery-video-clean h2{color:#fff}.video-clean-grid{max-width:880px}.video-clean-grid .video-placeholder{background:linear-gradient(135deg,rgba(25,214,255,.16),rgba(8,121,242,.14));border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 80px rgba(0,0,0,.28)}.video-clean-grid .video-placeholder h3{margin-bottom:0}
.map-box div,.map-copy{font-weight:900;color:#0879f2}.map-box div:before{content:"მისამართი";display:block;color:#061826;margin-bottom:6px}.footer .footer-socials a{overflow:visible}.footer .footer-socials img,.socials img{object-fit:contain}
.info-box p:empty{display:none}.info-box{position:relative;overflow:hidden}.info-box:after{content:"";position:absolute;right:-30px;bottom:-30px;width:100px;height:100px;border-radius:32px;background:rgba(25,214,255,.08);transform:rotate(16deg)}
@media(max-width:760px){
  .gallery-modern-hero{min-height:270px;background-size:390px auto!important}.gallery-hero-actions .btn{width:auto;min-width:135px}.gallery-layout-head{display:block}.mini-cta{margin-top:14px}.portfolio-masonry{display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:auto!important}.portfolio-masonry .real-gallery-card{grid-column:auto!important;grid-row:auto!important;min-height:330px!important}.portfolio-masonry .real-gallery-card img{min-height:330px!important}.gallery-video-clean{border-radius:32px 32px 0 0}.video-clean-grid .video-placeholder{min-height:190px}.video-clean-grid .video-placeholder p{display:none}
}

/* =========================================================
   DoorGO v10 Premium motion + gallery rebuild
   ========================================================= */
:root{--ease-premium:cubic-bezier(.2,.8,.2,1)}
body{background:radial-gradient(circle at top left,rgba(25,214,255,.08),transparent 28%),linear-gradient(180deg,#f7fdff 0%,#ffffff 46%,#f1fbff 100%)}
.site-header{animation:dropHeader .65s var(--ease-premium) both}.brand img{transition:transform .35s var(--ease-premium),filter .35s}.brand:hover img{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 10px 18px rgba(25,214,255,.24))}.nav a,.dropdown-trigger{transition:transform .24s var(--ease-premium),color .24s}.nav a:hover,.dropdown-trigger:hover{transform:translateY(-2px);color:var(--blue)}
main{animation:pageFade .55s var(--ease-premium) both}.footer{position:relative;overflow:hidden}.footer:before{content:"";position:absolute;inset:auto -20% 0 -20%;height:1px;background:linear-gradient(90deg,transparent,rgba(25,214,255,.75),transparent);animation:footerGlow 5s linear infinite}.footer-inner>div{animation:riseSoft .7s var(--ease-premium) both}.footer-inner>div:nth-child(2){animation-delay:.07s}.footer-inner>div:nth-child(3){animation-delay:.14s}.footer-inner>div:nth-child(4){animation-delay:.21s}
.btn,.mini-cta,.card-link,.phone-float,.socials a,.footer-socials a{will-change:transform}.phone-float{animation:phoneBreath 2.4s ease-in-out infinite}.phone-float:hover{animation:none;transform:translateY(-6px) scale(1.06)}
.hero h1,.page-title h1,.banner-hero h2,.gallery-modern-hero h1{animation:titleReveal .72s var(--ease-premium) both}.hero-sub,.page-title p,.gallery-modern-hero p{animation:fadeSlide .72s var(--ease-premium) .12s both}.hero-actions,.gallery-hero-actions{animation:fadeSlide .72s var(--ease-premium) .2s both}.service-card,.info-box,.feature,.contact-card,.video-card,.lead-card,.operator-box,.map-panel,.faq,.price-box,.real-gallery-card,.video-placeholder{backface-visibility:hidden;transform-style:preserve-3d}.reveal{opacity:0;transform:translateY(24px) scale(.985);filter:blur(6px);transition:opacity .72s var(--ease-premium),transform .72s var(--ease-premium),filter .72s var(--ease-premium);transition-delay:var(--reveal-delay,0ms)}.reveal.in-view{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.service-card:before,.contact-card:before,.info-box:before,.lead-card:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.42),transparent 65%);transform:translateX(-120%);transition:transform .75s var(--ease-premium);pointer-events:none}.service-card:hover:before,.contact-card:hover:before,.info-box:hover:before,.lead-card:hover:after{transform:translateX(120%)}

/* Gallery page: bigger, less template-looking, asymmetric, polished */
.gallery-polished-page .gallery-modern-hero{min-height:385px;background:linear-gradient(120deg,rgba(2,16,27,.72),rgba(8,121,242,.18)),url("doorgo banner.png") center/660px auto repeat,radial-gradient(circle at 68% 40%,rgba(25,214,255,.38),transparent 34%),#071b2d!important;border-bottom:1px solid rgba(25,214,255,.28);position:relative;overflow:hidden}.gallery-polished-page .gallery-modern-hero:after{content:"";position:absolute;left:-20%;right:-20%;bottom:-64px;height:130px;background:#f7fdff;border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -25px 70px rgba(25,214,255,.12)}.gallery-polished-page .gallery-hero-inner{position:relative;z-index:2;max-width:980px}.gallery-polished-page .gallery-modern-hero h1{font-size:clamp(44px,7vw,96px);letter-spacing:-.065em;margin:14px 0 8px}.gallery-polished-page .gallery-modern-hero p{max-width:720px;margin:0 auto;color:rgba(255,255,255,.86);font-weight:800}.gallery-polished-page .gallery-studio{padding:96px 28px 110px;background:radial-gradient(circle at 14% 18%,rgba(25,214,255,.10),transparent 28%),linear-gradient(180deg,#f7fdff,#fff 58%,#ecfaff)}.gallery-polished-page .gallery-studio .container{max-width:min(1500px,calc(100vw - 72px))}.gallery-polished-page .gallery-layout-head{align-items:center;margin-bottom:40px;padding:0 8px}.gallery-polished-page .gallery-layout-head h2{font-size:clamp(34px,4.4vw,64px);letter-spacing:-.055em}.gallery-polished-page .gallery-layout-head p{max-width:560px;margin:10px 0 0;color:#5d7385;font-weight:700}.gallery-polished-page .portfolio-masonry{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-auto-rows:132px;gap:24px!important;align-items:stretch}.gallery-polished-page .portfolio-masonry .real-gallery-card{min-height:0!important;border-radius:34px;border:1px solid rgba(25,214,255,.26);box-shadow:0 24px 70px rgba(4,42,65,.13),0 2px 0 rgba(255,255,255,.8) inset;overflow:hidden;background:#071b2d;transition:transform .42s var(--ease-premium),box-shadow .42s var(--ease-premium),filter .42s}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(1){grid-column:span 4;grid-row:span 4}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(2){grid-column:span 3;grid-row:span 3}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(3){grid-column:span 5;grid-row:span 4}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(4){grid-column:span 3;grid-row:span 3}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(5){grid-column:span 4;grid-row:span 3}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(6){grid-column:span 5;grid-row:span 3}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(7){grid-column:span 4;grid-row:span 4}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(8){grid-column:span 3;grid-row:span 3}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(9){grid-column:span 5;grid-row:span 4}.gallery-polished-page .portfolio-masonry .real-gallery-card img{height:100%;min-height:0!important;width:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03);transition:transform .8s var(--ease-premium),filter .8s var(--ease-premium)}.gallery-polished-page .portfolio-masonry .real-gallery-card:before{background:linear-gradient(180deg,rgba(2,12,20,.02) 18%,rgba(2,12,20,.15) 55%,rgba(2,12,20,.86) 100%);opacity:1}.gallery-polished-page .portfolio-masonry .real-gallery-card:hover{transform:translateY(-12px) scale(1.015);box-shadow:0 34px 95px rgba(4,42,65,.22),0 0 0 1px rgba(25,214,255,.22) inset;z-index:8}.gallery-polished-page .portfolio-masonry .real-gallery-card:hover img{transform:scale(1.085);filter:saturate(1.18) contrast(1.08)}.gallery-polished-page .real-gallery-card figcaption{bottom:22px;left:22px;right:22px}.gallery-polished-page .real-gallery-card figcaption b{font-size:clamp(17px,1.4vw,23px);text-shadow:0 8px 24px rgba(0,0,0,.42)}.gallery-polished-page .real-gallery-card figcaption:before{content:"";display:block;width:42px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),#fff);margin-bottom:11px}.gallery-polished-page .gallery-video-clean{padding:86px 28px;border-radius:48px 48px 0 0;margin-top:-36px}.gallery-polished-page .video-clean-grid .video-placeholder{transition:transform .35s var(--ease-premium),box-shadow .35s var(--ease-premium)}.gallery-polished-page .video-clean-grid .video-placeholder:hover{transform:translateY(-8px);box-shadow:0 34px 96px rgba(0,0,0,.34)}

/* Remove visual dash separator feel from footer and text spacing */
.footer small,.footer p{letter-spacing:0}.footer small{display:block;margin-top:14px;color:#b8dceb}.footer-logo{filter:drop-shadow(0 12px 18px rgba(25,214,255,.12))}

@keyframes dropHeader{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
@keyframes titleReveal{from{opacity:0;transform:translateY(22px) scale(.98);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes fadeSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes riseSoft{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes phoneBreath{0%,100%{box-shadow:0 18px 42px rgba(19,199,72,.28),0 0 0 0 rgba(19,199,72,.25)}50%{box-shadow:0 20px 54px rgba(19,199,72,.38),0 0 0 12px rgba(19,199,72,0)}}
@keyframes footerGlow{0%{transform:translateX(-20%)}100%{transform:translateX(20%)}}

@media(max-width:980px){.gallery-polished-page .gallery-studio .container{max-width:calc(100vw - 36px)}.gallery-polished-page .portfolio-masonry{grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-auto-rows:118px;gap:16px!important}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(n){grid-column:span 3;grid-row:span 3}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(1),.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(3),.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(7){grid-column:span 6;grid-row:span 3}}
@media(max-width:760px){.gallery-polished-page .gallery-modern-hero{min-height:310px;background-size:430px auto!important}.gallery-polished-page .gallery-studio{padding:58px 14px 74px}.gallery-polished-page .gallery-studio .container{max-width:100%}.gallery-polished-page .portfolio-masonry{grid-template-columns:1fr!important;grid-auto-rows:auto!important;gap:18px!important}.gallery-polished-page .portfolio-masonry .real-gallery-card:nth-child(n){grid-column:auto!important;grid-row:auto!important;min-height:360px!important}.gallery-polished-page .portfolio-masonry .real-gallery-card img{min-height:360px!important}.gallery-polished-page .gallery-layout-head h2{font-size:34px}.gallery-polished-page .gallery-layout-head p{font-size:15px}.gallery-polished-page .gallery-video-clean{border-radius:34px 34px 0 0;margin-top:-20px;padding:56px 16px}}

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


/* DoorGO v11 fixes: social icon hover visibility + remove bottom quick bar */
.mobile-action-bar,
body.show-mobile-bar .mobile-action-bar{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:none!important;
}
body{padding-bottom:0!important;}

.socials a,
.footer-socials a{
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
  background:#ffffff!important;
  border:1px solid rgba(25,214,255,.42)!important;
  box-shadow:0 12px 34px rgba(6,37,58,.12),0 0 0 7px rgba(25,214,255,.08)!important;
}
.socials a:before,
.footer-socials a:before{
  opacity:.45!important;
  pointer-events:none!important;
}
.socials a:after,
.footer-socials a:after{
  background:#ffffff!important;
  pointer-events:none!important;
  transition:.24s!important;
}
.socials a:hover,
.footer-socials a:hover{
  transform:translateY(-6px) scale(1.06)!important;
  background:linear-gradient(135deg,#19d6ff,#0879f2)!important;
  border-color:rgba(255,255,255,.9)!important;
  box-shadow:0 20px 48px rgba(8,121,242,.28),0 0 0 8px rgba(25,214,255,.14)!important;
}
.socials a:hover:after,
.footer-socials a:hover:after{
  background:transparent!important;
}
.socials a:hover img,
.footer-socials a:hover img{
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
  transform:scale(1.10)!important;
}
@media(max-width:760px){
  body{padding-bottom:0!important;}
  .mobile-action-bar{display:none!important;}
  .phone-float{bottom:18px!important;}
}


/* =========================================================
   DoorGO v12: visibility + unique polish + responsive gallery
   ========================================================= */
:root{--dg-ease:cubic-bezier(.19,1,.22,1);}

/* Stop repeated banner seams/vertical lines everywhere */
.banner-hero,
.service-top,
.services-strip,
.related,
.hero-grid,
.gallery-hero,
.gallery-modern-hero,
.map-panel,
.video-card:before,
.video-placeholder:before{
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
}
.banner-hero,
.gallery-modern-hero,
.gallery-hero{
  background-image:
    radial-gradient(circle at 18% 18%,rgba(25,214,255,.22),transparent 34%),
    linear-gradient(110deg,rgba(3,22,35,.86),rgba(6,49,75,.68)),
    url("doorgo banner.png")!important;
}
.service-top,.hero-grid,.services-strip,.related{
  background-image:
    radial-gradient(circle at 50% -10%,rgba(25,214,255,.22),transparent 34%),
    linear-gradient(120deg,rgba(3,19,30,.94),rgba(6,42,62,.84)),
    url("doorgo banner.png")!important;
}
.banner-hero:before{display:none!important;}

/* Contact cards: icons must always be visible, not washed out */
.contact-cards-polished{align-items:stretch!important;}
.contact-card{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  text-align:center!important;
  min-height:255px!important;
  background:
    radial-gradient(circle at 88% 90%,rgba(25,214,255,.22),transparent 28%),
    linear-gradient(145deg,#ffffff 0%,#f7fdff 58%,#eafaff 100%)!important;
}
.contact-icon{
  width:96px!important;
  height:96px!important;
  margin:0 auto 14px!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,#ffffff,#dff8ff)!important;
  border:1px solid rgba(25,214,255,.60)!important;
  box-shadow:0 18px 46px rgba(8,121,242,.12), inset 0 0 0 8px rgba(25,214,255,.10)!important;
  opacity:1!important;
}
.contact-icon:before{opacity:.9!important;border-color:rgba(8,121,242,.36)!important;}
.contact-icon img,
.contact-card .contact-icon img,
.contact-card img[src="location.png"],
.contact-card img[src="telephone.png"],
.contact-card img[src="mail.png"]{
  display:block!important;
  width:48px!important;
  height:48px!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  mix-blend-mode:normal!important;
  filter:brightness(0) saturate(100%) invert(8%) sepia(26%) saturate(1585%) hue-rotate(169deg) brightness(91%) contrast(101%)!important;
  transform:none!important;
}
.contact-card:hover .contact-icon img,
.contact-card:hover img[src="location.png"],
.contact-card:hover img[src="telephone.png"],
.contact-card:hover img[src="mail.png"]{
  filter:brightness(0) invert(1)!important;
}
.contact-card h3{letter-spacing:-.04em!important;}
.contact-card p{max-width:250px!important;}

/* Header/social hover stays readable */
.socials a:hover img,.footer-socials a:hover img{filter:brightness(0) invert(1)!important;}
.socials a:hover,.footer-socials a:hover{background:linear-gradient(135deg,#10cfff,#0879f2)!important;}

/* Floating phone follows the page globally with stronger motion */
.phone-float{
  position:fixed!important;
  left:26px!important;
  right:auto!important;
  bottom:26px!important;
  z-index:9999!important;
  width:72px!important;
  height:72px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#16df54,#08b83a)!important;
  border:7px solid rgba(255,255,255,.35)!important;
  box-shadow:0 20px 50px rgba(13,191,66,.35),0 0 0 12px rgba(16,216,80,.11)!important;
  animation:dgCallFloat 2.6s ease-in-out infinite!important;
}
.phone-float:before,.phone-float:after{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:inherit;
  border:1px solid rgba(22,223,84,.42);
  animation:dgCallRing 2.2s ease-out infinite;
  pointer-events:none;
}
.phone-float:after{animation-delay:1.1s;}
.phone-float img{width:34px!important;height:34px!important;filter:brightness(0) invert(1)!important;}
.phone-float:hover{animation:none!important;transform:translateY(-8px) scale(1.06)!important;}

/* Gallery line-up: same sizes, clean editorial grid */
.gallery-polished-page .gallery-studio .container,
.gallery-page-section .container{max-width:1180px!important;}
.gallery-polished-page .portfolio-masonry,
.gallery-page-section .portfolio-masonry,
.real-gallery-grid.portfolio-masonry{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  gap:24px!important;
  align-items:stretch!important;
}
.gallery-polished-page .portfolio-masonry .real-gallery-card,
.gallery-page-section .portfolio-masonry .real-gallery-card,
.real-gallery-grid.portfolio-masonry .real-gallery-card{
  grid-column:auto!important;
  grid-row:auto!important;
  min-height:0!important;
  aspect-ratio:4/5!important;
  border-radius:30px!important;
  box-shadow:0 24px 70px rgba(4,42,65,.12)!important;
}
.gallery-polished-page .portfolio-masonry .real-gallery-card img,
.gallery-page-section .portfolio-masonry .real-gallery-card img,
.real-gallery-grid.portfolio-masonry .real-gallery-card img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
}
.gallery-polished-page .portfolio-masonry .real-gallery-card:hover,
.gallery-page-section .portfolio-masonry .real-gallery-card:hover{
  transform:translateY(-10px) scale(1.015)!important;
}
.gallery-layout-head{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:22px!important;}
.gallery-layout-head h2{margin-bottom:0!important;}

/* More polished general structure, less AI/template feel */
.page-title{
  background:linear-gradient(180deg,#fff 0%,#f4fcff 100%)!important;
  border-bottom:1px solid rgba(25,214,255,.16)!important;
}
.page-title h1{max-width:1000px;margin:0 auto!important;text-wrap:balance;}
.section,.content{position:relative;}
.service-card,.info-box,.feature,.lead-card,.contact-hero-card,.contact-card,.map-panel,.video-placeholder,.real-gallery-card{
  transition:transform .45s var(--dg-ease), box-shadow .45s var(--dg-ease), border-color .45s var(--dg-ease), background .45s var(--dg-ease)!important;
}
.service-card:hover,.info-box:hover,.feature:hover,.lead-card:hover,.video-placeholder:hover{
  transform:translateY(-8px)!important;
  border-color:rgba(25,214,255,.42)!important;
}
.btn,.card-link,.mini-cta{transition:transform .35s var(--dg-ease), box-shadow .35s var(--dg-ease), background .35s var(--dg-ease)!important;}
.btn:hover,.card-link:hover,.mini-cta:hover{transform:translateY(-4px)!important;}

/* Mobile: cleaner, larger, app-like UI */
@media(max-width:760px){
  body{background:#f6fcff!important;}
  .header-inner{min-height:72px!important;padding:10px 16px!important;}
  .brand img{height:48px!important;}
  .page-title{padding:34px 16px 22px!important;}
  .page-title h1{font-size:28px!important;line-height:1.18!important;}
  .banner-hero{height:190px!important;background-size:cover!important;}
  .banner-hero h2{font-size:36px!important;}
  .hero-inner{padding:34px 16px 0!important;}
  .hero h1{font-size:34px!important;line-height:1.12!important;}
  .hero-sub{font-size:15px!important;}
  .hero-actions .btn,.btn{max-width:none!important;width:100%!important;}
  .trust-row{grid-template-columns:1fr 1fr!important;}
  .hero-grid,.service-grid,.video-row,.contact-cards-polished,.feature-grid,.info-grid{grid-template-columns:1fr!important;}
  .hero-grid{padding:28px 16px!important;gap:18px!important;background-size:cover!important;}
  .hero-tile{min-height:300px!important;border-radius:30px!important;}
  .section{padding:54px 16px!important;}
  .content{padding:46px 16px!important;}
  .service-card,.lead-card,.contact-hero-card,.contact-card,.map-panel,.info-box,.feature{border-radius:28px!important;}
  .card-img{height:215px!important;}
  .contact-hero-card{padding:24px 20px!important;text-align:left!important;}
  .contact-hero-card h2{font-size:27px!important;}
  .contact-card{min-height:230px!important;padding:28px 18px!important;}
  .contact-icon{width:86px!important;height:86px!important;border-radius:28px!important;}
  .contact-icon img{width:42px!important;height:42px!important;}
  .map-panel{min-height:250px!important;background-size:cover!important;}
  .gallery-polished-page .portfolio-masonry,
  .gallery-page-section .portfolio-masonry,
  .real-gallery-grid.portfolio-masonry{grid-template-columns:1fr!important;gap:18px!important;}
  .gallery-polished-page .portfolio-masonry .real-gallery-card,
  .gallery-page-section .portfolio-masonry .real-gallery-card,
  .real-gallery-grid.portfolio-masonry .real-gallery-card{aspect-ratio:4/4.7!important;border-radius:28px!important;}
  .gallery-layout-head{display:block!important;}
  .video-placeholder-grid{grid-template-columns:1fr!important;}
  .footer{padding:54px 18px 34px!important;}
  .footer-inner{grid-template-columns:1fr!important;text-align:left!important;gap:30px!important;}
  .footer-socials{justify-content:flex-start!important;}
  .phone-float{width:64px!important;height:64px!important;left:18px!important;bottom:18px!important;border-width:6px!important;}
  .phone-float img{width:30px!important;height:30px!important;}
}
@media(max-width:420px){
  .trust-row{grid-template-columns:1fr!important;}
  .page-title h1{font-size:25px!important;}
  .hero h1{font-size:30px!important;}
  .banner-hero h2{font-size:32px!important;}
}

@keyframes dgCallFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-4deg)}}
@keyframes dgCallRing{0%{opacity:.7;transform:scale(.86)}100%{opacity:0;transform:scale(1.42)}}

/* DoorGO v13: clean universal banner, stronger interaction, mobile polish */
body.dg-v13{background:linear-gradient(180deg,#f7fdff 0%,#ffffff 52%,#eefbff 100%)!important;}
body.dg-v13 .page-title{display:none!important;}
body.dg-v13 .banner-hero{display:none!important;}
.dg-clean-banner{
  position:relative;
  min-height:318px;
  padding:64px 22px 74px;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid rgba(25,214,255,.25);
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.45),transparent 30%),
    linear-gradient(90deg,rgba(7,33,48,.72),rgba(8,58,82,.42),rgba(7,33,48,.72)),
    url("doorgo banner.png") center/520px auto repeat;
}
.dg-clean-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(3,24,38,.16));
  z-index:-1;
}
.dg-clean-banner:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(25,214,255,.7),transparent);
}
.dg-clean-banner-inner{position:relative;z-index:2;text-align:center;max-width:980px;margin:auto;}
.dg-clean-banner .eyebrow{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.32)!important;color:#dffaff!important;box-shadow:0 16px 50px rgba(0,0,0,.15);}
.dg-clean-banner h1{margin:16px 0 0;color:#fff;font-size:clamp(42px,6vw,88px);line-height:1.02;letter-spacing:-.065em;text-shadow:0 20px 58px rgba(0,0,0,.42);animation:titleReveal .72s var(--ease-premium) both;text-wrap:balance;}
.dg-banner-actions{margin-top:24px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.dg-banner-actions .btn{width:auto;min-width:142px;backdrop-filter:blur(12px);}
.dg-banner-actions .btn.white{background:rgba(255,255,255,.93)!important;color:var(--blue)!important;}

/* Contact/About should start cleanly under the banner */
body.dg-v13 .contact-page-section{padding-top:72px!important;}
body.dg-v13 .about-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.85fr);gap:52px;align-items:center;}
body.dg-v13 .operator-box{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(225,249,255,.88));border:1px solid rgba(25,214,255,.28);border-radius:42px;padding:34px;box-shadow:0 32px 90px rgba(4,42,65,.13);}
body.dg-v13 .operator-box img{filter:drop-shadow(0 22px 34px rgba(3,24,38,.14));transition:transform .55s var(--ease-premium);}
body.dg-v13 .operator-box:hover img{transform:translateY(-10px) rotate(-2deg) scale(1.02);}

/* Service pages: banner plus photo card without old dark stripe repetition */
body.dg-v13 .service-top{background:linear-gradient(180deg,#effbff,#ffffff)!important;padding:54px 22px 12px!important;}
body.dg-v13 .service-photo{max-width:1060px;border-radius:42px!important;box-shadow:0 34px 110px rgba(4,42,65,.18),0 0 0 1px rgba(25,214,255,.26) inset;}
body.dg-v13 .service-photo img{height:420px!important;filter:saturate(1.05) contrast(1.02);}

/* Gallery: even, lined-up cards and premium click feel */
body.dg-v13 .gallery-page-section,
body.dg-v13 .gallery-studio{padding-top:84px!important;background:radial-gradient(circle at 12% 10%,rgba(25,214,255,.12),transparent 30%),linear-gradient(180deg,#f7fdff,#fff 64%,#effbff)!important;}
body.dg-v13 .portfolio-masonry,
body.dg-v13 .real-gallery-grid.portfolio-masonry{
  max-width:1220px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  gap:26px!important;
}
body.dg-v13 .portfolio-masonry .real-gallery-card,
body.dg-v13 .real-gallery-grid.portfolio-masonry .real-gallery-card,
body.dg-v13 .real-gallery-card:nth-child(n){
  grid-column:auto!important;grid-row:auto!important;
  aspect-ratio:4/5!important;
  min-height:0!important;
  border-radius:32px!important;
  border:1px solid rgba(25,214,255,.30)!important;
  box-shadow:0 28px 85px rgba(4,42,65,.13),0 1px 0 rgba(255,255,255,.85) inset!important;
}
body.dg-v13 .portfolio-masonry .real-gallery-card img,
body.dg-v13 .real-gallery-grid.portfolio-masonry .real-gallery-card img{height:100%!important;min-height:0!important;object-fit:cover!important;}
body.dg-v13 .real-gallery-card:hover{transform:translateY(-14px) scale(1.018)!important;box-shadow:0 42px 115px rgba(4,42,65,.23),0 0 0 1px rgba(25,214,255,.35) inset!important;}
body.dg-v13 .real-gallery-card:active{transform:translateY(-7px) scale(.995)!important;}
body.dg-v13 .real-gallery-card figcaption{padding-top:24px;}
body.dg-v13 .real-gallery-card figcaption b{font-size:18px!important;}
body.dg-v13 .gallery-layout-head{max-width:1220px;margin:0 auto 34px!important;}
body.dg-v13 .gallery-layout-head h2{font-size:clamp(34px,4.6vw,64px)!important;}
body.dg-v13 .mini-cta{border-radius:999px;border:1px solid rgba(25,214,255,.34);background:#fff;padding:12px 18px;color:var(--blue);font-weight:1000;box-shadow:0 16px 40px rgba(4,42,65,.08);}

/* Icon hover must stay readable */
body.dg-v13 .contact-icon{background:linear-gradient(145deg,#fff,#dff8ff)!important;overflow:visible!important;}
body.dg-v13 .contact-icon img,
body.dg-v13 .contact-card img[src="location.png"],
body.dg-v13 .contact-card img[src="telephone.png"],
body.dg-v13 .contact-card img[src="mail.png"]{opacity:1!important;visibility:visible!important;filter:brightness(0) saturate(100%) invert(6%) sepia(36%) saturate(1514%) hue-rotate(170deg) brightness(97%) contrast(102%)!important;}
body.dg-v13 .contact-card:hover .contact-icon{background:linear-gradient(135deg,var(--cyan),var(--blue))!important;box-shadow:0 26px 72px rgba(8,121,242,.26)!important;}
body.dg-v13 .contact-card:hover .contact-icon img{filter:brightness(0) invert(1)!important;}

/* Smooth hover everywhere, not stiff */
body.dg-v13 a, body.dg-v13 button, body.dg-v13 .service-card, body.dg-v13 .info-box, body.dg-v13 .feature, body.dg-v13 .contact-card, body.dg-v13 .video-placeholder, body.dg-v13 .real-gallery-card, body.dg-v13 .lead-card, body.dg-v13 .map-panel, body.dg-v13 .trust{
  transition:transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s cubic-bezier(.16,1,.3,1), border-color .42s cubic-bezier(.16,1,.3,1), background .42s cubic-bezier(.16,1,.3,1), color .25s ease, filter .42s ease!important;
}
body.dg-v13 .nav a:hover, body.dg-v13 .dropdown-trigger:hover{transform:translateY(-2px);}
body.dg-v13 .trust:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(8,121,242,.14);border-color:rgba(25,214,255,.42);}

/* Floating call: always follows, stronger but cleaner */
body.dg-v13 .phone-float{position:fixed!important;left:24px!important;bottom:24px!important;z-index:10000!important;will-change:transform;}
body.dg-v13 .phone-float:hover{transform:translateY(-9px) scale(1.08) rotate(-4deg)!important;}

/* Lightbox animations */
.gallery-lightbox{display:flex!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .34s ease, visibility .34s ease;}
.gallery-lightbox.open{opacity:1;visibility:visible;pointer-events:auto;}
.gallery-lightbox.closing{opacity:0;visibility:visible;pointer-events:none;}
.gallery-lightbox img{transform:translateY(18px) scale(.94);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;}
.gallery-lightbox.open img{transform:translateY(0) scale(1);opacity:1;}
.gallery-lightbox.closing img{transform:translateY(12px) scale(.96);opacity:0;}
.gallery-lightbox button{transition:transform .25s ease, background .25s ease;}
.gallery-lightbox button:hover{transform:rotate(90deg) scale(1.08);background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;}

/* Remove old mobile bottom text/action artefact permanently */
.mobile-action-bar, body.show-mobile-bar .mobile-action-bar{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}

@media(max-width:980px){
  .dg-clean-banner{min-height:280px;background-size:430px auto;padding:54px 18px 64px;}
  .dg-clean-banner h1{font-size:clamp(36px,9vw,66px);}
  body.dg-v13 .about-split{grid-template-columns:1fr;gap:32px;}
  body.dg-v13 .portfolio-masonry,body.dg-v13 .real-gallery-grid.portfolio-masonry{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;}
}
@media(max-width:760px){
  body.dg-v13{font-size:15px!important;padding-bottom:0!important;}
  body.dg-v13 .site-header{position:sticky!important;top:0!important;}
  body.dg-v13 .header-inner{padding:9px 14px!important;min-height:70px!important;}
  body.dg-v13 .brand img{height:44px!important;}
  body.dg-v13 .brand span{font-size:18px!important;display:inline!important;}
  .dg-clean-banner{min-height:245px;padding:44px 16px 52px;background-size:330px auto;}
  .dg-clean-banner h1{font-size:clamp(34px,12vw,48px)!important;line-height:1.06!important;}
  .dg-banner-actions{gap:10px;margin-top:18px;}
  .dg-banner-actions .btn{width:auto!important;min-width:124px!important;padding:12px 17px!important;font-size:14px;}
  body.dg-v13 .section,body.dg-v13 .content{padding:54px 16px!important;}
  body.dg-v13 .contact-cards-polished{grid-template-columns:1fr!important;gap:16px!important;}
  body.dg-v13 .contact-card{min-height:205px!important;border-radius:30px!important;padding:24px 18px!important;}
  body.dg-v13 .contact-icon{width:82px!important;height:82px!important;}
  body.dg-v13 .contact-icon img{width:42px!important;height:42px!important;}
  body.dg-v13 .map-panel{min-height:230px!important;border-radius:32px!important;}
  body.dg-v13 .service-photo img{height:260px!important;}
  body.dg-v13 .service-top{padding:34px 16px 0!important;}
  body.dg-v13 .portfolio-masonry,body.dg-v13 .real-gallery-grid.portfolio-masonry{grid-template-columns:1fr!important;gap:18px!important;}
  body.dg-v13 .portfolio-masonry .real-gallery-card,body.dg-v13 .real-gallery-grid.portfolio-masonry .real-gallery-card{aspect-ratio:4/4.8!important;border-radius:28px!important;}
  body.dg-v13 .gallery-layout-head{display:block!important;margin-bottom:22px!important;}
  body.dg-v13 .gallery-layout-head h2{font-size:32px!important;line-height:1.1!important;}
  body.dg-v13 .mini-cta{display:inline-flex;margin-top:12px;}
  body.dg-v13 .phone-float{left:18px!important;bottom:18px!important;width:62px!important;height:62px!important;}
  body.dg-v13 .footer{padding-bottom:42px!important;}
}
@media(max-width:420px){
  body.dg-v13 .brand span{display:none!important;}
  .dg-clean-banner{min-height:224px;background-size:290px auto;}
  .dg-clean-banner h1{font-size:32px!important;}
  .dg-banner-actions .btn{width:100%!important;max-width:220px!important;}
}


/* =========================================================
   DoorGO v14 EXTRA MOTION + PREMIUM POLISH PASS
   More motion everywhere, cleaner banner, better mobile feel.
   ========================================================= */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.2,1.35,.3,1);
  --deep-shadow: 0 36px 110px rgba(3,24,43,.18);
  --cyan-glow: 0 0 0 1px rgba(25,214,255,.24), 0 28px 90px rgba(25,214,255,.18);
}

html{scroll-behavior:smooth;}
body.dg-v13{
  background:
    radial-gradient(circle at 8% 8%,rgba(25,214,255,.13),transparent 26%),
    radial-gradient(circle at 92% 5%,rgba(8,121,242,.10),transparent 30%),
    linear-gradient(180deg,#f7fdff 0%,#fff 42%,#effbff 100%)!important;
}
body.dg-v13:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(8,121,242,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,121,242,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
}

/* Scroll progress line */
.scroll-progress{
  position:fixed;top:0;left:0;height:4px;width:0%;z-index:12000;
  background:linear-gradient(90deg,var(--cyan),var(--blue),#72efff);
  box-shadow:0 0 20px rgba(25,214,255,.7);
  transform-origin:left;
  transition:width .08s linear;
}

/* Loading entrance */
body.dg-v13:not(.page-ready) .site-header,
body.dg-v13:not(.page-ready) main,
body.dg-v13:not(.page-ready) .footer,
body.dg-v13:not(.page-ready) .phone-float{opacity:0;transform:translateY(10px)}
body.dg-v13.page-ready .site-header,
body.dg-v13.page-ready main,
body.dg-v13.page-ready .footer,
body.dg-v13.page-ready .phone-float{opacity:1;transform:none;transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}

/* Header feels alive */
body.dg-v13 .site-header{
  border-bottom:1px solid rgba(25,214,255,.28)!important;
  box-shadow:0 18px 60px rgba(4,42,65,.08)!important;
}
body.dg-v13 .brand img{transition:transform .55s var(--ease-bounce), filter .55s var(--ease-out)}
body.dg-v13 .brand:hover img{transform:translateY(-3px) rotate(-2deg) scale(1.05);filter:drop-shadow(0 18px 24px rgba(25,214,255,.24))}
body.dg-v13 .nav>a,
body.dg-v13 .dropdown-trigger{transition:transform .35s var(--ease-bounce), color .25s ease!important;}
body.dg-v13 .nav>a:hover,
body.dg-v13 .dropdown-trigger:hover{transform:translateY(-4px) scale(1.035)!important;color:var(--blue)!important;}
body.dg-v13 .nav>a:before,
body.dg-v13 .dropdown-trigger:before{
  content:"";position:absolute;left:50%;bottom:2px;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);transform:translateX(-50%) scale(0);opacity:0;transition:.3s var(--ease-bounce);
  box-shadow:0 0 16px rgba(25,214,255,.8);
}
body.dg-v13 .nav>a:hover:before,
body.dg-v13 .dropdown:hover .dropdown-trigger:before{opacity:1;transform:translateX(-50%) scale(1)}
body.dg-v13 .socials a,
body.dg-v13 .footer-socials a{
  position:relative!important;isolation:isolate;
  box-shadow:0 12px 30px rgba(5,52,78,.10),0 0 0 8px rgba(25,214,255,.09)!important;
}
body.dg-v13 .socials a:before,
body.dg-v13 .footer-socials a:before{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(25,214,255,.45);
  animation:dgSocialRing 2.8s ease-in-out infinite;z-index:-1;
}
body.dg-v13 .socials a:hover,
body.dg-v13 .footer-socials a:hover{transform:translateY(-8px) rotate(-6deg) scale(1.08)!important;background:linear-gradient(145deg,#fff,#e8fbff)!important;}
body.dg-v13 .socials a:hover img,
body.dg-v13 .footer-socials a:hover img{animation:dgWiggle .55s var(--ease-bounce)}

/* Universal animated surfaces */
body.dg-v13 .service-card,
body.dg-v13 .contact-card,
body.dg-v13 .info-box,
body.dg-v13 .feature,
body.dg-v13 .video-card,
body.dg-v13 .video-placeholder,
body.dg-v13 .lead-card,
body.dg-v13 .operator-box,
body.dg-v13 .map-panel,
body.dg-v13 .trust,
body.dg-v13 .price-box,
body.dg-v13 .faq details,
body.dg-v13 .real-gallery-card{
  position:relative!important;overflow:hidden!important;transform-style:preserve-3d;will-change:transform,box-shadow;
}
body.dg-v13 .service-card:before,
body.dg-v13 .contact-card:before,
body.dg-v13 .info-box:before,
body.dg-v13 .feature:before,
body.dg-v13 .video-card:before,
body.dg-v13 .video-placeholder:before,
body.dg-v13 .lead-card:before,
body.dg-v13 .operator-box:before,
body.dg-v13 .map-panel:before,
body.dg-v13 .trust:before,
body.dg-v13 .price-box:before,
body.dg-v13 .faq details:before,
body.dg-v13 .real-gallery-card:before{
  content:"";position:absolute;inset:-80px auto auto -90px;width:90px;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:rotate(22deg) translateX(-120%);opacity:0;pointer-events:none;z-index:4;
}
body.dg-v13 .service-card:hover:before,
body.dg-v13 .contact-card:hover:before,
body.dg-v13 .info-box:hover:before,
body.dg-v13 .feature:hover:before,
body.dg-v13 .video-card:hover:before,
body.dg-v13 .video-placeholder:hover:before,
body.dg-v13 .lead-card:hover:before,
body.dg-v13 .operator-box:hover:before,
body.dg-v13 .map-panel:hover:before,
body.dg-v13 .trust:hover:before,
body.dg-v13 .price-box:hover:before,
body.dg-v13 .faq details:hover:before,
body.dg-v13 .real-gallery-card:hover:before{animation:dgSurfaceSweep .9s var(--ease-out)}
body.dg-v13 .service-card:hover,
body.dg-v13 .contact-card:hover,
body.dg-v13 .info-box:hover,
body.dg-v13 .feature:hover,
body.dg-v13 .video-card:hover,
body.dg-v13 .video-placeholder:hover,
body.dg-v13 .lead-card:hover,
body.dg-v13 .operator-box:hover,
body.dg-v13 .map-panel:hover,
body.dg-v13 .trust:hover,
body.dg-v13 .price-box:hover,
body.dg-v13 .faq details:hover{
  transform:translateY(-12px) scale(1.012)!important;
  box-shadow:var(--deep-shadow),var(--cyan-glow)!important;
  border-color:rgba(25,214,255,.52)!important;
}

/* Buttons: richer movement */
body.dg-v13 .btn,
body.dg-v13 .card-link,
body.dg-v13 .mini-cta{
  isolation:isolate;transform:translateZ(0);transition:transform .38s var(--ease-bounce),box-shadow .38s var(--ease-out),filter .38s ease!important;
}
body.dg-v13 .btn:hover,
body.dg-v13 .mini-cta:hover{transform:translateY(-6px) scale(1.045)!important;filter:saturate(1.12);}
body.dg-v13 .btn:after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:inherit;filter:blur(16px);opacity:.35;transition:.35s;
}
body.dg-v13 .btn:hover:after{opacity:.68;filter:blur(22px)}
body.dg-v13 .btn:active{transform:translateY(-2px) scale(.98)!important;}
.ripple-dot{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.7);transform:translate(-50%,-50%) scale(0);animation:dgRipple .65s ease-out forwards;z-index:10;}

/* Clean banner: same beautiful type everywhere and more motion */
body.dg-v13 .dg-clean-banner{
  min-height:330px!important;
  background:
    linear-gradient(90deg,rgba(4,28,42,.62),rgba(6,70,95,.36),rgba(4,28,42,.62)),
    url("doorgo banner.png") center/520px auto repeat!important;
  border-bottom:1px solid rgba(25,214,255,.30)!important;
}
body.dg-v13 .dg-clean-banner:before{
  background:
    radial-gradient(circle at 50% 52%,rgba(255,255,255,.18),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18))!important;
}
body.dg-v13 .dg-clean-banner .dg-clean-banner-inner:before,
body.dg-v13 .dg-clean-banner .dg-clean-banner-inner:after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);height:3px;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent);
  width:min(420px,70vw);opacity:.8;animation:dgLineBreathe 2.4s ease-in-out infinite;
}
body.dg-v13 .dg-clean-banner .dg-clean-banner-inner:before{top:50%;margin-top:42px;}
body.dg-v13 .dg-clean-banner .dg-clean-banner-inner:after{display:none;}
body.dg-v13 .dg-clean-banner h1{
  animation:dgTitlePop .9s var(--ease-bounce) both, dgTitleGlow 3.8s ease-in-out infinite!important;
}
.dg-banner-particle{
  position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(25,214,255,.75);
  box-shadow:0 0 22px rgba(25,214,255,.9);pointer-events:none;z-index:1;animation:dgParticle 6s linear infinite;
}
.dg-banner-particle:nth-child(2n){width:5px;height:5px;background:rgba(255,255,255,.75)}

/* Service card media feels more premium */
body.dg-v13 .card-img:before,
body.dg-v13 .service-photo:before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 28%);
  opacity:0;transition:opacity .32s ease;
}
body.dg-v13 .service-card:hover .card-img:before,
body.dg-v13 .service-photo:hover:before{opacity:1;}
body.dg-v13 .card-img img,
body.dg-v13 .service-photo img,
body.dg-v13 .real-gallery-card img{transition:transform .75s var(--ease-out),filter .75s var(--ease-out)!important;}
body.dg-v13 .service-card:hover .card-img img,
body.dg-v13 .service-photo:hover img{transform:scale(1.095)!important;filter:saturate(1.12) contrast(1.06)}

/* Gallery layout: stronger consistent alignment */
body.dg-v13 .portfolio-masonry,
body.dg-v13 .real-gallery-grid.portfolio-masonry{
  align-items:stretch!important;
  grid-template-columns:repeat(3,minmax(230px,1fr))!important;
}
body.dg-v13 .real-gallery-card{cursor:zoom-in!important;}
body.dg-v13 .real-gallery-card figcaption{
  background:linear-gradient(180deg,transparent,rgba(2,18,30,.86))!important;
}
body.dg-v13 .real-gallery-card:hover img{transform:scale(1.08)!important;filter:saturate(1.12) contrast(1.06);}
body.dg-v13 .gallery-lightbox{backdrop-filter:blur(18px);background:rgba(3,16,26,.72)!important;}
body.dg-v13 .gallery-lightbox img{
  max-width:min(88vw,980px);max-height:84vh;border-radius:30px;box-shadow:0 45px 140px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.18);
}

/* Contact icons always visible, with a stronger premium hover */
body.dg-v13 .contact-card .contact-icon img{opacity:1!important;visibility:visible!important;mix-blend-mode:normal!important;}
body.dg-v13 .contact-card:hover .contact-icon{transform:translateY(-8px) rotate(3deg) scale(1.05)!important;}
body.dg-v13 .contact-card:hover h3{color:var(--blue)!important;}

/* Floating phone as real sticky action */
body.dg-v13 .phone-float{
  width:74px!important;height:74px!important;border-radius:50%!important;
  background:linear-gradient(135deg,#19e66b,#08b83b)!important;
  display:grid!important;place-items:center!important;
  box-shadow:0 0 0 12px rgba(16,200,63,.13),0 24px 58px rgba(16,200,63,.32)!important;
  animation:dgPhoneBounce 2.4s ease-in-out infinite!important;
}
body.dg-v13 .phone-float:before,
body.dg-v13 .phone-float:after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(16,200,63,.35);animation:dgPhoneWave 2s ease-out infinite;}
body.dg-v13 .phone-float:after{animation-delay:.72s;}
body.dg-v13 .phone-float img{width:34px!important;height:34px!important;filter:brightness(0) invert(1)!important;animation:dgWiggle 2.4s ease-in-out infinite;}
body.dg-v13 .phone-float:hover{animation:none!important;transform:translateY(-12px) scale(1.12) rotate(-7deg)!important;}

/* Footer polish */
body.dg-v13 .footer{position:relative;overflow:hidden;}
body.dg-v13 .footer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(25,214,255,.14),transparent 34%),radial-gradient(circle at 85% 20%,rgba(8,121,242,.12),transparent 30%);pointer-events:none;}
body.dg-v13 .footer a{transition:color .25s ease,transform .35s var(--ease-bounce)!important;}
body.dg-v13 .footer a:hover{color:var(--cyan)!important;transform:translateX(6px);}

/* FAQ open animation */
body.dg-v13 details[open]{animation:dgOpen .32s var(--ease-out);}
body.dg-v13 summary{cursor:pointer;transition:color .25s ease,transform .25s ease;}
body.dg-v13 summary:hover{color:var(--blue);transform:translateX(4px);}

/* Mobile: much stronger custom app-like look */
@media(max-width:760px){
  body.dg-v13{background:linear-gradient(180deg,#effbff,#fff 34%,#f4fcff)!important;}
  body.dg-v13 .site-header{width:calc(100% - 18px)!important;margin:9px auto 0!important;border-radius:24px!important;}
  body.dg-v13 .nav.open{
    position:fixed!important;left:12px!important;right:12px!important;top:92px!important;
    display:flex!important;flex-direction:column!important;gap:8px!important;
    padding:18px!important;border-radius:28px!important;background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(25,214,255,.28)!important;box-shadow:0 34px 100px rgba(3,24,43,.22)!important;
    animation:dgMobileMenu .42s var(--ease-bounce) both!important;z-index:9999!important;
  }
  body.dg-v13 .nav.open a,body.dg-v13 .nav.open .dropdown-trigger{width:100%;padding:13px 14px!important;border-radius:18px;background:linear-gradient(135deg,#fff,#effcff);}
  body.dg-v13 .dropdown-menu{position:static!important;width:100%!important;opacity:1!important;visibility:visible!important;transform:none!important;display:none;margin-top:6px;box-shadow:none!important;}
  body.dg-v13 .dropdown:hover .dropdown-menu,body.dg-v13 .dropdown:focus-within .dropdown-menu{display:block!important;}

  body.dg-v13 .dg-clean-banner{
    min-height:252px!important;padding:44px 14px 58px!important;margin-top:0!important;
    background-size:310px auto!important;border-radius:0 0 34px 34px!important;
  }
  body.dg-v13 .dg-clean-banner h1{font-size:clamp(34px,13vw,54px)!important;text-shadow:0 14px 34px rgba(0,0,0,.38)!important;}
  body.dg-v13 .dg-banner-actions .btn{min-width:132px!important;border-radius:18px!important;}

  body.dg-v13 .hero-inner{padding:28px 16px 0!important;}
  body.dg-v13 .hero h1{font-size:clamp(32px,11vw,46px)!important;line-height:1.06!important;}
  body.dg-v13 .hero-actions{position:sticky;bottom:12px;z-index:40;margin-top:18px;}
  body.dg-v13 .hero-grid{grid-template-columns:1fr!important;gap:18px!important;padding:26px 16px!important;border-radius:34px 34px 0 0!important;}
  body.dg-v13 .hero-tile{min-height:240px!important;border-radius:28px!important;}

  body.dg-v13 .service-grid,
  body.dg-v13 .feature-grid,
  body.dg-v13 .info-grid,
  body.dg-v13 .video-row,
  body.dg-v13 .contact-cards-polished,
  body.dg-v13 .trust-row{grid-template-columns:1fr!important;gap:18px!important;}
  body.dg-v13 .service-card,body.dg-v13 .feature,body.dg-v13 .info-box,body.dg-v13 .lead-card,body.dg-v13 .price-box,body.dg-v13 .cta-band{border-radius:30px!important;}
  body.dg-v13 .card-img{height:220px!important;}
  body.dg-v13 .card-body{padding:22px!important;}
  body.dg-v13 .card-body h3,body.dg-v13 .feature h3,body.dg-v13 .info-box h3{font-size:22px!important;}
  body.dg-v13 .icon-badge{width:78px!important;height:78px!important;margin:-39px 0 0 22px!important;}
  body.dg-v13 .icon-badge img{width:38px!important;height:38px!important;}

  body.dg-v13 .portfolio-masonry,
  body.dg-v13 .real-gallery-grid.portfolio-masonry{grid-template-columns:1fr 1fr!important;gap:12px!important;}
  body.dg-v13 .portfolio-masonry .real-gallery-card,
  body.dg-v13 .real-gallery-grid.portfolio-masonry .real-gallery-card{aspect-ratio:1/1.32!important;border-radius:22px!important;}
  body.dg-v13 .real-gallery-card figcaption{padding:30px 12px 12px!important;}
  body.dg-v13 .real-gallery-card figcaption b{font-size:13px!important;line-height:1.25!important;}

  body.dg-v13 .contact-hero-card{border-radius:30px!important;text-align:left!important;}
  body.dg-v13 .contact-hero-card h2{font-size:28px!important;}
  body.dg-v13 .contact-card{display:grid!important;grid-template-columns:78px 1fr!important;text-align:left!important;align-items:center!important;gap:14px!important;min-height:150px!important;}
  body.dg-v13 .contact-card .contact-icon{margin:0!important;width:72px!important;height:72px!important;border-radius:24px!important;}
  body.dg-v13 .contact-card h3{font-size:20px!important;}
  body.dg-v13 .contact-card p{font-size:14px!important;}
  body.dg-v13 .map-panel{min-height:220px!important;}

  body.dg-v13 .phone-float{width:64px!important;height:64px!important;left:16px!important;bottom:16px!important;}
  body.dg-v13 .phone-float img{width:30px!important;height:30px!important;}

  body.dg-v13 .footer-inner{gap:26px!important;text-align:left!important;}
  body.dg-v13 .footer-logo{max-width:116px!important;}
}

@media(max-width:420px){
  body.dg-v13 .portfolio-masonry,
  body.dg-v13 .real-gallery-grid.portfolio-masonry{grid-template-columns:1fr!important;}
  body.dg-v13 .portfolio-masonry .real-gallery-card,
  body.dg-v13 .real-gallery-grid.portfolio-masonry .real-gallery-card{aspect-ratio:4/5!important;}
  body.dg-v13 .contact-card{grid-template-columns:1fr!important;text-align:center!important;}
  body.dg-v13 .contact-card .contact-icon{margin:0 auto 10px!important;}
}

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

@keyframes dgSurfaceSweep{0%{opacity:0;transform:rotate(22deg) translateX(-130%)}25%{opacity:.9}100%{opacity:0;transform:rotate(22deg) translateX(420%)}}
@keyframes dgSocialRing{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.12);opacity:.9}}
@keyframes dgWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
@keyframes dgRipple{to{transform:translate(-50%,-50%) scale(7);opacity:0}}
@keyframes dgTitlePop{0%{opacity:0;transform:translateY(22px) scale(.94);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes dgTitleGlow{0%,100%{text-shadow:0 18px 50px rgba(0,0,0,.38),0 0 0 rgba(25,214,255,0)}50%{text-shadow:0 18px 50px rgba(0,0,0,.38),0 0 30px rgba(25,214,255,.35)}}
@keyframes dgLineBreathe{0%,100%{transform:translateX(-50%) scaleX(.72);opacity:.45}50%{transform:translateX(-50%) scaleX(1);opacity:1}}
@keyframes dgParticle{0%{transform:translateY(110px) translateX(0) scale(.7);opacity:0}14%{opacity:1}100%{transform:translateY(-170px) translateX(55px) scale(1.1);opacity:0}}
@keyframes dgPhoneBounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-4deg)}}
@keyframes dgPhoneWave{0%{opacity:.75;transform:scale(.8)}100%{opacity:0;transform:scale(1.55)}}
@keyframes dgOpen{from{opacity:.7;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes dgMobileMenu{0%{opacity:0;transform:translateY(-10px) scale(.94)}100%{opacity:1;transform:none}}


/* v15: better service detail photo positioning + smoother photo motion */
body.dg-v13 .service-top{
  padding:42px 22px 60px!important;
  background:linear-gradient(180deg,#effcff 0%,#ffffff 72%)!important;
  background-image:none!important;
}
body.dg-v13 .service-photo.service-photo-wrap{
  width:min(980px,92vw)!important;
  max-width:980px!important;
  margin:0 auto!important;
  border-radius:34px!important;
  overflow:hidden!important;
  position:relative!important;
  aspect-ratio:16/6.8!important;
  background:linear-gradient(135deg,#eefcff,#fff)!important;
  box-shadow:0 30px 85px rgba(4,42,65,.18),0 0 0 1px rgba(25,214,255,.24) inset!important;
  border:1px solid rgba(25,214,255,.24)!important;
  animation:servicePhotoIn .9s cubic-bezier(.2,.8,.2,1) both!important;
}
body.dg-v13 .service-photo.service-photo-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.85;
  background:linear-gradient(180deg,rgba(255,255,255,0) 48%,rgba(1,19,33,.16) 100%),radial-gradient(circle at 20% 12%,rgba(25,214,255,.15),transparent 35%);
  transition:opacity .45s ease;
}
body.dg-v13 .service-photo.service-photo-wrap:hover::before{opacity:.42;}
body.dg-v13 .service-photo.service-photo-wrap img.service-photo-img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  transform:scale(1.015)!important;
  filter:saturate(1.06) contrast(1.03)!important;
  transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .75s ease,object-position .35s ease!important;
}
body.dg-v13 .service-photo.service-photo-wrap:hover img.service-photo-img{
  transform:scale(1.07)!important;
  filter:saturate(1.13) contrast(1.06)!important;
}
body.dg-v13 .service-photo-img.house-photo{object-position:46% 46%!important;}
body.dg-v13 .service-photo-img.car-photo{object-position:50% 52%!important;}
body.dg-v13 .service-photo-img.lock-photo{object-position:52% 48%!important;}
@keyframes servicePhotoIn{
  from{opacity:0;transform:translateY(34px) scale(.965);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@media(max-width:980px){
  body.dg-v13 .service-top{padding:30px 16px 42px!important;}
  body.dg-v13 .service-photo.service-photo-wrap{width:calc(100vw - 32px)!important;border-radius:26px!important;aspect-ratio:16/9!important;}
  body.dg-v13 .service-photo-img.house-photo{object-position:48% 50%!important;}
  body.dg-v13 .service-photo-img.car-photo{object-position:50% 50%!important;}
  body.dg-v13 .service-photo-img.lock-photo{object-position:50% 50%!important;}
}
@media(max-width:520px){
  body.dg-v13 .service-top{padding:22px 12px 34px!important;}
  body.dg-v13 .service-photo.service-photo-wrap{width:calc(100vw - 24px)!important;border-radius:22px!important;aspect-ratio:4/3!important;box-shadow:0 18px 46px rgba(4,42,65,.16)!important;}
  body.dg-v13 .service-photo.service-photo-wrap:hover img.service-photo-img{transform:scale(1.035)!important;}
  body.dg-v13 .service-photo-img.house-photo{object-position:50% 50%!important;}
  body.dg-v13 .service-photo-img.car-photo{object-position:48% 50%!important;}
  body.dg-v13 .service-photo-img.lock-photo{object-position:50% 52%!important;}
}

/* ===================== DoorGO v16 MEGA POLISH: universal smooth pop + desktop/mobile redesign ===================== */
:root{
  --v16-cyan:#20d9ff;
  --v16-blue:#0878f7;
  --v16-deep:#061b2b;
  --v16-glow:0 22px 55px rgba(32,217,255,.28),0 10px 30px rgba(8,120,247,.18);
  --v16-soft-shadow:0 24px 80px rgba(6,27,43,.12);
  --v16-fast:cubic-bezier(.2,.8,.2,1);
  --v16-pop:cubic-bezier(.16,1,.3,1);
}

body{
  background:
    radial-gradient(circle at 12% 12%,rgba(32,217,255,.18),transparent 28%),
    radial-gradient(circle at 86% 5%,rgba(8,120,247,.13),transparent 26%),
    linear-gradient(180deg,#f6fdff 0%,#ffffff 42%,#edfaff 100%) !important;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0%,rgba(32,217,255,.06) 28%,transparent 54%),
    radial-gradient(circle at 50% 120%,rgba(8,120,247,.10),transparent 42%);
  animation:v16BackgroundBreath 10s ease-in-out infinite alternate;
}
@keyframes v16BackgroundBreath{from{filter:hue-rotate(0deg);opacity:.75}to{filter:hue-rotate(8deg);opacity:1}}

/* universal smooth popup feeling */
.btn,.mini-cta,.card-link,.nav a,.dropdown-trigger,.dropdown-menu a,.brand,.socials a,.footer-socials a,
.service-card,.video-card,.contact-card,.info-box,.feature,.trust,.real-gallery-card,.video-placeholder,
.lead-card,.operator-box,.map-panel,.service-photo,.hero-tile,.card-img,.tile-icon,.mini-icon,.contact-icon,
.map-box,.cta-band,.price-box,.faq,.content img,.section img,.footer-logo,.phone-float{
  will-change:transform,filter,box-shadow,opacity;
  transform-style:preserve-3d;
  transition:
    transform .42s var(--v16-pop),
    box-shadow .42s var(--v16-pop),
    filter .42s var(--v16-pop),
    opacity .42s var(--v16-pop),
    border-color .42s var(--v16-pop),
    background .42s var(--v16-pop),
    color .32s ease !important;
}

.btn:hover,.mini-cta:hover,.card-link:hover,.nav a:hover,.dropdown-trigger:hover,.dropdown-menu a:hover,.brand:hover,
.socials a:hover,.footer-socials a:hover,.service-card:hover,.video-card:hover,.contact-card:hover,.info-box:hover,
.feature:hover,.trust:hover,.real-gallery-card:hover,.video-placeholder:hover,.lead-card:hover,.operator-box:hover,
.map-panel:hover,.service-photo:hover,.hero-tile:hover,.card-img:hover,.tile-icon:hover,.mini-icon:hover,
.contact-icon:hover,.map-box:hover,.cta-band:hover,.price-box:hover,.faq:hover,.content img:hover,.section img:hover,.footer-logo:hover{
  transform:translateY(-8px) scale(1.025) !important;
  filter:saturate(1.08) contrast(1.03);
  box-shadow:var(--v16-glow) !important;
}

.btn:active,.mini-cta:active,.card-link:active,.nav a:active,.socials a:active,.footer-socials a:active,
.service-card:active,.video-card:active,.contact-card:active,.real-gallery-card:active,.phone-float:active{
  transform:translateY(-2px) scale(.985) !important;
  transition-duration:.12s !important;
}

/* premium hover glow layer on almost all cards */
.service-card,.video-card,.contact-card,.info-box,.feature,.trust,.real-gallery-card,.video-placeholder,
.lead-card,.operator-box,.map-panel,.service-photo,.hero-tile,.map-box,.cta-band,.price-box,.faq{
  isolation:isolate;
  position:relative;
}
.service-card:before,.video-card:after,.contact-card:before,.info-box:before,.feature:before,.trust:before,
.real-gallery-card:after,.video-placeholder:after,.lead-card:after,.operator-box:after,.map-panel:after,
.service-photo:after,.hero-tile:before,.map-box:before,.cta-band:after,.price-box:after,.faq:after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  z-index:0;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,25%),rgba(32,217,255,.32),transparent 38%),linear-gradient(135deg,rgba(32,217,255,.16),transparent 42%,rgba(8,120,247,.14));
  transition:opacity .38s var(--v16-fast),transform .38s var(--v16-fast);
}
.service-card:hover:before,.video-card:hover:after,.contact-card:hover:before,.info-box:hover:before,.feature:hover:before,
.trust:hover:before,.real-gallery-card:hover:after,.video-placeholder:hover:after,.lead-card:hover:after,.operator-box:hover:after,
.map-panel:hover:after,.service-photo:hover:after,.hero-tile:hover:before,.map-box:hover:before,.cta-band:hover:after,
.price-box:hover:after,.faq:hover:after{opacity:1;transform:scale(1.015)}
.service-card > *, .video-card > *, .contact-card > *, .info-box > *, .feature > *, .trust > *,
.real-gallery-card > *, .video-placeholder > *, .lead-card > *, .operator-box > *, .map-panel > *,
.map-box > *, .cta-band > *, .price-box > *, .faq > *{position:relative;z-index:1}

/* header feels expensive instead of flat */
.site-header{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(22px) saturate(1.3)!important;
  box-shadow:0 14px 55px rgba(5,30,46,.09)!important;
}
.nav a,.dropdown-trigger{border-radius:999px;padding-left:10px!important;padding-right:10px!important}
.nav a:hover,.dropdown-trigger:hover{background:rgba(32,217,255,.10);color:var(--v16-blue)}
.dropdown-menu{box-shadow:0 26px 70px rgba(5,30,46,.16),0 0 0 1px rgba(32,217,255,.14)!important}

/* social icons must remain visible on hover */
.socials a,.footer-socials a{
  background:rgba(255,255,255,.95)!important;
  border:1px solid rgba(32,217,255,.55)!important;
  box-shadow:0 0 0 7px rgba(32,217,255,.11),0 14px 34px rgba(8,120,247,.14)!important;
  overflow:hidden!important;
}
.socials a:before,.footer-socials a:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(32,217,255,.18),rgba(8,120,247,.14));
  transform:scale(0);
  transition:transform .35s var(--v16-pop);
}
.socials a:hover:before,.footer-socials a:hover:before{transform:scale(1)}
.socials img,.footer-socials img{position:relative;z-index:2;opacity:1!important;filter:none!important;transform:none!important}
.socials a:hover img,.footer-socials a:hover img{transform:scale(1.12) rotate(4deg)!important;filter:none!important}

/* contact icons must be readable */
.contact-icon{
  background:linear-gradient(135deg,#ffffff,#e9fbff)!important;
  border:1px solid rgba(32,217,255,.46)!important;
  box-shadow:0 16px 45px rgba(8,120,247,.16), inset 0 0 0 8px rgba(32,217,255,.08)!important;
}
.contact-icon img{
  opacity:1!important;
  filter:none!important;
  width:44px!important;
  height:44px!important;
  object-fit:contain!important;
}
.contact-card:hover .contact-icon{
  background:linear-gradient(135deg,var(--v16-cyan),var(--v16-blue))!important;
}
.contact-card:hover .contact-icon img{filter:brightness(0) invert(1)!important;transform:scale(1.1) rotate(-6deg)!important}
.contact-card{
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(232,250,255,.82))!important;
  border:1px solid rgba(32,217,255,.32)!important;
}
.contact-card h3{letter-spacing:-.03em}
.contact-card p,.contact-card a{font-weight:850;color:#506a7e}
.contact-card a{color:var(--v16-blue)!important}

/* clean banner, more premium, not stiff */
.dg-clean-banner{
  min-height:300px!important;
  padding:64px 22px 58px!important;
  background-color:#102b3b!important;
  background-image:
    linear-gradient(90deg,rgba(6,24,38,.70),rgba(6,24,38,.42),rgba(6,24,38,.70)),
    radial-gradient(circle at 50% 48%,rgba(32,217,255,.30),transparent 36%),
    url("doorgo banner.png")!important;
  background-size:auto,auto,470px auto!important;
  background-position:center!important;
  overflow:hidden;
}
.dg-clean-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.13) 46%,transparent 54%);
  transform:translateX(-110%);
  animation:v16BannerSweep 6s ease-in-out infinite;
}
.dg-clean-banner:after{
  content:"";
  position:absolute;
  left:-5%;right:-5%;bottom:-26px;height:70px;
  background:#f6fdff;
  border-radius:50% 50% 0 0/100% 100% 0 0;
  box-shadow:0 -20px 50px rgba(32,217,255,.12);
}
@keyframes v16BannerSweep{0%,30%{transform:translateX(-110%)}70%,100%{transform:translateX(110%)}}
.dg-clean-banner-inner{position:relative;z-index:2;animation:v16HeroPop .8s var(--v16-pop) both}
.dg-clean-banner h1{
  font-size:clamp(44px,7vw,92px)!important;
  line-height:1!important;
  text-shadow:0 18px 45px rgba(0,0,0,.25),0 0 18px rgba(32,217,255,.18);
  letter-spacing:-.055em!important;
}
.dg-banner-actions .btn{box-shadow:0 20px 50px rgba(0,0,0,.18)!important}
@keyframes v16HeroPop{from{opacity:0;transform:translateY(22px) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}

/* home hero / sections extra depth */
.hero{background:linear-gradient(180deg,#ffffff 0%,#eefbff 100%)!important}
.hero h1,.section h2,.content h2,.page-title h1{letter-spacing:-.06em!important}
.hero-grid,.services-strip{
  background-size:480px auto!important;
  box-shadow:inset 0 30px 80px rgba(0,0,0,.18),inset 0 -30px 80px rgba(32,217,255,.08);
}
.hero-tile,.service-card,.video-card,.real-gallery-card,.feature,.contact-card{
  border:1px solid rgba(32,217,255,.28)!important;
}
.hero-tile:hover span,.service-card:hover h3,.feature:hover h3,.video-card:hover h3{color:var(--v16-blue)}
.hero-tile:hover span{color:#fff;text-shadow:0 0 22px rgba(32,217,255,.55)}

/* service page hero image placement: more editorial */
.service-top{padding:54px 22px 60px!important;background:linear-gradient(180deg,#eefdff 0%,#fff 100%)!important}
.service-photo{
  max-width:min(1040px,92vw)!important;
  border-radius:34px!important;
  overflow:hidden!important;
  box-shadow:0 30px 90px rgba(6,24,38,.18),0 0 0 1px rgba(32,217,255,.24)!important;
}
.service-photo img{
  height:clamp(320px,42vw,560px)!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.service-photo img[src="house lock.jpg"]{object-position:center 45%!important}
.service-photo img[src="car lock.jpg"]{object-position:center 50%!important}
.service-photo img[src="change lock.jpg"]{object-position:center 48%!important}

/* gallery gets cleaner, balanced and bigger */
.gallery-page-section{padding-top:76px!important}
.gallery-layout-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.real-gallery-grid,.portfolio-masonry{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  max-width:1120px!important;
  margin:0 auto!important;
  align-items:stretch!important;
}
.real-gallery-card{
  min-height:0!important;
  height:360px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  box-shadow:0 22px 65px rgba(6,24,38,.13)!important;
  background:#fff!important;
  cursor:pointer;
}
.real-gallery-card:nth-child(4n+1){height:420px!important}
.real-gallery-card:nth-child(5n+2){height:300px!important}
.real-gallery-card img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  transition:transform .7s var(--v16-pop),filter .45s var(--v16-pop)!important;
}
.real-gallery-card:hover img{transform:scale(1.10)!important;filter:saturate(1.08) contrast(1.04)}
.real-gallery-card figcaption{
  position:absolute!important;
  left:16px!important;right:16px!important;bottom:16px!important;
  color:#fff!important;
  background:linear-gradient(135deg,rgba(6,24,38,.88),rgba(8,120,247,.72))!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:18px!important;
  padding:10px 12px!important;
  font-weight:1000!important;
  opacity:0;
  transform:translateY(14px) scale(.96);
  transition:.4s var(--v16-pop)!important;
  backdrop-filter:blur(12px);
}
.real-gallery-card:hover figcaption{opacity:1;transform:none}

/* footer more premium */
.footer{
  background:
    radial-gradient(circle at 20% 0%,rgba(32,217,255,.18),transparent 35%),
    linear-gradient(135deg,#02111c,#06263b 58%,#041923)!important;
  border-top:1px solid rgba(32,217,255,.20)!important;
  box-shadow:0 -24px 70px rgba(6,24,38,.10);
}
.footer-inner{gap:44px!important}
.footer a:hover{color:var(--v16-cyan)!important;transform:translateX(5px)!important}

/* floating call button: follows everywhere, better animation */
.phone-float{
  position:fixed!important;
  left:28px!important;
  bottom:30px!important;
  width:76px!important;
  height:76px!important;
  z-index:120!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#12e457,#08b73f)!important;
  box-shadow:0 0 0 10px rgba(18,228,87,.16),0 22px 55px rgba(16,200,63,.35)!important;
  animation:v16CallPulse 2.2s ease-in-out infinite!important;
}
.phone-float:before,.phone-float:after{
  content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(18,228,87,.42);animation:v16Ring 2.2s ease-out infinite;pointer-events:none;
}
.phone-float:after{animation-delay:.75s}
.phone-float img{width:34px!important;height:34px!important;filter:brightness(0) invert(1)!important;opacity:1!important}
.phone-float:hover{transform:translateY(-10px) scale(1.08) rotate(-8deg)!important}
@keyframes v16CallPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes v16Ring{0%{transform:scale(.78);opacity:.65}100%{transform:scale(1.5);opacity:0}}

/* animated pop bubble added by JS */
.dg-hover-bubble{
  position:fixed;
  z-index:999;
  pointer-events:none;
  background:rgba(4,26,42,.92);
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  box-shadow:0 16px 40px rgba(6,24,38,.22),0 0 0 1px rgba(32,217,255,.20);
  opacity:0;
  transform:translate(-50%,-10px) scale(.88);
  transition:opacity .18s ease, transform .22s var(--v16-pop);
  backdrop-filter:blur(12px);
}
.dg-hover-bubble.show{opacity:1;transform:translate(-50%,-18px) scale(1)}

/* better reveal: every section feels alive */
.reveal{transform:translateY(22px) scale(.985);filter:blur(6px);opacity:0;transition:opacity .75s var(--v16-pop),transform .75s var(--v16-pop),filter .75s var(--v16-pop)!important;transition-delay:var(--reveal-delay,0ms)!important}
.reveal.in-view,.page-ready .reveal.in-view{opacity:1;transform:none;filter:none}
.dg-staggered{animation:v16Stagger .72s var(--v16-pop) both}
@keyframes v16Stagger{from{opacity:0;transform:translateY(24px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* mobile premium redesign */
@media (max-width: 900px){
  .site-header{top:0!important;width:100%!important;border-radius:0!important;margin:0!important}
  .header-inner{padding:9px 14px!important;min-height:68px!important}
  .brand img{height:44px!important;max-width:106px!important}
  .socials{gap:7px!important}
  .socials a{width:38px!important;height:38px!important;box-shadow:0 0 0 5px rgba(32,217,255,.10),0 10px 24px rgba(8,120,247,.14)!important}
  .socials img{width:19px!important;height:19px!important}
  .nav.open{border-radius:0 0 28px 28px!important;box-shadow:0 22px 55px rgba(6,24,38,.18)!important}
  .dg-clean-banner{min-height:260px!important;padding:58px 18px 50px!important;background-size:auto,auto,350px auto!important}
  .dg-clean-banner h1{font-size:clamp(42px,13vw,62px)!important}
  .dg-banner-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
  .hero-inner{padding:34px 16px 0!important}
  .hero h1{font-size:clamp(34px,10vw,56px)!important}
  .hero-grid{grid-template-columns:1fr!important;padding:28px 16px!important;gap:18px!important}
  .hero-tile{min-height:260px!important;border-radius:28px!important}
  .trust-row{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .service-grid,.video-row,.gallery-grid,.feature-grid,.contact-cards{grid-template-columns:1fr!important;gap:18px!important}
  .section{padding:58px 16px!important}
  .content{padding:52px 16px!important}
  .service-card,.contact-card,.feature,.video-card,.lead-card,.operator-box,.map-panel,.cta-band{border-radius:28px!important}
  .card-img{height:220px!important}
  .card-body{padding:22px!important}
  .real-gallery-grid,.portfolio-masonry{grid-template-columns:1fr!important;gap:18px!important;max-width:520px!important}
  .real-gallery-card,.real-gallery-card:nth-child(n){height:360px!important;border-radius:26px!important}
  .gallery-layout-head{display:block!important;text-align:left!important}
  .gallery-layout-head .mini-cta{margin-top:14px}
  .service-photo{max-width:94vw!important;border-radius:28px!important}
  .service-photo img{height:300px!important}
  .phone-float{width:64px!important;height:64px!important;left:16px!important;bottom:18px!important}
  .phone-float img{width:29px!important;height:29px!important}
  .footer-inner{grid-template-columns:1fr!important;text-align:left!important;padding-bottom:42px!important}
  .footer-socials a{width:44px!important;height:44px!important}
}

@media (max-width: 520px){
  body{font-size:15px!important}
  .section h2,.content h2{font-size:32px!important}
  .dg-clean-banner{min-height:230px!important;padding-top:48px!important}
  .dg-clean-banner h1{font-size:42px!important}
  .btn{width:auto;min-height:48px;padding:13px 18px!important}
  .trust-row{grid-template-columns:1fr!important}
  .real-gallery-card,.real-gallery-card:nth-child(n){height:310px!important}
  .contact-card{min-height:210px!important;padding:24px 18px!important}
  .contact-icon{width:82px!important;height:82px!important;margin-inline:auto!important}
  .contact-icon img{width:38px!important;height:38px!important}
  .hero-actions{gap:10px!important}
  .hero-actions .btn{width:100%!important}
  .service-photo img{height:250px!important}
}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* =====================================================
   DoorGO v17 LOCK-IN PATCH
   Fixes: real banners back, no hover text bubbles, pure pop hover,
   cleaner desktop/mobile layout, better service photo positions.
   ===================================================== */
body.dg-v17{
  background:
    radial-gradient(circle at 10% 8%,rgba(33,214,255,.13),transparent 28%),
    radial-gradient(circle at 92% 16%,rgba(8,121,242,.08),transparent 32%),
    linear-gradient(180deg,#f8fdff,#ffffff 45%,#effbff)!important;
  color:#061826!important;
}
.dg-hover-bubble{display:none!important;opacity:0!important;visibility:hidden!important;content:none!important;}

/* no browser-looking/AI tooltip labels, only real animation */
[title]{cursor:pointer;}
.dg-hoverable:before,.dg-hoverable:after{pointer-events:none;}

/* header more solid, no awkward crop */
body.dg-v17 .site-header{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid rgba(31,202,245,.30)!important;
  box-shadow:0 10px 32px rgba(4,29,46,.07)!important;
}
body.dg-v17 .header-inner{min-height:74px!important;}
body.dg-v17 .brand img{height:58px!important;max-width:150px!important;object-fit:contain!important;}
body.dg-v17 .nav a,body.dg-v17 .dropdown-trigger{transition:transform .18s cubic-bezier(.2,1.4,.2,1), color .18s ease!important;}
body.dg-v17 .nav a:hover,body.dg-v17 .dropdown-trigger:hover{transform:translateY(-3px) scale(1.05)!important;color:#0879f2!important;}

/* universal POP hover: immediate, visible, no text bubble */
body.dg-v17 a,body.dg-v17 button,body.dg-v17 .service-card,body.dg-v17 .hero-tile,body.dg-v17 .real-gallery-card,body.dg-v17 .video-card,body.dg-v17 .video-placeholder,body.dg-v17 .contact-card,body.dg-v17 .info-box,body.dg-v17 .feature,body.dg-v17 .trust,body.dg-v17 .lead-card,body.dg-v17 .operator-box,body.dg-v17 .map-panel,body.dg-v17 .service-photo,body.dg-v17 .map-box{
  transition:transform .16s cubic-bezier(.16,1.45,.32,1), box-shadow .20s ease, filter .20s ease, background .20s ease, border-color .20s ease!important;
  will-change:transform;
}
body.dg-v17 a:hover,body.dg-v17 button:hover,body.dg-v17 .service-card:hover,body.dg-v17 .hero-tile:hover,body.dg-v17 .real-gallery-card:hover,body.dg-v17 .video-card:hover,body.dg-v17 .video-placeholder:hover,body.dg-v17 .contact-card:hover,body.dg-v17 .info-box:hover,body.dg-v17 .feature:hover,body.dg-v17 .trust:hover,body.dg-v17 .lead-card:hover,body.dg-v17 .operator-box:hover,body.dg-v17 .map-panel:hover,body.dg-v17 .service-photo:hover,body.dg-v17 .map-box:hover{
  transform:translateY(-8px) scale(1.035)!important;
  filter:saturate(1.04);
}
body.dg-v17 .btn:hover{transform:translateY(-6px) scale(1.06)!important;}
body.dg-v17 .socials a:hover,body.dg-v17 .footer-socials a:hover{
  transform:translateY(-7px) scale(1.14)!important;
  background:#fff!important;
  box-shadow:0 0 0 8px rgba(33,214,255,.13),0 18px 42px rgba(8,121,242,.22)!important;
}
body.dg-v17 .socials a:hover img,body.dg-v17 .footer-socials a:hover img{filter:none!important;opacity:1!important;transform:scale(1.18)!important;}

/* one clean banner design everywhere */
body.dg-v17 .dg-clean-banner,
body.dg-v17 .home-hero-v17 .hero-inner{
  position:relative!important;
  min-height:360px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:70px 22px 74px!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
  color:#fff!important;
  overflow:hidden!important;
  background-color:#09283a!important;
  background-image:
    linear-gradient(90deg,rgba(5,20,30,.62),rgba(10,50,67,.38),rgba(5,20,30,.62)),
    radial-gradient(circle at 50% 50%,rgba(37,219,255,.25),transparent 38%),
    url("doorgo banner.png")!important;
  background-size:cover,cover,cover!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  border-bottom:1px solid rgba(37,219,255,.25)!important;
  box-shadow:inset 0 -45px 100px rgba(3,20,30,.22)!important;
}
body.dg-v17 .dg-clean-banner:before,
body.dg-v17 .home-hero-v17 .hero-inner:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(115deg,transparent 0%,rgba(255,255,255,.12) 46%,transparent 54%),
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.10),transparent 38%)!important;
  transform:translateX(-115%);
  animation:v17BannerSweep 5.8s ease-in-out infinite!important;
}
body.dg-v17 .dg-clean-banner:after,
body.dg-v17 .home-hero-v17 .hero-inner:after{
  content:""!important;position:absolute!important;left:-7%;right:-7%;bottom:-44px;height:92px!important;
  background:#f7fdff!important;border-radius:50% 50% 0 0/100% 100% 0 0!important;
  box-shadow:0 -22px 65px rgba(37,219,255,.14)!important;
}
@keyframes v17BannerSweep{0%,32%{transform:translateX(-115%)}70%,100%{transform:translateX(115%)}}
body.dg-v17 .dg-clean-banner-inner,body.dg-v17 .home-hero-v17 .hero-inner > *{position:relative;z-index:2;}
body.dg-v17 .dg-clean-banner h1,
body.dg-v17 .home-hero-v17 h1{
  color:#fff!important;
  font-size:clamp(44px,6.4vw,86px)!important;
  line-height:.98!important;
  letter-spacing:-.065em!important;
  text-shadow:0 20px 55px rgba(0,0,0,.36),0 0 24px rgba(37,219,255,.18)!important;
  max-width:1120px!important;
  margin:14px auto 12px!important;
}
body.dg-v17 .home-hero-v17 h1 span{color:#e8fbff!important;}
body.dg-v17 .hero-sub{color:rgba(255,255,255,.90)!important;font-weight:800!important;}
body.dg-v17 .eyebrow{background:rgba(255,255,255,.18)!important;color:#0879f2!important;backdrop-filter:blur(10px);}
body.dg-v17 .dg-clean-banner .eyebrow, body.dg-v17 .home-hero-v17 .eyebrow{color:#fff!important;border-color:rgba(255,255,255,.22)!important;}

/* home service showcase: no broken/cropped banner feeling */
body.dg-v17 .home-service-showcase{
  background:
    radial-gradient(circle at 50% 0%,rgba(37,219,255,.16),transparent 38%),
    linear-gradient(180deg,#061826,#082c42)!important;
  padding:72px 22px 72px!important;
}
body.dg-v17 .home-service-showcase .hero-grid{
  max-width:1080px!important;margin:0 auto!important;padding:0!important;background:none!important;
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:28px!important;
  box-shadow:none!important;
}
body.dg-v17 .hero-tile{
  min-height:330px!important;border-radius:34px!important;box-shadow:0 28px 80px rgba(0,0,0,.28)!important;
  border:1px solid rgba(37,219,255,.25)!important;
}
body.dg-v17 .hero-tile img{height:100%!important;width:100%!important;object-fit:cover!important;}
body.dg-v17 .hero-tile:after{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(3,20,30,.78))!important;}
body.dg-v17 .home-service-showcase .trust-row{max-width:1080px;margin:34px auto 0!important;}

/* service cards stronger and same quality */
body.dg-v17 .service-grid{gap:30px!important;align-items:stretch!important;}
body.dg-v17 .service-card{
  border-radius:32px!important;overflow:hidden!important;background:linear-gradient(180deg,#fff,#f6fdff)!important;
  box-shadow:0 24px 70px rgba(4,37,58,.12)!important;
}
body.dg-v17 .service-card:hover{box-shadow:0 34px 95px rgba(4,37,58,.22),0 0 0 1px rgba(37,219,255,.26) inset!important;}
body.dg-v17 .card-img{height:260px!important;}
body.dg-v17 .card-body{min-height:245px!important;display:flex;flex-direction:column;justify-content:space-between;}

/* service detail photos: better crop, centered, editorial */
body.dg-v17 .service-top{
  padding:68px 22px 72px!important;
  background:linear-gradient(180deg,#f4fcff,#ffffff 60%,#eefbff)!important;
}
body.dg-v17 .service-photo{
  width:min(1040px,88vw)!important;
  aspect-ratio:16/7.6!important;
  border-radius:36px!important;
  overflow:hidden!important;
  margin:0 auto!important;
  background:#eaf7fb!important;
  box-shadow:0 28px 82px rgba(4,37,58,.16),0 0 0 1px rgba(37,219,255,.26)!important;
}
body.dg-v17 .service-photo img{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}
body.dg-v17 .service-photo img[src="house lock.jpg"]{object-position:center 48%!important;}
body.dg-v17 .service-photo img[src="car lock.jpg"]{object-position:center 52%!important;}
body.dg-v17 .service-photo img[src="change lock.jpg"]{object-position:center 48%!important;}

/* contact icons readable */
body.dg-v17 .contact-cards{align-items:stretch!important;}
body.dg-v17 .contact-card{min-height:265px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;}
body.dg-v17 .contact-icon{
  width:88px!important;height:88px!important;border-radius:28px!important;margin:0 auto 22px!important;
  display:grid!important;place-items:center!important;background:#fff!important;box-shadow:0 16px 45px rgba(8,121,242,.14)!important;
}
body.dg-v17 .contact-icon img{width:46px!important;height:46px!important;object-fit:contain!important;opacity:1!important;filter:none!important;}
body.dg-v17 .contact-card:hover .contact-icon{background:linear-gradient(135deg,#eaffff,#ffffff)!important;}
body.dg-v17 .contact-card:hover .contact-icon img{filter:none!important;transform:scale(1.16)!important;}

/* gallery: equal, cleaner, no repeated awkward layout */
body.dg-v17 .portfolio-masonry,
body.dg-v17 .real-gallery-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:26px!important;
  max-width:1180px!important;
  margin:0 auto!important;
  align-items:stretch!important;
}
body.dg-v17 .portfolio-masonry .real-gallery-card,
body.dg-v17 .real-gallery-card,
body.dg-v17 .real-gallery-card:nth-child(n){
  grid-column:auto!important;grid-row:auto!important;
  height:360px!important;min-height:360px!important;border-radius:30px!important;
  box-shadow:0 24px 72px rgba(4,37,58,.14)!important;
}
body.dg-v17 .real-gallery-card img{height:100%!important;width:100%!important;object-fit:cover!important;}
body.dg-v17 .real-gallery-card:hover{transform:translateY(-10px) scale(1.04)!important;z-index:10;}
body.dg-v17 .gallery-lightbox.open{animation:v17LightIn .32s cubic-bezier(.16,1.2,.25,1) both!important;}
body.dg-v17 .gallery-lightbox.closing{animation:v17LightOut .28s ease both!important;}
body.dg-v17 .gallery-lightbox img{animation:v17PhotoIn .34s cubic-bezier(.16,1.2,.25,1) both!important;border-radius:30px!important;}
@keyframes v17LightIn{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(18px)}}
@keyframes v17LightOut{from{opacity:1;backdrop-filter:blur(18px)}to{opacity:0;backdrop-filter:blur(0)}}
@keyframes v17PhotoIn{from{opacity:0;transform:scale(.86) translateY(24px)}to{opacity:1;transform:none}}

/* footer and call button */
body.dg-v17 .footer{padding-top:80px!important;}
body.dg-v17 .phone-float{position:fixed!important;z-index:9999!important;left:28px!important;bottom:28px!important;}
body.dg-v17 .phone-float:hover{transform:translateY(-9px) scale(1.13)!important;}

/* stop random sticky lower hero buttons from covering design */
body.dg-v17 .hero-actions{position:relative!important;bottom:auto!important;z-index:2!important;}
body.dg-v17 .quick-bar,body.dg-v17 .mobile-quick,body.dg-v17 .bottom-cta,body.dg-v17 .sticky-bottom,body.dg-v17 .quick-contact{display:none!important;}

@media(max-width:900px){
  body.dg-v17 .site-header{position:sticky!important;top:0!important;}
  body.dg-v17 .header-inner{min-height:64px!important;padding:8px 14px!important;}
  body.dg-v17 .brand span{font-size:17px!important;}
  body.dg-v17 .brand img{height:42px!important;max-width:105px!important;}
  body.dg-v17 .menu-toggle{display:block!important;}
  body.dg-v17 .nav{display:none!important;position:absolute!important;left:12px!important;right:12px!important;top:64px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px)!important;border:1px solid rgba(37,219,255,.25)!important;border-radius:22px!important;padding:12px!important;box-shadow:0 24px 70px rgba(4,37,58,.18)!important;}
  body.dg-v17 .nav.open{display:grid!important;gap:4px!important;}
  body.dg-v17 .nav a,body.dg-v17 .dropdown-trigger{padding:12px 14px!important;border-radius:14px!important;}
  body.dg-v17 .dropdown-menu{position:static!important;width:auto!important;visibility:visible!important;opacity:1!important;transform:none!important;box-shadow:none!important;background:#f2fcff!important;margin:6px 0!important;}
  body.dg-v17 .socials a{width:36px!important;height:36px!important;}
  body.dg-v17 .socials img{width:18px!important;height:18px!important;}
  body.dg-v17 .dg-clean-banner,body.dg-v17 .home-hero-v17 .hero-inner{min-height:300px!important;padding:52px 16px 62px!important;background-size:cover!important;}
  body.dg-v17 .dg-clean-banner h1,body.dg-v17 .home-hero-v17 h1{font-size:clamp(38px,12vw,58px)!important;line-height:1.02!important;}
  body.dg-v17 .hero-sub{font-size:15px!important;}
  body.dg-v17 .home-service-showcase{padding:46px 16px!important;}
  body.dg-v17 .home-service-showcase .hero-grid{grid-template-columns:1fr!important;gap:18px!important;}
  body.dg-v17 .hero-tile{min-height:300px!important;}
  body.dg-v17 .trust-row{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  body.dg-v17 .service-grid,body.dg-v17 .feature-grid,body.dg-v17 .info-grid,body.dg-v17 .contact-cards,body.dg-v17 .video-row{grid-template-columns:1fr!important;}
  body.dg-v17 .service-card{border-radius:28px!important;}
  body.dg-v17 .card-img{height:230px!important;}
  body.dg-v17 .card-body{min-height:auto!important;padding:24px!important;}
  body.dg-v17 .service-photo{width:94vw!important;aspect-ratio:4/3!important;border-radius:28px!important;}
  body.dg-v17 .portfolio-masonry,body.dg-v17 .real-gallery-grid{grid-template-columns:1fr!important;gap:18px!important;max-width:94vw!important;}
  body.dg-v17 .portfolio-masonry .real-gallery-card,body.dg-v17 .real-gallery-card,body.dg-v17 .real-gallery-card:nth-child(n){height:340px!important;min-height:340px!important;}
  body.dg-v17 .footer-inner{grid-template-columns:1fr!important;text-align:left!important;gap:28px!important;}
  body.dg-v17 .phone-float{width:64px!important;height:64px!important;left:16px!important;bottom:16px!important;}
}
@media(max-width:520px){
  body.dg-v17 .top-line{height:3px!important;}
  body.dg-v17 .header-inner{gap:8px!important;}
  body.dg-v17 .socials{gap:5px!important;}
  body.dg-v17 .socials a{width:33px!important;height:33px!important;}
  body.dg-v17 .dg-clean-banner,body.dg-v17 .home-hero-v17 .hero-inner{min-height:270px!important;}
  body.dg-v17 .dg-clean-banner h1,body.dg-v17 .home-hero-v17 h1{font-size:38px!important;}
  body.dg-v17 .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important;max-width:330px!important;margin:18px auto 0!important;}
  body.dg-v17 .btn{width:100%!important;min-height:48px!important;}
  body.dg-v17 .trust-row{grid-template-columns:1fr!important;}
  body.dg-v17 .hero-tile{min-height:260px!important;}
  body.dg-v17 .section{padding:58px 16px!important;}
  body.dg-v17 .content{padding:54px 16px!important;}
  body.dg-v17 .service-photo{aspect-ratio:1.2/1!important;}
  body.dg-v17 .portfolio-masonry .real-gallery-card,body.dg-v17 .real-gallery-card,body.dg-v17 .real-gallery-card:nth-child(n){height:315px!important;min-height:315px!important;}
}

/* =========================
   DoorGO v18 alive polish
   Instagram + number update support
   Clean hover motion without tooltip text
   ========================= */
:root{
  --dg-ink:#061728;
  --dg-muted:#49677a;
  --dg-line:rgba(27,210,255,.25);
  --dg-cyan:#20d7ff;
  --dg-blue:#0879f2;
  --dg-glow:0 24px 70px rgba(11,151,232,.20);
  --dg-pop:cubic-bezier(.18,1.22,.22,1);
}
body.dg-v18{
  background:
    radial-gradient(circle at 10% 10%,rgba(32,215,255,.10),transparent 26%),
    radial-gradient(circle at 92% 24%,rgba(8,121,242,.10),transparent 30%),
    linear-gradient(180deg,#f8feff 0%,#eefbff 38%,#ffffff 100%)!important;
  color:var(--dg-ink)!important;
  overflow-x:hidden;
}
body.dg-v18 *{scroll-behavior:smooth;}
body.dg-v18 .site-header{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(22px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.15)!important;
  border-bottom:1px solid rgba(32,215,255,.28)!important;
  box-shadow:0 10px 45px rgba(4,37,58,.06)!important;
}
body.dg-v18 .brand img{filter:drop-shadow(0 10px 20px rgba(32,215,255,.16));}
body.dg-v18 .brand,
body.dg-v18 .nav a,
body.dg-v18 .dropdown-trigger,
body.dg-v18 .socials a,
body.dg-v18 .footer-socials a,
body.dg-v18 .btn,
body.dg-v18 .card-link,
body.dg-v18 .phone-float,
body.dg-v18 .service-card,
body.dg-v18 .hero-tile,
body.dg-v18 .contact-card,
body.dg-v18 .info-box,
body.dg-v18 .feature,
body.dg-v18 .trust,
body.dg-v18 .real-gallery-card,
body.dg-v18 .video-placeholder,
body.dg-v18 .video-card,
body.dg-v18 .lead-card,
body.dg-v18 .operator-box,
body.dg-v18 .map-box,
body.dg-v18 .map-panel,
body.dg-v18 details,
body.dg-v18 summary,
body.dg-v18 img{
  transition:
    transform .36s var(--dg-pop),
    box-shadow .36s var(--dg-pop),
    border-color .36s ease,
    background .36s ease,
    opacity .36s ease,
    filter .36s ease!important;
}
body.dg-v18 .nav a:hover,
body.dg-v18 .dropdown-trigger:hover{
  transform:translateY(-4px) scale(1.04)!important;
  background:rgba(32,215,255,.10)!important;
  color:var(--dg-blue)!important;
}
body.dg-v18 .nav a.active{color:var(--dg-blue)!important;}
body.dg-v18 .nav a.active:after,
body.dg-v18 .dropdown-trigger.active:after{
  box-shadow:0 0 18px rgba(32,215,255,.75)!important;
}
body.dg-v18 .socials,
body.dg-v18 .footer-socials{overflow:visible!important;}
body.dg-v18 .socials a,
body.dg-v18 .footer-socials a{
  overflow:visible!important;
  background:linear-gradient(180deg,#fff,#effcff)!important;
  border:1px solid rgba(32,215,255,.55)!important;
  box-shadow:0 10px 26px rgba(32,215,255,.18), inset 0 0 0 5px rgba(32,215,255,.08)!important;
}
body.dg-v18 .socials a:hover,
body.dg-v18 .footer-socials a:hover{
  transform:translateY(-7px) scale(1.16) rotate(-4deg)!important;
  box-shadow:0 18px 42px rgba(8,121,242,.28),0 0 0 8px rgba(32,215,255,.13)!important;
}
body.dg-v18 .socials a:nth-child(2):hover,
body.dg-v18 .footer-socials a:nth-child(2):hover{rotate:4deg;}
body.dg-v18 .socials img,
body.dg-v18 .footer-socials img{width:22px!important;height:22px!important;object-fit:contain!important;display:block!important;}
body.dg-v18 .dg-clean-banner,
body.dg-v18 .home-hero-v17 .hero-inner,
body.dg-v18 .gallery-modern-hero{
  position:relative!important;
  min-height:340px!important;
  background:
    linear-gradient(120deg,rgba(2,17,28,.66),rgba(7,47,70,.42)),
    url("doorgo banner.png") center/520px auto repeat!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(32,215,255,.35)!important;
}
body.dg-v18 .dg-clean-banner:before,
body.dg-v18 .home-hero-v17 .hero-inner:before,
body.dg-v18 .gallery-modern-hero:before{
  content:"";position:absolute;inset:-2px;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.24),transparent 18%),
    radial-gradient(circle at 28% 24%,rgba(32,215,255,.20),transparent 20%),
    radial-gradient(circle at 72% 70%,rgba(8,121,242,.18),transparent 24%);
  pointer-events:none;
  animation:dgAurora 8s ease-in-out infinite alternate;
}
body.dg-v18 .dg-clean-banner:after,
body.dg-v18 .home-hero-v17 .hero-inner:after,
body.dg-v18 .gallery-modern-hero:after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-52px;height:92px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),#f7fdff);
  border-radius:50% 50% 0 0/100% 100% 0 0;
  box-shadow:0 -18px 48px rgba(32,215,255,.12);
  pointer-events:none;
}
@keyframes dgAurora{0%{transform:translate3d(-1%,0,0) scale(1);opacity:.75}100%{transform:translate3d(1.5%,1%,0) scale(1.03);opacity:1}}
body.dg-v18 .dg-clean-banner-inner,
body.dg-v18 .hero-inner,
body.dg-v18 .gallery-hero-inner{position:relative!important;z-index:2!important;}
body.dg-v18 .dg-clean-banner h1,
body.dg-v18 .home-hero-v17 h1,
body.dg-v18 .gallery-modern-hero h1{
  text-shadow:0 18px 46px rgba(0,0,0,.28)!important;
  animation:dgTitlePop .9s var(--dg-pop) both!important;
}
@keyframes dgTitlePop{0%{opacity:0;transform:translateY(26px) scale(.92);filter:blur(8px)}100%{opacity:1;transform:none;filter:blur(0)}}
body.dg-v18 .btn{
  border-radius:999px!important;
  box-shadow:0 16px 38px rgba(8,121,242,.20)!important;
  position:relative!important;overflow:hidden!important;
}
body.dg-v18 .btn:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-130%);transition:transform .75s ease;pointer-events:none;
}
body.dg-v18 .btn:hover{transform:translateY(-7px) scale(1.055)!important;box-shadow:0 24px 62px rgba(8,121,242,.32)!important;}
body.dg-v18 .btn:hover:before{transform:translateX(130%);}
body.dg-v18 .service-card,
body.dg-v18 .contact-card,
body.dg-v18 .info-box,
body.dg-v18 .feature,
body.dg-v18 .lead-card,
body.dg-v18 .operator-box,
body.dg-v18 .map-box,
body.dg-v18 .map-panel,
body.dg-v18 .video-card,
body.dg-v18 .video-placeholder{
  border:1px solid rgba(32,215,255,.30)!important;
  box-shadow:0 20px 60px rgba(4,37,58,.10)!important;
}
body.dg-v18 .service-card:hover,
body.dg-v18 .contact-card:hover,
body.dg-v18 .info-box:hover,
body.dg-v18 .feature:hover,
body.dg-v18 .lead-card:hover,
body.dg-v18 .operator-box:hover,
body.dg-v18 .map-box:hover,
body.dg-v18 .map-panel:hover,
body.dg-v18 .video-card:hover,
body.dg-v18 .video-placeholder:hover{
  transform:translateY(-12px) scale(1.025)!important;
  box-shadow:0 34px 92px rgba(4,37,58,.20),0 0 0 1px rgba(32,215,255,.34) inset!important;
}
body.dg-v18 .service-card:hover img,
body.dg-v18 .hero-tile:hover img,
body.dg-v18 .real-gallery-card:hover img{filter:saturate(1.14) contrast(1.06)!important;}
body.dg-v18 .icon-badge,
body.dg-v18 .tile-icon,
body.dg-v18 .mini-icon,
body.dg-v18 .contact-icon{
  overflow:visible!important;
  background:linear-gradient(180deg,#fff,#edfcff)!important;
  border:1px solid rgba(32,215,255,.50)!important;
  box-shadow:0 16px 42px rgba(32,215,255,.18)!important;
}
body.dg-v18 .icon-badge img,
body.dg-v18 .tile-icon img,
body.dg-v18 .mini-icon img,
body.dg-v18 .contact-icon img{
  width:44px!important;height:44px!important;object-fit:contain!important;opacity:1!important;filter:none!important;
}
body.dg-v18 .contact-icon img[src*="location"]{width:42px!important;height:42px!important;transform:translateY(0)!important;}
body.dg-v18 .contact-card:hover .contact-icon,
body.dg-v18 .service-card:hover .icon-badge,
body.dg-v18 .info-box:hover .mini-icon,
body.dg-v18 .feature:hover .mini-icon{
  transform:translateY(-8px) scale(1.10) rotate(3deg)!important;
}
body.dg-v18 .phone-float{
  width:76px!important;height:76px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(135deg,#16d45c,#19d6ff)!important;
  border:8px solid rgba(255,255,255,.55)!important;
  box-shadow:0 22px 56px rgba(16,200,63,.35),0 0 0 0 rgba(16,200,63,.34)!important;
  animation:dgCallFloat 2.4s ease-in-out infinite, dgCallPulse 1.7s ease-out infinite!important;
}
body.dg-v18 .phone-float img{width:32px!important;height:32px!important;filter:brightness(0) invert(1)!important;}
body.dg-v18 .phone-float:hover{animation-play-state:paused!important;transform:translateY(-12px) scale(1.16) rotate(-8deg)!important;}
@keyframes dgCallFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes dgCallPulse{0%{box-shadow:0 22px 56px rgba(16,200,63,.35),0 0 0 0 rgba(16,200,63,.34)}100%{box-shadow:0 22px 56px rgba(16,200,63,.35),0 0 0 24px rgba(16,200,63,0)}}
body.dg-v18 .service-photo{
  width:min(980px,86vw)!important;
  aspect-ratio:16/6.8!important;
  border-radius:32px!important;
  box-shadow:0 28px 90px rgba(4,37,58,.16)!important;
}
body.dg-v18 .service-photo img[src="car lock.jpg"]{object-position:center 50%!important;}
body.dg-v18 .service-photo img[src="house lock.jpg"]{object-position:center 48%!important;}
body.dg-v18 .service-photo img[src="change lock.jpg"]{object-position:center 45%!important;}
body.dg-v18 .portfolio-masonry,
body.dg-v18 .real-gallery-grid{
  max-width:1120px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
}
body.dg-v18 .real-gallery-card,
body.dg-v18 .portfolio-masonry .real-gallery-card,
body.dg-v18 .real-gallery-card:nth-child(n){
  height:340px!important;min-height:340px!important;border-radius:28px!important;
}
body.dg-v18 .gallery-lightbox{transition:opacity .28s ease,backdrop-filter .28s ease!important;}
body.dg-v18 .gallery-lightbox.open img{animation:dgModalPop .36s var(--dg-pop) both!important;}
body.dg-v18 .gallery-lightbox.closing img{animation:dgModalOut .24s ease both!important;}
@keyframes dgModalPop{0%{opacity:0;transform:translateY(34px) scale(.82) rotate(-1.5deg)}100%{opacity:1;transform:none}}
@keyframes dgModalOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(20px) scale(.88)}}
body.dg-v18 .footer{
  background:radial-gradient(circle at 12% 0%,rgba(32,215,255,.12),transparent 34%),linear-gradient(135deg,#03131f,#062c43 62%,#03131f)!important;
  border-top:1px solid rgba(32,215,255,.20)!important;
}
body.dg-v18 .footer a:hover{transform:translateX(6px) scale(1.03)!important;color:#fff!important;}
body.dg-v18 .footer-logo{border-radius:22px!important;box-shadow:0 20px 54px rgba(32,215,255,.16)!important;}
body.dg-v18 .ripple-pop{position:relative;overflow:hidden;}
body.dg-v18 .ripple-pop .dg-ripple{
  position:absolute;border-radius:50%;pointer-events:none;width:10px;height:10px;
  background:rgba(32,215,255,.35);transform:translate(-50%,-50%) scale(0);animation:dgRipple .64s ease-out forwards;
}
@keyframes dgRipple{to{transform:translate(-50%,-50%) scale(18);opacity:0}}
@media (prefers-reduced-motion: reduce){
  body.dg-v18 *,body.dg-v18 *:before,body.dg-v18 *:after{animation:none!important;transition:none!important;}
}
@media(max-width:900px){
  body.dg-v18 .site-header{position:sticky!important;top:0!important;z-index:9998!important;}
  body.dg-v18 .dg-clean-banner,
  body.dg-v18 .home-hero-v17 .hero-inner,
  body.dg-v18 .gallery-modern-hero{min-height:300px!important;background-size:410px auto!important;}
  body.dg-v18 .home-service-showcase .hero-grid,
  body.dg-v18 .service-grid,
  body.dg-v18 .contact-cards,
  body.dg-v18 .info-grid,
  body.dg-v18 .feature-grid{grid-template-columns:1fr!important;gap:18px!important;}
  body.dg-v18 .service-photo{aspect-ratio:4/3!important;width:92vw!important;}
  body.dg-v18 .service-photo img[src="car lock.jpg"]{object-position:center center!important;}
  body.dg-v18 .service-photo img[src="house lock.jpg"]{object-position:center center!important;}
  body.dg-v18 .service-photo img[src="change lock.jpg"]{object-position:center center!important;}
  body.dg-v18 .portfolio-masonry,
  body.dg-v18 .real-gallery-grid{grid-template-columns:1fr 1fr!important;gap:16px!important;max-width:94vw!important;}
  body.dg-v18 .real-gallery-card,
  body.dg-v18 .portfolio-masonry .real-gallery-card,
  body.dg-v18 .real-gallery-card:nth-child(n){height:300px!important;min-height:300px!important;}
  body.dg-v18 .contact-card{min-height:230px!important;}
}
@media(max-width:560px){
  body.dg-v18 .header-inner{min-height:68px!important;}
  body.dg-v18 .brand img{height:46px!important;}
  body.dg-v18 .brand span{font-size:18px!important;}
  body.dg-v18 .socials a{width:34px!important;height:34px!important;}
  body.dg-v18 .socials img{width:18px!important;height:18px!important;}
  body.dg-v18 .dg-clean-banner,
  body.dg-v18 .home-hero-v17 .hero-inner,
  body.dg-v18 .gallery-modern-hero{min-height:260px!important;background-size:330px auto!important;padding-left:18px!important;padding-right:18px!important;}
  body.dg-v18 .dg-clean-banner h1,
  body.dg-v18 .home-hero-v17 h1,
  body.dg-v18 .gallery-modern-hero h1{font-size:clamp(34px,11vw,48px)!important;}
  body.dg-v18 .btn{font-size:14px!important;}
  body.dg-v18 .trust-row{grid-template-columns:1fr!important;}
  body.dg-v18 .portfolio-masonry,
  body.dg-v18 .real-gallery-grid{grid-template-columns:1fr!important;}
  body.dg-v18 .real-gallery-card,
  body.dg-v18 .portfolio-masonry .real-gallery-card,
  body.dg-v18 .real-gallery-card:nth-child(n){height:330px!important;min-height:330px!important;}
  body.dg-v18 .phone-float{width:66px!important;height:66px!important;left:16px!important;bottom:16px!important;border-width:7px!important;}
  body.dg-v18 .phone-float img{width:28px!important;height:28px!important;}
  body.dg-v18 .footer-inner{gap:30px!important;}
}


/* =========================================================
   DoorGO v20 — NO ZOOM HOVER FIX
   The user disliked elements popping/zooming on hover.
   This patch keeps the site alive with glow, shine, border,
   shadow, and tiny lift ONLY — no scale zoom on cards/buttons.
   ========================================================= */

body.dg-v20 {
  --dg-ease-clean: cubic-bezier(.2,.8,.2,1);
  --dg-blue: #0879f2;
  --dg-cyan: #19d6ff;
  --dg-soft-shadow: 0 16px 42px rgba(8,121,242,.14);
  --dg-hover-shadow: 0 22px 60px rgba(8,121,242,.22);
}

/* Kill old hover labels / weird crosshair text from previous patches */
body.dg-v20 [data-hover-label]::before,
body.dg-v20 [data-hover-label]::after,
body.dg-v20 .hover-label,
body.dg-v20 .cursor-label,
body.dg-v20 .dg-hover-text,
body.dg-v20 .dg-crosshair,
body.dg-v20 .hover-bubble {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Smooth transitions, but NO scaling pop */
body.dg-v20 a,
body.dg-v20 button,
body.dg-v20 .btn,
body.dg-v20 .card-link,
body.dg-v20 .service-card,
body.dg-v20 .contact-card,
body.dg-v20 .feature,
body.dg-v20 .info-box,
body.dg-v20 .lead-card,
body.dg-v20 .price-box,
body.dg-v20 .faq,
body.dg-v20 .video-card,
body.dg-v20 .real-gallery-card,
body.dg-v20 .gallery-card,
body.dg-v20 .portfolio-card,
body.dg-v20 .hero-tile,
body.dg-v20 .operator-box,
body.dg-v20 .map-panel,
body.dg-v20 .socials a,
body.dg-v20 .footer-socials a,
body.dg-v20 .phone-float {
  transition:
    transform .34s var(--dg-ease-clean),
    box-shadow .34s var(--dg-ease-clean),
    border-color .28s ease,
    background .34s var(--dg-ease-clean),
    filter .32s ease,
    opacity .28s ease !important;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
}

/* Cards: tiny lift only, absolutely no scale zoom */
body.dg-v20 .service-card:hover,
body.dg-v20 .contact-card:hover,
body.dg-v20 .feature:hover,
body.dg-v20 .info-box:hover,
body.dg-v20 .lead-card:hover,
body.dg-v20 .price-box:hover,
body.dg-v20 .faq:hover,
body.dg-v20 .video-card:hover,
body.dg-v20 .real-gallery-card:hover,
body.dg-v20 .gallery-card:hover,
body.dg-v20 .portfolio-card:hover,
body.dg-v20 .hero-tile:hover,
body.dg-v20 .operator-box:hover,
body.dg-v20 .map-panel:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--dg-hover-shadow) !important;
  border-color: rgba(25,214,255,.45) !important;
}

/* Buttons: lift/glow only, no zoom */
body.dg-v20 .btn:hover,
body.dg-v20 .card-link:hover,
body.dg-v20 button:hover,
body.dg-v20 .contact-main-btn:hover,
body.dg-v20 .call-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 44px rgba(8,121,242,.25) !important;
}

/* Social icons: no zoom, just lift + glow */
body.dg-v20 .socials a:hover,
body.dg-v20 .footer-socials a:hover {
  transform: translateY(-4px) !important;
  background: linear-gradient(135deg, var(--dg-cyan), var(--dg-blue)) !important;
  box-shadow: 0 16px 36px rgba(8,121,242,.25) !important;
}

body.dg-v20 .socials a:hover img,
body.dg-v20 .footer-socials a:hover img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Images: remove hover zoom. Use clean brightness/saturation only */
body.dg-v20 .card-img img,
body.dg-v20 .hero-tile img,
body.dg-v20 .real-gallery-card img,
body.dg-v20 .service-photo img,
body.dg-v20 .gallery-card img,
body.dg-v20 .portfolio-card img {
  transition: filter .34s ease, opacity .34s ease, object-position .34s ease !important;
  transform: none !important;
}

body.dg-v20 .service-card:hover .card-img img,
body.dg-v20 .hero-tile:hover img,
body.dg-v20 .real-gallery-card:hover img,
body.dg-v20 .service-photo:hover img,
body.dg-v20 .gallery-card:hover img,
body.dg-v20 .portfolio-card:hover img {
  transform: none !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.03) !important;
}

/* Keep glow/shimmer alive, but cleaner */
body.dg-v20 .service-card,
body.dg-v20 .contact-card,
body.dg-v20 .feature,
body.dg-v20 .info-box,
body.dg-v20 .lead-card,
body.dg-v20 .price-box,
body.dg-v20 .video-card,
body.dg-v20 .real-gallery-card,
body.dg-v20 .hero-tile,
body.dg-v20 .operator-box,
body.dg-v20 .map-panel {
  position: relative;
  overflow: hidden;
}

body.dg-v20 .service-card::after,
body.dg-v20 .contact-card::after,
body.dg-v20 .feature::after,
body.dg-v20 .info-box::after,
body.dg-v20 .lead-card::after,
body.dg-v20 .price-box::after,
body.dg-v20 .video-card::after,
body.dg-v20 .real-gallery-card::after,
body.dg-v20 .hero-tile::after,
body.dg-v20 .operator-box::after,
body.dg-v20 .map-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(25,214,255,.18), transparent 32%),
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 63%);
  transform: translateX(-24%);
  transition: opacity .32s ease, transform .58s var(--dg-ease-clean);
  z-index: 3;
  mix-blend-mode: screen;
}

body.dg-v20 .service-card:hover::after,
body.dg-v20 .contact-card:hover::after,
body.dg-v20 .feature:hover::after,
body.dg-v20 .info-box:hover::after,
body.dg-v20 .lead-card:hover::after,
body.dg-v20 .price-box:hover::after,
body.dg-v20 .video-card:hover::after,
body.dg-v20 .real-gallery-card:hover::after,
body.dg-v20 .hero-tile:hover::after,
body.dg-v20 .operator-box:hover::after,
body.dg-v20 .map-panel:hover::after {
  opacity: 1;
  transform: translateX(18%);
}

/* Icon inside cards: no zoom, only clean glow/lift */
body.dg-v20 .contact-card:hover .contact-icon,
body.dg-v20 .contact-card:hover > img,
body.dg-v20 .service-card:hover .icon-badge,
body.dg-v20 .icon-badge:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 34px rgba(8,121,242,.20) !important;
}

body.dg-v20 .contact-card:hover .contact-icon img,
body.dg-v20 .contact-card:hover > img,
body.dg-v20 .service-card:hover .icon-badge img {
  transform: none !important;
  opacity: 1 !important;
}

/* Floating phone button: keep alive but stop hover zoom */
body.dg-v20 .phone-float {
  animation: dgV20PhoneGlow 2.1s ease-in-out infinite !important;
}

body.dg-v20 .phone-float:hover {
  transform: translateY(-4px) !important;
}

@keyframes dgV20PhoneGlow {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(16,200,63,.34), 0 18px 42px rgba(16,200,63,.28);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(16,200,63,0), 0 22px 52px rgba(16,200,63,.34);
  }
}

/* Banner shine: soft controlled shine, no layout damage */
body.dg-v20 .banner-hero,
body.dg-v20 .dg-clean-banner,
body.dg-v20 .gallery-modern-hero,
body.dg-v20 .home-hero-v17 .hero-inner,
body.dg-v20 .page-title {
  position: relative;
  overflow: hidden;
}

body.dg-v20 .banner-hero::before,
body.dg-v20 .dg-clean-banner::before,
body.dg-v20 .gallery-modern-hero::before,
body.dg-v20 .home-hero-v17 .hero-inner::before,
body.dg-v20 .page-title::before {
  opacity: .48 !important;
}

body.dg-v20 .banner-hero::after,
body.dg-v20 .dg-clean-banner::after,
body.dg-v20 .gallery-modern-hero::after,
body.dg-v20 .home-hero-v17 .hero-inner::after,
body.dg-v20 .page-title::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  width: 95px;
  left: -140px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: rotate(17deg);
  animation: dgV20BannerShine 5.8s ease-in-out infinite;
}

@keyframes dgV20BannerShine {
  0%, 36% { left: -150px; opacity: 0; }
  44% { opacity: .65; }
  62% { left: calc(100% + 150px); opacity: 0; }
  100% { left: calc(100% + 150px); opacity: 0; }
}

/* Press/click feedback without zooming larger */
body.dg-v20 .btn:active,
body.dg-v20 .card-link:active,
body.dg-v20 button:active,
body.dg-v20 .service-card:active,
body.dg-v20 .contact-card:active,
body.dg-v20 .real-gallery-card:active {
  transform: translateY(-1px) !important;
  transition-duration: .12s !important;
}

/* Mobile: remove hover jumps completely; active is tiny and clean */
@media (hover: none) {
  body.dg-v20 .service-card:hover,
  body.dg-v20 .contact-card:hover,
  body.dg-v20 .feature:hover,
  body.dg-v20 .info-box:hover,
  body.dg-v20 .lead-card:hover,
  body.dg-v20 .price-box:hover,
  body.dg-v20 .faq:hover,
  body.dg-v20 .video-card:hover,
  body.dg-v20 .real-gallery-card:hover,
  body.dg-v20 .gallery-card:hover,
  body.dg-v20 .portfolio-card:hover,
  body.dg-v20 .hero-tile:hover,
  body.dg-v20 .operator-box:hover,
  body.dg-v20 .map-panel:hover,
  body.dg-v20 .btn:hover,
  body.dg-v20 .card-link:hover,
  body.dg-v20 button:hover {
    transform: none !important;
  }

  body.dg-v20 .btn:active,
  body.dg-v20 .card-link:active,
  body.dg-v20 button:active,
  body.dg-v20 .service-card:active,
  body.dg-v20 .contact-card:active,
  body.dg-v20 .real-gallery-card:active {
    transform: translateY(1px) !important;
  }
}

/* Mobile polish */
@media(max-width: 760px) {
  body.dg-v20 .real-gallery-grid,
  body.dg-v20 .portfolio-masonry {
    gap: 18px !important;
  }

  body.dg-v20 .service-card,
  body.dg-v20 .contact-card,
  body.dg-v20 .feature,
  body.dg-v20 .info-box,
  body.dg-v20 .lead-card,
  body.dg-v20 .price-box {
    border-radius: 24px !important;
  }

  body.dg-v20 .phone-float {
    animation-duration: 2.4s !important;
  }
}


/* =========================================================
   DoorGO v21 — TikTok + Electric lock videos + Mobile-first premium
   Keeps v20 no-zoom rule: hover does NOT enlarge elements.
   Adds cleaner glow/shine + unique mobile interface.
   ========================================================= */

body.dg-v21 {
  --dg-v21-blue:#0879f2;
  --dg-v21-cyan:#19d6ff;
  --dg-v21-dark:#001b2a;
  --dg-v21-glass:rgba(255,255,255,.82);
  --dg-v21-line:rgba(25,214,255,.28);
  --dg-v21-shadow:0 18px 50px rgba(8,121,242,.16);
}

/* Header socials with TikTok icon */
body.dg-v21 .socials,
body.dg-v21 .footer-socials {
  gap: 10px !important;
}

body.dg-v21 .socials a,
body.dg-v21 .footer-socials a {
  isolation: isolate;
  overflow: hidden !important;
}

body.dg-v21 .socials a img[src="tik-tok.png"],
body.dg-v21 .footer-socials a img[src="tik-tok.png"] {
  width: 19px !important;
  height: 19px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

body.dg-v21 .socials a:hover img[src="tik-tok.png"],
body.dg-v21 .footer-socials a:hover img[src="tik-tok.png"] {
  filter: brightness(0) invert(1) !important;
}

/* Electric lock info block on lock category page */
body.dg-v21 .electric-lock-info {
  max-width: 980px;
  margin: 22px auto 26px;
  padding: 26px;
  border-radius: 30px;
  border: 1px solid rgba(25,214,255,.34);
  background:
    radial-gradient(circle at 14% 16%, rgba(25,214,255,.20), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,250,255,.86));
  box-shadow: 0 22px 62px rgba(8,121,242,.14);
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 20px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

body.dg-v21 .electric-lock-info::after {
  content:"";
  position:absolute;
  inset:-60% auto -60% -120px;
  width:90px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform:rotate(18deg);
  animation: dgV21CleanShine 4.6s ease-in-out infinite;
}

body.dg-v21 .electric-lock-icon {
  width: 70px;
  height: 70px;
  border-radius: 23px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#ffffff,#e8fbff);
  border: 1px solid rgba(25,214,255,.32);
  box-shadow: 0 16px 36px rgba(8,121,242,.16);
}

body.dg-v21 .electric-lock-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

body.dg-v21 .electric-lock-info h2 {
  margin: 6px 0 8px;
  font-size: clamp(24px, 3vw, 38px);
  color: #062033;
}

body.dg-v21 .electric-lock-info p {
  margin: 0;
  line-height: 1.8;
  color: #456072;
}

/* Real video section in gallery */
body.dg-v21 .electric-video-section {
  background:
    radial-gradient(circle at 20% 0%, rgba(25,214,255,.16), transparent 30%),
    linear-gradient(180deg,#f4fdff,#ffffff);
  border-top: 1px solid rgba(25,214,255,.20);
}

body.dg-v21 .gallery-mini-text {
  max-width: 760px;
  margin: 10px 0 0;
  color: #5c7282;
  line-height: 1.7;
}

body.dg-v21 .electric-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}

body.dg-v21 .electric-video-card {
  border-radius: 30px;
  border: 1px solid rgba(25,214,255,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(237,251,255,.82));
  box-shadow: 0 18px 50px rgba(8,121,242,.13);
  overflow: hidden;
  position: relative;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease !important;
}

body.dg-v21 .electric-video-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 66px rgba(8,121,242,.20) !important;
  border-color: rgba(25,214,255,.50) !important;
}

body.dg-v21 .electric-video-card::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.22) 44%, transparent 60%);
  transform:translateX(-30%);
  transition:opacity .28s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

body.dg-v21 .electric-video-card:hover::after {
  opacity:1;
  transform:translateX(24%);
}

body.dg-v21 .electric-video-card video {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 520px;
  display: block;
  object-fit: cover;
  background: #00131d;
}

body.dg-v21 .electric-video-card div {
  padding: 18px 20px 20px;
  display: grid;
  gap: 5px;
}

body.dg-v21 .electric-video-card b {
  font-size: 17px;
  color: #062033;
}

body.dg-v21 .electric-video-card span {
  font-size: 14px;
  color: #648091;
}

/* General polish but still no zoom */
body.dg-v21 .service-card,
body.dg-v21 .contact-card,
body.dg-v21 .lead-card,
body.dg-v21 .price-box,
body.dg-v21 .info-box,
body.dg-v21 .real-gallery-card,
body.dg-v21 .hero-tile {
  border-color: rgba(25,214,255,.26) !important;
}

body.dg-v21 .service-card:hover,
body.dg-v21 .contact-card:hover,
body.dg-v21 .lead-card:hover,
body.dg-v21 .price-box:hover,
body.dg-v21 .info-box:hover,
body.dg-v21 .real-gallery-card:hover,
body.dg-v21 .hero-tile:hover {
  transform: translateY(-6px) !important;
}

/* More alive but cleaner shine */
@keyframes dgV21CleanShine {
  0%, 34% { left:-140px; opacity:0; }
  45% { opacity:.7; }
  63% { left:calc(100% + 140px); opacity:0; }
  100% { left:calc(100% + 140px); opacity:0; }
}

/* Mobile-first unique layout */
@media (max-width: 780px) {
  body.dg-v21 {
    background:
      radial-gradient(circle at top left, rgba(25,214,255,.14), transparent 30%),
      #f6fdff !important;
  }

  body.dg-v21 .site-header {
    position: sticky !important;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(18px);
    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid rgba(25,214,255,.22);
  }

  body.dg-v21 .header-inner {
    min-height: 66px !important;
    padding: 8px 14px !important;
    gap: 10px;
  }

  body.dg-v21 .brand img {
    height: 44px !important;
  }

  body.dg-v21 .brand span {
    font-size: 17px !important;
  }

  body.dg-v21 .socials {
    gap: 6px !important;
  }

  body.dg-v21 .socials a {
    width: 33px !important;
    height: 33px !important;
    border-radius: 13px !important;
  }

  body.dg-v21 .socials a img,
  body.dg-v21 .socials a img[src="tik-tok.png"] {
    width: 17px !important;
    height: 17px !important;
  }

  body.dg-v21 .menu-toggle {
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(8,121,242,.12) !important;
  }

  body.dg-v21 .nav.open,
  body.dg-v21 .nav {
    border-radius: 0 0 26px 26px !important;
  }

  body.dg-v21 .hero,
  body.dg-v21 .dg-clean-banner,
  body.dg-v21 .gallery-modern-hero,
  body.dg-v21 .home-hero-v17 .hero-inner {
    min-height: 310px !important;
    padding: 56px 18px 44px !important;
    background-size: 300px auto !important;
    border-bottom: 1px solid rgba(25,214,255,.24);
  }

  body.dg-v21 .dg-clean-banner h1,
  body.dg-v21 .home-hero-v17 h1,
  body.dg-v21 .gallery-modern-hero h1 {
    font-size: clamp(36px, 11vw, 54px) !important;
    line-height: .98 !important;
    letter-spacing: -.04em;
  }

  body.dg-v21 .hero-actions,
  body.dg-v21 .dg-banner-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    width: min(100%, 330px);
    margin-left: auto;
    margin-right: auto;
    gap: 10px !important;
  }

  body.dg-v21 .btn {
    min-height: 48px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    font-size: 14px !important;
  }

  body.dg-v21 .section {
    padding: 48px 0 !important;
  }

  body.dg-v21 .container {
    width: min(100% - 28px, 1180px) !important;
  }

  body.dg-v21 .service-grid,
  body.dg-v21 .contact-cards,
  body.dg-v21 .info-grid,
  body.dg-v21 .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.dg-v21 .service-card,
  body.dg-v21 .contact-card,
  body.dg-v21 .lead-card,
  body.dg-v21 .price-box,
  body.dg-v21 .electric-lock-info {
    border-radius: 26px !important;
  }

  body.dg-v21 .service-card:hover,
  body.dg-v21 .contact-card:hover,
  body.dg-v21 .lead-card:hover,
  body.dg-v21 .price-box:hover,
  body.dg-v21 .info-box:hover,
  body.dg-v21 .real-gallery-card:hover,
  body.dg-v21 .hero-tile:hover,
  body.dg-v21 .electric-video-card:hover {
    transform: none !important;
  }

  body.dg-v21 .service-card:active,
  body.dg-v21 .contact-card:active,
  body.dg-v21 .real-gallery-card:active,
  body.dg-v21 .electric-video-card:active {
    transform: translateY(1px) !important;
  }

  body.dg-v21 .electric-lock-info {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 22px !important;
  }

  body.dg-v21 .electric-lock-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  body.dg-v21 .electric-video-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.dg-v21 .electric-video-card video {
    aspect-ratio: 16 / 10;
    max-height: none;
    object-fit: cover;
  }

  body.dg-v21 .gallery-layout-head {
    gap: 12px !important;
    align-items: flex-start !important;
  }

  body.dg-v21 .gallery-layout-head h2 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.05 !important;
  }

  body.dg-v21 .gallery-mini-text {
    font-size: 14px;
  }

  body.dg-v21 .phone-float {
    width: 64px !important;
    height: 64px !important;
    left: 16px !important;
    bottom: 18px !important;
    border-width: 7px !important;
  }

  body.dg-v21 .footer-inner {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 28px !important;
  }

  body.dg-v21 .footer-socials a {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 420px) {
  body.dg-v21 .header-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.dg-v21 .brand span {
    display: none;
  }

  body.dg-v21 .socials a {
    width: 31px !important;
    height: 31px !important;
  }

  body.dg-v21 .dg-clean-banner h1,
  body.dg-v21 .home-hero-v17 h1,
  body.dg-v21 .gallery-modern-hero h1 {
    font-size: clamp(32px, 12vw, 46px) !important;
  }

  body.dg-v21 .electric-video-card video {
    aspect-ratio: 9 / 13;
  }
}


/* =========================================================
   DoorGO v22 — clean mobile + remove guarantee/electric block
   ========================================================= */

body.dg-v22 .electric-lock-info {
  display: none !important;
}

/* remove empty-ish awkward gaps after deleting blocks */
body.dg-v22 .content {
  gap: 18px !important;
}

body.dg-v22 .lead-card {
  margin-bottom: 18px !important;
}

body.dg-v22 .price-box {
  margin-top: 12px !important;
}

/* More refined desktop spacing without zoom hover */
body.dg-v22 .lead-card,
body.dg-v22 .price-box,
body.dg-v22 .text-section,
body.dg-v22 .info-box,
body.dg-v22 .contact-card,
body.dg-v22 .service-card {
  box-shadow: 0 14px 42px rgba(8,121,242,.11) !important;
}

body.dg-v22 .lead-card:hover,
body.dg-v22 .price-box:hover,
body.dg-v22 .info-box:hover,
body.dg-v22 .contact-card:hover,
body.dg-v22 .service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 56px rgba(8,121,242,.16) !important;
}

/* Better mobile: short, clean, app-like */
@media (max-width: 780px) {
  html, body {
    overflow-x: hidden !important;
  }

  body.dg-v22 {
    background:
      radial-gradient(circle at 18% -6%, rgba(25,214,255,.18), transparent 34%),
      linear-gradient(180deg,#f5fdff 0%,#ffffff 55%,#eefbff 100%) !important;
  }

  body.dg-v22 .top-line {
    height: 3px !important;
  }

  body.dg-v22 .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(18px) saturate(1.25);
    border-bottom: 1px solid rgba(25,214,255,.24) !important;
    box-shadow: 0 10px 28px rgba(0,40,70,.06) !important;
  }

  body.dg-v22 .header-inner {
    min-height: 62px !important;
    padding: 7px 12px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.dg-v22 .brand {
    min-width: 0 !important;
  }

  body.dg-v22 .brand img {
    height: 42px !important;
    width: auto !important;
  }

  body.dg-v22 .brand span {
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  body.dg-v22 .menu-toggle {
    order: 3 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    font-size: 19px !important;
    background: linear-gradient(135deg,#effcff,#ffffff) !important;
    border: 1px solid rgba(25,214,255,.35) !important;
    box-shadow: 0 10px 26px rgba(8,121,242,.12) !important;
  }

  body.dg-v22 .socials {
    justify-self: end !important;
    display: flex !important;
    gap: 5px !important;
  }

  body.dg-v22 .socials a {
    width: 30px !important;
    height: 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(8,121,242,.10) !important;
  }

  body.dg-v22 .socials img,
  body.dg-v22 .socials a img[src="tik-tok.png"] {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
  }

  body.dg-v22 .nav {
    position: fixed !important;
    top: 65px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(25,214,255,.28) !important;
    box-shadow: 0 22px 70px rgba(0,47,80,.18) !important;
    padding: 12px !important;
  }

  body.dg-v22 .nav a,
  body.dg-v22 .dropdown-trigger {
    min-height: 44px !important;
    border-radius: 15px !important;
    padding: 12px 14px !important;
    background: rgba(241,252,255,.8) !important;
    margin: 4px 0 !important;
  }

  body.dg-v22 .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 0 8px !important;
  }

  body.dg-v22 .dg-clean-banner,
  body.dg-v22 .gallery-modern-hero,
  body.dg-v22 .home-hero-v17 .hero-inner {
    min-height: 245px !important;
    padding: 38px 16px 34px !important;
    background-size: 250px auto !important;
    background-position: center !important;
  }

  body.dg-v22 .dg-clean-banner-inner,
  body.dg-v22 .hero-inner {
    width: min(100%, 420px) !important;
    margin: 0 auto !important;
  }

  body.dg-v22 .dg-clean-banner h1,
  body.dg-v22 .home-hero-v17 h1,
  body.dg-v22 .gallery-modern-hero h1 {
    font-size: clamp(30px, 10vw, 44px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    margin-bottom: 14px !important;
  }

  body.dg-v22 .hero-sub,
  body.dg-v22 .dg-clean-banner p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body.dg-v22 .hero-actions,
  body.dg-v22 .dg-banner-actions {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    max-width: 310px !important;
    margin: 16px auto 0 !important;
  }

  body.dg-v22 .btn {
    min-height: 45px !important;
    padding: 11px 18px !important;
    font-size: 13.5px !important;
    border-radius: 999px !important;
  }

  body.dg-v22 .section {
    padding: 36px 0 !important;
  }

  body.dg-v22 .container,
  body.dg-v22 .content {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dg-v22 .service-top {
    padding: 24px 0 10px !important;
  }

  body.dg-v22 .service-photo,
  body.dg-v22 .service-photo-wrap {
    width: calc(100% - 24px) !important;
    max-width: 420px !important;
    margin: 20px auto 8px !important;
    border-radius: 24px !important;
  }

  body.dg-v22 .service-photo img,
  body.dg-v22 .service-photo-img {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  body.dg-v22 .lead-card {
    padding: 24px 20px !important;
    border-radius: 26px !important;
    margin: 12px auto 14px !important;
  }

  body.dg-v22 .lead-card h1 {
    font-size: clamp(25px, 7vw, 34px) !important;
    line-height: 1.18 !important;
    margin: 12px 0 !important;
  }

  body.dg-v22 .lead-card p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  body.dg-v22 .price-box {
    padding: 18px 18px !important;
    border-radius: 22px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  body.dg-v22 .text-section h2 {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.1 !important;
    margin-top: 26px !important;
  }

  body.dg-v22 .info-grid,
  body.dg-v22 .service-grid,
  body.dg-v22 .contact-cards,
  body.dg-v22 .feature-grid,
  body.dg-v22 .electric-video-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v22 .info-box,
  body.dg-v22 .service-card,
  body.dg-v22 .contact-card,
  body.dg-v22 .electric-video-card {
    border-radius: 24px !important;
  }

  body.dg-v22 .electric-video-card video {
    aspect-ratio: 16 / 10 !important;
    max-height: none !important;
  }

  body.dg-v22 .real-gallery-grid,
  body.dg-v22 .portfolio-masonry {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v22 .real-gallery-card,
  body.dg-v22 .portfolio-masonry .real-gallery-card {
    height: 265px !important;
    min-height: 265px !important;
    border-radius: 24px !important;
  }

  body.dg-v22 .phone-float {
    width: 60px !important;
    height: 60px !important;
    left: 14px !important;
    bottom: 14px !important;
    border-width: 7px !important;
  }

  body.dg-v22 .phone-float img {
    width: 25px !important;
    height: 25px !important;
  }

  body.dg-v22 .footer {
    padding-bottom: 84px !important;
  }

  body.dg-v22 .footer-inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.dg-v22 .footer-logo {
    width: 88px !important;
  }
}

@media (max-width: 430px) {
  body.dg-v22 .brand span {
    display: none !important;
  }

  body.dg-v22 .header-inner {
    grid-template-columns: auto 1fr auto !important;
  }

  body.dg-v22 .socials a {
    width: 29px !important;
    height: 29px !important;
  }

  body.dg-v22 .dg-clean-banner,
  body.dg-v22 .gallery-modern-hero,
  body.dg-v22 .home-hero-v17 .hero-inner {
    min-height: 220px !important;
    background-size: 220px auto !important;
  }

  body.dg-v22 .lead-card {
    padding: 22px 18px !important;
  }
}


/* =========================================================
   DoorGO v23 — REAL MOBILE REBUILD
   Fixes the bad phone layout: cleaner header, real dropdown sheet,
   no huge empty menu circle, no broken service cards, better spacing.
   ========================================================= */

body.dg-v23 .faq.dg-empty-faq {
  display: none !important;
}

body.dg-v23 .cta-band {
  margin-bottom: 54px !important;
}

@media (max-width: 820px) {
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  body.dg-v23 {
    background:
      radial-gradient(circle at 50% -8%, rgba(25,214,255,.20), transparent 34%),
      linear-gradient(180deg,#f6fdff 0%, #ffffff 45%, #eefbff 100%) !important;
  }

  body.dg-v23 .top-line {
    height: 3px !important;
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 10001 !important;
  }

  body.dg-v23 .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(18px) saturate(1.25) !important;
    border-bottom: 1px solid rgba(25,214,255,.25) !important;
    box-shadow: 0 12px 34px rgba(0,35,60,.08) !important;
  }

  body.dg-v23 .header-inner {
    width: 100% !important;
    min-height: 64px !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 9px !important;
    align-items: center !important;
  }

  body.dg-v23 .brand {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  body.dg-v23 .brand img {
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  body.dg-v23 .brand span {
    font-size: 17px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  body.dg-v23 .socials {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin-right: 46px !important;
  }

  body.dg-v23 .socials a {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(180deg,#ffffff,#effcff) !important;
    border: 1px solid rgba(25,214,255,.35) !important;
    box-shadow: 0 8px 20px rgba(8,121,242,.11) !important;
    overflow: hidden !important;
  }

  body.dg-v23 .socials img,
  body.dg-v23 .socials a img[src="tik-tok.png"] {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    display: block !important;
  }

  body.dg-v23 .menu-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 13px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(25,214,255,.38) !important;
    background: linear-gradient(135deg,#eafdff,#ffffff) !important;
    box-shadow: 0 10px 26px rgba(8,121,242,.12) !important;
    color: transparent !important;
    font-size: 0 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 10003 !important;
  }

  body.dg-v23 .menu-toggle::before,
  body.dg-v23 .menu-toggle::after {
    content: "" !important;
    position: absolute !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #062033 !important;
    transition: transform .24s ease, top .24s ease !important;
  }

  body.dg-v23 .menu-toggle::before { top: 13px !important; }
  body.dg-v23 .menu-toggle::after { top: 22px !important; }

  body.dg-v23 .menu-toggle.active::before {
    top: 18px !important;
    transform: rotate(45deg) !important;
  }

  body.dg-v23 .menu-toggle.active::after {
    top: 18px !important;
    transform: rotate(-45deg) !important;
  }

  body.dg-v23 .nav {
    position: fixed !important;
    top: 70px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at top right, rgba(25,214,255,.18), transparent 34%),
      rgba(255,255,255,.97) !important;
    border: 1px solid rgba(25,214,255,.32) !important;
    box-shadow: 0 24px 80px rgba(0,35,60,.20) !important;
    transform: translateY(-8px) !important;
    opacity: 0 !important;
    transition: opacity .22s ease, transform .22s ease !important;
    z-index: 10002 !important;
  }

  body.dg-v23 .nav.open {
    display: flex !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  body.dg-v23 .nav a,
  body.dg-v23 .dropdown-trigger {
    min-height: 46px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    color: #062033 !important;
    background: rgba(239,252,255,.78) !important;
    border: 1px solid rgba(25,214,255,.24) !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: none !important;
  }

  body.dg-v23 .nav a.active {
    background: linear-gradient(135deg,#12cfff,#0879f2) !important;
    color: #fff !important;
  }

  body.dg-v23 .dropdown,
  body.dg-v23 .dropdown-menu {
    width: 100% !important;
  }

  body.dg-v23 .dropdown-menu {
    position: static !important;
    display: grid !important;
    gap: 7px !important;
    padding: 8px 0 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.dg-v23 .dropdown-menu a {
    min-height: 40px !important;
    font-size: 13px !important;
    background: rgba(255,255,255,.76) !important;
  }

  body.dg-v23 main {
    position: relative !important;
    z-index: 1 !important;
  }

  body.dg-v23 .hero,
  body.dg-v23 .dg-clean-banner,
  body.dg-v23 .gallery-modern-hero,
  body.dg-v23 .home-hero-v17 .hero-inner {
    min-height: 230px !important;
    padding: 36px 16px 32px !important;
    background-size: 235px auto !important;
    background-position: center !important;
  }

  body.dg-v23 .dg-clean-banner-inner,
  body.dg-v23 .hero-inner {
    width: min(100%, 390px) !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  body.dg-v23 .eyebrow {
    font-size: 12px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
  }

  body.dg-v23 .dg-clean-banner h1,
  body.dg-v23 .home-hero-v17 h1,
  body.dg-v23 .gallery-modern-hero h1 {
    font-size: clamp(30px,10vw,43px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    margin: 14px 0 12px !important;
  }

  body.dg-v23 .hero-actions,
  body.dg-v23 .dg-banner-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: min(100%,300px) !important;
    margin: 15px auto 0 !important;
  }

  body.dg-v23 .btn {
    min-height: 45px !important;
    padding: 11px 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }

  body.dg-v23 .home-service-showcase {
    padding: 22px 0 !important;
    overflow: hidden !important;
  }

  body.dg-v23 .home-service-showcase .hero-grid {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 14px 14px !important;
    margin: 0 !important;
  }

  body.dg-v23 .home-service-showcase .hero-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v23 .hero-tile {
    flex: 0 0 76vw !important;
    max-width: 330px !important;
    min-height: 285px !important;
    scroll-snap-align: center !important;
    border-radius: 26px !important;
  }

  body.dg-v23 .section {
    padding: 34px 0 !important;
  }

  body.dg-v23 .container,
  body.dg-v23 .content {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dg-v23 .service-grid,
  body.dg-v23 .contact-cards,
  body.dg-v23 .info-grid,
  body.dg-v23 .feature-grid,
  body.dg-v23 .electric-video-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v23 .service-card,
  body.dg-v23 .contact-card,
  body.dg-v23 .info-box,
  body.dg-v23 .lead-card,
  body.dg-v23 .price-box,
  body.dg-v23 .text-section,
  body.dg-v23 .electric-video-card {
    border-radius: 24px !important;
  }

  body.dg-v23 .service-card .card-img {
    height: 190px !important;
  }

  body.dg-v23 .service-card .card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.dg-v23 .service-card .card-body {
    padding: 30px 20px 22px !important;
  }

  body.dg-v23 .service-card h3 {
    font-size: 23px !important;
    line-height: 1.15 !important;
  }

  body.dg-v23 .service-top {
    padding: 22px 0 4px !important;
  }

  body.dg-v23 .service-photo,
  body.dg-v23 .service-photo-wrap {
    width: calc(100% - 24px) !important;
    max-width: 430px !important;
    margin: 18px auto 6px !important;
    border-radius: 24px !important;
  }

  body.dg-v23 .service-photo img,
  body.dg-v23 .service-photo-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  body.dg-v23 .lead-card {
    padding: 22px 18px !important;
    margin-top: 12px !important;
  }

  body.dg-v23 .lead-card h1 {
    font-size: clamp(25px,7vw,34px) !important;
    line-height: 1.18 !important;
    margin: 12px 0 !important;
  }

  body.dg-v23 .lead-card p,
  body.dg-v23 p {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  body.dg-v23 .price-box {
    padding: 16px 17px !important;
    line-height: 1.65 !important;
  }

  body.dg-v23 .text-section h2 {
    font-size: clamp(24px,7.5vw,34px) !important;
    line-height: 1.12 !important;
    margin: 26px 0 16px !important;
  }

  body.dg-v23 .info-box {
    padding: 18px !important;
  }

  body.dg-v23 .faq {
    border-radius: 18px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }

  body.dg-v23 .faq h3 {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  body.dg-v23 .faq p {
    padding: 0 16px 16px !important;
  }

  body.dg-v23 .cta-band {
    margin: 28px auto 44px !important;
    padding: 24px 20px !important;
    border-radius: 28px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: left !important;
  }

  body.dg-v23 .cta-band h2 {
    font-size: clamp(27px,8vw,38px) !important;
    line-height: 1.05 !important;
  }

  body.dg-v23 .real-gallery-grid,
  body.dg-v23 .portfolio-masonry {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v23 .real-gallery-card,
  body.dg-v23 .portfolio-masonry .real-gallery-card {
    height: 265px !important;
    min-height: 265px !important;
    border-radius: 24px !important;
  }

  body.dg-v23 .electric-video-card video {
    aspect-ratio: 16 / 10 !important;
    max-height: none !important;
  }

  body.dg-v23 .phone-float {
    width: 60px !important;
    height: 60px !important;
    left: 14px !important;
    bottom: 14px !important;
    border-width: 7px !important;
    z-index: 9999 !important;
  }

  body.dg-v23 .phone-float img {
    width: 25px !important;
    height: 25px !important;
  }

  body.dg-v23 .footer {
    padding-bottom: 86px !important;
  }

  body.dg-v23 .footer-inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: left !important;
  }

  body.dg-v23 .footer-logo {
    width: 88px !important;
  }
}

@media (max-width: 430px) {
  body.dg-v23 .brand span {
    display: none !important;
  }

  body.dg-v23 .socials {
    margin-right: 44px !important;
    gap: 4px !important;
  }

  body.dg-v23 .socials a {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
  }

  body.dg-v23 .socials img,
  body.dg-v23 .socials a img[src="tik-tok.png"] {
    width: 15px !important;
    height: 15px !important;
  }

  body.dg-v23 .dg-clean-banner,
  body.dg-v23 .gallery-modern-hero,
  body.dg-v23 .home-hero-v17 .hero-inner {
    min-height: 215px !important;
    background-size: 215px auto !important;
  }

  body.dg-v23 .hero-tile {
    flex-basis: 82vw !important;
  }
}


/* =========================================================
   DoorGO v24 — Premium mobile redesign
   Goal: mobile can be different from desktop, clean + premium.
   Fixes ugly hamburger bubble, broken nav sheet, huge cramped cards.
   ========================================================= */

body.dg-v24 {
  --m-blue: #088df6;
  --m-cyan: #16d9ff;
  --m-ink: #061827;
  --m-muted: #607789;
  --m-card: rgba(255,255,255,.92);
  --m-line: rgba(22,217,255,.28);
  --m-shadow: 0 18px 55px rgba(0,91,150,.16);
}

/* desktop small polish */
body.dg-v24 .site-header {
  box-shadow: 0 10px 30px rgba(0,40,70,.06);
}

body.dg-v24 .service-card:hover,
body.dg-v24 .contact-card:hover,
body.dg-v24 .real-gallery-card:hover,
body.dg-v24 .electric-video-card:hover {
  transform: translateY(-4px) !important;
}

/* ===== REAL MOBILE UI ===== */
@media (max-width: 820px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.dg-v24 {
    background:
      radial-gradient(circle at 50% -8%, rgba(22,217,255,.20), transparent 36%),
      linear-gradient(180deg, #f5fdff 0%, #ffffff 50%, #eefbff 100%) !important;
    color: var(--m-ink) !important;
  }

  body.dg-v24 .top-line {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    z-index: 30000 !important;
    background: linear-gradient(90deg, var(--m-cyan), var(--m-blue), var(--m-cyan)) !important;
  }

  /* Header: premium compact bar */
  body.dg-v24 .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 29999 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(20px) saturate(1.25) !important;
    border-bottom: 1px solid rgba(22,217,255,.24) !important;
    box-shadow: 0 12px 32px rgba(0,48,86,.08) !important;
  }

  body.dg-v24 .header-inner {
    width: 100% !important;
    min-height: 66px !important;
    padding: 8px 14px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body.dg-v24 .brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  body.dg-v24 .brand img {
    width: auto !important;
    height: 43px !important;
    object-fit: contain !important;
  }

  body.dg-v24 .brand span {
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* On phone: keep only social mini-row, then menu button. No giant empty circle. */
  body.dg-v24 .socials {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin: 0 48px 0 0 !important;
    max-width: 140px !important;
    overflow: visible !important;
  }

  body.dg-v24 .socials a {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(22,217,255,.35) !important;
    background: linear-gradient(180deg, #ffffff, #edfbff) !important;
    box-shadow: 0 8px 20px rgba(8,121,242,.10) !important;
    transform: none !important;
  }

  body.dg-v24 .socials a img,
  body.dg-v24 .socials a img[src="tik-tok.png"] {
    width: 15px !important;
    height: 15px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
  }

  body.dg-v24 .socials a:hover {
    transform: none !important;
  }

  body.dg-v24 .menu-toggle {
    position: absolute !important;
    top: 13px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(22,217,255,.36) !important;
    background: linear-gradient(135deg, #effcff, #ffffff) !important;
    box-shadow: 0 10px 24px rgba(0,110,180,.13) !important;
    color: transparent !important;
    font-size: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    z-index: 31000 !important;
    transform: none !important;
  }

  body.dg-v24 .menu-toggle::before,
  body.dg-v24 .menu-toggle::after {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #062033 !important;
    transition: transform .22s ease, top .22s ease, opacity .22s ease !important;
  }

  body.dg-v24 .menu-toggle::before { top: 14px !important; }
  body.dg-v24 .menu-toggle::after { top: 24px !important; }

  body.dg-v24 .menu-toggle span,
  body.dg-v24 .menu-toggle i {
    display: none !important;
  }

  body.dg-v24 .menu-toggle.active::before {
    top: 19px !important;
    transform: rotate(45deg) !important;
  }

  body.dg-v24 .menu-toggle.active::after {
    top: 19px !important;
    transform: rotate(-45deg) !important;
  }

  /* Premium nav drawer: not covering hero weirdly */
  body.dg-v24 .nav {
    position: fixed !important;
    top: 72px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-height: calc(100dvh - 94px) !important;
    overflow-y: auto !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at top right, rgba(22,217,255,.20), transparent 34%),
      rgba(255,255,255,.97) !important;
    border: 1px solid rgba(22,217,255,.32) !important;
    box-shadow: 0 28px 90px rgba(0,39,67,.22) !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(.985) !important;
    transition: opacity .22s ease, transform .22s ease !important;
    z-index: 30999 !important;
  }

  body.dg-v24 .nav.open {
    display: flex !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }

  body.dg-v24 .nav a,
  body.dg-v24 .dropdown-trigger {
    min-height: 46px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(240,252,255,.86) !important;
    border: 1px solid rgba(22,217,255,.22) !important;
    color: var(--m-ink) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.dg-v24 .nav a.active,
  body.dg-v24 .dropdown > .dropdown-trigger {
    background: linear-gradient(135deg, #15ccff, #0879f2) !important;
    color: #fff !important;
    border-color: transparent !important;
  }

  body.dg-v24 .dropdown {
    width: 100% !important;
    display: grid !important;
    gap: 8px !important;
  }

  body.dg-v24 .dropdown-menu {
    position: static !important;
    display: grid !important;
    gap: 7px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.dg-v24 .dropdown-menu a {
    min-height: 41px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    background: rgba(255,255,255,.76) !important;
    color: var(--m-ink) !important;
    border: 1px solid rgba(22,217,255,.20) !important;
  }

  /* Compact hero/banner for mobile */
  body.dg-v24 .hero,
  body.dg-v24 .dg-clean-banner,
  body.dg-v24 .gallery-modern-hero,
  body.dg-v24 .home-hero-v17 .hero-inner {
    min-height: 220px !important;
    padding: 34px 16px 30px !important;
    background-size: 220px auto !important;
    background-position: center !important;
    border-bottom-left-radius: 34px !important;
    border-bottom-right-radius: 34px !important;
    overflow: hidden !important;
  }

  body.dg-v24 .dg-clean-banner-inner,
  body.dg-v24 .hero-inner {
    width: min(100%, 390px) !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  body.dg-v24 .dg-clean-banner h1,
  body.dg-v24 .home-hero-v17 h1,
  body.dg-v24 .gallery-modern-hero h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    margin: 12px 0 12px !important;
  }

  body.dg-v24 .hero-sub {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 310px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dg-v24 .hero-actions,
  body.dg-v24 .dg-banner-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: min(100%, 300px) !important;
    margin: 16px auto 0 !important;
  }

  body.dg-v24 .btn {
    min-height: 44px !important;
    padding: 11px 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    transform: none !important;
  }

  /* Service list mobile: premium cards, no ugly stretching */
  body.dg-v24 .section {
    padding: 34px 0 !important;
  }

  body.dg-v24 .container,
  body.dg-v24 .content {
    width: calc(100% - 24px) !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dg-v24 .service-grid,
  body.dg-v24 .contact-cards,
  body.dg-v24 .info-grid,
  body.dg-v24 .feature-grid,
  body.dg-v24 .electric-video-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.dg-v24 .service-card {
    border-radius: 28px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: var(--m-shadow) !important;
    border: 1px solid rgba(22,217,255,.28) !important;
    transform: none !important;
  }

  body.dg-v24 .service-card:hover {
    transform: none !important;
  }

  body.dg-v24 .service-card a {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    color: inherit !important;
  }

  body.dg-v24 .service-card .card-img {
    height: 178px !important;
    overflow: hidden !important;
  }

  body.dg-v24 .service-card .card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.dg-v24 .service-card .icon-badge {
    width: 62px !important;
    height: 62px !important;
    border-radius: 22px !important;
    margin: -31px 0 0 18px !important;
    position: relative !important;
    z-index: 5 !important;
    background: #fff !important;
    border: 1px solid rgba(22,217,255,.34) !important;
    box-shadow: 0 12px 30px rgba(8,121,242,.14) !important;
    transform: none !important;
  }

  body.dg-v24 .service-card .icon-badge img {
    width: 31px !important;
    height: 31px !important;
    object-fit: contain !important;
  }

  body.dg-v24 .service-card .card-body {
    padding: 18px 20px 22px !important;
  }

  body.dg-v24 .service-card h3 {
    font-size: 23px !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
    letter-spacing: -.02em !important;
  }

  body.dg-v24 .service-card p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--m-muted) !important;
    margin: 0 0 18px !important;
  }

  body.dg-v24 .card-link {
    min-height: 42px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, rgba(22,217,255,.16), rgba(8,121,242,.10)) !important;
    color: #0879f2 !important;
    font-weight: 900 !important;
    transform: none !important;
  }

  /* Home cards become mobile carousel */
  body.dg-v24 .home-service-showcase {
    padding: 22px 0 !important;
    overflow: hidden !important;
  }

  body.dg-v24 .home-service-showcase .hero-grid {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 14px 16px !important;
    margin: 0 !important;
  }

  body.dg-v24 .home-service-showcase .hero-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v24 .hero-tile {
    flex: 0 0 78vw !important;
    max-width: 330px !important;
    min-height: 280px !important;
    border-radius: 28px !important;
    scroll-snap-align: center !important;
    transform: none !important;
  }

  /* Service detail pages */
  body.dg-v24 .service-top {
    padding: 20px 0 2px !important;
  }

  body.dg-v24 .service-photo,
  body.dg-v24 .service-photo-wrap {
    width: calc(100% - 24px) !important;
    max-width: 460px !important;
    margin: 18px auto 4px !important;
    border-radius: 26px !important;
  }

  body.dg-v24 .service-photo img,
  body.dg-v24 .service-photo-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }

  body.dg-v24 .lead-card,
  body.dg-v24 .price-box,
  body.dg-v24 .text-section,
  body.dg-v24 .info-box,
  body.dg-v24 .contact-card,
  body.dg-v24 .electric-video-card {
    border-radius: 26px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(22,217,255,.25) !important;
    box-shadow: 0 14px 42px rgba(0,91,150,.11) !important;
    transform: none !important;
  }

  body.dg-v24 .lead-card {
    padding: 22px 18px !important;
    margin: 12px auto 14px !important;
  }

  body.dg-v24 .lead-card h1 {
    font-size: clamp(25px, 7vw, 34px) !important;
    line-height: 1.17 !important;
    margin: 12px 0 !important;
  }

  body.dg-v24 .lead-card p,
  body.dg-v24 p {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  body.dg-v24 .price-box {
    padding: 16px 17px !important;
    font-size: 14px !important;
  }

  body.dg-v24 .text-section {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.dg-v24 .text-section h2 {
    font-size: clamp(24px, 7.2vw, 34px) !important;
    line-height: 1.1 !important;
    margin: 26px 0 16px !important;
  }

  body.dg-v24 .pill-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body.dg-v24 .pill-list span {
    font-size: 12px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
  }

  body.dg-v24 .faq {
    border-radius: 18px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
  }

  body.dg-v24 .faq h3,
  body.dg-v24 .faq summary {
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  body.dg-v24 .cta-band {
    margin: 28px auto 44px !important;
    padding: 24px 20px !important;
    border-radius: 28px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: left !important;
  }

  body.dg-v24 .cta-band h2 {
    font-size: clamp(27px, 8vw, 38px) !important;
    line-height: 1.04 !important;
  }

  /* Gallery/videos */
  body.dg-v24 .real-gallery-grid,
  body.dg-v24 .portfolio-masonry {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v24 .real-gallery-card,
  body.dg-v24 .portfolio-masonry .real-gallery-card {
    height: 270px !important;
    min-height: 270px !important;
    border-radius: 26px !important;
  }

  body.dg-v24 .electric-video-card video {
    aspect-ratio: 16 / 10 !important;
    max-height: none !important;
  }

  /* Contact */
  body.dg-v24 .contact-card {
    padding: 20px !important;
  }

  body.dg-v24 .contact-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 20px !important;
  }

  /* Floating call */
  body.dg-v24 .phone-float {
    width: 60px !important;
    height: 60px !important;
    left: 14px !important;
    bottom: 14px !important;
    border-width: 7px !important;
    z-index: 30000 !important;
  }

  body.dg-v24 .phone-float img {
    width: 25px !important;
    height: 25px !important;
  }

  /* Footer */
  body.dg-v24 .footer {
    padding-bottom: 86px !important;
  }

  body.dg-v24 .footer-inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: left !important;
  }

  body.dg-v24 .footer-logo {
    width: 88px !important;
  }
}

@media (max-width: 430px) {
  body.dg-v24 .brand span {
    display: none !important;
  }

  body.dg-v24 .socials {
    margin-right: 47px !important;
    gap: 4px !important;
  }

  body.dg-v24 .socials a {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 11px !important;
  }

  body.dg-v24 .socials img,
  body.dg-v24 .socials a img[src="tik-tok.png"] {
    width: 14px !important;
    height: 14px !important;
  }

  body.dg-v24 .hero,
  body.dg-v24 .dg-clean-banner,
  body.dg-v24 .gallery-modern-hero,
  body.dg-v24 .home-hero-v17 .hero-inner {
    min-height: 210px !important;
    background-size: 205px auto !important;
  }

  body.dg-v24 .hero-tile {
    flex-basis: 82vw !important;
  }
}


/* =========================================================
   DoorGO v25 — iOS Premium Mobile App Layout
   Mobile intentionally differs from desktop: bottom tabs,
   app cards, compact hero, horizontal app sections.
   ========================================================= */

body.dg-v25 .mobile-app-tabbar,
body.dg-v25 .mobile-app-quickstrip {
  display: none;
}

@media (max-width: 820px) {
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
  }

  body.dg-v25 {
    --ios-bg: #f2fbff;
    --ios-card: rgba(255,255,255,.86);
    --ios-line: rgba(10,176,235,.22);
    --ios-blue: #0879f2;
    --ios-cyan: #18d5ff;
    --ios-ink: #061827;
    --ios-muted: #617789;
    --ios-shadow: 0 18px 45px rgba(0,72,120,.12);
    background:
      radial-gradient(circle at 50% -10%, rgba(24,213,255,.24), transparent 36%),
      linear-gradient(180deg,#f4fdff 0%,#ffffff 46%,#edfaff 100%) !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  body.dg-v25 .top-line {
    display: none !important;
  }

  /* APP HEADER */
  body.dg-v25 .site-header {
    position: sticky !important;
    top: 8px !important;
    z-index: 5000 !important;
    width: calc(100% - 18px) !important;
    margin: 8px auto 0 !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.78) !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    border: 1px solid rgba(24,213,255,.26) !important;
    box-shadow: 0 16px 42px rgba(0,58,96,.12) !important;
    overflow: visible !important;
  }

  body.dg-v25 .header-inner {
    width: 100% !important;
    min-height: 64px !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 9px !important;
  }

  body.dg-v25 .brand img {
    height: 42px !important;
    width: auto !important;
  }

  body.dg-v25 .brand span {
    display: none !important;
  }

  body.dg-v25 .socials {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-right: 46px !important;
    max-width: 144px !important;
  }

  body.dg-v25 .socials a {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(24,213,255,.28) !important;
    background: rgba(255,255,255,.76) !important;
    box-shadow: 0 8px 22px rgba(0,90,150,.08) !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }

  body.dg-v25 .socials img,
  body.dg-v25 .socials a img[src="tik-tok.png"] {
    width: 15px !important;
    height: 15px !important;
    object-fit: contain !important;
    opacity: 1 !important;
  }

  body.dg-v25 .menu-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(24,213,255,.30) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 10px 24px rgba(0,90,150,.10) !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 5010 !important;
    transform: none !important;
  }

  body.dg-v25 .menu-toggle::before,
  body.dg-v25 .menu-toggle::after {
    content: "" !important;
    position: absolute !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: var(--ios-ink) !important;
    transition: top .22s ease, transform .22s ease !important;
  }

  body.dg-v25 .menu-toggle::before { top: 14px !important; }
  body.dg-v25 .menu-toggle::after { top: 24px !important; }

  body.dg-v25 .menu-toggle.active::before {
    top: 19px !important;
    transform: rotate(45deg) !important;
  }

  body.dg-v25 .menu-toggle.active::after {
    top: 19px !important;
    transform: rotate(-45deg) !important;
  }

  /* APP DRAWER */
  body.dg-v25 .nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: 84px !important;
    width: auto !important;
    max-height: calc(100dvh - 190px) !important;
    overflow-y: auto !important;
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at top right, rgba(24,213,255,.18), transparent 38%),
      rgba(255,255,255,.95) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    border: 1px solid rgba(24,213,255,.28) !important;
    box-shadow: 0 28px 95px rgba(0,42,74,.22) !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(.985) !important;
    transition: opacity .2s ease, transform .2s ease !important;
    z-index: 5009 !important;
  }

  body.dg-v25 .nav.open {
    display: flex !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }

  body.dg-v25 .nav a,
  body.dg-v25 .dropdown-trigger {
    min-height: 45px !important;
    padding: 12px 14px !important;
    border-radius: 17px !important;
    background: rgba(244,252,255,.82) !important;
    border: 1px solid rgba(24,213,255,.20) !important;
    color: var(--ios-ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    transform: none !important;
  }

  body.dg-v25 .nav a.active,
  body.dg-v25 .dropdown > .dropdown-trigger {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg,var(--ios-cyan),var(--ios-blue)) !important;
  }

  body.dg-v25 .dropdown,
  body.dg-v25 .dropdown-menu {
    width: 100% !important;
  }

  body.dg-v25 .dropdown-menu {
    position: static !important;
    display: grid !important;
    gap: 7px !important;
    padding: 0 0 0 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.dg-v25 .dropdown-menu a {
    min-height: 40px !important;
    font-size: 12.5px !important;
    color: var(--ios-ink) !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(24,213,255,.18) !important;
  }

  /* QUICK STRIP */
  body.dg-v25 .mobile-app-quickstrip {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 8px;
    width: calc(100% - 18px);
    margin: 10px auto 0;
    position: relative;
    z-index: 20;
  }

  body.dg-v25 .mobile-app-quickstrip a {
    min-height: 52px;
    border-radius: 20px;
    padding: 8px 9px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(24,213,255,.22);
    box-shadow: 0 10px 28px rgba(0,75,125,.08);
    color: var(--ios-ink);
    text-decoration: none;
    transform: none !important;
  }

  body.dg-v25 .mobile-app-quickstrip span {
    font-size: 15px;
    line-height: 1;
  }

  body.dg-v25 .mobile-app-quickstrip b {
    font-size: 11.5px;
    white-space: nowrap;
  }

  /* HERO AS APP CARD */
  body.dg-v25 .hero,
  body.dg-v25 .dg-clean-banner,
  body.dg-v25 .gallery-modern-hero,
  body.dg-v25 .home-hero-v17 .hero-inner {
    width: calc(100% - 18px) !important;
    min-height: 205px !important;
    margin: 10px auto 0 !important;
    padding: 28px 16px 26px !important;
    border-radius: 32px !important;
    background-size: 205px auto !important;
    background-position: center !important;
    overflow: hidden !important;
    box-shadow: 0 18px 52px rgba(0,66,110,.12) !important;
    border: 1px solid rgba(24,213,255,.22) !important;
  }

  body.dg-v25 .home-hero-v17 {
    background: transparent !important;
    padding: 0 !important;
  }

  body.dg-v25 .dg-clean-banner-inner,
  body.dg-v25 .hero-inner {
    width: 100% !important;
    max-width: 380px !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  body.dg-v25 .eyebrow {
    font-size: 11px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    letter-spacing: .05em !important;
  }

  body.dg-v25 .dg-clean-banner h1,
  body.dg-v25 .home-hero-v17 h1,
  body.dg-v25 .gallery-modern-hero h1 {
    font-size: clamp(28px, 8.8vw, 40px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    margin: 12px auto !important;
    max-width: 340px !important;
  }

  body.dg-v25 .hero-sub,
  body.dg-v25 .dg-clean-banner p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }

  body.dg-v25 .hero-actions,
  body.dg-v25 .dg-banner-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 310px !important;
    margin: 15px auto 0 !important;
  }

  body.dg-v25 .btn {
    min-height: 42px !important;
    border-radius: 999px !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    transform: none !important;
  }

  body.dg-v25 .btn.white {
    background: rgba(255,255,255,.82) !important;
  }

  /* MAIN CONTENT APP WIDTH */
  body.dg-v25 main,
  body.dg-v25 .section,
  body.dg-v25 .service-top {
    background: transparent !important;
  }

  body.dg-v25 .section {
    padding: 28px 0 !important;
  }

  body.dg-v25 .container,
  body.dg-v25 .content {
    width: calc(100% - 18px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* HOME SERVICES: iOS horizontal cards */
  body.dg-v25 .home-service-showcase {
    padding: 18px 0 8px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body.dg-v25 .home-service-showcase .hero-grid {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 9px 13px !important;
    margin: 0 !important;
  }

  body.dg-v25 .home-service-showcase .hero-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v25 .hero-tile {
    flex: 0 0 74vw !important;
    max-width: 320px !important;
    min-height: 230px !important;
    border-radius: 28px !important;
    scroll-snap-align: center !important;
    box-shadow: var(--ios-shadow) !important;
    transform: none !important;
  }

  /* SERVICES PAGE: compact app list cards instead of giant desktop blocks */
  body.dg-v25 .service-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.dg-v25 .service-card {
    border-radius: 26px !important;
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-line) !important;
    box-shadow: var(--ios-shadow) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.dg-v25 .service-card:hover {
    transform: none !important;
  }

  body.dg-v25 .service-card a {
    display: grid !important;
    grid-template-columns: 118px 1fr !important;
    min-height: 154px !important;
    color: inherit !important;
  }

  body.dg-v25 .service-card .card-img {
    height: 100% !important;
    min-height: 154px !important;
    border-radius: 0 !important;
  }

  body.dg-v25 .service-card .card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.dg-v25 .service-card .icon-badge {
    position: absolute !important;
    left: 92px !important;
    top: 18px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
    margin: 0 !important;
    z-index: 4 !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(24,213,255,.30) !important;
    box-shadow: 0 12px 26px rgba(0,75,125,.13) !important;
    transform: none !important;
  }

  body.dg-v25 .service-card .icon-badge img {
    width: 24px !important;
    height: 24px !important;
  }

  body.dg-v25 .service-card .card-body {
    padding: 18px 16px 16px 28px !important;
    display: grid !important;
    align-content: center !important;
  }

  body.dg-v25 .service-card h3 {
    font-size: 18px !important;
    line-height: 1.18 !important;
    margin: 0 0 8px !important;
    letter-spacing: -.025em !important;
  }

  body.dg-v25 .service-card p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--ios-muted) !important;
    margin: 0 0 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.dg-v25 .card-link {
    min-height: 34px !important;
    width: max-content !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    background: linear-gradient(135deg,rgba(24,213,255,.18),rgba(8,121,242,.10)) !important;
    color: var(--ios-blue) !important;
    font-weight: 900 !important;
    transform: none !important;
  }

  /* DETAIL PAGE APP CARDS */
  body.dg-v25 .service-top {
    padding: 14px 0 0 !important;
  }

  body.dg-v25 .service-photo,
  body.dg-v25 .service-photo-wrap {
    width: calc(100% - 18px) !important;
    max-width: 520px !important;
    margin: 12px auto 0 !important;
    border-radius: 30px !important;
    box-shadow: var(--ios-shadow) !important;
    overflow: hidden !important;
  }

  body.dg-v25 .service-photo img,
  body.dg-v25 .service-photo-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.dg-v25 .lead-card,
  body.dg-v25 .price-box,
  body.dg-v25 .contact-card,
  body.dg-v25 .info-box,
  body.dg-v25 .electric-video-card {
    border-radius: 26px !important;
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-line) !important;
    box-shadow: var(--ios-shadow) !important;
    transform: none !important;
  }

  body.dg-v25 .lead-card {
    padding: 22px 18px !important;
    margin: 14px auto 12px !important;
  }

  body.dg-v25 .lead-card h1 {
    font-size: clamp(24px, 6.8vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.035em !important;
    margin: 12px 0 !important;
  }

  body.dg-v25 .lead-card p,
  body.dg-v25 p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  body.dg-v25 .price-box {
    padding: 15px 16px !important;
    font-size: 13.5px !important;
  }

  body.dg-v25 .text-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body.dg-v25 .text-section h2,
  body.dg-v25 .gallery-layout-head h2 {
    font-size: clamp(24px, 7vw, 33px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    margin: 24px 0 14px !important;
  }

  body.dg-v25 .pill-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
  }

  body.dg-v25 .pill-list::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v25 .pill-list span {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
  }

  body.dg-v25 .info-grid,
  body.dg-v25 .contact-cards,
  body.dg-v25 .feature-grid,
  body.dg-v25 .electric-video-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.dg-v25 .info-box,
  body.dg-v25 .contact-card {
    padding: 18px !important;
  }

  body.dg-v25 .faq {
    border-radius: 18px !important;
    overflow: hidden !important;
    margin-bottom: 9px !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid var(--ios-line) !important;
  }

  body.dg-v25 .faq h3,
  body.dg-v25 .faq summary {
    min-height: 46px !important;
    padding: 13px 15px !important;
    font-size: 13.5px !important;
  }

  body.dg-v25 .cta-band {
    margin: 24px auto 38px !important;
    padding: 22px 18px !important;
    border-radius: 30px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    text-align: left !important;
    background: linear-gradient(135deg,#062033,#00395a) !important;
  }

  body.dg-v25 .cta-band h2 {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.04 !important;
  }

  /* GALLERY: app cards */
  body.dg-v25 .gallery-layout-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.dg-v25 .real-gallery-grid,
  body.dg-v25 .portfolio-masonry {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body.dg-v25 .real-gallery-card,
  body.dg-v25 .portfolio-masonry .real-gallery-card {
    height: 190px !important;
    min-height: 190px !important;
    border-radius: 24px !important;
    box-shadow: var(--ios-shadow) !important;
    transform: none !important;
  }

  body.dg-v25 .electric-video-card video {
    aspect-ratio: 16 / 10 !important;
    max-height: none !important;
  }

  body.dg-v25 .electric-video-card {
    overflow: hidden !important;
  }

  /* Floating call hidden on mobile because bottom app tab has call */
  body.dg-v25 .phone-float {
    display: none !important;
  }

  /* Bottom iOS tabbar */
  body.dg-v25 .mobile-app-tabbar {
    position: fixed;
    left: 9px;
    right: 9px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 6000;
    height: 74px;
    padding: 8px;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    border-radius: 28px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(24px) saturate(1.35);
    border: 1px solid rgba(24,213,255,.26);
    box-shadow: 0 20px 65px rgba(0,42,74,.20);
  }

  body.dg-v25 .mobile-app-tabbar a {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    border-radius: 20px;
    text-decoration: none;
    color: #6b8291;
    font-size: 10.5px;
    font-weight: 900;
    transform: none !important;
    min-width: 0;
  }

  body.dg-v25 .mobile-app-tabbar .tab-ico {
    width: 27px;
    height: 27px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(240,252,255,.86);
    border: 1px solid rgba(24,213,255,.16);
  }

  body.dg-v25 .mobile-app-tabbar img {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  body.dg-v25 .mobile-app-tabbar a.active-tab {
    color: var(--ios-blue);
    background: rgba(8,121,242,.08);
  }

  body.dg-v25 .mobile-app-tabbar a.active-tab .tab-ico {
    background: linear-gradient(135deg,var(--ios-cyan),var(--ios-blue));
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(8,121,242,.20);
  }

  body.dg-v25 .mobile-app-tabbar a.active-tab img,
  body.dg-v25 .mobile-app-tabbar .tab-call img {
    filter: brightness(0) invert(1);
  }

  body.dg-v25 .mobile-app-tabbar .tab-call {
    color: #fff;
  }

  body.dg-v25 .mobile-app-tabbar .tab-call .tab-ico {
    width: 34px;
    height: 34px;
    border-radius: 15px;
    background: linear-gradient(135deg,#21e26b,#08b94f);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(14,190,82,.26);
  }

  body.dg-v25 .mobile-app-tabbar .tab-call b {
    color: #12a84a;
  }

  /* Footer compact */
  body.dg-v25 .footer {
    padding-bottom: 104px !important;
  }

  body.dg-v25 .footer-inner {
    width: calc(100% - 22px) !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: left !important;
  }

  body.dg-v25 .footer-logo {
    width: 86px !important;
  }

  body.dg-v25 .footer-socials {
    margin-bottom: 8px !important;
  }
}

@media (max-width: 430px) {
  body.dg-v25 .socials {
    gap: 4px !important;
    margin-right: 44px !important;
  }

  body.dg-v25 .socials a {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  body.dg-v25 .socials img,
  body.dg-v25 .socials a img[src="tik-tok.png"] {
    width: 14px !important;
    height: 14px !important;
  }

  body.dg-v25 .mobile-app-quickstrip {
    grid-template-columns: 1.35fr .9fr .9fr;
    gap: 7px;
  }

  body.dg-v25 .mobile-app-quickstrip b {
    font-size: 10.5px;
  }

  body.dg-v25 .hero-actions,
  body.dg-v25 .dg-banner-actions {
    grid-template-columns: 1fr !important;
    max-width: 270px !important;
  }

  body.dg-v25 .service-card a {
    grid-template-columns: 108px 1fr !important;
  }

  body.dg-v25 .service-card .icon-badge {
    left: 84px !important;
  }

  body.dg-v25 .service-card h3 {
    font-size: 17px !important;
  }

  body.dg-v25 .service-card p {
    -webkit-line-clamp: 2 !important;
  }

  body.dg-v25 .real-gallery-grid,
  body.dg-v25 .portfolio-masonry {
    grid-template-columns: 1fr !important;
  }

  body.dg-v25 .real-gallery-card,
  body.dg-v25 .portfolio-masonry .real-gallery-card {
    height: 245px !important;
  }

  body.dg-v25 .mobile-app-tabbar {
    height: 72px;
    left: 7px;
    right: 7px;
  }

  body.dg-v25 .mobile-app-tabbar b {
    font-size: 9.5px;
  }
}


/* =========================================================
   DoorGO v26 — Mobile app polish, icon-only quick actions,
   fixed hamburger, cleaner open-menu animation, premium motion.
   ========================================================= */

body.dg-v26 .mobile-app-quickstrip .quick-icon img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  display: block;
}

/* Desktop unaffected mostly */
@media (max-width: 820px) {
  body.dg-v26 {
    --app-blue: #0879f2;
    --app-cyan: #19d7ff;
    --app-green: #16cc5b;
    --app-ink: #061827;
    --app-muted: #607789;
    --app-glass: rgba(255,255,255,.82);
    --app-border: rgba(25,215,255,.24);
    --app-ease: cubic-bezier(.2,.8,.2,1);
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  /* Prevent old emoji/text from appearing in quick actions */
  body.dg-v26 .mobile-app-quickstrip span:not(.quick-icon) {
    display: none !important;
  }

  /* Header: more premium, less messy */
  body.dg-v26 .site-header {
    width: calc(100% - 16px) !important;
    margin-top: 7px !important;
    border-radius: 26px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.88), rgba(238,252,255,.76)) !important;
    border: 1px solid rgba(25,215,255,.30) !important;
    box-shadow: 0 18px 48px rgba(0,67,112,.13) !important;
    overflow: visible !important;
  }

  body.dg-v26 .header-inner {
    min-height: 62px !important;
    padding: 8px 11px !important;
    grid-template-columns: auto 1fr auto !important;
  }

  body.dg-v26 .brand img {
    height: 41px !important;
    filter: drop-shadow(0 6px 12px rgba(0,40,70,.08));
  }

  body.dg-v26 .socials {
    margin-right: 48px !important;
    padding: 4px !important;
    gap: 4px !important;
    max-width: 148px !important;
    border-radius: 19px !important;
    background: rgba(255,255,255,.54) !important;
    border: 1px solid rgba(25,215,255,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important;
  }

  body.dg-v26 .socials a {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(25,215,255,.22) !important;
    box-shadow: 0 7px 18px rgba(0,90,150,.08) !important;
    transform: none !important;
    transition: background .22s ease, box-shadow .22s ease, transform .22s var(--app-ease) !important;
  }

  body.dg-v26 .socials a:active {
    transform: scale(.92) !important;
  }

  body.dg-v26 .socials img,
  body.dg-v26 .socials a img[src="tik-tok.png"] {
    width: 14.5px !important;
    height: 14.5px !important;
    object-fit: contain !important;
  }

  /* Fixed hamburger: no emoji, no weird line, clean animated X */
  body.dg-v26 .menu-toggle {
    position: absolute !important;
    right: 10px !important;
    top: 11px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(25,215,255,.32) !important;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), transparent 45%),
      linear-gradient(135deg, #f1fdff, #ffffff) !important;
    box-shadow: 0 12px 28px rgba(0,80,130,.13), inset 0 1px 0 rgba(255,255,255,.8) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }

  body.dg-v26 .menu-toggle .menu-line,
  body.dg-v26 .menu-toggle::before,
  body.dg-v26 .menu-toggle::after {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: #062033 !important;
    opacity: 1 !important;
    transform-origin: center !important;
    transition: top .24s var(--app-ease), transform .24s var(--app-ease), opacity .2s ease !important;
  }

  body.dg-v26 .menu-toggle::before { top: 13px !important; }
  body.dg-v26 .menu-toggle .menu-line { top: 20px !important; }
  body.dg-v26 .menu-toggle::after { top: 27px !important; }

  body.dg-v26 .menu-toggle.active::before {
    top: 20px !important;
    transform: rotate(45deg) !important;
  }

  body.dg-v26 .menu-toggle.active .menu-line {
    opacity: 0 !important;
    transform: translateX(8px) !important;
  }

  body.dg-v26 .menu-toggle.active::after {
    top: 20px !important;
    transform: rotate(-45deg) !important;
  }

  body.dg-v26 .menu-toggle:active {
    transform: scale(.94) !important;
  }

  /* Quick strip: no emojis, icon chips */
  body.dg-v26 .mobile-app-quickstrip {
    width: calc(100% - 16px) !important;
    margin: 10px auto 0 !important;
    grid-template-columns: 1.2fr 1fr 1fr !important;
    gap: 8px !important;
  }

  body.dg-v26 .mobile-app-quickstrip a {
    min-height: 56px !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.90), rgba(237,252,255,.76)) !important;
    border: 1px solid rgba(25,215,255,.25) !important;
    box-shadow: 0 12px 32px rgba(0,80,130,.10), inset 0 1px 0 rgba(255,255,255,.75) !important;
    padding: 7px 8px !important;
    transition: transform .18s var(--app-ease), box-shadow .2s ease !important;
  }

  body.dg-v26 .mobile-app-quickstrip a:active {
    transform: scale(.96) !important;
  }

  body.dg-v26 .mobile-app-quickstrip .quick-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 11px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, rgba(25,215,255,.14), rgba(8,121,242,.08)) !important;
    border: 1px solid rgba(25,215,255,.18) !important;
  }

  body.dg-v26 .mobile-app-quickstrip .quick-icon img {
    width: 15px !important;
    height: 15px !important;
    object-fit: contain !important;
  }

  body.dg-v26 .mobile-app-quickstrip b {
    font-size: 11px !important;
    color: var(--app-ink) !important;
  }

  /* Nav menu: animated premium iOS sheet. Better than current open state */
  body.dg-v26 .nav {
    top: 82px !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 30px !important;
    padding: 13px !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(25,215,255,.18), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.97), rgba(240,252,255,.93)) !important;
    backdrop-filter: blur(26px) saturate(1.28) !important;
    border: 1px solid rgba(25,215,255,.32) !important;
    box-shadow: 0 30px 100px rgba(0,42,74,.24) !important;
    gap: 8px !important;
    transform: translateY(-12px) scale(.97) !important;
    transform-origin: top right !important;
  }

  body.dg-v26 .nav.open {
    animation: dgV26MenuIn .28s var(--app-ease) both !important;
  }

  @keyframes dgV26MenuIn {
    from { opacity: 0; transform: translateY(-12px) scale(.97); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }

  body.dg-v26 .nav a,
  body.dg-v26 .dropdown-trigger {
    min-height: 46px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(25,215,255,.20) !important;
    box-shadow: 0 8px 22px rgba(0,90,150,.05) !important;
    font-weight: 900 !important;
    transition: background .18s ease, transform .16s var(--app-ease), box-shadow .18s ease !important;
  }

  body.dg-v26 .nav a:active,
  body.dg-v26 .dropdown-trigger:active {
    transform: scale(.98) !important;
  }

  body.dg-v26 .nav a.active,
  body.dg-v26 .dropdown > .dropdown-trigger {
    background: linear-gradient(135deg, var(--app-cyan), var(--app-blue)) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(8,121,242,.20) !important;
  }

  body.dg-v26 .dropdown-menu {
    padding: 0 0 0 6px !important;
    gap: 7px !important;
  }

  body.dg-v26 .dropdown-menu a {
    background: rgba(255,255,255,.62) !important;
    min-height: 41px !important;
    font-size: 12.3px !important;
  }

  /* Hero text was too cramped. Make it readable and premium */
  body.dg-v26 .hero,
  body.dg-v26 .dg-clean-banner,
  body.dg-v26 .gallery-modern-hero,
  body.dg-v26 .home-hero-v17 .hero-inner {
    width: calc(100% - 16px) !important;
    min-height: 255px !important;
    padding: 30px 20px 28px !important;
    border-radius: 32px !important;
    background-size: 230px auto !important;
    box-shadow: 0 18px 55px rgba(0,66,110,.13) !important;
  }

  body.dg-v26 .dg-clean-banner h1,
  body.dg-v26 .home-hero-v17 h1,
  body.dg-v26 .gallery-modern-hero h1 {
    font-size: clamp(31px, 8.4vw, 39px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    max-width: 330px !important;
    text-wrap: balance;
    text-shadow: 0 8px 24px rgba(0,25,40,.22) !important;
  }

  body.dg-v26 .hero-sub {
    max-width: 310px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.dg-v26 .hero-actions,
  body.dg-v26 .dg-banner-actions {
    margin-top: 16px !important;
  }

  /* Main carousel card animation and spacing */
  body.dg-v26 .home-service-showcase .hero-grid {
    gap: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.dg-v26 .hero-tile {
    flex-basis: 78vw !important;
    border-radius: 30px !important;
    min-height: 250px !important;
    box-shadow: 0 20px 52px rgba(0,66,110,.14) !important;
    border: 1px solid rgba(25,215,255,.22) !important;
    animation: dgV26CardFloat 4.8s ease-in-out infinite;
  }

  body.dg-v26 .hero-tile:nth-child(2) { animation-delay: .25s; }
  body.dg-v26 .hero-tile:nth-child(3) { animation-delay: .5s; }

  @keyframes dgV26CardFloat {
    0%,100% { box-shadow: 0 20px 52px rgba(0,66,110,.14); }
    50% { box-shadow: 0 24px 64px rgba(8,121,242,.19); }
  }

  /* Services list: more refined and no ugly text overflow */
  body.dg-v26 .service-card {
    border-radius: 28px !important;
    box-shadow: 0 18px 48px rgba(0,66,110,.12) !important;
    animation: dgV26SoftAppear .42s var(--app-ease) both;
  }

  body.dg-v26 .service-card:nth-child(2) { animation-delay: .05s; }
  body.dg-v26 .service-card:nth-child(3) { animation-delay: .1s; }

  @keyframes dgV26SoftAppear {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  body.dg-v26 .service-card a {
    grid-template-columns: 112px 1fr !important;
    min-height: 150px !important;
  }

  body.dg-v26 .service-card .card-img {
    min-height: 150px !important;
  }

  body.dg-v26 .service-card .icon-badge {
    left: 88px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
  }

  body.dg-v26 .service-card .card-body {
    padding-left: 27px !important;
  }

  body.dg-v26 .service-card h3 {
    font-size: 17.5px !important;
  }

  body.dg-v26 .service-card p {
    font-size: 12.4px !important;
    -webkit-line-clamp: 2 !important;
  }

  /* Bottom tabbar animation */
  body.dg-v26 .mobile-app-tabbar {
    height: 76px !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: 0 22px 70px rgba(0,42,74,.20), inset 0 1px 0 rgba(255,255,255,.75) !important;
    animation: dgV26TabbarIn .46s var(--app-ease) .08s both;
  }

  @keyframes dgV26TabbarIn {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  body.dg-v26 .mobile-app-tabbar a {
    transition: background .2s ease, transform .16s var(--app-ease), color .18s ease !important;
  }

  body.dg-v26 .mobile-app-tabbar a:active {
    transform: scale(.92) !important;
  }

  body.dg-v26 .mobile-app-tabbar a.active-tab {
    background: rgba(8,121,242,.09) !important;
  }

  body.dg-v26 .mobile-app-tabbar .tab-call .tab-ico {
    animation: dgV26CallPulse 2s ease-in-out infinite;
  }

  @keyframes dgV26CallPulse {
    0%,100% { box-shadow: 0 10px 24px rgba(14,190,82,.24), 0 0 0 0 rgba(22,204,91,.32); }
    50% { box-shadow: 0 12px 30px rgba(14,190,82,.30), 0 0 0 8px rgba(22,204,91,0); }
  }

  body.dg-v26 .contact-card,
  body.dg-v26 .info-box,
  body.dg-v26 .lead-card,
  body.dg-v26 .price-box,
  body.dg-v26 .electric-video-card,
  body.dg-v26 .real-gallery-card {
    transition: box-shadow .22s ease, border-color .2s ease, transform .16s var(--app-ease) !important;
  }

  body.dg-v26 .contact-card:active,
  body.dg-v26 .info-box:active,
  body.dg-v26 .lead-card:active,
  body.dg-v26 .price-box:active,
  body.dg-v26 .electric-video-card:active,
  body.dg-v26 .real-gallery-card:active {
    transform: scale(.985) !important;
  }
}

@media (max-width: 430px) {
  body.dg-v26 .brand img {
    height: 39px !important;
  }

  body.dg-v26 .socials {
    margin-right: 45px !important;
    gap: 3px !important;
  }

  body.dg-v26 .socials a {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
  }

  body.dg-v26 .menu-toggle {
    width: 39px !important;
    height: 39px !important;
    right: 10px !important;
  }

  body.dg-v26 .mobile-app-quickstrip {
    grid-template-columns: 1.28fr .92fr .92fr !important;
    gap: 7px !important;
  }

  body.dg-v26 .mobile-app-quickstrip a {
    min-height: 52px !important;
  }

  body.dg-v26 .mobile-app-quickstrip b {
    font-size: 10.4px !important;
  }

  body.dg-v26 .hero,
  body.dg-v26 .dg-clean-banner,
  body.dg-v26 .gallery-modern-hero,
  body.dg-v26 .home-hero-v17 .hero-inner {
    min-height: 248px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.dg-v26 .service-card a {
    grid-template-columns: 102px 1fr !important;
  }

  body.dg-v26 .service-card .icon-badge {
    left: 80px !important;
  }

  body.dg-v26 .service-card .card-body {
    padding-left: 28px !important;
    padding-right: 13px !important;
  }

  body.dg-v26 .service-card h3 {
    font-size: 16.8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dg-v26 * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   DoorGO v27 — Mobile header/social icons final polish
   Socials are bigger and always visible. Menu button rebuilt.
   ========================================================= */

@media (max-width: 820px) {
  body.dg-v27 {
    --v27-blue:#0879f2;
    --v27-cyan:#19d7ff;
    --v27-ink:#061827;
    --v27-ease:cubic-bezier(.2,.8,.2,1);
  }

  body.dg-v27 .site-header {
    width: calc(100% - 14px) !important;
    margin-top: 7px !important;
    border-radius: 27px !important;
    overflow: visible !important;
    background:
      radial-gradient(circle at 82% 20%, rgba(25,215,255,.16), transparent 38%),
      rgba(255,255,255,.88) !important;
    backdrop-filter: blur(25px) saturate(1.35) !important;
    border: 1px solid rgba(25,215,255,.32) !important;
    box-shadow: 0 18px 50px rgba(0,63,105,.14), inset 0 1px 0 rgba(255,255,255,.72) !important;
  }

  body.dg-v27 .header-inner {
    min-height: 68px !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
  }

  body.dg-v27 .brand {
    z-index: 4 !important;
  }

  body.dg-v27 .brand img {
    height: 44px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Social icons are always visible, bigger, cleaner */
  body.dg-v27 .socials {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    gap: 6px !important;
    margin: 0 54px 0 0 !important;
    padding: 5px !important;
    max-width: none !important;
    border-radius: 22px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.76), rgba(237,252,255,.58)) !important;
    border: 1px solid rgba(25,215,255,.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 26px rgba(0,90,150,.08) !important;
    position: relative !important;
    z-index: 4 !important;
    transform: none !important;
  }

  body.dg-v27 .mobile-menu-open .socials,
  body.dg-v27.mobile-menu-open .socials {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.dg-v27 .socials a {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    border-radius: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(25,215,255,.25) !important;
    box-shadow: 0 9px 22px rgba(0,85,140,.10) !important;
    overflow: hidden !important;
    transform: none !important;
    transition: transform .16s var(--v27-ease), background .22s ease, box-shadow .22s ease !important;
  }

  body.dg-v27 .socials a:active {
    transform: scale(.92) !important;
  }

  body.dg-v27 .socials img,
  body.dg-v27 .socials a img[src="tik-tok.png"] {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* New hamburger button, not ugly symbol */
  body.dg-v27 .menu-toggle {
    position: absolute !important;
    right: 11px !important;
    top: 12px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 17px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(25,215,255,.34) !important;
    background:
      radial-gradient(circle at 28% 18%, rgba(255,255,255,.96), transparent 44%),
      linear-gradient(135deg, #effcff, #ffffff) !important;
    box-shadow:
      0 12px 30px rgba(0,80,130,.15),
      inset 0 1px 0 rgba(255,255,255,.85) !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: 0 !important;
    line-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 8 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.dg-v27 .menu-toggle::before,
  body.dg-v27 .menu-toggle::after {
    display: none !important;
    content: none !important;
  }

  body.dg-v27 .menu-toggle .bar {
    position: absolute !important;
    left: 12px !important;
    width: 20px !important;
    height: 2.4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--v27-ink), #0a5277) !important;
    opacity: 1 !important;
    transform-origin: center !important;
    transition:
      top .24s var(--v27-ease),
      transform .24s var(--v27-ease),
      opacity .18s ease,
      width .2s ease !important;
  }

  body.dg-v27 .menu-toggle .bar-1 { top: 14px !important; }
  body.dg-v27 .menu-toggle .bar-2 { top: 21px !important; width: 16px !important; }
  body.dg-v27 .menu-toggle .bar-3 { top: 28px !important; }

  body.dg-v27 .menu-toggle.active .bar-1 {
    top: 21px !important;
    transform: rotate(45deg) !important;
  }

  body.dg-v27 .menu-toggle.active .bar-2 {
    opacity: 0 !important;
    transform: translateX(8px) !important;
  }

  body.dg-v27 .menu-toggle.active .bar-3 {
    top: 21px !important;
    transform: rotate(-45deg) !important;
  }

  body.dg-v27 .menu-toggle:active {
    transform: scale(.94) !important;
  }

  /* Menu sheet position adjusted for bigger header */
  body.dg-v27 .nav {
    top: 86px !important;
    left: 9px !important;
    right: 9px !important;
    border-radius: 30px !important;
    padding: 14px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(25,215,255,.18), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,.97), rgba(241,253,255,.94)) !important;
    border: 1px solid rgba(25,215,255,.32) !important;
    box-shadow: 0 30px 100px rgba(0,42,74,.24) !important;
    backdrop-filter: blur(28px) saturate(1.35) !important;
  }

  body.dg-v27 .nav.open {
    animation: dgV27MenuSheet .28s var(--v27-ease) both !important;
  }

  @keyframes dgV27MenuSheet {
    from { opacity: 0; transform: translateY(-12px) scale(.97); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }

  body.dg-v27 .nav a,
  body.dg-v27 .dropdown-trigger {
    min-height: 48px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(25,215,255,.20) !important;
    box-shadow: 0 8px 22px rgba(0,90,150,.05) !important;
  }

  body.dg-v27 .nav a.active,
  body.dg-v27 .dropdown > .dropdown-trigger {
    background: linear-gradient(135deg, var(--v27-cyan), var(--v27-blue)) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(8,121,242,.20) !important;
  }

  /* Small design improvements */
  body.dg-v27 .mobile-app-quickstrip {
    margin-top: 11px !important;
  }

  body.dg-v27 .mobile-app-quickstrip a {
    border-radius: 23px !important;
    box-shadow: 0 13px 34px rgba(0,80,130,.10), inset 0 1px 0 rgba(255,255,255,.78) !important;
  }

  body.dg-v27 .hero,
  body.dg-v27 .dg-clean-banner,
  body.dg-v27 .gallery-modern-hero,
  body.dg-v27 .home-hero-v17 .hero-inner {
    border-radius: 34px !important;
  }
}

@media (max-width: 430px) {
  body.dg-v27 .brand img {
    height: 42px !important;
  }

  body.dg-v27 .socials {
    gap: 4px !important;
    padding: 4px !important;
    margin-right: 52px !important;
  }

  body.dg-v27 .socials a {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    border-radius: 13px !important;
  }

  body.dg-v27 .socials img,
  body.dg-v27 .socials a img[src="tik-tok.png"] {
    width: 16px !important;
    height: 16px !important;
  }

  body.dg-v27 .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    right: 10px !important;
  }

  body.dg-v27 .menu-toggle .bar {
    left: 11px !important;
    width: 20px !important;
  }

  body.dg-v27 .menu-toggle .bar-2 {
    width: 16px !important;
  }
}

@media (max-width: 380px) {
  body.dg-v27 .socials {
    gap: 3px !important;
    margin-right: 48px !important;
  }

  body.dg-v27 .socials a {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
  }

  body.dg-v27 .socials img,
  body.dg-v27 .socials a img[src="tik-tok.png"] {
    width: 15px !important;
    height: 15px !important;
  }

  body.dg-v27 .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}


/* =========================================================
   DoorGO v28 — Key making service + mobile menu text polish
   ========================================================= */

body.dg-v28 .key-making-panel {
  max-width: 980px;
  margin: 18px auto 20px;
  padding: 24px;
  border-radius: 30px;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 20px;
  align-items: center;
  background:
    radial-gradient(circle at 12% 12%, rgba(25,215,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,252,255,.86));
  border: 1px solid rgba(25,215,255,.32);
  box-shadow: 0 18px 48px rgba(0,80,130,.12);
  overflow: hidden;
  position: relative;
}

body.dg-v28 .key-making-panel::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 85px;
  left: -110px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: rotate(18deg);
  animation: dgV28KeyShine 4.8s ease-in-out infinite;
}

@keyframes dgV28KeyShine {
  0%, 34% { left: -120px; opacity: 0; }
  46% { opacity: .7; }
  66% { left: calc(100% + 120px); opacity: 0; }
  100% { left: calc(100% + 120px); opacity: 0; }
}

body.dg-v28 .key-making-icon {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#ffffff,#eafcff);
  border: 1px solid rgba(25,215,255,.30);
  box-shadow: 0 14px 34px rgba(0,80,130,.12);
}

body.dg-v28 .key-making-icon img,
body.dg-v28 .key-mini img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

body.dg-v28 .key-making-copy h2 {
  margin: 7px 0 8px;
  font-size: clamp(26px, 3vw, 40px);
  color: #061827;
  letter-spacing: -.03em;
}

body.dg-v28 .key-making-copy p {
  margin: 0;
  color: #587083;
  line-height: 1.75;
}

body.dg-v28 .key-making-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.dg-v28 .key-making-pills span {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(25,215,255,.10);
  border: 1px solid rgba(25,215,255,.24);
  color: #0879f2;
  font-size: 13px;
  font-weight: 900;
}

/* Mobile menu long line fix */
@media (max-width: 820px) {
  body.dg-v28 .nav a,
  body.dg-v28 .dropdown-trigger,
  body.dg-v28 .dropdown-menu a {
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.35 !important;
    text-align: left !important;
    min-height: 48px !important;
  }

  body.dg-v28 .dropdown-menu a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body.dg-v28 .key-making-panel {
    width: calc(100% - 18px) !important;
    max-width: 520px !important;
    margin: 14px auto 14px !important;
    padding: 20px 18px !important;
    grid-template-columns: 58px 1fr !important;
    gap: 14px !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 12% 8%, rgba(25,215,255,.18), transparent 34%),
      rgba(255,255,255,.88) !important;
    box-shadow: 0 14px 38px rgba(0,80,130,.10) !important;
  }

  body.dg-v28 .key-making-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 20px !important;
  }

  body.dg-v28 .key-making-icon img {
    width: 30px !important;
    height: 30px !important;
  }

  body.dg-v28 .key-making-copy h2 {
    font-size: clamp(23px, 6.6vw, 32px) !important;
    line-height: 1.08 !important;
    margin: 7px 0 !important;
  }

  body.dg-v28 .key-making-copy p {
    font-size: 13.3px !important;
    line-height: 1.62 !important;
  }

  body.dg-v28 .key-making-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    margin-top: 12px !important;
  }

  body.dg-v28 .key-making-pills::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v28 .key-making-pills span {
    flex: 0 0 auto !important;
    font-size: 11.5px !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 430px) {
  body.dg-v28 .key-making-panel {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  body.dg-v28 .key-making-icon {
    width: 54px !important;
    height: 54px !important;
  }
}


/* =========================================================
   DoorGO v29 — FIX BROKEN MOBILE HEADER
   Removes huge empty header space and rebuilds the top bar.
   Logo + socials + hamburger are always visible and aligned.
   ========================================================= */

@media (max-width: 820px) {
  body.dg-v29 {
    --v29-blue:#0879f2;
    --v29-cyan:#19d7ff;
    --v29-ink:#061827;
    --v29-glass:rgba(255,255,255,.88);
    --v29-line:rgba(25,215,255,.26);
    --v29-ease:cubic-bezier(.2,.8,.2,1);
  }

  /* Header must be compact, no huge blank pill */
  body.dg-v29 .site-header {
    position: sticky !important;
    top: 8px !important;
    z-index: 50000 !important;
    width: calc(100% - 16px) !important;
    margin: 8px auto 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 24px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.94), rgba(237,252,255,.82)) !important;
    border: 1px solid rgba(25,215,255,.30) !important;
    box-shadow: 0 14px 38px rgba(0,65,110,.13), inset 0 1px 0 rgba(255,255,255,.85) !important;
    backdrop-filter: blur(22px) saturate(1.25) !important;
    overflow: visible !important;
  }

  body.dg-v29 .header-inner {
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 7px 9px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 7px !important;
    position: relative !important;
  }

  body.dg-v29 .brand {
    grid-column: 1 !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
  }

  body.dg-v29 .brand img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    margin: 0 !important;
    display: block !important;
  }

  body.dg-v29 .brand span {
    display: none !important;
  }

  /* Socials are real middle column, never hidden, not behind menu */
  body.dg-v29 .socials {
    grid-column: 2 !important;
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 166px !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 4px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.58) !important;
    border: 1px solid rgba(25,215,255,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(0,90,150,.07) !important;
    transform: none !important;
    z-index: 4 !important;
  }

  body.dg-v29.mobile-menu-open .socials,
  body.dg-v29 .mobile-menu-open .socials {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.dg-v29 .socials a {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    border-radius: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(25,215,255,.24) !important;
    box-shadow: 0 7px 16px rgba(0,80,135,.08) !important;
    overflow: hidden !important;
    transform: none !important;
    transition: transform .15s var(--v29-ease), background .2s ease, box-shadow .2s ease !important;
  }

  body.dg-v29 .socials a:active {
    transform: scale(.92) !important;
  }

  body.dg-v29 .socials img,
  body.dg-v29 .socials a img[src="tik-tok.png"] {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Rebuilt menu button: static in column 3, visible bars */
  body.dg-v29 .menu-toggle {
    grid-column: 3 !important;
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(25,215,255,.36) !important;
    background:
      radial-gradient(circle at 28% 18%, rgba(255,255,255,.96), transparent 43%),
      linear-gradient(135deg, #eefcff, #ffffff) !important;
    box-shadow: 0 10px 24px rgba(0,80,130,.13), inset 0 1px 0 rgba(255,255,255,.9) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    transform: none !important;
    z-index: 6 !important;
  }

  body.dg-v29 .menu-toggle::before,
  body.dg-v29 .menu-toggle::after {
    display: none !important;
    content: none !important;
  }

  body.dg-v29 .menu-toggle .bar {
    display: block !important;
    position: absolute !important;
    left: 10px !important;
    width: 20px !important;
    height: 2.4px !important;
    border-radius: 99px !important;
    background: linear-gradient(90deg, #061827, #08699a) !important;
    opacity: 1 !important;
    transform-origin: center !important;
    transition: top .23s var(--v29-ease), transform .23s var(--v29-ease), opacity .18s ease, width .2s ease !important;
  }

  body.dg-v29 .menu-toggle .bar-1 { top: 12px !important; }
  body.dg-v29 .menu-toggle .bar-2 { top: 19px !important; width: 16px !important; }
  body.dg-v29 .menu-toggle .bar-3 { top: 26px !important; }

  body.dg-v29 .menu-toggle.active .bar-1 {
    top: 19px !important;
    transform: rotate(45deg) !important;
  }

  body.dg-v29 .menu-toggle.active .bar-2 {
    opacity: 0 !important;
    transform: translateX(8px) !important;
  }

  body.dg-v29 .menu-toggle.active .bar-3 {
    top: 19px !important;
    transform: rotate(-45deg) !important;
  }

  body.dg-v29 .menu-toggle:active {
    transform: scale(.94) !important;
  }

  /* Drawer below compact header */
  body.dg-v29 .nav {
    top: 78px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - 170px) !important;
    padding: 13px !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(25,215,255,.17), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,.97), rgba(240,253,255,.94)) !important;
    border: 1px solid rgba(25,215,255,.30) !important;
    box-shadow: 0 28px 90px rgba(0,42,74,.22) !important;
    backdrop-filter: blur(26px) saturate(1.35) !important;
    gap: 8px !important;
    z-index: 49999 !important;
  }

  body.dg-v29 .nav.open {
    animation: dgV29MenuIn .25s var(--v29-ease) both !important;
  }

  @keyframes dgV29MenuIn {
    from { opacity: 0; transform: translateY(-10px) scale(.975); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }

  body.dg-v29 .nav a,
  body.dg-v29 .dropdown-trigger,
  body.dg-v29 .dropdown-menu a {
    white-space: normal !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  body.dg-v29 .nav a,
  body.dg-v29 .dropdown-trigger {
    min-height: 47px !important;
    border-radius: 17px !important;
  }

  /* Adjust top spacing because header is now smaller */
  body.dg-v29 .mobile-app-quickstrip {
    width: calc(100% - 16px) !important;
    margin-top: 10px !important;
  }

  body.dg-v29 .hero,
  body.dg-v29 .dg-clean-banner,
  body.dg-v29 .gallery-modern-hero,
  body.dg-v29 .home-hero-v17 .hero-inner {
    margin-top: 10px !important;
  }
}

@media (max-width: 390px) {
  body.dg-v29 .header-inner {
    grid-template-columns: 44px minmax(0, 1fr) 39px !important;
    gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.dg-v29 .brand,
  body.dg-v29 .brand img {
    width: 40px !important;
    height: 40px !important;
  }

  body.dg-v29 .socials {
    max-width: 142px !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  body.dg-v29 .socials a {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    max-width: 29px !important;
  }

  body.dg-v29 .socials img,
  body.dg-v29 .socials a img[src="tik-tok.png"] {
    width: 15px !important;
    height: 15px !important;
  }

  body.dg-v29 .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }

  body.dg-v29 .menu-toggle .bar {
    left: 9px !important;
  }
}


/* =========================================================
   DoorGO v30 — Replace home video section with process section
   ========================================================= */

body.dg-v30 .home-process-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.15), transparent 32%),
    linear-gradient(180deg,#f4fdff,#ffffff);
}

body.dg-v30 .home-process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8,121,242,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,121,242,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

body.dg-v30 .process-grid {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

body.dg-v30 .process-card {
  min-height: 245px;
  padding: 28px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 18% 15%, rgba(25,215,255,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,252,255,.82));
  border: 1px solid rgba(25,215,255,.30);
  box-shadow: 0 20px 56px rgba(0,80,130,.12);
  position: relative;
  overflow: hidden;
  text-align: left;
}

body.dg-v30 .process-card::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 90px;
  left: -130px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: rotate(18deg);
  transition: left .7s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  opacity: 0;
}

body.dg-v30 .process-card:hover::after {
  left: calc(100% + 130px);
  opacity: 1;
}

body.dg-v30 .process-icon {
  width: 66px;
  height: 66px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffffff, #e9fbff);
  border: 1px solid rgba(25,215,255,.34);
  box-shadow: 0 14px 32px rgba(8,121,242,.13);
  margin-bottom: 18px;
}

body.dg-v30 .process-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

body.dg-v30 .process-card span {
  position: absolute;
  top: 25px;
  right: 25px;
  font-size: 42px;
  line-height: 1;
  font-weight: 1000;
  color: rgba(8,121,242,.10);
}

body.dg-v30 .process-card h3 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.15;
  color: #061827;
  letter-spacing: -.03em;
}

body.dg-v30 .process-card p {
  margin: 0;
  color: #5d7485;
  line-height: 1.72;
}

/* Mobile app version */
@media (max-width: 820px) {
  body.dg-v30 .home-process-section {
    padding-top: 30px !important;
    padding-bottom: 32px !important;
    background: transparent !important;
  }

  body.dg-v30 .home-process-section::before {
    display: none !important;
  }

  body.dg-v30 .home-process-section .container {
    width: calc(100% - 18px) !important;
    max-width: 520px !important;
  }

  body.dg-v30 .home-process-section h2 {
    font-size: clamp(25px, 7vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dg-v30 .home-process-section .container > p {
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  body.dg-v30 .process-grid {
    margin-top: 20px !important;
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 2px 12px !important;
  }

  body.dg-v30 .process-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v30 .process-card {
    flex: 0 0 82% !important;
    min-height: 218px !important;
    padding: 22px 20px !important;
    border-radius: 28px !important;
    scroll-snap-align: center !important;
    background:
      radial-gradient(circle at 18% 12%, rgba(25,215,255,.17), transparent 34%),
      rgba(255,255,255,.88) !important;
    box-shadow: 0 18px 46px rgba(0,80,130,.11) !important;
    transform: none !important;
  }

  body.dg-v30 .process-card:hover {
    transform: none !important;
  }

  body.dg-v30 .process-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
  }

  body.dg-v30 .process-icon img {
    width: 28px !important;
    height: 28px !important;
  }

  body.dg-v30 .process-card span {
    top: 20px !important;
    right: 20px !important;
    font-size: 38px !important;
  }

  body.dg-v30 .process-card h3 {
    font-size: 22px !important;
  }

  body.dg-v30 .process-card p {
    font-size: 13.5px !important;
    line-height: 1.58 !important;
  }
}


/* =========================================================
   DoorGO v31 — Make banner pattern visible in dark service areas
   Fixes the circled desktop sections where the DoorGO banner vanished.
   ========================================================= */

body.dg-v31 .home-service-showcase,
body.dg-v31 .services-strip {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(25,215,255,.12), transparent 34%),
    linear-gradient(90deg, rgba(0,24,38,.96), rgba(0,52,74,.92) 50%, rgba(0,24,38,.96)) !important;
}

body.dg-v31 .home-service-showcase::before,
body.dg-v31 .services-strip::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image: url("doorgo banner.png") !important;
  background-repeat: repeat !important;
  background-size: 190px auto !important;
  background-position: center !important;
  opacity: .34 !important;
  filter: saturate(1.05) contrast(1.08) brightness(.95) !important;
}

body.dg-v31 .home-service-showcase::after,
body.dg-v31 .services-strip::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at center, rgba(0,92,132,.18), transparent 40%),
    linear-gradient(90deg, rgba(0,16,27,.52), rgba(0,37,55,.20) 48%, rgba(0,16,27,.52)) !important;
}

/* Keep content above the visible banner */
body.dg-v31 .home-service-showcase > *,
body.dg-v31 .services-strip > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Desktop service cards need readable text on the restored dark banner section */
body.dg-v31 .services-strip .center h2,
body.dg-v31 .services-strip .center p,
body.dg-v31 .services-strip .eyebrow {
  position: relative !important;
  z-index: 3 !important;
}

body.dg-v31 .services-strip .center h2 {
  color: #ffffff !important;
  text-shadow: 0 12px 34px rgba(0,0,0,.30) !important;
}

body.dg-v31 .services-strip .center p {
  color: rgba(235,250,255,.84) !important;
}

/* Make service showcase feel less empty and more premium */
body.dg-v31 .home-service-showcase {
  padding-top: 82px !important;
  padding-bottom: 78px !important;
  border-top: 1px solid rgba(25,215,255,.22) !important;
  border-bottom: 1px solid rgba(25,215,255,.22) !important;
}

body.dg-v31 .services-strip {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
  border-top: 1px solid rgba(25,215,255,.22) !important;
  border-bottom: 1px solid rgba(25,215,255,.22) !important;
}

/* Trust row chips should not look grey/dead on the banner section */
body.dg-v31 .home-service-showcase .trust-row .trust,
body.dg-v31 .trust-row .trust {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(25,215,255,.30) !important;
  color: #061827 !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.10) !important;
}

/* Card visibility on dark pattern */
body.dg-v31 .home-service-showcase .hero-tile,
body.dg-v31 .services-strip .service-card {
  box-shadow: 0 24px 70px rgba(0,0,0,.24), 0 0 0 1px rgba(25,215,255,.16) !important;
}

/* Mobile still keeps app layout, but banner pattern remains visible and not too noisy */
@media (max-width: 820px) {
  body.dg-v31 .home-service-showcase,
  body.dg-v31 .services-strip {
    background:
      radial-gradient(circle at 50% 10%, rgba(25,215,255,.16), transparent 38%),
      linear-gradient(180deg, rgba(0,34,50,.96), rgba(0,18,30,.96)) !important;
    border-radius: 0 !important;
  }

  body.dg-v31 .home-service-showcase::before,
  body.dg-v31 .services-strip::before {
    background-size: 155px auto !important;
    opacity: .25 !important;
  }

  body.dg-v31 .home-service-showcase::after,
  body.dg-v31 .services-strip::after {
    background:
      linear-gradient(180deg, rgba(0,18,30,.32), rgba(0,18,30,.58)) !important;
  }

  body.dg-v31 .home-service-showcase {
    padding-top: 28px !important;
    padding-bottom: 22px !important;
  }

  body.dg-v31 .services-strip {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  body.dg-v31 .services-strip .center h2 {
    color: #fff !important;
  }

  body.dg-v31 .services-strip .center p {
    color: rgba(235,250,255,.82) !important;
  }
}

/* Safety: if old CSS put blank backgrounds on child containers, keep them transparent */
body.dg-v31 .home-service-showcase .hero-grid,
body.dg-v31 .home-service-showcase .trust-row,
body.dg-v31 .services-strip .container {
  background: transparent !important;
}


/* =========================================================
   DoorGO v32 — readable service cards + zoomed banner pattern
   ========================================================= */

/* Banner was too zoomed out. Make the DoorGO pattern larger. */
body.dg-v32 .home-service-showcase::before,
body.dg-v32 .services-strip::before {
  background-size: 330px auto !important;
  opacity: .30 !important;
}

/* Keep overlay readable but not too dark/noisy */
body.dg-v32 .home-service-showcase::after,
body.dg-v32 .services-strip::after {
  background:
    radial-gradient(circle at center, rgba(0,92,132,.14), transparent 44%),
    linear-gradient(90deg, rgba(0,16,27,.42), rgba(0,37,55,.14) 48%, rgba(0,16,27,.42)) !important;
}

/* The card body titles were white/invisible when not hovered. Force dark readable card text. */
body.dg-v32 .services-strip .service-card,
body.dg-v32 .home-service-showcase .service-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,251,255,.95)) !important;
}

body.dg-v32 .services-strip .service-card .card-body,
body.dg-v32 .services-strip .service-card .card-body *,
body.dg-v32 .home-service-showcase .service-card .card-body,
body.dg-v32 .home-service-showcase .service-card .card-body * {
  text-shadow: none !important;
}

body.dg-v32 .services-strip .service-card h3,
body.dg-v32 .services-strip .service-card .card-body h3,
body.dg-v32 .home-service-showcase .service-card h3,
body.dg-v32 .home-service-showcase .service-card .card-body h3 {
  color: #061827 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.dg-v32 .services-strip .service-card p,
body.dg-v32 .services-strip .service-card .card-body p,
body.dg-v32 .home-service-showcase .service-card p,
body.dg-v32 .home-service-showcase .service-card .card-body p {
  color: #536b7c !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.dg-v32 .services-strip .service-card .card-link,
body.dg-v32 .home-serviceShowcase .service-card .card-link,
body.dg-v32 .home-service-showcase .service-card .card-link {
  color: #0879f2 !important;
  background: rgba(8,121,242,.08) !important;
}

/* Hero tiles: keep text readable on image cards without needing hover */
body.dg-v32 .home-service-showcase .hero-tile span {
  color: #ffffff !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.55) !important;
  opacity: 1 !important;
}

body.dg-v32 .home-service-showcase .hero-tile::after {
  opacity: .55 !important;
}

/* Desktop card polish */
body.dg-v32 .services-strip .service-card {
  border: 1px solid rgba(25,215,255,.30) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.22), 0 0 0 1px rgba(25,215,255,.16) !important;
}

body.dg-v32 .services-strip .service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 30px 84px rgba(0,0,0,.28), 0 0 0 1px rgba(25,215,255,.22) !important;
}

/* Mobile banner pattern should also be bigger/cleaner */
@media (max-width: 820px) {
  body.dg-v32 .home-service-showcase::before,
  body.dg-v32 .services-strip::before {
    background-size: 245px auto !important;
    opacity: .24 !important;
  }

  body.dg-v32 .services-strip .service-card h3,
  body.dg-v32 .services-strip .service-card .card-body h3 {
    color: #061827 !important;
  }

  body.dg-v32 .services-strip .service-card p,
  body.dg-v32 .services-strip .service-card .card-body p {
    color: #607789 !important;
  }
}


/* =========================================================
   DoorGO v33 — Fabri/Cut&Hire inspired custom video player
   Adapted to DoorGO colors/design: hover preview + centered modal.
   ========================================================= */

body.dg-v33.locked-player-open {
  overflow: hidden !important;
}

/* Video section layout */
body.dg-v33 .doorgo-video-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px !important;
  align-items: start;
}

body.dg-v33 .dg-video-card {
  position: relative;
  border-radius: 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(25,215,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,251,255,.86)) !important;
  border: 1px solid rgba(25,215,255,.34) !important;
  box-shadow: 0 22px 62px rgba(0,80,130,.14) !important;
  transition: transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s ease, border-color .34s ease !important;
}

body.dg-v33 .dg-video-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(25,215,255,.60) !important;
  box-shadow: 0 30px 86px rgba(0,80,130,.22), 0 0 44px rgba(25,215,255,.16) !important;
}

body.dg-v33 .dg-video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.22) 50%, transparent 78%);
  background-size: 250% 100%;
  background-position: -110% 0;
  transition: background-position .75s ease;
  mix-blend-mode: screen;
}

body.dg-v33 .dg-video-card:hover::before {
  background-position: 270% 0;
}

body.dg-v33 .dg-video-frame {
  width: 100%;
  position: relative;
  background: #00141f;
}

body.dg-v33 .dg-video-frame.portrait {
  aspect-ratio: 9 / 16;
  max-height: 560px;
}

body.dg-v33 .custom-player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #00141f;
  touch-action: manipulation;
}

body.dg-v33 .custom-player video {
  width: 100%;
  height: 100%;
  display: block;
  background: #00141f;
  object-fit: cover;
  cursor: pointer;
}

body.dg-v33 .forced-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
  pointer-events: none;
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease, visibility .22s ease, transform .34s ease;
}

body.dg-v33 .custom-player.previewing .forced-video-poster,
body.dg-v33 .custom-player.playing .forced-video-poster {
  opacity: 0;
  visibility: hidden;
}

body.dg-v33 .custom-player.video-warming::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.32);
  border-top-color: #fff;
  z-index: 7;
  animation: dgV33Spin .75s linear infinite;
  pointer-events: none;
}

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

/* Center play button inspired by Fabri, but DoorGO colored */
body.dg-v33 .play-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 5;
  pointer-events: auto;
  transition: opacity .25s ease, transform .25s ease;
}

body.dg-v33 .custom-player.previewing .play-center,
body.dg-v33 .custom-player.playing .play-center {
  opacity: 0;
  pointer-events: none;
  transform: scale(.92);
}

body.dg-v33 .yt-play {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg,#19d7ff,#0879f2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 16px 46px rgba(8,121,242,.38), 0 0 0 10px rgba(25,215,255,.14);
  backdrop-filter: blur(8px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}

body.dg-v33 .yt-play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 21px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 5px;
}

body.dg-v33 .dg-video-card:hover .yt-play {
  transform: scale(1.08);
  box-shadow: 0 18px 58px rgba(8,121,242,.52), 0 0 0 14px rgba(25,215,255,.10);
}

/* Player controls */
body.dg-v33 .player-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 13px 12px;
  background: linear-gradient(to top, rgba(0,15,26,.94), rgba(0,15,26,.25), transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 6;
}

body.dg-v33 .custom-player:hover .player-overlay,
body.dg-v33 .custom-player:focus-within .player-overlay,
body.dg-v33 .custom-player.playing .player-overlay,
body.dg-v33 .custom-player.paused .player-overlay,
body.dg-v33 .custom-player.previewing .player-overlay {
  opacity: 1;
}

body.dg-v33 .progress-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

body.dg-v33 .progress,
body.dg-v33 .volume {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #19d7ff var(--value,0%), rgba(255,255,255,.22) var(--value,0%));
  cursor: pointer;
  outline: none;
}

body.dg-v33 .progress { width: 100%; }
body.dg-v33 .volume { width: 64px; min-width: 48px; flex: 0 1 64px; }

body.dg-v33 .progress::-webkit-slider-thumb,
body.dg-v33 .volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 3px rgba(25,215,255,.20);
}

body.dg-v33 .progress::-moz-range-thumb,
body.dg-v33 .volume::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}

body.dg-v33 .player-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  flex-wrap: nowrap;
}

body.dg-v33 .player-left,
body.dg-v33 .player-right {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 0 1 auto;
}

body.dg-v33 .player-right {
  margin-left: auto;
  justify-content: flex-end;
}

body.dg-v33 .player-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

body.dg-v33 .player-btn:hover {
  transform: translateY(-1px) scale(1.10);
  background: rgba(25,215,255,.30);
  box-shadow: 0 0 20px rgba(25,215,255,.25);
}

body.dg-v33 .player-time {
  color: #fff;
  font-size: .80rem;
  font-weight: 800;
  min-width: 66px;
  white-space: nowrap;
  flex: 0 0 auto;
}

body.dg-v33 .dg-video-meta {
  padding: 18px 20px 20px;
  display: grid;
  gap: 5px;
}

body.dg-v33 .dg-video-meta b {
  font-size: 18px;
  color: #061827;
  letter-spacing: -.02em;
}

body.dg-v33 .dg-video-meta span {
  font-size: 14px;
  color: #617789;
}

/* Centered modal player, Fabri style but DoorGO design */
body.dg-v33 .dg-player-modal {
  position: fixed;
  inset: 0;
  z-index: 90000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0,16,26,.72);
  backdrop-filter: blur(18px) saturate(1.15);
  opacity: 0;
  transition: opacity .24s ease;
}

body.dg-v33 .dg-player-modal.open {
  display: flex;
  opacity: 1;
}

body.dg-v33 .dg-player-shell {
  width: min(92vw, 480px);
  max-height: min(88vh, 850px);
  border-radius: 34px;
  position: relative;
  overflow: hidden;
  background: #00141f;
  border: 1px solid rgba(25,215,255,.42);
  box-shadow: 0 30px 110px rgba(0,0,0,.55), 0 0 55px rgba(25,215,255,.18);
  transform: translateY(16px) scale(.96);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

body.dg-v33 .dg-player-modal.open .dg-player-shell {
  transform: translateY(0) scale(1);
}

body.dg-v33 .dg-player-shell.landscape {
  width: min(92vw, 980px);
}

body.dg-v33 .dg-player-shell video {
  width: 100%;
  height: auto;
  max-height: min(82vh, 820px);
  display: block;
  object-fit: contain;
  background: #000;
}

body.dg-v33 .dg-player-close {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  top: max(18px, env(safe-area-inset-top));
  width: 48px;
  height: 48px;
  border-radius: 17px;
  border: 1px solid rgba(25,215,255,.34);
  background: rgba(255,255,255,.92);
  color: #061827;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 90002;
  box-shadow: 0 16px 44px rgba(0,0,0,.24);
  transition: transform .2s ease, background .2s ease;
}

body.dg-v33 .dg-player-close:hover {
  transform: scale(1.05);
  background: #fff;
}

body.dg-v33 .dg-player-titlebar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 18px 20px 46px;
  background: linear-gradient(to bottom, rgba(0,15,26,.86), transparent);
  z-index: 7;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

body.dg-v33 .dg-modal-player.show-ui .dg-player-titlebar,
body.dg-v33 .dg-modal-player.paused .dg-player-titlebar {
  opacity: 1;
}

body.dg-v33 .dg-player-titlebar b {
  display: block;
  font-size: 18px;
}

body.dg-v33 .dg-player-titlebar span {
  color: rgba(235,250,255,.78);
  font-size: 13px;
}

body.dg-v33 .dg-modal-player .player-overlay {
  opacity: 0;
}

body.dg-v33 .dg-modal-player.show-ui .player-overlay,
body.dg-v33 .dg-modal-player.paused .player-overlay,
body.dg-v33 .dg-modal-player:hover .player-overlay {
  opacity: 1;
}

body.dg-v33 .dg-modal-player:fullscreen,
body.dg-v33 .dg-modal-player:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dg-v33 .dg-modal-player:fullscreen video,
body.dg-v33 .dg-modal-player:-webkit-full-screen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile */
@media (max-width: 820px) {
  body.dg-v33 .doorgo-video-grid {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 2px 14px !important;
  }

  body.dg-v33 .doorgo-video-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v33 .dg-video-card {
    flex: 0 0 76% !important;
    scroll-snap-align: center !important;
    border-radius: 28px !important;
    transform: none !important;
  }

  body.dg-v33 .dg-video-card:hover {
    transform: none !important;
  }

  body.dg-v33 .dg-video-frame.portrait {
    max-height: none;
  }

  body.dg-v33 .yt-play {
    width: 64px;
    height: 64px;
  }

  body.dg-v33 .yt-play::before {
    border-left-width: 18px;
    border-top-width: 11px;
    border-bottom-width: 11px;
  }

  body.dg-v33 .player-overlay {
    opacity: 1;
    padding: 7px 10px 10px;
  }

  body.dg-v33 .volume {
    display: none;
  }

  body.dg-v33 .player-time {
    min-width: 60px;
    font-size: .75rem;
  }

  body.dg-v33 .player-btn {
    width: 31px;
    height: 31px;
  }

  body.dg-v33 .dg-player-modal {
    padding: 14px;
  }

  body.dg-v33 .dg-player-shell {
    width: min(94vw, 420px);
    border-radius: 28px;
  }

  body.dg-v33 .dg-player-close {
    width: 44px;
    height: 44px;
    right: 14px;
    top: 14px;
  }

  body.dg-v33 .dg-video-meta {
    padding: 16px 17px 18px;
  }
}

@media (max-width: 430px) {
  body.dg-v33 .dg-video-card {
    flex-basis: 82% !important;
  }
}


/* =========================================================
   DoorGO v34 — Polished video cards/player fix
   Fixes ugly inline controls/black frames. Cards are clean
   preview cards; full controls appear only in the modal.
   ========================================================= */

body.dg-v34 .electric-video-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.18), transparent 34%),
    linear-gradient(180deg, #f2fcff 0%, #ffffff 58%, #eefbff 100%) !important;
  overflow: hidden;
  position: relative;
}

body.dg-v34 .electric-video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("doorgo banner.png");
  background-size: 300px auto;
  background-repeat: repeat;
  background-position: center;
  opacity: .06;
}

body.dg-v34 .electric-video-section > * {
  position: relative;
  z-index: 2;
}

body.dg-v34 .doorgo-video-grid {
  max-width: 1080px;
  margin: 30px auto 0;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(230px, 300px)) !important;
  justify-content: center !important;
  gap: 24px !important;
}

/* Card becomes a premium phone-reel preview, not a full ugly player */
body.dg-v34 .dg-video-card {
  padding: 12px 12px 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(231,251,255,.92)) !important;
  border: 1px solid rgba(25,215,255,.34) !important;
  box-shadow:
    0 22px 70px rgba(0,75,125,.16),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
  overflow: hidden !important;
  transform: none !important;
}

body.dg-v34 .dg-video-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 30px 90px rgba(0,75,125,.23),
    0 0 45px rgba(25,215,255,.12),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

body.dg-v34 .dg-video-card::before {
  z-index: 12 !important;
  border-radius: 34px !important;
  opacity: .85;
}

body.dg-v34 .video-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 20;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #0879f2;
  border: 1px solid rgba(25,215,255,.30);
  box-shadow: 0 10px 24px rgba(0,60,100,.14);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .05em;
  pointer-events: none;
}

body.dg-v34 .dg-video-frame {
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #00141f !important;
  box-shadow:
    0 12px 34px rgba(0,22,36,.25),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

body.dg-v34 .dg-video-frame.portrait {
  aspect-ratio: 9 / 13.2 !important;
  max-height: 440px !important;
}

/* Make preview fill nicely and hide black-bar feeling in the cards only */
body.dg-v34 .dg-video-card .custom-player video,
body.dg-v34 .dg-video-card .forced-video-poster {
  object-fit: cover !important;
  transform: scale(1.075) !important;
  transform-origin: center center !important;
}

/* No controls inside the small cards. Only preview + play button. */
body.dg-v34 .dg-video-card .player-overlay {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.dg-v34 .dg-video-card .play-center {
  opacity: 1 !important;
  transform: none !important;
}

body.dg-v34 .dg-video-card .custom-player.previewing .play-center,
body.dg-v34 .dg-video-card .custom-player.playing .play-center {
  opacity: 1 !important;
  transform: scale(.88) !important;
}

body.dg-v34 .dg-video-card .custom-player.previewing .yt-play,
body.dg-v34 .dg-video-card .custom-player.playing .yt-play {
  opacity: .72;
  transform: scale(.86);
}

body.dg-v34 .yt-play {
  width: 68px !important;
  height: 68px !important;
  background: linear-gradient(135deg,#19d7ff,#0879f2) !important;
  box-shadow:
    0 16px 42px rgba(8,121,242,.40),
    0 0 0 11px rgba(25,215,255,.13) !important;
}

body.dg-v34 .dg-video-meta {
  padding: 17px 8px 20px !important;
}

body.dg-v34 .dg-video-meta b {
  font-size: 19px !important;
  color: #061827 !important;
  line-height: 1.15;
}

body.dg-v34 .dg-video-meta span {
  margin-top: 2px;
  font-size: 14px !important;
  color: #617789 !important;
}

/* Modal is the actual player with controls */
body.dg-v34 .dg-player-modal {
  background:
    radial-gradient(circle at 50% 20%, rgba(25,215,255,.12), transparent 36%),
    rgba(0,16,26,.78) !important;
}

body.dg-v34 .dg-player-shell {
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    #00141f !important;
  border-radius: 34px !important;
  border: 1px solid rgba(25,215,255,.44) !important;
  box-shadow:
    0 34px 120px rgba(0,0,0,.62),
    0 0 70px rgba(25,215,255,.17) !important;
}

body.dg-v34 .dg-modal-player {
  border-radius: 26px;
  overflow: hidden;
  background: #000;
}

body.dg-v34 .dg-player-modal .player-overlay {
  display: flex !important;
  opacity: 1;
  pointer-events: auto !important;
}

body.dg-v34 .dg-player-shell video {
  border-radius: 24px;
  background: #000;
}

/* Make modal controls look cleaner */
body.dg-v34 .dg-player-modal .player-overlay {
  padding: 10px 14px 14px !important;
  background: linear-gradient(to top, rgba(0,15,26,.94), rgba(0,15,26,.32), transparent) !important;
}

body.dg-v34 .dg-player-modal .progress,
body.dg-v34 .dg-player-modal .volume {
  height: 6px !important;
}

body.dg-v34 .dg-player-modal .player-btn {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.24) !important;
}

body.dg-v34 .dg-player-modal .player-btn:hover {
  background: rgba(25,215,255,.32) !important;
}

/* Header row polish */
body.dg-v34 .gallery-layout-head {
  align-items: end !important;
}

body.dg-v34 .gallery-layout-head h2 {
  max-width: 760px;
}

body.dg-v34 .gallery-mini-text {
  max-width: 720px !important;
}

/* Mobile: cards become clean swipe reels, no ugly controls */
@media (max-width: 820px) {
  body.dg-v34 .doorgo-video-grid {
    display: flex !important;
    max-width: none !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding: 0 4px 16px !important;
    margin-top: 22px !important;
  }

  body.dg-v34 .doorgo-video-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v34 .dg-video-card {
    flex: 0 0 76% !important;
    border-radius: 30px !important;
    padding: 10px 10px 0 !important;
    scroll-snap-align: center !important;
  }

  body.dg-v34 .dg-video-frame.portrait {
    max-height: none !important;
    aspect-ratio: 9 / 13.4 !important;
    border-radius: 24px !important;
  }

  body.dg-v34 .video-badge {
    top: 18px !important;
    left: 18px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
  }

  body.dg-v34 .yt-play {
    width: 62px !important;
    height: 62px !important;
  }

  body.dg-v34 .yt-play::before {
    border-left-width: 18px !important;
    border-top-width: 11px !important;
    border-bottom-width: 11px !important;
  }

  body.dg-v34 .dg-video-meta {
    padding: 15px 8px 18px !important;
  }

  body.dg-v34 .dg-video-meta b {
    font-size: 17px !important;
  }

  body.dg-v34 .dg-video-meta span {
    font-size: 13px !important;
  }

  body.dg-v34 .dg-player-modal {
    padding: 12px !important;
  }

  body.dg-v34 .dg-player-shell {
    width: min(94vw, 420px) !important;
    border-radius: 30px !important;
    padding: 8px !important;
  }

  body.dg-v34 .dg-modal-player {
    border-radius: 23px !important;
  }

  body.dg-v34 .dg-player-shell video {
    border-radius: 21px !important;
  }

  body.dg-v34 .dg-player-modal .volume {
    display: none !important;
  }

  body.dg-v34 .dg-player-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 430px) {
  body.dg-v34 .dg-video-card {
    flex-basis: 84% !important;
  }
}


/* =========================================================
   DoorGO v35 — Fabri-like full portrait video cards
   Full video shown, not cropped. Smoother modal/fullscreen entry.
   ========================================================= */

/* Make the gallery video cards tall like Fabri, centered and full visible */
body.dg-v35 .doorgo-video-grid {
  max-width: 1110px !important;
  grid-template-columns: repeat(3, minmax(250px, 310px)) !important;
  gap: 26px !important;
  align-items: start !important;
}

body.dg-v35 .dg-video-card {
  border-radius: 32px !important;
  padding: 10px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(232,251,255,.92)) !important;
  border: 1px solid rgba(25,215,255,.36) !important;
  box-shadow:
    0 26px 80px rgba(0,75,125,.18),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
  overflow: hidden !important;
}

/* Exact portrait frame so the whole reel is shown */
body.dg-v35 .dg-video-frame.portrait {
  aspect-ratio: 9 / 16 !important;
  max-height: none !important;
  min-height: 0 !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at center, rgba(25,215,255,.16), transparent 38%),
    #00141f !important;
  position: relative !important;
}

/* Full video, no crop. This is the important fix. */
body.dg-v35 .dg-video-card .custom-player video,
body.dg-v35 .dg-video-card .forced-video-poster {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Soft blurred fill behind contain video so it doesn't feel empty */
body.dg-v35 .dg-video-card .custom-player::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: 0;
  background: var(--poster-bg, radial-gradient(circle at center, rgba(25,215,255,.15), transparent 45%));
  filter: blur(18px) saturate(1.18);
  opacity: .28;
  transform: scale(1.12);
  pointer-events: none;
}

body.dg-v35 .dg-video-card .custom-player video,
body.dg-v35 .dg-video-card .forced-video-poster,
body.dg-v35 .dg-video-card .play-center,
body.dg-v35 .dg-video-card .player-overlay {
  position: relative;
}

body.dg-v35 .dg-video-card .custom-player video {
  z-index: 1;
}

body.dg-v35 .dg-video-card .forced-video-poster {
  z-index: 4;
}

body.dg-v35 .dg-video-card .play-center {
  z-index: 5;
}

/* Use poster image as blurred background via normal img pseudo fallback */
body.dg-v35 .dg-video-card:nth-child(1) .custom-player::before {
  background: url("electric-lock-thumb-1.jpg") center / cover no-repeat;
}
body.dg-v35 .dg-video-card:nth-child(2) .custom-player::before {
  background: url("electric-lock-thumb-2.jpg") center / cover no-repeat;
}
body.dg-v35 .dg-video-card:nth-child(3) .custom-player::before {
  background: url("electric-lock-thumb-3.jpg") center / cover no-repeat;
}

/* Bigger cleaner play button, Fabri-like center */
body.dg-v35 .yt-play {
  width: 78px !important;
  height: 78px !important;
  background: linear-gradient(135deg,#19d7ff,#0879f2) !important;
  box-shadow:
    0 18px 58px rgba(8,121,242,.44),
    0 0 0 12px rgba(25,215,255,.12),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

body.dg-v35 .yt-play::before {
  border-left-width: 22px !important;
  border-top-width: 14px !important;
  border-bottom-width: 14px !important;
}

body.dg-v35 .dg-video-card:hover .yt-play {
  transform: scale(1.08) !important;
}

/* Meta area compact and clean like portfolio cards */
body.dg-v35 .dg-video-meta {
  padding: 16px 6px 8px !important;
  min-height: 74px !important;
}

body.dg-v35 .dg-video-meta b {
  font-size: 18px !important;
  line-height: 1.18 !important;
}

body.dg-v35 .dg-video-meta span {
  font-size: 13.5px !important;
}

/* Remove any accidental mini-player controls on cards forever */
body.dg-v35 .dg-video-card .player-overlay,
body.dg-v35 .dg-video-card .progress-wrap,
body.dg-v35 .dg-video-card .player-controls {
  display: none !important;
}

/* Modal entry more cinematic/smooth */
body.dg-v35 .dg-player-modal {
  background:
    radial-gradient(circle at 50% 20%, rgba(25,215,255,.16), transparent 38%),
    rgba(0,16,26,.80) !important;
  backdrop-filter: blur(20px) saturate(1.16) !important;
  transition: opacity .32s ease !important;
}

body.dg-v35 .dg-player-shell {
  transform: translateY(28px) scale(.90) rotateX(7deg) !important;
  opacity: 0 !important;
  transition:
    transform .42s cubic-bezier(.16,1,.3,1),
    opacity .28s ease,
    box-shadow .42s ease !important;
  will-change: transform, opacity;
}

body.dg-v35 .dg-player-modal.open .dg-player-shell {
  opacity: 1 !important;
  transform: translateY(0) scale(1) rotateX(0deg) !important;
  animation: dgV35ModalPop .48s cubic-bezier(.16,1,.3,1) both;
}

@keyframes dgV35ModalPop {
  0% { opacity: 0; transform: translateY(30px) scale(.90) rotateX(7deg); filter: blur(6px); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.012) rotateX(0deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0); }
}

body.dg-v35 .dg-player-shell video {
  object-fit: contain !important;
}

/* Fullscreen entry: browser controls the real transition, but this makes our player feel smooth */
body.dg-v35 .dg-modal-player.fullscreen-start {
  animation: dgV35FullscreenStart .36s cubic-bezier(.16,1,.3,1) both;
}

@keyframes dgV35FullscreenStart {
  from { transform: scale(.965); filter: brightness(.85) blur(2px); }
  to { transform: scale(1); filter: brightness(1) blur(0); }
}

body.dg-v35 .dg-modal-player:fullscreen,
body.dg-v35 .dg-modal-player:-webkit-full-screen {
  animation: dgV35FullscreenStart .36s cubic-bezier(.16,1,.3,1) both !important;
  background: #000 !important;
}

body.dg-v35 .dg-modal-player:fullscreen video,
body.dg-v35 .dg-modal-player:-webkit-full-screen video {
  object-fit: contain !important;
}

/* Hide the badge in the video frame if it makes the card crowded */
body.dg-v35 .video-badge {
  top: 20px !important;
  left: 20px !important;
  background: rgba(255,255,255,.88) !important;
}

/* Mobile full reel cards */
@media (max-width: 820px) {
  body.dg-v35 .doorgo-video-grid {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 8px 16px !important;
    max-width: none !important;
    justify-content: flex-start !important;
  }

  body.dg-v35 .dg-video-card {
    flex: 0 0 74% !important;
    max-width: 330px !important;
    scroll-snap-align: center !important;
    border-radius: 30px !important;
    padding: 9px !important;
  }

  body.dg-v35 .dg-video-frame.portrait {
    aspect-ratio: 9 / 16 !important;
    border-radius: 25px !important;
  }

  body.dg-v35 .yt-play {
    width: 68px !important;
    height: 68px !important;
  }

  body.dg-v35 .yt-play::before {
    border-left-width: 19px !important;
    border-top-width: 12px !important;
    border-bottom-width: 12px !important;
  }

  body.dg-v35 .dg-video-meta {
    min-height: 68px !important;
    padding: 14px 6px 6px !important;
  }

  body.dg-v35 .dg-player-modal.open .dg-player-shell {
    animation-duration: .36s !important;
  }
}

@media (max-width: 430px) {
  body.dg-v35 .dg-video-card {
    flex-basis: 82% !important;
  }
}


/* =========================================================
   DoorGO v36 — REAL video player fix
   Fixes duplicated/cut card previews and replaces ugly browser
   fullscreen with a custom animated fullscreen mode.
   ========================================================= */

/* Make video cards like Fabri: clean full vertical reels, not mini players */
body.dg-v36 .doorgo-video-grid {
  max-width: 1080px !important;
  grid-template-columns: repeat(3, minmax(260px, 320px)) !important;
  gap: 28px !important;
  justify-content: center !important;
  align-items: start !important;
}

body.dg-v36 .dg-video-card {
  position: relative !important;
  padding: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #00141f !important;
  border: 1px solid rgba(25,215,255,.38) !important;
  box-shadow:
    0 28px 88px rgba(0,70,118,.20),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
  transform: none !important;
  cursor: pointer !important;
}

body.dg-v36 .dg-video-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 34px 100px rgba(0,70,118,.28),
    0 0 58px rgba(25,215,255,.15),
    0 0 0 1px rgba(255,255,255,.06) inset !important;
}

/* The frame is exactly reel ratio. No white meta block underneath. */
body.dg-v36 .dg-video-frame,
body.dg-v36 .dg-video-frame.portrait {
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  max-height: none !important;
  min-height: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #00141f !important;
  box-shadow: none !important;
}

/* Critical fix: the poster/video must be absolute, not stacked. */
body.dg-v36 .dg-video-card .custom-player {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #00141f !important;
}

body.dg-v36 .dg-video-card .custom-player::before {
  content: "" !important;
  position: absolute !important;
  inset: -22px !important;
  z-index: 0 !important;
  background: #00141f !important;
  filter: blur(20px) saturate(1.15) !important;
  opacity: .42 !important;
  transform: scale(1.12) !important;
  pointer-events: none !important;
}

body.dg-v36 .dg-video-card:nth-child(1) .custom-player::before {
  background: url("electric-lock-thumb-1.jpg") center / cover no-repeat !important;
}
body.dg-v36 .dg-video-card:nth-child(2) .custom-player::before {
  background: url("electric-lock-thumb-2.jpg") center / cover no-repeat !important;
}
body.dg-v36 .dg-video-card:nth-child(3) .custom-player::before {
  background: url("electric-lock-thumb-3.jpg") center / cover no-repeat !important;
}

body.dg-v36 .dg-video-card .custom-player video,
body.dg-v36 .dg-video-card .forced-video-poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: transparent !important;
}

body.dg-v36 .dg-video-card .custom-player video {
  z-index: 1 !important;
}

body.dg-v36 .dg-video-card .forced-video-poster {
  z-index: 3 !important;
  opacity: 1;
  visibility: visible;
}

body.dg-v36 .dg-video-card .custom-player.previewing .forced-video-poster,
body.dg-v36 .dg-video-card .custom-player.playing .forced-video-poster {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* No inline controls inside cards. Cards only preview + play. */
body.dg-v36 .dg-video-card .player-overlay,
body.dg-v36 .dg-video-card .progress-wrap,
body.dg-v36 .dg-video-card .player-controls {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.dg-v36 .dg-video-card .play-center {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

body.dg-v36 .dg-video-card .custom-player.previewing .play-center,
body.dg-v36 .dg-video-card .custom-player.playing .play-center {
  opacity: .86 !important;
  transform: scale(.92) !important;
}

body.dg-v36 .yt-play {
  width: 76px !important;
  height: 76px !important;
  background: linear-gradient(135deg,#19d7ff,#0879f2) !important;
  box-shadow:
    0 18px 54px rgba(8,121,242,.46),
    0 0 0 12px rgba(25,215,255,.12),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

body.dg-v36 .yt-play::before {
  border-left-width: 22px !important;
  border-top-width: 14px !important;
  border-bottom-width: 14px !important;
}

/* Move title over the video like portfolio cards, not below as a white block */
body.dg-v36 .dg-video-meta {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 6 !important;
  padding: 84px 20px 20px !important;
  background: linear-gradient(to top, rgba(0,15,26,.88), rgba(0,15,26,.36), transparent) !important;
  pointer-events: none !important;
}

body.dg-v36 .dg-video-meta b {
  display: block !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.14 !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.55) !important;
}

body.dg-v36 .dg-video-meta span {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(235,250,255,.82) !important;
  font-size: 14px !important;
  text-shadow: 0 6px 18px rgba(0,0,0,.40) !important;
}

/* Remove badge clutter from the card */
body.dg-v36 .video-badge {
  display: none !important;
}

/* Modal: better player, custom fullscreen instead of ugly browser native fullscreen */
body.dg-v36 .dg-player-modal {
  background:
    radial-gradient(circle at 50% 18%, rgba(25,215,255,.18), transparent 38%),
    rgba(0,15,25,.82) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
  transition: opacity .30s ease !important;
}

body.dg-v36 .dg-player-shell {
  width: min(92vw, 500px) !important;
  max-height: min(88dvh, 860px) !important;
  padding: 10px !important;
  border-radius: 34px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    #00141f !important;
  border: 1px solid rgba(25,215,255,.46) !important;
  box-shadow:
    0 38px 130px rgba(0,0,0,.62),
    0 0 80px rgba(25,215,255,.18) !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(34px) scale(.88) !important;
  transition:
    opacity .28s ease,
    transform .46s cubic-bezier(.16,1,.3,1),
    width .42s cubic-bezier(.16,1,.3,1),
    height .42s cubic-bezier(.16,1,.3,1),
    border-radius .42s cubic-bezier(.16,1,.3,1) !important;
}

body.dg-v36 .dg-player-modal.open .dg-player-shell {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: dgV36ModalEnter .48s cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes dgV36ModalEnter {
  0% { opacity: 0; transform: translateY(34px) scale(.88); filter: blur(7px); }
  62% { opacity: 1; transform: translateY(-3px) scale(1.012); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

body.dg-v36 .dg-modal-player {
  width: 100% !important;
  height: 100% !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #000 !important;
  position: relative !important;
}

body.dg-v36 .dg-player-shell video {
  width: 100% !important;
  height: auto !important;
  max-height: calc(88dvh - 20px) !important;
  object-fit: contain !important;
  border-radius: 24px !important;
  background: #000 !important;
}

body.dg-v36 .dg-player-modal .player-overlay {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 10px 14px 14px !important;
  background: linear-gradient(to top, rgba(0,15,26,.94), rgba(0,15,26,.26), transparent) !important;
}

/* Custom fullscreen mode: no browser fullscreen overlay, animated and controlled */
body.dg-v36 .dg-player-modal.cinema-fullscreen {
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(25,215,255,.10), transparent 38%),
    #000 !important;
}

body.dg-v36 .dg-player-modal.cinema-fullscreen .dg-player-shell {
  width: 100vw !important;
  height: 100dvh !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
  animation: dgV36CinemaEnter .42s cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes dgV36CinemaEnter {
  from { opacity: .65; transform: scale(.94); filter: blur(4px) brightness(.82); }
  to { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}

body.dg-v36 .dg-player-modal.cinema-fullscreen .dg-modal-player {
  border-radius: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.dg-v36 .dg-player-modal.cinema-fullscreen .dg-player-shell video {
  width: 100vw !important;
  height: 100dvh !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

body.dg-v36 .dg-player-modal.cinema-fullscreen .dg-player-close {
  z-index: 90008 !important;
  background: rgba(255,255,255,.90) !important;
}

body.dg-v36 .dg-player-modal.cinema-fullscreen .player-overlay {
  padding: 12px 18px max(18px, env(safe-area-inset-bottom)) !important;
}

/* Replace fullscreen icon state */
body.dg-v36 .dg-player-modal.cinema-fullscreen .fullscreen-toggle {
  background: rgba(25,215,255,.34) !important;
}

/* Mobile video cards */
@media (max-width: 820px) {
  body.dg-v36 .doorgo-video-grid {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 8px 16px !important;
    max-width: none !important;
    justify-content: flex-start !important;
  }

  body.dg-v36 .doorgo-video-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v36 .dg-video-card {
    flex: 0 0 76% !important;
    max-width: 330px !important;
    scroll-snap-align: center !important;
    border-radius: 26px !important;
  }

  body.dg-v36 .dg-video-frame,
  body.dg-v36 .dg-video-frame.portrait {
    border-radius: 26px !important;
  }

  body.dg-v36 .yt-play {
    width: 66px !important;
    height: 66px !important;
  }

  body.dg-v36 .yt-play::before {
    border-left-width: 19px !important;
    border-top-width: 12px !important;
    border-bottom-width: 12px !important;
  }

  body.dg-v36 .dg-video-meta {
    padding: 72px 17px 17px !important;
  }

  body.dg-v36 .dg-video-meta b {
    font-size: 17px !important;
  }

  body.dg-v36 .dg-video-meta span {
    font-size: 13px !important;
  }

  body.dg-v36 .dg-player-modal {
    padding: 12px !important;
  }

  body.dg-v36 .dg-player-shell {
    width: min(94vw, 430px) !important;
    border-radius: 30px !important;
    padding: 8px !important;
  }

  body.dg-v36 .dg-modal-player {
    border-radius: 23px !important;
  }

  body.dg-v36 .dg-player-shell video {
    border-radius: 21px !important;
  }

  body.dg-v36 .dg-player-modal .volume {
    display: none !important;
  }

  body.dg-v36 .dg-player-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 430px) {
  body.dg-v36 .dg-video-card {
    flex-basis: 84% !important;
  }
}


/* =========================================================
   DoorGO v37 — real browser fullscreen layout
   Fullscreen button now uses requestFullscreen for real.
   ========================================================= */

/* Disable old fake cinema fullscreen styling */
body.dg-v37 .dg-player-modal.cinema-fullscreen .dg-player-shell,
body.dg-v37 .dg-player-modal.cinema-fullscreen .dg-modal-player,
body.dg-v37 .dg-player-modal.cinema-fullscreen .dg-player-shell video {
  width: auto !important;
  height: auto !important;
  max-height: inherit !important;
  border-radius: inherit !important;
}

/* Real fullscreen target */
body.dg-v37 .dg-modal-player:fullscreen,
body.dg-v37 .dg-modal-player:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  animation: dgV37RealFullscreenIn .28s cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes dgV37RealFullscreenIn {
  from { opacity: .65; transform: scale(.975); filter: brightness(.85); }
  to { opacity: 1; transform: scale(1); filter: brightness(1); }
}

body.dg-v37 .dg-modal-player:fullscreen video,
body.dg-v37 .dg-modal-player:-webkit-full-screen video {
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: #000 !important;
}

/* Keep custom controls visible in real fullscreen */
body.dg-v37 .dg-modal-player:fullscreen .player-overlay,
body.dg-v37 .dg-modal-player:-webkit-full-screen .player-overlay {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 14px 22px max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483647 !important;
  background: linear-gradient(to top, rgba(0,0,0,.90), rgba(0,0,0,.34), transparent) !important;
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.dg-v37 .dg-modal-player:fullscreen .dg-player-titlebar,
body.dg-v37 .dg-modal-player:-webkit-full-screen .dg-player-titlebar {
  position: fixed !important;
  z-index: 2147483647 !important;
  opacity: 1 !important;
}

body.dg-v37 .dg-modal-player:fullscreen .fullscreen-toggle,
body.dg-v37 .dg-modal-player:-webkit-full-screen .fullscreen-toggle {
  background: rgba(25,215,255,.34) !important;
}

/* Smooth flash when pressing fullscreen */
body.dg-v37 .dg-modal-player.fullscreen-start {
  animation: dgV37FsTap .35s cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes dgV37FsTap {
  0% { transform: scale(.985); filter: brightness(.84) blur(1px); }
  100% { transform: scale(1); filter: brightness(1) blur(0); }
}

/* Desktop modal sizing stays clean before fullscreen */
body.dg-v37 .dg-player-shell {
  width: min(92vw, 520px) !important;
}

/* Mobile fullscreen controls */
@media (max-width: 820px) {
  body.dg-v37 .dg-modal-player:fullscreen .player-overlay,
  body.dg-v37 .dg-modal-player:-webkit-full-screen .player-overlay {
    padding: 12px 14px max(16px, env(safe-area-inset-bottom)) !important;
  }

  body.dg-v37 .dg-modal-player:fullscreen .volume,
  body.dg-v37 .dg-modal-player:-webkit-full-screen .volume {
    display: none !important;
  }
}


/* =========================================================
   DoorGO v38 — Gallery photo grid fixed
   All gallery photos now use identical card sizes and clean crop.
   Removes messy masonry/random sizes.
   ========================================================= */

body.dg-v38 .gallery-page-section {
  position: relative !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.14), transparent 35%),
    linear-gradient(180deg, #f4fdff 0%, #ffffff 58%, #eefbff 100%) !important;
  overflow: hidden !important;
}

body.dg-v38 .gallery-page-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("doorgo banner.png") !important;
  background-size: 260px auto !important;
  background-repeat: repeat !important;
  background-position: center !important;
  opacity: .045 !important;
  pointer-events: none !important;
}

body.dg-v38 .gallery-page-section > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Force clean equal grid. This overrides all old masonry/nth-child sizing. */
body.dg-v38 .real-gallery-grid,
body.dg-v38 .portfolio-masonry {
  width: min(100%, 1060px) !important;
  margin: 30px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 22px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* Reset any previous weird item spans/sizes */
body.dg-v38 .real-gallery-grid .real-gallery-card,
body.dg-v38 .portfolio-masonry .real-gallery-card,
body.dg-v38 .real-gallery-card {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #eafaff !important;
  border: 1px solid rgba(25,215,255,.32) !important;
  box-shadow:
    0 18px 48px rgba(0,75,125,.12),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
  transform: none !important;
}

/* Same image behavior everywhere */
body.dg-v38 .real-gallery-card img,
body.dg-v38 .portfolio-masonry .real-gallery-card img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

/* Manual crop positions so each lock photo looks centered better */
body.dg-v38 .real-gallery-card:nth-child(1) img { object-position: center center !important; }
body.dg-v38 .real-gallery-card:nth-child(2) img { object-position: center center !important; }
body.dg-v38 .real-gallery-card:nth-child(3) img { object-position: center center !important; }
body.dg-v38 .real-gallery-card:nth-child(4) img { object-position: center center !important; }
body.dg-v38 .real-gallery-card:nth-child(5) img { object-position: center center !important; }
body.dg-v38 .real-gallery-card:nth-child(6) img { object-position: center center !important; }
body.dg-v38 .real-gallery-card:nth-child(7) img { object-position: center center !important; }
body.dg-v38 .real-gallery-card:nth-child(8) img { object-position: center center !important; }
body.dg-v38 .real-gallery-card:nth-child(9) img { object-position: center center !important; }

/* Caption overlay consistent */
body.dg-v38 .real-gallery-card figcaption {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 70px 18px 18px !important;
  background: linear-gradient(to top, rgba(0,18,30,.72), rgba(0,18,30,.18), transparent) !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

body.dg-v38 .real-gallery-card figcaption b {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 1000 !important;
  text-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
}

/* Nice hover without breaking size */
body.dg-v38 .real-gallery-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 26px 70px rgba(0,75,125,.18),
    0 0 45px rgba(25,215,255,.12) !important;
  border-color: rgba(25,215,255,.52) !important;
}

body.dg-v38 .real-gallery-card:hover img {
  transform: scale(1.035) !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
}

/* Fix heading layout */
body.dg-v38 .gallery-layout-head {
  width: min(100%, 1060px) !important;
  margin: 0 auto !important;
  align-items: end !important;
}

body.dg-v38 .gallery-layout-head h2 {
  max-width: 720px !important;
}

/* Tablet */
@media (max-width: 980px) {
  body.dg-v38 .real-gallery-grid,
  body.dg-v38 .portfolio-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.dg-v38 .real-gallery-grid .real-gallery-card,
  body.dg-v38 .portfolio-masonry .real-gallery-card,
  body.dg-v38 .real-gallery-card {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
}

/* Mobile app-like gallery: still same size, one clean column */
@media (max-width: 820px) {
  body.dg-v38 .gallery-page-section {
    padding-top: 34px !important;
  }

  body.dg-v38 .gallery-layout-head {
    width: calc(100% - 18px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.dg-v38 .real-gallery-grid,
  body.dg-v38 .portfolio-masonry {
    width: calc(100% - 18px) !important;
    margin-top: 22px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v38 .real-gallery-grid .real-gallery-card,
  body.dg-v38 .portfolio-masonry .real-gallery-card,
  body.dg-v38 .real-gallery-card {
    height: 285px !important;
    min-height: 285px !important;
    max-height: 285px !important;
    border-radius: 26px !important;
  }

  body.dg-v38 .real-gallery-card:hover {
    transform: none !important;
  }

  body.dg-v38 .real-gallery-card:active {
    transform: scale(.985) !important;
  }
}

@media (max-width: 420px) {
  body.dg-v38 .real-gallery-grid .real-gallery-card,
  body.dg-v38 .portfolio-masonry .real-gallery-card,
  body.dg-v38 .real-gallery-card {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
  }
}


/* =========================================================
   DoorGO v39 — Gallery full-image premium cards
   Keeps click behavior/data-full, but images are NOT cropped.
   Removes ugly dark half overlay and uses clean contain cards.
   ========================================================= */

body.dg-v39 .gallery-page-section {
  padding-top: 72px !important;
  padding-bottom: 82px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.13), transparent 34%),
    linear-gradient(180deg, #f6fdff 0%, #ffffff 55%, #eefbff 100%) !important;
}

/* Clean heading alignment */
body.dg-v39 .gallery-layout-head {
  width: min(100%, 1060px) !important;
  margin: 0 auto 24px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 18px !important;
  align-items: end !important;
}

body.dg-v39 .gallery-layout-head h2 {
  margin: 8px 0 0 !important;
  font-size: clamp(38px, 4.2vw, 64px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

/* Equal grid, but full images visible */
body.dg-v39 .real-gallery-grid,
body.dg-v39 .portfolio-masonry {
  width: min(100%, 1060px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

/* Premium photo cards, equal sizing */
body.dg-v39 .real-gallery-card,
body.dg-v39 .portfolio-masonry .real-gallery-card,
body.dg-v39 .real-gallery-grid .real-gallery-card {
  width: 100% !important;
  height: 330px !important;
  min-height: 330px !important;
  max-height: 330px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(25,215,255,.15), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,251,255,.86)) !important;
  border: 1px solid rgba(25,215,255,.32) !important;
  box-shadow:
    0 18px 50px rgba(0,75,125,.13),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
  cursor: pointer !important;
  transform: none !important;
  isolation: isolate !important;
}

/* Blurred same-image fill behind contain image so empty areas look intentional */
body.dg-v39 .real-gallery-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -18px !important;
  z-index: 0 !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: blur(20px) saturate(1.12) brightness(1.05) !important;
  opacity: .22 !important;
  transform: scale(1.08) !important;
  pointer-events: none !important;
}

body.dg-v39 .real-gallery-card:nth-child(1)::before { background-image: url("gallery-1.jpg") !important; }
body.dg-v39 .real-gallery-card:nth-child(2)::before { background-image: url("gallery-2.jpg") !important; }
body.dg-v39 .real-gallery-card:nth-child(3)::before { background-image: url("gallery-3.jpg") !important; }
body.dg-v39 .real-gallery-card:nth-child(4)::before { background-image: url("gallery-4.jpg") !important; }
body.dg-v39 .real-gallery-card:nth-child(5)::before { background-image: url("gallery-5.jpg") !important; }
body.dg-v39 .real-gallery-card:nth-child(6)::before { background-image: url("gallery-6.jpg") !important; }
body.dg-v39 .real-gallery-card:nth-child(7)::before { background-image: url("gallery-7.jpg") !important; }
body.dg-v39 .real-gallery-card:nth-child(8)::before { background-image: url("gallery-8.jpg") !important; }
body.dg-v39 .real-gallery-card:nth-child(9)::before { background-image: url("gallery-9.jpg") !important; }

body.dg-v39 .real-gallery-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 23px !important;
  z-index: 1 !important;
  background: rgba(255,255,255,.34) !important;
  border: 1px solid rgba(255,255,255,.50) !important;
  pointer-events: none !important;
}

/* IMPORTANT: show the FULL image, no cutting */
body.dg-v39 .real-gallery-card img,
body.dg-v39 .portfolio-masonry .real-gallery-card img {
  position: absolute !important;
  inset: 14px 14px 56px 14px !important;
  z-index: 2 !important;
  width: calc(100% - 28px) !important;
  height: calc(100% - 70px) !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.36) !important;
  transform: none !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

/* Clean small caption pill, not giant ugly dark blur */
body.dg-v39 .real-gallery-card figcaption {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  z-index: 4 !important;
  height: 36px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(255,255,255,.84) !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  border: 1px solid rgba(25,215,255,.26) !important;
  border-radius: 999px !important;
  color: #061827 !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  box-shadow: 0 10px 24px rgba(0,75,125,.10) !important;
}

body.dg-v39 .real-gallery-card figcaption::before {
  content: "" !important;
  width: 18px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #19d7ff, #0879f2) !important;
  margin-right: 9px !important;
  flex: 0 0 auto !important;
}

body.dg-v39 .real-gallery-card figcaption b {
  color: #061827 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hover stays premium but does not break the full-image layout */
body.dg-v39 .real-gallery-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(25,215,255,.55) !important;
  box-shadow:
    0 26px 74px rgba(0,75,125,.19),
    0 0 45px rgba(25,215,255,.13),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

body.dg-v39 .real-gallery-card:hover img {
  transform: none !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
}

body.dg-v39 .real-gallery-card:hover figcaption {
  background: rgba(255,255,255,.94) !important;
}

/* Tablet */
@media (max-width: 980px) {
  body.dg-v39 .gallery-layout-head,
  body.dg-v39 .real-gallery-grid,
  body.dg-v39 .portfolio-masonry {
    width: min(100% - 28px, 720px) !important;
  }

  body.dg-v39 .real-gallery-grid,
  body.dg-v39 .portfolio-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.dg-v39 .real-gallery-card,
  body.dg-v39 .portfolio-masonry .real-gallery-card,
  body.dg-v39 .real-gallery-grid .real-gallery-card {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }
}

/* Mobile: full image cards, one column, app feel */
@media (max-width: 820px) {
  body.dg-v39 .gallery-page-section {
    padding-top: 34px !important;
    padding-bottom: 40px !important;
  }

  body.dg-v39 .gallery-layout-head {
    width: calc(100% - 18px) !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  body.dg-v39 .gallery-layout-head h2 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.04 !important;
  }

  body.dg-v39 .real-gallery-grid,
  body.dg-v39 .portfolio-masonry {
    width: calc(100% - 18px) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v39 .real-gallery-card,
  body.dg-v39 .portfolio-masonry .real-gallery-card,
  body.dg-v39 .real-gallery-grid .real-gallery-card {
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    border-radius: 28px !important;
  }

  body.dg-v39 .real-gallery-card:hover {
    transform: none !important;
  }

  body.dg-v39 .real-gallery-card:active {
    transform: scale(.985) !important;
  }
}

@media (max-width: 420px) {
  body.dg-v39 .real-gallery-card,
  body.dg-v39 .portfolio-masonry .real-gallery-card,
  body.dg-v39 .real-gallery-grid .real-gallery-card {
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
  }
}


/* =========================================================
   DoorGO v40 — Gallery full photo + Georgian text cut fix
   Photos are full visible, captions are NOT clipped.
   ========================================================= */

/* Georgian text safety everywhere important */
body.dg-v40 h1,
body.dg-v40 h2,
body.dg-v40 h3,
body.dg-v40 b,
body.dg-v40 .btn,
body.dg-v40 .card-link,
body.dg-v40 .eyebrow,
body.dg-v40 figcaption,
body.dg-v40 .nav a,
body.dg-v40 .dropdown-trigger {
  line-height: 1.28 !important;
}

/* Gallery title had tight line-height */
body.dg-v40 .gallery-layout-head h2 {
  line-height: 1.13 !important;
  padding-bottom: 8px !important;
  overflow: visible !important;
}

/* Rebuild gallery photo cards as full-photo cards, not cropped absolute overlays */
body.dg-v40 .real-gallery-card,
body.dg-v40 .portfolio-masonry .real-gallery-card,
body.dg-v40 .real-gallery-grid .real-gallery-card {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(25,215,255,.15), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(232,251,255,.90)) !important;
  overflow: hidden !important;
}

/* Keep soft background, but no dark/ugly overlay */
body.dg-v40 .real-gallery-card::after {
  display: none !important;
}

/* IMPORTANT: full photo shown with contain, static layout */
body.dg-v40 .real-gallery-card img,
body.dg-v40 .portfolio-masonry .real-gallery-card img,
body.dg-v40 .real-gallery-grid .real-gallery-card img {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.72), rgba(229,250,255,.64)) !important;
  transform: none !important;
  filter: saturate(1.04) contrast(1.02) !important;
  padding: 0 !important;
}

/* Caption becomes normal bottom pill/row so letters cannot be cut */
body.dg-v40 .real-gallery-card figcaption,
body.dg-v40 .portfolio-masonry .real-gallery-card figcaption,
body.dg-v40 .real-gallery-grid .real-gallery-card figcaption {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 9px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  border: 1px solid rgba(25,215,255,.26) !important;
  border-radius: 18px !important;
  color: #061827 !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  box-shadow: 0 10px 24px rgba(0,75,125,.10) !important;
}

body.dg-v40 .real-gallery-card figcaption::before {
  content: "" !important;
  width: 18px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #19d7ff, #0879f2) !important;
  margin-right: 9px !important;
  flex: 0 0 auto !important;
}

body.dg-v40 .real-gallery-card figcaption b,
body.dg-v40 .portfolio-masonry .real-gallery-card figcaption b,
body.dg-v40 .real-gallery-grid .real-gallery-card figcaption b {
  color: #061827 !important;
  font-size: 13.2px !important;
  line-height: 1.38 !important;
  padding: 2px 0 !important;
  font-weight: 1000 !important;
  text-shadow: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Hover should not crop the full image */
body.dg-v40 .real-gallery-card:hover img {
  transform: none !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
}

/* Tablet */
@media (max-width: 980px) {
  body.dg-v40 .real-gallery-card,
  body.dg-v40 .portfolio-masonry .real-gallery-card,
  body.dg-v40 .real-gallery-grid .real-gallery-card {
    height: 370px !important;
    min-height: 370px !important;
    max-height: 370px !important;
  }
}

/* Mobile */
@media (max-width: 820px) {
  body.dg-v40 .gallery-layout-head h2 {
    line-height: 1.16 !important;
    padding-bottom: 8px !important;
  }

  body.dg-v40 .real-gallery-card,
  body.dg-v40 .portfolio-masonry .real-gallery-card,
  body.dg-v40 .real-gallery-grid .real-gallery-card {
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
    padding: 11px !important;
    border-radius: 28px !important;
  }

  body.dg-v40 .real-gallery-card figcaption {
    min-height: 52px !important;
    padding: 9px 13px !important;
    border-radius: 17px !important;
  }

  body.dg-v40 .real-gallery-card figcaption b {
    font-size: 13.2px !important;
    line-height: 1.4 !important;
  }
}

/* Tiny phones */
@media (max-width: 420px) {
  body.dg-v40 .real-gallery-card,
  body.dg-v40 .portfolio-masonry .real-gallery-card,
  body.dg-v40 .real-gallery-grid .real-gallery-card {
    height: 365px !important;
    min-height: 365px !important;
    max-height: 365px !important;
  }
}


/* =========================================================
   DoorGO v41 — Perfect repeated DoorGO banner backgrounds
   Fixes huge/zoomed logos, bad section endings, and inconsistent
   repeat behavior across all pages.
   ========================================================= */

body.dg-v41 {
  --dg-pattern-size: 245px auto;
  --dg-pattern-opacity-dark: .30;
  --dg-pattern-opacity-light: .055;
  --dg-dark-a: rgba(0, 24, 38, .88);
  --dg-dark-b: rgba(0, 48, 70, .78);
}

/* Shared repeated pattern sections */
body.dg-v41 .dg-clean-banner,
body.dg-v41 .home-service-showcase,
body.dg-v41 .services-strip,
body.dg-v41 .hero-grid,
body.dg-v41 .footer,
body.dg-v41 .service-related,
body.dg-v41 .related-services,
body.dg-v41 .gallery-modern-hero {
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: var(--dg-pattern-size) !important;
}

/* Clean universal banner hero: smaller tile = more repeat, no giant logos */
body.dg-v41 .dg-clean-banner,
body.dg-v41 .gallery-modern-hero {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(90deg, rgba(7,33,48,.68), rgba(8,58,82,.42), rgba(7,33,48,.68)),
    url("doorgo banner.png") center top / var(--dg-pattern-size) repeat !important;
}

/* Dark service sections: real repeat pattern, smooth start/end */
body.dg-v41 .home-service-showcase,
body.dg-v41 .services-strip,
body.dg-v41 .hero-grid {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(25,215,255,.13), transparent 36%),
    linear-gradient(90deg, rgba(0,20,32,.95), rgba(0,44,64,.88) 50%, rgba(0,20,32,.95)),
    url("doorgo banner.png") center top / var(--dg-pattern-size) repeat !important;
  border-top: 1px solid rgba(25,215,255,.22) !important;
  border-bottom: 1px solid rgba(25,215,255,.22) !important;
}

/* Existing pseudo banner layers from older versions were making ugly huge/uneven logos.
   Keep them, but force them into the same smaller perfect repeat. */
body.dg-v41 .home-service-showcase::before,
body.dg-v41 .services-strip::before,
body.dg-v41 .hero-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image: url("doorgo banner.png") !important;
  background-repeat: repeat !important;
  background-size: var(--dg-pattern-size) !important;
  background-position: center top !important;
  opacity: .16 !important;
  filter: saturate(1.05) contrast(1.04) !important;
  transform: none !important;
}

/* Soft overlay over repeated pattern so text/cards stay readable */
body.dg-v41 .home-service-showcase::after,
body.dg-v41 .services-strip::after,
body.dg-v41 .hero-grid::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0,14,24,.08), rgba(0,14,24,.12)),
    radial-gradient(circle at 50% 28%, rgba(25,215,255,.12), transparent 44%) !important;
}

/* Ensure section content sits above backgrounds */
body.dg-v41 .home-service-showcase > *,
body.dg-v41 .services-strip > *,
body.dg-v41 .hero-grid > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Better desktop section endings: no huge empty dark zone */
body.dg-v41 .home-service-showcase {
  padding-top: 76px !important;
  padding-bottom: 76px !important;
}

body.dg-v41 .services-strip {
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}

body.dg-v41 .hero-grid {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

/* Detail page "სხვა სერვისები" sections sometimes inherit too much height */
body.dg-v41 section.services-strip .service-grid,
body.dg-v41 .services-strip .service-grid {
  margin-top: 28px !important;
}

/* Make cards sit cleaner on the repeated banner */
body.dg-v41 .services-strip .service-card,
body.dg-v41 .home-service-showcase .service-card,
body.dg-v41 .home-service-showcase .hero-tile {
  box-shadow: 0 24px 72px rgba(0,0,0,.22), 0 0 0 1px rgba(25,215,255,.14) !important;
}

/* Footer pattern: subtle and repeated correctly */
body.dg-v41 .footer {
  background:
    linear-gradient(90deg, rgba(0,21,33,.96), rgba(0,48,70,.92), rgba(0,21,33,.96)),
    url("doorgo banner.png") center top / 245px auto repeat !important;
}

/* Light page pattern areas: keep subtle but also actually repeating */
body.dg-v41 .gallery-page-section,
body.dg-v41 .electric-video-section,
body.dg-v41 .home-process-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.13), transparent 35%),
    linear-gradient(180deg, #f5fdff 0%, #ffffff 58%, #eefbff 100%) !important;
}

body.dg-v41 .gallery-page-section::before,
body.dg-v41 .electric-video-section::before,
body.dg-v41 .home-process-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: url("doorgo banner.png") !important;
  background-repeat: repeat !important;
  background-size: 230px auto !important;
  background-position: center top !important;
  opacity: .045 !important;
  transform: none !important;
}

/* Mobile: app layout should not have giant long dark areas.
   Pattern repeats smaller and ends right after content. */
@media (max-width: 820px) {
  body.dg-v41 {
    --dg-pattern-size: 155px auto;
  }

  body.dg-v41 .dg-clean-banner,
  body.dg-v41 .gallery-modern-hero {
    background:
      radial-gradient(circle at 50% 20%, rgba(255,255,255,.20), transparent 40%),
      linear-gradient(180deg, rgba(7,33,48,.62), rgba(8,58,82,.42)),
      url("doorgo banner.png") center top / var(--dg-pattern-size) repeat !important;
  }

  body.dg-v41 .home-service-showcase,
  body.dg-v41 .services-strip,
  body.dg-v41 .hero-grid {
    background:
      radial-gradient(circle at 50% 12%, rgba(25,215,255,.13), transparent 40%),
      linear-gradient(180deg, rgba(0,27,40,.96), rgba(0,16,28,.96)),
      url("doorgo banner.png") center top / var(--dg-pattern-size) repeat !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  body.dg-v41 .home-service-showcase::before,
  body.dg-v41 .services-strip::before,
  body.dg-v41 .hero-grid::before {
    background-size: var(--dg-pattern-size) !important;
    background-position: center top !important;
    opacity: .15 !important;
  }

  body.dg-v41 .home-service-showcase::after,
  body.dg-v41 .services-strip::after,
  body.dg-v41 .hero-grid::after {
    background:
      linear-gradient(180deg, rgba(0,14,24,.10), rgba(0,14,24,.18)),
      radial-gradient(circle at 50% 12%, rgba(25,215,255,.13), transparent 44%) !important;
  }

  body.dg-v41 .services-strip .container,
  body.dg-v41 .home-service-showcase .container {
    width: calc(100% - 18px) !important;
    max-width: 520px !important;
  }

  body.dg-v41 .footer {
    background:
      linear-gradient(180deg, rgba(0,21,33,.97), rgba(0,42,62,.94)),
      url("doorgo banner.png") center top / 160px auto repeat !important;
  }

  body.dg-v41 .gallery-page-section::before,
  body.dg-v41 .electric-video-section::before,
  body.dg-v41 .home-process-section::before {
    background-size: 155px auto !important;
    opacity: .045 !important;
  }
}

/* Tiny phones: even denser repeat */
@media (max-width: 420px) {
  body.dg-v41 {
    --dg-pattern-size: 138px auto;
  }

  body.dg-v41 .home-service-showcase,
  body.dg-v41 .services-strip,
  body.dg-v41 .hero-grid {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}


/* =========================================================
   DoorGO v42 — true seamless repeating pattern tiles
   Uses new small tile images instead of the huge 1920x1080 banner.
   This removes visible restart lines/seams and makes the pattern
   repeat like a proper wallpaper/window.
   ========================================================= */

body.dg-v42 {
  --dg-tile-light: url("doorgo-pattern-tile-light.png");
  --dg-tile-dark: url("doorgo-pattern-tile-dark.png");
  --dg-tile-size-desktop: 260px 180px;
  --dg-tile-size-mobile: 190px 132px;
}

/* IMPORTANT:
   Stop using the giant 1920x1080 banner image for repeating sections.
   It was showing ugly seams/lines at the restart point. */
body.dg-v42 .dg-clean-banner,
body.dg-v42 .gallery-modern-hero,
body.dg-v42 .home-service-showcase,
body.dg-v42 .services-strip,
body.dg-v42 .hero-grid,
body.dg-v42 .footer {
  background-repeat: repeat !important;
  background-position: left top !important;
}

/* Dark repeated sections use the light/cyan tile */
body.dg-v42 .home-service-showcase,
body.dg-v42 .services-strip,
body.dg-v42 .hero-grid,
body.dg-v42 .footer {
  background:
    radial-gradient(circle at 50% 18%, rgba(25,215,255,.13), transparent 36%),
    linear-gradient(90deg, rgba(0,19,31,.94), rgba(0,45,66,.86) 50%, rgba(0,19,31,.94)),
    var(--dg-tile-dark) left top / var(--dg-tile-size-desktop) repeat !important;
}

/* Page/banner heroes use the same tile system with readable overlay */
body.dg-v42 .dg-clean-banner,
body.dg-v42 .gallery-modern-hero {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(90deg, rgba(7,33,48,.66), rgba(8,58,82,.42), rgba(7,33,48,.66)),
    var(--dg-tile-dark) left top / var(--dg-tile-size-desktop) repeat !important;
}

/* Light sections use low-opacity tile through pseudo layer */
body.dg-v42 .gallery-page-section,
body.dg-v42 .electric-video-section,
body.dg-v42 .home-process-section {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.13), transparent 35%),
    linear-gradient(180deg, #f5fdff 0%, #ffffff 58%, #eefbff 100%) !important;
}

body.dg-v42 .gallery-page-section::before,
body.dg-v42 .electric-video-section::before,
body.dg-v42 .home-process-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: var(--dg-tile-light) !important;
  background-repeat: repeat !important;
  background-size: var(--dg-tile-size-desktop) !important;
  background-position: left top !important;
  opacity: .42 !important;
  transform: none !important;
  filter: none !important;
}

/* Kill old pseudo-layers that were adding giant logos and visible seam lines */
body.dg-v42 .home-service-showcase::before,
body.dg-v42 .services-strip::before,
body.dg-v42 .hero-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image: var(--dg-tile-dark) !important;
  background-repeat: repeat !important;
  background-size: var(--dg-tile-size-desktop) !important;
  background-position: left top !important;
  opacity: .32 !important;
  filter: none !important;
  transform: none !important;
}

/* Soft overlay only, no lines */
body.dg-v42 .home-service-showcase::after,
body.dg-v42 .services-strip::after,
body.dg-v42 .hero-grid::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(25,215,255,.10), transparent 44%),
    linear-gradient(180deg, rgba(0,14,24,.06), rgba(0,14,24,.12)) !important;
  transform: none !important;
}

/* Footer: subtle pattern but seamless */
body.dg-v42 .footer {
  background:
    linear-gradient(90deg, rgba(0,21,33,.96), rgba(0,48,70,.92), rgba(0,21,33,.96)),
    var(--dg-tile-dark) left top / var(--dg-tile-size-desktop) repeat !important;
}

/* Clean vertical boundaries: sections end where content ends */
body.dg-v42 .home-service-showcase,
body.dg-v42 .services-strip {
  padding-top: 76px !important;
  padding-bottom: 76px !important;
  border-top: 1px solid rgba(25,215,255,.22) !important;
  border-bottom: 1px solid rgba(25,215,255,.22) !important;
}

/* Avoid old child backgrounds hiding the repeated tile */
body.dg-v42 .home-service-showcase .hero-grid,
body.dg-v42 .services-strip .container,
body.dg-v42 .home-service-showcase .container {
  background: transparent !important;
}

/* Place content above light pseudo layers */
body.dg-v42 .gallery-page-section > *,
body.dg-v42 .electric-video-section > *,
body.dg-v42 .home-process-section > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Mobile uses smaller tile so the repeat looks intentional, not zoomed */
@media (max-width: 820px) {
  body.dg-v42 {
    --dg-tile-size-desktop: var(--dg-tile-size-mobile);
  }

  body.dg-v42 .home-service-showcase,
  body.dg-v42 .services-strip,
  body.dg-v42 .hero-grid {
    background:
      radial-gradient(circle at 50% 12%, rgba(25,215,255,.13), transparent 40%),
      linear-gradient(180deg, rgba(0,27,40,.96), rgba(0,16,28,.96)),
      var(--dg-tile-dark) left top / var(--dg-tile-size-mobile) repeat !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  body.dg-v42 .dg-clean-banner,
  body.dg-v42 .gallery-modern-hero {
    background:
      radial-gradient(circle at 50% 20%, rgba(255,255,255,.20), transparent 40%),
      linear-gradient(180deg, rgba(7,33,48,.62), rgba(8,58,82,.42)),
      var(--dg-tile-dark) left top / var(--dg-tile-size-mobile) repeat !important;
  }

  body.dg-v42 .home-service-showcase::before,
  body.dg-v42 .services-strip::before,
  body.dg-v42 .hero-grid::before {
    background-size: var(--dg-tile-size-mobile) !important;
    opacity: .28 !important;
  }

  body.dg-v42 .gallery-page-section::before,
  body.dg-v42 .electric-video-section::before,
  body.dg-v42 .home-process-section::before {
    background-size: var(--dg-tile-size-mobile) !important;
    opacity: .38 !important;
  }

  body.dg-v42 .footer {
    background:
      linear-gradient(180deg, rgba(0,21,33,.97), rgba(0,42,62,.94)),
      var(--dg-tile-dark) left top / var(--dg-tile-size-mobile) repeat !important;
  }
}

@media (max-width: 420px) {
  body.dg-v42 {
    --dg-tile-size-mobile: 160px 111px;
  }

  body.dg-v42 .home-service-showcase,
  body.dg-v42 .services-strip,
  body.dg-v42 .hero-grid {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}


/* =========================================================
   DoorGO v43 — exact banner/white section split
   1st/6th/8th referenced areas = clean white.
   2nd/3rd/4th/5th/7th/9th referenced hero banners = original banner color.
   ========================================================= */

/* ORIGINAL BANNER COLOR for all top page hero banners */
body.dg-v43 .dg-clean-banner,
body.dg-v43 .gallery-modern-hero {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(90deg, rgba(8,31,43,.58), rgba(7,62,86,.32), rgba(8,31,43,.58)),
    url("doorgo banner.png") center center / 360px auto repeat !important;
  background-repeat: repeat !important;
  background-position: center center !important;
  border-top: 1px solid rgba(25,215,255,.16) !important;
  border-bottom: 1px solid rgba(25,215,255,.18) !important;
}

/* remove the dark tile stripe effect from v42 on hero banners */
body.dg-v43 .dg-clean-banner::before,
body.dg-v43 .gallery-modern-hero::before {
  background-image: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* WHITE instead of banner for the home process section (screenshot 1) */
body.dg-v43 .home-process-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.10), transparent 32%),
    linear-gradient(180deg, #f6fdff 0%, #ffffff 44%, #ffffff 100%) !important;
}

body.dg-v43 .home-process-section::before {
  display: none !important;
  opacity: 0 !important;
  background-image: none !important;
}

/* WHITE instead of banner for gallery content sections (screenshot 6) */
body.dg-v43 .gallery-page-section,
body.dg-v43 .electric-video-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.09), transparent 32%),
    linear-gradient(180deg, #f7fdff 0%, #ffffff 46%, #ffffff 100%) !important;
}

body.dg-v43 .gallery-page-section::before,
body.dg-v43 .electric-video-section::before {
  display: none !important;
  opacity: 0 !important;
  background-image: none !important;
}

/* WHITE instead of banner for contact content area (screenshot 8) */
body.dg-v43 .contact-section,
body.dg-v43 .contact-modern,
body.dg-v43 .contact-page,
body.dg-v43 main:has(.contact-cards) {
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.10), transparent 32%),
    linear-gradient(180deg, #f7fdff 0%, #ffffff 48%, #ffffff 100%) !important;
}

body.dg-v43 .contact-section::before,
body.dg-v43 .contact-modern::before,
body.dg-v43 .contact-page::before,
body.dg-v43 main:has(.contact-cards)::before {
  display: none !important;
  opacity: 0 !important;
  background-image: none !important;
}

/* If contact content is just a generic section, make only contact page sections white */
body.dg-v43:has(.contact-cards) .section {
  background:
    radial-gradient(circle at 50% 0%, rgba(25,215,255,.08), transparent 34%),
    linear-gradient(180deg, #f7fdff 0%, #ffffff 52%, #ffffff 100%) !important;
}

body.dg-v43:has(.contact-cards) .section::before {
  display: none !important;
}

/* Keep service/detail dark sections with original banner color, not the light tile */
body.dg-v43 .home-service-showcase,
body.dg-v43 .services-strip,
body.dg-v43 .hero-grid {
  background:
    radial-gradient(circle at 50% 18%, rgba(25,215,255,.11), transparent 36%),
    linear-gradient(90deg, rgba(0,20,32,.92), rgba(0,48,70,.84) 50%, rgba(0,20,32,.92)),
    url("doorgo banner.png") center center / 380px auto repeat !important;
}

body.dg-v43 .home-service-showcase::before,
body.dg-v43 .services-strip::before,
body.dg-v43 .hero-grid::before {
  background-image: none !important;
  display: none !important;
}

/* Keep footer dark but cleaner */
body.dg-v43 .footer {
  background:
    linear-gradient(90deg, rgba(0,21,33,.96), rgba(0,48,70,.92), rgba(0,21,33,.96)),
    url("doorgo banner.png") center center / 420px auto repeat !important;
}

/* Cards still stay readable on white sections */
body.dg-v43 .home-process-section .process-card,
body.dg-v43 .gallery-page-section .real-gallery-card,
body.dg-v43 .electric-video-section .dg-video-card,
body.dg-v43 .contact-card,
body.dg-v43 .contact-map {
  box-shadow: 0 18px 52px rgba(0,75,125,.12) !important;
}

/* Mobile: same logic, only smaller banner pattern for top banners */
@media (max-width: 820px) {
  body.dg-v43 .dg-clean-banner,
  body.dg-v43 .gallery-modern-hero {
    background:
      radial-gradient(circle at 50% 45%, rgba(255,255,255,.28), transparent 38%),
      linear-gradient(180deg, rgba(8,31,43,.58), rgba(7,62,86,.34)),
      url("doorgo banner.png") center center / 245px auto repeat !important;
  }

  body.dg-v43 .home-service-showcase,
  body.dg-v43 .services-strip,
  body.dg-v43 .hero-grid {
    background:
      radial-gradient(circle at 50% 14%, rgba(25,215,255,.11), transparent 40%),
      linear-gradient(180deg, rgba(0,27,40,.96), rgba(0,16,28,.96)),
      url("doorgo banner.png") center center / 245px auto repeat !important;
  }

  body.dg-v43 .home-process-section,
  body.dg-v43 .gallery-page-section,
  body.dg-v43 .electric-video-section,
  body.dg-v43:has(.contact-cards) .section {
    background:
      radial-gradient(circle at 50% 0%, rgba(25,215,255,.08), transparent 32%),
      linear-gradient(180deg, #f7fdff 0%, #ffffff 52%, #ffffff 100%) !important;
  }

  body.dg-v43 .home-process-section::before,
  body.dg-v43 .gallery-page-section::before,
  body.dg-v43 .electric-video-section::before,
  body.dg-v43:has(.contact-cards) .section::before {
    display: none !important;
  }
}


/* =========================================================
   DoorGO v44 — Cut & Hire style moving service windows
   Uses the same idea as Cut & Hire's reviews marquee:
   edge fade + duplicated track + infinite smooth loop.
   Applied to dark service windows with only 3 original cards.
   ========================================================= */

body.dg-v44 .related,
body.dg-v44 .services-strip {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Keep the original DoorGO banner color behind these moving cards */
body.dg-v44 .related {
  background:
    radial-gradient(circle at 50% 14%, rgba(25,215,255,.13), transparent 35%),
    linear-gradient(90deg, rgba(0,20,32,.94), rgba(0,48,70,.86) 50%, rgba(0,20,32,.94)),
    url("doorgo banner.png") center center / 420px auto repeat !important;
  border-top: 1px solid rgba(25,215,255,.22) !important;
  border-bottom: 1px solid rgba(25,215,255,.22) !important;
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}

body.dg-v44 .related::before,
body.dg-v44 .services-strip::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), transparent 32%),
    linear-gradient(90deg, rgba(0,12,22,.20), transparent 24%, transparent 76%, rgba(0,12,22,.20)) !important;
}

body.dg-v44 .related .container,
body.dg-v44 .services-strip .container {
  position: relative !important;
  z-index: 2 !important;
}

/* The actual Cut&Hire-like "window" that hides overflow and fades edges */
body.dg-v44 .related .container:has(.related-track),
body.dg-v44 .services-strip .container:has(.service-grid.dg-service-loop) {
  max-width: 1260px !important;
  overflow: hidden !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
}

/* Edge shadows like Cut & Hire */
body.dg-v44 .related .container:has(.related-track)::before,
body.dg-v44 .related .container:has(.related-track)::after,
body.dg-v44 .services-strip .container:has(.service-grid.dg-service-loop)::before,
body.dg-v44 .services-strip .container:has(.service-grid.dg-service-loop)::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 110px !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

body.dg-v44 .related .container:has(.related-track)::before,
body.dg-v44 .services-strip .container:has(.service-grid.dg-service-loop)::before {
  left: 0 !important;
  background: linear-gradient(to right, rgba(0,18,30,.94), transparent) !important;
}

body.dg-v44 .related .container:has(.related-track)::after,
body.dg-v44 .services-strip .container:has(.service-grid.dg-service-loop)::after {
  right: 0 !important;
  background: linear-gradient(to left, rgba(0,18,30,.94), transparent) !important;
}

/* Headings stay centered and above the moving cards */
body.dg-v44 .related h2,
body.dg-v44 .services-strip .center h2 {
  color: #fff !important;
  text-align: center !important;
  text-shadow: 0 14px 36px rgba(0,0,0,.35) !important;
  margin-bottom: 28px !important;
}

body.dg-v44 .services-strip .center p,
body.dg-v44 .related .eyebrow,
body.dg-v44 .services-strip .eyebrow {
  color: rgba(235,250,255,.82) !important;
}

/* Moving track */
body.dg-v44 .related-track,
body.dg-v44 .services-strip .service-grid.dg-service-loop {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: none !important;
  gap: 0 !important;
  margin: 0 !important;
  will-change: transform !important;
  animation: dgServiceInfiniteLoop 32s linear infinite !important;
  transform: translate3d(0,0,0);
}

body.dg-v44 .related:hover .related-track,
body.dg-v44 .services-strip:hover .service-grid.dg-service-loop {
  animation-play-state: paused !important;
}

@keyframes dgServiceInfiniteLoop {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(calc(-1 * var(--dg-loop-distance, 1120px)),0,0); }
}

/* Make every service "window" same size, like Cut & Hire cards */
body.dg-v44 .related-track .service-card,
body.dg-v44 .services-strip .service-grid.dg-service-loop .service-card {
  flex: 0 0 342px !important;
  width: 342px !important;
  max-width: 342px !important;
  min-height: 420px !important;
  margin-right: 24px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  transform: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,251,255,.94)) !important;
  border: 1px solid rgba(25,215,255,.36) !important;
  box-shadow:
    0 24px 76px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.05) inset !important;
}

body.dg-v44 .related-track .service-card.dg-loop-clone,
body.dg-v44 .services-strip .service-grid.dg-service-loop .service-card.dg-loop-clone {
  pointer-events: auto !important;
}

/* Keep cards readable while moving */
body.dg-v44 .related-track .service-card a,
body.dg-v44 .services-strip .service-grid.dg-service-loop .service-card a {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  color: inherit !important;
  text-decoration: none !important;
}

body.dg-v44 .related-track .card-img,
body.dg-v44 .services-strip .service-grid.dg-service-loop .card-img {
  height: 170px !important;
  min-height: 170px !important;
}

body.dg-v44 .related-track .card-img img,
body.dg-v44 .services-strip .service-grid.dg-service-loop .card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body.dg-v44 .related-track .card-body,
body.dg-v44 .services-strip .service-grid.dg-service-loop .card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 48px 24px 24px !important;
}

body.dg-v44 .related-track .card-body h3,
body.dg-v44 .services-strip .service-grid.dg-service-loop .card-body h3 {
  color: #061827 !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  margin-bottom: 14px !important;
}

body.dg-v44 .related-track .card-body p,
body.dg-v44 .services-strip .service-grid.dg-service-loop .card-body p {
  color: #5f7586 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

body.dg-v44 .related-track .card-link,
body.dg-v44 .services-strip .service-grid.dg-service-loop .card-link {
  margin-top: auto !important;
  color: #0879f2 !important;
  background: rgba(8,121,242,.08) !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-weight: 900 !important;
}

/* Nice hover without breaking loop */
body.dg-v44 .related-track .service-card:hover,
body.dg-v44 .services-strip .service-grid.dg-service-loop .service-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(25,215,255,.62) !important;
  box-shadow:
    0 34px 95px rgba(0,0,0,.32),
    0 0 55px rgba(25,215,255,.15) !important;
}

/* Hide duplicated cards from screen readers visually unchanged */
body.dg-v44 .dg-loop-clone[aria-hidden="true"] {
  speak: never;
}

/* Mobile: still moving, app-like horizontal windows */
@media (max-width: 820px) {
  body.dg-v44 .related,
  body.dg-v44 .services-strip {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  body.dg-v44 .related .container:has(.related-track),
  body.dg-v44 .services-strip .container:has(.service-grid.dg-service-loop) {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
  }

  body.dg-v44 .related .container:has(.related-track)::before,
  body.dg-v44 .related .container:has(.related-track)::after,
  body.dg-v44 .services-strip .container:has(.service-grid.dg-service-loop)::before,
  body.dg-v44 .services-strip .container:has(.service-grid.dg-service-loop)::after {
    width: 46px !important;
  }

  body.dg-v44 .related-track,
  body.dg-v44 .services-strip .service-grid.dg-service-loop {
    animation-duration: 28s !important;
  }

  body.dg-v44 .related-track .service-card,
  body.dg-v44 .services-strip .service-grid.dg-service-loop .service-card {
    flex-basis: 78vw !important;
    width: 78vw !important;
    max-width: 330px !important;
    min-height: 405px !important;
    margin-right: 14px !important;
    border-radius: 27px !important;
  }

  body.dg-v44 .related-track .service-card:hover,
  body.dg-v44 .services-strip .service-grid.dg-service-loop .service-card:hover {
    transform: none !important;
  }

  body.dg-v44 .related-track .card-img,
  body.dg-v44 .services-strip .service-grid.dg-service-loop .card-img {
    height: 160px !important;
    min-height: 160px !important;
  }

  body.dg-v44 .related-track .card-body,
  body.dg-v44 .services-strip .service-grid.dg-service-loop .card-body {
    padding: 46px 21px 21px !important;
  }

  body.dg-v44 .related-track .card-body h3,
  body.dg-v44 .services-strip .service-grid.dg-service-loop .card-body h3 {
    font-size: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dg-v44 .related-track,
  body.dg-v44 .services-strip .service-grid.dg-service-loop {
    animation: none !important;
    overflow-x: auto !important;
    width: auto !important;
  }
}


/* =========================================================
   DoorGO v45 — moving service windows real fix
   Fixes blank cards caused by lazy images inside transformed clones.
   Also pauses ONLY when hovering the actual window/card, not the
   empty section area outside the cards.
   ========================================================= */

/* The loop should not stop just because the cursor is in the dark section */
body.dg-v45 .related:hover .related-track,
body.dg-v45 .services-strip:hover .service-grid.dg-service-loop {
  animation-play-state: running !important;
}

/* Pause only when cursor is actually over a service window/card */
body.dg-v45 .related:has(.service-card:hover) .related-track,
body.dg-v45 .services-strip:has(.service-card:hover) .service-grid.dg-service-loop {
  animation-play-state: paused !important;
}

/* Cleaner Cut & Hire style viewport: no giant white shine covering the cards */
body.dg-v45 .related .container:has(.related-track)::before,
body.dg-v45 .services-strip .container:has(.service-grid.dg-service-loop)::before {
  width: 80px !important;
  background: linear-gradient(to right, rgba(0,18,30,.88), rgba(0,18,30,.36), transparent) !important;
}

body.dg-v45 .related .container:has(.related-track)::after,
body.dg-v45 .services-strip .container:has(.service-grid.dg-service-loop)::after {
  width: 80px !important;
  background: linear-gradient(to left, rgba(0,18,30,.88), rgba(0,18,30,.36), transparent) !important;
}

/* Force images to be visible even when they are cloned and moving with transform */
body.dg-v45 .related-track .card-img,
body.dg-v45 .services-strip .service-grid.dg-service-loop .card-img {
  position: relative !important;
  height: 172px !important;
  min-height: 172px !important;
  overflow: hidden !important;
  background-color: #dff8ff !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* If browser delays lazy images, JS writes the same image as background here */
body.dg-v45 .related-track .card-img.has-bg,
body.dg-v45 .services-strip .service-grid.dg-service-loop .card-img.has-bg {
  background-image: var(--dg-card-bg) !important;
}

body.dg-v45 .related-track .card-img img,
body.dg-v45 .services-strip .service-grid.dg-service-loop .card-img img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.04) contrast(1.02) !important;
  transform: none !important;
  transition: filter .35s ease !important;
}

/* Remove old spotlight effects that looked like a white blank panel */
body.dg-v45 .related-track .card-img::before,
body.dg-v45 .related-track .card-img::after,
body.dg-v45 .services-strip .service-grid.dg-service-loop .card-img::before,
body.dg-v45 .services-strip .service-grid.dg-service-loop .card-img::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

body.dg-v45 .related-track .card-img::before,
body.dg-v45 .services-strip .service-grid.dg-service-loop .card-img::before {
  z-index: 0 !important;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(14px) saturate(1.12) !important;
  opacity: .22 !important;
  transform: scale(1.06) !important;
}

body.dg-v45 .related-track .card-img::after,
body.dg-v45 .services-strip .service-grid.dg-service-loop .card-img::after {
  z-index: 2 !important;
  background: linear-gradient(180deg, transparent 45%, rgba(6,24,38,.10)) !important;
}

/* Make the cards feel like windows but readable while moving */
body.dg-v45 .related-track .service-card,
body.dg-v45 .services-strip .service-grid.dg-service-loop .service-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(235,251,255,.95)) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.dg-v45 .related-track .service-card:hover .card-img img,
body.dg-v45 .services-strip .service-grid.dg-service-loop .service-card:hover .card-img img {
  filter: saturate(1.10) contrast(1.04) brightness(1.03) !important;
  transform: none !important;
}

/* The old animated spotlight from previous versions must not cover v45 cards */
body.dg-v45 .related-track .service-card::before,
body.dg-v45 .services-strip .service-grid.dg-service-loop .service-card::before {
  opacity: 0 !important;
  display: none !important;
}

body.dg-v45 .related-track .service-card::after,
body.dg-v45 .services-strip .service-grid.dg-service-loop .service-card::after {
  display: none !important;
}

/* Give related section enough height so cards don't look cut */
body.dg-v45 .related {
  min-height: 620px !important;
  display: flex !important;
  align-items: center !important;
}

/* On mobile, pause only card-hover/touch state; no dead-zone pause */
@media (max-width: 820px) {
  body.dg-v45 .related .container:has(.related-track)::before,
  body.dg-v45 .related .container:has(.related-track)::after,
  body.dg-v45 .services-strip .container:has(.service-grid.dg-service-loop)::before,
  body.dg-v45 .services-strip .container:has(.service-grid.dg-service-loop)::after {
    width: 30px !important;
  }

  body.dg-v45 .related {
    min-height: 520px !important;
  }

  body.dg-v45 .related-track .card-img,
  body.dg-v45 .services-strip .service-grid.dg-service-loop .card-img {
    height: 164px !important;
    min-height: 164px !important;
  }
}


/* =========================================================
   DoorGO v46 — service moving windows final clarity fix
   The blur was coming from old .reveal animation on cloned/moving cards.
   Cards are always sharp now. Loop pauses ONLY on actual card hover.
   ========================================================= */

/* No reveal blur inside any moving service loop */
body.dg-v46 .related-track .service-card,
body.dg-v46 .related-track .service-card *,
body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card,
body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card * {
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Specifically override old .reveal not-in-view blur for cloned cards */
body.dg-v46 .related-track .service-card.reveal,
body.dg-v46 .related-track .service-card.reveal.in-view,
body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card.reveal,
body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card.reveal.in-view {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: box-shadow .28s ease, border-color .28s ease !important;
}

/* Keep the moving track transform intact */
body.dg-v46 .related-track,
body.dg-v46 .services-strip .service-grid.dg-service-loop {
  filter: none !important;
  opacity: 1 !important;
  animation-play-state: running !important;
}

/* Pause only when the cursor is actually touching a window/card */
body.dg-v46 .related:hover .related-track,
body.dg-v46 .services-strip:hover .service-grid.dg-service-loop {
  animation-play-state: running !important;
}

body.dg-v46 .related .related-track:hover,
body.dg-v46 .services-strip .service-grid.dg-service-loop:hover {
  animation-play-state: running !important;
}

body.dg-v46 .related:has(.service-card:hover) .related-track,
body.dg-v46 .services-strip:has(.service-card:hover) .service-grid.dg-service-loop,
body.dg-v46 .related.paused-on-card .related-track,
body.dg-v46 .services-strip.paused-on-card .service-grid.dg-service-loop {
  animation-play-state: paused !important;
}

/* Cleaner edge fade: only edges, not over the middle cards */
body.dg-v46 .related .container:has(.related-track),
body.dg-v46 .services-strip .container:has(.service-grid.dg-service-loop) {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%) !important;
}

body.dg-v46 .related .container:has(.related-track)::before,
body.dg-v46 .services-strip .container:has(.service-grid.dg-service-loop)::before {
  width: 46px !important;
  background: linear-gradient(to right, rgba(0,18,30,.72), transparent) !important;
}

body.dg-v46 .related .container:has(.related-track)::after,
body.dg-v46 .services-strip .container:has(.service-grid.dg-service-loop)::after {
  width: 46px !important;
  background: linear-gradient(to left, rgba(0,18,30,.72), transparent) !important;
}

/* No fake white fog or card shine in moving carousel */
body.dg-v46 .related-track .service-card::before,
body.dg-v46 .related-track .service-card::after,
body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card::before,
body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card::after {
  display: none !important;
  opacity: 0 !important;
}

/* Make cards sharp and normal-looking while moving */
body.dg-v46 .related-track .service-card,
body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card {
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(236,251,255,.96)) !important;
  color: #061827 !important;
  transform: none !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

/* On hover only the hovered window lifts, not the whole loop */
body.dg-v46 .related-track .service-card:hover,
body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(25,215,255,.62) !important;
  box-shadow:
    0 34px 95px rgba(0,0,0,.32),
    0 0 55px rgba(25,215,255,.15) !important;
}

/* Images always visible and not covered */
body.dg-v46 .related-track .card-img,
body.dg-v46 .services-strip .service-grid.dg-service-loop .card-img {
  background-color: #eafaff !important;
  overflow: hidden !important;
}

body.dg-v46 .related-track .card-img img,
body.dg-v46 .services-strip .service-grid.dg-service-loop .card-img img {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Title/paragraph readable all the time */
body.dg-v46 .related-track .card-body h3,
body.dg-v46 .services-strip .service-grid.dg-service-loop .card-body h3 {
  color: #061827 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

body.dg-v46 .related-track .card-body p,
body.dg-v46 .services-strip .service-grid.dg-service-loop .card-body p {
  color: #5f7586 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Mobile no hover lift, but tap feedback remains clean */
@media (max-width: 820px) {
  body.dg-v46 .related .container:has(.related-track),
  body.dg-v46 .services-strip .container:has(.service-grid.dg-service-loop) {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
  }

  body.dg-v46 .related .container:has(.related-track)::before,
  body.dg-v46 .related .container:has(.related-track)::after,
  body.dg-v46 .services-strip .container:has(.service-grid.dg-service-loop)::before,
  body.dg-v46 .services-strip .container:has(.service-grid.dg-service-loop)::after {
    width: 24px !important;
  }

  body.dg-v46 .related-track .service-card:hover,
  body.dg-v46 .services-strip .service-grid.dg-service-loop .service-card:hover {
    transform: none !important;
  }
}


/* =========================================================
   DoorGO v47 — center icons inside moving service windows
   Icons now sit exactly in the middle of each card like the other windows.
   ========================================================= */

/* Make service card anchor a stable positioning context */
body.dg-v47 .related-track .service-card > a,
body.dg-v47 .services-strip .service-grid.dg-service-loop .service-card > a {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Center the icon badge between image and body */
body.dg-v47 .related-track .service-card .icon-badge,
body.dg-v47 .services-strip .service-grid.dg-service-loop .service-card .icon-badge {
  position: absolute !important;
  top: 170px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  border-radius: 50% !important;
  z-index: 10 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(25,215,255,.42) !important;
  box-shadow:
    0 18px 42px rgba(0,70,118,.18),
    0 0 0 9px rgba(25,215,255,.08),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
  pointer-events: none !important;
}

/* Keep the actual icon centered inside the circle */
body.dg-v47 .related-track .service-card .icon-badge img,
body.dg-v47 .services-strip .service-grid.dg-service-loop .service-card .icon-badge img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Give body enough top padding for the centered circle */
body.dg-v47 .related-track .service-card .card-body,
body.dg-v47 .services-strip .service-grid.dg-service-loop .service-card .card-body {
  padding-top: 62px !important;
}

/* Keep hover lift from moving the badge weirdly */
body.dg-v47 .related-track .service-card:hover .icon-badge,
body.dg-v47 .services-strip .service-grid.dg-service-loop .service-card:hover .icon-badge {
  transform: translate(-50%, -50%) scale(1.04) !important;
  box-shadow:
    0 22px 52px rgba(0,70,118,.22),
    0 0 0 11px rgba(25,215,255,.10),
    0 0 32px rgba(25,215,255,.16) !important;
}

/* Safety: static service cards should also stay clean/centered if loop class is added late */
body.dg-v47 .service-grid.dg-service-loop .icon-badge,
body.dg-v47 .related-track .icon-badge {
  text-align: center !important;
}

/* Mobile same center logic with slightly smaller circle */
@media (max-width: 820px) {
  body.dg-v47 .related-track .service-card .icon-badge,
  body.dg-v47 .services-strip .service-grid.dg-service-loop .service-card .icon-badge {
    top: 164px !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }

  body.dg-v47 .related-track .service-card .icon-badge img,
  body.dg-v47 .services-strip .service-grid.dg-service-loop .service-card .icon-badge img {
    width: 31px !important;
    height: 31px !important;
  }

  body.dg-v47 .related-track .service-card .card-body,
  body.dg-v47 .services-strip .service-grid.dg-service-loop .service-card .card-body {
    padding-top: 58px !important;
  }
}


/* =========================================================
   DoorGO v48 — mobile blocky section fix
   Makes the circled mobile home service area app-like instead of
   a hard rectangular dark block.
   ========================================================= */

@media (max-width: 820px) {
  /* The big dark service block under hero should become a rounded app card */
  body.dg-v48 .home-service-showcase {
    width: calc(100% - 20px) !important;
    margin: 14px auto 22px !important;
    padding: 16px 12px 18px !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    border: 1px solid rgba(25, 215, 255, .30) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(25,215,255,.18), transparent 38%),
      linear-gradient(180deg, rgba(0,40,58,.94), rgba(0,22,34,.92)),
      url("doorgo-pattern-tile-dark.png") left top / 150px 104px repeat !important;
    box-shadow:
      0 18px 52px rgba(0,75,125,.20),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body.dg-v48 .home-service-showcase::before,
  body.dg-v48 .home-service-showcase::after {
    border-radius: inherit !important;
    opacity: .22 !important;
  }

  body.dg-v48 .home-service-showcase .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  /* Mobile service cards: rounded phone tiles, not blocky rectangles */
  body.dg-v48 .home-service-showcase .hero-grid {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 3px 14px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.dg-v48 .home-service-showcase .hero-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v48 .home-service-showcase .hero-tile {
    flex: 0 0 86% !important;
    min-height: 250px !important;
    height: 250px !important;
    border-radius: 28px !important;
    scroll-snap-align: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(25,215,255,.34) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.23) !important;
    transform: none !important;
  }

  body.dg-v48 .home-service-showcase .hero-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  body.dg-v48 .home-service-showcase .hero-tile::after {
    opacity: .42 !important;
    background: linear-gradient(to top, rgba(0,18,30,.72), rgba(0,18,30,.12), transparent 62%) !important;
  }

  body.dg-v48 .home-service-showcase .hero-tile .icon-badge,
  body.dg-v48 .home-service-showcase .hero-tile .tile-icon,
  body.dg-v48 .home-service-showcase .hero-tile > .icon-badge {
    width: 66px !important;
    height: 66px !important;
    border-radius: 24px !important;
    top: 16px !important;
    left: 16px !important;
    transform: none !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(25,215,255,.38) !important;
    box-shadow: 0 14px 34px rgba(0,70,118,.20) !important;
  }

  body.dg-v48 .home-service-showcase .hero-tile span,
  body.dg-v48 .home-service-showcase .hero-tile h3 {
    left: 18px !important;
    right: 18px !important;
    bottom: 20px !important;
    font-size: 21px !important;
    line-height: 1.18 !important;
    color: #fff !important;
    text-shadow: 0 8px 24px rgba(0,0,0,.50) !important;
  }

  /* Trust chips under the image should become clean rounded app chips */
  body.dg-v48 .home-service-showcase .trust-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 2px 0 0 !important;
    padding: 0 2px !important;
    background: transparent !important;
  }

  body.dg-v48 .home-service-showcase .trust-row .trust,
  body.dg-v48 .home-service-showcase .trust {
    min-height: 54px !important;
    border-radius: 18px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,251,255,.88)) !important;
    border: 1px solid rgba(25,215,255,.22) !important;
    color: #061827 !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 28px rgba(0,60,100,.12) !important;
    backdrop-filter: blur(10px) saturate(1.15) !important;
  }

  body.dg-v48 .home-service-showcase .trust-row .trust::before {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    background: linear-gradient(135deg, #19d7ff, #0879f2) !important;
    box-shadow: 0 0 14px rgba(25,215,255,.45) !important;
    flex: 0 0 auto !important;
  }

  /* Remove the ugly bottom hard white rectangle feel */
  body.dg-v48 .home-service-showcase + .section,
  body.dg-v48 .home-service-showcase + section {
    margin-top: 10px !important;
  }

  /* Same polishing for the services strip when it appears on mobile */
  body.dg-v48 .services-strip {
    width: calc(100% - 20px) !important;
    margin: 16px auto 22px !important;
    border-radius: 32px !important;
    overflow: hidden !important;
  }

  body.dg-v48 .services-strip .service-grid.dg-service-loop .service-card,
  body.dg-v48 .related-track .service-card {
    border-radius: 28px !important;
  }
}

/* Tiny phones */
@media (max-width: 420px) {
  body.dg-v48 .home-service-showcase {
    width: calc(100% - 16px) !important;
    border-radius: 30px !important;
    padding: 14px 10px 16px !important;
  }

  body.dg-v48 .home-service-showcase .hero-tile {
    flex-basis: 88% !important;
    height: 238px !important;
    min-height: 238px !important;
    border-radius: 26px !important;
  }

  body.dg-v48 .home-service-showcase .trust-row .trust,
  body.dg-v48 .home-service-showcase .trust {
    min-height: 52px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   DoorGO v49 — mobile remove blocky service background
   The circled mobile section no longer has the dark rectangular
   background. Image/buttons sit directly on the page.
   ========================================================= */

@media (max-width: 820px) {
  /* Remove the whole dark block/container background on mobile */
  body.dg-v49 .home-service-showcase {
    width: 100% !important;
    margin: 12px auto 18px !important;
    padding: 0 10px 12px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body.dg-v49 .home-service-showcase::before,
  body.dg-v49 .home-service-showcase::after {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
  }

  body.dg-v49 .home-service-showcase .container {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Remove any dark/background panel from the swipe area */
  body.dg-v49 .home-service-showcase .hero-grid {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 10px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    border-radius: 0 !important;
  }

  body.dg-v49 .home-service-showcase .hero-grid::before,
  body.dg-v49 .home-service-showcase .hero-grid::after {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  /* Keep the service image card, but no parent block behind it */
  body.dg-v49 .home-service-showcase .hero-tile {
    flex: 0 0 88% !important;
    height: 250px !important;
    min-height: 250px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(25,215,255,.34) !important;
    background: #00141f !important;
    box-shadow:
      0 18px 42px rgba(0,75,125,.18),
      0 0 0 1px rgba(255,255,255,.55) inset !important;
  }

  /* Trust buttons/chips appear directly, without the dark block behind */
  body.dg-v49 .home-service-showcase .trust-row {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.dg-v49 .home-service-showcase .trust-row::before,
  body.dg-v49 .home-service-showcase .trust-row::after {
    display: none !important;
    background: none !important;
  }

  body.dg-v49 .home-service-showcase .trust-row .trust,
  body.dg-v49 .home-service-showcase .trust {
    min-height: 54px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,251,255,.91)) !important;
    border: 1px solid rgba(25,215,255,.25) !important;
    box-shadow: 0 10px 26px rgba(0,75,125,.10) !important;
    color: #061827 !important;
    backdrop-filter: blur(12px) saturate(1.14) !important;
  }

  /* Make spacing clean before bottom nav */
  body.dg-v49 .home-service-showcase {
    margin-bottom: 74px !important;
  }
}

@media (max-width: 420px) {
  body.dg-v49 .home-service-showcase {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.dg-v49 .home-service-showcase .hero-tile {
    flex-basis: 90% !important;
    height: 238px !important;
    min-height: 238px !important;
  }
}


/* =========================================================
   DoorGO v50 — premium mobile service showcase redesign
   Focus: make the home service section look much better on mobile
   without changing the desktop layout.
   ========================================================= */

@media (max-width: 820px) {
  body.dg-v50 .home-service-showcase {
    position: relative !important;
    width: min(100%, 460px) !important;
    margin: 14px auto 76px !important;
    padding: 0 10px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.dg-v50 .home-service-showcase::before,
  body.dg-v50 .home-service-showcase::after {
    display: none !important;
  }

  body.dg-v50 .home-service-showcase .hero-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 12px !important;
    padding: 0 6px 10px !important;
    margin: 0 -2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body.dg-v50 .home-service-showcase .hero-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v50 .home-service-showcase .hero-tile {
    position: relative !important;
    flex: 0 0 84vw !important;
    max-width: 310px !important;
    min-width: 270px !important;
    min-height: 240px !important;
    height: 240px !important;
    scroll-snap-align: start !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(158, 238, 255, .28) !important;
    box-shadow: 0 18px 42px rgba(0, 28, 48, .28), inset 0 1px 0 rgba(255,255,255,.16) !important;
    animation: none !important;
    transform: none !important;
    backdrop-filter: blur(2px) !important;
  }

  body.dg-v50 .home-service-showcase .hero-tile:hover {
    transform: none !important;
  }

  body.dg-v50 .home-service-showcase .hero-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.dg-v50 .home-service-showcase .hero-tile::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(5,23,35,.08) 5%, rgba(5,23,35,.12) 44%, rgba(5,23,35,.72) 100%) !important;
    z-index: 1 !important;
  }

  body.dg-v50 .home-service-showcase .tile-icon {
    top: 14px !important;
    left: 14px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
    z-index: 3 !important;
  }

  body.dg-v50 .home-service-showcase .tile-icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
  }

  body.dg-v50 .home-service-showcase .hero-tile span {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
    font-weight: 1000 !important;
    text-wrap: balance !important;
    z-index: 3 !important;
    text-shadow: 0 6px 18px rgba(0,0,0,.34) !important;
  }

  body.dg-v50 .home-service-showcase .trust-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 8px 6px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.dg-v50 .home-service-showcase .trust-row::before,
  body.dg-v50 .home-service-showcase .trust-row::after {
    display: none !important;
  }

  body.dg-v50 .home-service-showcase .trust {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,250,255,.92)) !important;
    border: 1px solid rgba(158, 238, 255, .30) !important;
    box-shadow: 0 12px 28px rgba(0, 28, 48, .10) !important;
    color: #092032 !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
  }
}

@media (max-width: 560px) {
  body.dg-v50 .home-service-showcase {
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 72px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.dg-v50 .home-service-showcase .hero-grid {
    gap: 12px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.dg-v50 .home-service-showcase .hero-tile {
    flex-basis: calc(100vw - 42px) !important;
    max-width: none !important;
    min-width: calc(100vw - 42px) !important;
    height: 228px !important;
    min-height: 228px !important;
    border-radius: 24px !important;
  }

  body.dg-v50 .home-service-showcase .tile-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }

  body.dg-v50 .home-service-showcase .tile-icon img {
    width: 25px !important;
    height: 25px !important;
  }

  body.dg-v50 .home-service-showcase .hero-tile span {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    font-size: 23px !important;
  }

  body.dg-v50 .home-service-showcase .trust-row {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  body.dg-v50 .home-service-showcase .trust {
    min-height: 52px !important;
    font-size: 16px !important;
    border-radius: 16px !important;
  }
}


/* =========================================================
   DoorGO v51 — mobile service showcase final polish
   Fixes the circled mobile issues:
   - tiny badge position
   - huge heading wrapping too harshly
   - dark block padding / clipped bottom text
   - cards and chips feel cleaner on phone
   ========================================================= */

@media (max-width: 820px) {
  body.dg-v51 .services-strip {
    width: calc(100% - 18px) !important;
    max-width: 430px !important;
    margin: 14px auto 78px !important;
    padding: 26px 0 30px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(25,215,255,.16), transparent 38%),
      linear-gradient(180deg, rgba(0,43,62,.95), rgba(0,21,34,.96)),
      url("doorgo banner.png") center top / 230px auto repeat !important;
    border: 1px solid rgba(25,215,255,.28) !important;
    box-shadow:
      0 22px 60px rgba(0,64,95,.24),
      inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  body.dg-v51 .services-strip::before,
  body.dg-v51 .services-strip::after {
    display: none !important;
  }

  body.dg-v51 .services-strip .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.dg-v51 .services-strip .center {
    width: 100% !important;
    padding: 0 16px !important;
    margin: 0 auto 18px !important;
    text-align: center !important;
  }

  body.dg-v51 .services-strip .center .eyebrow,
  body.dg-v51 .services-strip .eyebrow {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 auto 10px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.18) !important;
    color: rgba(235,250,255,.96) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.14) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  body.dg-v51 .services-strip .center h2 {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(26px, 7.3vw, 35px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-align: center !important;
    text-wrap: balance !important;
    text-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
  }

  body.dg-v51 .services-strip .service-grid,
  body.dg-v51 .services-strip .service-grid.dg-service-loop {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px 8px !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  body.dg-v51 .services-strip .service-grid.dg-service-loop {
    animation-duration: 32s !important;
  }

  body.dg-v51 .services-strip .container:has(.service-grid.dg-service-loop) {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
  }

  body.dg-v51 .services-strip .container:has(.service-grid.dg-service-loop)::before,
  body.dg-v51 .services-strip .container:has(.service-grid.dg-service-loop)::after {
    width: 20px !important;
    opacity: .75 !important;
  }

  body.dg-v51 .services-strip .service-grid.dg-service-loop .service-card,
  body.dg-v51 .services-strip .service-card {
    flex: 0 0 calc(100vw - 74px) !important;
    width: calc(100vw - 74px) !important;
    max-width: 330px !important;
    min-width: 286px !important;
    min-height: 438px !important;
    margin-right: 12px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(234,250,255,.96)) !important;
    border: 1px solid rgba(25,215,255,.32) !important;
    box-shadow: 0 18px 48px rgba(0,22,36,.24) !important;
  }

  body.dg-v51 .services-strip .service-card .card-img {
    height: 176px !important;
    min-height: 176px !important;
    background: #eafaff !important;
  }

  body.dg-v51 .services-strip .service-card .card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.dg-v51 .services-strip .service-card .icon-badge {
    top: 176px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(25,215,255,.38) !important;
    box-shadow:
      0 16px 38px rgba(0,70,118,.18),
      0 0 0 8px rgba(25,215,255,.08) !important;
  }

  body.dg-v51 .services-strip .service-card .icon-badge img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
  }

  body.dg-v51 .services-strip .service-card .card-body {
    padding: 58px 22px 22px !important;
    min-height: 262px !important;
  }

  body.dg-v51 .services-strip .service-card .card-body h3 {
    font-size: 22px !important;
    line-height: 1.17 !important;
    letter-spacing: -.03em !important;
    margin: 0 0 13px !important;
    color: #061827 !important;
  }

  body.dg-v51 .services-strip .service-card .card-body p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #60798b !important;
    margin: 0 0 16px !important;
  }

  body.dg-v51 .services-strip .service-card .card-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 145px !important;
    min-height: 40px !important;
    margin-top: auto !important;
    border-radius: 999px !important;
    background: rgba(8,121,242,.08) !important;
    color: #0879f2 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  body.dg-v51 .services-strip p.center {
    width: calc(100% - 30px) !important;
    max-width: 330px !important;
    margin: 16px auto 0 !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    color: rgba(235,250,255,.92) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    text-shadow: none !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }
}

@media (max-width: 420px) {
  body.dg-v51 .services-strip {
    width: calc(100% - 14px) !important;
    border-radius: 30px !important;
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  body.dg-v51 .services-strip .center h2 {
    max-width: 330px !important;
    font-size: clamp(25px, 7.1vw, 31px) !important;
  }

  body.dg-v51 .services-strip .service-grid.dg-service-loop .service-card,
  body.dg-v51 .services-strip .service-card {
    flex-basis: calc(100vw - 58px) !important;
    width: calc(100vw - 58px) !important;
    min-width: calc(100vw - 58px) !important;
    min-height: 426px !important;
    border-radius: 28px !important;
  }

  body.dg-v51 .services-strip .service-card .card-img {
    height: 166px !important;
    min-height: 166px !important;
  }

  body.dg-v51 .services-strip .service-card .icon-badge {
    top: 166px !important;
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
  }

  body.dg-v51 .services-strip .service-card .card-body {
    padding: 54px 20px 20px !important;
  }

  body.dg-v51 .services-strip .service-card .card-body h3 {
    font-size: 20px !important;
  }

  body.dg-v51 .services-strip p.center {
    font-size: 12.5px !important;
  }
}


/* DoorGO v52 — remove mobile quick strip everywhere */
.mobile-app-quickstrip{display:none!important;}
@media (max-width: 980px){
  .mobile-app-quickstrip{display:none!important;}
}


/* DoorGO v53 — mobile home service showcase tabs */
body.dg-v53 .home-service-showcase .mobile-service-switcher{display:none;}
@media (max-width: 820px){
  body.dg-v53 .home-service-showcase .hero-grid,
  body.dg-v53 .home-service-showcase .trust-row{display:none!important;}

  body.dg-v53 .home-service-showcase{
    width:100%!important;
    margin:20px auto 0!important;
    padding:0 14px 6px!important;
    background:none!important;
    box-shadow:none!important;
  }

  body.dg-v53 .home-service-showcase .mobile-service-switcher{
    display:block!important;
    max-width:420px;
    margin:0 auto;
    padding:18px 16px 18px!important;
    border-radius:30px!important;
    position:relative;
    background:
      radial-gradient(circle at 50% 0%, rgba(42,214,255,.16), transparent 42%),
      linear-gradient(180deg, rgba(2,43,61,.97), rgba(1,27,41,.98)),
      url("doorgo-pattern-tile-dark.png") center top/120px auto repeat;
    border:1px solid rgba(92,224,255,.22);
    box-shadow:0 18px 44px rgba(0,26,40,.22), inset 0 1px 0 rgba(255,255,255,.06);
    overflow:hidden;
  }

  body.dg-v53 .home-service-showcase .mobile-service-head{
    text-align:center;
    margin-bottom:14px;
  }
  body.dg-v53 .home-service-showcase .mobile-service-head .eyebrow{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px!important;
    padding:8px 14px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.14)!important;
    color:#f3fcff!important;
    border:1px solid rgba(255,255,255,.10)!important;
    font-size:12px!important;
    line-height:1!important;
  }
  body.dg-v53 .home-service-showcase .mobile-service-head h3{
    margin:0!important;
    color:#fff!important;
    font-size:clamp(26px, 6.8vw, 33px)!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
    text-wrap:balance;
    text-shadow:0 10px 26px rgba(0,0,0,.24);
  }

  body.dg-v53 .home-service-showcase .mobile-service-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:0 0 14px!important;
  }
  body.dg-v53 .home-service-showcase .mobile-service-tabs button{
    appearance:none;
    border:1px solid rgba(125,227,255,.20);
    background:rgba(255,255,255,.08);
    color:#dff9ff;
    border-radius:999px;
    min-height:42px;
    padding:0 8px;
    font:700 13px/1.1 inherit;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }
  body.dg-v53 .home-service-showcase .mobile-service-tabs button.is-active{
    background:linear-gradient(135deg,#29d8ff,#0b7fff);
    color:#fff;
    border-color:transparent;
    box-shadow:0 14px 26px rgba(11,127,255,.28);
  }

  body.dg-v53 .home-service-showcase .mobile-service-stage{
    position:relative;
    margin:0 0 14px!important;
    min-height:420px;
  }
  body.dg-v53 .home-service-showcase .mobile-service-panel{
    display:none;
    animation:dgFadeUp .25s ease;
  }
  body.dg-v53 .home-service-showcase .mobile-service-panel.is-active{display:block;}
  body.dg-v53 .home-service-showcase .mobile-service-panel > a{
    display:block;
    position:relative;
    overflow:hidden;
    text-decoration:none;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(235,249,255,.96));
    border:1px solid rgba(125,227,255,.22);
    box-shadow:0 20px 42px rgba(0,18,28,.20);
  }
  body.dg-v53 .home-service-showcase .mobile-service-image{
    height:210px;
    overflow:hidden;
    background:#eaf9ff;
  }
  body.dg-v53 .home-service-showcase .mobile-service-image img{
    width:100%; height:100%; object-fit:cover; object-position:center center; display:block;
  }
  body.dg-v53 .home-service-showcase .mobile-service-badge{
    position:absolute;
    top:174px; left:20px;
    width:64px; height:64px;
    border-radius:22px;
    display:flex; align-items:center; justify-content:center;
    background:#fff;
    border:1px solid rgba(125,227,255,.30);
    box-shadow:0 14px 30px rgba(0,60,94,.20);
  }
  body.dg-v53 .home-service-showcase .mobile-service-badge img{width:28px;height:28px;object-fit:contain;}
  body.dg-v53 .home-service-showcase .mobile-service-content{
    padding:42px 18px 18px!important;
  }
  body.dg-v53 .home-service-showcase .mobile-service-content h4{
    margin:0 0 10px!important;
    color:#0b1b2a!important;
    font-size:24px!important;
    line-height:1.14!important;
    letter-spacing:-.03em!important;
  }
  body.dg-v53 .home-service-showcase .mobile-service-content p{
    margin:0 0 16px!important;
    color:#587486!important;
    font-size:14px!important;
    line-height:1.55!important;
  }
  body.dg-v53 .home-service-showcase .mobile-service-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:132px;
    min-height:42px;
    padding:0 16px;
    border-radius:999px;
    background:rgba(8,121,242,.10);
    color:#0879f2;
    font-size:14px;
    font-weight:800;
    line-height:1;
  }

  body.dg-v53 .home-service-showcase .mobile-service-features{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  body.dg-v53 .home-service-showcase .mobile-service-features .feature-pill{
    min-height:46px;
    padding:0 14px;
    display:flex; align-items:center; justify-content:center;
    border-radius:16px;
    background:rgba(255,255,255,.10);
    color:#eefcff;
    border:1px solid rgba(255,255,255,.08);
    text-align:center;
    font-size:13.5px;
    font-weight:700;
    line-height:1.2;
  }
}
@media (max-width: 420px){
  body.dg-v53 .home-service-showcase{padding:0 12px 4px!important;}
  body.dg-v53 .home-service-showcase .mobile-service-switcher{padding:16px 14px 16px!important; border-radius:28px!important;}
  body.dg-v53 .home-service-showcase .mobile-service-head h3{font-size:clamp(24px, 7vw, 30px)!important;}
  body.dg-v53 .home-service-showcase .mobile-service-tabs button{font-size:12.5px; min-height:40px;}
  body.dg-v53 .home-service-showcase .mobile-service-image{height:190px;}
  body.dg-v53 .home-service-showcase .mobile-service-badge{top:156px; width:60px; height:60px;}
  body.dg-v53 .home-service-showcase .mobile-service-content{padding:38px 16px 16px!important;}
  body.dg-v53 .home-service-showcase .mobile-service-content h4{font-size:22px!important;}
  body.dg-v53 .home-service-showcase .mobile-service-stage{min-height:396px;}
  body.dg-v53 .home-service-showcase .mobile-service-features{grid-template-columns:1fr 1fr; gap:8px;}
  body.dg-v53 .home-service-showcase .mobile-service-features .feature-pill{min-height:44px; font-size:13px; padding:0 10px;}
}
@media (min-width: 821px){
  body.dg-v53 .home-service-showcase .mobile-service-switcher{display:none!important;}
}
@keyframes dgFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}


/* DoorGO v54 — mobile hero/button centering + quickstrip removal */
body.dg-v54 .mobile-app-quickstrip{display:none!important;}

@media (max-width: 820px){
  body.dg-v54 .dg-clean-banner,
  body.dg-v54 .home-hero-v17 .hero-inner{
    min-height:auto!important;
    padding:42px 16px 28px!important;
    text-align:center!important;
  }

  body.dg-v54 .dg-clean-banner-inner,
  body.dg-v54 .home-hero-v17 .hero-inner{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.dg-v54 .dg-clean-banner .eyebrow,
  body.dg-v54 .home-hero-v17 .eyebrow,
  body.dg-v54 .hero-sub{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  body.dg-v54 .dg-clean-banner h1,
  body.dg-v54 .home-hero-v17 h1{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    text-wrap:balance;
  }

  body.dg-v54 .hero-actions,
  body.dg-v54 .dg-banner-actions{
    width:100%!important;
    max-width:320px!important;
    margin:18px auto 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
  }

  body.dg-v54 .hero-actions .btn,
  body.dg-v54 .dg-banner-actions .btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:250px!important;
    min-width:0!important;
    margin:0 auto!important;
    text-align:center!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }

  body.dg-v54 .hero-actions .btn.white,
  body.dg-v54 .dg-banner-actions .btn.white{
    background:rgba(255,255,255,.95)!important;
  }

  /* cleaner mobile service detail hero section */
  body.dg-v54 .service-top{padding:20px 14px 26px!important;}
  body.dg-v54 .service-photo,
  body.dg-v54 .service-photo.service-photo-wrap{
    width:min(100%, 420px)!important;
    margin:0 auto!important;
    border-radius:28px!important;
    overflow:hidden!important;
  }
  body.dg-v54 .service-photo img,
  body.dg-v54 .service-photo.service-photo-wrap img.service-photo-img{
    height:auto!important;
    aspect-ratio:4/3;
    object-fit:cover!important;
    object-position:center center!important;
    display:block;
  }

  /* slightly tighter main mobile hero so no big empty gap */
  body.dg-v54 .home-hero-v17 .hero-inner{padding-bottom:18px!important;}
  body.dg-v54 .home-service-showcase{margin-top:10px!important;}
}

@media (max-width: 420px){
  body.dg-v54 .dg-clean-banner,
  body.dg-v54 .home-hero-v17 .hero-inner{
    padding:36px 14px 24px!important;
  }
  body.dg-v54 .hero-actions,
  body.dg-v54 .dg-banner-actions{
    max-width:300px!important;
    gap:9px!important;
  }
  body.dg-v54 .hero-actions .btn,
  body.dg-v54 .dg-banner-actions .btn{
    max-width:248px!important;
    min-height:44px!important;
    font-size:14px!important;
  }
}


/* =========================================================
   DoorGO v55 — full mobile structure upgrade
   Better app-like layout across home, services, gallery, about,
   contact and detail pages. Desktop remains untouched.
   ========================================================= */

@media (max-width: 820px) {
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.dg-v55 {
    --v55-cyan: #19d7ff;
    --v55-blue: #0879f2;
    --v55-ink: #061827;
    --v55-muted: #5f788b;
    --v55-line: rgba(25,215,255,.25);
    --v55-card: rgba(255,255,255,.92);
    background:
      radial-gradient(circle at 50% -6%, rgba(25,215,255,.20), transparent 34%),
      linear-gradient(180deg, #edfbff 0%, #ffffff 54%, #eefbff 100%) !important;
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    color: var(--v55-ink) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  body.dg-v55 .top-line {
    display: none !important;
  }

  body.dg-v55 main {
    overflow: hidden !important;
  }

  /* iOS-style compact header */
  body.dg-v55 .site-header {
    position: sticky !important;
    top: 8px !important;
    z-index: 50000 !important;
    width: calc(100% - 14px) !important;
    margin: 8px auto 0 !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 84% 18%, rgba(25,215,255,.16), transparent 42%),
      rgba(255,255,255,.88) !important;
    border: 1px solid rgba(25,215,255,.30) !important;
    box-shadow:
      0 16px 42px rgba(0,67,112,.13),
      inset 0 1px 0 rgba(255,255,255,.72) !important;
    backdrop-filter: blur(24px) saturate(1.28) !important;
    overflow: visible !important;
  }

  body.dg-v55 .header-inner {
    width: 100% !important;
    min-height: 62px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.dg-v55 .brand {
    min-width: 50px !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  body.dg-v55 .brand img {
    height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  body.dg-v55 .brand span {
    display: none !important;
  }

  body.dg-v55 .socials {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding-right: 50px !important;
    min-width: 0 !important;
  }

  body.dg-v55 .socials a {
    width: 34px !important;
    height: 34px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.74) !important;
    border: 1px solid rgba(25,215,255,.28) !important;
    box-shadow: 0 8px 20px rgba(0,70,118,.10) !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }

  body.dg-v55 .socials img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
  }

  body.dg-v55 .menu-toggle {
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(25,215,255,.36) !important;
    box-shadow: 0 10px 28px rgba(0,70,118,.12) !important;
    display: grid !important;
    place-items: center !important;
    z-index: 6 !important;
  }

  body.dg-v55 .menu-toggle .bar {
    width: 20px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #075a7c !important;
    margin: 2px 0 !important;
  }

  body.dg-v55 .menu-toggle.active .bar-1 {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.dg-v55 .menu-toggle.active .bar-2 {
    opacity: 0 !important;
  }

  body.dg-v55 .menu-toggle.active .bar-3 {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  /* Mobile drawer */
  body.dg-v55 .nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 82px !important;
    z-index: 49999 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 16px !important;
    border-radius: 28px !important;
    background: rgba(247,253,255,.94) !important;
    border: 1px solid rgba(25,215,255,.28) !important;
    box-shadow: 0 22px 70px rgba(0,52,88,.18) !important;
    backdrop-filter: blur(26px) saturate(1.28) !important;
    max-height: calc(100dvh - 105px) !important;
    overflow: auto !important;
  }

  body.dg-v55 .nav.open {
    display: flex !important;
    animation: v55MenuIn .22s cubic-bezier(.2,.8,.2,1) both;
  }

  body.dg-v55 .nav a,
  body.dg-v55 .dropdown-trigger {
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.76) !important;
    border: 1px solid rgba(25,215,255,.20) !important;
    color: #092032 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  body.dg-v55 .dropdown,
  body.dg-v55 .dropdown-menu {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body.dg-v55 .dropdown-menu a {
    min-height: 46px !important;
    padding-left: 28px !important;
    font-size: 14px !important;
    color: #33576e !important;
  }

  /* Remove old quick strip everywhere */
  body.dg-v55 .mobile-app-quickstrip {
    display: none !important;
  }

  /* App hero card structure */
  body.dg-v55 .hero,
  body.dg-v55 .home-hero-v17,
  body.dg-v55 .dg-clean-banner,
  body.dg-v55 .gallery-modern-hero {
    width: calc(100% - 14px) !important;
    max-width: 430px !important;
    margin: 10px auto 18px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    border: 1px solid rgba(25,215,255,.25) !important;
    box-shadow: 0 18px 44px rgba(0,65,110,.14) !important;
  }

  body.dg-v55 .home-hero-v17 .hero-inner,
  body.dg-v55 .dg-clean-banner,
  body.dg-v55 .gallery-modern-hero {
    min-height: 238px !important;
    padding: 34px 18px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(255,255,255,.24), transparent 44%),
      linear-gradient(180deg, rgba(4,39,58,.56), rgba(4,39,58,.28)),
      url("doorgo banner.png") center / 220px auto repeat !important;
  }

  body.dg-v55 .home-hero-v17 .hero-inner::before,
  body.dg-v55 .home-hero-v17 .hero-inner::after,
  body.dg-v55 .dg-clean-banner::before,
  body.dg-v55 .dg-clean-banner::after {
    display: none !important;
  }

  body.dg-v55 .hero h1,
  body.dg-v55 .dg-clean-banner h1,
  body.dg-v55 .gallery-modern-hero h1 {
    max-width: 360px !important;
    margin: 12px auto 12px !important;
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    text-align: center !important;
    text-wrap: balance !important;
    color: #fff !important;
    text-shadow: 0 12px 30px rgba(0,0,0,.32) !important;
  }

  body.dg-v55 .hero-sub,
  body.dg-v55 .dg-clean-banner p {
    max-width: 310px !important;
    margin: 0 auto 14px !important;
    text-align: center !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  body.dg-v55 .hero-actions,
  body.dg-v55 .dg-banner-actions {
    width: 100% !important;
    max-width: 276px !important;
    margin: 14px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.dg-v55 .hero-actions .btn,
  body.dg-v55 .dg-banner-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    padding: 0 18px !important;
  }

  /* Home mobile service chooser */
  body.dg-v55 .home-service-showcase {
    width: 100% !important;
    margin: 12px auto 24px !important;
    padding: 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.dg-v55 .home-service-showcase .hero-grid,
  body.dg-v55 .home-service-showcase .trust-row {
    display: none !important;
  }

  body.dg-v55 .home-service-showcase .mobile-service-switcher {
    display: block !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(25,215,255,.14), transparent 42%),
      linear-gradient(180deg, rgba(2,43,61,.97), rgba(1,27,41,.98)),
      url("doorgo-pattern-tile-dark.png") center top/130px auto repeat !important;
    border: 1px solid rgba(25,215,255,.24) !important;
    box-shadow: 0 18px 42px rgba(0,44,66,.22) !important;
  }

  body.dg-v55 .mobile-service-head {
    text-align: center !important;
    margin-bottom: 13px !important;
  }

  body.dg-v55 .mobile-service-head h3 {
    max-width: 310px !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(25px, 7.2vw, 32px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance !important;
  }

  body.dg-v55 .mobile-service-tabs {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
  }

  body.dg-v55 .mobile-service-tabs button {
    min-height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(240,252,255,.90) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body.dg-v55 .mobile-service-tabs button.is-active {
    background: linear-gradient(135deg, var(--v55-cyan), var(--v55-blue)) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(8,121,242,.28) !important;
  }

  body.dg-v55 .mobile-service-stage {
    min-height: 0 !important;
    margin-bottom: 12px !important;
  }

  body.dg-v55 .mobile-service-panel > a {
    border-radius: 28px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 18px 36px rgba(0,18,28,.20) !important;
  }

  body.dg-v55 .mobile-service-image {
    height: 186px !important;
  }

  body.dg-v55 .mobile-service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.dg-v55 .mobile-service-badge {
    top: 154px !important;
    left: 18px !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 20px !important;
  }

  body.dg-v55 .mobile-service-content {
    padding: 40px 18px 18px !important;
  }

  body.dg-v55 .mobile-service-content h4 {
    font-size: 22px !important;
    line-height: 1.14 !important;
    letter-spacing: -.03em !important;
  }

  body.dg-v55 .mobile-service-features {
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }

  body.dg-v55 .mobile-service-features .feature-pill {
    min-height: 44px !important;
    border-radius: 16px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
  }

  /* General section rhythm */
  body.dg-v55 .section,
  body.dg-v55 .content,
  body.dg-v55 .gallery-page-section,
  body.dg-v55 .electric-video-section {
    padding: 30px 14px !important;
  }

  body.dg-v55 .container,
  body.dg-v55 .content {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dg-v55 h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
  }

  body.dg-v55 p {
    font-size: 14px;
  }

  /* Services page: app list cards */
  body.dg-v55 .section .service-grid:not(.dg-service-loop) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 10px !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .service-card {
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 34px rgba(0,70,118,.10) !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .service-card > a {
    display: grid !important;
    grid-template-columns: 118px 1fr !important;
    min-height: 170px !important;
    text-decoration: none !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .card-img {
    grid-row: 1 / span 2 !important;
    height: 100% !important;
    min-height: 170px !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .icon-badge {
    position: absolute !important;
    left: 92px !important;
    top: 18px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 26px rgba(0,70,118,.14) !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .icon-badge img {
    width: 27px !important;
    height: 27px !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .card-body {
    padding: 20px 16px 16px 34px !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .card-body h3 {
    font-size: 20px !important;
    line-height: 1.16 !important;
    margin-bottom: 8px !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .card-body p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .card-link {
    min-height: 36px !important;
    width: max-content !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(8,121,242,.08) !important;
  }

  /* Detail pages */
  body.dg-v55 .service-top {
    background: transparent !important;
    padding: 10px 14px 20px !important;
  }

  body.dg-v55 .service-photo,
  body.dg-v55 .service-photo.service-photo-wrap {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    box-shadow: 0 16px 38px rgba(0,70,118,.13) !important;
  }

  body.dg-v55 .service-photo img,
  body.dg-v55 .service-photo-img {
    height: auto !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body.dg-v55 .lead-card,
  body.dg-v55 .price-box,
  body.dg-v55 .info-box,
  body.dg-v55 .feature,
  body.dg-v55 .faq details,
  body.dg-v55 .contact-card,
  body.dg-v55 .map-box,
  body.dg-v55 .operator-box {
    border-radius: 26px !important;
    box-shadow: 0 14px 34px rgba(0,70,118,.09) !important;
  }

  body.dg-v55 .lead-card {
    padding: 24px 20px !important;
  }

  body.dg-v55 .lead-card h1,
  body.dg-v55 .lead-card h2 {
    font-size: clamp(26px, 7.8vw, 38px) !important;
    line-height: 1.12 !important;
  }

  body.dg-v55 .info-grid,
  body.dg-v55 .feature-grid,
  body.dg-v55 .contact-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v55 .info-box,
  body.dg-v55 .feature {
    padding: 18px !important;
  }

  body.dg-v55 .pill-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  body.dg-v55 .pill-list span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  body.dg-v55 .cta-band {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 24px 18px !important;
    border-radius: 28px !important;
  }

  body.dg-v55 .cta-band .btn {
    width: 100% !important;
    max-width: 230px !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  body.dg-v55 .related {
    width: calc(100% - 14px) !important;
    margin: 18px auto 20px !important;
    border-radius: 30px !important;
    padding: 34px 0 32px !important;
  }

  body.dg-v55 .related h2 {
    padding: 0 18px !important;
    color: #fff !important;
    text-align: center !important;
  }

  /* Gallery/contact page mobile structure */
  body.dg-v55 .gallery-grid,
  body.dg-v55 .real-gallery-grid,
  body.dg-v55 .portfolio-masonry,
  body.dg-v55 .electric-video-grid,
  body.dg-v55 .video-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  body.dg-v55 .real-gallery-card,
  body.dg-v55 .gallery-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4/3 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  body.dg-v55 .real-gallery-card img,
  body.dg-v55 .gallery-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.dg-v55 .dg-video-card,
  body.dg-v55 .electric-video-card,
  body.dg-v55 .video-card {
    width: 100% !important;
    border-radius: 24px !important;
  }

  body.dg-v55 .contact-card {
    padding: 24px 18px !important;
  }

  body.dg-v55 .contact-card img,
  body.dg-v55 .contact-icon {
    width: 64px !important;
    height: 64px !important;
  }

  /* Footer and bottom app tabbar */
  body.dg-v55 .footer {
    padding: 34px 18px calc(110px + env(safe-area-inset-bottom)) !important;
    border-radius: 30px 30px 0 0 !important;
  }

  body.dg-v55 .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    text-align: left !important;
  }

  body.dg-v55 .phone-float {
    display: none !important;
  }

  body.dg-v55 .mobile-app-tabbar {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    height: 72px !important;
    z-index: 60000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 5px !important;
    padding: 8px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(25,215,255,.24) !important;
    box-shadow: 0 18px 54px rgba(0,56,95,.18) !important;
    backdrop-filter: blur(24px) saturate(1.25) !important;
  }

  body.dg-v55 .mobile-app-tabbar a {
    min-width: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    color: #6a8291 !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
  }

  body.dg-v55 .mobile-app-tabbar .tab-ico {
    width: 29px !important;
    height: 29px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(240,252,255,.92) !important;
    border: 1px solid rgba(25,215,255,.18) !important;
  }

  body.dg-v55 .mobile-app-tabbar img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
  }

  body.dg-v55 .mobile-app-tabbar a.active-tab {
    color: var(--v55-blue) !important;
    background: rgba(8,121,242,.08) !important;
  }

  body.dg-v55 .mobile-app-tabbar a.active-tab .tab-ico {
    background: linear-gradient(135deg, var(--v55-cyan), var(--v55-blue)) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(8,121,242,.20) !important;
  }

  body.dg-v55 .mobile-app-tabbar a.active-tab img,
  body.dg-v55 .mobile-app-tabbar .tab-call img {
    filter: brightness(0) invert(1) !important;
  }

  body.dg-v55 .mobile-app-tabbar .tab-call .tab-ico {
    width: 36px !important;
    height: 36px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg,#1ee777,#09b94f) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(14,190,82,.26) !important;
  }

  body.dg-v55 .mobile-app-tabbar .tab-call b {
    color: #12a84a !important;
  }
}

@media (max-width: 420px) {
  body.dg-v55 .site-header {
    width: calc(100% - 10px) !important;
    border-radius: 24px !important;
  }

  body.dg-v55 .header-inner {
    padding: 7px 8px !important;
  }

  body.dg-v55 .socials {
    gap: 4px !important;
    padding-right: 46px !important;
  }

  body.dg-v55 .socials a {
    width: 31px !important;
    height: 31px !important;
    border-radius: 12px !important;
  }

  body.dg-v55 .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    right: 7px !important;
  }

  body.dg-v55 .hero,
  body.dg-v55 .home-hero-v17,
  body.dg-v55 .dg-clean-banner,
  body.dg-v55 .gallery-modern-hero {
    width: calc(100% - 10px) !important;
    border-radius: 28px !important;
  }

  body.dg-v55 .home-hero-v17 .hero-inner,
  body.dg-v55 .dg-clean-banner,
  body.dg-v55 .gallery-modern-hero {
    min-height: 224px !important;
    padding: 30px 16px 26px !important;
    background-size: 200px auto !important;
  }

  body.dg-v55 .hero h1,
  body.dg-v55 .dg-clean-banner h1,
  body.dg-v55 .gallery-modern-hero h1 {
    font-size: clamp(30px, 11vw, 42px) !important;
  }

  body.dg-v55 .home-service-showcase {
    padding: 0 10px !important;
  }

  body.dg-v55 .mobile-service-switcher {
    padding: 14px !important;
    border-radius: 28px !important;
  }

  body.dg-v55 .mobile-service-image {
    height: 172px !important;
  }

  body.dg-v55 .mobile-service-badge {
    top: 141px !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .service-card > a {
    grid-template-columns: 104px 1fr !important;
    min-height: 164px !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .icon-badge {
    left: 80px !important;
    width: 48px !important;
    height: 48px !important;
  }

  body.dg-v55 .section .service-grid:not(.dg-service-loop) .card-body {
    padding-left: 30px !important;
  }

  body.dg-v55 .pill-list {
    grid-template-columns: 1fr !important;
  }
}

@keyframes v55MenuIn {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* =========================================================
   DoorGO v56 — mobile service-detail cleanup + contact icons fix
   Fixes empty/ugly grey blocks under detail-page images and
   tightens mobile contact cards/icons.
   ========================================================= */

@media (max-width: 820px) {
  body.dg-v56 .contact-page-section .contact-cards,
  body.dg-v56 .contact-cards-polished {
    gap: 16px !important;
  }

  body.dg-v56 .contact-card {
    min-height: auto !important;
    padding: 28px 18px 24px !important;
    border-radius: 28px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.dg-v56 .contact-card::before,
  body.dg-v56 .contact-card::after {
    opacity: .55 !important;
  }

  body.dg-v56 .contact-icon,
  body.dg-v56 .contact-card img:first-child {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    margin: 0 auto 14px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(180deg, #ffffff, #effbff) !important;
    border: 1px solid rgba(25,215,255,.28) !important;
    box-shadow: 0 12px 28px rgba(0,70,118,.10) !important;
  }

  body.dg-v56 .contact-icon img,
  body.dg-v56 .contact-card img:first-child img,
  body.dg-v56 .contact-card > img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body.dg-v56 .contact-card h3 {
    margin: 4px 0 8px !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  body.dg-v56 .contact-card p,
  body.dg-v56 .contact-card a {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #536d80 !important;
  }

  body.dg-v56 .contact-card a {
    color: #0b7cf0 !important;
    font-weight: 900 !important;
  }

  /* Service detail pages: make the area under the hero image clean and visible */
  body.dg-v56 .service-top {
    padding: 8px 10px 0 !important;
    background: transparent !important;
  }

  body.dg-v56 .service-photo,
  body.dg-v56 .service-photo.service-photo-wrap {
    max-width: 430px !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(0,70,118,.14) !important;
  }

  body.dg-v56 .service-photo img,
  body.dg-v56 .service-photo-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body.dg-v56 .content {
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 10px 34px !important;
    display: block !important;
  }

  body.dg-v56 .content > .lead-card:first-child {
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    margin: -18px auto 12px !important;
    padding: 20px 18px 18px !important;
    min-height: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(244,252,255,.98)) !important;
    border: 1px solid rgba(25,215,255,.22) !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 32px rgba(0,70,118,.08) !important;
    overflow: visible !important;
  }

  body.dg-v56 .content > .lead-card:first-child::before,
  body.dg-v56 .content > .lead-card:first-child::after {
    display: none !important;
  }

  body.dg-v56 .lead-card .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(8,121,242,.08) !important;
    color: #0b7cf0 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .02em !important;
    margin-bottom: 10px !important;
  }

  body.dg-v56 .lead-card h1,
  body.dg-v56 .lead-card h2 {
    display: block !important;
    margin: 0 0 10px !important;
    color: #071c2b !important;
    font-size: clamp(24px, 7.2vw, 33px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
  }

  body.dg-v56 .lead-card p {
    display: block !important;
    margin: 0 !important;
    color: #5b7487 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  body.dg-v56 .key-making-panel,
  body.dg-v56 .price-box,
  body.dg-v56 .cta-band,
  body.dg-v56 .text-section,
  body.dg-v56 .faq details,
  body.dg-v56 .info-box,
  body.dg-v56 .feature,
  body.dg-v56 .operator-box,
  body.dg-v56 .map-box {
    border-radius: 22px !important;
  }

  body.dg-v56 .price-box {
    margin: 0 auto 14px !important;
    padding: 16px 18px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  body.dg-v56 .key-making-panel {
    margin: 10px auto 14px !important;
    padding: 18px !important;
    grid-template-columns: 60px 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }

  body.dg-v56 .key-making-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
  }

  body.dg-v56 .key-making-icon img {
    width: 28px !important;
    height: 28px !important;
  }

  body.dg-v56 .text-section {
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.dg-v56 .text-section h2 {
    margin: 24px 0 12px !important;
    font-size: clamp(24px, 7.2vw, 32px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
    color: #071c2b !important;
  }

  body.dg-v56 .info-grid,
  body.dg-v56 .feature-grid {
    gap: 10px !important;
  }

  body.dg-v56 .info-box,
  body.dg-v56 .feature {
    padding: 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(242,251,255,.96)) !important;
    border: 1px solid rgba(25,215,255,.18) !important;
    box-shadow: 0 12px 24px rgba(0,70,118,.06) !important;
  }

  body.dg-v56 .mini-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }

  body.dg-v56 .mini-icon img {
    width: 22px !important;
    height: 22px !important;
  }

  body.dg-v56 .pill-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  body.dg-v56 .pill-list span {
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
  }

  body.dg-v56 .faq details {
    margin-bottom: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.dg-v56 .faq summary {
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  body.dg-v56 .faq details p {
    padding: 0 16px 16px !important;
    color: #5b7487 !important;
  }

  body.dg-v56 .cta-band {
    margin: 20px auto 0 !important;
    padding: 20px 18px !important;
    gap: 14px !important;
  }

  body.dg-v56 .related {
    width: calc(100% - 10px) !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 420px) {
  body.dg-v56 .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.dg-v56 .content > .lead-card:first-child {
    margin-top: -16px !important;
    padding: 18px 16px 16px !important;
  }

  body.dg-v56 .pill-list {
    grid-template-columns: 1fr !important;
  }

  body.dg-v56 .contact-card {
    padding: 24px 16px 22px !important;
  }

  body.dg-v56 .contact-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
  }
}


/* =========================================================
   DoorGO v57 — premium mobile service-detail structure
   Bigger hero / cleaner title sheet / nicer CTA / cleaner pills
   ========================================================= */
@media (max-width: 820px) {
  body.dg-v57 .dg-clean-banner {
    width: calc(100% - 12px) !important;
    min-height: 248px !important;
    margin: 8px auto 14px !important;
    padding: 34px 16px 26px !important;
    border-radius: 32px !important;
    background-size: 180px auto !important;
    background-position: center center !important;
    box-shadow: 0 20px 42px rgba(0, 60, 98, .18) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  body.dg-v57 .dg-clean-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3,23,37,.18), rgba(3,23,37,.08));
    pointer-events: none;
  }

  body.dg-v57 .dg-clean-banner-inner {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  body.dg-v57 .dg-clean-banner .eyebrow {
    align-self: center !important;
    margin: 0 auto !important;
    padding: 7px 14px !important;
    min-height: 32px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    letter-spacing: .03em !important;
    background: rgba(255,255,255,.22) !important;
    backdrop-filter: blur(10px) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: none !important;
  }

  body.dg-v57 .dg-clean-banner h1 {
    max-width: 12ch !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(30px, 10.8vw, 42px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    text-wrap: balance !important;
    text-align: center !important;
    text-shadow: 0 4px 18px rgba(0,0,0,.12) !important;
  }

  body.dg-v57 .dg-banner-actions {
    width: 100% !important;
    max-width: 296px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 4px auto 0 !important;
  }

  body.dg-v57 .dg-banner-actions .btn,
  body.dg-v57 .dg-banner-actions .btn.white {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    padding: 0 18px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    box-shadow: 0 16px 32px rgba(0, 86, 160, .18) !important;
  }

  body.dg-v57 .service-top {
    padding: 0 10px !important;
    margin-top: -2px !important;
  }

  body.dg-v57 .service-photo,
  body.dg-v57 .service-photo.service-photo-wrap {
    max-width: 430px !important;
    margin: 0 auto !important;
    border-radius: 32px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 20px 42px rgba(0, 70, 118, .16) !important;
  }

  body.dg-v57 .service-photo img,
  body.dg-v57 .service-photo-img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  body.dg-v57 .content {
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 10px 38px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v57 .content > .lead-card:first-child {
    position: relative !important;
    z-index: 3 !important;
    margin: -18px auto 0 !important;
    padding: 24px 18px 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(242,251,255,.97)) !important;
    border: 1px solid rgba(25,215,255,.18) !important;
    border-radius: 28px !important;
    box-shadow: 0 18px 34px rgba(0,70,118,.10) !important;
    overflow: visible !important;
  }

  body.dg-v57 .content > .lead-card:first-child::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    width: 72px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #28c5ff, #0b7cf0);
    transform: translateY(-2px);
  }

  body.dg-v57 .content > .lead-card:first-child .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    margin: 0 0 10px !important;
    background: rgba(10,124,240,.08) !important;
    border: 1px solid rgba(10,124,240,.14) !important;
    color: #0b7cf0 !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
    font-size: 12px !important;
  }

  body.dg-v57 .lead-card h1,
  body.dg-v57 .lead-card h2 {
    margin: 0 0 10px !important;
    font-size: clamp(25px, 7.8vw, 34px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.05em !important;
    color: #071c2b !important;
    text-wrap: balance !important;
  }

  body.dg-v57 .lead-card p {
    margin: 0 !important;
    color: #587184 !important;
    font-size: 14px !important;
    line-height: 1.66 !important;
  }

  body.dg-v57 .key-making-panel,
  body.dg-v57 .price-box,
  body.dg-v57 .text-section,
  body.dg-v57 .faq details,
  body.dg-v57 .cta-band,
  body.dg-v57 .feature,
  body.dg-v57 .info-box,
  body.dg-v57 .operator-box,
  body.dg-v57 .map-box {
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,252,255,.97)) !important;
    border: 1px solid rgba(25,215,255,.16) !important;
    box-shadow: 0 14px 30px rgba(0,70,118,.08) !important;
  }

  body.dg-v57 .key-making-panel {
    margin: 0 !important;
    padding: 18px !important;
    grid-template-columns: 62px 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }

  body.dg-v57 .key-making-icon {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    box-shadow: inset 0 0 0 1px rgba(25,215,255,.12), 0 8px 18px rgba(0,70,118,.08) !important;
  }

  body.dg-v57 .key-making-copy h2 {
    margin: 2px 0 8px !important;
    font-size: 21px !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }

  body.dg-v57 .key-making-copy p {
    margin: 0 !important;
    color: #5a7386 !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  body.dg-v57 .key-making-pills,
  body.dg-v57 .pill-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.dg-v57 .key-making-pills span,
  body.dg-v57 .pill-list span {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(245,251,255,.98), rgba(235,247,255,.98)) !important;
    border: 1px solid rgba(25,215,255,.18) !important;
    color: #214357 !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  }

  body.dg-v57 .price-box {
    margin: 0 !important;
    padding: 18px 18px 16px !important;
    background: linear-gradient(135deg, #08375a, #0b5677 52%, #0a7cf0 120%) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
    border: 0 !important;
    box-shadow: 0 18px 34px rgba(0,70,118,.16) !important;
  }

  body.dg-v57 .price-box b,
  body.dg-v57 .price-box strong {
    color: #fff !important;
    font-size: 15px !important;
  }

  body.dg-v57 .text-section {
    margin: 0 !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  body.dg-v57 .text-section h2 {
    margin: 0 0 14px !important;
    font-size: clamp(22px, 6.8vw, 30px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
    color: #071c2b !important;
    text-wrap: balance !important;
  }

  body.dg-v57 .text-section > p {
    color: #5a7386 !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  body.dg-v57 .info-grid,
  body.dg-v57 .feature-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.dg-v57 .info-box,
  body.dg-v57 .feature {
    padding: 16px !important;
    min-height: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, #ffffff, #f3fbff) !important;
    border: 1px solid rgba(25,215,255,.16) !important;
    box-shadow: 0 10px 22px rgba(0,70,118,.05) !important;
  }

  body.dg-v57 .mini-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    margin: 0 0 10px !important;
    box-shadow: inset 0 0 0 1px rgba(25,215,255,.16) !important;
  }

  body.dg-v57 .mini-icon img {
    width: 22px !important;
    height: 22px !important;
  }

  body.dg-v57 .info-box h3,
  body.dg-v57 .feature h3 {
    margin: 0 0 6px !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
    color: #102332 !important;
  }

  body.dg-v57 .info-box p,
  body.dg-v57 .feature p {
    margin: 0 !important;
    color: #60798b !important;
    font-size: 13.5px !important;
    line-height: 1.58 !important;
  }

  body.dg-v57 .faq details {
    margin: 0 0 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.dg-v57 .faq summary {
    min-height: 54px !important;
    padding: 16px 18px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    color: #0d2233 !important;
  }

  body.dg-v57 .faq details p {
    margin: 0 !important;
    padding: 0 18px 18px !important;
    color: #5a7386 !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  body.dg-v57 .cta-band {
    margin: 0 !important;
    padding: 22px 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #031c2c 0%, #083d60 55%, #0a7cf0 130%) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 20px 38px rgba(0,70,118,.18) !important;
  }

  body.dg-v57 .cta-band h2 {
    margin: 0 0 6px !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.04 !important;
    color: #fff !important;
    letter-spacing: -.04em !important;
  }

  body.dg-v57 .cta-band p {
    margin: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  body.dg-v57 .cta-band .btn {
    width: 100% !important;
    max-width: 260px !important;
    min-height: 54px !important;
    margin: 2px auto 0 !important;
    border-radius: 999px !important;
    justify-content: center !important;
    box-shadow: 0 18px 32px rgba(0,0,0,.18) !important;
  }

  body.dg-v57 .related {
    width: calc(100% - 10px) !important;
    margin: 20px auto 22px !important;
    padding: 28px 0 30px !important;
    border-radius: 30px !important;
    background: linear-gradient(135deg, #062033, #0a4163) !important;
    box-shadow: 0 20px 38px rgba(0,70,118,.18) !important;
  }

  body.dg-v57 .related h2 {
    margin: 0 0 16px !important;
    padding: 0 16px !important;
    text-align: center !important;
    color: #fff !important;
    font-size: clamp(24px, 6.6vw, 30px) !important;
    line-height: 1.08 !important;
  }

  body.dg-v57 .related-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(82%, 1fr) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 4px 16px 2px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.dg-v57 .related-track::-webkit-scrollbar {
    display: none !important;
  }

  body.dg-v57 .related-track .service-card {
    scroll-snap-align: start !important;
    min-width: 0 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.18) !important;
  }

  body.dg-v57 .related-track .service-card .card-body {
    padding: 18px 16px 18px !important;
  }

  body.dg-v57 .related-track .service-card h3 {
    font-size: 18px !important;
    line-height: 1.18 !important;
  }

  body.dg-v57 .related-track .service-card p {
    font-size: 13.5px !important;
    line-height: 1.56 !important;
  }
}

@media (max-width: 420px) {
  body.dg-v57 .dg-clean-banner {
    min-height: 238px !important;
    padding: 32px 14px 24px !important;
    border-radius: 30px !important;
  }

  body.dg-v57 .dg-clean-banner h1 {
    font-size: clamp(29px, 10.6vw, 38px) !important;
    max-width: 11.5ch !important;
  }

  body.dg-v57 .service-photo,
  body.dg-v57 .service-photo.service-photo-wrap {
    border-radius: 30px !important;
  }

  body.dg-v57 .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 12px !important;
  }

  body.dg-v57 .content > .lead-card:first-child {
    margin-top: -16px !important;
    padding: 22px 16px 16px !important;
    border-radius: 26px !important;
  }

  body.dg-v57 .text-section,
  body.dg-v57 .price-box,
  body.dg-v57 .key-making-panel,
  body.dg-v57 .cta-band {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.dg-v57 .key-making-panel {
    grid-template-columns: 1fr !important;
  }

  body.dg-v57 .related-track {
    grid-auto-columns: minmax(88%, 1fr) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* =========================================================
   DoorGO v58 — remove mobile white gaps
   Fixes blank white/gray gaps under images and between sections.
   ========================================================= */

@media (max-width: 820px) {
  body.dg-v58 {
    background:
      radial-gradient(circle at 50% -4%, rgba(25,215,255,.22), transparent 35%),
      linear-gradient(180deg, #eafbff 0%, #f6fdff 42%, #eafbff 100%) !important;
  }

  body.dg-v58 main {
    background:
      linear-gradient(180deg, rgba(234,251,255,.92), rgba(255,255,255,.55), rgba(234,251,255,.92)) !important;
    overflow: hidden !important;
  }

  /* no hard white strips between page sections */
  body.dg-v58 main > section {
    background-color: transparent !important;
  }

  body.dg-v58 .section,
  body.dg-v58 .service-top,
  body.dg-v58 .content,
  body.dg-v58 .gallery-page-section,
  body.dg-v58 .contact-page-section,
  body.dg-v58 .about-section,
  body.dg-v58 .electric-video-section {
    background: transparent !important;
  }

  /* image containers must never reserve extra blank area below the photo */
  body.dg-v58 .service-photo,
  body.dg-v58 .service-photo.service-photo-wrap,
  body.dg-v58 .mobile-service-image,
  body.dg-v58 .card-img,
  body.dg-v58 .real-gallery-card,
  body.dg-v58 .gallery-card {
    padding: 0 !important;
    line-height: 0 !important;
  }

  body.dg-v58 .service-photo,
  body.dg-v58 .service-photo.service-photo-wrap {
    display: block !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background:
      linear-gradient(180deg, rgba(232,250,255,.95), rgba(232,250,255,.95)) !important;
    box-shadow: 0 16px 36px rgba(0,70,118,.13) !important;
  }

  body.dg-v58 .service-photo img,
  body.dg-v58 .service-photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    vertical-align: top !important;
  }

  body.dg-v58 .service-photo::before,
  body.dg-v58 .service-photo::after,
  body.dg-v58 .service-photo-wrap::before,
  body.dg-v58 .service-photo-wrap::after {
    display: none !important;
  }

  /* Home mobile service switcher: remove hidden min-height that creates empty bottom gaps */
  body.dg-v58 .home-service-showcase {
    margin-bottom: 18px !important;
  }

  body.dg-v58 .mobile-service-stage {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 12px !important;
  }

  body.dg-v58 .mobile-service-panel {
    min-height: 0 !important;
  }

  body.dg-v58 .mobile-service-panel > a {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(238,250,255,.98)) !important;
  }

  body.dg-v58 .mobile-service-image {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.dg-v58 .mobile-service-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    vertical-align: top !important;
  }

  body.dg-v58 .mobile-service-content {
    margin: 0 !important;
    background: transparent !important;
  }

  /* service cards on mobile should not have blank image-bottom blocks */
  body.dg-v58 .service-card .card-img {
    display: block !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.dg-v58 .service-card .card-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    vertical-align: top !important;
  }

  /* remove big empty spacing before bottom nav */
  body.dg-v58 .footer {
    margin-top: 0 !important;
  }

  body.dg-v58 .related {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 420px) {
  body.dg-v58 .service-photo,
  body.dg-v58 .service-photo.service-photo-wrap,
  body.dg-v58 .mobile-service-image {
    aspect-ratio: 16 / 10 !important;
  }

  body.dg-v58 .content {
    padding-top: 0 !important;
  }

  body.dg-v58 .home-service-showcase {
    margin-bottom: 12px !important;
  }
}


/* =========================================================
   DoorGO v59 — contact mobile icon fix
   Fixes the black square icons on Contact page by making
   .contact-icon the only wrapper and resetting the image itself.
   ========================================================= */

@media (max-width: 820px) {
  body.dg-v59 .contact-page-section .contact-card {
    overflow: hidden !important;
  }

  body.dg-v59 .contact-page-section .contact-card .contact-icon {
    position: relative !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 auto 16px !important;
    padding: 0 !important;
    border-radius: 28px !important;
    display: grid !important;
    place-items: center !important;
    background:
      radial-gradient(circle at 50% 40%, rgba(25,215,255,.16), transparent 58%),
      linear-gradient(180deg, #ffffff, #edfaff) !important;
    border: 1px solid rgba(25,215,255,.30) !important;
    outline: 1px dashed rgba(25,215,255,.32) !important;
    outline-offset: 7px !important;
    box-shadow:
      0 16px 34px rgba(0,70,118,.11),
      inset 0 1px 0 rgba(255,255,255,.9) !important;
    filter: none !important;
    transform: none !important;
  }

  body.dg-v59 .contact-page-section .contact-card .contact-icon::before,
  body.dg-v59 .contact-page-section .contact-card .contact-icon::after {
    display: none !important;
    content: none !important;
  }

  /* Highest-specificity reset: old .contact-card img:first-child was styling the IMG as a square */
  body.dg-v59 .contact-page-section .contact-card .contact-icon > img,
  body.dg-v59 .contact-page-section .contact-card .contact-icon > img:first-child,
  body.dg-v59 .contact-page-section .contact-card img[src="location.png"],
  body.dg-v59 .contact-page-section .contact-card img[src="telephone.png"],
  body.dg-v59 .contact-page-section .contact-card img[src="mail.png"] {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: brightness(0) saturate(100%) invert(7%) sepia(22%) saturate(1966%) hue-rotate(169deg) brightness(91%) contrast(103%) !important;
    mix-blend-mode: normal !important;
  }

  body.dg-v59 .contact-page-section .contact-card:hover .contact-icon,
  body.dg-v59 .contact-page-section .contact-card:active .contact-icon {
    transform: none !important;
    background:
      radial-gradient(circle at 50% 40%, rgba(25,215,255,.22), transparent 58%),
      linear-gradient(180deg, #ffffff, #eafbff) !important;
  }

  body.dg-v59 .contact-page-section .contact-card:hover .contact-icon > img,
  body.dg-v59 .contact-page-section .contact-card:active .contact-icon > img {
    transform: none !important;
    filter: brightness(0) saturate(100%) invert(7%) sepia(22%) saturate(1966%) hue-rotate(169deg) brightness(91%) contrast(103%) !important;
  }

  body.dg-v59 .contact-page-section .contact-card h3 {
    color: #102332 !important;
    text-shadow: none !important;
  }

  body.dg-v59 .contact-page-section .contact-card p,
  body.dg-v59 .contact-page-section .contact-card a {
    color: #587184 !important;
  }

  body.dg-v59 .contact-page-section .contact-card a {
    color: #0879f2 !important;
  }
}

@media (max-width: 420px) {
  body.dg-v59 .contact-page-section .contact-card .contact-icon {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    border-radius: 25px !important;
  }

  body.dg-v59 .contact-page-section .contact-card .contact-icon > img,
  body.dg-v59 .contact-page-section .contact-card .contact-icon > img:first-child,
  body.dg-v59 .contact-page-section .contact-card img[src="location.png"],
  body.dg-v59 .contact-page-section .contact-card img[src="telephone.png"],
  body.dg-v59 .contact-page-section .contact-card img[src="mail.png"] {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
  }
}


/* =========================================================
   DoorGO v60 — remove desktop home white gap
   Removes the blank map/white strip after the home services carousel.
   ========================================================= */

body.dg-v60 .services-strip {
  margin-bottom: 0 !important;
}

body.dg-v60 .services-strip + .section:has(.map-box) {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.dg-v60 main:has(.home-process-section) {
  background:
    linear-gradient(180deg, rgba(238,252,255,.96), rgba(255,255,255,.86) 42%, rgba(238,252,255,.96)) !important;
}

body.dg-v60 main:has(.home-process-section) + .phone-float + .footer,
body.dg-v60 main:has(.home-process-section) ~ .footer {
  margin-top: 0 !important;
}

body.dg-v60 .footer {
  margin-top: 0 !important;
}

/* make the transition from services section to footer feel intentional */
body.dg-v60 .services-strip {
  border-bottom: 1px solid rgba(25,214,255,.18) !important;
}

@media (max-width: 820px) {
  body.dg-v60 .services-strip + .section:has(.map-box) {
    display: none !important;
  }

  body.dg-v60 .services-strip {
    margin-bottom: 0 !important;
  }

  body.dg-v60 .footer {
    margin-top: 0 !important;
  }
}


/* =========================================================
   DoorGO v61 — remove addresses + Georgia-wide service area
   Also removes remaining white gap before footer on services/contact.
   ========================================================= */

body.dg-v61 .map-panel,
body.dg-v61 .map-box {
  display: none !important;
}

body.dg-v61 .cta-band p {
  max-width: 760px !important;
}

/* Desktop: kill the blank white area before footer on services/contact pages */
body.dg-v61 .services-page .section,
body.dg-v61 main > .section:last-child {
  padding-bottom: 32px !important;
  margin-bottom: 0 !important;
}

body.dg-v61 main + .phone-float + .footer,
body.dg-v61 main ~ .footer,
body.dg-v61 .footer {
  margin-top: 0 !important;
}

body.dg-v61 .contact-page-section.premium-contact {
  padding-bottom: 46px !important;
}

/* Contact area card replacement */
body.dg-v61 .contact-card h3 {
  text-align: center;
}

body.dg-v61 .contact-card p {
  text-align: center;
}

/* Make CTA areas cleaner since address was removed */
body.dg-v61 .cta-band {
  align-items: center !important;
}

body.dg-v61 .cta-band p {
  line-height: 1.55 !important;
}

/* Home/services footer transition no white strip */
body.dg-v61 .services-strip + .section,
body.dg-v61 .cta-band + .footer {
  margin-top: 0 !important;
}

@media (max-width: 820px) {
  body.dg-v61 .map-panel,
  body.dg-v61 .map-box {
    display: none !important;
  }

  body.dg-v61 .contact-page-section.premium-contact {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }

  body.dg-v61 .contact-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.dg-v61 .contact-card {
    min-height: 190px !important;
  }

  body.dg-v61 .cta-band {
    margin-bottom: 0 !important;
  }

  body.dg-v61 main > .section:last-child {
    padding-bottom: 22px !important;
  }
}

@media (min-width: 821px) {
  body.dg-v61 .contact-page-section.premium-contact .container {
    max-width: 1120px !important;
  }

  body.dg-v61 .contact-cards.contact-cards-polished {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-bottom: 0 !important;
  }

  body.dg-v61 .contact-page-section.premium-contact {
    min-height: auto !important;
  }
}


/* =========================================================
   DoorGO v62 — remove visible dashes/line separators
   HTML text nodes are cleaned too; this hides decorative dash lines.
   ========================================================= */

body.dg-v62 .footer h3::after,
body.dg-v62 .section-title::after,
body.dg-v62 .section-title::before,
body.dg-v62 .dg-clean-banner h1::after,
body.dg-v62 .hero h1::after,
body.dg-v62 .eyebrow::before,
body.dg-v62 .eyebrow::after {
  display: none !important;
  content: none !important;
}

body.dg-v62 .card-link,
body.dg-v62 .btn,
body.dg-v62 a {
  text-decoration: none !important;
}

/* keep CTA/button labels clean if old arrow/dash icons were generated */
body.dg-v62 .card-link::after,
body.dg-v62 .btn::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   DoorGO v68 — V62 base + only make the mobile services section visible
   No big restructure. No broken v64/v67 loop changes.
   ========================================================= */

@media (max-width: 820px) {
  /* The exact section from the screenshot */
  body.dg-v68 .services-strip {
    width: calc(100% - 10px) !important;
    max-width: 430px !important;
    margin: 16px auto 18px !important;
    padding: 30px 0 32px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    position: relative !important;
    background:
      radial-gradient(circle at 50% 20%, rgba(255,255,255,.12), transparent 34%),
      linear-gradient(180deg, rgba(0,42,61,.96), rgba(0,22,34,.98)),
      url("doorgo-pattern-tile-dark.png") center top / 135px auto repeat !important;
    border: 1px solid rgba(25,215,255,.24) !important;
    box-shadow: 0 18px 42px rgba(0,42,64,.20) !important;
  }

  body.dg-v68 .services-strip::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 50% 25%, rgba(255,255,255,.09), transparent 35%),
      linear-gradient(90deg, rgba(0,0,0,.10), transparent 18%, transparent 82%, rgba(0,0,0,.10)) !important;
    z-index: 0 !important;
  }

  body.dg-v68 .services-strip::after {
    display: none !important;
    content: none !important;
  }

  body.dg-v68 .services-strip .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* remove those ugly vertical grey/white fade bars */
  body.dg-v68 .services-strip .container::before,
  body.dg-v68 .services-strip .container::after,
  body.dg-v68 .services-strip .container:has(.service-grid)::before,
  body.dg-v68 .services-strip .container:has(.service-grid)::after,
  body.dg-v68 .services-strip .container:has(.service-grid.dg-service-loop)::before,
  body.dg-v68 .services-strip .container:has(.service-grid.dg-service-loop)::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  body.dg-v68 .services-strip .center {
    width: calc(100% - 24px) !important;
    max-width: 360px !important;
    margin: 0 auto 15px !important;
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 4 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.dg-v68 .services-strip .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 auto 10px !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: rgba(245,253,255,.96) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
  }

  body.dg-v68 .services-strip .center h2,
  body.dg-v68 .services-strip h2 {
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: clamp(26px, 7.5vw, 34px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.045em !important;
    text-align: center !important;
    text-wrap: balance !important;
    text-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.dg-v68 .services-strip .center p {
    color: rgba(238,252,255,.88) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Keep the existing V62 loop, but make the cards readable/visible */
  body.dg-v68 .services-strip .service-grid,
  body.dg-v68 .services-strip .service-grid.dg-service-loop {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
    overflow: visible !important;
    z-index: 3 !important;
  }

  body.dg-v68 .services-strip .service-grid.dg-service-loop {
    padding-top: 0 !important;
    padding-bottom: 10px !important;
  }

  body.dg-v68 .services-strip .service-grid.dg-service-loop .service-card {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(238,250,255,.98)) !important;
    box-shadow: 0 16px 36px rgba(0,18,28,.20) !important;
  }

  body.dg-v68 .services-strip .service-grid.dg-service-loop .card-body h3,
  body.dg-v68 .services-strip .service-grid.dg-service-loop .card-body p,
  body.dg-v68 .services-strip .service-grid.dg-service-loop .card-link {
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  body.dg-v68 .services-strip .service-grid.dg-service-loop .card-body h3 {
    color: #071c2b !important;
  }

  body.dg-v68 .services-strip .service-grid.dg-service-loop .card-body p {
    color: #60798b !important;
  }

  body.dg-v68 .services-strip .service-grid.dg-service-loop .card-link {
    color: #0879f2 !important;
    background: rgba(8,121,242,.08) !important;
  }

  body.dg-v68 .services-strip > .container > p.center,
  body.dg-v68 .services-strip p.center {
    display: block !important;
    width: calc(100% - 28px) !important;
    max-width: 330px !important;
    margin: 14px auto 0 !important;
    padding: 11px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(238,252,255,.92) !important;
    text-align: center !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

@media (max-width: 420px) {
  body.dg-v68 .services-strip {
    width: calc(100% - 8px) !important;
    border-radius: 28px !important;
    padding-top: 28px !important;
    padding-bottom: 30px !important;
  }

  body.dg-v68 .services-strip .center h2,
  body.dg-v68 .services-strip h2 {
    font-size: clamp(25px, 7.6vw, 32px) !important;
    max-width: 320px !important;
  }
}


/* =========================================================
   DoorGO v70 — only center/fix mobile home hero title text
   Keeps v68 base. Fixes "თბილისსა და საქართველოში" overflowing.
   ========================================================= */

@media (max-width: 820px) {
  body.dg-v70 .home-hero-v17 .hero-inner {
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    align-items: center !important;
  }

  body.dg-v70 .home-hero-v17 .hero-inner h1 {
    width: 100% !important;
    max-width: 310px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font-size: clamp(25px, 7.1vw, 33px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.dg-v70 .home-hero-v17 .hero-inner h1 span {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media (max-width: 420px) {
  body.dg-v70 .home-hero-v17 .hero-inner {
    max-width: 326px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.dg-v70 .home-hero-v17 .hero-inner h1 {
    max-width: 292px !important;
    font-size: clamp(24px, 6.85vw, 29px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.04em !important;
  }

  body.dg-v70 .home-hero-v17 .hero-inner h1 span {
    max-width: 276px !important;
  }
}

@media (max-width: 380px) {
  body.dg-v70 .home-hero-v17 .hero-inner h1 {
    max-width: 270px !important;
    font-size: 24px !important;
    line-height: 1.07 !important;
  }

  body.dg-v70 .home-hero-v17 .hero-inner h1 span {
    max-width: 252px !important;
  }
}