/* Original Salsabil photography and water language; all colours use brand tokens. */
.water-edge{position:absolute;inset-inline:0;height:65px;overflow:hidden;pointer-events:none;z-index:5;line-height:0;--wave-fill:var(--brand-white)}
.water-edge--bottom{bottom:-1px}
.water-edge--top{top:-1px;rotate:180deg}
.water-edge svg{width:100%;height:100%;display:block}
.water-wave-front{fill:var(--wave-fill)}
.water-wave-back{fill:var(--wave-fill);opacity:.38}
.water-edge--wash{--wave-fill:var(--brand-blue-wash)}
.water-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;color:var(--brand-blue)}
.water-surface svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;opacity:.17;animation:waterDrift 14s ease-in-out infinite alternate}
.water-surface i{position:absolute;width:13px;height:18px;border:1px solid rgb(var(--brand-blue-rgb) / .25);background:rgb(var(--brand-white-rgb) / .45);border-radius:58% 42% 55% 45%;rotate:25deg;top:32%;left:21%;animation:waterDroplet 9s ease-in-out infinite}
.water-surface i:nth-of-type(2){width:8px;height:11px;top:63%;left:78%;animation-delay:-3s}
.water-surface i:nth-of-type(3){width:19px;height:25px;top:75%;left:37%;animation-delay:-6s}
@keyframes waterDrift{from{transform:translate3d(-1.5%,1%,0) scale(1.04)}to{transform:translate3d(1.5%,-1%,0) scale(1.04)}}
@keyframes waterDroplet{0%,100%{translate:0 0;opacity:.4}50%{translate:7px -15px;opacity:.9}}
.button{border-radius:28px}
.button.small{border-radius:24px}
.eyebrow{color:var(--brand-deep-blue)}
.eyebrow:before{background:var(--brand-green)}
.kinetic-hero.hero-shell,.kinetic-hero[data-scene="1"],.kinetic-hero[data-scene="2"]{background-color:var(--brand-blue-soft);background-image:radial-gradient(ellipse at 50% 20%,var(--brand-white),transparent 65%)}
.hero-shell>.water-surface{z-index:0}
.hero-shell>.water-surface svg{opacity:.2}
.hero-word{z-index:1;clip-path:none;animation:none}
.hero-landscape .landscape-caption{background:none}
.page-banner{position:relative}
.page-banner .water-edge{height:33px}
.page-banner.inner-hero .inner-photo{animation:none;transform:none;scale:none}
.page-banner .inner-backdrop:after{background:linear-gradient(90deg,rgb(var(--brand-deep-blue-rgb) / .84),rgb(var(--brand-deep-blue-rgb) / .4) 52%,transparent 85%)}
[dir=rtl] .page-banner .inner-backdrop:after{background:linear-gradient(270deg,rgb(var(--brand-deep-blue-rgb) / .84),rgb(var(--brand-deep-blue-rgb) / .4) 52%,transparent 85%)}

/* A lighter introduction, with the original bottle family in full. */
.water-intro.original-intro{position:relative;width:100%;max-width:none;margin:0;border:0;border-radius:0;padding:108px 0 112px;background:linear-gradient(115deg,var(--brand-white) 0,var(--brand-blue-wash) 45%,var(--brand-blue-soft) 100%);color:var(--brand-charcoal);overflow:hidden}
.water-intro .source-layout{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:80px;align-items:center}
.water-intro.original-intro h2{color:var(--brand-deep-blue)}
.water-intro.original-intro p,.water-intro.original-intro .content-list,.water-intro.original-intro .text-link,.water-intro.original-intro .eyebrow{color:var(--brand-charcoal)}
.water-intro.original-intro .eyebrow{color:var(--brand-deep-blue)}
.water-intro.original-intro .source-photo{height:auto;width:100%;max-width:430px;aspect-ratio:622/807;border-radius:28px;box-shadow:0 20px 50px rgb(var(--brand-deep-blue-rgb) / .1);justify-self:end;overflow:hidden}
.water-intro.original-intro .source-photo img{display:block;width:100%;height:100%;object-fit:contain;animation:none;transform:none}
.water-intro .content-list{margin-block:28px;gap:0}
.water-intro .content-list li{border-color:rgb(var(--brand-blue-rgb) / .25);padding-block:13px;font-size:.95rem}
.water-intro .content-list li:before{background:var(--brand-green)}
.water-intro.original-intro .button{background:var(--brand-blue);border-color:var(--brand-blue);color:var(--brand-charcoal)}
.water-intro.original-intro .button:hover{background:var(--brand-green);border-color:var(--brand-green)}
.water-intro .button-row{gap:26px}
.water-intro .text-link{border-color:var(--brand-green)}

