/* Homepage proportions measured from the live Wavio reference at 1440px. */
body.home {
  --ink: #081f46;
  --body: #344d6b;
  --blue: #268fef;
  --hero: #eef9ff;
  --width: 969px;
}
.home main h2 { font-size: 41px; line-height: 1.27; }
.home .section-title h2 { margin-bottom: 18px; }
.home .button { min-height: 44px; padding: 11px 29px; font-size: 17px; font-weight: 700; letter-spacing: .3px; background: linear-gradient(105deg, #2187d4, #4879ec); box-shadow: 0 16px 28px #2970fa26; }
.home .button-white { background: #fff; color: var(--ink); }
.home .button-outline { min-height: 36px; padding: 7px 20px; background: #fff; color: #1873b3; font-size: 13px; font-weight: 600; box-shadow: none; }
.home .section-title > p:not(.story-intro) { font-size: 11px; letter-spacing: 1.8px; }

.home .hero { isolation: isolate; min-height: max(924px, calc(371px + 38.38vw)); padding-top: 120px; }
.home .hero-surface path { fill: var(--hero); }
.home .hero-inner { grid-template-columns: 65% 35%; min-height: 650px; }
.home .hero-copy { padding-left: 8px; padding-bottom: 0; animation: none; }
.home .hero h1 { font-size: 60px; line-height: 1; letter-spacing: 0; margin-bottom: 30px; }
.home .hero h1 > span { display: block; margin-top: 13px; color: var(--blue); }
.home .hero h1 > .hero-title-lead { margin-top: 0; color: var(--ink); }
.home .hero-copy > p { max-width: 509px; font-size: 17px; line-height: 25.5px; color: var(--ink); padding-left: 15px; margin-bottom: 0; }
.home .hero .intro-line:before { top: 5px; bottom: auto; height: 16px; width: 3px; }
.home .hero-actions { gap: 27px; margin-top: 48px; }
.home .hero .button { min-width: 151px; padding: 10px 25px; font-size: 17px; }
.home .watch-link { gap: 14px; font-size: 10px; letter-spacing: .4px; font-weight: 600; }
.home .watch-link .play { width: 51px; height: 51px; color: var(--ink); }
.home .hero-visual { margin-top: -40px; padding: 0; }
.home .hero-glass { width: 272px; height: 540px; }
.home .hero-bottom { width: 100%; height: auto; bottom: -1px; }
.hero-mobile-surface { display: none; }

.home .composition { isolation: isolate; padding-top: 20px; padding-bottom: 40px; }
.home .composition .section-title { margin-bottom: 24px; }
.home .composition-grid { grid-template-columns: 1fr 359px 1fr; gap: 8px; padding: 0 25px; min-height: 635px; }
.home .composition-glass { width: 359px; }
.home .minerals article { min-height: 203px; margin: 0; padding: 35px 0 0 54px; }
.home .minerals-left article { padding: 35px 54px 0 0; }
.home .minerals h3 { font-size: 14px; line-height: 1.4; }
.home .minerals article > span { display: block; font-size: 13px; line-height: 1.5; font-weight: 700; }
.home .minerals p { max-width: 168px; font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.home .minerals-left p { margin-left: auto; }
.home .minerals article:before { top: 0; left: 0; width: 133px; height: 136px; border-radius: 0; transform: none; background: url('images/mineral-drop.png') center / contain no-repeat; }
.home .minerals-left article:before { right: 0; left: auto; transform: none; }
.home .swirl { width: 511px; height: 510px; top: -243px; right: 34px; opacity: 1; z-index: -1; }

.home .pale-waves:before, .home .pale-waves:after { clip-path: none; }
.home .services { min-height: 822px; padding: 65px 0 95px; background: #fff url('images/services-background.png') center / contain no-repeat; }
.home .services:before, .home .services:after { display: none; }
.home .services .section-title { margin-bottom: 65px; }
.home .service-grid { max-width: 940px; gap: 25px; margin: auto; }
.home .service-card { border-radius: 9px; min-height: 414px; box-shadow: 0 12px 32px #2970fa18; }
.home .service-image { height: 231px; padding: 26px 21px 0; }
.home .service-image img { object-fit: contain; }
.home .service-body { padding: 20px 21px 26px; }
.home .service-body h3 { font-size: 21px; line-height: 1.25; margin: 0 0 12px; }
.home .service-body p { min-height: 42px; font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.home .expert { max-width: 1105px; padding-top: 93px; padding-bottom: 128px; }
.home .expert-card { max-width: 1040px; min-height: 642px; margin: auto; padding: 85px 55px; gap: 40px; }
.home .expert-copy h2 { font-size: 41px; }
.home .expert-copy > p { font-size: 16px; line-height: 1.5; }
.home .feature-list { gap: 22px; margin: 32px 0 38px; }
.home .feature-list img { width: 48px; height: 46px; }
.home .feature-list li { gap: 16px; font-size: 17px; }
.home .expert .button { padding-left: 23px; padding-right: 23px; font-size: 15px; }

.home .story { min-height: 1252px; padding-top: 136px; padding-bottom: 178px; background: linear-gradient(90deg, #f9fcff, #f3faff); }
.home .story:before { top: -1px; height: 21.2vw; background: url('images/story-top.png') top / 100% 100% no-repeat; }
.home .story:after { bottom: -1px; height: 12.35vw; background: url('images/story-bottom.png') bottom / 100% 100% no-repeat; }
.home .story .section-title { margin-bottom: 74px; }
.home .little-wave { width: 112px; height: 9px; margin: 0 auto 20px; object-fit: contain; }
.home .story-intro { max-width: 460px; font-size: 15.3px; line-height: 20.4px; font-weight: 400; }
.home .quality-grid { max-width: 872px; gap: 0; margin-bottom: 160px; }
.home .quality-circle { width: 164px; height: 164px; }
.home .quality-circle img { width: 67px; height: 67px; }
.home .quality-item h3 { font-size: 11px; }
.home .technology { grid-template-columns: 395px minmax(0,1fr); gap: 50px; padding: 0 25px; min-height: 240px; }
.home .technology-image > img { height: 222px; }
.home .technology h2 { font-size: 41px; line-height: 1.2; }
.home .technology p { font-size: 14px; line-height: 1.5; }
.home .water-life { min-height: 908px; padding: 108px 0 130px; isolation: isolate; }
.home .water-life:after { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 0; bottom: -1px; width: 100%; height: 8.65vw; background: url('images/small-wave-bottom.png') bottom / 100% 100% no-repeat; }
.home .life-card { min-height: 370px; }
.home .life-copy h3 { font-size: 27px; }
.home .water-values { padding: 75px 0; }
.home .blog-section { padding-top: 220px; padding-bottom: 150px; background: linear-gradient(0deg, #fff, #f3faff); }
.home .blog-section:before { top: -1px; height: 8.65vw; background: url('images/small-wave-top.png') top / 100% 100% no-repeat; }
.home .blog-section:after { display: none; }
.home .blog-section > .container { max-width: 924px; }
.home .blog-section .section-title:before { content: ''; position: absolute; left: 55px; top: 10px; width: 55px; height: 55px; background: url('images/paper-plane.png') center / contain no-repeat; }
.home .post-grid { gap: 26px; }
.home .post-card { border-radius: 9px; }
.home .post-image { height: 204px; }
.home .post-body { padding: 22px; }
.home .post-body h3 { font-size: 21px; line-height: 1.3; }
.home .post-body > p { font-size: 13px; line-height: 1.5; }
.home .post-body .button { font-size: 12px; padding: 7px 20px; }
.home .site-footer { margin-top: 184px; padding-top: 65px; background: #151044; }
.home .footer-wave { top: -183px; height: 184px; fill: #151044; }

@media (min-width: 1800px) {
  body.home { --width: 1105px; }
  .home .hero-inner { min-height: 750px; }
  .home .hero-glass { width: 320px; height: 635px; }
}
@media (max-width: 1100px) and (min-width: 601px) {
  .home .hero { min-height: 850px; }
  .home .hero-inner { grid-template-columns: 62% 38%; min-height: 600px; }
  .home .hero h1 { font-size: 49px; }
  .home .hero-copy > p { max-width: 400px; font-size: 16px; }
  .home .hero-actions { flex-wrap: wrap; gap: 20px; }
  .home .watch-link { flex-basis: 100%; }
  .home .hero-visual { margin-top: 0; }
  .home .hero-glass { width: 230px; height: 455px; }
  .home .composition-grid { grid-template-columns: 1fr 300px 1fr; padding: 0; }
  .home .composition-glass { width: 300px; }
  .home .minerals article { padding-left: 20px; min-height: 220px; }
  .home .minerals-left article { padding-left: 0; padding-right: 20px; }
  .home .expert-card { padding: 55px 35px; gap: 25px; min-height: 580px; }
  .home .expert-copy h2 { font-size: 34px; }
  .home .expert .button-row { gap: 15px; }
  .home .expert .button { font-size: 13px; padding: 11px 20px; }
  .home .quality-circle { width: 145px; height: 145px; }
  .home .technology { grid-template-columns: .9fr 1.1fr; gap: 30px; padding: 0; }
  .home .technology h2 { font-size: 34px; }
}
@media (max-width: 850px) and (min-width: 601px) {
  .home .composition-grid { grid-template-columns: 1fr 230px 1fr; }
  .home .composition-glass { width: 230px; }
  .home .service-image { height: 190px; padding: 20px 15px 0; }
  .home .service-body { padding: 20px 13px; }
  .home .service-body h3 { font-size: 20px; }
  .home .quality-circle { width: 120px; height: 120px; }
  .home .quality-circle img { width: 60px; height: 60px; }
  .home .life-card { padding: 35px; }
  .home .blog-section .section-title:before { left: 20px; }
}
@media (max-width: 600px) {
  .home main h2 { font-size: 36px; line-height: 1.4; }
  .home .hero { min-height: 1136px; padding-top: 85px; padding-bottom: 140px; }
  .home .hero-surface { display: none; }
  .hero-mobile-surface { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .home .hero-inner { display: flex; flex-direction: column; min-height: 0; gap: 32px; }
  .home .hero-visual { order: -1; align-self: center; margin: 0; padding: 0; transform: none; }
  .home .hero-glass { width: 106px; height: 210px; }
  .home .hero-glass { --aw-float-distance: 15px; }
  .home .hero-copy { width: 100%; max-width: 338px; padding: 0; text-align: center; }
  .home .hero h1 { font-size: 48px; line-height: 1; margin-bottom: 30px; }
  .home .hero h1 > span { margin-top: 16px; }
  .home .hero-copy > p { max-width: 280px; padding-left: 0; margin: auto; font-size: 19px; line-height: 30px; }
  .home .hero .intro-line:before { left: 0; top: 6px; }
  .home .hero-actions { flex-direction: column; gap: 22px; max-width: none; margin-top: 42px; }
  .home .hero .button { width: 180px; min-height: 50px; font-size: 17px; }
  .home .hero .watch-link { margin-top: 0; flex-basis: auto; font-size: 11px; text-align: left; }
  .home .composition { padding-top: 54px; padding-bottom: 67px; }
  .home .composition .section-title { margin-bottom: 59px; }
  .home .composition-grid { display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 0; }
  .home .minerals { width: calc(100% - 16px); order: 0; text-align: left; margin: auto; }
  .home .minerals-left { order: 2; text-align: right; }
  .home .composition-glass { order: 1; width: 150px; margin: 29px auto 44px; }
  .home .minerals article, .home .minerals article:last-child { min-height: 239px; padding: 60px 10px 20px 74px; margin: 0; }
  .home .minerals-left article, .home .minerals-left article:last-child { padding: 60px 74px 20px 10px; }
  .home .minerals h3 { font-size: 16px; }
  .home .minerals article > span { font-size: 15px; }
  .home .minerals p, .home .minerals-left p { max-width: 246px; margin: 9px 0 0; font-size: 15px; line-height: 1.6; }
  .home .minerals article:before { left: 0; right: auto; width: 156px; height: 159px; opacity: 1; }
  .home .minerals-left article:before { left: auto; right: 0; }
  .home .swirl { display: none; }
  .home .services { min-height: 0; padding: 90px 0; background-size: auto 100%; }
  .home .services .section-title { margin-bottom: 45px; }
  .home .service-grid { max-width: 350px; gap: 28px; }
  .home .service-card { min-height: 0; }
  .home .service-image { height: 225px; padding: 24px 30px 0; }
  .home .service-body { padding: 24px 25px 30px; }
  .home .service-body h3 { font-size: 25px; }
  .home .service-body p { min-height: 0; font-size: 15px; }
  .home .expert { padding-top: 80px; padding-bottom: 100px; }
  .home .expert-card { padding: 28px 25px 45px; min-height: 0; gap: 25px; }
  .home .expert-visual img { max-width: 300px; }
  .home .expert-copy h2 { font-size: 36px; line-height: 1.25; }
  .home .feature-list { gap: 20px; }
  .home .feature-list img { width: 40px; height: 38px; }
  .home .feature-list li { font-size: 16px; }
  .home .expert .button { font-size: 14px; padding: 11px 20px; }
  .home .story { padding-top: 100px; padding-bottom: 120px; min-height: 0; }
  .home .story:before { height: 100px; }
  .home .story:after { height: 80px; }
  .home .story .section-title { margin-bottom: 50px; }
  .home .little-wave { width: 125px; height: 10px; }
  .home .story-intro { max-width: 315px; font-size: 15px; line-height: 1.6; }
  .home .quality-grid { gap: 56px 20px; margin-bottom: 85px; }
  .home .quality-circle { width: min(150px, 100%); height: auto; aspect-ratio: 1; margin-bottom: 28px; }
  .home .quality-circle img { width: 54px; height: 54px; }
  .home .quality-item h3 { font-size: 11px; }
  .home .technology { grid-template-columns: 1fr; gap: 30px; padding: 0; }
  .home .technology-image > img { height: 215px; }
  .home .technology h2 { font-size: 36px; line-height: 1.35; }
  .home .technology p { font-size: 15px; line-height: 1.6; }
  .home .water-life { min-height: 0; padding: 80px 0 115px; }
  .home .water-life:after { height: 45px; }
  .home .life-card { min-height: 0; padding: 32px 25px 35px; }
  .home .water-values { padding: 65px 0; }
  .home .blog-section { padding-top: 110px; padding-bottom: 85px; }
  .home .blog-section:before { height: 45px; }
  .home .blog-section .section-title:before { display: none; }
  .home .post-grid { gap: 27px; }
  .home .post-image { height: 225px; }
  .home .post-body { padding: 26px; }
  .home .post-body h3 { font-size: 25px; }
  .home .post-body > p { font-size: 15px; line-height: 1.6; }
  .home .site-footer { margin-top: 90px; padding-top: 50px; }
  .home .footer-wave { top: -89px; height: 90px; }
}
@media (max-width: 360px) {
  .home .hero h1 { font-size: 43px; }
  .home main h2 { font-size: 32px; }
  .home .expert .button-row { gap: 12px; }
  .home .expert .button { font-size: 13px; padding: 11px 17px; }
}

/* Reference: Elementor zoomIn and the two Premium Floating Effects loops. */
@keyframes aw-zoom-in {
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  50% { opacity: 1; }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes aw-water-float {
  from { transform: translateY(0); }
  to { transform: translateY(var(--aw-float-distance, 12.75px)); }
}
@keyframes aw-water-rotate {
  from { transform: rotate(0); }
  to { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .home .aw-motion-pending { opacity: 0; }
  .home .aw-zoom-enter { animation: aw-zoom-in 1.25s ease both; }
  .home .hero-glass { animation: aw-water-float 1.5s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
  .home .composition-glass { animation: aw-water-rotate 1.8s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
}