@charset "UTF-8";
:root {
  color-scheme: dark;
  --primary: #0084cb;
  --primary-light: #46c6f0;
  --primary-dark: #0054a9;
  --secondary: #00a0e0;
  --text: #231f20;
  --white: #fff;
  --light-bg: #f9fbfd;
  --border: #dbe7f3;
  --ink: #f8fdff;
  --muted: #d4e8ef;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-synthesis: none;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:#061f2b;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #8cecff;outline-offset:5px}
img,video,svg{display:block;max-width:100%} [hidden]{display:none!important}
.skip-link{position:absolute;z-index:100;top:-80px;left:20px;color:#083042;background:#fff;padding:13px 18px;border-radius:12px}
.skip-link:focus{top:15px}

/* Cinematic hero: waterfall is a lightweight local photo until an approved video is supplied. */
.hero{isolation:isolate;position:relative;min-height:760px;min-height:max(760px,100svh);overflow:hidden;display:flex;flex-direction:column;background:#0a3143}
.hero-bg{position:absolute;inset:0;z-index:-4;overflow:hidden;background:#0a3143}
.hero-bg picture,.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg img{animation:waterfall-breathe 28s ease-in-out infinite alternate}
.hero-bg video{opacity:0;transition:opacity 1s ease}
.video-playing .hero-bg video{opacity:1}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,28,39,.55) 0%,rgba(0,26,40,.26) 31%,rgba(0,35,51,.43) 52%,rgba(0,24,36,.87) 100%)}
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(ellipse 46% 18% at 50% 9%,rgba(247,253,255,.65),transparent 77%),radial-gradient(ellipse 46% 39% at 50% 68%,rgba(35,181,219,.18),transparent 78%)}
@keyframes waterfall-breathe{to{transform:scale(1.075)}}

