/* Vitágua Premium v3 — compact, cinematic, water-first */
:root{
  --deep-2:#041722;
  --glass:rgba(8,34,48,.58);
  --glass-soft:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.22);
  --shadow-premium:0 18px 60px rgba(0,18,26,.20);
}
html{background:#fff}
body{font-size:15px;background:#fff}
.wrap{width:min(var(--content-width),1120px,calc(100% - 46px))}

/* Header: translucent, compact, premium */
.site-header{
  top:14px;
  width:min(1080px,calc(100% - 28px));
  height:64px;
  padding:0 12px 0 18px;
  border-radius:18px;
  gap:18px;
  background:linear-gradient(135deg,rgba(4,29,45,.76),rgba(7,52,66,.56));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 42px rgba(0,19,30,.18),inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(24px) saturate(138%);
  -webkit-backdrop-filter:blur(24px) saturate(138%);
}
.brand img{width:min(var(--header-logo-width),126px);max-height:39px}
.nav{gap:18px}
.nav a{font-size:11.5px;letter-spacing:.01em;color:rgba(255,255,255,.83)}
.glass-cta,.btn,.wa-float,.top-float,.sound-toggle{
  border:1px solid rgba(255,255,255,.23);
  background:linear-gradient(135deg,rgba(38,172,151,.19),rgba(38,121,171,.14));
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 10px 30px rgba(1,24,35,.16),inset 0 1px 0 rgba(255,255,255,.13),0 0 24px rgba(45,216,198,.08);
  color:#fff;
}
.glass-cta{padding:10px 15px;font-size:11.5px}
.glass-cta:hover,.btn:hover{background:linear-gradient(135deg,rgba(48,214,115,.23),rgba(60,186,226,.19));box-shadow:0 12px 34px rgba(1,24,35,.19),0 0 28px rgba(45,216,198,.13)}

/* Global button style: no solid neon-green blocks */
.btn{min-height:46px;padding:0 17px;font-size:12px;font-weight:650;border-radius:999px}
.btn-solid,.btn-glass{background:linear-gradient(135deg,rgba(8,43,57,.60),rgba(14,88,95,.38));color:#fff}
.scene-light .btn-solid,.scene-light .btn-glass,.contact .btn-solid{
  background:linear-gradient(135deg,rgba(4,35,49,.88),rgba(6,79,87,.78));
  color:#fff;
  border-color:rgba(9,73,86,.18);
}

/* Stronger but elegant parallax */
.parallax-layer{
  will-change:transform,filter;
  transform:translate3d(calc(var(--mx)*var(--depth,0)*28px),calc(var(--my)*var(--depth,0)*18px + var(--sy,0px)),0) scale(var(--scale,1.075));
  filter:blur(calc(var(--base-blur,0px) + var(--scroll-blur,0px)));
  transition:filter .12s linear;
}
.scene-bg,.split-bg,.about-bg,.faq-bg,.contact-water,.hero-slide{--scale:1.11}
.asset-branch{--base-blur:3px;opacity:.31;width:min(50vw,760px)}
.asset-leaf-right{--base-blur:8px;opacity:.30;width:min(31vw,520px)}
.asset-mist{opacity:.48}
.split-leaf{--base-blur:5px}
.service-leaf,.water-leaf{--base-blur:5px}
.video-foreground{--base-blur:9px}

/* Hero: compact, premium, not portal-like */
.hero{min-height:88svh}
.hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:end;padding-top:92px;padding-bottom:58px}
.hero-copy{max-width:700px}
.hero h1{font-size:clamp(46px,5.6vw,76px);line-height:.93;letter-spacing:-.045em;max-width:760px}
.hero p{max-width:600px;font-size:15.5px;line-height:1.62;margin-top:20px}
.kicker{font-size:9.5px;letter-spacing:.19em;margin-bottom:14px}
.actions{margin-top:24px}
.hero-trust{display:flex;align-items:center;gap:11px;align-self:end;margin-bottom:6px;border-radius:999px;padding:12px 16px;white-space:nowrap}
.hero-trust span{font-size:10.5px;color:rgba(255,255,255,.78)}
.hero-trust i{width:3px;height:3px;border-radius:50%;background:rgba(45,216,198,.8)}
.scroll-hint{bottom:15px;font-size:8.5px}

/* White/editorial split — one strong thought, lots of controlled white space */
.editorial-split{min-height:72svh;grid-template-columns:52% 48%}
.white-inner{width:min(520px,calc(100% - 72px));padding:74px 12px}
.white-inner h2{font-size:clamp(42px,4.7vw,64px);line-height:.96;letter-spacing:-.04em}
.white-inner p{font-size:14.5px;line-height:1.67;margin-top:20px;max-width:490px}
.minimal-badges{margin-top:22px;gap:7px}.minimal-badges span{font-size:9.5px;padding:7px 10px}
.white-panel:after{right:-58px;width:110px}
.split-copy{right:7%;bottom:9%;max-width:320px}.split-copy strong{font-size:36px}.split-copy span{font-size:10px}
.split-leaf{width:300px;left:47%;bottom:-82px;opacity:.22}
.split-drop{width:96px;opacity:.16}

/* Video folds — smooth scrub, poster fallback, compact typography */
.video-fold{height:188svh;background:#031521}
.video-sticky{height:100svh;background:#061723}
.video-shell{isolation:isolate}
.scrub-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0);backface-visibility:hidden;will-change:contents,transform;background:#061723;opacity:.985}
.video-load{position:absolute;inset:0;z-index:2;pointer-events:none;background:transparent;display:grid;place-items:center;opacity:1;transition:opacity .45s}
.video-load span{width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-top-color:rgba(45,216,198,.74);border-radius:50%;animation:vspin .9s linear infinite}
.video-ready .video-load{opacity:0}
.video-error .video-load{display:none}
@keyframes vspin{to{transform:rotate(360deg)}}
.video-vignette{z-index:3;background:linear-gradient(90deg,rgba(2,14,24,.72),rgba(2,14,24,.10) 62%,rgba(2,14,24,.23)),linear-gradient(0deg,rgba(2,14,24,.42),transparent 46%)}
.video-foreground{z-index:4;right:-8vw;top:-8vh;width:31vw;opacity:.30}
.video-copy{z-index:5;left:max(5vw,calc((100vw - 1120px)/2));bottom:9vh;max-width:540px}
.video-copy h2,.operation-panel h2{font-size:clamp(42px,4.6vw,64px);line-height:.95;letter-spacing:-.04em}
.video-copy p{font-size:14.5px;line-height:1.65;max-width:470px;margin-top:14px}
.operation-panel{left:max(5vw,calc((100vw - 1120px)/2));bottom:8vh;max-width:500px;border-radius:24px;padding:24px 25px}
.operation-panel h2{font-size:clamp(38px,4.1vw,58px)}
.operation-panel ul{font-size:12.5px;gap:7px;margin-top:18px}

/* Services: vertical editorial list, not a wall of cards */
.services{padding:92px 0 104px;min-height:auto}
.services-layout{grid-template-columns:.72fr 1.28fr;gap:72px}
.services-intro{top:110px}
.services-intro h2{font-size:clamp(40px,4.4vw,59px);line-height:.98}
.services-intro p{font-size:14px;line-height:1.65;max-width:390px}
.service-row{grid-template-columns:42px 1fr 28px;gap:14px;padding:24px 0}
.service-row h3{font-size:clamp(25px,2.3vw,31px);line-height:1.05;margin-bottom:8px}
.service-row p{font-size:13.5px;line-height:1.6;max-width:570px}
.row-arrow{font-size:20px;color:#197b69}.service-index{font-size:10px}

/* Dark water story: water first, forest atmospheric */
.water-story{min-height:82svh}
.water-grid{grid-template-columns:1.06fr .94fr;gap:56px}
.water-copy h2{font-size:clamp(43px,4.8vw,66px);line-height:.96}
.water-copy p{font-size:14.5px;line-height:1.67;max-width:530px}
.water-data{border-radius:23px;padding:8px 20px;max-width:440px;justify-self:end;width:100%}
.water-data div{padding:15px 0}.water-data strong{font-size:32px}.water-data span{font-size:11.5px}

/* About / story: more compact, more editorial */
.about{min-height:76svh;grid-template-columns:49% 51%}
.about-white{padding:8vh 7vw 8vh 6vw}
.about-white h2{font-size:clamp(42px,4.6vw,62px);line-height:.97}
.about-white p{font-size:14px;line-height:1.7;max-width:540px}
.text-link{font-size:11.5px}

/* Cases: typography + pills, not cards */
.cases{padding:88px 0;background:#f6f9f8}
.cases-wrap{gap:28px}
.big-quote{font-size:clamp(43px,5vw,67px);line-height:.97;max-width:860px}
.case-line span{font-size:10.5px;padding:9px 12px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px)}

/* Gallery is a visual breath, not a card wall */
.gallery-strip{padding:90px 0 98px}
.gallery-head{grid-template-columns:.28fr 1fr;gap:30px}
.gallery-head h2{font-size:clamp(42px,4.8vw,64px);line-height:.97;max-width:780px}
.gallery-grid{gap:11px;margin-top:34px}.gallery-grid figure{min-height:360px;border-radius:20px}.gallery-grid figcaption{font-size:9.5px}

/* FAQ / contact compact */
.faq{padding:100px 0;min-height:auto}
.faq-grid{grid-template-columns:.72fr 1.28fr;gap:64px}
.faq-grid h2{font-size:clamp(42px,4.6vw,62px);line-height:.97}
.faq details{border-radius:18px;padding:16px 18px}.faq summary{font-size:13px}.faq details p{font-size:12.5px}
.contact{padding:92px 0}
.contact-grid{grid-template-columns:.72fr 1.28fr;gap:54px}
.contact-copy h2{font-size:clamp(42px,4.6vw,62px);line-height:.98}.contact-copy p{font-size:14px}
.form-card{border-radius:24px;padding:24px}.form-grid{gap:11px}.form-grid input,.form-grid textarea{padding:11px 12px;border-radius:12px}

/* Footer and floating controls */
.site-footer{padding:62px 0 22px}.footer-top{gap:28px}.footer-brand p{font-size:12px;line-height:1.6}.footer-top a{font-size:12px}.footer-bottom{margin-top:38px}
.wa-float{height:52px;padding:0 10px 0 15px;color:#fff;background:linear-gradient(135deg,rgba(18,116,79,.72),rgba(8,76,78,.62));box-shadow:0 12px 36px rgba(8,70,65,.25),0 0 0 0 rgba(48,214,115,.0);animation:pulseGlass 2.4s infinite}
.wa-float b{width:34px;height:34px;background:rgba(48,214,115,.16);color:#9af2bf}
@keyframes pulseGlass{50%{box-shadow:0 14px 40px rgba(8,70,65,.30),0 0 0 9px rgba(48,214,115,.055)}}
.top-float,.sound-toggle{background:rgba(4,35,50,.66)}

/* organic overlays: sparse and subtle */
.falling-leaf{opacity:.13;filter:blur(.5px)}
.falling-drop{opacity:.12}

/* Tablet */
@media(max-width:980px){
  .wrap{width:min(100% - 36px,1120px)}
  .site-header{width:calc(100% - 24px)}
  .nav{top:74px;border-radius:18px;background:rgba(3,29,48,.90)}
  .hero{min-height:84svh}.hero-grid{grid-template-columns:1fr;padding-top:86px;padding-bottom:46px}.hero-trust{justify-self:start}
  .editorial-split{grid-template-columns:1fr;min-height:auto}.white-inner{width:min(600px,calc(100% - 40px));padding:74px 0}.split-visual{height:58svh}
  .services-layout{grid-template-columns:1fr;gap:42px}.services-intro{position:relative;top:auto;max-width:620px}
  .water-grid,.faq-grid,.contact-grid{grid-template-columns:1fr}.water-data{justify-self:start}.about{grid-template-columns:1fr}.about-image{height:50svh}.about-white{padding:72px 28px}
  .footer-top{grid-template-columns:1fr 1fr}
}

/* Mobile */
@media(max-width:700px){
  .wrap{width:calc(100% - 28px)}
  .site-header{top:10px;height:58px;border-radius:16px;padding-left:14px}.brand img{width:min(var(--header-logo-width),112px)}
  .nav{top:68px;left:0;right:0;padding:8px}.nav a{font-size:12px;padding:12px 11px}
  .hero{min-height:82svh}.hero-grid{padding-top:78px;padding-bottom:40px}.hero-copy{max-width:100%}
  .hero h1{font-size:clamp(39px,11vw,49px);line-height:.96}.hero p{font-size:14px;line-height:1.58;margin-top:16px}.hero-trust{display:none}.actions{margin-top:20px}.btn{min-height:43px;padding:0 14px;font-size:11.5px}
  .asset-branch{width:110vw;right:-70vw;opacity:.24}.asset-leaf-right{width:80vw;right:-43vw;opacity:.23}
  .white-inner{padding:62px 0}.white-inner h2{font-size:clamp(38px,10.2vw,48px)}.white-inner p{font-size:13.5px}.split-visual{height:54svh}.split-copy{right:18px;bottom:24px}.split-copy strong{font-size:31px}
  .video-fold{height:170svh}.video-copy{left:18px;right:18px;bottom:7vh}.video-copy h2,.operation-panel h2{font-size:clamp(38px,10vw,48px)}.video-copy p{font-size:13px}.video-foreground{width:78vw;right:-43vw;top:-2vh;opacity:.23}.operation-panel{left:16px;right:16px;bottom:6vh;padding:20px;border-radius:20px}.operation-panel ul{font-size:11.5px}
  .services{padding:70px 0 76px}.services-intro h2{font-size:clamp(38px,10vw,47px)}.service-row{grid-template-columns:32px 1fr 22px;padding:20px 0}.service-row h3{font-size:25px}.service-row p{font-size:12.5px}
  .water-story{min-height:76svh}.water-copy h2,.about-white h2,.faq-grid h2,.contact-copy h2{font-size:clamp(38px,10vw,48px)}.water-copy p,.about-white p{font-size:13px}.water-data strong{font-size:28px}
  .about-image{height:46svh}.about-white{padding:62px 20px}.cases{padding:68px 0}.big-quote{font-size:clamp(38px,10vw,49px)}
  .gallery-strip{padding:70px 0}.gallery-head{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr;gap:9px}.gallery-grid figure{min-height:64vw;border-radius:17px}
  .faq{padding:76px 0}.faq-grid{gap:34px}.contact{padding:72px 0}.contact-grid{gap:36px}.form-card{padding:18px;border-radius:20px}
  .footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column}
  .wa-float span{display:none}.wa-float{width:50px;padding:0;justify-content:center}.wa-float b{background:transparent}.top-float{width:46px;height:46px}
}

@media(prefers-reduced-motion:reduce){.video-load span{animation:none}.parallax-layer{transform:none!important;filter:none!important}}

/* v3.1 — organic motion visibility + mobile polish */
.falling-leaf{
  z-index:760;
  opacity:var(--leafOpacity,.30);
  filter:blur(var(--leafBlur,.35px)) drop-shadow(0 8px 16px rgba(0,38,27,.10));
  will-change:transform,opacity;
  animation-timing-function:cubic-bezier(.28,.12,.52,.92);
}
@keyframes leafDrop{
  0%{transform:translate3d(var(--startX),-14vh,0) rotate(-18deg) scale(.84);opacity:0}
  8%{opacity:var(--leafOpacity,.30)}
  42%{transform:translate3d(calc(var(--startX) + var(--drift)*.42),42vh,0) rotate(calc(var(--rot)*.42)) scale(.96)}
  74%{transform:translate3d(calc(var(--startX) + var(--drift)*.76),78vh,0) rotate(calc(var(--rot)*.76)) scale(1.02)}
  92%{opacity:calc(var(--leafOpacity,.30)*.72)}
  100%{transform:translate3d(calc(var(--startX) + var(--drift)),114vh,0) rotate(var(--rot)) scale(.95);opacity:0}
}
.falling-drop{
  z-index:750;
  opacity:var(--dropOpacity,.24);
  filter:drop-shadow(0 0 10px rgba(104,226,255,.22));
  will-change:transform,opacity;
}
@keyframes dropFall{
  0%{transform:translate3d(0,-4vh,0) scale(.72);opacity:0}
  10%{opacity:var(--dropOpacity,.24)}
  50%{transform:translate3d(5px,50vh,0) scale(.94);opacity:var(--dropOpacity,.24)}
  86%{opacity:calc(var(--dropOpacity,.24)*.72)}
  100%{transform:translate3d(12px,114vh,0) scale(1.08);opacity:0}
}

/* Mobile keeps the atmosphere but avoids covering copy and decoding two sources. */
@media(max-width:700px){
  .falling-leaf{max-width:48px;opacity:var(--leafOpacity,.27)}
  .falling-drop{max-width:30px;opacity:var(--dropOpacity,.20)}
  .asset-branch{opacity:.27;right:-64vw;top:-3vh;filter:blur(4px)}
  .asset-leaf-right{opacity:.25;filter:blur(7px)}
  .asset-mist{opacity:.36}
  .video-foreground{opacity:.27;filter:blur(7px)}
  .parallax-layer{transform:translate3d(0,var(--sy,0px),0) scale(var(--scale,1.075));}
  .scrub-video{transform:translateZ(0);will-change:transform;}
}

/* v3.4 — corrected side foliage assets + softer header */
:root{
  --header-glass-1:rgba(7,54,113,.60);
  --header-glass-2:rgba(20,109,162,.60);
  --header-glass-open-1:rgba(6,44,96,.92);
  --header-glass-open-2:rgba(15,92,141,.90);
}

.site-header{
  background:linear-gradient(90deg,var(--header-glass-1),var(--header-glass-2));
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
}
.nav a{color:rgba(255,255,255,.9)}
.glass-cta,.btn-solid,.btn-glass{
  background:linear-gradient(135deg,rgba(16,92,171,.28),rgba(47,174,233,.18));
  border-color:rgba(167,222,255,.28);
  box-shadow:0 10px 28px rgba(4,34,61,.18),inset 0 1px 0 rgba(255,255,255,.14),0 0 18px rgba(90,181,255,.08);
}
.glass-cta:hover,.btn-solid:hover,.btn-glass:hover{
  background:linear-gradient(135deg,rgba(16,92,171,.36),rgba(47,174,233,.24));
}
.hero-trust,.operation-panel,.glass-card{
  background:linear-gradient(135deg,rgba(7,39,63,.54),rgba(16,86,118,.34));
  border-color:rgba(255,255,255,.16);
}
.wa-float{
  background:linear-gradient(135deg,rgba(11,88,145,.56),rgba(46,167,205,.30));
  border-color:rgba(180,236,255,.28);
  box-shadow:0 14px 40px rgba(7,47,83,.20),0 0 0 0 rgba(83,201,255,0);
}
.wa-float b{background:rgba(255,255,255,.10);color:#d8f6ff}
@keyframes pulseGlass{50%{box-shadow:0 14px 42px rgba(7,47,83,.24),0 0 0 10px rgba(83,201,255,.08)}}
.sound-toggle,.top-float{background:linear-gradient(135deg,rgba(11,61,100,.80),rgba(20,98,152,.60))}
.cookie-banner{
  background:linear-gradient(135deg,rgba(6,37,65,.88),rgba(10,70,101,.84));
}
.cookie-actions button,.cookie-actions a{
  background:linear-gradient(135deg,rgba(16,92,171,.22),rgba(47,174,233,.14));
  border-color:rgba(167,222,255,.22);
}
.cookie-actions .accept{background:linear-gradient(135deg,rgba(16,92,171,.72),rgba(47,174,233,.62));color:#fff}

/* Dedicated lateral assets: fixed, subtle, never full overlay */
.site-side-assets{position:fixed;inset:0;z-index:18;pointer-events:none;overflow:hidden}
.side-vine{position:absolute;display:block;will-change:transform,opacity;mix-blend-mode:normal;}
.side-vine-left{
  left:-14px;top:92px;width:min(7.8vw,128px);opacity:.20;filter:blur(1.8px) saturate(.95);
  transform:translate3d(calc(var(--mx,0)*-10px),calc(var(--scrollY,0px)*.04),0);
}
.side-vine-right{
  right:-8px;top:132px;width:min(14vw,240px);opacity:.17;filter:blur(3.5px) saturate(1.02);
  transform:translate3d(calc(var(--mx,0)*8px),calc(var(--scrollY,0px)*.025),0);
}
.side-vine-bottom{
  left:-26px;bottom:6vh;width:min(19vw,300px);opacity:.10;filter:blur(6px) saturate(.9);
  transform:translate3d(calc(var(--mx,0)*-8px),calc(var(--scrollY,0px)*-.018),0);
}

/* Pull sectional foliage back so it acts as foreground accent, not overlay */
.asset{pointer-events:none}
.asset-branch{right:-24vw;top:-5vh;width:min(22vw,340px);opacity:.14;filter:blur(3.5px)}
.asset-leaf-right{right:-7vw;top:6vh;width:min(14vw,220px);opacity:.14;filter:blur(4px)}
.asset-mist{opacity:.18}
.split-leaf{left:auto;right:-6vw;bottom:-5vh;width:min(18vw,240px);opacity:.10;filter:blur(5px)}
.split-drop{right:8%;left:auto;bottom:10%;width:56px;opacity:.10}
.service-leaf{right:-18px;top:60px;width:min(14vw,220px);opacity:.12;filter:blur(4px)}
.video-foreground{right:-10vw;top:8vh;width:min(15vw,230px);opacity:.12;filter:blur(5px)}
.water-leaf{right:-24px;bottom:10%;width:min(16vw,240px);opacity:.12;filter:blur(4px)}

/* Keep white sections clean; nature only on margins */
.services,.gallery-strip,.cases,.contact,.about,.editorial-split{overflow:hidden}
.services:before,.editorial-split:before,.cases:before,.gallery-strip:before,.contact:before,.about:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
}
.services > .wrap,.editorial-split > *,.cases > .wrap,.gallery-strip > .wrap,.contact > .wrap,.about > *{position:relative;z-index:1}
.white-panel{background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 73%,rgba(255,255,255,.82) 88%,rgba(255,255,255,.18) 100%)}
.white-panel:after{background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,.32) 85%,rgba(255,255,255,0));width:150px;right:-75px}

/* Mobile menu should be readable */
@media(max-width:980px){
  .site-header.open{background:linear-gradient(135deg,var(--header-glass-open-1),var(--header-glass-open-2));}
  .nav{
    background:linear-gradient(180deg,rgba(6,45,94,.95),rgba(10,67,120,.93));
    backdrop-filter:blur(26px) saturate(145%);
    -webkit-backdrop-filter:blur(26px) saturate(145%);
    box-shadow:0 24px 54px rgba(0,19,38,.26);
    border-color:rgba(255,255,255,.18);
  }
}
@media(max-width:700px){
  .site-header{background:linear-gradient(90deg,rgba(7,54,113,.70),rgba(20,109,162,.64));}
  .nav{top:72px;padding:10px 10px 12px;background:linear-gradient(180deg,rgba(6,45,94,.96),rgba(10,67,120,.95));}
  .nav a{font-size:13px;padding:14px 12px;color:rgba(255,255,255,.94)}
  .site-side-assets{z-index:12}
  .side-vine-left{top:86px;left:-18px;width:86px;opacity:.11;filter:blur(2.4px)}
  .side-vine-right{top:118px;right:-10px;width:120px;opacity:.10;filter:blur(4px)}
  .side-vine-bottom{display:none}
  .asset-branch{right:-32vw;top:3vh;width:42vw;opacity:.09;filter:blur(4px)}
  .asset-leaf-right{right:-10vw;top:8vh;width:26vw;opacity:.09;filter:blur(5px)}
  .split-leaf,.service-leaf,.water-leaf,.video-foreground{opacity:.08}
  .video-foreground{right:-14vw;top:12vh;width:22vw}
  .operation-panel{backdrop-filter:blur(22px) saturate(135%)}
  .wa-float{background:linear-gradient(135deg,rgba(11,88,145,.64),rgba(46,167,205,.36))}
}

/* v3.5 — more subtle spread foliage + water atmosphere */
.site-side-assets::before,
.site-side-assets::after{
  content:"";position:absolute;pointer-events:none;display:block;
}
.site-side-assets::before{
  left:-8vw;top:18vh;width:22vw;height:62vh;
  background:radial-gradient(ellipse at center, rgba(116,196,221,.10) 0%, rgba(116,196,221,.05) 28%, rgba(116,196,221,0) 72%);
  filter:blur(34px);
  opacity:.42;
}
.site-side-assets::after{
  right:-6vw;bottom:12vh;width:18vw;height:42vh;
  background:radial-gradient(ellipse at center, rgba(64,171,228,.12) 0%, rgba(64,171,228,.05) 34%, rgba(64,171,228,0) 72%);
  filter:blur(28px);
  opacity:.34;
}
.side-vine{
  animation:sideFloat 14s ease-in-out infinite alternate;
}
.side-vine-left{
  left:-16px;top:92px;width:min(8.2vw,136px);opacity:.17;filter:blur(2.1px) saturate(.96);
  transform:translate3d(calc(var(--mx,0)*-10px),calc(var(--scrollY,0px)*.038),0);
  animation-delay:-1.8s;
}
.side-vine-left-mid{
  left:-10px;top:42vh;width:min(6.6vw,108px);opacity:.11;filter:blur(3.8px) saturate(.94);
  transform:translate3d(calc(var(--mx,0)*-7px),calc(var(--scrollY,0px)*.022),0) scale(.92);
  animation-duration:16s;animation-delay:-5.2s;
}
.side-vine-right{
  right:-8px;top:130px;width:min(13vw,220px);opacity:.15;filter:blur(4px) saturate(1.02);
  transform:translate3d(calc(var(--mx,0)*8px),calc(var(--scrollY,0px)*.024),0);
  animation-delay:-3.4s;
}
.side-vine-right-low{
  right:-18px;top:64vh;width:min(10vw,160px);opacity:.09;filter:blur(5.6px) saturate(.98);
  transform:translate3d(calc(var(--mx,0)*6px),calc(var(--scrollY,0px)*-.018),0) scale(.88);
  animation-duration:18s;animation-delay:-8.6s;
}
.side-vine-bottom{
  left:-30px;bottom:4vh;width:min(20vw,310px);opacity:.08;filter:blur(7px) saturate(.92);
  transform:translate3d(calc(var(--mx,0)*-8px),calc(var(--scrollY,0px)*-.016),0);
  animation-duration:20s;animation-delay:-9s;
}
.side-drop-side{
  right:2.6vw;top:36vh;width:min(1.6vw,22px);opacity:.12;filter:blur(.4px) drop-shadow(0 0 16px rgba(110,223,255,.28));
  transform:translate3d(0,calc(var(--scrollY,0px)*.05),0);
  animation:dropShimmer 8s ease-in-out infinite alternate;
}
@keyframes sideFloat{
  0%{margin-top:0;opacity:inherit}
  100%{margin-top:10px;opacity:inherit}
}
@keyframes dropShimmer{
  0%{opacity:.06;margin-top:0}
  100%{opacity:.16;margin-top:14px}
}

/* Further reduce the chance of full-image overlays inside content sections */
.asset-branch,.asset-leaf-right,.split-leaf,.service-leaf,.video-foreground,.water-leaf{mix-blend-mode:normal;}
.white-panel .white-inner,
.services .wrap,
.about .about-white,
.contact .contact-grid,
.gallery-strip .wrap,
.cases .wrap,
.faq .wrap{position:relative;z-index:2}

/* Very subtle mist/water texture on section edges */
.scene-light::before{
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,.02)),
    radial-gradient(circle at 0% 50%, rgba(162,216,234,.10), rgba(162,216,234,0) 26%),
    radial-gradient(circle at 100% 30%, rgba(178,233,245,.08), rgba(178,233,245,0) 24%);
  opacity:.75;
}

@media(max-width:980px){
  .side-vine-left{width:110px;opacity:.13}
  .side-vine-left-mid{width:92px;opacity:.09}
  .side-vine-right{width:170px;opacity:.12}
  .side-vine-right-low{width:128px;opacity:.08}
  .side-drop-side{top:42vh;right:1.8vw;opacity:.10}
}
@media(max-width:700px){
  .site-side-assets::before{left:-16vw;top:14vh;width:40vw;height:42vh;opacity:.28;filter:blur(26px)}
  .site-side-assets::after{right:-16vw;bottom:10vh;width:34vw;height:30vh;opacity:.22;filter:blur(24px)}
  .side-vine-left{top:88px;left:-18px;width:82px;opacity:.10;filter:blur(2.8px)}
  .side-vine-left-mid{display:none}
  .side-vine-right{top:112px;right:-12px;width:108px;opacity:.09;filter:blur(4.4px)}
  .side-vine-right-low{right:-16px;top:72vh;width:98px;opacity:.06;filter:blur(6px)}
  .side-vine-bottom{display:none}
  .side-drop-side{right:4vw;top:48vh;width:16px;opacity:.08}
}

/* v3.6 — mobile foliage distribution + delayed operation card + lighter header glass */
:root{
  --header-glass-1:rgba(7,54,113,.48);
  --header-glass-2:rgba(20,109,162,.46);
}
.site-header{
  background:linear-gradient(90deg,var(--header-glass-1),var(--header-glass-2));
  backdrop-filter:blur(30px) saturate(138%);
  -webkit-backdrop-filter:blur(30px) saturate(138%);
}

/* More foliage points spread across the viewport — still side-only */
.side-vine-left-low{
  left:-26px;top:70vh;width:min(11vw,170px);opacity:.08;filter:blur(6px) saturate(.9);
  transform:translate3d(calc(var(--mx,0)*-6px),calc(var(--scrollY,0px)*-.012),0) scale(.86);
  animation-duration:19s;animation-delay:-10s;
}
.side-vine-right-mid{
  right:-34px;top:39vh;width:min(8vw,128px);opacity:.10;filter:blur(3.2px) saturate(.95);
  transform:scaleX(-1) translate3d(calc(var(--mx,0)*-5px),calc(var(--scrollY,0px)*.012),0);
  animation-duration:17s;animation-delay:-6s;
}

/* Operation panel stays hidden until the truck animation is complete */
.operation-panel{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.985);
  pointer-events:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.video-complete .operation-panel{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  pointer-events:auto;
}

@media(max-width:980px){
  .site-header{
    background:linear-gradient(90deg,rgba(7,54,113,.54),rgba(20,109,162,.50));
  }
  /* open menu remains much more opaque for legibility */
  .site-header.open{background:linear-gradient(135deg,rgba(6,44,96,.90),rgba(15,92,141,.88));}
  .nav{background:linear-gradient(180deg,rgba(6,45,94,.95),rgba(10,67,120,.94));}
}

@media(max-width:700px){
  .site-header{
    background:linear-gradient(90deg,rgba(7,54,113,.56),rgba(20,109,162,.50));
    backdrop-filter:blur(28px) saturate(138%);
    -webkit-backdrop-filter:blur(28px) saturate(138%);
  }
  /* distribute foliage from top to bottom of the viewport */
  .site-side-assets{z-index:12}
  .side-vine-left{top:7vh;left:-24px;width:78px;opacity:.09;filter:blur(2.8px)}
  .side-vine-left-mid{display:block;left:-28px;top:36vh;width:72px;opacity:.07;filter:blur(4px)}
  .side-vine-left-low{display:block;left:-30px;top:73vh;width:92px;opacity:.055;filter:blur(6.5px)}
  .side-vine-right{top:12vh;right:-18px;width:102px;opacity:.075;filter:blur(4.8px)}
  .side-vine-right-mid{display:block;right:-24px;top:43vh;width:74px;opacity:.06;filter:blur(3.8px)}
  .side-vine-right-low{right:-22px;top:75vh;width:96px;opacity:.055;filter:blur(6.4px)}
  .side-vine-bottom{display:block;left:-34px;bottom:-34px;width:118px;opacity:.05;filter:blur(8px)}
  .side-drop-side{right:5vw;top:60vh;width:15px;opacity:.065}

  /* Keep the truck unobstructed while it moves */
  #estrutura .operation-panel{
    left:18px;right:18px;bottom:4.5vh;
    max-width:none;
    opacity:0;
    transform:translate3d(0,28px,0) scale(.985);
  }
  #estrutura.video-complete .operation-panel{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  /* make the card a little more compact on phones */
  #estrutura .operation-panel h2{font-size:clamp(34px,9.3vw,44px);line-height:.96}
  #estrutura .operation-panel ul{font-size:11px;gap:6px;margin-top:15px}
}

