/* One loading surface. Skeleton rectangles follow each opening composition. */
.site-loader{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;isolation:isolate;overflow:auto;padding:48px 24px;background:#e3e6e7;color:#173b4f;contain:layout paint;overscroll-behavior:contain;transition:opacity .18s ease-out}
.site-loader[hidden],.site-loader [hidden]{display:none!important}.site-loader.is-revealing{opacity:0;pointer-events:none}
.loader-identity{position:relative;z-index:1;text-align:center;max-width:100%;padding:24px 18px;background:radial-gradient(ellipse,#e3e6e7 45%,#e3e6e700 72%)}
.loader-mark{display:block;width:clamp(88px,11vw,136px);height:auto;max-height:24svh;margin:0 auto 24px;overflow:visible}
.loader-outline{fill:#c9d0d3;stroke:#b7c2c8;stroke-width:2}.loader-color{fill:#173b4f;animation:loader-cycle 5.2s linear infinite}
.loader-name{font:600 clamp(36px,5.5vw,72px)/1.05 var(--loader-title,Bodoni),Georgia,serif;letter-spacing:-.025em;margin:0;color:#173b4f}
.loader-trading,.loader-status{font:400 clamp(11px,1.1vw,14px)/1.8 var(--loader-body,Libre),Arial,sans-serif;color:#54839a;text-wrap:balance}
.loader-trading{letter-spacing:.22em;margin:16px 0 0}.loader-status{letter-spacing:.065em;margin:22px auto 0;max-width:35ch}
.loader-error{max-width:38ch;font:400 13px/1.5 Arial,sans-serif;margin:22px auto 0}.loader-error p{margin:0}
.loader-retry{display:inline-flex;align-items:center;min-height:44px;color:#173b4f;font:500 12px/1.5 Arial,sans-serif;text-decoration:underline;text-underline-offset:5px;background:none;border:0;box-shadow:none}
.loader-retry:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.loader-skeleton{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.55}
.skeleton-block{position:absolute;overflow:hidden;background:#cdd3d6;border-radius:6px}
.skeleton-block::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,#fff9 50%,transparent 75%);transform:translateX(-110%);animation:skeleton-light 2.4s ease-in-out infinite}
.skeleton-nav{top:max(20px,env(safe-area-inset-top));left:50%;width:min(580px,calc(100% - 40px));height:56px;transform:translateX(-50%);border-radius:32px}
.skeleton-media{inset:100px 0 0;border-radius:0;background:#d8dde0}
.skeleton-heading{left:10%;top:22%;width:35%;height:80px}.skeleton-copy{position:absolute;left:10%;top:72%;width:32%}.skeleton-copy i{position:relative;display:block;height:10px;margin:12px 0}.skeleton-copy i:last-child{width:68%}.skeleton-foot{bottom:8%;right:8%;width:70px;height:12px}
/* Home/Water open on edge-to-edge film/landscape; no invented card grid. */
.site-loader[data-route=home] .skeleton-heading,.site-loader[data-route=home] .skeleton-copy,.site-loader[data-route=home] .skeleton-foot{display:none}
.site-loader[data-route=home] .skeleton-media,.site-loader[data-route=water] .skeleton-media{inset:0;background:linear-gradient(#d2d8dc,#dce0e2 65%,#cbd3d7)}
.site-loader[data-route=water] .skeleton-heading{top:74%;left:7%;width:38%;height:52px}.site-loader[data-route=water] .skeleton-copy{top:83%;left:7%}
/* Centred logo openings retain their quiet margins and bottom metadata. */
:is(.site-loader[data-route=coffee],.site-loader[data-route=shipping]) .skeleton-media{inset:16% 35% 42%;border-radius:50%;background:#cfd5d8}
:is(.site-loader[data-route=coffee],.site-loader[data-route=shipping]) .skeleton-heading{top:69%;left:35%;width:30%;height:30px}
:is(.site-loader[data-route=coffee],.site-loader[data-route=shipping]) .skeleton-copy{top:auto;bottom:9%;left:6%;width:18%}
.site-loader[data-route=mango] .skeleton-media{inset:55% 0 5%;background:linear-gradient(#d3d9db00,#c5cfd3)}
.site-loader[data-route=mango] .skeleton-heading{top:23%;left:28%;width:44%;height:14%}.site-loader[data-route=mango] .skeleton-copy{top:auto;bottom:7%;left:8%;width:20%}
.site-loader[data-route=energy] .skeleton-media{inset:0 60% 0 0;border-radius:0;background:#d5dbde}
.site-loader[data-route=energy] .skeleton-heading{top:20%;left:10%;width:35%;height:15%}.site-loader[data-route=energy] .skeleton-copy{left:58%;top:62%;width:30%}
:is(.site-loader[data-route=about],.site-loader[data-route=privacy]) .skeleton-media{display:none}
:is(.site-loader[data-route=about],.site-loader[data-route=privacy]) .skeleton-heading{top:25%;left:8%;width:42%;height:20%}
:is(.site-loader[data-route=about],.site-loader[data-route=privacy]) .skeleton-copy{left:60%;top:34%;width:30%}
@keyframes skeleton-light{to{transform:translateX(110%)}}
@keyframes loader-cycle{0%{opacity:0}4%,88%{opacity:1}98%,100%{opacity:0}}
.loader-fill{transform-box:view-box;transform-origin:0 0;animation-duration:5.2s;animation-timing-function:linear;animation-iteration-count:infinite}
@media(max-width:650px){.skeleton-nav{height:48px;top:max(12px,env(safe-area-inset-top));width:calc(100% - 20px)}.loader-trading{font-size:11px;letter-spacing:.18em}.loader-status{font-size:12px;max-width:30ch}.loader-identity{padding-inline:0}.skeleton-heading{left:8%;width:70%}.skeleton-copy{left:8%;width:70%}.site-loader[data-route=water] .skeleton-heading{width:65%;top:72%}.site-loader[data-route=water] .skeleton-copy{top:82%;width:68%}:is(.site-loader[data-route=coffee],.site-loader[data-route=shipping]) .skeleton-media{inset:23% 15% 42%}:is(.site-loader[data-route=coffee],.site-loader[data-route=shipping]) .skeleton-heading{left:24%;width:52%;top:70%}.site-loader[data-route=mango] .skeleton-heading{left:12%;width:76%;height:11%;top:24%}.site-loader[data-route=energy] .skeleton-heading{left:12%;width:76%;height:14%;top:24%}.site-loader[data-route=energy] .skeleton-copy{left:12%;width:70%;top:72%}:is(.site-loader[data-route=about],.site-loader[data-route=privacy]) .skeleton-heading{left:8%;width:84%;top:22%;height:16%}:is(.site-loader[data-route=about],.site-loader[data-route=privacy]) .skeleton-copy{left:8%;top:72%;width:80%}}
@media(max-height:540px){.site-loader{padding:16px}.loader-mark{width:58px;max-height:90px;margin-bottom:12px}.loader-name{font-size:32px}.loader-trading{margin-top:8px;font-size:10px}.loader-status{margin-top:10px;font-size:11px}.loader-identity{padding:10px 20px}}
@media(prefers-reduced-motion:reduce){.site-loader{transition:none}.skeleton-block::after{animation:none;display:none}.loader-fill,.loader-color{animation:none!important;transform:none;opacity:1}}

#navigation-clip-0 .loader-fill{animation-name:loader-pillar-0}
@keyframes loader-pillar-0{0%,0.0%{transform:scaleX(0)}18.0%,100%{transform:scaleX(1)}}

#navigation-clip-1 .loader-fill{animation-name:loader-pillar-1}
@keyframes loader-pillar-1{0%,18.0%{transform:scaleX(0)}23.8%,100%{transform:scaleX(1)}}

#navigation-clip-2 .loader-fill{animation-name:loader-pillar-2}
@keyframes loader-pillar-2{0%,23.8%{transform:scaleX(0)}29.6%,100%{transform:scaleX(1)}}

#navigation-clip-3 .loader-fill{animation-name:loader-pillar-3}
@keyframes loader-pillar-3{0%,29.6%{transform:scaleX(0)}35.4%,100%{transform:scaleX(1)}}

#navigation-clip-4 .loader-fill{animation-name:loader-pillar-4}
@keyframes loader-pillar-4{0%,35.4%{transform:scaleX(0)}41.2%,100%{transform:scaleX(1)}}

#navigation-clip-5 .loader-fill{animation-name:loader-pillar-5}
@keyframes loader-pillar-5{0%,41.2%{transform:scaleX(0)}47.0%,100%{transform:scaleX(1)}}

#navigation-clip-6 .loader-fill{animation-name:loader-pillar-6}
@keyframes loader-pillar-6{0%,47.0%{transform:scaleX(0)}52.8%,100%{transform:scaleX(1)}}

#navigation-clip-7 .loader-fill{animation-name:loader-pillar-7}
@keyframes loader-pillar-7{0%,52.8%{transform:scaleX(0)}58.6%,100%{transform:scaleX(1)}}

#navigation-clip-8 .loader-fill{animation-name:loader-pillar-8}
@keyframes loader-pillar-8{0%,58.6%{transform:scaleX(0)}64.4%,100%{transform:scaleX(1)}}

#navigation-clip-9 .loader-fill{animation-name:loader-pillar-9}
@keyframes loader-pillar-9{0%,64.4%{transform:scaleX(0)}70.2%,100%{transform:scaleX(1)}}

#navigation-clip-10 .loader-fill{animation-name:loader-pillar-10}
@keyframes loader-pillar-10{0%,70.2%{transform:scaleX(0)}76.0%,100%{transform:scaleX(1)}}

#navigation-clip-11 .loader-fill{animation-name:loader-pillar-11}
@keyframes loader-pillar-11{0%,76.0%{transform:scaleX(0)}81.8%,100%{transform:scaleX(1)}}

.is-loading .experience *{animation-play-state:paused!important}
