:root{
  --primary:#164da3;
  --primary-dark:#0f2d63;
  --secondary:#2cb7df;
  --accent:#86e6ff;
  --bg:#f5f9ff;
  --surface:rgba(255,255,255,.72);
  --surface-solid:#ffffff;
  --text:#1c2d4a;
  --muted:#637089;
  --border:rgba(22,77,163,.14);
  --shadow:0 18px 40px rgba(17,60,120,.14);
  --radius:24px;
  --container: min(1180px, calc(100vw - 32px));
  --header-height:84px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI", Tahoma, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(134,230,255,.18), transparent 26%),
    radial-gradient(circle at 90% 14%, rgba(44,183,223,.10), transparent 20%),
    linear-gradient(180deg,#f8fbff 0%, #f3f9ff 38%, #ffffff 100%);
  line-height:1.75;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{width:var(--container);margin-inline:auto}
.skip-link{
  position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);
}
.skip-link:focus{position:fixed;top:12px;right:12px;inline-size:auto;block-size:auto;clip:auto;padding:10px 14px;background:#fff;border-radius:12px;z-index:9999;box-shadow:var(--shadow)}
.topbar{position:relative;z-index:50;background:#0f2d63;color:#fff;font-size:.94rem;margin:0;padding:0}
.topbar__wrap,.header__inner,.trust-strip__grid,.coverage__grid,.quote__grid,.footer__grid,.hero__grid,.extras__wrap,.guarantee__wrap{display:flex;gap:18px;align-items:center}
.topbar__wrap{justify-content:space-between;padding:10px 0;flex-wrap:wrap}
.topbar__item-group{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.topbar__link{opacity:.95}
.topbar__link:hover{opacity:1;text-decoration:underline}
.topbar__badge{padding:6px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08)}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(15,45,99,.08);margin:0}
.header__inner{min-height:var(--header-height);justify-content:space-between}
.brand img{height:auto;max-width:220px}
.main-nav{display:flex;gap:22px;align-items:center}
.main-nav a{font-weight:600;color:var(--primary-dark)}
.main-nav a:hover{color:var(--primary)}
.header__actions{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
.menu-toggle span{display:block;width:26px;height:3px;background:var(--primary-dark);margin:4px 0;border-radius:9px;transition:.25s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 22px;font-weight:700;transition:.25s transform,.25s box-shadow,.25s background,.25s color;border:1px solid transparent;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:linear-gradient(135deg,var(--primary),#206fe0);color:#fff;box-shadow:0 16px 30px rgba(22,77,163,.24)}
.btn--primary:hover{box-shadow:0 20px 36px rgba(22,77,163,.28)}
.btn--ghost{background:#fff;border-color:rgba(22,77,163,.16);color:var(--primary-dark)}
.btn--soft{background:rgba(22,77,163,.08);color:var(--primary);padding:12px 18px}
.btn--xl{padding:16px 28px;font-size:1.02rem}
.btn--block{width:100%}
.water-blobs{pointer-events:none;position:fixed;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(6px);opacity:.55;animation:floatBlob 16s ease-in-out infinite}
.blob--1{width:280px;height:280px;top:12%;left:-80px;background:radial-gradient(circle,#baf2ff 0%, rgba(186,242,255,.1) 75%)}
.blob--2{width:220px;height:220px;bottom:10%;right:-30px;background:radial-gradient(circle,#d5f7ff 0%, rgba(213,247,255,.05) 72%);animation-delay:-6s}
.blob--3{width:180px;height:180px;top:58%;left:12%;background:radial-gradient(circle,#e8fdff 0%, rgba(232,253,255,.05) 75%);animation-delay:-10s}
.hero{padding:34px 0 24px;position:relative}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:34px;align-items:center}
.hero__content{padding:24px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 14px;border-radius:999px;background:rgba(134,230,255,.22);color:var(--primary);font-weight:700;font-size:.92rem}
.hero__title{font-size:clamp(2rem,4vw,4rem);line-height:1.15;margin:0 0 16px;color:var(--primary-dark)}
.hero__desc{margin:0 0 18px;color:var(--muted);font-size:1.08rem;max-width:65ch}
.hero__ticks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;margin:0 0 22px;list-style:none}
.hero__ticks li,.check-list li{position:relative;padding-inline-start:28px;color:var(--text)}
.hero__ticks li::before,.check-list li::before{content:"";position:absolute;inset-inline-start:0;top:.52em;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--secondary),var(--primary));box-shadow:0 4px 12px rgba(44,183,223,.25)}
.hero__ticks li::after,.check-list li::after{content:"";position:absolute;inset-inline-start:5px;top:.85em;width:7px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.hero__mini-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mini-card,.glass-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(150%)}
.mini-card{padding:18px;border-radius:20px}
.mini-card strong{display:block;color:var(--primary-dark)}
.mini-card span{display:block;color:var(--muted);font-size:.96rem;margin-top:4px}
.hero__media{position:relative}
.hero__media img{width:100%;border-radius:32px;box-shadow:var(--shadow);object-fit:cover}
.hero__glow{position:absolute;inset:auto -8% -10% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle, rgba(134,230,255,.65), transparent 65%);filter:blur(18px)}
.trust-strip{padding:14px 0 8px}
.trust-strip__grid{justify-content:center;flex-wrap:wrap}
.trust-pill{padding:14px 18px;background:#fff;border:1px solid rgba(22,77,163,.1);border-radius:999px;box-shadow:0 8px 22px rgba(15,45,99,.07);font-weight:700;color:var(--primary-dark)}
.section{padding:72px 0;position:relative}
.section-head{max-width:740px;margin-bottom:32px}
.section-head--center{text-align:center;margin-inline:auto auto}
.section-head h2{font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.2;margin:0 0 10px;color:var(--primary-dark)}
.section-head p:last-child{margin:0;color:var(--muted)}
.feature-grid,.services-grid,.gallery-grid,.process-grid,.faq-list{display:grid;gap:18px}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-card,.process-card,.service-card,.gallery-card,.faq-item,.quote-form,.quote__contact,.coverage__cta{border-radius:24px}
.feature-card,.process-card{padding:24px}
.feature-card h3,.process-card h3,.service-card h3,.coverage__cta h3,.quote__contact h3{margin:0 0 8px;color:var(--primary-dark)}
.feature-card p,.process-card p,.service-card p,.coverage__cta p,.quote__contact p,.faq-item p{margin:0;color:var(--muted)}
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-card{overflow:hidden}
.service-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.service-card__body{padding:18px}
.service-card__body .btn{margin-top:16px}
.extras__wrap,.guarantee__wrap,.coverage__grid,.quote__grid{justify-content:space-between}
.extras__wrap,.guarantee__wrap{padding:28px;border-radius:30px}
.check-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:14px}
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-card{overflow:hidden}
.gallery-card figcaption{padding:12px 16px;font-weight:700;color:var(--primary-dark)}
.gallery-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.process-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.process-card span{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--accent),rgba(22,77,163,.16));color:var(--primary-dark);font-weight:800;font-size:1.2rem;margin-bottom:14px}
.coverage__grid,.quote__grid{display:grid;grid-template-columns:1fr 420px;align-items:start;gap:22px}
.area-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.area-tags span{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(22,77,163,.1);font-weight:700;color:var(--primary-dark)}
.coverage__cta{padding:24px}
.guarantee__box{padding:22px;border-radius:22px;background:rgba(22,77,163,.06);min-width:280px}
.faq-list{max-width:920px;margin-inline:auto}
.faq-item{padding:0}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:800;color:var(--primary-dark);display:flex;justify-content:space-between;gap:18px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+";margin-inline-start:0;color:var(--primary);font-size:1.5rem;order:2}
.faq-item[open] summary::before{content:"–"}
.faq-item p{padding:0 22px 22px}
.quote-form,.quote__contact{padding:24px}
.form-group{display:grid;gap:8px;margin-bottom:16px}
label{font-weight:700;color:var(--primary-dark)}
input,select,textarea{width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(22,77,163,.16);background:#fff;color:var(--text);outline:0;transition:.2s border-color,.2s box-shadow}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(22,77,163,.12)}
textarea{resize:vertical;min-height:130px}
.error-message{min-height:1.2em;color:#c4244f;font-weight:700}
.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea{border-color:#c4244f;box-shadow:0 0 0 4px rgba(196,36,79,.10)}
.form-note{margin:.9rem 0 0;color:var(--muted);font-size:.95rem}
.quote__contact ul,.site-footer ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.final-cta__box{padding:30px;border-radius:32px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(234,248,255,.85));position:relative;overflow:hidden}
.final-cta__box::before{content:"";position:absolute;inset:auto auto -70px -60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle, rgba(44,183,223,.18), transparent 70%)}
.final-cta__actions{display:flex;gap:12px;flex-wrap:wrap}
.site-footer{padding:34px 0 100px;background:#0f2d63;color:#f2f7ff;margin-top:36px}
.footer__grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;align-items:start;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__grid h3{margin-top:0}
.footer__grid a:hover,.footer__bottom a:hover{text-decoration:underline}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;font-size:.95rem}
.floating-wa,.floating-call{position:fixed;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;color:#fff;box-shadow:0 16px 34px rgba(10,26,56,.22);font-weight:800}
.floating-wa{left:16px;bottom:18px;background:#18a957}
.floating-call{right:16px;bottom:18px;background:linear-gradient(135deg,var(--primary),#1e6de0)}
.floating-wa svg,.floating-call svg{width:22px;height:22px}
.guide-drop{position:fixed;left:12px;top:160px;z-index:35;display:flex;align-items:center;pointer-events:none;transition:top .45s ease, opacity .35s ease}
.guide-drop__button{pointer-events:auto;display:flex;flex-direction:column;align-items:center;background:transparent;border:0;cursor:pointer;padding:0}
.guide-drop__button img{width:88px;height:auto;filter:drop-shadow(0 16px 24px rgba(20,76,162,.18))}
.guide-drop__label{margin-top:-8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(22,77,163,.12);box-shadow:0 12px 26px rgba(12,36,79,.12);color:var(--primary-dark);font-size:.9rem;font-weight:800;white-space:nowrap}
.guide-drop__beam{display:block;width:120px;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(44,183,223,.0),rgba(44,183,223,.75),rgba(44,183,223,.0));margin-inline-end:8px;animation:pulseBeam 2.5s ease-in-out infinite}
.guide-highlight{outline:3px solid rgba(44,183,223,.25);border-radius:18px;box-shadow:0 0 0 8px rgba(44,183,223,.08)}
@keyframes floatBlob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-20px,0)}}
@keyframes pulseBeam{0%,100%{opacity:.25;transform:scaleX(.9)}50%{opacity:1;transform:scaleX(1)}}
@media (max-width: 1080px){
  .hero__grid,.coverage__grid,.quote__grid,.footer__grid,.process-grid,.feature-grid,.services-grid,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__ticks{grid-template-columns:1fr}
  .guide-drop{left:6px}
}
@media (max-width: 860px){
  :root{--header-height:76px}
  .menu-toggle{display:block}
  .main-nav{position:absolute;top:100%;inset-inline:12px;background:rgba(255,255,255,.96);border:1px solid rgba(15,45,99,.08);box-shadow:var(--shadow);border-radius:18px;padding:14px;display:none;flex-direction:column;align-items:flex-start}
  .main-nav.is-open{display:flex}
  .header__actions{display:none}
  .hero__grid,.coverage__grid,.quote__grid,.footer__grid,.process-grid,.feature-grid,.services-grid,.gallery-grid,.hero__mini-cards{grid-template-columns:1fr}
  .extras__wrap,.guarantee__wrap,.final-cta__box{flex-direction:column;align-items:flex-start}
  .guide-drop{bottom:98px;top:auto;left:12px;right:auto}
  .guide-drop__beam{display:none}
  .guide-drop__button img{width:72px}
}
@media (max-width: 620px){
  .topbar__wrap{justify-content:center}
  .hero{padding-top:24px}
  .hero__content{padding-top:0}
  .btn{width:100%}
  .hero__cta,.final-cta__actions{width:100%}
  .section{padding:58px 0}
  .floating-wa span,.floating-call span{display:none}
  .floating-wa,.floating-call{padding:13px}
  .brand img{max-width:170px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .parallax-item{transform:none!important}
}

/* v2 cinematic depth and performance */
.depth-scene{
  transform-style:preserve-3d;
  perspective:1200px;
  will-change:transform;
  transition:transform .28s ease-out;
}
.depth-card{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
  isolation:isolate;
}
.depth-card::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(84,211,244,.06));
  transform:translateZ(-22px);
  z-index:-1;
  pointer-events:none;
}
.depth-card:hover{
  border-color:rgba(44,183,223,.35);
  box-shadow:0 26px 54px rgba(15,54,113,.18);
}
.depth-card img,.depth-card .service-card__body{
  transform:translateZ(20px);
}
.hero::before{
  content:"";
  position:absolute;
  inset:5% auto auto -12%;
  width:42vw;
  height:42vw;
  min-width:380px;
  min-height:380px;
  border-radius:44% 56% 66% 34% / 42% 38% 62% 58%;
  background:radial-gradient(circle at 65% 45%,rgba(151,236,255,.35),rgba(75,180,237,.09) 55%,transparent 72%);
  filter:blur(8px);
  pointer-events:none;
  animation:morphWater 14s ease-in-out infinite alternate;
}
.hero__media::before,.hero__media::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:2;
}
.hero__media::before{
  width:72px;
  height:72px;
  top:8%;
  left:-22px;
  background:radial-gradient(circle at 35% 25%,#fff 0 8%,#8fe8ff 22%,#2f9ee6 70%,#1856b0 100%);
  box-shadow:inset -8px -10px 18px rgba(10,51,116,.22),0 14px 32px rgba(38,149,220,.22);
  animation:dropFloat 5.8s ease-in-out infinite;
}
.hero__media::after{
  width:32px;
  height:32px;
  right:8%;
  bottom:8%;
  background:radial-gradient(circle at 35% 25%,#fff,#8fe8ff 28%,#2f9ee6 75%);
  box-shadow:0 10px 24px rgba(38,149,220,.2);
  animation:dropFloat 4.2s ease-in-out infinite reverse;
}
.services::before,.gallery::before,.quote::before{
  content:"";
  position:absolute;
  top:-22px;
  left:0;
  right:0;
  height:44px;
  background:
    radial-gradient(42px 22px at 42px 22px,rgba(128,225,250,.14) 98%,transparent 100%) 0 0/84px 44px repeat-x;
  pointer-events:none;
}
.final-cta__box--visual{
  min-height:360px;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(240,250,255,.94) 52%,rgba(220,244,255,.35) 100%);
}
.final-cta__box--visual > div:not(.final-cta__visual),
.final-cta__box--visual > .final-cta__actions{
  position:relative;
  z-index:3;
  max-width:58%;
}
.final-cta__visual{
  position:absolute;
  inset:0 48% 0 0;
  z-index:1;
  overflow:hidden;
  transform:translateZ(-18px);
}
.final-cta__visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(244,251,255,.12) 34%,rgba(246,252,255,.92) 86%,#f8fcff 100%);
}
.final-cta__visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}
@keyframes morphWater{
  0%{transform:translate3d(0,0,0) rotate(0deg);border-radius:44% 56% 66% 34% / 42% 38% 62% 58%}
  100%{transform:translate3d(24px,-12px,0) rotate(6deg);border-radius:58% 42% 34% 66% / 57% 63% 37% 43%}
}
@keyframes dropFloat{
  0%,100%{transform:translate3d(0,0,22px) scale(1)}
  50%{transform:translate3d(8px,-16px,32px) scale(1.06)}
}
@media (max-width:860px){
  .final-cta__box--visual{padding-bottom:240px}
  .final-cta__box--visual > div:not(.final-cta__visual),
  .final-cta__box--visual > .final-cta__actions{max-width:100%}
  .final-cta__visual{inset:auto 0 0 0;height:230px}
  .final-cta__visual::after{background:linear-gradient(180deg,#f8fcff 0%,rgba(248,252,255,.24) 40%,transparent 100%)}
  .depth-card,.depth-scene{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .water-canvas{display:none}
  .hero::before,.hero__media::before,.hero__media::after{animation:none!important}
  .depth-card,.depth-scene{transform:none!important}
}

/* Keep all sections in the render tree; lazy images still protect initial load. */
.section{content-visibility:visible;contain-intrinsic-size:auto}

/* Prevent HTML width/height attributes from stretching responsive images. */
img{height:auto}
.final-cta__visual img{height:100%}

/* Contain decorative hero shapes so RTL pages never gain horizontal overflow. */
.hero{overflow:clip}

/* Keep card content on the normal paint plane for consistent rendering. */
.depth-card img,.depth-card .service-card__body{transform:none}
.depth-card:hover img{transform:scale(1.018)}