/* Water glints keep both product stages related to the source imagery. */
.bottle-showcase.home-products{background:var(--brand-white)}
.showcase-gallery{background:none;border-radius:0;overflow:visible;container-type:inline-size}
.showcase-gallery:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 25%,var(--brand-white),var(--brand-blue-soft) 80%);border-radius:44% 44% 30% 30% / 25% 25% 16% 16%;pointer-events:none}
.showcase-gallery .showcase-bottle{top:50%;width:min(50%,360px);height:calc(100% - 100px)}
.showcase-gallery .showcase-bottle.is-current{transform:translate(-50%,-50%) rotate(-3deg)}
.showcase-gallery .showcase-bottle.is-current:hover{transform:translate(-50%,-50%) rotate(0deg)}
.showcase-gallery .showcase-bottle.is-previous,.showcase-gallery .showcase-bottle.is-next{transform:translate(-50%,-50%) translateX(calc(var(--slot) * 31cqw)) translateY(26px) scale(.5) rotate(calc(var(--slot) * 7deg));opacity:.78}
.showcase-gallery .showcase-volume{inset:20px 12px auto;font-size:clamp(3.25rem,16cqw,8rem)}
.showcase-gallery .showcase-ripples{inset-inline:5%;overflow:hidden}
.catalogue-studio{border-radius:26px;background:linear-gradient(125deg,var(--brand-white),var(--brand-blue-wash) 55%,var(--brand-blue-soft));border-color:rgb(var(--brand-blue-rgb) / .25)}
.studio-art{isolation:auto;container-type:normal}
.studio-art .studio-bottle{top:50%;width:50%;height:calc(100% - 110px);transform:translate(-50%,-50%) translate(var(--studio-x,0px),var(--studio-y,0px))}
.studio-art .studio-bottle img{scale:none;animation:studioSafeFloat 6s ease-in-out infinite;transform-origin:center}
.studio-art .studio-bottle{mix-blend-mode:multiply}
.studio-art .studio-bottle svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none;animation:studioSafeFloat 6s ease-in-out infinite;transform-origin:center}
.studio-art .studio-bottle.is-previous{transform:translate(-50%,-50%) translateX(-56%) translateY(18px) scale(.64) rotate(-7deg);opacity:.72;filter:none}
.studio-art .studio-bottle.is-next{transform:translate(-50%,-50%) translateX(56%) translateY(18px) scale(.64) rotate(7deg);opacity:.72;filter:none}
.studio-art .studio-volume{inset:12px 12px auto;font-size:clamp(3rem,9vw,9rem);line-height:1.1}
.studio-art .studio-stepper{bottom:16px}
@keyframes studioSafeFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.studio-art>.water-surface{z-index:-1}
.studio-art>.water-surface svg{opacity:.3;stroke-width:2}
.studio-art:before{background:radial-gradient(ellipse at 50% 72%,rgb(var(--brand-blue-rgb) / .18),transparent 65%)}
.catalog-grid .catalogue-card .catalogue-image{background:radial-gradient(ellipse at 50% 25%,var(--brand-white),var(--brand-blue-soft))}
.water-feature.catalogue-feature{gap:70px}
.water-feature .feature-lifestyle{height:auto;aspect-ratio:985/930;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:var(--brand-white);overflow:hidden;position:relative}
.water-feature .feature-lifestyle:before{display:none}
.water-feature .feature-lifestyle img{position:static;display:block;inset:auto;width:100%;height:auto;aspect-ratio:985/807;object-fit:contain;mix-blend-mode:normal;animation:none;transform:none;translate:none;rotate:none;scale:none;margin:0}
.water-feature .feature-lifestyle:hover img{scale:none}
.water-feature .feature-note{position:static;inset:auto;display:flex;flex:1;width:calc(100% - 40px);margin:0 20px;border:0;padding:17px 0;font-size:.92rem;min-height:62px}