/* v3.7 — true layered parallax, mobile continuity, stronger centered navigation */
@media(min-width:981px){
  .site-header{position:fixed}
  .nav{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    gap:24px;
  }
  .nav a{
    font-size:13.8px;
    font-weight:650;
    letter-spacing:-.01em;
    padding:10px 4px;
  }
}

/* Text/content is its own parallax plane */
.parallax-copy{
  --copy-x:0px;
  --copy-y:0px;
  translate:var(--copy-x) var(--copy-y);
  will-change:translate;
}

/* Mid-layer atmosphere between background and text */
.scene-atmosphere{
  position:absolute;
  inset:0;
  z-index:4;
  overflow:hidden;
  pointer-events:none;
}
.scene-particle{
  position:absolute;
  left:var(--particle-left,50%);
  top:var(--particle-top,50%);
  width:var(--particle-size,34px);
  opacity:var(--particle-opacity,.12);
  filter:blur(var(--particle-blur,0px)) drop-shadow(0 8px 18px rgba(0,34,55,.08));
  transform:translate3d(var(--particle-x,0px),var(--particle-y,0px),0) rotate(var(--particle-rot,0deg));
  transform-origin:center;
  will-change:transform,opacity;
}
.scene-particle img{
  display:block;
  width:100%;
  height:auto;
  animation:particleSway var(--particle-duration,11s) ease-in-out infinite alternate;
}
.scene-particle.is-drop{
  filter:blur(var(--particle-blur,0px)) drop-shadow(0 0 12px rgba(114,225,255,.24));
}
.scene-particle.is-foreground{
  z-index:7;
  opacity:var(--particle-opacity,.075);
  filter:blur(var(--particle-blur,5px));
}
@keyframes particleSway{
  0%{transform:translate3d(-4px,-5px,0) rotate(-4deg)}
  50%{transform:translate3d(4px,5px,0) rotate(4deg)}
  100%{transform:translate3d(-2px,9px,0) rotate(-2deg)}
}