/* Transparent official Alive Water logo, visually centered. */
.site-header{position:relative;z-index:10;width:100%;margin:0 auto;padding:27px 20px 8px;display:flex;justify-content:center;align-items:center}
.brand-frame{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;width:min(465px,92vw);padding:15px 28px;border-radius:0;background:transparent}
.brand-frame::before{content:"";position:absolute;inset:-10px -18px;background:radial-gradient(ellipse at center,rgba(245,253,255,.94) 0%,rgba(241,252,255,.70) 36%,rgba(241,252,255,.18) 70%,transparent 76%);filter:blur(14px);z-index:-1;pointer-events:none}
.brand-frame img{width:min(370px,76vw);height:auto;filter:drop-shadow(0 2px 1px rgba(255,255,255,.1))}
.hero-intro{z-index:4;text-align:center;margin:12px auto 24px;max-width:990px;padding:0 22px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:#a4eafa;text-transform:uppercase}
.hero-intro .eyebrow{display:flex;align-items:center;justify-content:center;gap:12px}
.eyebrow-line{height:1px;width:31px;background:linear-gradient(90deg,transparent,#9ad9ed)}
.eyebrow-line:last-child{transform:rotate(180deg)}
.hero-intro h1{margin:15px 0 12px;font-size:clamp(38px,5.6vw,76px);font-weight:850;line-height:1.09;letter-spacing:-.055em;text-shadow:0 3px 26px rgba(0,16,26,.55)}
.hero-intro h1 em{font-style:normal;color:#a9efff}
.hero-intro p{margin:0 auto;font-size:clamp(15px,1.55vw,19px);font-weight:450;max-width:650px;line-height:1.65;color:#ecf9ff;text-shadow:0 2px 15px #001b24}

/* Two synchronized glass doors with subtle natural water ripple effects. */
.stage{position:relative;z-index:3;flex:1;min-height:390px;width:100%;display:grid;grid-template-columns:1fr 1fr;perspective:1500px;transform-style:preserve-3d}
.stage::before{content:"";position:absolute;top:6%;bottom:12%;left:50%;width:1px;z-index:3;background:linear-gradient(transparent,rgba(192,245,255,.6),transparent);pointer-events:none}
.gateway-door{position:relative;display:flex;align-items:center;justify-content:center;padding:31px 18px 51px;min-width:0;transform-style:preserve-3d;color:#fff;text-decoration:none;transition:transform 1.16s cubic-bezier(.22,.68,0,1),opacity 1.13s ease;will-change:transform}
.gateway-door--left{transform-origin:left center;background:linear-gradient(90deg,rgba(2,29,44,.57),rgba(9,48,63,.11))}
.gateway-door--right{transform-origin:right center;background:linear-gradient(270deg,rgba(1,27,44,.68),rgba(8,52,65,.11))}
.door-card{position:relative;isolation:isolate;overflow:hidden;width:min(485px,100%);min-height:315px;border-radius:26px;border:1px solid rgba(191,236,252,.38);background:linear-gradient(145deg,rgba(12,58,78,.77),rgba(2,30,47,.76));backdrop-filter:blur(15px) saturate(1.4);-webkit-backdrop-filter:blur(15px) saturate(1.4);box-shadow:0 24px 58px rgba(0,11,19,.3),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.door-card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 91% 19%,rgba(69,198,240,.23),transparent 39%),linear-gradient(135deg,rgba(255,255,255,.07),transparent 40%)}
.door-card::after{content:"";position:absolute;inset:auto -10% -43% -10%;height:60%;background:radial-gradient(ellipse at 50% 0,rgba(49,190,238,.17),transparent 68%);pointer-events:none}
.gateway-door:hover .door-card,.gateway-door:focus-visible .door-card{border-color:#6fddff;transform:translateY(-6px);box-shadow:0 32px 65px rgba(0,8,15,.42),0 0 0 1px rgba(108,216,255,.18),inset 0 1px 0 rgba(255,255,255,.22)}
.door-content{position:relative;z-index:2;padding:27px 29px 25px}
.door-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px;gap:14px}
.door-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(129,221,252,.45);background:rgba(17,117,153,.22);border-radius:14px;color:#aff0ff}
.door-icon svg{width:23px;height:23px}
.door-number{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b1edff;font-weight:800}
.door-label{display:block;text-transform:uppercase;color:#8fe8ff;font-size:11px;font-weight:800;letter-spacing:.18em}
.door-card h2{margin:9px 0 13px;font-size:clamp(27px,2.65vw,38px);font-weight:850;line-height:1.09;letter-spacing:-.04em;text-shadow:0 2px 13px #002130}
.door-card p{margin:0 0 23px;color:#e3f4fa;line-height:1.55;font-size:14.5px;max-width:35ch}
.enter{display:inline-flex;align-items:center;justify-content:space-between;min-height:45px;gap:23px;padding:10px 12px 10px 19px;background:linear-gradient(110deg,#fff,#e5faff);border-radius:99px;font-size:13px;font-weight:800;color:#00507f;box-shadow:0 8px 18px rgba(0,22,39,.24)}
.enter-arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#0084cb;color:white;font-size:18px;line-height:1}
.domain{display:block;margin-top:14px;font-size:13px;font-weight:750;letter-spacing:.025em;color:#b5ebff}
.water-ornament{position:absolute;pointer-events:none;z-index:0;right:-52px;top:30px;width:240px;height:250px;opacity:.5}
.water-ring{position:absolute;display:block;border:1px solid rgba(105,219,255,.39);border-radius:49% 51% 47% 53% / 55% 43% 57% 45%;box-shadow:0 0 35px rgba(61,200,235,.09),inset 0 0 30px rgba(47,181,238,.06);animation:ripple 8s ease-in-out infinite alternate}
.water-ring--one{inset:15px 23px 55px 0}.water-ring--two{inset:36px -5px 25px 24px;animation-delay:-3s}.water-ring--three{inset:55px 14px -3px 35px;animation-delay:-5s}
@keyframes ripple{to{transform:rotate(27deg) scale(1.06);border-radius:57% 43% 59% 41% / 40% 61% 39% 60%}}
.transition-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;text-align:center;padding:20px;background:linear-gradient(180deg,rgba(1,20,32,.25),rgba(1,20,32,.95));z-index:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .95s ease;letter-spacing:.08em;font-weight:750}
.stage.is-opening .gateway-door--left{transform:rotateY(94deg);opacity:0;pointer-events:none}
.stage.is-opening .gateway-door--right{transform:rotateY(-94deg);opacity:0;pointer-events:none}
.stage.is-opening .transition-overlay{opacity:1;visibility:visible;z-index:4}
.stage.is-opening::before{opacity:0}
.scroll-hint{z-index:4;display:flex;align-items:center;justify-content:center;gap:13px;padding:0 16px 24px;text-align:center;color:#d2f4ff;font-size:12px;font-weight:650;letter-spacing:.11em}
.scroll-hint-line{display:block;height:1px;width:30px;background:#95ddea}

/* Bright calm editorial section ties the gateway to the Drupal 11 palette. */
.intro-section{position:relative;isolation:isolate;padding:78px 22px 73px;background:linear-gradient(180deg,#f1f9fd 0%,#ffffff 46%,#e9f7fd 100%);color:#153249;text-align:center}
.intro-section::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#0054a9,#46c6f0,#0084cb)}
.section-inner{max-width:1180px;margin:auto}
.eyebrow--dark{color:#0084cb}
.intro-section h2{font-size:clamp(30px,3.7vw,48px);font-weight:850;line-height:1.18;letter-spacing:-.045em;margin:13px auto 13px}
.intro-section .lead{max-width:780px;font-size:16.5px;line-height:1.65;color:#506778;margin:0 auto 35px}
.product-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px;text-align:left}
.product-tile{min-width:0;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:#103447;background:#fff;border:1px solid #dae9f1;border-radius:19px;box-shadow:0 9px 27px rgba(0,76,122,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.product-tile:hover,.product-tile:focus-visible{transform:translateY(-6px);border-color:#7acbe9;box-shadow:0 23px 40px rgba(0,73,121,.16)}
.product-visual{position:relative;display:flex;align-items:center;justify-content:center;height:202px;background:radial-gradient(ellipse at 45% 100%,#e8faff,#fff 69%);border-bottom:1px solid #e6f1f6;overflow:hidden}
.product-visual::after{content:"";position:absolute;inset:auto -12% -34% -12%;height:49%;border:1px solid rgba(0,160,224,.17);border-radius:50%;transform:rotate(-4deg)}
.product-visual img{width:100%;height:100%;padding:16px;object-fit:contain;mix-blend-mode:multiply;transition:transform .38s ease}
.product-tile:hover .product-visual img{transform:scale(1.055)}
.product-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:22px 19px 21px}
.product-kicker{font-size:10px;line-height:1.5;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:#0084cb}
.product-body strong{font-size:18.5px;line-height:1.22;font-weight:850;letter-spacing:-.025em;margin-top:9px;min-height:52px}
.product-desc{display:block;color:#415f70;font-size:14.25px;line-height:1.62;margin:12px 0 21px;flex:1}
.product-cta{display:inline-flex;align-items:center;gap:9px;color:#006eb4;font-size:12.6px;font-weight:850;line-height:1.5}
.product-cta span{font-size:19px;transition:transform .2s}
.product-tile:hover .product-cta span{transform:translate(3px,-3px)}
.product-bottom{display:flex;width:100%;margin-top:auto;gap:8px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.product-host{font-size:11px;font-weight:700;white-space:nowrap;color:#547386;padding:4px 0}
.product-tile:hover .product-host{color:#0054a9}
.section-footnote{font-size:14px;color:#526f80;margin:34px 0 0}
.section-footnote a{color:#006eb4;font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* Contact-friendly footer, keeping the original minimal dark style. */
.footer{padding:48px 24px 22px;background:linear-gradient(165deg,#082c3c,#041b28);border-top:1px solid rgba(255,255,255,.12);color:#d5eaf0}
.footer-inner{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;max-width:1180px;margin:0 auto}
.footer strong{display:block;color:#f1fbff;font-size:14px;margin-bottom:13px}
.footer-brand p{margin:0;font-size:13px;line-height:1.85;color:#bcd4dd}
.footer-contact,.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.footer-contact a,.footer-links a{color:#bddde8;font-size:13px;line-height:1.55;text-decoration:none;transition:color .2s}
.footer-contact a:hover,.footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-bottom{max-width:1180px;margin:37px auto 0;padding-top:19px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px;color:#86aebf}
.consent{position:fixed;z-index:100;bottom:16px;left:16px;right:16px;margin:auto;max-width:650px;padding:18px;background:#082c3c;border:1px solid #55acbf;box-shadow:0 20px 60px #0007;border-radius:14px;display:flex;justify-content:space-between;gap:15px;align-items:center}
.consent p{margin:0;font-size:13px;line-height:1.5}.consent-actions{display:flex;gap:8px}.consent button{padding:9px 12px;border:1px solid #b8f2fb;border-radius:8px;cursor:pointer;background:transparent;color:#fff;font-weight:750}.consent button:first-child{background:#ddfbff;color:#002733}
.simple-page{min-height:100svh;background:linear-gradient(160deg,#0c3448,#061924);color:#edf9fd}.simple-page main{max-width:800px;margin:auto;padding:54px 22px 100px}.simple-page h1{font-size:clamp(29px,4vw,50px)}.simple-page h2{margin-top:28px}.simple-page p,.simple-page li{line-height:1.75;color:#d5e5e9}.simple-page a{color:#a3e9fa}.simple-page .brand-frame{width:min(380px,90vw)}

@media(max-width:1050px){.product-row{grid-template-columns:repeat(2,minmax(0,1fr))}.product-visual{height:230px}.product-body strong{min-height:auto}.stage{min-height:380px}.door-card h2{font-size:clamp(27px,3.1vw,36px)}}
@media(max-width:760px){
 .hero{min-height:100svh}.site-header{padding:19px 10px 0}.brand-frame{padding:13px 20px}.brand-frame img{width:min(305px,81vw)}
 .hero-glow{background:radial-gradient(ellipse 85% 15% at 50% 8%,rgba(247,253,255,.66),transparent 80%)}
 .hero-intro{margin:14px auto 13px;padding:0 17px}.hero-intro h1{font-size:clamp(34px,8.1vw,53px)}.hero-intro p{font-size:14px;max-width:42ch}
 .stage{grid-template-columns:1fr;min-height:560px;perspective:1100px}.stage::before{display:none}
 .gateway-door{min-height:267px;padding:9px 17px}.gateway-door--left,.gateway-door--right{transform-origin:left center}
 .door-card{max-width:550px;min-height:0;border-radius:20px}.door-content{padding:19px 22px 19px}.door-top{margin-bottom:9px}.door-icon{width:37px;height:37px;border-radius:11px}.door-icon svg{width:20px;height:20px}
 .door-card h2{font-size:clamp(26px,6.2vw,34px);margin:7px 0 9px}.door-card p{font-size:13px;line-height:1.45;margin-bottom:14px;max-width:45ch}.door-label{font-size:10px}.enter{min-height:40px;font-size:12px}.enter-arrow{height:24px;width:24px}.domain{margin-top:9px;font-size:12px}
 .stage.is-opening .gateway-door--right{transform:rotateY(94deg)}
 .water-ornament{right:-42px;top:14px;opacity:.32}.scroll-hint{padding:12px 14px 19px}
 .intro-section{padding:56px 18px 56px}.intro-section .lead{font-size:15px;margin-bottom:26px}
 .product-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-visual{height:153px}.product-visual img{padding:10px}.product-body{padding:15px 13px 15px}.product-body strong{font-size:16px}.product-desc{font-size:14px;line-height:1.55;margin:10px 0 17px}.product-cta{font-size:12px}.product-host{font-size:10.5px}.product-kicker{font-size:9px}
 .footer-inner{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.footer-bottom{margin-top:29px}.consent{flex-direction:column;align-items:flex-start}
}
@media(max-width:460px){.product-row{grid-template-columns:1fr}.product-visual{height:205px}.product-body{padding:18px 20px}.product-body strong{font-size:19px}.product-desc{font-size:14.5px}.product-host{font-size:11px}.footer-inner{grid-template-columns:1fr}.footer-brand{grid-column:auto}.hero-intro h1{font-size:34px}.door-card h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-bg img,.water-ring{animation:none}.gateway-door,.door-card,.transition-overlay,.product-tile,.product-tile img{transition:none!important}}

/* AliveWater.net footer readability refinements */

.footer strong {
  font-size: 15px;
}

.footer-brand p,
.footer-contact a,
.footer-links a {
  font-size: 14px;
  line-height: 1.75;
}

.footer-bottom {
  font-size: 12px;
  line-height: 1.7;
}

.footer-contact a:hover,
.footer-links a:hover {
  color: #46c6f0;
}