/* Original green feature icons, rather than invented replacements. */
.water-benefits.benefits-section{position:relative;padding:100px 0 105px;background:linear-gradient(145deg,var(--brand-blue-wash),var(--brand-blue-soft));overflow:hidden}
.water-benefits .benefits-composition{display:block}
.water-benefits .benefits-heading{max-width:800px;margin:0 auto 42px;text-align:center}
.water-benefits .benefits-heading:before{margin-inline:auto}
.water-benefits .benefits-heading h2{font-size:clamp(2rem,3.3vw,3rem);line-height:1.25}
.water-benefits.benefits-section .benefits-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:none;border:0;border-radius:0;overflow:visible}
.water-benefits .benefit-feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:10px 28px 20px;background:none;border:0;border-inline-end:1px solid rgb(var(--brand-blue-rgb) / .26);border-radius:0;min-width:0}
.water-benefits .benefit-feature:last-child{border-inline-end:0}
.water-benefits .benefit-icon{display:block;width:82px;height:82px;background:none;border:0;border-radius:0;color:var(--brand-green);flex:none;padding:0}
.water-benefits .benefit-icon img{display:block;width:100%;height:100%;object-fit:contain}
.water-benefits .benefit-feature:hover .benefit-icon{background:none}
.water-benefits .benefit-text h3{font-size:1.2rem;line-height:1.45;margin:0 0 13px}
.water-benefits .benefit-text p{font-size:.92rem;line-height:1.85;color:var(--brand-charcoal);margin:0}