/* Ensure copy stays above mid-atmosphere */
.hero-copy,.hero-trust,.white-inner,.split-copy,.video-copy,.operation-panel,
.services .wrap,.water-grid,.about-white,.cases-wrap,.gallery-strip .wrap,
.faq-grid,.contact-grid{position:relative;z-index:6}

/* Seamless joins between cinematic folds */
.editorial-split,.video-fold{margin:0;padding-top:0;padding-bottom:0}
.editorial-split + .video-fold{margin-top:-1px}
.split-visual{margin:0}

/* Truck card: appear only when the animation is truly finished */
#estrutura .operation-panel{transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}

/* Mobile: no white separator and more obvious layered parallax */
@media(max-width:700px){
  .editorial-split{
    display:flex!important;
    flex-direction:column;
    gap:0!important;
    min-height:0!important;
    height:auto!important;
    background:transparent!important;
  }
  .white-panel,.split-visual{margin:0!important}
  .split-visual{height:58svh!important;min-height:58svh!important}
  .editorial-split + .video-fold{margin-top:-1px!important}

  .scene-atmosphere{overflow:hidden}
  .scene-particle{max-width:46px}
  .scene-particle.is-foreground{max-width:70px}

  /* At the end of the truck animation the video lifts, giving the card its own zone. */
  #estrutura .scrub-video,
  #estrutura .video-vignette.operation{
    transition:height .72s cubic-bezier(.22,1,.36,1),filter .6s ease;
  }
  #estrutura.video-complete .scrub-video,
  #estrutura.video-complete .video-vignette.operation{
    height:72svh;
  }
  #estrutura.video-complete .video-sticky{
    background:linear-gradient(180deg,#061723 0%,#061723 69%,#08273a 100%);
  }
  #estrutura .operation-panel{
    left:16px;
    right:16px;
    bottom:2.2vh;
    max-width:none;
    padding:18px 18px 17px;
    border-radius:21px;
    background:linear-gradient(135deg,rgba(9,52,84,.86),rgba(21,107,148,.66));
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    box-shadow:0 14px 42px rgba(0,23,42,.22),inset 0 1px 0 rgba(255,255,255,.11);
  }
  #estrutura.video-complete .operation-panel{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  #estrutura .operation-panel h2{font-size:clamp(31px,8.5vw,39px);line-height:.97}
  #estrutura .operation-panel ul{font-size:10.8px;line-height:1.42;gap:5px;margin-top:13px}

  /* Increase visual separation between layers on phones without clutter. */
  .parallax-copy{will-change:translate}
  .video-copy,.split-copy{z-index:6}
}

