*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#12344f;background:#f6fafc;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}body.menu-open{overflow:hidden}a{text-decoration:none;color:inherit}img,svg{display:block;max-width:100%}button,input,textarea{font:inherit}p{overflow-wrap:anywhere}:root{--blue:#0a3d68;--blue-2:#0f5d98;--green:#75c43a;--green-2:#4b9b17;--text:#12344f;--muted:#617589;--line:#d9e5ee;--soft:#eef6fb;--surface:#fff;--shadow:0 20px 60px rgba(10,61,104,.11);--shadow-sm:0 10px 30px rgba(10,61,104,.08);--container:1200px}.container{width:min(var(--container),calc(100% - 48px));margin:auto}.narrow{max-width:860px}section{padding:94px 0}.s-center{text-align:center}.s-label,.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--green-2);font-size:.78rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.s-label:before,.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(117,196,58,.13)}.s-title{margin:0 0 16px;color:var(--blue);font-size:clamp(2rem,4vw,3.25rem);line-height:1.04;letter-spacing:-.05em;font-weight:900}.s-desc{margin:0;color:var(--muted);font-size:1.06rem;max-width:720px}.s-center .s-desc{margin-inline:auto}.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}.reveal.v{opacity:1;transform:none}
/* header */
nav{position:fixed;inset:0 0 auto;z-index:1000;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s ease}nav.scrolled{background:rgba(255,255,255,.97);border-bottom-color:var(--line);box-shadow:0 8px 28px rgba(18,52,79,.08)}.nav-inner{height:88px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand img{width:230px;height:auto;object-fit:contain}.nav-links{display:flex;align-items:center;gap:25px;margin-left:auto}.nav-links>a{display:flex;align-items:center;gap:7px;font-size:.94rem;font-weight:750;color:var(--text);white-space:nowrap}.nav-links>a i{display:none;color:var(--green-2)}.nav-links>a:not(.menu-call):not(.menu-wa){position:relative}.nav-links>a:not(.menu-call):not(.menu-wa):after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:linear-gradient(90deg,var(--green),var(--blue-2));transition:.22s ease}.nav-links>a:not(.menu-call):not(.menu-wa):hover:after{width:100%}.desktop-actions{display:flex;align-items:center;gap:10px}.header-phone,.header-wa{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border-radius:999px;font-weight:800;white-space:nowrap;transition:.22s ease}.header-phone{background:#fff;border:1px solid var(--line);color:var(--blue);box-shadow:var(--shadow-sm)}.header-wa{background:linear-gradient(135deg,#27d367,#159a45);color:#fff;box-shadow:0 12px 24px rgba(21,154,69,.22)}.header-phone:hover,.header-wa:hover{transform:translateY(-2px)}.mobile-menu-head,.mobile-menu-actions{display:none}.burger{display:none;width:46px;height:46px;border:0;border-radius:15px;background:#f0f6fa;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}.burger span{width:23px;height:2px;border-radius:3px;background:var(--blue);transition:.25s ease}.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger.active span:nth-child(2){opacity:0}.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* hero */
.hero{position:relative;overflow:hidden;padding:150px 0 56px;background:radial-gradient(circle at 6% 22%,rgba(117,196,58,.14),transparent 30%),radial-gradient(circle at 92% 4%,rgba(15,93,152,.12),transparent 28%),linear-gradient(135deg,#fff 0%,#f2f8fc 58%,#eff8e9 100%)}.hero:before{content:"";position:absolute;left:-180px;bottom:-170px;width:470px;height:470px;border:78px solid rgba(10,61,104,.045);border-radius:50%}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:66px}.hero-copy{position:relative;z-index:1}.hero-kicker{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid #dfebf3;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);font-size:.86rem;font-weight:800;color:var(--blue);margin-bottom:20px}.hero-kicker i{color:var(--green-2)}.hero h1{margin:0 0 20px;font-size:clamp(2.9rem,5vw,5rem);line-height:.97;letter-spacing:-.065em;font-weight:900;color:var(--blue)}.hero h1 span{display:block;color:var(--blue-2)}.hero-sub{max-width:650px;margin:0 0 28px;color:var(--muted);font-size:1.14rem}.hero-actions{display:flex;flex-wrap:wrap;gap:13px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 25px;border-radius:999px;border:1px solid transparent;font-weight:850;transition:.23s ease}.btn:hover{transform:translateY(-2px)}.btn-primary,.btn-p{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;box-shadow:0 14px 28px rgba(75,155,23,.23)}.btn-whatsapp{background:#fff;color:#159a45;border-color:#cae8d5;box-shadow:var(--shadow-sm)}.btn-s{background:#fff;color:var(--blue);border-color:var(--line)}.btn-light{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff}.hero-trust{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:22px;color:var(--blue);font-weight:750;font-size:.94rem}.hero-trust span{display:flex;align-items:center;gap:7px}.hero-trust i{color:var(--green-2)}.hero-visual{position:relative}.hero-photo-card{position:relative;padding:12px;border-radius:32px;background:rgba(255,255,255,.9);border:1px solid #dce8f0;box-shadow:var(--shadow)}.hero-photo-card>img{width:100%;height:615px;border-radius:24px;object-fit:cover;object-position:center 19%}.hero-photo-overlay{position:absolute;left:30px;right:30px;bottom:28px;padding:17px 20px;border-radius:18px;background:rgba(8,43,72,.86);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.hero-photo-overlay strong,.hero-photo-overlay span{display:block}.hero-photo-overlay strong{font-size:1.03rem}.hero-photo-overlay strong i{color:#9ddd68;margin-right:7px}.hero-photo-overlay span{margin-top:3px;color:rgba(255,255,255,.77);font-size:.9rem}.hero-rating-card{position:absolute;top:28px;left:-30px;display:flex;align-items:center;gap:13px;max-width:255px;padding:15px 17px;border-radius:19px;background:rgba(255,255,255,.94);border:1px solid #dce8f0;box-shadow:var(--shadow-sm)}.rating-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:#edf8e5;color:var(--green-2)}.hero-rating-card strong,.hero-rating-card span{display:block}.hero-rating-card strong{color:var(--blue);font-size:.96rem}.hero-rating-card span{color:var(--muted);font-size:.82rem}.hero-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:46px;padding:17px;border-radius:26px;background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:var(--shadow)}.hero-proof>div{display:flex;align-items:center;justify-content:center;gap:11px;padding:6px;color:#fff}.hero-proof i{font-size:1.35rem;color:#a8de70}.hero-proof span,.hero-proof strong{display:block}.hero-proof span{font-size:.83rem;color:rgba(255,255,255,.75)}.hero-proof strong{font-size:.96rem;color:#fff}
/* cards and content */
.svc-grid,.why-grid,.process-grid,.related-grid,.location-grid{display:grid;gap:22px}.svc-grid{grid-template-columns:repeat(3,1fr);margin-top:42px}.svc{position:relative;overflow:hidden;padding:28px;border-radius:25px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.25s ease}.svc:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.svc:after{content:"";position:absolute;right:-40px;top:-40px;width:110px;height:110px;border-radius:50%;background:rgba(117,196,58,.08)}.svc-ico{width:56px;height:56px;display:grid;place-items:center;margin-bottom:18px;border-radius:17px;background:linear-gradient(135deg,#edf8e5,#edf6fc);color:var(--blue-2);border:1px solid #e1ebf2;font-size:1.35rem}.svc h3{margin:0 0 10px;color:var(--blue);font-size:1.3rem;line-height:1.16;letter-spacing:-.03em;font-weight:900}.svc p{margin:0 0 15px;color:var(--muted)}.text-link{font-weight:850;color:var(--blue-2)}.about-card{padding:16px;border-radius:34px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:42px;align-items:center}.about-img{overflow:hidden;min-height:535px;border-radius:26px;background:#eaf2f7}.about-img img{width:100%;height:100%;object-fit:cover;object-position:center 12%}.about-copy{padding:12px}.about-points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}.about-point{padding:18px;border-radius:18px;background:var(--soft);border:1px solid #dfeaf2}.about-point strong,.about-point span{display:block}.about-point strong{color:var(--blue);margin-bottom:4px}.about-point span{color:var(--muted);font-size:.92rem}.why-grid,.process-grid{grid-template-columns:repeat(4,1fr);margin-top:42px}.why-card,.process-step,.location-grid article,.content-card,.quote-box,.contact-info,.contact-map,.area-panel-card,.related-grid a,.legal-content{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}.why-card,.process-step{position:relative;overflow:hidden;padding:25px;border-radius:23px}.num{width:44px;height:44px;display:grid;place-items:center;margin-bottom:14px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;font-weight:900}.why-card h3,.process-step h3,.content-card h2,.quote-box h2,.location-grid h2,.related h2,.legal-content h1{margin:0 0 10px;color:var(--blue);font-weight:900;letter-spacing:-.03em}.why-card p,.process-step p,.content-card p,.quote-box p,.location-grid p,.legal-content p{margin:0;color:var(--muted)}.area-section{background:linear-gradient(135deg,var(--blue),var(--blue-2));overflow:hidden}.area-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}.area-section .s-title,.area-section .s-label,.area-section p{color:#fff}.area-tags{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}.area-tag{padding:11px 15px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:800}.area-panel-card{padding:28px;border-radius:26px;background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.16)!important;box-shadow:none;color:#fff}.area-panel-card strong,.area-panel-card span{display:block}.area-panel-card strong{font-size:1.15rem;margin-bottom:7px}.area-panel-card span{color:rgba(255,255,255,.79)}#faq{background:linear-gradient(180deg,#f7fbfe,#eef6fb)}details{margin:13px 0;padding:18px 21px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}summary{cursor:pointer;list-style:none;color:var(--blue);font-weight:850}summary::-webkit-details-marker{display:none}details p{margin:11px 0 0;color:var(--muted)}
/* contact */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;margin-top:42px}.contact-info,.contact-map,.content-card,.quote-box{padding:30px;border-radius:27px}.contact-title{margin:0 0 12px;color:var(--blue);font-size:1.85rem;letter-spacing:-.04em}.contact-stack{display:grid}.c-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #e8eff4}.c-item:last-child{border-bottom:0}.c-ico{width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;border-radius:15px;background:linear-gradient(135deg,#edf8e5,#edf6fc);color:var(--blue-2)}.c-item h3{margin:0 0 4px;color:var(--blue);font-size:1rem}.c-item p{margin:0;color:var(--muted)}.contact-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.contact-map{overflow:hidden;padding:0;display:grid;grid-template-rows:1fr auto}.contact-map iframe{width:100%;height:100%;min-height:390px;border:0}.map-caption{padding:18px 22px;border-top:1px solid #e8eff4;background:#fbfdff}.map-caption strong,.map-caption span{display:block}.map-caption strong{color:var(--blue)}.map-caption span{color:var(--muted)}
/* inner pages */
.page-hero{padding:150px 0 84px;background:radial-gradient(circle at 90% 10%,rgba(117,196,58,.1),transparent 24%),linear-gradient(135deg,#fff,#f2f8fc 60%,#eef8e7);border-bottom:1px solid #e5edf3}.page-hero h1{margin:.25rem 0 1rem;color:var(--blue);font-size:clamp(2.5rem,4.5vw,4.35rem);line-height:.98;letter-spacing:-.055em;font-weight:900}.page-hero p{max-width:760px;color:var(--muted);font-size:1.08rem}.content-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:24px;align-items:start}.quote-box{position:sticky;top:104px}.check-list{list-style:none;padding:0;margin:0}.check-list li{position:relative;padding:.75rem 0 .75rem 1.75rem;border-bottom:1px solid #e9eff4}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--green-2);font-weight:900}.related{background:#f7fbfe}.related-grid{grid-template-columns:repeat(3,1fr)}.related-grid a{padding:22px;border-radius:22px;transition:.23s ease}.related-grid a:hover,.location-grid article:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.related-grid strong,.related-grid span{display:block}.related-grid strong{color:var(--blue);margin-bottom:7px}.related-grid span{color:var(--green-2);font-weight:800}.location-grid{grid-template-columns:repeat(3,1fr)}.location-grid article{padding:24px;border-radius:23px}.legal-page{padding:132px 0 70px;min-height:80vh}.legal-content{max-width:860px;margin:auto;padding:36px;border-radius:30px}.legal-content h1{font-size:2.5rem}.legal-content h3{color:var(--blue);margin:25px 0 9px}.legal-content a{color:var(--blue-2)}
/* footer */
footer{position:relative;background:#071f34;color:rgba(255,255,255,.76);padding:66px 0 24px}.footer-wave{position:absolute;inset:0 0 auto;height:22px;background:linear-gradient(135deg,#f6fafc 25%,transparent 25%) 0 0/32px 32px,linear-gradient(225deg,#f6fafc 25%,transparent 25%) 0 0/32px 32px}.footer-grid{display:grid;grid-template-columns:1.35fr .8fr 1.05fr .72fr;gap:34px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.09)}.footer-wordmark{display:flex;align-items:baseline;gap:10px;color:#fff}.footer-dm{font-size:2.1rem;font-weight:950;letter-spacing:-.07em}.footer-name{font-size:1.22rem;font-weight:850}.footer-accent{width:150px;height:4px;border-radius:99px;background:linear-gradient(90deg,#91db55,#4b9b17);margin:8px 0 18px}.footer-brand-block p{max-width:430px;margin:0 0 18px}.footer-wa{display:inline-flex;align-items:center;gap:9px;padding:11px 15px;border-radius:999px;background:#1fbd5a;color:#fff;font-weight:800}.footer-col{display:flex;flex-direction:column;gap:10px}.footer-col h3{margin:0 0 6px;color:#fff;font-size:1rem}.footer-col a,.footer-col span{color:rgba(255,255,255,.73)}.footer-col i{width:18px;color:#8dd657}.footer-col a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:18px;font-size:.9rem}
/* floating */
.floating-wa,.scroll-top{position:fixed;z-index:950;box-shadow:0 14px 28px rgba(0,0,0,.18)}.floating-wa{right:24px;bottom:90px;display:inline-flex;align-items:center;gap:9px;padding:13px 16px;border-radius:999px;background:linear-gradient(135deg,#27d367,#159a45);color:#fff;font-weight:900}.floating-wa i{font-size:1.25rem}.floating-wa:hover{transform:translateY(-2px)}.scroll-top{right:24px;bottom:24px;width:50px;height:50px;border:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;opacity:0;pointer-events:none;transform:translateY(10px);transition:.23s ease}.scroll-top.visible{opacity:1;pointer-events:auto;transform:none}.mobile-contact-dock{display:none}
@media(max-width:1140px){.brand img{width:205px}.nav-links{gap:17px}.desktop-actions .header-phone span{display:none}.header-phone{width:46px;height:46px;padding:0;justify-content:center}.hero-grid,.about-grid,.area-grid,.contact-grid,.content-grid{grid-template-columns:1fr}.hero-copy{max-width:800px}.hero-visual{max-width:720px;margin:auto;width:100%}.hero-photo-card>img{height:590px}.svc-grid,.related-grid,.location-grid{grid-template-columns:repeat(2,1fr)}.quote-box{position:static}.footer-grid{grid-template-columns:1.25fr 1fr 1fr}}
@media(max-width:880px){.container{width:min(var(--container),calc(100% - 36px))}section{padding:72px 0}.nav-inner{height:78px}.brand img{width:190px}.desktop-actions{display:none}.burger{display:flex;margin-left:auto}.nav-links{position:fixed;inset:78px 12px auto;display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;padding:18px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.98);box-shadow:0 24px 70px rgba(10,61,104,.18);transform:translateY(-130%);opacity:0;visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility .22s}.nav-links.open{transform:translateY(0);opacity:1;visibility:visible}.mobile-menu-head{display:flex;justify-content:space-between;align-items:end;padding:4px 4px 14px;margin-bottom:4px;border-bottom:1px solid #e7eef4}.mobile-menu-head span{font-size:1.25rem;font-weight:900;color:var(--blue)}.mobile-menu-head small{color:var(--muted)}.nav-links>a{padding:14px 15px;border-radius:15px;font-size:1rem}.nav-links>a i{display:inline-block;width:22px}.nav-links>a:hover{background:#f0f6fa}.nav-links>a:after{display:none}.mobile-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.menu-call,.menu-wa{justify-content:center!important;color:#fff!important;font-weight:850!important}.menu-call{background:linear-gradient(135deg,var(--blue),var(--blue-2))}.menu-wa{background:linear-gradient(135deg,#27d367,#159a45)}.hero{padding-top:116px}.hero h1{font-size:clamp(2.7rem,8.5vw,4.4rem)}.hero-proof,.why-grid,.process-grid,.about-points{grid-template-columns:repeat(2,1fr)}.hero-rating-card{left:10px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){body{padding-bottom:76px}.container{width:min(var(--container),calc(100% - 30px))}.brand img{width:178px}.nav-inner{height:74px}.nav-links{inset:74px 10px auto}.mobile-menu-head small{display:none}.hero{padding:104px 0 42px}.hero-grid{gap:30px}.hero-kicker{font-size:.77rem;padding:9px 12px;margin-bottom:16px}.hero h1{font-size:clamp(2.45rem,12vw,3.55rem);line-height:.96}.hero-sub{font-size:1rem;margin-bottom:22px}.hero-actions{display:grid;grid-template-columns:1fr;gap:10px}.btn{width:100%;padding:14px 20px}.hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-top:17px;font-size:.84rem}.hero-trust span:last-child{grid-column:1/-1}.hero-visual{order:2}.hero-photo-card{padding:8px;border-radius:24px}.hero-photo-card>img{height:430px;border-radius:18px}.hero-photo-overlay{left:16px;right:16px;bottom:16px;padding:14px 15px}.hero-photo-overlay strong{font-size:.93rem}.hero-photo-overlay span{font-size:.8rem}.hero-rating-card{position:static;margin-top:12px;max-width:none}.hero-proof{grid-template-columns:1fr 1fr;gap:8px;margin-top:24px;padding:12px;border-radius:20px}.hero-proof>div{justify-content:flex-start;padding:8px}.hero-proof i{font-size:1.08rem}.hero-proof strong{font-size:.83rem}.hero-proof span{font-size:.73rem}.svc-grid,.why-grid,.process-grid,.related-grid,.location-grid,.about-points,.footer-grid{grid-template-columns:1fr}.s-title{font-size:clamp(1.85rem,9vw,2.6rem)}.svc{padding:23px}.about-card{padding:10px}.about-img{min-height:350px}.contact-info,.contact-map,.content-card,.quote-box,.legal-content{padding:22px}.contact-map iframe{min-height:300px}.page-hero{padding:112px 0 64px}.page-hero h1{font-size:clamp(2.15rem,10vw,3.1rem)}.floating-wa{display:none}.scroll-top{right:16px;bottom:88px;width:44px;height:44px}.mobile-contact-dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:960;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;border-radius:20px;background:rgba(255,255,255,.94);border:1px solid #dce7ef;box-shadow:0 16px 40px rgba(8,43,72,.18);backdrop-filter:blur(12px)}.mobile-contact-dock a{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 12px;border-radius:14px;color:#fff;font-weight:900}.dock-call{background:linear-gradient(135deg,var(--blue),var(--blue-2))}.dock-wa{background:linear-gradient(135deg,#27d367,#159a45)}.footer-grid{gap:25px}.footer-bottom{font-size:.82rem}.footer-wave{height:16px;background-size:24px 24px}.footer-wordmark{flex-wrap:wrap;gap:5px 9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:880px){
.mobile-menu-actions a{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 12px;border-radius:15px;color:#fff;font-weight:850;box-shadow:0 8px 18px rgba(10,61,104,.12)}
.mobile-menu-actions a i{display:inline-block;width:auto}
}
@media(max-width:620px){
.hero h1{font-size:clamp(2.15rem,10vw,3rem);overflow-wrap:anywhere;hyphens:auto}
.hero-copy{min-width:0}
.hero-kicker{max-width:100%;white-space:normal}
}
/* ===== V5 premium mobile navigation & responsive refinements ===== */
.menu-backdrop{position:fixed;inset:0;z-index:970;background:rgba(4,24,41,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.menu-backdrop.open{opacity:1;visibility:visible}
.menu-close{display:none}
.mobile-menu-intro{display:none}
@media(max-width:880px){
nav{z-index:1000}
.nav-links{inset:0 0 0 auto;width:min(92vw,430px);height:100dvh;max-height:none;padding:0 18px 24px;border:0;border-radius:0;background:linear-gradient(180deg,#ffffff 0%,#f7fbfe 68%,#eef8e9 100%);box-shadow:-24px 0 70px rgba(6,35,58,.22);transform:translateX(104%);opacity:1;visibility:hidden;overflow-y:auto;overscroll-behavior:contain;transition:transform .42s cubic-bezier(.22,.9,.3,1),visibility .42s;z-index:990}
.nav-links.open{transform:translateX(0);visibility:visible}
.mobile-menu-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 -18px 12px;padding:16px 18px 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid #e6eef4}
.mobile-menu-brand{display:flex;align-items:center;gap:12px;min-width:0}
.mobile-menu-brand img{width:116px;height:auto;object-fit:contain;flex:0 0 auto}
.mobile-menu-brand div{min-width:0}
.mobile-menu-brand strong,.mobile-menu-brand small{display:block}
.mobile-menu-brand strong{color:var(--blue);font-size:.93rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-menu-brand small{margin-top:3px;color:var(--muted);font-size:.76rem}
.menu-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #dce7ef;border-radius:14px;background:#f4f8fb;color:var(--blue);font-size:1.1rem;cursor:pointer;transition:.2s ease}
.menu-close:hover{background:#eaf2f7;transform:rotate(4deg)}
.mobile-menu-intro{display:block;margin:8px 0 13px;padding:16px;border:1px solid #dce9f2;border-radius:20px;background:linear-gradient(135deg,#f7fbfe,#eef8e9);box-shadow:0 10px 28px rgba(10,61,104,.06)}
.mobile-menu-intro span{display:flex;align-items:center;gap:9px;color:var(--blue);font-weight:850;font-size:.9rem}
.mobile-menu-intro span i{color:var(--green-2)}
.mobile-menu-intro p{margin:6px 0 0;color:var(--muted);font-size:.82rem;line-height:1.45}
.nav-links>a{position:relative;display:flex;align-items:center;gap:13px;margin:4px 0;padding:15px 16px;border:1px solid transparent;border-radius:17px;background:rgba(255,255,255,.54);font-size:1rem;font-weight:800;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}
.nav-links>a i{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,#edf8e5,#edf6fc);border:1px solid #e1ebf2;color:var(--blue-2);font-size:1rem}
.nav-links>a:before{content:"";position:absolute;right:17px;width:8px;height:8px;border-top:2px solid #9babb8;border-right:2px solid #9babb8;transform:rotate(45deg)}
.nav-links>a:hover,.nav-links>a:focus-visible{background:#fff;border-color:#dce8f0;box-shadow:var(--shadow-sm);transform:translateX(3px)}
.mobile-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #e3ecf3}
.mobile-menu-actions a{min-height:52px;border-radius:17px!important;box-shadow:0 12px 24px rgba(10,61,104,.12)!important}
.mobile-menu-actions a:before{display:none}
.mobile-menu-actions a i{width:auto;height:auto;border:0;background:transparent;color:#fff;font-size:1.1rem}
.burger{position:relative;z-index:1001;box-shadow:0 8px 22px rgba(10,61,104,.08)}
.burger.active{opacity:0;pointer-events:none}
.hero{padding-top:108px}
.hero-grid{gap:38px}
.hero-copy{max-width:720px}
.hero-photo-card>img{height:540px}
.hero-proof{margin-top:30px}
}
@media(max-width:620px){
.nav-links{width:100%;padding-inline:15px}
.mobile-menu-head{margin-inline:-15px;padding-inline:15px}
.mobile-menu-brand img{width:106px}
.mobile-menu-brand strong{font-size:.88rem}
.mobile-menu-actions{position:sticky;bottom:-24px;margin-inline:-15px;padding:14px 15px 18px;background:linear-gradient(180deg,rgba(247,251,254,0),rgba(247,251,254,.96) 22%,#f7fbfe 100%)}
.hero{padding-top:96px}
.hero-grid{gap:25px}
.hero h1{font-size:clamp(2.2rem,10.8vw,3.25rem);line-height:.98;letter-spacing:-.055em}
.hero-kicker{font-size:.75rem;line-height:1.35}
.hero-sub{font-size:.98rem;line-height:1.58}
.hero-trust{grid-template-columns:1fr;gap:8px}
.hero-trust span:last-child{grid-column:auto}
.hero-photo-card>img{height:390px;object-position:center 17%}
.hero-photo-overlay{position:static;margin-top:8px;border-radius:15px;background:var(--blue)}
.hero-rating-card{display:none}
.hero-proof{grid-template-columns:1fr 1fr;margin-top:20px}
.hero-proof>div{min-width:0}
.hero-proof strong,.hero-proof span{overflow-wrap:anywhere}
section{padding:64px 0}
.svc,.why-card,.process-step{border-radius:21px}
.mobile-contact-dock{padding:7px;border-radius:18px}
.mobile-contact-dock a{min-height:49px;border-radius:13px;font-size:.94rem}
}
@media(max-width:380px){
.brand img{width:158px}
.mobile-menu-brand img{width:94px}
.mobile-menu-brand strong{font-size:.82rem}
.mobile-menu-actions{grid-template-columns:1fr}
.hero h1{font-size:2.15rem}
.hero-proof{grid-template-columns:1fr}
.mobile-contact-dock a{font-size:.88rem;padding-inline:8px}
}
/* ===== V6 conversion sections & premium mobile UX ===== */
.mobile-menu-quick{display:none}
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}.comparison-card{overflow:hidden;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:var(--shadow-sm)}.comparison-media{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:30px}.comparison-media i{font-size:2rem}.comparison-media strong{font-size:1.15rem}.comparison-media span{font-size:.9rem}.comparison-media.before{background:linear-gradient(135deg,#eef3f6,#dce7ee);color:#566b7c}.comparison-media.after{background:linear-gradient(135deg,#eef9e8,#dff1d1);color:var(--green-2)}.comparison-copy{padding:24px}.comparison-label{display:inline-flex;padding:7px 11px;border-radius:999px;background:#eef5fa;color:var(--blue);font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.comparison-copy h3{margin:12px 0 8px;color:var(--blue);font-size:1.22rem}.comparison-copy p{margin:0;color:var(--muted)}
.reviews-section{background:linear-gradient(180deg,#f8fbfd,#eef5f9)}.reviews-head{display:flex;align-items:end;justify-content:space-between;gap:30px}.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}.review-card{padding:26px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow-sm)}.review-stars{display:flex;gap:4px;color:#f3b51b;margin-bottom:17px}.review-card>p{min-height:88px;margin:0;color:var(--text);font-size:1rem}.review-author{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid #e8eff4}.review-author>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;font-weight:900}.review-author strong,.review-author small{display:block}.review-author strong{color:var(--blue)}.review-author small{color:var(--muted);font-size:.78rem}
.quote-form-section{background:var(--blue)}.quote-form-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:start;padding:38px;border-radius:32px;background:linear-gradient(135deg,#fff,#f7fbfd);box-shadow:0 26px 70px rgba(3,31,51,.24)}.quote-form-copy{padding:12px}.quote-form-copy ul{list-style:none;padding:0;margin:24px 0 0}.quote-form-copy li{display:flex;gap:10px;align-items:center;padding:8px 0;color:var(--text);font-weight:700}.quote-form-copy li i{color:var(--green-2)}.quote-form{display:grid;gap:15px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.quote-form label{display:grid;gap:7px;color:var(--blue);font-size:.88rem;font-weight:800}.quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid #d4e1ea;border-radius:14px;background:#fff;padding:13px 14px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(20,107,166,.10)}.quote-form textarea{resize:vertical}.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-note{margin:0;color:var(--muted);font-size:.8rem}.form-note i{color:var(--green-2)}
nav.scrolled .nav-inner{height:68px}.nav-inner{transition:height .28s ease}nav.scrolled .brand img{width:174px}.brand img{transition:width .28s ease}
@media(max-width:880px){
.mobile-menu-quick{display:grid;gap:8px;margin-top:6px}.mobile-menu-quick>a{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid #e0eaf1;border-radius:16px;background:rgba(255,255,255,.72)}.mobile-menu-quick>a>i{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#edf6fc;color:var(--blue-2)}.mobile-menu-quick strong,.mobile-menu-quick small{display:block}.mobile-menu-quick strong{color:var(--blue);font-size:.86rem}.mobile-menu-quick small{color:var(--muted);font-size:.7rem;overflow-wrap:anywhere}.mobile-menu-quick>a:before{display:none!important}
.nav-links>a{opacity:0;transform:translateX(18px)}.nav-links.open>a{animation:menuItemIn .38s ease forwards}.nav-links.open>a:nth-of-type(1){animation-delay:.05s}.nav-links.open>a:nth-of-type(2){animation-delay:.09s}.nav-links.open>a:nth-of-type(3){animation-delay:.13s}.nav-links.open>a:nth-of-type(4){animation-delay:.17s}@keyframes menuItemIn{to{opacity:1;transform:translateX(0)}}
.comparison-grid,.reviews-grid,.quote-form-shell{grid-template-columns:1fr}.reviews-head{align-items:flex-start;flex-direction:column}.quote-form-copy{padding:0}
}
@media(max-width:620px){
.nav-links{background:linear-gradient(180deg,#fff 0%,#f8fbfd 58%,#eef8e9 100%)}.mobile-menu-intro{margin-top:4px}.mobile-menu-quick{grid-template-columns:1fr}.mobile-menu-actions{gap:8px}.menu-call,.menu-wa{min-height:54px}.form-row,.form-actions{grid-template-columns:1fr}.quote-form-shell{padding:22px 17px;border-radius:24px}.comparison-media{min-height:190px}.review-card>p{min-height:auto}.reviews-head .btn{width:100%}.projects-section,.reviews-section,.quote-form-section{padding-top:64px;padding-bottom:64px}
}
/* ===== V7: gentle professional inquiry flow + mobile refinement ===== */
.quote-form-section{background:linear-gradient(145deg,#0a3d68 0%,#0b4f82 62%,#0c5a8f 100%);overflow:hidden}
.quote-form-section:before,.quote-form-section:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.quote-form-section:before{width:420px;height:420px;left:-200px;top:-180px;background:rgba(117,196,58,.10)}
.quote-form-section:after{width:360px;height:360px;right:-170px;bottom:-170px;border:70px solid rgba(255,255,255,.035)}
.quote-form-shell{position:relative;z-index:1;grid-template-columns:.78fr 1.22fr;gap:42px;padding:42px;border-radius:34px;background:linear-gradient(145deg,#fff,#f7fbfd);box-shadow:0 28px 80px rgba(3,31,51,.27)}
.quote-form-copy{position:sticky;top:112px;padding:8px 4px;align-self:start}
.quote-form-copy>p{color:var(--muted);font-size:1rem}
.quote-benefits{display:grid;gap:12px;margin-top:26px}
.quote-benefits>div{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid #dfebf3;border-radius:18px;background:rgba(255,255,255,.72)}
.quote-benefits i{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:linear-gradient(135deg,#edf7e7,#eaf4fb);color:var(--blue-2)}
.quote-benefits strong,.quote-benefits small{display:block}.quote-benefits strong{color:var(--blue);font-size:.9rem}.quote-benefits small{color:var(--muted);font-size:.76rem}
.quote-help{display:flex;align-items:center;gap:13px;margin-top:20px;padding:15px 16px;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff}
.quote-help>i{font-size:1.25rem}.quote-help strong,.quote-help span{display:block}.quote-help strong{font-size:.9rem}.quote-help span{font-size:.78rem;color:rgba(255,255,255,.78)}.quote-help a{color:#fff;font-weight:900}
.quote-stepper{position:relative;padding:28px;border:1px solid #dbe7ef;border-radius:28px;background:#fff;box-shadow:0 14px 40px rgba(10,61,104,.08)}
.stepper-top{margin-bottom:22px}.stepper-progress{height:6px;overflow:hidden;border-radius:999px;background:#e8f0f5}.stepper-progress span{display:block;width:33.333%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--green-2));transition:width .35s ease}.stepper-status{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px}.stepper-status span{color:var(--blue);font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.stepper-status small{color:var(--muted);font-size:.8rem}
.form-step{display:none;margin:0;padding:0;border:0;animation:stepIn .35s ease}.form-step.active{display:block}.form-step legend{padding:0;margin:0;color:var(--blue);font-size:1.42rem;font-weight:900;letter-spacing:-.035em}.step-intro{margin:7px 0 20px;color:var(--muted);font-size:.9rem}@keyframes stepIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.service-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.service-choice{position:relative;cursor:pointer}.service-choice input{position:absolute;opacity:0;pointer-events:none}.service-choice>span{display:flex;align-items:center;gap:12px;min-height:86px;padding:15px;border:1px solid #dce7ef;border-radius:18px;background:#fbfdff;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}.service-choice>span>i{width:43px;height:43px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:#edf6fc;color:var(--blue-2);font-size:1.08rem}.service-choice strong,.service-choice small{display:block}.service-choice strong{color:var(--blue);font-size:.91rem}.service-choice small{margin-top:2px;color:var(--muted);font-size:.72rem}.service-choice:hover>span{transform:translateY(-2px);border-color:#bcd2e1;box-shadow:0 10px 24px rgba(10,61,104,.08)}.service-choice input:checked+span{border-color:var(--green);background:linear-gradient(135deg,#f9fdf7,#eef9e8);box-shadow:0 0 0 3px rgba(117,196,58,.12)}.service-choice input:checked+span>i{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff}.service-choice input:focus-visible+span{outline:3px solid rgba(15,93,152,.16);outline-offset:2px}.step-error{min-height:20px;margin:10px 0 0;color:#b42318;font-size:.8rem;font-weight:700}
.quote-form label>span{display:block;margin-bottom:7px;color:var(--blue);font-size:.84rem;font-weight:850}.input-icon{position:relative}.input-icon>i{position:absolute;left:14px;top:50%;z-index:1;transform:translateY(-50%);color:#7890a4;font-size:.9rem;pointer-events:none}.input-icon input,.input-icon select{padding-left:40px}.quote-form textarea{border-radius:16px;min-height:110px}.quote-form input,.quote-form select,.quote-form textarea{min-height:49px}
.quote-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:18px;padding:15px;border-radius:18px;background:linear-gradient(135deg,#f4f9fc,#edf7e8);border:1px solid #dce9ef}.quote-summary>strong{grid-column:1/-1;color:var(--blue);font-size:.9rem}.quote-summary span{display:block;padding:10px;border-radius:13px;background:rgba(255,255,255,.75)}.quote-summary small,.quote-summary b{display:block}.quote-summary small{color:var(--muted);font-size:.67rem;text-transform:uppercase;letter-spacing:.06em}.quote-summary b{margin-top:2px;color:var(--text);font-size:.82rem}
.stepper-actions{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid #e7eef4}.step-btn{display:none;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border:1px solid #d8e4ed;border-radius:999px;background:#fff;color:var(--blue);font-weight:850;cursor:pointer}.step-btn.visible{display:inline-flex}.step-next{margin-left:auto}.form-send-actions{display:none;grid-template-columns:1fr 1fr;gap:10px;width:100%}.form-send-actions.visible{display:grid}.btn-email{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff}.form-note{margin-top:12px;text-align:center}
/* cleaner mobile rhythm */
@media(max-width:880px){
.quote-form-shell{grid-template-columns:1fr;gap:24px;padding:26px}.quote-form-copy{position:static}.quote-benefits{grid-template-columns:repeat(3,1fr);gap:9px}.quote-benefits>div{align-items:flex-start;padding:12px}.quote-benefits i{width:36px;height:36px}.quote-help{margin-top:14px}.quote-stepper{padding:22px}
.hero-copy{max-width:680px}.hero-actions{max-width:560px}.hero-proof{margin-top:30px}
}
@media(max-width:620px){
section{padding:62px 0}.hero{padding-top:98px}.hero h1{max-width:100%;font-size:clamp(2.28rem,11.3vw,3.35rem);letter-spacing:-.055em}.hero-sub{line-height:1.58}.hero-trust{margin-top:15px}.hero-photo-card>img{height:390px}.hero-proof{margin-top:20px}.hero-proof>div{min-height:60px}
.quote-form-section{padding:58px 0}.quote-form-shell{padding:18px 12px;border-radius:26px}.quote-form-copy{padding:4px 6px}.quote-benefits{grid-template-columns:1fr}.quote-benefits>div{align-items:center}.quote-help{padding:13px}.quote-stepper{padding:18px 14px;border-radius:22px}.form-step legend{font-size:1.25rem}.service-choice-grid{grid-template-columns:1fr 1fr;gap:9px}.service-choice>span{min-height:106px;align-items:flex-start;flex-direction:column;gap:8px;padding:13px}.service-choice>span>i{width:39px;height:39px}.service-choice strong{font-size:.82rem}.service-choice small{font-size:.67rem}.form-row{grid-template-columns:1fr}.quote-summary{grid-template-columns:1fr 1fr}.stepper-actions{flex-wrap:wrap}.step-back{order:1}.step-next{order:2;flex:1}.form-send-actions{grid-template-columns:1fr}.form-note{text-align:left;font-size:.72rem}
.nav-links>a{min-height:54px}.mobile-menu-actions a{min-height:56px}.mobile-contact-dock a{min-height:50px}
}
@media(max-width:370px){.service-choice-grid,.quote-summary{grid-template-columns:1fr}.service-choice>span{min-height:auto;flex-direction:row;align-items:center}.stepper-status{align-items:flex-start;flex-direction:column;gap:3px}}
/* V8: real work gallery and consistent mobile menu */
.work-section{background:linear-gradient(180deg,#f8fbfd 0%,#eef6fb 100%);overflow:hidden}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px}
.work-controls{display:flex;gap:10px;flex:0 0 auto}
.work-arrow{width:50px;height:50px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--blue-dark);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-soft);transition:.24s ease}
.work-arrow:hover:not(:disabled){transform:translateY(-2px);background:var(--blue);color:#fff;border-color:var(--blue)}
.work-arrow:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.work-slider{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 18px;overscroll-behavior-inline:contain}
.work-slider::-webkit-scrollbar{display:none}
.work-slide{position:relative;min-width:0;height:500px;border-radius:28px;overflow:hidden;scroll-snap-align:start;background:#dce8ef;box-shadow:0 14px 40px rgba(10,53,89,.11);isolation:isolate}
.work-slide:after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(180deg,transparent,rgba(4,25,42,.76));z-index:1;pointer-events:none}
.work-slide img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.work-slide:hover img{transform:scale(1.035)}
.work-caption{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff}
.work-caption strong{display:block;font-size:1.18rem;line-height:1.2;margin-bottom:5px}
.work-caption span{display:block;color:rgba(255,255,255,.8);font-size:.92rem}
.work-dots{display:flex;justify-content:center;gap:8px;min-height:12px;margin-top:4px}
.work-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#bfd0dd;cursor:pointer;transition:.25s ease}
.work-dot.active{width:28px;background:linear-gradient(90deg,var(--blue),var(--green))}
.work-cta{margin-top:30px;padding:22px 24px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--shadow-soft)}
.work-cta p{margin:0}.work-cta strong{display:block;color:var(--blue-dark);font-size:1.05rem;margin-bottom:3px}.work-cta span{display:block;color:var(--muted)}
@media(max-width:980px){
.work-slider{grid-auto-columns:calc((100% - 22px)/2)}
.work-slide{height:450px}
}
@media(max-width:640px){
.work-head{align-items:flex-start;margin-bottom:24px}.work-controls{display:none}
.work-slider{grid-auto-columns:86%;gap:14px;margin-right:-18px;padding-right:18px}
.work-slide{height:430px;border-radius:24px}
.work-caption{left:18px;right:18px;bottom:17px}
.work-cta{align-items:stretch;flex-direction:column;padding:20px;border-radius:22px}
.work-cta .btn{width:100%}
}
@media(max-width:380px){.work-slide{height:390px}}
/* V9: compact final action step, icon reliability and smooth responsive performance */
.form-send-actions{display:none;width:100%;grid-template-columns:1fr 1fr;gap:10px}
.form-send-actions.visible{display:grid}
.send-option{appearance:none;width:100%;min-height:72px;padding:11px 13px;border:1px solid #d7e4ed;border-radius:18px;background:#fff;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:11px;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.send-option:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,61,104,.10)}
.send-option:focus-visible{outline:3px solid rgba(15,93,152,.18);outline-offset:2px}
.send-option-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;font-size:1.05rem}
.send-option-copy{min-width:0}.send-option-copy strong,.send-option-copy small{display:block}.send-option-copy strong{font-size:.9rem;line-height:1.15}.send-option-copy small{margin-top:3px;color:var(--muted);font-size:.7rem;white-space:normal}
.send-option-arrow{font-size:.72rem;opacity:.55;transition:transform .2s ease}
.send-option:hover .send-option-arrow{transform:translateX(3px)}
.send-whatsapp{border-color:#ccebd7;background:linear-gradient(135deg,#f7fdf9,#effbf3);color:#147c3b}.send-whatsapp .send-option-icon{background:#25d366;color:#fff;box-shadow:0 8px 18px rgba(37,211,102,.2)}
.send-email{border-color:#d6e4ef;background:linear-gradient(135deg,#fbfdff,#f1f7fb);color:var(--blue)}.send-email .send-option-icon{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;box-shadow:0 8px 18px rgba(15,93,152,.18)}
.form-note{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin:11px auto 0;max-width:620px;color:var(--muted);font-size:.74rem;line-height:1.45}.form-note i{margin-top:2px;color:var(--green-2)}
/* ensure commonly used icons have stable geometry */
i[class^="fa-"],i[class*=" fa-"]{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
.svc-ico i,.c-ico i,.rating-icon i,.quote-benefits i,.input-icon i{min-width:1em}
/* rendering and scrolling performance */
.svc,.why-card,.process-step,.work-slide,.quote-stepper,.contact-info,.contact-map{transform:translateZ(0);backface-visibility:hidden}
.work-slider{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
img{height:auto}
section:not(.hero):not(.page-hero){content-visibility:auto;contain-intrinsic-size:1px 760px}
.hero,.page-hero,#angebot,#kontakt{content-visibility:visible}
/* hover effects only where a real hover device exists */
@media(hover:none){
.svc:hover,.why-card:hover,.process-step:hover,.work-slide:hover,.send-option:hover,.btn:hover,.work-arrow:hover:not(:disabled){transform:none;box-shadow:inherit}
.work-slide:hover img{transform:none}
.send-option:hover .send-option-arrow{transform:none}
}
@media(max-width:880px){
.form-send-actions{grid-template-columns:1fr 1fr}
.send-option{min-height:68px}
}
@media(max-width:620px){
.form-send-actions{grid-template-columns:1fr;gap:9px}
.send-option{min-height:64px;border-radius:16px;padding:10px 12px;grid-template-columns:40px minmax(0,1fr) 16px}
.send-option-icon{width:40px;height:40px;border-radius:13px}
.send-option-copy strong{font-size:.87rem}.send-option-copy small{font-size:.68rem}
.form-note{justify-content:flex-start;text-align:left;padding:0 2px}
.stepper-actions{gap:8px}
.step-back{min-height:44px;padding:10px 14px}
}
@media(max-width:390px){
.quote-stepper{padding-left:12px;padding-right:12px}
.send-option{grid-template-columns:38px minmax(0,1fr) 14px;gap:9px}
.send-option-icon{width:38px;height:38px}
.send-option-copy small{line-height:1.25}
}
/* respect reduced-motion preferences and protect low-power devices */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1!important;transform:none!important}
}
/* V10 — responsive images and privacy-friendly Google Maps */
.brand picture,.mobile-menu-brand picture,.footer-brand picture{display:block;line-height:0}
.brand picture img,.mobile-menu-brand picture img,.footer-brand picture img{width:100%;height:auto}
.hero-photo-card>picture{display:block;width:100%}
.hero-photo-card>picture>img{display:block;width:100%;height:615px;border-radius:24px;object-fit:cover;object-position:center 19%}
.about-img picture{display:block;width:100%;height:100%}
.about-img picture img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.map-consent{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px;background:linear-gradient(145deg,#f3f8fb,#edf6e8);color:var(--text)}
.map-consent-icon{width:60px;height:60px;display:grid;place-items:center;border-radius:20px;margin-bottom:16px;background:#fff;color:var(--blue-2);font-size:2rem;box-shadow:var(--shadow-sm)}
.map-consent h3{margin:0 0 8px;color:var(--blue);font-size:1.45rem;letter-spacing:-.03em}
.map-consent p{max-width:520px;margin:0 0 20px;color:var(--muted)}
.map-consent-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.map-consent .btn{min-width:145px}
.map-consent small{display:block;margin-top:15px;color:var(--muted);font-size:.82rem}
.map-consent small a{color:var(--blue-2);font-weight:800}
.contact-map.map-loaded{display:grid;grid-template-rows:1fr auto}
.contact-map.map-loaded iframe{width:100%;height:100%;min-height:390px;border:0}
@media(max-width:1140px){
.hero-photo-card>picture>img{height:590px}
}
@media(max-width:620px){
.hero-photo-card>picture>img{height:auto;aspect-ratio:4/5;border-radius:18px;object-fit:cover;object-position:center top}
.map-consent{min-height:300px;padding:26px 18px}
.map-consent-actions{width:100%}
.map-consent .btn{width:100%;min-width:0}
}
@media(max-width:380px){
.hero-photo-card>picture>img{aspect-ratio:5/6}
.map-consent{padding:22px 14px}
.map-consent h3{font-size:1.25rem}
}
/* ===== V18 consolidated responsive, navigation and performance layer ===== */
html{
scrollbar-width:thin;
scrollbar-color:#0f5d98 #eaf2f7;
}
body::-webkit-scrollbar{width:12px}
body::-webkit-scrollbar-track{background:#eaf2f7}
body::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#0f5d98 0%,#75c43a 100%);
border:3px solid #eaf2f7;
border-radius:999px;
}
body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#0a3d68 0%,#4b9b17 100%)}
/* Header: transparent initially, premium glass surface after scrolling. */
nav#navbar{
top:0!important;
padding:18px clamp(12px,2vw,24px) 0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
pointer-events:none;
z-index:1400!important;
}
nav#navbar .nav-inner{
pointer-events:auto;
width:min(100%,1380px)!important;
max-width:1380px!important;
height:78px!important;
margin:0 auto;
padding:0 16px!important;
gap:18px;
border:1px solid transparent!important;
border-radius:22px!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
transition:height .24s ease,background-color .24s ease,border-color .24s ease,box-shadow .24s ease,backdrop-filter .24s ease!important;
}
nav#navbar.scrolled{padding-top:10px!important}
nav#navbar.scrolled .nav-inner{
height:68px!important;
background:rgba(255,255,255,.96)!important;
border-color:rgba(207,224,235,.95)!important;
box-shadow:0 12px 34px rgba(8,43,72,.13)!important;
backdrop-filter:blur(18px) saturate(135%)!important;
-webkit-backdrop-filter:blur(18px) saturate(135%)!important;
}
nav#navbar .brand{min-width:0;max-width:220px;flex:0 1 auto}
nav#navbar .brand picture{display:block;line-height:0}
nav#navbar .brand img{display:block;width:220px;max-width:100%;height:auto}
nav#navbar .nav-links{min-width:0;flex:1 1 auto;justify-content:flex-end;gap:18px;margin-left:auto}
nav#navbar .nav-links>a{font-size:.9rem;letter-spacing:-.01em}
nav#navbar .desktop-actions{flex:0 0 auto;gap:8px}
nav#navbar .header-phone,nav#navbar .header-wa{padding:11px 14px;font-size:.88rem}
nav#navbar .header-phone{background:rgba(255,255,255,.92)!important}
nav#navbar:not(.scrolled) .nav-links>a:not(.menu-call):not(.menu-wa){text-shadow:0 1px 12px rgba(255,255,255,.8)}
.hero{padding-top:124px!important}
.page-hero{padding-top:124px!important}
.legal-page{padding-top:116px!important}
/* Drawer is activated before desktop navigation can become crowded. */
@media (max-width:1420px){
body.menu-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}
nav#navbar .nav-inner{height:72px!important;gap:12px}
nav#navbar.scrolled .nav-inner{height:66px!important}
nav#navbar .brand{max-width:205px}
nav#navbar .brand img{width:205px!important}
nav#navbar .desktop-actions{display:none!important}
nav#navbar .burger{
display:flex!important;
margin-left:auto!important;
flex:0 0 46px!important;
width:46px!important;
height:46px!important;
position:relative;
z-index:1305;
border:1px solid rgba(210,225,235,.95)!important;
background:rgba(255,255,255,.94)!important;
box-shadow:0 8px 22px rgba(8,43,72,.10)!important;
}
nav#navbar .nav-links{
position:fixed!important;
inset:0 0 0 auto!important;
width:min(92vw,410px)!important;
height:100vh!important;
height:100svh!important;
height:100dvh!important;
max-height:none!important;
margin:0!important;
padding:0 18px max(22px,env(safe-area-inset-bottom))!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
gap:5px!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
border:0!important;
border-radius:0!important;
background:linear-gradient(180deg,#fff 0%,#f8fbfd 62%,#eef8e9 100%)!important;
box-shadow:-22px 0 62px rgba(6,35,58,.22)!important;
transform:translate3d(104%,0,0)!important;
opacity:1!important;
visibility:hidden!important;
pointer-events:none!important;
transition:transform .3s cubic-bezier(.22,.8,.24,1),visibility .3s!important;
will-change:transform;
contain:layout paint;
z-index:1200!important;
}
nav#navbar .nav-links.open{
transform:translate3d(0,0,0)!important;
visibility:visible!important;
pointer-events:auto!important;
}
nav#navbar .mobile-menu-head{
position:sticky!important;
top:0!important;
z-index:3!important;
min-height:78px!important;
margin:0 -18px 10px!important;
padding:14px 18px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
background:rgba(255,255,255,.97)!important;
border-bottom:1px solid #e4edf3!important;
backdrop-filter:blur(16px)!important;
-webkit-backdrop-filter:blur(16px)!important;
}
nav#navbar .mobile-menu-brand{min-width:0!important;flex:1!important}
nav#navbar .mobile-menu-brand picture{flex:0 0 92px!important;width:92px!important}
nav#navbar .mobile-menu-brand img{width:92px!important;max-width:92px!important}
nav#navbar .menu-close{
flex:0 0 42px!important;
width:42px!important;
height:42px!important;
display:grid!important;
place-items:center!important;
border:1px solid #dbe7ef!important;
border-radius:13px!important;
background:#f4f8fb!important;
color:var(--blue)!important;
font-size:1.05rem!important;
}
nav#navbar .mobile-menu-intro{
display:block!important;
margin:4px 0 8px!important;
padding:14px 15px!important;
border-radius:17px!important;
}
nav#navbar .nav-links>a{
min-height:50px!important;
margin:2px 0!important;
padding:12px 14px!important;
border-radius:14px!important;
font-size:.96rem!important;
line-height:1.25!important;
white-space:normal!important;
}
nav#navbar .mobile-menu-quick{display:grid!important;gap:7px!important;margin-top:7px!important}
nav#navbar .mobile-menu-actions{
position:sticky!important;
bottom:calc(-1 * max(22px,env(safe-area-inset-bottom)))!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:9px!important;
margin:10px -18px 0!important;
padding:14px 18px max(20px,env(safe-area-inset-bottom))!important;
background:linear-gradient(180deg,rgba(247,251,254,0),rgba(247,251,254,.97) 24%,#f7fbfe 100%)!important;
}
nav#navbar .mobile-menu-actions a{min-height:50px!important;padding:11px 10px!important}
.menu-backdrop{z-index:1150!important}
}
@media (min-width:1421px){
nav#navbar .burger{display:none!important}
nav#navbar .mobile-menu-head,
nav#navbar .mobile-menu-intro,
nav#navbar .mobile-menu-quick,
nav#navbar .mobile-menu-actions{display:none!important}
}
@media (min-width:1421px) and (max-width:1560px){
nav#navbar .nav-inner{gap:12px;padding-inline:15px!important}
nav#navbar .brand{max-width:195px}
nav#navbar .brand img{width:195px!important}
nav#navbar .nav-links{gap:13px!important}
nav#navbar .nav-links>a{font-size:.83rem!important}
nav#navbar .header-phone,nav#navbar .header-wa{padding:10px 11px;font-size:.82rem}
}
/* Tablet and mobile contact dock. */
.mobile-contact-dock{
z-index:820!important;
transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
will-change:opacity,transform;
}
body.menu-open .mobile-contact-dock,
body.menu-open .scroll-top,
body.menu-open .floating-wa{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
body.menu-open .mobile-contact-dock{transform:translateY(18px)!important}
@media (max-width:880px){
body{padding-bottom:84px!important}
nav#navbar{padding:16px 10px 0!important}
nav#navbar.scrolled{padding-top:8px!important}
nav#navbar .nav-inner{height:68px!important;padding:0 12px!important;border-radius:18px!important}
nav#navbar.scrolled .nav-inner{height:62px!important}
nav#navbar .brand{max-width:176px}
nav#navbar .brand img{width:176px!important}
.hero{padding-top:108px!important}
.page-hero{padding-top:108px!important}
.mobile-contact-dock{
position:fixed!important;
left:12px!important;
right:12px!important;
bottom:calc(10px + env(safe-area-inset-bottom))!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px!important;
padding:8px!important;
border-radius:20px!important;
background:rgba(255,255,255,.96)!important;
border:1px solid #dce7ef!important;
box-shadow:0 16px 40px rgba(8,43,72,.20)!important;
backdrop-filter:blur(14px)!important;
-webkit-backdrop-filter:blur(14px)!important;
}
.mobile-contact-dock a{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
min-height:50px!important;
padding:12px 10px!important;
border-radius:14px!important;
color:#fff!important;
font-size:.94rem!important;
font-weight:900!important;
}
.floating-wa{display:none!important}
.scroll-top{right:16px!important;bottom:calc(94px + env(safe-area-inset-bottom))!important}
.container{width:min(var(--container),calc(100% - 32px))!important}
}
@media (max-width:620px){
body::-webkit-scrollbar{width:7px}
body::-webkit-scrollbar-thumb{border-width:2px}
nav#navbar{padding:15px 8px 0!important}
nav#navbar.scrolled{padding-top:7px!important}
nav#navbar .nav-inner{height:64px!important;padding:0 10px!important;border-radius:17px!important}
nav#navbar.scrolled .nav-inner{height:58px!important}
nav#navbar .brand{max-width:160px}
nav#navbar .brand img{width:160px!important}
nav#navbar .burger{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:13px!important}
nav#navbar .nav-links{width:100%!important;padding-inline:15px!important}
nav#navbar .mobile-menu-head{margin-inline:-15px!important;padding-inline:15px!important;min-height:72px!important}
nav#navbar .mobile-menu-brand picture{flex-basis:84px!important;width:84px!important}
nav#navbar .mobile-menu-brand img{width:84px!important;max-width:84px!important}
nav#navbar .mobile-menu-brand strong{font-size:.84rem!important}
nav#navbar .mobile-menu-brand small{font-size:.7rem!important}
nav#navbar .mobile-menu-actions{grid-template-columns:1fr!important;margin-inline:-15px!important;padding-inline:15px!important}
.hero{padding-top:96px!important}
.page-hero{padding-top:96px!important}
.legal-page{padding-top:90px!important}
.mobile-contact-dock{left:8px!important;right:8px!important;bottom:calc(7px + env(safe-area-inset-bottom))!important;padding:7px!important;border-radius:18px!important}
.mobile-contact-dock a{min-height:49px!important;font-size:.91rem!important}
}
@media (max-width:360px){
nav#navbar .brand{max-width:142px}
nav#navbar .brand img{width:142px!important}
nav#navbar .nav-inner{padding:0 8px!important}
.container{width:min(var(--container),calc(100% - 24px))!important}
.mobile-contact-dock a{font-size:.84rem!important;padding-inline:6px!important}
}
@media (hover:none),(pointer:coarse){
.header-phone:hover,.header-wa:hover,.btn:hover,.svc:hover,.why-card:hover,.process-step:hover,.floating-wa:hover{transform:none!important}
.nav-links>a:hover{transform:none!important;box-shadow:none!important}
}
@media (prefers-reduced-motion:reduce){
.nav-links,.nav-links>a,.burger span,.mobile-contact-dock{animation:none!important;transition:none!important}
}
/* V20: stable scroll lock and premium 404 experience. */
html.scroll-locked{scroll-behavior:auto!important;overscroll-behavior:none}
.error-body{min-height:100%;background:#f4f9fc;color:var(--text)}
.error-nav .nav-inner{background:rgba(255,255,255,.9)!important;border-color:rgba(16,77,116,.1)!important;box-shadow:0 16px 46px rgba(7,45,73,.1)!important}
.error-page{
min-height:100svh;
display:grid;
place-items:center;
padding:clamp(112px,12vw,150px) 20px 42px;
overflow:hidden;
background:
radial-gradient(circle at 8% 20%,rgba(29,173,161,.14),transparent 28%),
radial-gradient(circle at 91% 12%,rgba(27,91,151,.13),transparent 27%),
linear-gradient(180deg,#f8fcfe 0%,#eff7fa 100%);
}
.error-shell{
position:relative;
width:min(1120px,100%);
min-height:580px;
display:grid;
grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
overflow:hidden;
border:1px solid rgba(15,77,115,.11);
border-radius:36px;
background:rgba(255,255,255,.86);
box-shadow:0 34px 90px rgba(8,45,71,.14);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.error-visual{
position:relative;
min-height:580px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:48px;
overflow:hidden;
text-align:center;
color:#fff;
background:linear-gradient(145deg,#0d4f82 0%,#176f93 48%,#22a89c 100%);
isolation:isolate;
}
.error-visual::before{
content:"";
position:absolute;
inset:0;
z-index:-2;
opacity:.58;
background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
background-size:34px 34px;
mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.error-visual::after{
content:"";
position:absolute;
width:350px;
height:350px;
border-radius:50%;
z-index:-1;
background:rgba(255,255,255,.08);
box-shadow:0 0 0 54px rgba(255,255,255,.035),0 0 0 108px rgba(255,255,255,.02);
}
.error-code{
position:relative;
z-index:2;
margin-left:-.06em;
font-size:clamp(6.8rem,15vw,11rem);
line-height:.78;
font-weight:950;
letter-spacing:-.1em;
color:#fff;
text-shadow:0 18px 48px rgba(0,30,54,.23);
}
.error-visual>p{position:relative;z-index:2;max-width:360px;margin:28px 0 0;color:rgba(255,255,255,.83);font-size:1rem}
.error-badge{
position:absolute;
left:28px;
bottom:28px;
z-index:3;
display:flex;
align-items:center;
gap:9px;
padding:11px 14px;
border:1px solid rgba(255,255,255,.22);
border-radius:999px;
color:#fff;
background:rgba(255,255,255,.12);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
font-size:.86rem;
font-weight:800;
}
.error-orbit{position:absolute;border:1px solid rgba(255,255,255,.23);border-radius:50%}
.error-orbit-one{width:430px;height:430px;animation:errorFloat 9s ease-in-out infinite}
.error-orbit-two{width:300px;height:300px;border-style:dashed;animation:errorSpin 22s linear infinite}
.error-spark{position:absolute;z-index:3;display:grid;place-items:center;width:46px;height:46px;border-radius:16px;color:#0f6f83;background:#fff;box-shadow:0 14px 34px rgba(5,40,66,.2)}
.error-spark-one{top:82px;right:62px;transform:rotate(8deg)}
.error-spark-two{left:54px;top:160px;width:34px;height:34px;border-radius:12px;font-size:.74rem;transform:rotate(-12deg)}
.error-bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.13)}
.error-bubble-one{width:28px;height:28px;right:74px;bottom:132px}
.error-bubble-two{width:14px;height:14px;left:92px;bottom:90px}
.error-content{display:flex;flex-direction:column;justify-content:center;padding:clamp(42px,6vw,76px)}
.error-kicker{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;margin-bottom:18px;padding:8px 12px;border-radius:999px;color:#0f6f83;background:#e8f6f4;font-size:.78rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.error-content h1{max-width:650px;margin:0;font-size:clamp(2rem,4.5vw,4rem);line-height:1.03;letter-spacing:-.045em}
.error-lead{max-width:650px;margin:20px 0 28px;color:var(--muted);font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.72}
.error-actions{display:flex;flex-wrap:wrap;gap:12px}
.error-actions .btn{min-height:52px;padding-inline:20px}
.error-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.error-shortcuts a{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;min-width:0;padding:14px;border:1px solid #dfebf0;border-radius:16px;color:var(--text);background:#fbfdfe;font-size:.88rem;font-weight:800;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.error-shortcuts a>i:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#0f6f83;background:#eaf5f7}
.error-shortcuts a>i:last-child{color:#7e9aa9;font-size:.72rem}
.error-shortcuts a:hover{transform:translateY(-3px);border-color:rgba(28,157,148,.34);background:#fff;box-shadow:0 12px 26px rgba(7,55,79,.08)}
.error-trust{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:24px;padding-top:20px;border-top:1px solid #e4edf1;color:#6a8392;font-size:.84rem;font-weight:700}
.error-trust span,.error-trust a{display:inline-flex;align-items:center;gap:7px;color:inherit}
.error-trust i{color:#159b91}
@keyframes errorFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.025)}}
@keyframes errorSpin{to{transform:rotate(360deg)}}
@media(max-width:900px){
.error-page{padding-top:108px}
.error-shell{grid-template-columns:1fr;min-height:0;max-width:720px}
.error-visual{min-height:300px;padding:42px 24px}
.error-visual::after{width:250px;height:250px}
.error-code{font-size:clamp(6.2rem,25vw,9rem)}
.error-visual>p{margin-top:20px}
.error-badge{left:18px;bottom:18px}
.error-spark-one{top:44px;right:48px}
.error-spark-two{top:94px;left:44px}
.error-content{padding:40px}
}
@media(max-width:620px){
.error-nav-actions{display:none!important}
.error-page{padding:92px 10px 18px}
.error-shell{border-radius:25px}
.error-visual{min-height:240px;padding:34px 18px}
.error-orbit-one{width:280px;height:280px}
.error-orbit-two{width:210px;height:210px}
.error-code{font-size:6.7rem}
.error-visual>p{max-width:260px;margin-top:16px;font-size:.9rem}
.error-badge{display:none}
.error-spark-one{top:28px;right:28px;width:40px;height:40px}
.error-spark-two{top:72px;left:26px}
.error-content{padding:30px 20px 26px}
.error-kicker{margin-bottom:14px;font-size:.7rem}
.error-content h1{font-size:2.15rem}
.error-lead{margin:16px 0 22px;font-size:.96rem;line-height:1.62}
.error-actions{display:grid;grid-template-columns:1fr}
.error-actions .btn{width:100%}
.error-shortcuts{grid-template-columns:1fr;margin-top:24px}
.error-shortcuts a{min-height:58px}
.error-trust{display:grid;gap:10px;margin-top:20px}
}
@media(hover:none),(pointer:coarse){.error-shortcuts a:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.error-orbit-one,.error-orbit-two{animation:none!important}}
/* V21 — accessibility, privacy controls and work gallery */
.skip-link{position:fixed;left:18px;top:10px;z-index:10000;transform:translateY(-150%);padding:11px 15px;border-radius:11px;color:#fff;background:#073b5a;font-weight:800;box-shadow:0 10px 28px rgba(0,0,0,.22);transition:transform .18s ease}.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid rgba(31,174,163,.55);outline-offset:3px}
.footer-link-button{display:block;padding:0;border:0;color:rgba(255,255,255,.72);background:none;font:inherit;text-align:left;cursor:pointer}.footer-link-button:hover{color:#fff}
.cookie-banner[hidden],.cookie-modal[hidden],.work-lightbox[hidden]{display:none!important}.cookie-banner{position:fixed;left:18px;right:18px;bottom:18px;z-index:9500}.cookie-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;width:min(1180px,100%);margin:auto;padding:18px;border:1px solid rgba(255,255,255,.66);border-radius:22px;background:rgba(249,253,254,.96);box-shadow:0 24px 70px rgba(4,43,66,.22);backdrop-filter:blur(18px)}.cookie-copy{display:flex;align-items:flex-start;gap:14px;max-width:680px}.cookie-copy strong{display:block;margin-bottom:4px;font-size:1rem}.cookie-copy p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.5}.cookie-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:14px;color:#fff;background:linear-gradient(145deg,#147ab0,#20aa9c)}.cookie-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}.cookie-actions .btn,.cookie-panel-actions .btn{min-height:44px;padding:0 15px;border-radius:12px;font-size:.82rem}.cookie-secondary{border:1px solid #d9e6eb;color:var(--text);background:#fff}.cookie-modal{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;padding:18px}.cookie-modal-backdrop{position:absolute;inset:0;background:rgba(3,24,38,.62);backdrop-filter:blur(6px)}.cookie-panel{position:relative;width:min(590px,100%);max-height:min(720px,calc(100svh - 36px));overflow:auto;padding:30px;border-radius:26px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.3)}.cookie-close{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #e0eaee;border-radius:12px;background:#f8fbfc;cursor:pointer}.cookie-eyebrow{color:#138b84;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.cookie-panel h2{margin:7px 44px 9px 0;font-size:clamp(1.55rem,4vw,2.25rem)}.cookie-panel>p{margin:0 0 22px;color:var(--muted);line-height:1.65}.cookie-option{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid #e6eef1}.cookie-option strong,.cookie-option small{display:block}.cookie-option small{margin-top:4px;color:var(--muted);line-height:1.45}.cookie-always{flex:none;padding:6px 9px;border-radius:999px;color:#137d76;background:#e9f7f5;font-size:.7rem;font-weight:900}.switch{position:relative;flex:none;width:48px;height:28px}.switch input{position:absolute;opacity:0}.switch span{display:block;width:100%;height:100%;border-radius:999px;background:#cbd8de;cursor:pointer;transition:.2s}.switch span:after{content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.18);transition:.2s}.switch input:checked+span{background:#159e94}.switch input:checked+span:after{transform:translateX(20px)}.switch input:focus-visible+span{outline:3px solid rgba(31,174,163,.5);outline-offset:3px}.cookie-panel-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.cookie-privacy-link{display:inline-block;margin-top:17px;color:#167d98;font-size:.82rem;font-weight:800}
.work-page-hero{position:relative;overflow:hidden;padding:190px 0 105px;color:#fff;background:radial-gradient(circle at 80% 20%,rgba(52,205,189,.22),transparent 26%),linear-gradient(135deg,#082d49,#0e5c78 58%,#178c86)}.work-page-hero:after{content:"";position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent)}.work-page-hero .container{position:relative;z-index:1}.work-page-hero .s-label{color:#92eee5;background:rgba(255,255,255,.1)}.work-page-hero h1{max-width:850px;margin:18px 0;font-size:clamp(3rem,8vw,6.3rem);line-height:.94;letter-spacing:-.06em}.work-page-hero h1 span{color:#8de6de}.work-page-hero p{max-width:650px;margin:0;color:rgba(255,255,255,.76);font-size:1.08rem;line-height:1.7}.work-page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.work-page-gallery{padding:95px 0}.work-gallery-head{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:36px;margin-bottom:30px}.work-gallery-head p{margin:0;color:var(--muted);line-height:1.65}.work-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.work-filters button{min-height:42px;padding:0 15px;border:1px solid #dbe8ed;border-radius:999px;color:#446474;background:#fff;font-weight:800;cursor:pointer}.work-filters button.active{color:#fff;border-color:#128e89;background:#128e89}.work-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.work-gallery-card{min-width:0}.work-gallery-card[hidden]{display:none}.work-gallery-open{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;overflow:hidden;border:0;border-radius:22px;background:#dce9ed;cursor:zoom-in;box-shadow:0 16px 38px rgba(4,54,78,.1)}.work-gallery-open img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}.work-gallery-overlay{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;align-items:flex-start;padding:54px 20px 20px;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(2,24,38,.86))}.work-gallery-overlay small{margin-bottom:4px;color:#8de8df;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.work-gallery-overlay strong{font-size:1.15rem}.work-gallery-overlay>span{margin-top:9px;font-size:.75rem;font-weight:800;opacity:.78}.work-gallery-open:hover img{transform:scale(1.045)}.work-page-cta{padding:70px 0;background:#eff8f8}.work-page-cta .container{display:flex;align-items:center;justify-content:space-between;gap:30px}.work-page-cta h2{margin:8px 0;font-size:clamp(2rem,4vw,3.2rem)}.work-page-cta p{max-width:650px;margin:0;color:var(--muted)}.work-lightbox{position:fixed;inset:0;z-index:9700;display:grid;place-items:center;padding:30px;background:rgba(1,18,29,.94);backdrop-filter:blur(12px)}.work-lightbox img{max-width:min(100%,1000px);max-height:82svh;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.5)}.work-lightbox p{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;color:#fff;font-weight:800}.work-lightbox-close{position:absolute;right:22px;top:22px;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:15px;color:#fff;background:rgba(255,255,255,.1);cursor:pointer}
@media(max-width:900px){.cookie-banner-inner{align-items:stretch;flex-direction:column}.cookie-actions{justify-content:stretch}.cookie-actions .btn{flex:1}.work-page-hero{padding:150px 0 80px}.work-gallery-head{grid-template-columns:1fr}.work-gallery-grid{grid-template-columns:repeat(2,1fr)}.work-page-cta .container{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.cookie-banner{left:9px;right:9px;bottom:calc(9px + env(safe-area-inset-bottom))}.cookie-banner-inner{padding:15px;border-radius:18px}.cookie-copy p{font-size:.8rem}.cookie-icon{display:none}.cookie-actions{display:grid;grid-template-columns:1fr 1fr}.cookie-actions .btn-primary{grid-column:1/-1}.cookie-panel{padding:25px 18px;border-radius:22px}.cookie-panel-actions{display:grid}.work-page-hero{padding:125px 0 65px}.work-page-hero h1{font-size:3.25rem}.work-page-actions{display:grid}.work-page-actions .btn{width:100%}.work-page-gallery{padding:65px 0}.work-gallery-grid{grid-template-columns:1fr;gap:14px}.work-gallery-open{aspect-ratio:5/4}.work-page-cta{padding:55px 0}.work-page-cta .btn{width:100%}.work-lightbox{padding:16px}.work-lightbox-close{right:12px;top:12px}}
@media(hover:none),(pointer:coarse){.work-gallery-open:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.work-gallery-open img{transition:none}}
/* V22 – Unsere Arbeit hero aligned with homepage */
.work-hero .hero-photo-card>picture>img{object-position:center center}
.work-hero .hero-copy{max-width:700px}
.work-hero .hero-kicker{background:rgba(18,142,137,.1)}
@media(max-width:620px){.work-hero .hero-photo-card>picture>img{aspect-ratio:5/6;object-position:center center}}
/* V25 — PWA, breadcrumbs and SEO content */
.breadcrumb{position:relative;z-index:3;width:min(1180px,calc(100% - 36px));margin:0 auto;padding-top:118px}.breadcrumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;color:#6b8290;font-size:.8rem;font-weight:750}.breadcrumb li{display:flex;align-items:center;gap:7px}.breadcrumb li:not(:last-child)::after{content:"/";color:#a6bac4}.breadcrumb a{color:#167b91}.breadcrumb a:hover{text-decoration:underline}.breadcrumb+[class*="hero"],.breadcrumb+header{margin-top:-92px}
.seo-detail-section{padding:68px 0;background:linear-gradient(180deg,#fff,#f3f9fa)}.seo-detail-card{padding:clamp(26px,5vw,50px);border:1px solid #deebef;border-radius:28px;background:#fff;box-shadow:0 18px 50px rgba(5,48,69,.07)}.seo-detail-card h2{margin:10px 0 16px;font-size:clamp(1.8rem,4vw,2.7rem)}.seo-detail-card p{color:var(--muted);line-height:1.78}.text-link{display:inline-flex;align-items:center;gap:9px;margin-top:7px;color:#117f92;font-weight:900}
.local-seo-section{padding:80px 0;background:#f5fafb}.local-seo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:35px}.local-seo-grid article{padding:25px;border:1px solid #deeaee;border-radius:22px;background:#fff;box-shadow:0 12px 32px rgba(4,48,68,.05)}.local-seo-grid h3{margin:0 0 9px}.local-seo-grid p{margin:0;color:var(--muted);line-height:1.65}.local-seo-contact{display:flex;align-items:center;gap:18px;margin-top:20px;padding:20px 22px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#0c5976,#168e88)}.local-seo-contact span{flex:1;color:rgba(255,255,255,.82)}.local-seo-contact .btn{background:#fff;color:#0d6578}
.pwa-install{align-items:center;gap:7px}.pwa-install:not([hidden]){display:flex}
@media(max-width:900px){.breadcrumb{padding-top:105px}.breadcrumb+[class*="hero"],.breadcrumb+header{margin-top:-80px}.local-seo-contact{align-items:flex-start;flex-direction:column}.local-seo-contact span{flex:auto}}
@media(max-width:620px){.breadcrumb{width:min(100% - 28px,1180px);padding-top:91px;font-size:.74rem}.breadcrumb+[class*="hero"],.breadcrumb+header{margin-top:-67px}.local-seo-grid{grid-template-columns:1fr}.seo-detail-section,.local-seo-section{padding:55px 0}.local-seo-contact .btn{width:100%}}
/* V26 · discreet creator credit */
.site-credit{display:inline-flex;align-items:center;gap:4px;color:rgba(255,255,255,.58)}
.site-credit a{color:rgba(255,255,255,.86);font-weight:800;text-decoration:none;transition:color .2s ease,opacity .2s ease}
.site-credit a:hover,.site-credit a:focus-visible{color:#9bdf62}
@media(max-width:760px){.footer-bottom{justify-content:center;text-align:center}.footer-bottom>span{width:100%}.site-credit{justify-content:center}}
/* V28 — safe mobile viewport guard without blocking vertical scrolling */
html{
width:100%;
max-width:100%;
overflow-x:hidden;
}
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
main,header,footer,section,.container,
.hero-grid,.about-grid,.area-grid,.contact-grid,.content-grid,
.svc-grid,.why-grid,.process-grid,.related-grid,.location-grid,
.quote-form-shell,.work-head,.work-cta,.footer-grid{
min-width:0;
max-width:100%;
}
.hero-grid>*,.about-grid>*,.area-grid>*,.contact-grid>*,.content-grid>*,
.svc-grid>*,.why-grid>*,.process-grid>*,.related-grid>*,.location-grid>*,
.quote-form-shell>*,.footer-grid>*{min-width:0;max-width:100%}
/* Only lock vertical page scrolling while the mobile drawer is actually open. */
html.scroll-locked,body.menu-open{overflow:hidden!important}
@media(max-width:880px){
.hero-grid,.about-grid,.area-grid,.contact-grid,.content-grid,
.svc-grid,.why-grid,.process-grid,.related-grid,.location-grid,
.quote-form-shell,.footer-grid{
grid-template-columns:minmax(0,1fr)!important;
width:100%;
}
.hero-copy,.hero-visual,.svc,.why-card,.process-step,.content-card,
.contact-info,.contact-map,.quote-box,.about-card,.area-panel-card{
width:100%;max-width:100%;min-width:0;
}
.hero h1,.page-hero h1,.s-title{max-width:100%;overflow-wrap:anywhere}
.hero-rating-card{max-width:calc(100% - 20px)!important}
section:not(.hero):not(.page-hero){content-visibility:visible!important;contain:none!important}
}
@media(max-width:620px){
.mobile-contact-dock{left:8px!important;right:8px!important;width:auto!important;max-width:none!important}
.mobile-contact-dock a{min-width:0!important;white-space:nowrap}
.work-slider{max-width:100%;overscroll-behavior-x:contain}
}
/* V29 — iOS-safe mobile drawer and horizontal overflow fix.
The closed drawer no longer lives outside the viewport with translateX,
which could enlarge the page width in Safari and in-app browsers. */
@media (max-width:1420px){
nav#navbar .nav-links{
right:0!important;
left:auto!important;
max-width:100vw!important;
transform:none!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transition:opacity .22s ease,visibility .22s ease!important;
will-change:opacity;
}
nav#navbar .nav-links.open{
transform:none!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
}
/* Clip decorative overflow at component level, not on html/body,
so vertical page scrolling stays native and reliable. */
main,.hero,.page-hero,.seo-detail-section,.local-seo-section,
.related,.area-section,.quote-form-section,.work-section,
.work-page-gallery,.work-page-cta,footer{
overflow-x:clip;
}
@supports not (overflow:clip){
main,.hero,.page-hero,.seo-detail-section,.local-seo-section,
.related,.area-section,.quote-form-section,.work-section,
.work-page-gallery,.work-page-cta,footer{
overflow-x:hidden;
}
}
@media(max-width:880px){
html,body{
overflow-x:hidden!important;
overflow-y:visible;
}
body:not(.menu-open){
position:relative!important;
top:auto!important;
left:auto!important;
right:auto!important;
width:100%!important;
height:auto!important;
overflow-y:auto!important;
touch-action:auto!important;
}
nav#navbar,.nav-inner,.mobile-contact-dock{
max-width:100vw!important;
}
}
/* V30 — definitive iPhone/in-app viewport containment.
Mobile containers are anchored with physical side margins instead of a
percentage width, and the closed drawer is removed from rendering. */
@media (max-width:620px){
html,body{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow-x:hidden!important;
}
body:not(.menu-open){
position:relative!important;
inset:auto!important;
overflow-y:auto!important;
touch-action:pan-y!important;
}
.container,
.breadcrumb{
width:auto!important;
max-width:none!important;
min-width:0!important;
margin-left:15px!important;
margin-right:15px!important;
}
nav#navbar{
left:0!important;
right:0!important;
width:auto!important;
max-width:100%!important;
}
nav#navbar .nav-inner{
width:auto!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
}
.hero-grid,
.about-grid,
.area-grid,
.contact-grid,
.content-grid,
.svc-grid,
.why-grid,
.process-grid,
.related-grid,
.location-grid,
.quote-form-shell,
.footer-grid{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
}
.hero-copy,.hero-visual,.hero-photo-card,.hero-photo-card picture,
.hero-photo-card picture img,.hero-proof,.svc,.about-card,.about-img,
.why-card,.process-step,.quote-box,.contact-info,.contact-map,
.content-card,.area-panel,.area-panel-card{
width:100%!important;
min-width:0!important;
max-width:100%!important;
}
.hero-photo-card picture{display:block!important;overflow:hidden!important;border-radius:inherit}
.hero-photo-card picture img{height:auto!important;aspect-ratio:5/6;object-fit:cover!important}
.hero-rating-card{left:auto!important;right:auto!important;width:100%!important;max-width:100%!important}
.hero h1,.hero-sub,.s-title,.s-desc{width:auto!important;max-width:100%!important}
.hero-actions,.hero-actions .btn{width:100%!important;max-width:100%!important}
.mobile-contact-dock{
left:8px!important;
right:8px!important;
width:auto!important;
max-width:calc(100% - 16px)!important;
box-sizing:border-box!important;
}
.mobile-contact-dock a{min-width:0!important;max-width:100%!important;overflow:hidden!important}
}
/* Closed mobile drawer must not exist in the rendered box tree. This avoids
Safari/Messenger counting an invisible off-canvas panel in scrollWidth. */
@media (max-width:1420px){
nav#navbar .nav-links{
display:none!important;
inset:0 0 0 auto!important;
width:min(440px,100%)!important;
max-width:100%!important;
transform:none!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
nav#navbar .nav-links.open{display:flex!important}
}
/* V31 — stable native mobile scrolling and final viewport polish */
/* Do not defer section rendering: Safari/in-app browsers may visibly pause
when content-visibility activates large sections while the user scrolls. */
section,
section:not(.hero):not(.page-hero),
.hero,.page-hero,#angebot,#kontakt{
content-visibility:visible!important;
contain:none!important;
contain-intrinsic-size:auto!important;
}
@media (max-width:900px){
html{scroll-behavior:auto!important}
body{touch-action:pan-y!important;overscroll-behavior-x:none}
main,section,footer{touch-action:pan-y}
/* Mobile reveal effects are intentionally disabled to avoid render stalls
and layout flashes while sections enter the viewport. */
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.svc,.why-card,.process-step,.about-card,.content-card,
.quote-form-shell,.contact-info,.contact-map,.area-panel,
.work-card,.work-gallery-card{will-change:auto!important}
.work-slider{touch-action:pan-x pan-y;scroll-behavior:auto!important}
}
@media (max-width:620px){
/* Keep all page modules inside the physical viewport without affecting
vertical scrolling. */
body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
main,section,footer,.hero,.page-hero,.seo-detail-section,
.local-seo-section,.work-page-gallery,.work-page-cta{
max-width:100%;
overflow-x:hidden!important;
}
.container,.breadcrumb{
width:auto!important;
max-width:calc(100vw - 30px)!important;
margin-left:15px!important;
margin-right:15px!important;
}
.hero-grid,.about-grid,.area-grid,.contact-grid,.content-grid,
.svc-grid,.why-grid,.process-grid,.related-grid,.location-grid,
.quote-form-shell,.footer-grid,.work-gallery-grid,.local-seo-grid{
min-width:0!important;
max-width:100%!important;
}
.hero-photo-card,.hero-proof,.about-card,.area-panel-card,
.quote-form-shell,.contact-info,.contact-map,.content-card,
.local-seo-card,.work-gallery-open{
min-width:0!important;
max-width:100%!important;
}
.hero-rating-card{position:static!important;margin-top:12px!important}
.hero-proof{grid-template-columns:1fr 1fr!important}
.hero-proof>div{justify-content:flex-start!important;min-width:0}
.hero-proof strong,.hero-proof span{overflow-wrap:anywhere}
.s-title,.hero h1,.page-hero h1,.quote-intro h2{
overflow-wrap:normal!important;
word-break:normal!important;
hyphens:auto;
}
.mobile-contact-dock{
bottom:calc(8px + env(safe-area-inset-bottom))!important;
transform:translateZ(0);
}
#scrollTop{bottom:calc(104px + env(safe-area-inset-bottom))!important}
footer{padding-bottom:20px!important}
}
/* When the footer is visible, JS adds this class so the fixed dock does not
cover legal links and the site credit. */
.mobile-contact-dock.is-hidden-near-footer{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translateY(18px)!important;
}
/* V32 — native iOS scrolling and footer end-spacing fix */
@media (max-width:900px){
html,body{overscroll-behavior:auto!important}
body,main,section,footer{touch-action:auto!important}
.work-slider{touch-action:auto!important}
}
@media (max-width:620px){
body{padding-bottom:0!important}
footer{margin-bottom:0!important;padding-bottom:calc(26px + env(safe-area-inset-bottom))!important}
.mobile-contact-dock{will-change:auto!important}
}
/* V33 — one native page scroll on mobile.
The work gallery used to be a nested horizontal scroll container. On iOS
and in-app browsers it could capture a vertical swipe and make the page
appear to pause. Mobile now uses a normal vertical grid with no nested
scrolling or scroll-snap. */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
html,
body {
scroll-behavior: auto !important;
overscroll-behavior: auto !important;
touch-action: auto !important;
}
.hero,
.hero-grid,
.hero-copy,
.hero-visual,
.hero-photo-card,
.hero-proof {
overflow-y: visible !important;
touch-action: auto !important;
overscroll-behavior: auto !important;
}
.hero {
overflow-x: clip !important;
}
.work-slider {
display: grid !important;
grid-auto-flow: row !important;
grid-auto-columns: auto !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
overflow: visible !important;
scroll-snap-type: none !important;
scroll-behavior: auto !important;
overscroll-behavior: auto !important;
-webkit-overflow-scrolling: auto !important;
touch-action: auto !important;
}
.work-slide {
width: 100% !important;
min-width: 0 !important;
height: min(68svh, 520px) !important;
scroll-snap-align: none !important;
}
.work-controls,
.work-dots {
display: none !important;
}
}
@supports not (overflow: clip) {
@media (max-width: 900px), (hover: none), (pointer: coarse) {
.hero { overflow-x: hidden !important; }
}
}
/* V34 — single page scroll audit.
Content sections never create their own scroll context. The only internal
scrolling left is inside the mobile navigation and modal preference panel,
where it is required for accessibility on short screens. */
main, main section, .hero, .page-hero, .work-section, .work-page-gallery,
.work-page-cta, .quote-form-section, .seo-detail-section,
.local-seo-section, .area-section, .related, footer {
overflow-y: visible !important;
overscroll-behavior: auto !important;
touch-action: auto !important;
scroll-snap-type: none !important;
}
/* Replace the home-page horizontal carousel with a responsive static grid.
This removes scroll capture, momentum scrolling and automatic movement. */
.work-slider {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
grid-auto-columns: auto !important;
gap: 22px !important;
width: 100% !important;
max-width: 100% !important;
padding: 4px 2px 18px !important;
overflow: visible !important;
scroll-snap-type: none !important;
scroll-behavior: auto !important;
overscroll-behavior: auto !important;
touch-action: auto !important;
-webkit-overflow-scrolling: auto !important;
}
.work-slide {
width: 100% !important;
min-width: 0 !important;
scroll-snap-align: none !important;
}
.work-controls,.work-dots { display:none !important; }
/* Sticky content can feel like a trapped section in iOS in-app browsers. */
.quote-form-copy {
position: static !important;
top: auto !important;
}
@media (max-width: 980px) {
.work-slider { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 620px) {
.work-slider { grid-template-columns: minmax(0,1fr) !important; gap:16px !important; }
.work-slide { height:auto !important; min-height:0 !important; aspect-ratio:4/5; }
}
/* V35 — native mobile page scrolling, no visible/nested hero scrollbar. */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
html {
scroll-behavior: auto !important;
scrollbar-width: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: auto !important;
}
body {
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: auto !important;
touch-action: pan-y !important;
scroll-snap-type: none !important;
}
body::-webkit-scrollbar,
html::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Header never creates a scroll context. */
nav#navbar,
nav#navbar .nav-inner {
overflow: visible !important;
overscroll-behavior: none !important;
touch-action: auto !important;
}
/* The hero uses only the document scroll. */
.hero,
.hero-grid,
.hero-copy,
.hero-visual,
.hero-photo-card,
.hero-proof {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow-y: visible !important;
overscroll-behavior: none !important;
scroll-snap-type: none !important;
touch-action: pan-y !important;
}
.hero {
overflow-x: clip !important;
}
.hero-photo-card > picture {
overflow: hidden !important;
overscroll-behavior: none !important;
touch-action: pan-y !important;
}
.hero-photo-card > picture > img {
max-height: none !important;
touch-action: pan-y !important;
user-select: none;
-webkit-user-drag: none;
}
}
@supports not (overflow: clip) {
@media (max-width: 900px), (hover: none), (pointer: coarse) {
.hero { overflow-x: hidden !important; }
}
}
/* V36 — one and only one page scroll + tablet contact dock.
The document owns vertical scrolling. Content sections never create a
second vertical scroll container. Internal scrolling is limited to the
open mobile navigation and cookie preferences dialog on short screens. */
html {
overflow-x: hidden !important;
overflow-y: auto !important;
scroll-snap-type: none !important;
overscroll-behavior: auto !important;
touch-action: auto !important;
}
body {
overflow-x: hidden !important;
overflow-y: visible !important;
min-height: 100% !important;
height: auto !important;
max-height: none !important;
scroll-snap-type: none !important;
overscroll-behavior: auto !important;
touch-action: auto !important;
}
body:not(.menu-open) {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
}
main,
main > *,
main section,
.hero,
.hero-grid,
.hero-copy,
.hero-visual,
.hero-photo-card,
.hero-proof,
.page-hero,
.work-section,
.work-slider,
.work-page-gallery,
.work-page-cta,
.quote-form-section,
.quote-form-shell,
.seo-detail-section,
.local-seo-section,
.area-section,
.related,
footer {
overflow-y: visible !important;
max-height: none !important;
scroll-snap-type: none !important;
overscroll-behavior: auto !important;
touch-action: auto !important;
}
.hero,
.page-hero,
.work-section,
.work-page-gallery,
.quote-form-section,
.seo-detail-section,
.local-seo-section,
.area-section,
.related,
footer {
overflow-x: clip !important;
}
@supports not (overflow: clip) {
.hero,
.page-hero,
.work-section,
.work-page-gallery,
.quote-form-section,
.seo-detail-section,
.local-seo-section,
.area-section,
.related,
footer { overflow-x: hidden !important; }
}
/* Only overlays may scroll internally when their content is taller than the
viewport. They are not part of normal page sections. */
@media (max-width: 1420px) {
nav#navbar .nav-links.open {
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain !important;
touch-action: pan-y !important;
}
}
.cookie-panel {
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
touch-action: pan-y !important;
}
.work-lightbox { overflow: hidden !important; }
/* Show the fixed call / WhatsApp dock on phones and tablets. */
@media (max-width: 1180px) {
.mobile-contact-dock {
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: calc(10px + env(safe-area-inset-bottom)) !important;
z-index: 820 !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
gap: 8px !important;
width: auto !important;
max-width: none !important;
padding: 8px !important;
border: 1px solid #dce7ef !important;
border-radius: 20px !important;
background: rgba(255,255,255,.96) !important;
box-shadow: 0 16px 40px rgba(8,43,72,.20) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
.mobile-contact-dock a {
min-width: 0 !important;
min-height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 12px 10px !important;
border-radius: 14px !important;
color: #fff !important;
font-size: .96rem !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
.floating-wa { display: none !important; }
.scroll-top { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 881px) and (max-width: 1180px) {
.mobile-contact-dock {
left: 50% !important;
right: auto !important;
width: min(620px, calc(100% - 40px)) !important;
transform: translateX(-50%);
}
.mobile-contact-dock.is-hidden-near-footer {
transform: translate(-50%,18px) !important;
}
}
@media (max-width: 620px) {
.mobile-contact-dock {
left: 8px !important;
right: 8px !important;
bottom: calc(7px + env(safe-area-inset-bottom)) !important;
padding: 7px !important;
border-radius: 18px !important;
}
.mobile-contact-dock a {
min-height: 49px !important;
font-size: .91rem !important;
}
}
/* V37 — final responsive header and phone/tablet contact dock.
This block intentionally overrides older accumulated experiments. */
:root{--mobile-gutter:12px}
@media (max-width:1420px){
nav#navbar{
position:fixed!important;
inset:0 0 auto 0!important;
width:100%!important;
max-width:100%!important;
padding:12px var(--mobile-gutter) 0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
overflow:visible!important;
}
nav#navbar .nav-inner{
width:100%!important;
max-width:1180px!important;
height:66px!important;
min-height:66px!important;
margin:0 auto!important;
padding:0 12px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
border:1px solid transparent!important;
border-radius:18px!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
}
nav#navbar.scrolled{padding-top:8px!important}
nav#navbar.scrolled .nav-inner{
height:60px!important;
min-height:60px!important;
background:rgba(255,255,255,.96)!important;
border-color:rgba(10,61,104,.10)!important;
box-shadow:0 12px 34px rgba(8,43,72,.13)!important;
backdrop-filter:blur(16px)!important;
-webkit-backdrop-filter:blur(16px)!important;
}
nav#navbar .brand{
flex:0 1 auto!important;
min-width:0!important;
max-width:min(210px,calc(100vw - 88px))!important;
overflow:hidden!important;
}
nav#navbar .brand picture{display:block!important;max-width:100%!important}
nav#navbar .brand img{
width:auto!important;
max-width:100%!important;
height:54px!important;
object-fit:contain!important;
object-position:left center!important;
}
nav#navbar.scrolled .brand img{height:48px!important}
nav#navbar .burger{
display:flex!important;
flex:0 0 44px!important;
width:44px!important;
height:44px!important;
margin-left:auto!important;
border-radius:14px!important;
background:rgba(255,255,255,.92)!important;
border:1px solid rgba(10,61,104,.10)!important;
box-shadow:0 8px 22px rgba(8,43,72,.10)!important;
}
nav#navbar .nav-links{
box-sizing:border-box!important;
width:min(430px,100vw)!important;
max-width:100vw!important;
height:100dvh!important;
max-height:100dvh!important;
}
.hero{padding-top:98px!important}
.page-hero,.legal-page{padding-top:98px!important}
}
@media (max-width:620px){
:root{--mobile-gutter:8px}
nav#navbar{padding-top:10px!important}
nav#navbar.scrolled{padding-top:6px!important}
nav#navbar .nav-inner{
height:62px!important;
min-height:62px!important;
padding:0 9px!important;
border-radius:16px!important;
}
nav#navbar.scrolled .nav-inner{height:57px!important;min-height:57px!important}
nav#navbar .brand{max-width:calc(100vw - 82px)!important}
nav#navbar .brand img{height:48px!important}
nav#navbar.scrolled .brand img{height:43px!important}
nav#navbar .burger{flex-basis:42px!important;width:42px!important;height:42px!important}
.hero{padding-top:86px!important}
.page-hero,.legal-page{padding-top:86px!important}
}
@media (max-width:360px){
nav#navbar .brand img{height:43px!important}
nav#navbar.scrolled .brand img{height:40px!important}
nav#navbar .burger{flex-basis:40px!important;width:40px!important;height:40px!important}
}
/* One consistent dock from phones through tablets. */
.mobile-contact-dock{display:none!important}
@media (max-width:1180px){
.mobile-contact-dock{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:calc(10px + env(safe-area-inset-bottom))!important;
transform:translateX(-50%)!important;
width:min(620px,calc(100vw - 24px))!important;
max-width:calc(100vw - 24px)!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:8px!important;
padding:8px!important;
border:1px solid rgba(10,61,104,.12)!important;
border-radius:19px!important;
background:rgba(255,255,255,.96)!important;
box-shadow:0 16px 40px rgba(8,43,72,.18)!important;
backdrop-filter:blur(14px)!important;
-webkit-backdrop-filter:blur(14px)!important;
z-index:840!important;
box-sizing:border-box!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
.mobile-contact-dock a{
min-width:0!important;
width:100%!important;
min-height:50px!important;
padding:11px 10px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
border-radius:13px!important;
color:#fff!important;
font-size:.94rem!important;
line-height:1!important;
font-weight:900!important;
white-space:nowrap!important;
overflow:hidden!important;
}
.mobile-contact-dock.is-hidden-near-footer{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translate(-50%,16px)!important;
}
body.menu-open .mobile-contact-dock{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
transform:translate(-50%,16px)!important;
}
.scroll-top{bottom:calc(92px + env(safe-area-inset-bottom))!important}
body{padding-bottom:0!important}
main{padding-bottom:84px!important}
}
@media (max-width:620px){
.mobile-contact-dock{
width:calc(100vw - 16px)!important;
max-width:calc(100vw - 16px)!important;
bottom:calc(7px + env(safe-area-inset-bottom))!important;
padding:7px!important;
border-radius:17px!important;
}
.mobile-contact-dock a{min-height:48px!important;font-size:.89rem!important;padding-inline:7px!important}
main{padding-bottom:78px!important}
}
@media (max-width:350px){
.mobile-contact-dock a{font-size:.82rem!important;gap:5px!important}
}
/* V38 — stable viewport-safe header and contact dock.
Uses physical inset edges instead of 100vw/translate calculations, which
avoids clipping in iOS, Messenger and narrow embedded previews. */
@media (max-width:1420px){
nav#navbar{
left:0!important;
right:0!important;
width:auto!important;
max-width:none!important;
padding:10px 10px 0!important;
box-sizing:border-box!important;
}
nav#navbar .nav-inner{
width:auto!important;
max-width:1180px!important;
margin-inline:auto!important;
box-sizing:border-box!important;
min-width:0!important;
}
nav#navbar .brand{
flex:1 1 auto!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
overflow:visible!important;
}
nav#navbar .brand picture{
display:block!important;
width:min(210px,100%)!important;
max-width:100%!important;
}
nav#navbar .brand img{
display:block!important;
width:100%!important;
max-width:210px!important;
height:auto!important;
max-height:52px!important;
}
nav#navbar .burger{
flex:0 0 44px!important;
width:44px!important;
min-width:44px!important;
max-width:44px!important;
}
}
@media (max-width:620px){
nav#navbar{padding:8px 8px 0!important}
nav#navbar .nav-inner{
width:auto!important;
height:62px!important;
min-height:62px!important;
padding:0 10px!important;
gap:8px!important;
}
nav#navbar.scrolled .nav-inner{height:58px!important;min-height:58px!important}
nav#navbar .brand picture{width:min(190px,100%)!important}
nav#navbar .brand img{max-width:190px!important;max-height:48px!important}
nav#navbar.scrolled .brand img{max-height:44px!important}
nav#navbar .burger{
flex-basis:42px!important;
width:42px!important;
min-width:42px!important;
max-width:42px!important;
height:42px!important;
}
}
@media (max-width:380px){
nav#navbar .nav-inner{padding-inline:8px!important}
nav#navbar .brand picture{width:min(165px,100%)!important}
nav#navbar .brand img{max-width:165px!important;max-height:43px!important}
nav#navbar .burger{
flex-basis:40px!important;
width:40px!important;
min-width:40px!important;
max-width:40px!important;
height:40px!important;
}
}
/* Dock: edge anchored, never wider than the actual layout viewport. */
@media (max-width:1180px){
.mobile-contact-dock{
left:12px!important;
right:12px!important;
width:auto!important;
max-width:620px!important;
margin-inline:auto!important;
transform:none!important;
box-sizing:border-box!important;
}
.mobile-contact-dock.is-hidden-near-footer,
body.menu-open .mobile-contact-dock{
transform:translateY(16px)!important;
}
.mobile-contact-dock a{
min-width:0!important;
max-width:100%!important;
width:auto!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
}
@media (max-width:620px){
.mobile-contact-dock{
left:8px!important;
right:8px!important;
width:auto!important;
max-width:none!important;
margin:0!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
}
.mobile-contact-dock a{
min-height:48px!important;
padding:10px 6px!important;
gap:6px!important;
font-size:.88rem!important;
}
}
@media (max-width:360px){
.mobile-contact-dock{left:6px!important;right:6px!important;padding:6px!important;gap:6px!important}
.mobile-contact-dock a{font-size:.8rem!important;padding-inline:4px!important;gap:4px!important}
.mobile-contact-dock a i{font-size:.9rem!important}
}
/* V39 — final cross-device layout audit fixes.
Decorative shapes stay inside their components, and the hero rating card
remains fully visible on compact laptop/tablet widths. */
.quote-form-section{
overflow:hidden!important;
}
@media (min-width:621px) and (max-width:1180px){
.hero-rating-card{
left:0!important;
}
}
.quote-form-section::after{
right:0!important;
}
@media (max-width:1180px){
.mobile-contact-dock .dock-call{
background:linear-gradient(135deg,var(--blue),var(--blue-2))!important;
}
.mobile-contact-dock .dock-wa{
background:linear-gradient(135deg,#27d367,#159a45)!important;
}
}
/* V40 — compact responsive carousel for “Einblicke in unsere Arbeit”.
Uses a transformed track instead of a nested scroll area, so vertical
touch scrolling remains native and the section stays one row high. */
.work-slider.work-carousel {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 4px 2px 18px !important;
overflow: hidden !important;
scroll-snap-type: none !important;
touch-action: pan-y !important;
}
.work-carousel .work-track {
display: flex;
gap: 22px;
width: 100%;
transform: translate3d(0,0,0);
transition: transform .48s cubic-bezier(.22,.7,.2,1);
will-change: transform;
}
.work-slider.work-carousel .work-slide {
flex: 0 0 calc((100% - 44px) / 3) !important;
width: auto !important;
min-width: 0 !important;
height: 400px !important;
aspect-ratio: auto !important;
scroll-snap-align: none !important;
}
.work-section .work-controls {
display: flex !important;
}
.work-section .work-dots {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 18px;
margin: 2px 0 22px;
}
.work-dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 999px;
background: #b9cbd4;
cursor: pointer;
transition: width .22s ease, background-color .22s ease, transform .22s ease;
}
.work-dot:hover,
.work-dot:focus-visible {
transform: scale(1.16);
}
.work-dot.active {
width: 28px;
background: var(--blue);
}
.work-dot:focus-visible {
outline: 3px solid rgba(20,122,176,.25);
outline-offset: 3px;
}
@media (max-width: 980px) {
.work-slider.work-carousel .work-slide {
flex-basis: calc((100% - 18px) / 2) !important;
height: 380px !important;
}
.work-carousel .work-track { gap: 18px; }
}
@media (max-width: 620px) {
.work-section .work-head {
align-items: stretch;
flex-direction: column;
gap: 18px;
}
.work-section .work-controls {
justify-content: flex-end;
}
.work-section .work-arrow {
width: 46px;
height: 46px;
}
.work-carousel .work-track { gap: 14px; }
.work-slider.work-carousel {
padding-right: 0 !important;
margin-right: 0 !important;
}
.work-slider.work-carousel .work-slide {
flex-basis: 100% !important;
height: 380px !important;
aspect-ratio: auto !important;
}
.work-section .work-dots {
margin-bottom: 18px;
}
}
@media (max-width: 380px) {
.work-slider.work-carousel .work-slide { height: 350px !important; }
}
@media (prefers-reduced-motion: reduce) {
.work-carousel .work-track { transition: none; }
}