/* About uses its own original splash, waterfall and lake images. */
.story-lead .story-water-photo{margin:0;width:100%;max-width:550px;justify-self:end}
.story-lead .story-water-photo .story-photo{display:block;width:100%;height:auto;max-width:none;aspect-ratio:1341/1173;object-fit:contain;border-radius:28px;transform:none;rotate:none;animation:none}
.story-lead .about-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px;padding-top:26px;border:0;align-items:start}
.story-lead .about-benefits li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:0;border:0;line-height:1.5;font-size:.8rem;min-width:0}
.story-lead .about-benefits li:before{display:none}
.story-lead .about-benefits li span{min-width:0;overflow-wrap:anywhere}
.about-benefits li img{width:56px;height:56px;object-fit:contain}
.water-quote{position:relative;isolation:isolate;overflow:hidden;padding:100px 0 115px;background:var(--brand-deep-blue);color:var(--brand-white)}
.water-quote:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--brand-deep-blue-rgb) / .88),rgb(var(--brand-deep-blue-rgb) / .85))}
.quote-scenery{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85}
.water-quote .original-quote{background:none;border:0;border-radius:0;padding:0;width:calc(100% - 100px);max-width:1050px;margin:0 auto;text-align:center;color:var(--brand-white)}
.water-quote .original-quote p{font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.65;letter-spacing:-.025em;margin:0 0 26px;color:var(--brand-white)}
.water-quote .original-quote cite{font-size:1rem;color:var(--brand-white);font-style:normal}
.water-quote .original-quote cite:before{content:'';display:block;width:48px;height:3px;background:var(--brand-green);margin:0 auto 18px}
.source-block.water-trust{background:var(--brand-white);color:var(--brand-charcoal);padding-block:85px}
.trust-layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:80px;align-items:center}
.water-trust.source-block .original-copy h2,.water-trust.source-block .original-copy h3,.water-trust.source-block .eyebrow,.water-trust.source-block .stat strong{color:var(--brand-deep-blue)}
.water-trust.source-block .original-copy>p,.water-trust.source-block .stat span{color:var(--brand-charcoal)}
.water-trust .stat-grid{gap:18px;margin-top:30px}
.water-trust .stat{padding:20px 0;border:0;border-top:1px solid var(--line);background:none}
.water-trust .stat strong{font-size:2.3rem;line-height:1.2}
.water-trust .stat span{font-size:.82rem;line-height:1.6;margin-top:10px;min-height:52px}
.water-trust .stat-bar{background:var(--brand-blue-soft);height:4px}
.trust-photo{margin:0;max-width:540px;width:100%;justify-self:end}
.trust-photo img{display:block;width:100%;height:auto;aspect-ratio:1337/1177;object-fit:contain;border-radius:28px}
.source-story.water-source{padding-block:66px;margin-block:0 45px;border-top:1px solid var(--line);gap:80px;align-items:center}
.source-story.water-source .original-copy{order:0}
.source-water-photo{width:100%;max-width:540px;justify-self:end;margin:0;order:1;position:relative}
.source-water-photo img{display:block;width:100%;height:auto;aspect-ratio:985/807;object-fit:contain;border-radius:28px}
.water-source .source-story-detail{background:var(--brand-blue-wash);border-radius:18px;padding:22px 26px;margin:24px 0}

/* Give the three About stories distinct, full-width water backgrounds. */
.water-trust.source-block{position:relative;isolation:isolate;background:var(--brand-white);padding-block:85px 112px;color:var(--brand-charcoal)}
.water-trust>.water-surface{color:var(--brand-blue)}
.water-trust>.water-surface svg{opacity:.07}
.water-trust>.trust-layout{position:relative;z-index:1}
.water-trust.source-block .original-copy h2,.water-trust.source-block .eyebrow,.water-trust.source-block .stat strong{color:var(--brand-deep-blue)}
.water-trust.source-block .original-copy h2{text-wrap:balance}
.water-trust.source-block .original-copy>p,.water-trust.source-block .stat span{color:var(--brand-charcoal)}
.water-trust .stat{padding:20px 16px 16px;border:1px solid rgb(var(--brand-blue-rgb) / .24);border-radius:16px;background:var(--brand-blue-wash)}
.water-trust .stat-bar{background:var(--brand-blue-light)}
.water-trust .trust-photo img{border:1px solid rgb(var(--brand-blue-rgb) / .2);box-shadow:0 20px 50px rgb(var(--brand-deep-blue-rgb) / .08)}
.water-edge--source{--wave-fill:var(--brand-blue-soft)}
.water-edge--faq{--wave-fill:var(--brand-blue-light)}
.water-source-panel{position:relative;isolation:isolate;background:var(--brand-blue-soft)}
.water-source-panel>.water-surface svg{opacity:.1}
.water-source-panel .source-story.water-source{position:relative;z-index:1;border:0;margin-block:0;padding-block:80px 100px}
.water-source-panel .source-story-detail{background:rgb(var(--brand-white-rgb) / .85);border:1px solid rgb(var(--brand-blue-rgb) / .22);border-inline-start:3px solid var(--brand-green)}
.water-source-panel .source-water-photo img{border:1px solid rgb(var(--brand-blue-rgb) / .18);box-shadow:0 20px 48px rgb(var(--brand-deep-blue-rgb) / .1)}