@media(prefers-reduced-motion:reduce){
  .scene-particle img{animation:none}
  .parallax-copy{translate:none!important}
}

/* v3.8 — final layout corrections, stronger parallax, pills and desktop/mobile polish */
@media(min-width:981px){
  .hero-grid{padding-top:148px;padding-bottom:72px;align-items:center}
  .hero-copy{max-width:690px}
  .editorial-split{
    height:clamp(600px,72svh,730px);
    min-height:0;
    align-items:stretch;
    grid-template-rows:1fr;
  }
  .editorial-split>.white-panel,
  .editorial-split>.split-visual{height:100%;min-height:0;align-self:stretch}
  .white-inner{padding:58px 22px}
  .split-copy{right:7%;bottom:8%;max-width:330px}
  #experiencia .video-copy{left:max(6vw,calc((100vw - 1120px)/2));right:auto;top:auto!important;bottom:8.5vh;max-width:520px}
  #estrutura .operation-panel{left:max(5vw,calc((100vw - 1120px)/2));bottom:6.5vh;max-width:455px;padding:22px 24px}
  #estrutura .operation-panel h2{font-size:clamp(36px,3.7vw,52px)}
  #estrutura .operation-panel ul{font-size:12px;gap:6px;margin-top:16px}
}

/* stronger visual depth for image-only backgrounds */
.scene-bg,.split-bg,.about-bg,.faq-bg,.contact-water,.hero-slide{
  inset:-11%;
  --scale:1.16;
  will-change:transform,filter;
}
.about-image,.split-visual,.faq,.water-story{isolation:isolate}