/* Restore the original FAQ illustration without distracting from the answers. */
.water-faq-panel{position:relative;isolation:isolate;background:var(--brand-blue-light);padding-block:18px 12px}
.water-faq-panel>.water-surface svg{opacity:.12}
.water-faq-panel>.water-faq{position:relative;z-index:1;background:none}
.water-faq.faq-layout{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:center;border-top:0;column-gap:48px;row-gap:24px;padding-block:55px}
.water-faq .faq-heading{grid-column:2;grid-row:1;align-self:end;font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.2;letter-spacing:-.035em}
.water-faq .faq-list{grid-column:2;grid-row:2;align-self:start}
.faq-illustration{grid-column:1;grid-row:1/span 2;position:relative;height:420px;width:100%;max-width:360px;min-width:0;min-height:0;justify-self:center;isolation:isolate}
.faq-illustration:before{content:'';position:absolute;inset:10% 0;border-radius:50%;z-index:-1;background:radial-gradient(ellipse,var(--brand-blue-soft),transparent 70%)}
.water-faq .faq-illustration>img{position:absolute;inset:16px;display:block;height:calc(100% - 32px);width:calc(100% - 32px);min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;animation:waterFaqFloat 7s ease-in-out infinite}
.faq-illustration .water-surface svg{opacity:.25}
@keyframes waterFaqFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.water-faq .faq-list details{border-radius:18px;border-color:rgb(var(--brand-deep-blue-rgb) / .2);background:rgb(var(--brand-white-rgb) / .9)}
.water-faq .faq-list details:hover{border-color:var(--brand-deep-blue)}
.water-faq .faq-list details[open]{background:var(--brand-deep-blue)}
.water-faq .faq-list details[open] p,.water-faq .faq-list details[open] summary{color:var(--brand-white)}
#footer .footer-main{padding-top:105px;background:linear-gradient(130deg,var(--brand-deep-blue),color-mix(in srgb,var(--brand-deep-blue) 80%,var(--brand-blue)))}
#footer .footer-main:before{display:none}
#footer .water-edge{height:46px}
body:has(.water-faq-panel) #footer .water-edge{--wave-fill:var(--brand-blue-light)}
body[data-page=home] .water-benefits>.water-edge--bottom{--wave-fill:var(--brand-blue-light)}