/* Keep first video copy safely inside the viewport */
#experiencia .video-copy{top:auto!important}
#experiencia .video-copy h2{max-width:560px;text-wrap:balance}

/* Floating translucent pills */
.floating-pill{
  position:absolute;
  z-index:6;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 13px;
  border-radius:999px;
  color:rgba(255,255,255,.92);
  font:650 10.5px/1 var(--font-ui);
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid rgba(182,230,255,.22);
  background:linear-gradient(135deg,rgba(7,65,121,.32),rgba(45,166,211,.18));
  backdrop-filter:blur(14px) saturate(128%);
  -webkit-backdrop-filter:blur(14px) saturate(128%);
  box-shadow:0 10px 30px rgba(0,27,52,.13),inset 0 1px 0 rgba(255,255,255,.10);
  transform:translate3d(0,0,0);
  animation:pillFloat var(--pill-duration,9s) cubic-bezier(.45,.05,.55,.95) var(--pill-delay,0s) infinite alternate;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  pointer-events:none;
  white-space:nowrap;
}
@keyframes pillFloat{
  0%{transform:translate3d(0,-4px,0) rotate(-.15deg)}
  50%{transform:translate3d(calc(var(--pill-dx,5px)*.45),calc(var(--pill-dy,8px)*.45),0) rotate(.12deg)}
  100%{transform:translate3d(var(--pill-dx,5px),var(--pill-dy,8px),0) rotate(.22deg)}
}
.scene-light .floating-pill{color:#0a4a67;background:linear-gradient(135deg,rgba(220,244,255,.72),rgba(185,226,243,.38));border-color:rgba(27,125,167,.16)}

/* Prevent atmospheric details from ever creating full-content overlays */
.scene-atmosphere{z-index:3}
.scene-particle{z-index:3}
.scene-particle.is-foreground{z-index:5}
.hero-copy,.hero-trust,.white-inner,.split-copy,.video-copy,.operation-panel,
.services .wrap,.water-grid,.about-white,.cases-wrap,.gallery-strip .wrap,.faq-grid,.contact-grid{z-index:7}

/* Seamless editorial split: no white void below the image */
.editorial-split{background:#fff}
.split-visual{align-self:stretch;min-height:0}
.split-bg{bottom:-11%}

/* Background images should visibly move while white panels stay stable */
.water-story .scene-bg{--scale:1.18}
.about-bg{--scale:1.18}
.faq-bg{--scale:1.18}
.about-white{transform:none!important;translate:none!important}

/* Truck card stays clear of the truck and arrives only at the end */
#estrutura .operation-panel{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.985);
}
#estrutura.video-complete .operation-panel{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

@media(max-width:980px){
  .hero-grid{padding-top:108px}
  .editorial-split{height:auto;min-height:0}
  #experiencia .video-copy{top:auto!important;bottom:7vh}
  .floating-pill{font-size:9.5px;min-height:31px;padding:0 11px}
}

@media(max-width:700px){
  .hero-grid{padding-top:96px!important}
  .editorial-split{height:auto!important;min-height:0!important}
  .white-panel{min-height:0!important}
  .white-inner{padding:54px 0 48px!important}
  .split-visual{height:54svh!important;min-height:54svh!important}
  .split-copy{bottom:20px;right:16px;max-width:78vw}
  .split-copy strong{font-size:30px;line-height:.98}
  .editorial-split + .video-fold{margin-top:-2px!important}

  #experiencia .video-copy{left:18px;right:18px;bottom:6.5vh;top:auto!important;max-width:none}
  #experiencia .video-copy h2{font-size:clamp(35px,9.4vw,44px);max-width:92%}
  #experiencia .video-copy p{max-width:88%;font-size:12.6px}

  /* mobile truck: video remains unobstructed; card lives in its own lower zone */
  #estrutura.video-complete .scrub-video,
  #estrutura.video-complete .video-vignette.operation{height:68svh}
  #estrutura.video-complete .video-sticky{background:linear-gradient(180deg,#061723 0%,#061723 64%,#08273a 100%)}
  #estrutura .operation-panel{left:14px;right:14px;bottom:1.5vh;padding:16px 17px 15px}
  #estrutura .operation-panel h2{font-size:clamp(29px,8vw,37px)}
  #estrutura .operation-panel ul{font-size:10.5px}

  .floating-pill{font-size:8.8px;min-height:29px;padding:0 10px;opacity:.88}
  .scene-particle{max-width:40px}
  .scene-particle.is-foreground{max-width:62px}
  .scene-bg,.split-bg,.about-bg,.faq-bg,.contact-water,.hero-slide{inset:-13%;--scale:1.18}
}

/* v3.9 — performance pass + cleanup of cinematic folds */
/* The first logo video is intentionally clean: no copy overlay. */
#experiencia .video-copy,
.editorial-split .split-copy{display:none!important}

/* Full-screen backgrounds move, but never receive dynamic blur. This avoids costly GPU repainting. */
.scene-bg,.split-bg,.about-bg,.faq-bg,.contact-water,.hero-slide{
  filter:none!important;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:auto;
  contain:paint;
}
.scene-active .scene-bg,
.scene-active .split-bg,
.scene-active .about-bg,
.scene-active .faq-bg,
.scene-active .contact-water,
.scene-active .hero-slide{will-change:transform}

/* Small foreground assets may remain blurred; keep the blur restrained. */
.asset-branch,.asset-leaf-right,.split-leaf,.service-leaf,.video-foreground,.water-leaf{
  will-change:auto;
}
.scene-active .asset-branch,
.scene-active .asset-leaf-right,
.scene-active .split-leaf,
.scene-active .service-leaf,
.scene-active .video-foreground,
.scene-active .water-leaf{will-change:transform}

/* Pause decorative animations while their section is far off screen. */
[data-scene]:not(.scene-active) .scene-particle img,
[data-scene]:not(.scene-active) .floating-pill{animation-play-state:paused!important}

/* Keep the water-treatment / supply scene visibly parallax without moving its copy excessively. */
.water-story .scene-bg{--scale:1.15}
.water-story .water-copy,.water-story .water-data{translate:0 0!important}
.about .about-white{translate:0 0!important}
.faq .faq-grid{translate:0 0!important}

/* Clean joins after removing legacy copy: no text can leak across the section boundary. */
.editorial-split,.video-fold{overflow:hidden}
.editorial-split{z-index:1}
#experiencia{z-index:2}
#experiencia .video-sticky{isolation:isolate}
#experiencia .video-vignette.clean-logo-video{
  background:linear-gradient(0deg,rgba(2,14,24,.18),rgba(2,14,24,.04) 55%,rgba(2,14,24,.08));
}

/* A little more visual motion in the static photographic sections, but cheaper than filter effects. */
.water-story .scene-bg,.about-bg,.faq-bg{
  transition:none!important;
}

/* Desktop header keeps its premium glass but reduces compositing cost slightly. */
.site-header{backdrop-filter:blur(20px) saturate(132%);-webkit-backdrop-filter:blur(20px) saturate(132%)}

/* Fixed side foliage: preserve depth with smaller assets and lighter filters. */
.side-vine-left{filter:blur(1.2px) saturate(.96)}
.side-vine-left-mid{filter:blur(2.2px) saturate(.94)}
.side-vine-right{filter:blur(2.4px) saturate(1.02)}
.side-vine-right-low{filter:blur(3.2px) saturate(.98)}
.side-vine-bottom{filter:blur(4px) saturate(.92)}

@media(max-width:700px){
  /* Mobile gets the same depth, with fewer expensive translucent layers. */
  .site-header{backdrop-filter:blur(16px) saturate(126%);-webkit-backdrop-filter:blur(16px) saturate(126%)}
  .nav{backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
  .side-vine-left{filter:blur(1.6px)}
  .side-vine-right{filter:blur(2.4px)}
  .side-vine-right-low{filter:blur(3px)}
  .scene-particle.is-foreground{filter:blur(3px)}
}

/* v4.0 — seam fixes, poster-backed video runways, stronger transform-only parallax */

/* 1) Desktop editorial split: right image always spans the full section height. */
@media(min-width:981px){
  .editorial-split{
    position:relative!important;
    display:block!important;
    height:clamp(600px,72svh,730px)!important;
    min-height:600px!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .editorial-split>.white-panel{
    position:absolute!important;
    inset:0 auto 0 0!important;
    width:52%!important;
    height:100%!important;
    min-height:100%!important;
    display:grid!important;
    place-items:center!important;
  }
  .editorial-split>.split-visual{
    position:absolute!important;
    inset:0 0 0 auto!important;
    width:48%!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
  }
  .editorial-split>.split-visual .split-bg{
    position:absolute!important;
    inset:-14%!important;
    width:auto!important;
    height:auto!important;
  }
}

/* 2) Video scrub runways always carry their own poster — no navy void if sticky painting drops. */
.video-fold{
  position:relative;
  background-color:#031521!important;
  background-image:
    linear-gradient(180deg,rgba(3,21,33,.02),rgba(3,21,33,.10)),
    var(--fold-poster)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.video-fold::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,rgba(3,21,33,.01),rgba(3,21,33,.08));
}
.video-sticky{z-index:1;background:transparent!important}
.video-shell{background:transparent!important}
.scrub-video{background:transparent!important}

/* Slightly shorter than before while retaining enough scroll room for slow scrub. */
@media(min-width:981px){.video-fold{height:168svh!important}}
@media(min-width:701px) and (max-width:980px){.video-fold{height:160svh!important}}
@media(max-width:700px){.video-fold{height:152svh!important}}

/* 3) Stronger, visible parallax without blur/repaint on large imagery. */
.scene-bg,.split-bg,.about-bg,.faq-bg,.contact-water,.hero-slide{
  transform:translate3d(calc(var(--mx)*var(--depth,0)*20px),calc(var(--my)*var(--depth,0)*14px + var(--sy,0px)),0) scale(var(--scale,1.16))!important;
  transition:none!important;
  filter:none!important;
}
.water-story .scene-bg,.about-bg,.faq-bg,.split-bg{--scale:1.22!important}

/* Content remains readable while occupying a separate depth plane. */
.parallax-copy{translate:var(--copy-x,0px) var(--copy-y,0px)!important}

/* 4) Clean seams: never allow a blank band between cinematic/white sections. */
.editorial-split,
.editorial-split+.video-fold,
.video-fold+.services,
.services+.video-fold,
.video-fold+.water-story{
  margin-top:0!important;
  margin-bottom:0!important;
}
.editorial-split+.video-fold,
.video-fold+.services,
.services+.video-fold,
.video-fold+.water-story{border-top:0!important}

/* Keep image sections touching edge-to-edge. */
.split-visual,.video-sticky,.water-story,.about,.faq{margin:0!important}

/* 5) Mobile split is two clean blocks, with zero artificial whitespace. */
@media(max-width:700px){
  .editorial-split{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  .editorial-split>.white-panel{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  .editorial-split>.split-visual{
    position:relative!important;
    width:100%!important;
    height:54svh!important;
    min-height:54svh!important;
    margin:0!important;
  }
  .editorial-split>.split-visual .split-bg{inset:-16%!important}
  .white-inner{padding-bottom:44px!important}
  .video-fold{background-position:center!important}
}

/* v4.1 — sticky video fix, smoother parallax, unlimited carousel gallery */

/* The previous overflow:hidden on the tall video runway broke position:sticky in some browsers,
   leaving the unused part of the runway visible as a navy band. The sticky viewport owns clipping now. */
.video-fold{
  overflow:visible!important;
  background:#031521!important;
  background-image:none!important;
  margin:0!important;
  padding:0!important;
}
.video-fold::before{display:none!important}
.video-sticky{
  position:sticky!important;
  top:0!important;
  height:100svh!important;
  overflow:hidden!important;
  background-color:#031521!important;
  background-image:var(--fold-poster)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.video-shell,.scrub-video{margin:0!important}
@media(min-width:981px){.video-fold{height:250svh!important}}
@media(min-width:701px) and (max-width:980px){.video-fold{height:235svh!important}}
@media(max-width:700px){.video-fold{height:220svh!important}}

/* Keep compositor work cheap while scrolling. */
.scene-bg,.split-bg,.about-bg,.faq-bg,.contact-water,.hero-slide,
.parallax-layer,.parallax-copy,.scene-particle,.floating-pill{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.scene-active .scene-bg,.scene-active .split-bg,.scene-active .about-bg,.scene-active .faq-bg,.scene-active .contact-water,.scene-active .hero-slide{
  will-change:transform;
}

/* Unlimited public gallery rendered as a compact carousel. */
.gallery-strip{overflow:hidden}
.gallery-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:28px!important}
.gallery-head>div:first-child{max-width:820px}
.gallery-controls{display:flex;gap:9px;flex:0 0 auto}
.gallery-controls button{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(8,49,62,.14);
  background:rgba(255,255,255,.78);color:#0a3f4d;font:600 17px/1 var(--font-ui);
  box-shadow:0 10px 26px rgba(0,38,54,.08);cursor:pointer;transition:.25s;
}
.gallery-controls button:hover{transform:translateY(-2px);background:#fff;box-shadow:0 14px 32px rgba(0,38,54,.12)}
.gallery-carousel{margin-top:34px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-inline:contain}
.gallery-carousel::-webkit-scrollbar{display:none}
.gallery-track{display:flex;gap:12px;width:max-content;padding:1px 1px 12px}
.gallery-item{position:relative;flex:0 0 clamp(300px,31vw,410px);height:340px;margin:0;border-radius:20px;overflow:hidden;background:#e9f0ef;scroll-snap-align:start;box-shadow:0 14px 34px rgba(0,34,45,.08)}
.gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.gallery-item:hover img{transform:scale(1.035)}
.gallery-item figcaption{position:absolute;left:13px;right:13px;bottom:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 11px;border-radius:14px;background:rgba(4,31,48,.58);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff}
.gallery-item figcaption strong{font-size:11px;font-weight:700}
.gallery-item figcaption span{font-size:10px;color:rgba(255,255,255,.72)}
@media(max-width:700px){
  .gallery-head{display:block!important}
  .gallery-controls{display:none}
  .gallery-carousel{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;scroll-padding-left:14px}
  .gallery-track{gap:10px;padding-right:14px}
  .gallery-item{flex-basis:82vw;height:62vw;min-height:245px;max-height:340px;border-radius:17px}
}

/* Admin dynamic grids for slides/gallery. */
.admin-dynamic-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:14px!important}
.dynamic-card{padding:14px!important}

/* v4.2 — stable scroll, static-depth scenes and truck-card timing */

/* The truck card is shown only after the video has already finished, while the sticky scene is still held. */
#estrutura .operation-panel{
  left:max(5vw,calc((100vw - 1120px)/2))!important;
  right:auto!important;
  bottom:7vh!important;
  max-width:430px!important;
  padding:20px 22px!important;
  opacity:0!important;
  transform:translate3d(0,18px,0) scale(.988)!important;
  transition:opacity .42s ease,transform .52s cubic-bezier(.22,1,.36,1)!important;
}
#estrutura.video-complete .operation-panel{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
#estrutura .operation-panel h2{font-size:clamp(34px,3.2vw,47px)!important;line-height:.97!important}
#estrutura .operation-panel ul{font-size:11.5px!important;line-height:1.45!important}

/* Never create a navy/card zone by shrinking the movie after it finishes. */
#estrutura.video-complete .scrub-video,
#estrutura.video-complete .video-vignette.operation{
  width:100%!important;
  height:100%!important;
}
#estrutura.video-complete .video-sticky{
  background-color:#031521!important;
  background-image:var(--fold-poster)!important;
}

/* Desktop story: image behaves like a pinned window while the white editorial side passes. */
@media(min-width:981px){
  #sobre.about{
    min-height:112svh!important;
    height:auto!important;
    align-items:start!important;
    overflow:visible!important;
  }
  #sobre .about-image{
    position:sticky!important;
    top:0!important;
    height:100svh!important;
    align-self:start!important;
    overflow:hidden!important;
  }
  #sobre .about-bg{
    inset:0!important;
    transform:none!important;
    filter:none!important;
    background-size:cover!important;
    background-position:center!important;
    will-change:auto!important;
  }
  #sobre .about-white{
    min-height:112svh!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding-top:14vh!important;
    padding-bottom:14vh!important;
  }

  /* FAQ background is fixed to the viewport: the content glides over it without JS jitter. */
  #faq.faq{
    background-image:url('../images/bg-dew-full.webp')!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-attachment:fixed!important;
  }
  #faq .faq-bg{display:none!important}

  /* Same treatment for the supply/treatment scene. */
  .water-story{
    background-image:url('../images/bg-supply.webp')!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-attachment:fixed!important;
  }
  .water-story .scene-bg{display:none!important}
}