[lang=ar] .water-benefits .benefits-heading h2,[lang=ar] .water-faq .faq-heading{line-height:1.65;letter-spacing:0}
[lang=ar] .water-quote .original-quote p{line-height:1.95;letter-spacing:0}
[lang=ar] .water-benefits .benefit-text h3{line-height:1.8}
[lang=ar] .water-benefits .benefit-text p{line-height:2}
[lang=ar] .story-lead .about-benefits li{line-height:1.85}
@media(max-width:1100px){
 .water-intro .source-layout,.trust-layout,.water-feature.catalogue-feature,.source-story.water-source{gap:42px}
 .water-benefits .benefit-feature{padding-inline:18px}
 .story-lead .about-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
 .story-lead .about-benefits li{flex-direction:column;align-items:center;font-size:.85rem}
 .about-benefits li img{width:45px;height:45px;flex:none}
 .water-trust .stat strong{font-size:2rem}
}
@media(max-width:800px){
 .studio-art{min-height:440px;margin-top:20px}
 .water-intro .source-layout,.trust-layout,.story-lead{grid-template-columns:1fr;gap:35px}
 .water-intro.original-intro{padding:80px 0 90px}
 .water-intro.original-intro .source-photo{max-width:390px;justify-self:center}
 .water-benefits.benefits-section .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 0}
 .water-benefits .benefit-feature:nth-child(2){border-inline-end:0}
 .water-benefits .benefit-feature{padding:0 25px}
 .story-lead .story-water-photo{justify-self:center;max-width:560px}
 .story-lead .about-benefits{grid-template-columns:repeat(4,minmax(0,1fr))}
 .story-lead .about-benefits li{flex-direction:column}
 .water-trust.source-block{padding-block:55px}
 .water-trust.source-block{padding-bottom:80px}
 .water-trust .stat{padding-inline:12px}
 .water-source-panel .source-story.water-source{padding-block:55px 80px}
 .trust-photo,.source-water-photo{justify-self:center;max-width:560px}
 .water-quote{padding-block:85px}
 .water-faq.faq-layout{grid-template-columns:minmax(0,1fr) 200px;column-gap:24px;row-gap:20px}
 .water-faq .faq-heading{grid-column:1;grid-row:1;align-self:center}
 .water-faq .faq-list{grid-column:1/-1;grid-row:2}
 .faq-illustration{grid-column:2;grid-row:1;height:260px;margin:0}
 .source-story.water-source{grid-template-columns:1fr;padding-block:40px;margin-bottom:20px}
 .water-edge{height:45px}
}
@media(max-width:550px){
 .showcase-gallery{height:390px}
 .showcase-gallery .showcase-bottle{width:55%;height:calc(100% - 100px)}
 .showcase-gallery .showcase-bottle.is-previous,.showcase-gallery .showcase-bottle.is-next{transform:translate(-50%,-50%) translateX(calc(var(--slot) * 30cqw)) translateY(22px) scale(.46) rotate(calc(var(--slot) * 7deg))}
 .studio-art{min-height:340px;margin-top:18px}
 .studio-art .studio-bottle{width:52%;height:calc(100% - 105px)}
 .studio-art .studio-bottle.is-previous{transform:translate(-50%,-50%) translateX(-48.077%) translateY(14px) scale(.62) rotate(-6deg)}
 .studio-art .studio-bottle.is-next{transform:translate(-50%,-50%) translateX(48.077%) translateY(14px) scale(.62) rotate(6deg)}
 .water-quote .original-quote{width:calc(100% - 40px)}
 .water-intro.original-intro{padding:65px 0 75px}
 .water-intro .button-row{gap:20px}
 .water-intro.original-intro .source-photo{max-width:330px;border-radius:22px}
 .water-benefits.benefits-section{padding:72px 0 80px}
 .water-benefits .benefits-heading{margin-bottom:32px}
 .water-benefits .benefit-feature{padding:0 13px;gap:16px}
 .water-benefits .benefit-icon{width:62px;height:62px}
 .water-benefits .benefit-text h3{font-size:1.05rem}
 .water-benefits .benefit-text p{font-size:.86rem;line-height:1.85}
 .story-lead .about-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
 .story-lead .about-benefits li{flex-direction:column;align-items:center;font-size:.85rem}
 .water-trust .stat-grid{gap:12px}
 .water-trust .stat strong{font-size:1.9rem}
 .water-trust .stat span{font-size:.75rem}
 .water-trust .stat{padding:18px 8px 14px}
 .water-source-panel .source-story.water-source{padding-block:45px 65px}
 .water-quote .original-quote p{font-size:1.4rem;line-height:1.8}
 .water-quote{padding:75px 0 85px}
 .water-faq.faq-layout{padding-block:45px}
 .water-faq.faq-layout{grid-template-columns:minmax(0,1fr) clamp(140px,40vw,165px);column-gap:12px;row-gap:16px}
 .water-faq .faq-heading{font-size:clamp(1.45rem,6.5vw,1.8rem);line-height:1.25}
 .faq-illustration{height:235px}
 .water-feature .feature-lifestyle{border-radius:20px}
 .catalogue-studio{border-radius:20px}
 .water-source .source-story-detail{padding:20px}
 #footer .footer-main{padding-top:80px}
 #footer .water-edge{height:35px}
 [lang=ar] .water-faq .faq-heading{font-size:1.6rem;line-height:1.7}
}
@media(prefers-reduced-motion:reduce){
 .water-surface svg,.water-surface i,.water-faq .faq-illustration>img,.studio-art .studio-bottle img,.studio-art .studio-bottle svg{animation:none}
}