/* Keep all large backgrounds transform-only, never blur while scrolling. */
.scene-bg,.split-bg,.about-bg,.faq-bg,.contact-water,.hero-slide{
  filter:none!important;
  transition:none!important;
}
.parallax-copy{transition:none!important}

/* Mobile/iPad: no fixed backgrounds (Safari is smoother with transform-only scenes). */
@media(max-width:980px){
  #faq.faq,.water-story{background-attachment:scroll!important}
}
@media(max-width:700px){
  #estrutura .operation-panel{
    left:14px!important;
    right:14px!important;
    bottom:5vh!important;
    max-width:none!important;
    padding:16px 17px!important;
  }
  #estrutura .operation-panel h2{font-size:clamp(29px,8vw,37px)!important}
  #estrutura .operation-panel ul{font-size:10.5px!important}
}

/* v4.3 — mobile seam cleanup before VD1 */
@media(max-width:700px){
  /* iOS can expose a few pixels of the white parent while dynamic viewport/sticky layers swap.
     Overlap the cinematic sections slightly so the transition is always image-to-video. */
  .editorial-split{
    margin-bottom:-5px!important;
    padding-bottom:0!important;
    background:#061723!important;
  }
  .editorial-split>.white-panel{background:#fff!important}
  .editorial-split>.split-visual{
    margin-bottom:-5px!important;
    bottom:-1px!important;
    background:#061723!important;
    transform:translateZ(0);
  }
  #experiencia{
    margin-top:-6px!important;
    padding-top:0!important;
    background:#061723!important;
    z-index:4!important;
  }
  #experiencia .video-sticky{
    top:-1px!important;
    height:calc(100svh + 2px)!important;
  }
  #experiencia .scrub-video{inset:-1px 0!important;height:calc(100% + 2px)!important}
}

/* v4.4 — mobile VD1 seam: image-to-video, never white/navy */
@media(max-width:700px){
  /* Restore the editorial section's real colors; the previous navy parent was visible as a band on iOS. */
  .editorial-split{
    margin-bottom:0!important;
    padding-bottom:0!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  .editorial-split>.white-panel{background:#fff!important}
  .editorial-split>.split-visual{
    margin-bottom:0!important;
    bottom:0!important;
    background:transparent!important;
    transform:translateZ(0);
  }

  /* VD1 overlaps by a few physical pixels and carries its poster behind the sticky viewport.
     If Safari exposes a seam while the sticky layer swaps, it reveals imagery instead of a solid band. */
  #experiencia{
    margin-top:-4px!important;
    padding-top:0!important;
    background-color:#061723!important;
    background-image:var(--fold-poster)!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    z-index:4!important;
  }
  #experiencia::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;right:0!important;top:-6px!important;height:10px!important;
    background-image:var(--fold-poster)!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    pointer-events:none!important;
    z-index:1!important;
  }
  #experiencia .video-sticky{
    top:0!important;
    height:100svh!important;
    background-color:#061723!important;
    background-image:var(--fold-poster)!important;
    background-size:cover!important;
    background-position:center!important;
  }
  #experiencia .scrub-video{inset:0!important;width:100%!important;height:100%!important}
}

/* v4.5 — iPhone seam + mobile scrub stability */
@media(max-width:700px){
  /* Safari's 100svh can be shorter than the visible viewport after browser chrome moves.
     Use the largest stable viewport for the sticky video so a white/navy strip can never be exposed. */
  .video-sticky{
    height:100vh!important;
    height:100lvh!important;
    min-height:100vh!important;
    overflow:hidden!important;
  }
  .scrub-video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    background:transparent!important;
  }

  /* The section before VD1 carries its own visual all the way to the seam. */
  .editorial-split{
    position:relative!important;
    margin:0!important;
    padding:0!important;
    background-color:#fff!important;
    background-image:url('../images/bg-water-clean.webp')!important;
    background-repeat:no-repeat!important;
    background-position:center bottom!important;
    background-size:100% 58lvh!important;
  }
  .editorial-split>.white-panel{
    background:#fff!important;
    margin:0!important;
  }
  .editorial-split>.split-visual{
    height:58vh!important;
    height:58lvh!important;
    min-height:58vh!important;
    margin:0 0 -18px 0!important;
    transform:translateZ(0)!important;
    z-index:2!important;
  }
  #experiencia{
    position:relative!important;
    margin-top:-18px!important;
    padding:0!important;
    z-index:5!important;
    background-image:var(--fold-poster)!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }
  #experiencia::before{display:none!important}
  #experiencia .video-sticky{
    background-image:var(--fold-poster)!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }

  /* Keep the second movie decoder layer simple on iOS. */
  #estrutura .video-sticky{
    height:100vh!important;
    height:100lvh!important;
    transform:translateZ(0)!important;
  }
  #estrutura .scrub-video{
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
}

/* v4.6 — VD2 final-frame hold + centered post-truck card */
#estrutura{
  height:190svh!important;
}
#estrutura .operation-panel{
  top:50%!important;
  bottom:auto!important;
  left:50%!important;
  right:auto!important;
  width:min(520px,calc(100vw - 52px))!important;
  max-width:520px!important;
  opacity:0!important;
  transform:translate3d(-50%,calc(-50% + 24px),0) scale(.985)!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .46s ease,transform .58s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s!important;
}
#estrutura.video-complete .operation-panel{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(-50%,-50%,0) scale(1)!important;
  transition:opacity .46s ease,transform .58s cubic-bezier(.22,1,.36,1),visibility 0s!important;
}
#estrutura.video-complete .scrub-video{
  transform:translateZ(0)!important;
}
@media(max-width:700px){
  #estrutura{
    height:195lvh!important;
    min-height:195vh!important;
  }
  #estrutura .operation-panel{
    top:50%!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    width:calc(100vw - 30px)!important;
    max-width:430px!important;
    padding:18px 18px!important;
    border-radius:24px!important;
    transform:translate3d(-50%,calc(-50% + 20px),0) scale(.985)!important;
  }
  #estrutura.video-complete .operation-panel{
    transform:translate3d(-50%,-50%,0) scale(1)!important;
  }
  #estrutura .operation-panel h2{
    font-size:clamp(31px,8.8vw,42px)!important;
    line-height:.98!important;
  }
  #estrutura .operation-panel ul{
    margin-top:15px!important;
    gap:8px!important;
    font-size:11.5px!important;
    line-height:1.45!important;
  }
}


/* v4.7 — mobile VD1 transition: remove the empty decorative image before the first movie */
@media(max-width:700px){
  /* On desktop this visual is the right half of the editorial split. On mobile it became
     a second, content-free full-screen image. Remove it completely instead of trying to
     mask its seam. The white purpose block now hands off directly to the 9:16 VD1. */
  .editorial-split{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    background-image:none!important;
    overflow:hidden!important;
  }
  .editorial-split>.white-panel{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    background:#fff!important;
  }
  .editorial-split>.split-visual,
  .editorial-split>.split-leaf,
  .editorial-split>.split-drop{
    display:none!important;
  }
  .editorial-split .white-inner{padding-bottom:48px!important}

  #experiencia{
    margin:0!important;
    padding:0!important;
    background-image:var(--fold-poster)!important;
    background-size:cover!important;
    background-position:center!important;
    z-index:4!important;
  }
  #experiencia::before{display:none!important}

  /* Dynamic viewport follows Safari's visible viewport while retaining safe fallbacks. */
  .video-sticky,
  #experiencia .video-sticky,
  #estrutura .video-sticky{
    top:0!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }
  .scrub-video,
  #experiencia .scrub-video,
  #estrutura .scrub-video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* v5.0 — stronger pinned-story parallax + stable media-management polish */
@media(min-width:981px){
  /* The forest is a pinned visual window. The white editorial column keeps travelling,
     then the image is released exactly when the section ends. */
  #sobre.about{
    display:grid!important;
    grid-template-columns:49% 51%!important;
    min-height:148vh!important;
    height:auto!important;
    align-items:start!important;
    overflow:visible!important;
    background:#fff!important;
  }
  #sobre .about-image{
    position:sticky!important;
    top:0!important;
    width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    align-self:start!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  #sobre .about-bg{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    translate:none!important;
    background-size:cover!important;
    background-position:center center!important;
    filter:none!important;
    will-change:auto!important;
  }
  #sobre .about-white{
    min-height:148vh!important;
    height:auto!important;
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:18vh 7vw 18vh 6vw!important;
    background:#fff!important;
    transform:none!important;
    translate:none!important;
  }
}

/* Keep the current stacked/mobile visual untouched. */
@media(max-width:980px){
  #sobre.about{min-height:0!important;height:auto!important;overflow:hidden!important}
  #sobre .about-image{position:relative!important;top:auto!important}
  #sobre .about-white{min-height:0!important}
}


/* v5.0 — pill motion is compositor-only; no scroll-driven coordinates = no tremor. */
@media(prefers-reduced-motion:reduce){
  .floating-pill{animation:none!important;transform:none!important}
}

/* v5.1 — story split is visually locked; depth comes only from site-side foliage. */
@media(min-width:981px){
  #sobre.about{
    display:grid!important;
    grid-template-columns:49% 51%!important;
    min-height:76svh!important;
    height:auto!important;
    align-items:stretch!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  #sobre .about-image{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:76svh!important;
    align-self:stretch!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  #sobre .about-bg{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-size:cover!important;
    background-position:center center!important;
    transform:none!important;
    translate:none!important;
    filter:none!important;
    will-change:auto!important;
  }
  #sobre .about-white{
    position:relative!important;
    min-height:76svh!important;
    height:auto!important;
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:8vh 7vw 8vh 6vw!important;
    background:#fff!important;
    transform:none!important;
    translate:none!important;
    will-change:auto!important;
  }
}

/* v5.2 — lateral gallery controls + keyboard navigation + audio state */
.gallery-head{align-items:flex-end!important}
.gallery-stage{position:relative;margin-top:34px}
.gallery-carousel{margin-top:0!important;outline:none}
.gallery-carousel:focus-visible{box-shadow:0 0 0 3px rgba(47,159,203,.16);border-radius:22px}
.gallery-side-control{
  position:absolute;top:50%;z-index:7;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(8,49,62,.14);
  background:rgba(255,255,255,.90);color:#0a3f4d;font:600 18px/1 var(--font-ui);
  box-shadow:0 12px 30px rgba(0,38,54,.13);cursor:pointer;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.gallery-side-control:hover{transform:translateY(-50%) scale(1.06);background:#fff;box-shadow:0 16px 38px rgba(0,38,54,.18)}
.gallery-prev{left:-25px}
.gallery-next{right:-25px}
.sound-toggle.needs-gesture{animation:soundInvite 1.8s ease-in-out infinite}
.sound-toggle.is-muted{opacity:.72}
@keyframes soundInvite{50%{box-shadow:0 0 0 9px rgba(65,183,226,.10),0 12px 32px rgba(0,45,72,.20)}}
@media(max-width:1260px) and (min-width:701px){.gallery-prev{left:8px}.gallery-next{right:8px}}
@media(max-width:700px){
  .gallery-stage{margin-top:24px}
  .gallery-side-control{display:none!important}
  .gallery-carousel{margin-left:-14px!important;margin-right:-14px!important;padding-left:14px;padding-right:14px}
}


/* v5.3 — gallery image lightbox */
.gallery-item-openable{cursor:zoom-in;outline:none}
.gallery-item-openable:focus-visible{box-shadow:0 0 0 3px rgba(47,159,203,.24),0 14px 34px rgba(0,34,45,.08)}
.gallery-lightbox{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:clamp(14px,3vw,38px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
.gallery-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.gallery-lightbox-backdrop{position:absolute;inset:0;background:rgba(2,18,29,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gallery-lightbox-dialog{position:relative;z-index:1;width:min(94vw,1440px);height:min(90vh,940px);display:grid;grid-template-columns:58px minmax(0,1fr) 58px;align-items:center;gap:12px}
.gallery-lightbox-media{position:relative;margin:0;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:22px;background:rgba(5,28,42,.44);box-shadow:0 28px 80px rgba(0,0,0,.34)}
.gallery-lightbox-media img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.gallery-lightbox-media figcaption{position:absolute;left:16px;right:16px;bottom:16px;width:max-content;max-width:calc(100% - 32px);display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 12px;border:1px solid rgba(255,255,255,.17);border-radius:14px;background:rgba(4,31,48,.64);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff}
.gallery-lightbox-media figcaption strong{font-size:12px}.gallery-lightbox-media figcaption span{font-size:11px;color:rgba(255,255,255,.76)}
.gallery-lightbox-close,.gallery-lightbox-nav{border:1px solid rgba(255,255,255,.22);background:rgba(15,64,88,.72);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 32px rgba(0,0,0,.18);cursor:pointer;transition:transform .22s ease,background .22s ease}
.gallery-lightbox-close:hover,.gallery-lightbox-nav:hover{background:rgba(20,91,124,.88);transform:scale(1.06)}
.gallery-lightbox-nav{width:52px;height:52px;border-radius:50%;font:600 20px/1 var(--font-ui)}
.gallery-lightbox-close{position:absolute;right:6px;top:6px;z-index:4;width:44px;height:44px;border-radius:50%;font:400 28px/1 var(--font-ui)}
.gallery-lightbox-prev{grid-column:1}.gallery-lightbox-media{grid-column:2}.gallery-lightbox-next{grid-column:3}
body.gallery-lightbox-open{overflow:hidden;touch-action:none}
@media(max-width:700px){
  .gallery-lightbox{padding:10px}
  .gallery-lightbox-dialog{width:100%;height:92dvh;display:block}
  .gallery-lightbox-media{width:100%;height:100%;border-radius:18px}
  .gallery-lightbox-nav{display:none}
  .gallery-lightbox-close{right:10px;top:10px;width:46px;height:46px;background:rgba(6,45,68,.78)}
  .gallery-lightbox-media figcaption{left:12px;right:12px;bottom:12px;max-width:calc(100% - 24px)}
  .gallery-item-openable{cursor:zoom-in}
}

/* v5.4 — sound toggle keeps the music-note icon in both states */
.sound-toggle{
  position:relative;
  overflow:visible;
  font-size:0!important;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,opacity .28s ease,filter .28s ease;
}
.sound-toggle::before{
  content:'♪';
  display:grid;
  place-items:center;
  position:absolute;
  inset:0;
  font:700 16px/1 var(--font-ui,Arial,sans-serif);
  color:#fff;
  opacity:1;
  transform:none;
}
.sound-toggle.is-muted{
  opacity:.82;
  background:linear-gradient(135deg,rgba(17,23,28,.78),rgba(34,42,47,.62))!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08)!important;
  filter:saturate(.25);
}
.sound-toggle.is-muted::before{color:rgba(255,255,255,.76)}
.sound-toggle.is-muted::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:24px;height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  transform:translate(-50%,-50%) rotate(-45deg);
  transform-origin:center;
  pointer-events:none;
}

/* v5.5 — sound control is permanently visible from first paint to footer */
.sound-toggle{
  position:fixed!important;
  left:22px!important;
  right:auto!important;
  top:auto!important;
  bottom:22px!important;
  z-index:1305!important;
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0)!important;
  will-change:auto!important;
  isolation:isolate;
}
.sound-toggle:not(.is-muted){opacity:1!important}
@media(max-width:700px){
  .sound-toggle{
    left:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
  }
}