/* The two typefaces are served from this site (src/assets/fonts), not from Google: nothing outside is contacted before a visitor
   acts (a MUST on every squareposh site, owner 2026-10-13). Both are open-licence (OFL) variable fonts, latin set. */
@font-face { font-family: "Hanken Grotesk"; src: url(/assets/fonts/hanken-grotesk-var.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url(/assets/fonts/sora-var.woff2) format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
/* Water Tree Oak Forest.
   The look: bright water. White and pale sky grounds, the logo's navy and green, royal blue for anything
   you can press, one colour per water (Pure RO aqua, Natural green, Classic blue, Premium violet: the
   colours of the client's own graphics). Headlines in Sora, reading text in Hanken Grotesk. Large round
   tiles, pill buttons, a moving wave between sections. Rules kept from the studio: nothing to read sits
   on a photo (the one film line is a short title), short facts are boxes side by side, page titles are
   centred, the header is solid, and the logo sits inside the header at a normal size (owner, 10/6: the big
   logo hanging below the header "looks crazy"). */
:root {
	--navy: #272e6b; --deep: #151c4b; --ink: #1a2052; --text: #3d446f; --mute: #667099;
	--blue: #1b6ae4; --aqua: #2fc3f2; --leaf: #1d7f49; --leaf2: #27a35f; --mint: #edf8f1;
	--sky: #eef8fe; --mist: #f6fbff; --line: #dbe9f5;
	--r: 32px;
	--head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
	--body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pad: clamp(72px, 9vw, 128px);
	--wv: clamp(34px, 5vw, 70px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--body); color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--head); color: var(--navy); letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
p { margin: 0 0 1em; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 10px; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; position: relative; }
.wrap--mid { width: min(880px, 100% - 48px); }
.wrap--form { width: min(920px, 100% - 48px); }
.center { text-align: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; padding: 12px 18px; border-radius: 12px; background: #fff; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── buttons, small type ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; background: linear-gradient(135deg, #2a7cf0, #0d4fc4); color: #fff; font: 600 1rem/1 var(--head); letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 16px 28px -14px rgba(13, 79, 196, .7); transition: filter .25s, box-shadow .25s; }
.btn .ic { transition: transform .3s; }
.btn:hover { filter: brightness(1.1); }
.btn:hover .ic:last-child { transform: translateX(4px); }
.btn--ghost { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--line); }
.btn--ghost:hover { filter: none; box-shadow: inset 0 0 0 2px var(--blue); }
.btn--white { background: #fff; color: var(--navy); box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .45); }
.btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.btn--line:hover { filter: none; box-shadow: inset 0 0 0 2px #fff; }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: .9375rem; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.center .btns { justify-content: center; }
.eyebrow { margin: 0 0 16px; font: 700 .8125rem/1.3 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.eyebrow::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.12em; background: currentColor; -webkit-mask: var(--leafmark) center / contain no-repeat; mask: var(--leafmark) center / contain no-repeat; }
:root { --leafmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 9 10 3.500 21 3.500 21 14.500 15 20 4 20zm0 0L13 11' fill='black' stroke='black' stroke-width='1.500' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; }

/* ── header ── */
.hdr { position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 1px 0 var(--line); }
.hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #1b6ae4, #23a35d); }
.hdr .wrap { width: min(1480px, 100% - 48px); }
.hdr__in { position: static; display: flex; align-items: center; gap: 16px; height: 80px; transition: height .3s; }
.hdr__logo { position: relative; z-index: 3; flex: none; display: block; }
.hdr__logo img { height: 52px; width: auto; max-width: none; transition: height .3s; }
.hdr.is-stuck .hdr__in { height: 66px; }
.hdr.is-stuck .hdr__logo img { height: 44px; }
.nav { margin-left: auto; }
.nav__l { display: flex; align-items: center; gap: 2px; }
.nav__a { display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 13px; border-radius: 999px; font: 600 .9375rem/1 var(--body); color: var(--navy); white-space: nowrap; transition: background .2s, color .2s; }
.nav__a .ic { width: 16px; height: 16px; opacity: .55; transition: transform .3s; }
.nav__a:hover, .nav__i.is-open .nav__a { background: var(--sky); }
.nav__i.is-open .nav__a .ic { transform: rotate(180deg); }
.nav__a[aria-current] { color: var(--leaf); }
.hdr__act { display: flex; align-items: center; gap: 10px; flex: none; }
.hdr__tel { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 999px; font: 600 .9375rem/1 var(--head); color: var(--navy); white-space: nowrap; }
.hdr__tel .ic { color: var(--blue); }
.hdr__tel:hover { background: var(--sky); }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; padding: 26px 0 34px; border-radius: 0 0 36px 36px; background: #fff; box-shadow: 0 50px 60px -40px rgba(21, 28, 75, .45), inset 0 1px 0 var(--line); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .3s, visibility 0s .3s; }
.nav__i.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s; }
.mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(1240px, 100% - 48px) !important; }
.mega__c { display: block; border-radius: 24px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.mega__c img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mega__c--prod img { object-fit: contain; padding: 14px; background: #fff; }
.mega__c:hover img { transform: scale(1.06); }
.mega__c span { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; background: var(--mist); font: 600 1rem/1.25 var(--head); letter-spacing: -.01em; color: var(--navy); }
.mega__c .ic { color: var(--leaf); transition: transform .3s; }
.mega__c:hover .ic { transform: translateX(4px); }
.burger { display: none; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 16px; border-radius: 999px; background: var(--navy); color: #fff; font: 600 .9375rem/1 var(--head); white-space: nowrap; }
.burger__ic { display: flex; flex-direction: column; gap: 5px; }
.burger i { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s, opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* The header's buttons: the phone number and Account (owner 2026-10-09: "have an account button instead of the shop icon",
   "have the phone number in a button too"). Every one carries its word: nothing is an icon alone. */
.hbtn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--sky); box-shadow: inset 0 0 0 1.5px #c6d9ea; font: 600 .9375rem/1 var(--head); color: var(--navy); white-space: nowrap; }
.hbtn .ic { width: 20px; height: 20px; color: var(--blue); }
.hbtn--acct { background: var(--mint); box-shadow: inset 0 0 0 1.5px #bfe3cf; }
.hbtn--acct .ic { color: var(--leaf); }
.hbtn:hover { box-shadow: inset 0 0 0 2px var(--navy); }
.hbtn__word { display: none; }
/* The phone menu (owner 2026-10-09: "very confusing older people will be using this it needs to make sense"):
   one page per line, big, the whole line presses; then three full buttons. */
.mnav { position: fixed; left: 0; right: 0; top: var(--hh, 66px); bottom: 0; z-index: 2; overflow: auto; padding: 6px 0 40px; background: #fff; }
.mnav__l > li { border-bottom: 1.5px solid var(--line); }
.mnav__l > li > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 10px 2px; font: 700 1.375rem/1.2 var(--head); letter-spacing: -.02em; color: var(--navy); }
.mnav__l > li > a .ic { flex: none; width: 22px; height: 22px; color: var(--blue); transform: rotate(-90deg); }
.mnav__l > li > a[aria-current] { color: var(--blue); }
.mnav__btns { display: grid; gap: 12px; margin: 24px 0 0; }
.mnav__btns .btn { display: flex; width: 100%; justify-content: center; min-height: 58px; font-size: 1.0625rem; }
.is-menu body { overflow: hidden; }

/* ── the wave between sections, bubbles ── */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: var(--wv); overflow: hidden; pointer-events: none; }
.wave svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; max-width: none; animation: wv 18s linear infinite; }
.wave svg + svg { opacity: .45; animation-duration: 10s; animation-delay: -3s; }
@keyframes wv { to { transform: translateX(-50%); } }
.bub { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── home: the opening ── */
.hero { position: relative; overflow: hidden; padding: clamp(72px, 7vw, 104px) 0 calc(var(--wv) + clamp(56px, 6vw, 90px)); background: radial-gradient(1100px 640px at 80% 46%, #cfeefd 0, rgba(207, 238, 253, 0) 62%), linear-gradient(180deg, #f6fbff, #e7f5fe); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 4.9vw, 4.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, #1b6ae4, #159fb5 50%, #23a35d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { max-width: 33em; margin: 26px 0 0; }
.hero__stage { display: grid; justify-items: center; gap: 22px; min-width: 0; }
.hero__caps { min-height: 3.4em; max-width: 24em; text-align: center; }
.hero__caps .wpanel { margin: 0; font: 600 1.0625rem/1.5 var(--head); letter-spacing: -.01em; color: var(--navy); }
.js .wpanel:not(.is-on) { display: none; }

/* ── the bottle ── */
.jugbox { position: relative; width: min(100%, 330px); aspect-ratio: 300 / 420; --water: #1b6ae4; --fill: .8; }
.js .jugbox:not(.is-in) { --fill: 0 !important; }
.jug { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 96%; transition: transform .6s cubic-bezier(.2, .8, .3, 1); }
.hero .jugbox { width: auto; height: clamp(380px, 56vh, 540px); }
.jug__shadow { fill: rgba(21, 28, 75, .16); }
.jug__glass { fill: rgba(255, 255, 255, .6); }
.jug__edge { fill: none; stroke: rgba(39, 46, 107, .3); stroke-width: 3; }
.jug__ribs { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 3; }
.jug__shine { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 10; stroke-linecap: round; }
.jug__cap { fill: var(--water); transition: fill .7s; }
.jug__capline { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2.5; stroke-linecap: round; }
.jug__water { transform: translateY(calc((1 - var(--fill)) * 340px)) rotate(calc(var(--tilt, 0deg) * -1.7)); transform-origin: 150px 58px; transition: transform 1.5s cubic-bezier(.3, 1.25, .4, 1); }
.jug__wave { fill: var(--water); transition: fill .7s; animation: jw 3.2s linear infinite; }
.jug__wave--b { opacity: .45; animation-duration: 5.2s; animation-direction: reverse; }
@keyframes jw { to { transform: translateX(150px); } }
.jug__bub circle { fill: rgba(255, 255, 255, .75); animation: jb 4.2s ease-in infinite; }
.jug__bub circle:nth-child(2) { animation-delay: 1.1s; animation-duration: 5s; }
.jug__bub circle:nth-child(3) { animation-delay: 2s; animation-duration: 3.6s; }
.jug__bub circle:nth-child(4) { animation-delay: .5s; animation-duration: 4.8s; }
.jug__bub circle:nth-child(5) { animation-delay: 2.8s; }
@keyframes jb { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-290px); opacity: 0; } }
.jugbox__ring { position: absolute; left: 50%; bottom: -42%; width: 130%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--water); opacity: 0; transform: translateX(-50%) scale(.35, .08); animation: ring 4.8s ease-out infinite; transition: border-color .7s; }
.jugbox__ring:nth-child(2) { animation-delay: 1.6s; }
.jugbox__ring:nth-child(3) { animation-delay: 3.2s; }
@keyframes ring { 0% { transform: translateX(-50%) scale(.35, .08); opacity: 0; } 15% { opacity: .55; } 100% { transform: translateX(-50%) scale(1.05, .23); opacity: 0; } }
.jugbox__label { position: absolute; z-index: 2; left: 50%; top: 58%; margin: 0; padding: 10px 20px; border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 26px -12px rgba(21, 28, 75, .45); transform: translate(-50%, -50%); text-align: center; font-family: var(--head); white-space: nowrap; }
.jugbox__label b { display: block; font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; color: var(--navy); }
.jugbox__label span { display: block; font-size: .8125rem; font-weight: 600; color: var(--mute); }
.jugbox__label span:empty { display: none; }
.jugbox.is-pop .jugbox__label { animation: pop .5s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(.82); } 100% { transform: translate(-50%, -50%) scale(1); } }
.wtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wtab { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font: 600 .9375rem/1 var(--head); color: var(--navy); transition: background .25s, color .25s, box-shadow .25s; }
.wtab i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.wtab:hover { box-shadow: inset 0 0 0 2px var(--c); }
.wtab[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: 0 12px 22px -12px var(--navy); }
.wtab[aria-selected="true"] i { box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }

/* ── sections ── */
.sec { position: relative; padding: var(--pad) 0; }
.sec:has(> .wave) { padding-bottom: calc(var(--pad) + var(--wv)); }
.sec--tight { padding-top: clamp(44px, 5vw, 76px); }
.sec--sky { background: var(--sky); }
.sec--mint { background: var(--mint); }
.sec--mint .boxes li, .sec--mint .marks li { background: #fff; }
.sec--deep { background: var(--deep); color: #c9d3f5; }
.sec--deep h2, .sec--deep h3 { color: #fff; }
.sec--deep .eyebrow { color: #86e6b0; }
.hd { max-width: 840px; margin: 0 0 clamp(36px, 5vw, 64px); }
.hd.center { margin-inline: auto; }
.hd h2, .split__txt h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; }
.hd .lead { margin: 20px 0 0; }
.js [data-r] { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js [data-r].is-in { opacity: 1; transform: none; }

.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.way { display: flex; flex-direction: column; border-radius: var(--r); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.way__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.way__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.way--prod .way__img img { inset: 26px; width: calc(100% - 52px); height: calc(100% - 52px); object-fit: contain; }
.way:hover .way__img img { transform: scale(1.05); }
.way__txt { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.way__txt .eyebrow { margin-bottom: 10px; }
.way__txt h3 { font-size: 1.5rem; margin-bottom: 10px; }
.way__txt p:not(.eyebrow) { margin: 0 0 22px; }
.way__go { display: grid; place-items: center; width: 46px; height: 46px; margin-top: auto; border-radius: 50%; background: var(--leaf); color: #fff; }
.way__go .ic { transition: transform .3s; }
.way:hover .way__go .ic { transform: translateX(4px); }

.scene-sec { padding: 0 0 var(--pad); }
.scene { position: relative; display: grid; place-items: center; height: min(64vh, 560px); min-height: 320px; border-radius: calc(var(--r) + 8px); overflow: hidden; background: #0d4fc4; isolation: isolate; }
.scene__v { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.08)); filter: grayscale(1) contrast(1.15) brightness(1.15); }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #0b3fb4, #1a8fe6 60%, #25c0ee); mix-blend-mode: multiply; }
.scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side, rgba(9, 28, 92, .42), rgba(9, 28, 92, 0)); }
.scene__t { margin: 0; padding: 0 24px; font: 800 clamp(2rem, 6vw, 5rem)/1.02 var(--head); letter-spacing: -.045em; text-align: center; color: #fff; text-shadow: 0 4px 34px rgba(8, 20, 70, .55); text-wrap: balance; }

.split { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.split--mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__img { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 44px 70px -44px rgba(21, 28, 75, .5); }
.split__img img { width: 100%; }
.split__img--wide { justify-self: center; width: 100%; max-width: 640px; }
.split__img--land img { aspect-ratio: 3 / 2; object-fit: cover; }
.split__txt { min-width: 0; }
.split__txt h2 { margin-bottom: 22px; }
.split__txt > p:last-child { margin-bottom: 0; }
.marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; }
.marks li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff; font: 600 1rem/1.3 var(--head); letter-spacing: -.01em; color: var(--navy); }
.marks .ic { width: 26px; height: 26px; color: var(--leaf); }

.boxes { display: grid; gap: 14px; }
.boxes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.boxes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.boxes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.boxes li { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 24px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); font: 600 1.0625rem/1.3 var(--head); letter-spacing: -.01em; color: var(--navy); min-width: 0; }
.boxes .ic { width: 30px; height: 30px; color: var(--leaf); }
.sec--sky .boxes li { background: #fff; }
.boxes--sm { margin-top: 22px; }
.boxes--sm li { flex-direction: row; align-items: center; padding: 16px 18px; font-size: 1rem; }
.boxes--sm .ic { width: 24px; height: 24px; }
.boxes--tall li { padding: 32px; }
.boxes--tall .ic { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: var(--c); color: #fff; }
.boxes--tall h3 { font-size: 1.5rem; }
.boxes--tall span { font: 400 1.0625rem/1.6 var(--body); letter-spacing: 0; color: var(--text); }
.boxes--link li { padding: 0; }
.boxes--link a { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 26px; border-radius: 24px; transition: box-shadow .3s; }
.boxes--link a:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.boxes--link .ic:last-child { width: 22px; height: 22px; margin-top: auto; transition: transform .3s; }
.boxes--link a:hover .ic:last-child { transform: translateX(5px); }

.bigprice { display: flex; align-items: center; gap: 16px; margin: 28px 0 0; font-family: var(--head); }
.bigprice b { font-size: clamp(3.75rem, 8vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; background: linear-gradient(100deg, #fff, #7fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bigprice span { font-weight: 600; line-height: 1.25; color: #c9d3f5; }
.psw { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r); background: #fff; color: var(--text); box-shadow: 0 44px 70px -44px rgba(0, 0, 0, .55); }
.split__txt .psw { margin-top: 30px; box-shadow: inset 0 0 0 1px var(--line), 0 44px 70px -50px rgba(21, 28, 75, .4); }
.psw__sw { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--sky); }
.psw__sw button { position: relative; z-index: 1; height: 46px; border-radius: 999px; font: 600 .9375rem/1 var(--head); color: var(--navy); transition: color .3s; }
.psw__sw i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--navy); transition: transform .5s cubic-bezier(.3, 1.3, .4, 1); }
.psw.is-b .psw__sw i { transform: translateX(100%); }
.psw__sw button.is-on { color: #fff; }
.psw__l { margin-top: 8px; }
.psw__l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); }
.psw__l li:first-child { border-top: 0; }
.psw__l i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.psw__l b { font: 700 1.125rem/1.2 var(--head); letter-spacing: -.02em; color: var(--navy); }
.psw__l small { grid-column: 3; grid-row: 2; text-align: right; font-size: .8125rem; color: var(--mute); }
.psw__l em { grid-column: 2; grid-row: 2; font-style: normal; font-size: .875rem; color: var(--mute); }
.pr { display: inline-flex; gap: 12px; font: 800 1.75rem/1.1 var(--head); letter-spacing: -.04em; color: var(--navy); }
.pr__b { color: var(--leaf); }
.js .pr { display: inline-grid; overflow: hidden; }
.js .pr span { grid-area: 1 / 1; text-align: right; transition: transform .55s cubic-bezier(.3, 1.2, .4, 1), opacity .3s; }
.js .pr__b { transform: translateY(110%); opacity: 0; }
.js .psw.is-b .pr__a { transform: translateY(-110%); opacity: 0; }
.js .psw.is-b .pr__b { transform: none; opacity: 1; }

.visit { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.visit__card { padding: clamp(24px, 3vw, 38px); border-radius: var(--r); background: #fff; }
.visit__card h2 { font-size: 1.75rem; margin-bottom: 16px; }
.facts li { display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; font-weight: 600; line-height: 1.45; color: var(--navy); overflow-wrap: anywhere; }
.facts .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--leaf); }
.facts a:hover { color: var(--blue); }
.hours { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 1rem; }
.hours th { padding: 7px 0; text-align: left; font-weight: 500; color: var(--text); }
.hours td { padding: 7px 0; text-align: right; font-weight: 600; color: var(--navy); white-space: nowrap; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--leaf); font-weight: 700; }
.openbadge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 14px; border-radius: 999px; background: #e1f5e9; color: #17683b; font: 700 .8125rem/1 var(--head); letter-spacing: .03em; }
.openbadge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.openbadge.is-closed { background: #eceff7; color: #5d6688; }
.map { min-height: 420px; border-radius: var(--r); overflow: hidden; background: #dcebf5; }
.map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
/* the map waits behind a button: nothing comes from Google until it is pressed */
.mapgate { display: grid; place-content: center; justify-items: center; gap: 12px; min-height: 420px; padding: 26px 20px; text-align: center; background: rgba(0, 0, 0, .03) radial-gradient(circle, rgba(0, 0, 0, .1) 0 1.5px, transparent 2px) 0 0 / 22px 22px; }
.mapgate.is-on { display: block; padding: 0; background: none; }
.mapgate__link { font-weight: 600; }
.mapgate__note { max-width: 30ch; margin: 0; font-size: .9rem; opacity: .78; }

.cta { position: relative; overflow: hidden; padding: clamp(84px, 10vw, 140px) 0 calc(clamp(84px, 10vw, 140px) + var(--wv)); background: linear-gradient(135deg, #0d4fc4, #1b6ae4 38%, #13968f 74%, #1f9d5a); text-align: center; }
.cta h2 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.045em; color: #fff; }
.cta .lead { margin: 18px 0 0; color: #e6f1ff; }

/* ── inner pages ── */
.ph { position: relative; overflow: hidden; padding: clamp(84px, 10vw, 150px) 0 calc(var(--wv) + clamp(60px, 7vw, 96px)); background: radial-gradient(900px 520px at 50% 0, #cfeefd 0, rgba(207, 238, 253, 0) 70%), linear-gradient(180deg, #f6fbff, #e7f5fe); }
.ph h1 { font-size: clamp(2.4rem, 5.4vw, 4.5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.03; }
.ph .lead { max-width: 44em; margin: 24px auto 0; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 18px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font: 600 .9rem/1.2 var(--head); color: var(--navy); transition: box-shadow .25s; }
.chips a:hover { box-shadow: inset 0 0 0 2px var(--leaf); }

.pick { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(22px, 4vw, 56px); border-radius: calc(var(--r) + 8px); background: #fff; box-shadow: 0 54px 90px -54px rgba(21, 28, 75, .4); }
.pick__stage { display: grid; place-items: center; padding: 10px 0 46px; }
.pick__side { min-width: 0; }
.pick .wtabs { justify-content: flex-start; }
.scale { margin: 30px 0 6px; padding: 12px 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scale__bar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 16px; cursor: grab; }
.scale__bar i { border-radius: 999px; background: var(--c); opacity: .28; transition: opacity .3s; }
.scale__bar i.is-on { opacity: 1; }
.scale__knob { position: absolute; top: 50%; left: 62.5%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px rgba(21, 28, 75, .3), inset 0 0 0 6px var(--k, #1b6ae4); transition: left .5s cubic-bezier(.3, 1.3, .4, 1), box-shadow .3s; }
.scale.is-drag .scale__bar { cursor: grabbing; }
.scale.is-drag .scale__knob { transition: box-shadow .3s; }
.scale__ticks { position: relative; height: 26px; margin-top: 14px; font: 600 .8125rem/1 var(--head); color: var(--mute); }
.scale__ticks b { position: absolute; left: 0; color: var(--navy); }
.scale__ticks span { position: absolute; transform: translateX(-50%); }
.scale__ticks span:last-child { transform: translateX(-100%); }
.pick__cards { min-height: 15.5em; }
.wcard { padding-top: 10px; }
.wcard + .wcard { margin-top: 26px; }
.js .wcard + .wcard { margin-top: 0; }
.wcard h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; }
.wcard__ph { display: inline-block; margin: 12px 0 0; padding: 7px 14px; border-radius: 999px; background: var(--sky); box-shadow: inset 0 0 0 2px var(--c); font: 700 .875rem/1 var(--head); color: var(--navy); }
.wcard > p { margin: 14px 0 0; }
.wcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--head); }
.wcard__price b { font-size: 2.25rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--navy); }
.wcard__price span { font-weight: 500; color: var(--mute); }

.seg { display: inline-flex; max-width: 100%; margin: 26px 0 18px; padding: 5px; border-radius: 999px; background: var(--sky); }
.seg button { height: 46px; padding: 0 22px; border-radius: 999px; font: 600 .9375rem/1 var(--head); color: var(--navy); white-space: nowrap; transition: background .3s, color .3s; }
.seg button.is-on { background: var(--navy); color: #fff; }
.cal { max-width: 400px; padding: 20px; border-radius: 26px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.cal__h, .cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; justify-items: center; }
.cal__h b { margin-bottom: 8px; font: 700 .75rem/1 var(--head); color: var(--mute); }
.cal__g i { width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, box-shadow .4s, transform .5s cubic-bezier(.3, 1.6, .4, 1); }
.cal__g .is-d, .cal__g .is-t { background: #dceffb; box-shadow: none; }
.cal[data-cal="Weekly"] .is-d, .cal[data-cal="Bi-weekly"] .is-d[data-wk="0"], .cal[data-cal="Bi-weekly"] .is-d[data-wk="2"], .cal[data-cal="Monthly"] .is-d[data-wk="0"] { background: var(--blue); box-shadow: 0 8px 16px -6px var(--blue); transform: scale(1.14); }
.filmtile { justify-self: center; width: min(100%, 380px); aspect-ratio: 9 / 14; margin: 0; border-radius: calc(var(--r) + 8px); overflow: hidden; background: #0d4fc4; box-shadow: 0 54px 80px -44px rgba(21, 28, 75, .55); }
.filmtile video { width: 100%; height: 100%; object-fit: cover; }

/* ── forms ── */
.sheet { padding: clamp(22px, 4vw, 48px); border-radius: calc(var(--r) + 4px); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 54px 90px -54px rgba(21, 28, 75, .38); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form__grid + .fs { margin-top: 22px; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld label, .fs legend { font: 600 .9375rem/1.3 var(--head); color: var(--navy); }
.opt-note { font-weight: 500; font-size: .8125rem; color: var(--mute); }
.fld input, .fld textarea { width: 100%; min-height: 54px; padding: 14px 18px; border: 0; border-radius: 16px; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; color: var(--ink); transition: box-shadow .2s, background .2s; }
.fld textarea { min-height: 120px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.form [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #c0392b !important; }
.fs { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.fs legend { margin-bottom: 10px; padding: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt > span { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line); font: 600 .9375rem/1.2 var(--head); color: var(--navy); transition: background .25s, color .25s, box-shadow .25s; }
.opt:hover > span { box-shadow: inset 0 0 0 2px var(--blue); }
.opt input:checked + span { background: var(--navy); color: #fff; box-shadow: none; }
.opt input:focus-visible + span { outline: 3px solid var(--aqua); outline-offset: 3px; }
.fs--water .opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs--water .opt > span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; width: 100%; padding: 14px 16px; border-radius: 20px; }
.fs--water i { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.fs--water small { font: 500 .78rem/1.2 var(--body); opacity: .75; }
.build__grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(20px, 3vw, 44px); align-items: start; }
.build__row { display: flex; flex-wrap: wrap; gap: 0 34px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line); }
.stepper button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 2px 6px rgba(21, 28, 75, .16); }
.stepper button:hover { color: var(--blue); }
.stepper input { width: 54px; padding: 0; border: 0; background: none; text-align: center; font: 700 1.25rem/1 var(--head); color: var(--navy); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hint { margin: 8px 0 0; font-size: .875rem; color: var(--mute); }
.sum { position: sticky; top: 104px; padding: 26px; border-radius: 28px; background: linear-gradient(160deg, #eef8fe, #dbf0fd); text-align: center; }
.sum__jugs { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 6px; min-height: 122px; color: var(--blue); transition: color .6s; }
.sum__jugs svg { width: 38px; height: 54px; fill: currentColor; animation: jpop .45s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes jpop { 0% { transform: scale(.3) translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.sum__big { margin: 16px 0 0; font: 600 1.125rem/1.2 var(--head); color: var(--navy); }
.sum__big b { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.sum__list { display: grid; gap: 8px; margin-top: 16px; text-align: left; }
.sum__list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; font-weight: 600; color: var(--navy); }
.sum__list i { width: 16px; height: 16px; margin: 0 2px; border-radius: 50%; background: var(--blue); transition: background .5s; }
.sum__list .ic { color: var(--blue); }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.form__error { margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; background: #fde7e4; color: #7a1711; font-weight: 500; }
.sqp-guard__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 24px 10px 16px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line); font: 600 1rem/1 var(--head); color: var(--navy); transition: box-shadow .2s; }
.sqp-guard__btn:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.sqp-guard__box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--navy); color: transparent; }
.sqp-guard__box .ic { width: 15px; height: 15px; stroke-width: 3; }
.sqp-guard__btn[aria-pressed="true"] .sqp-guard__box { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.sqp-guard.is-needed .sqp-guard__btn { box-shadow: inset 0 0 0 2px #c0392b; }
.sqp-guard__msg { margin: 8px 0 0; font-size: .9375rem; font-weight: 500; color: #a3281b; }
.sqp-guard__msg:empty { display: none; }
.form-done { padding: 46px 20px; text-align: center; }
.form-done__title { margin: 0; font: 700 clamp(1.375rem, 3vw, 1.875rem)/1.2 var(--head); letter-spacing: -.03em; color: var(--navy); }

/* ── the store ── */
.wl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
.wl li { padding: 26px; border-radius: 26px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line), inset 0 5px 0 var(--c); }
.wl i { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--c); color: #fff; }
.wl i .ic { width: 26px; height: 26px; }
.wl h3 { font-size: 1.375rem; }
.wl__ph { margin: 6px 0 10px; font: 700 .875rem/1.2 var(--head); color: var(--mute); }
.wl p:last-child { margin: 0; }
.dragtip { position: fixed; left: 0; top: 0; z-index: 90; padding: 9px 16px; border-radius: 999px; background: var(--navy); color: #fff; font: 700 .75rem/1 var(--head); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; opacity: 0; transition: opacity .2s; box-shadow: 0 10px 20px -8px rgba(21, 28, 75, .6); }
.dragtip::before, .dragtip::after { content: "‹"; margin-right: 8px; opacity: .7; }
.dragtip::after { content: "›"; margin: 0 0 0 8px; }
.dragtip.is-on { opacity: 1; }
.disc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.disc__card h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; }
.disc__tag { margin: 26px 0 0; font: 600 1.25rem/1.3 var(--head); color: #86e6b0; }
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.perks li { padding: 20px 22px; border-radius: 22px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.perks li:first-child { grid-column: 1 / -1; background: linear-gradient(120deg, #1d7f49, #2aa863); box-shadow: none; }
.perks b { display: block; font: 800 1.75rem/1.1 var(--head); letter-spacing: -.03em; color: #fff; }
.perks span { display: block; margin-top: 6px; font: 600 1rem/1.3 var(--head); color: #fff; }
.perks small { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.4; color: #c3cdf2; }
.perks li:first-child small { color: #e6f1ff; }
.only { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px 44px; align-items: center; margin-top: 28px; padding: 28px 34px; border-radius: var(--r); background: #fff; color: var(--text); }
.sec--deep .only .eyebrow { margin-bottom: 8px; color: var(--blue); }
.only__t { margin: 0; font: 700 1.375rem/1.25 var(--head); letter-spacing: -.02em; color: var(--navy); }
.only__t span { display: block; margin-top: 4px; font: 500 1rem/1.4 var(--body); letter-spacing: 0; color: var(--mute); }
.only__p { margin: 0; text-align: center; font-family: var(--head); }
.only__p b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--navy); }
.only__p span { font-weight: 600; color: var(--mute); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.duo__c { padding: clamp(26px, 3.4vw, 44px); border-radius: var(--r); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.duo__ic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 22px; border-radius: 20px; background: var(--blue); color: #fff; }
.duo__ic .ic { width: 30px; height: 30px; }
.duo__c:nth-child(2) .duo__ic { background: var(--leaf); }
.duo h3 { margin-bottom: 16px; font-size: 1.625rem; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; font-weight: 500; color: var(--navy); }
.ticks .ic { width: 24px; height: 24px; margin-top: 1px; padding: 4px; border-radius: 50%; background: #dbf3e5; color: var(--leaf); stroke-width: 2.8; }
.closing { margin: clamp(36px, 5vw, 60px) 0 0; text-align: center; font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.2 var(--head); letter-spacing: -.03em; color: var(--navy); text-wrap: balance; }

/* ── filtration: the house ── */
.hs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hs__pic { padding: clamp(12px, 2.4vw, 30px); border-radius: calc(var(--r) + 8px); background: linear-gradient(180deg, #eef8fe, #dbf0fd); }
.house { width: 100%; height: auto; }
.house__roof { fill: none; stroke: var(--navy); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.house__wall { fill: #fff; stroke: var(--navy); stroke-width: 5; stroke-linejoin: round; }
.house__ground { fill: none; stroke: #b5d4ea; stroke-width: 4; stroke-linecap: round; }
.rm__bg { fill: #f1f5fa; transition: fill .5s; }
.rm text { font: 600 21px var(--head); fill: #8d97ba; transition: fill .5s; }
.fx { fill: #fff; stroke: var(--navy); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.fx .spray { fill: none; stroke: #b9c4d8; stroke-width: 3; stroke-dasharray: 3 9; transition: stroke .5s; }
.pipe { fill: none; stroke: #c4cfe0; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.whf, .ucf { fill: #fff; stroke: #b9c4d8; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: .3; transition: opacity .5s, stroke .5s, fill .5s; }
.hs.is-whole .pipe:not(.pipe--main) { stroke: var(--blue); stroke-dasharray: 14 10; animation: flow 1.1s linear infinite; }
.hs.is-whole .whf, .hs.is-under .ucf { opacity: 1; stroke: var(--blue); fill: #cfe5ff; }
.hs.is-whole .rm__bg, .hs.is-under .rm--kitchen .rm__bg { fill: #d9effc; }
.hs.is-whole .rm text, .hs.is-under .rm--kitchen text { fill: var(--navy); }
.hs.is-whole .spray, .hs.is-under .fx--kitchen .spray { stroke: var(--blue); animation: flow .7s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.hs__opts { display: grid; gap: 14px; }
.hs__o { padding: 26px 28px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; transition: box-shadow .3s, background .3s; }
.hs__o h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.hs__o h2 button { display: flex; align-items: center; gap: 12px; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; }
.hs__o h2 i { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px #b9c4d8; transition: box-shadow .3s; }
.hs__o p { margin: 12px 0 0; }
.hs__o.is-on { background: var(--mist); box-shadow: inset 0 0 0 2px var(--blue), 0 30px 50px -36px rgba(27, 106, 228, .7); }
.hs__o.is-on h2 i { box-shadow: inset 0 0 0 7px var(--blue); }

/* ── about ── */
.amapbox { border-radius: calc(var(--r) + 4px); overflow: hidden; }
.amap { width: 100%; height: auto; }
.amap__bg { fill: #e3f3fd; }
.amap__st { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; }
.amap__hw { fill: none; stroke: #bfe3f7; stroke-width: 16; stroke-linecap: round; }
.amap__p circle:first-child { fill: rgba(27, 106, 228, .1); transition: fill .4s; }
.amap__p circle:nth-child(2) { fill: var(--blue); }
.amap__p text { font: 700 23px var(--head); letter-spacing: -.02em; fill: var(--navy); text-anchor: middle; }
.amap__p.is-on circle:first-child { fill: rgba(27, 106, 228, .32); }
.amap__store circle { fill: var(--leaf); stroke: #fff; stroke-width: 4; }
.amap__store path { fill: #fff; }
.areas { display: grid; gap: 12px; }
.areas li { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 22px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); font: 600 1.25rem/1.25 var(--head); letter-spacing: -.02em; color: var(--navy); transition: box-shadow .3s, background .3s; }
.areas li[data-area] { cursor: pointer; }
.areas li.is-on { background: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.areas .ic { width: 26px; height: 26px; color: var(--leaf); }
.year { margin: 0 0 14px; font: 800 clamp(4.5rem, 11vw, 9rem)/.9 var(--head); letter-spacing: -.06em; background: linear-gradient(100deg, #1b6ae4, #159fb5 50%, #23a35d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.state { position: relative; overflow: hidden; padding: clamp(90px, 12vw, 170px) 0; background: linear-gradient(180deg, #f6fbff, #dcf3e6); }
.state__t { margin: 0; font: 800 clamp(2.1rem, 6.2vw, 5.2rem)/1.03 var(--head); letter-spacing: -.045em; color: var(--navy); text-wrap: balance; }
.state__t em { display: block; font-style: normal; background: linear-gradient(100deg, #1b6ae4, #159fb5 50%, #23a35d); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── contact ── */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 22px; align-items: start; }
.ccard { padding: clamp(24px, 3vw, 34px); border-radius: var(--r); background: var(--deep); color: #c9d3f5; }
.ccard h2 { font-size: 1.625rem; color: #fff; }
.ccard__city { margin: 6px 0 0; font-weight: 500; }
.ccard__tel { margin: 16px 0 22px; font: 600 1.125rem/1.3 var(--head); color: #fff; }
.ccard__tel a { color: #7fdcff; }
.ccard img { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; object-fit: cover; }
.cinfo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 14px; margin-top: 22px; }
.boxes--info li { flex-direction: row; align-items: flex-start; gap: 16px; }
.boxes--info h3, .cinfo__hours h3 { margin-bottom: 6px; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; color: var(--blue); }
.boxes--info p { margin: 0; font: 600 1.0625rem/1.4 var(--head); letter-spacing: -.01em; color: var(--navy); overflow-wrap: anywhere; }
.boxes--info a:hover { color: var(--blue); }
.cinfo__hours { padding: 26px 28px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cinfo__hours h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.cinfo__hours h3 .ic { width: 24px; height: 24px; }
.soc { display: flex; flex-wrap: wrap; gap: 10px; }
.soc a { position: relative; display: inline-flex; align-items: center; gap: 10px; font: 600 1.0625rem/1 var(--head); }
.soc--big { justify-content: center; margin-top: 32px; }
.follow h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; }
.follow .lead { margin: 20px 0 0; }
.soc--big a { height: 64px; padding: 0 28px; border-radius: 999px; background: var(--navy); color: #fff; transition: background .25s; }
.soc--big a:hover { background: var(--leaf); }
.soc--big .ic { width: 24px; height: 24px; }
.soc--ftr a { justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background .25s; }
.soc--ftr a:hover { background: var(--leaf2); }
.soc--ftr span { position: absolute; left: -9999px; }

/* ── footer ── */
.ftr { position: relative; padding: clamp(56px, 7vw, 90px) 0 28px; background: var(--deep); color: #b9c5ee; }
.ftr > .wave { bottom: auto; top: calc(1px - var(--wv)); }
.ftr__grid { display: grid; grid-template-columns: 1.25fr .95fr 1.1fr 1.1fr; gap: 40px; }
.ftr__brand > a { display: inline-block; padding: 12px 16px; border-radius: 20px; background: #fff; }
.ftr__brand img { width: min(200px, 100%); }
.ftr__brand p { max-width: 17em; margin: 20px 0; font: 600 1.0625rem/1.4 var(--head); letter-spacing: -.01em; color: #fff; }
.ftr__nav li { padding: 6px 0; }
.ftr__nav a { font: 600 1rem/1.3 var(--head); color: #fff; }
.ftr__nav a:hover, .facts--ftr a:hover { color: #7fdcff; }
.facts--ftr li { color: #e3e9ff; }
.facts--ftr .ic { color: #7fdcff; }
.hours--ftr { margin-top: 0; }
.hours--ftr th { color: #b9c5ee; }
.hours--ftr td { color: #fff; }
.hours--ftr tr.is-today th, .hours--ftr tr.is-today td { color: #86e6b0; }
.ftr__legal { margin: 48px 0 0; text-align: center; font-size: .875rem; color: #8f9cc9; }

/* ── the shop: green is the store's colour (blue stays with delivery) ── */
[hidden] { display: none !important; }
.btn--leaf { background: linear-gradient(135deg, #2aa863, #1d7f49); box-shadow: 0 16px 28px -14px rgba(29, 127, 73, .75); }
.btns--mid { justify-content: center; }
.cartbtn { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--mint); color: var(--leaf); }
.cartbtn .ic { width: 22px; height: 22px; }
.cartbtn b { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--leaf); color: #fff; font: 700 .6875rem/20px var(--head); text-align: center; }
.ph--slim { padding: clamp(56px, 6vw, 90px) 0 calc(var(--wv) + clamp(34px, 4vw, 56px)); }
.chips--shop a[aria-current] { background: var(--navy); color: #fff; box-shadow: none; }
.chips--sub { margin-top: 10px; }
.chips--sub a { min-height: 40px; background: var(--mint); box-shadow: none; font-size: .8125rem; }
.chips--sub a[aria-current] { background: var(--leaf); color: #fff; }
.shopnote { margin: 20px 0 0; font-weight: 600; color: var(--navy); }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cat { display: flex; flex-direction: column; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .3s; }
.cat:hover { box-shadow: inset 0 0 0 2px var(--leaf); }
.cat__img { display: flex; gap: 8px; height: clamp(150px, 15vw, 210px); padding: 18px; background: #fff; }
.cat__img img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: contain; }
.cat__txt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-top: 1px solid var(--line); background: var(--mist); }
.cat__txt b { font: 600 1.25rem/1.2 var(--head); letter-spacing: -.02em; color: var(--navy); }
.cat__txt .ic { color: var(--leaf); transition: transform .3s; }
.cat:hover .cat__txt .ic { transform: translateX(5px); }
.prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.prod { display: flex; flex-direction: column; height: 100%; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .3s; }
.prod:hover { box-shadow: inset 0 0 0 2px var(--leaf); }
.prod__img { position: relative; display: block; aspect-ratio: 1; background: #fff; overflow: hidden; }
.prod__img img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.prod:hover .prod__img img { transform: scale(1.05); }
.prod__txt { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 20px 20px; border-top: 1px solid var(--line); background: var(--mist); }
.prod__txt b { font: 600 1rem/1.3 var(--head); letter-spacing: -.01em; color: var(--navy); }
.prod__price { margin-top: auto; font: 700 1.0625rem/1 var(--head); color: var(--leaf); }
.prod__price s, .pp__price s { margin-left: 6px; font-weight: 500; color: var(--mute); }
.prod__price:empty { display: none; }
.prod__view { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--leaf); color: #fff; font: 600 .9375rem/1 var(--head); }
.prod__view .ic { width: 17px; height: 17px; }
.prod__price:empty + .prod__view { margin-top: auto; }
.pp__opts { margin: 0 0 6px; border-radius: 20px; background: var(--mist); box-shadow: inset 0 0 0 1.5px #c6d9ea; overflow: hidden; }
.pp__opts li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; font: 500 1.0625rem/1.3 var(--body); color: var(--navy); }
.pp__opts li + li { box-shadow: inset 0 1.5px 0 #dbe7f2; }
.pp__opts b { font: 700 1.0625rem/1 var(--head); white-space: nowrap; }
.pp__go { margin-top: 22px; }
.pp__price:empty { display: none; }
.pp { padding: clamp(36px, 5vw, 70px) 0 var(--pad); }
.pp__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.gal { position: sticky; top: 96px; min-width: 0; }
.gal__main { position: relative; aspect-ratio: 1; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.gal__main img { position: absolute; inset: 28px; width: calc(100% - 56px); height: calc(100% - 56px); object-fit: contain; }
.gal__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gal__thumbs button { width: 76px; height: 76px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gal__thumbs button.is-on { box-shadow: inset 0 0 0 2px var(--leaf); }
.gal__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pp__side { min-width: 0; }
.pp__side h1 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 700; }
.pp__side .eyebrow a:hover { text-decoration: underline; }
.pp__price { margin: 16px 0 26px; font: 800 2rem/1 var(--head); letter-spacing: -.04em; color: var(--navy); }
.pp__price s { font-size: 1.125rem; letter-spacing: 0; }
.fs--pick .opt > span { border-radius: 16px; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.buy .btn { flex: 1; min-width: 200px; }
.pp__desc { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.pp__desc p { margin: 0 0 .9em; }
.pp__desc ul { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.pp__desc li { margin: .3em 0; }
.pp__desc a { color: var(--blue); text-decoration: underline; overflow-wrap: anywhere; }
.cart { position: fixed; inset: 0; z-index: 80; }
.cart__veil { position: absolute; inset: 0; background: rgba(21, 28, 75, .45); opacity: 0; transition: opacity .3s; }
.cart__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 100%); background: #fff; box-shadow: -30px 0 60px -30px rgba(21, 28, 75, .5); transform: translateX(100%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); outline: 0; }
.cart.is-open .cart__veil { opacity: 1; }
.cart.is-open .cart__panel { transform: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.cart__head h2 { font-size: 1.5rem; }
.cart__x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sky); color: var(--navy); }
.cart__body { flex: 1; overflow: auto; padding: 4px 24px; }
.cart__none { margin: 44px 0; text-align: center; color: var(--mute); }
.cart__foot { display: grid; gap: 10px; padding: 18px 24px 24px; border-top: 1px solid var(--line); }
.cart__sub { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; font: 600 1rem/1 var(--head); color: var(--navy); }
.cart__sub b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.cl { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cl__img { grid-row: span 2; display: block; width: 72px; height: 72px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cl__img img { width: 100%; height: 100%; object-fit: contain; }
.cl__t { font: 600 .9375rem/1.3 var(--head); color: var(--navy); }
.cl__t span { display: block; margin-top: 3px; font: 500 .8125rem/1.3 var(--body); color: var(--mute); }
.cl__p { font: 700 1rem/1 var(--head); color: var(--navy); white-space: nowrap; }
.cl__q { grid-column: 2; display: flex; align-items: center; gap: 4px; }
.cl__q button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sky); color: var(--navy); font: 700 1.0625rem/1 var(--head); }
.cl__q b { min-width: 30px; text-align: center; font: 700 .9375rem/1 var(--head); color: var(--navy); }
.cl__x { grid-column: 3; justify-self: end; font: 600 .8125rem/1 var(--head); color: var(--mute); text-decoration: underline; }
.is-cart body { overflow: hidden; }
.co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 22px; align-items: start; }
.co.is-done { grid-template-columns: minmax(0, 1fr); }
.co__sum { position: sticky; top: 96px; padding: 26px; border-radius: var(--r); background: var(--mint); }
.co__sum h2 { margin-bottom: 4px; font-size: 1.375rem; }
.co__sum .cart__sub { margin: 18px 0 0; }
.paynote { margin: 22px 0 0; padding: 14px 18px; border-radius: 16px; background: var(--mint); font-weight: 600; color: var(--navy); }
.co__none { padding: 30px 0 10px; }

/* ── narrower screens ── */
@media (max-width: 1535px) {
	.hdr__logo img { height: 50px; }
	.nav__a { padding: 0 10px; }
}
@media (max-width: 1365px) {
	.hdr__logo img { height: 46px; }
	.hdr__in { height: 74px; gap: 10px; }
	.nav__a { padding: 0 9px; font-size: .875rem; }
	.nav__a .ic { display: none; }
}
@media (max-width: 1179px) {
	.nav { display: none; }
	.hdr__in { height: 70px; }
	.hdr__act { margin-left: auto; }
	.burger { display: inline-flex; }
	.hdr__logo img { height: 46px; }
}
@media (max-width: 900px) {
	html { scroll-padding-top: 90px; }
	.hbtn__num { display: none; }
	.hbtn__word { display: inline; }
	.hero__grid, .split, .split--mid, .pick, .hs, .disc, .visit, .contact, .cinfo, .build__grid { grid-template-columns: minmax(0, 1fr); }
	.split--flip > :first-child { order: 0; }
	.split__img--tall { max-width: 440px; justify-self: center; width: 100%; }
	.hero { text-align: center; }
	.hero .lead { margin-inline: auto; }
	.hero .btns { justify-content: center; }
	.ways { grid-template-columns: minmax(0, 1fr); }
	.way__img { aspect-ratio: 16 / 10; }
	.wl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.boxes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.boxes--tall { grid-template-columns: minmax(0, 1fr); }
	.pick .wtabs { justify-content: center; }
	.pick__stage { padding-bottom: 30px; }
	.pick__cards { min-height: 0; }
	.sum { position: static; order: -1; }
	.pp__grid, .co { grid-template-columns: minmax(0, 1fr); }
	.cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gal, .co__sum { position: static; }
	.co__sum { order: -1; }
	.prods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sum__jugs { min-height: 0; }
	.ftr__grid { grid-template-columns: 1fr 1fr; }
	.map, .map iframe { min-height: 340px; }
	.only { grid-template-columns: 1fr 1fr; }
	.only > div { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.hdr__act .btn { display: none; }
}
@media (max-width: 640px) {
	.wrap, .wrap--mid, .wrap--form, .hdr .wrap { width: calc(100% - 32px); }
	.hdr__in { height: 64px; }
	.hdr__logo img { height: 40px; }
	.hdr.is-stuck .hdr__in { height: 58px; }
	.hdr.is-stuck .hdr__logo img { height: 36px; }
	.hdr__act .btn { display: none; }
	/* a phone: three square buttons, each with its word under its sign */
	.hdr__in { gap: 8px; }
	.hdr__act { gap: 6px; }
	/* each as wide as its word needs, with air on both sides (owner 2026-10-09: "the word account is very swueezed in there lets add some more room on the buttons") */
	.hbtn, .burger { flex-direction: column; justify-content: center; gap: 5px; width: auto; min-width: 58px; height: 52px; padding: 0 12px; border-radius: 14px; font-size: .8125rem; letter-spacing: 0; }
	.hbtn .ic { width: 19px; height: 19px; }
	.hbtn__num { display: none; }
	.hbtn__word { display: inline; }
	.burger__ic { gap: 4px; }
	.burger i { width: 19px; }
	.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
	.btn { min-height: 54px; padding: 0 24px; }
	.jugbox, .hero .jugbox { width: min(72%, 270px); height: auto; }
	.wtab { height: 44px; padding: 0 14px 0 12px; font-size: .875rem; }
	.form__grid { grid-template-columns: minmax(0, 1fr); }
	.prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.cat__img { height: 140px; padding: 14px; }
	.cat__txt { padding: 14px 18px; }
	.cat__txt b { font-size: 1.125rem; }
	.prod__txt { padding: 14px 14px 16px; }
	.prod__txt b { font-size: .9375rem; }
	.prod__img img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
	.gal__main img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
	.gal__thumbs button { width: 62px; height: 62px; }
	.cart__head, .cart__foot { padding-inline: 18px; }
	.cart__body { padding-inline: 18px; }
	.fs--water .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.build__row { gap: 0 24px; }
	.marks li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; font-size: .9375rem; }
	.hero .wtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 300px); }
	.hero .wtab { justify-content: center; }
	.boxes--link a { padding: 18px; gap: 12px; }
	.fs--grid .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fs--grid .opt > span { width: 100%; justify-content: center; padding: 8px 10px; text-align: center; font-size: .875rem; }
	.boxes li { padding: 18px; font-size: 1rem; }
	.boxes--3.boxes--sm li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; font-size: .9375rem; }
	.boxes--info { grid-template-columns: minmax(0, 1fr); }
	.wl li { padding: 20px; }
	.perks li { padding: 16px; }
	.perks b { font-size: 1.375rem; }
	.perks span { font-size: .9375rem; }
	.duo { grid-template-columns: minmax(0, 1fr); }
	.seg button { padding: 0 16px; }
	.areas li { padding: 14px 18px; font-size: 1.0625rem; }
	.soc--big a { height: 58px; padding: 0 22px; }
	.ftr__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.form__end { flex-direction: column; align-items: stretch; }
	.form__end .btn, .sqp-guard__btn { width: 100%; justify-content: center; }
	.only { padding: 22px; gap: 14px 20px; }
	.rm text { font-size: 25px; }
	.amap__p text { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
	.js [data-r] { opacity: 1; transform: none; }
}

/* ══ 2026-10-08: calmer, and the pages the owner built ══
   Her words: "lets tone it down a bit the bubbles and stuff and the hero lets do a better page for it - hero lets do a
   photo from their website". So: no bubbles or drifting leaves any more (their canvases are gone from the pages), the
   bottle, the pH bar, the price switch, the calendar, the films and the
   cut-open house are off the pages, and nothing grows or slides under the pointer. */
/* (the waves between sections move again since 2026-10-08 evening: "i liked some of the animation ike the waves etc") */
.btn:hover .ic:last-child, .mega__c:hover img, .mega__c:hover .ic, .way:hover .way__img img, .way:hover .way__go .ic, .boxes--link a:hover .ic:last-child, .cat:hover .cat__txt .ic, .prod:hover .prod__img img { transform: none; }
.way:hover { box-shadow: inset 0 0 0 2px var(--blue); }
.way__img img { object-position: var(--pos, 50% 30%); }

/* a page opens with a photo from their own pages beside the words; nothing is written on the photo */
.phx { position: relative; overflow: hidden; padding: clamp(36px, 4.4vw, 68px) 0 calc(var(--wv) + clamp(40px, 5vw, 72px)); background: linear-gradient(180deg, #f6fbff, #eaf6fe); }
.phx__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.phx h1 { font-size: clamp(2.3rem, 4.5vw, 4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.phx h1 em { font-style: normal; color: var(--blue); }
.phx .lead { max-width: 34em; margin: 24px 0 0; }
.phx__img { margin: 0; justify-self: center; width: 100%; max-width: 520px; border-radius: calc(var(--r) + 8px); overflow: hidden; background: #dfeefa; box-shadow: 0 50px 80px -48px rgba(21, 28, 75, .55); }
.phx__img img { width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - 210px); min-height: 320px; object-fit: cover; object-position: var(--pos, 50% 22%); }
.phx--sq .phx__img { max-width: 480px; }
.phx--sq .phx__img img { aspect-ratio: 1; }
.btn--ghost .ic:first-child { color: var(--leaf); }

/* Our Water Types: four cards side by side */
.wts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wt { display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 28px; background: #fff; border-top: 6px solid var(--c); box-shadow: inset 0 0 0 1px var(--line), 0 40px 70px -56px rgba(21, 28, 75, .45); }
.wt__dot { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 .8125rem/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.wt__dot i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.wt h3 { font-size: 1.75rem; }
.wt__kind { margin: 6px 0 14px; font: 600 .9375rem/1.3 var(--head); color: var(--navy); }
.wt > p { margin-bottom: 10px; }
.wt .ticks { margin: 4px 0 20px; }
.wt .ticks li { padding: 6px 0; font-size: .9688rem; }
.wt__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: auto 0 0 !important; padding-top: 18px; border-top: 1px solid var(--line); color: var(--navy); }
.wt__price b { font: 800 2rem/1 var(--head); letter-spacing: -.03em; }
.wt__price span { font: 600 1rem/1 var(--head); }
.wt__price small { flex-basis: 100%; margin-top: 6px; font-size: .875rem; color: var(--mute); }
.uses { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin-inline: auto; }
.uses li { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 20px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line); font: 600 1rem/1.2 var(--head); color: var(--navy); }
.uses .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #dbf3e5; color: var(--leaf); stroke-width: 2.8; }
.split__img--flyer { justify-self: center; width: 100%; max-width: 520px; }
.split__img--sq, .split__img--port { justify-self: center; width: 100%; max-width: 500px; }
.split__img--port img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%; }
.split__note { margin: 22px 0 0; font: 600 1.0625rem/1.45 var(--head); letter-spacing: -.01em; color: var(--navy); }
.split__txt .lead { margin-bottom: 0; }

/* Regular / Discount 50%: both columns at once, on a white card */
.pcard { padding: clamp(18px, 2.6vw, 30px); border-radius: 28px; background: #fff; box-shadow: 0 44px 70px -50px rgba(0, 0, 0, .5); }
.ptable { width: 100%; border-collapse: collapse; font: 600 1.0625rem/1.3 var(--head); color: var(--navy); }
.ptable th, .ptable td { padding: 14px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.ptable thead th { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #566089; }
.ptable tbody th { white-space: nowrap; }
.ptable tbody th i { display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; background: var(--c); }
.ptable small { display: block; font: 500 .8rem/1.3 var(--body); color: #566089; }
.ptable td:last-child { color: var(--leaf); }
.pcard__sp { display: grid; gap: 2px; margin: 16px 0 0; padding: 0 10px; color: var(--navy); }
.pcard__sp b { font: 700 1.0625rem/1.3 var(--head); }
.pcard__sp span { font-size: .9375rem; color: #566089; }
.pcard__sp em { font: 700 1rem/1.3 var(--head); font-style: normal; color: var(--leaf); }
.perks--row { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 22px; }
.perks--row li:first-child { grid-column: auto; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.perks--row li:first-child small { color: #c3cdf2; }
.disc__close { margin: 34px 0 0; text-align: center; font: 700 clamp(1.4rem, 2.6vw, 2rem)/1.2 var(--head); letter-spacing: -.02em; color: #fff; }

/* Build Your Water Delivery Plan */
.plan__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(22px, 3vw, 44px); align-items: start; }
.plan__step { padding: clamp(20px, 3vw, 36px); margin-bottom: 18px; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.plan__n { margin: 0 0 8px; font: 700 .8125rem/1.3 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.plan__step h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; }
.plan__step > .hint { margin: 10px 0 0; font-size: 1rem; }
.plan__step .fs { margin: 22px 0 0; }
.plan__step .fs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.pw { padding: 20px; border-radius: 22px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); border-top: 5px solid var(--c); }
.pw__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; }
.pw__head i { display: none; }
.pw__head h3 { font-size: 1.35rem; }
.pw__head p { grid-column: 1; margin: 2px 0 0; font-size: .9rem; color: #566089; }
.pw__head b { grid-column: 2; grid-row: 1; font: 800 1.35rem/1 var(--head); color: var(--navy); }
.pw__head small { grid-column: 2; grid-row: 2; font-size: .78rem; color: #566089; text-align: right; }
.pw__qs { display: grid; gap: 10px; margin-top: 16px; }
.pw__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 1rem/1.2 var(--head); color: var(--navy); }
.pw__q .stepper { background: #fff; }
.pw__q .stepper input { width: 46px; }
.fs--stack .opts { display: grid; gap: 10px; }
.fs--stack .opt > span, .fs--disp .opt > span { width: 100%; min-height: 56px; border-radius: 18px; }
.fs--disp .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fs--disp .opt > span { flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 18px; }
.fs--disp small { font: 500 .85rem/1.3 var(--body); opacity: .85; }
.plan__sum { position: sticky; top: 118px; padding: clamp(20px, 2.6vw, 30px); border-radius: 28px; background: var(--deep); color: #dbe2fb; }
.plan__sum h2 { font-size: 1.5rem; color: #fff; }
.plan__lines { margin: 16px 0 0; }
.plan__lines li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-weight: 500; }
.plan__lines b { flex: none; color: #fff; }
.plan__lines .is-none { color: #aab5e2; }
.plan__tot { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 16px 0 0; font: 600 1rem/1.3 var(--head); color: #fff; }
.plan__tot b { font: 800 1.7rem/1 var(--head); }
.plan__facts { margin: 12px 0 0; }
.plan__facts li { padding: 6px 0; font-weight: 500; }
.plan__need { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .1); font-weight: 600; color: #fff; }
.plan__need:empty { display: none; }
.plan__sum .btn { width: 100%; margin-top: 16px; background: #fff; color: var(--navy); }
.plan__sum .btn[disabled] { opacity: .45; cursor: not-allowed; }
.plan__sum .paynote { margin: 14px 0 0; padding: 12px 14px; background: rgba(255, 255, 255, .08); font-size: .875rem; font-weight: 500; color: #dbe2fb; }
.plan [data-plan-you] { margin-top: 22px; }
@media (max-width: 1100px) { .wts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .perks--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
	.plan__grid { grid-template-columns: minmax(0, 1fr); }
	.plan__sum { position: static; }
	/* on a phone the review follows step 5 and the form comes after it */
	.plan__main { display: contents; }
	.plan__grid > .plan__sum { order: 5; }
	.plan__step { order: 1; }
	.plan__step#you { order: 6; }
}
@media (max-width: 900px) {
	.phx__grid { grid-template-columns: minmax(0, 1fr); }
	.phx__img { order: -1; max-width: 460px; }
	.phx__img img { aspect-ratio: 5 / 4; max-height: none; min-height: 0; }
	.phx--sq .phx__img img { aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) { .ptable th, .ptable td { padding: 12px 6px; } .ptable { font-size: 1rem; } .wts, .pws, .perks--row, .fs--disp .opts { grid-template-columns: minmax(0, 1fr); } .plan__step { border-radius: 22px; } .uses { justify-content: flex-start; } }
/* the poster's own content, written out under "Delivery Your Way" */
.biz { margin-top: clamp(56px, 7vw, 100px); }
.biz .hd { margin-bottom: clamp(26px, 3.4vw, 44px); }
.biz .boxes li { background: #fff; }
.boxes--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.boxes--mid li { align-items: center; text-align: center; }
.biz__t { margin: clamp(34px, 4.4vw, 56px) 0 18px; text-align: center; font-size: 1.5rem; }
.biz__tag { margin: 28px 0 0; text-align: center; font: 700 1.25rem/1.3 var(--head); letter-spacing: -.01em; color: var(--navy); }
.biz__tag span { color: var(--leaf); margin-left: .4em; }
.boxes--tall.boxes--link .ic:last-child { width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; color: var(--leaf); }
@media (max-width: 1100px) { .boxes--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .biz .boxes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .boxes--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .biz__tag span { display: block; margin: 4px 0 0; } }
/* three short choices side by side on a phone: the icon sits above its word so the word has room */
@media (max-width: 620px) { .split__txt .boxes--3.boxes--sm li { flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; text-align: center; font-size: .9375rem; } }
/* the picture menus: each card says which part of its photo to show (heads and subjects stay in the card) */
.mega__c img { object-position: var(--pos, 50% 50%); }
.mega__c--prod img { object-position: 50% 50%; }
/* the price table fills its card: three columns that share the width, the two prices set to the right */
.ptable { table-layout: fixed; }
.ptable thead td, .ptable tbody th { width: 44%; }
.ptable th:nth-child(n+2), .ptable td:nth-child(n+2) { text-align: right; }
.ptable tbody th { white-space: normal; }
.ptable tbody th small { margin: 2px 0 0 22px; font-weight: 500; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable td { font-size: 1.25rem; font-weight: 700; }
/* the shop's category tiles are whole cards: a clear edge and shadow, the pictures and the name in one white card,
   a round arrow instead of a tinted strip that read as a separate button (owner 2026-10-08: "the way the items are
   set up likt eh button is strange? should they be more in a card? i cant see ?") */
.cat { background: #fff; box-shadow: inset 0 0 0 1.5px #cfdfee, 0 36px 60px -44px rgba(21, 28, 75, .5); }
.cat:hover { box-shadow: inset 0 0 0 2px var(--leaf), 0 36px 60px -44px rgba(21, 28, 75, .5); }
.cat__img { height: clamp(160px, 15vw, 210px); padding: 24px 24px 6px; }
.cat__txt { padding: 14px 20px 20px 24px; border-top: 0; background: #fff; }
.cat__txt b { font-size: 1.35rem; }
.cat__txt .ic { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: var(--leaf); color: #fff; }
/* every picture-menu card has a real border and a line above its name, so a product shot on white reads as a card
   like the photos beside it (owner 2026-10-08: "it need a border cause the ones that have white just look strange") */
.mega__c { border: 1.5px solid #c6d9ea; box-shadow: 0 22px 40px -32px rgba(21, 28, 75, .45); }
.mega__c span { border-top: 1.5px solid #c6d9ea; }
.mega__c:hover { border-color: var(--leaf); }
/* the same on the shop pages: product cards and category cards have a real border (their pictures are on white, so a
   card without one has no edge) and a line above the name (owner 2026-10-08: "same thing for shop page") */
.prod { border: 1.5px solid #c6d9ea; box-shadow: 0 26px 44px -34px rgba(21, 28, 75, .45); }
.prod:hover { border-color: var(--leaf); box-shadow: 0 26px 44px -34px rgba(21, 28, 75, .45); }
.prod__txt { border-top: 1.5px solid #c6d9ea; }
.cat { border: 1.5px solid #c6d9ea; box-shadow: 0 36px 60px -44px rgba(21, 28, 75, .5); }
.cat:hover { border-color: var(--leaf); box-shadow: 0 36px 60px -44px rgba(21, 28, 75, .5); }
/* ── product pages: where you are, what goes well with it, what else to look at (2026-10-08) ── */
.crumbs { margin: 0 0 clamp(18px, 2.4vw, 30px); font: 600 .9375rem/1.4 var(--head); color: var(--navy); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin: 0 10px; color: #7b86ad; font-weight: 500; }
.crumbs a { color: var(--leaf); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: #566089; }
.crumbs--mid { margin-bottom: 14px; }
.crumbs--mid ol { justify-content: center; }
.gal__main { border: 1.5px solid #c6d9ea; box-shadow: none; }
.gw { margin-top: 30px; padding: 20px; border: 1.5px solid #c6d9ea; border-radius: 24px; background: var(--mist); }
.gw h2 { margin: 0 0 12px; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.gw__i { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gw__i + .gw__i { margin-top: 8px; }
.gw__pic { display: block; width: 64px; height: 64px; border-radius: 12px; background: #fff; overflow: hidden; }
.gw__pic img { width: 100%; height: 100%; object-fit: contain; }
.gw__t { margin: 0; min-width: 0; font: 600 .9688rem/1.3 var(--head); letter-spacing: -.01em; color: var(--navy); }
.gw__t a:hover { text-decoration: underline; }
.gw__t span { display: block; margin-top: 3px; font-weight: 700; color: var(--leaf); }
.gw .btn--sm { min-height: 42px; padding: 0 16px; }
.rec .hd { margin-bottom: clamp(22px, 3vw, 36px); }
.rec .hd h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
@media (max-width: 900px) { .rec .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .gw__i { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; } .gw__pic { width: 52px; height: 52px; } }
/* ── what the client's dashboard can show on the site (2026-10-08) ── */
.dwhere { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: clamp(30px, 4vw, 48px) 0 0; }
.dwhere b { flex-basis: 100%; text-align: center; font: 700 1.25rem/1.3 var(--head); color: var(--navy); margin-bottom: 6px; }
.dwhere span { display: inline-flex; align-items: center; min-height: 42px; padding: 6px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 600 .9688rem/1.2 var(--head); color: var(--navy); }
.prod__img { position: relative; }
.prod__tag { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--navy); color: #fff; font: 700 .78rem/1 var(--head); font-style: normal; letter-spacing: .04em; }
.prod--out .prod__img img { opacity: .55; }
.outnote { margin: 0; padding: 16px 18px; border-radius: 18px; background: var(--mist); box-shadow: inset 0 0 0 1.5px #c6d9ea; color: var(--navy); }
.outnote b { display: block; font: 700 1.125rem/1.3 var(--head); }
.draftbar { position: sticky; top: 0; z-index: 200; margin: 0; padding: 10px 16px; background: #1a2052; color: #fff; text-align: center; font: 600 .9375rem/1.3 var(--head); }


@media (max-width: 389px) {
	.hbtn, .burger { min-width: 56px; padding: 0 10px; }
}
@media (max-width: 374px) {
	.hdr__act { gap: 4px; }
	.hbtn, .burger { min-width: 52px; padding: 0 8px; font-size: .78125rem; }
}
@media (max-width: 359px) {
	.hbtn--acct { display: none; }   /* a very narrow phone: Account is in the menu */
}

/* ── Delivery charges by distance (the client's table, 2026-10-10): the five zones, and a box that works out a visitor's own
      charge from their street and ZIP (the same line sits under the address of the delivery plan). ── */
.zones { width: 100%; margin-top: 18px; border-collapse: collapse; font: 600 1.0625rem/1.3 var(--head); color: var(--navy); }
.zones th, .zones td { padding: 14px 10px; text-align: left; border-bottom: 1px solid #cfe6d9; }
.zones thead th { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #566089; }
.zones tbody td { font-weight: 500; color: var(--text); }
.zones td:last-child, .zones thead th:last-child { text-align: right; }
.zones tbody td:last-child { font-weight: 700; color: var(--leaf); white-space: nowrap; }
.feebox { display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: #fff; box-shadow: 0 24px 50px -30px rgba(21, 28, 75, .35), inset 0 0 0 1px var(--line); }
.feebox h3 { margin: 0; font-size: 1.35rem; color: var(--navy); }
.feebox .btn { justify-self: start; }
.feebox .hint { margin: 0; }
.feebox__out:empty { display: none; }
.feebox__out, .plan__fee { margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--sky); color: var(--ink); font-weight: 600; line-height: 1.45; }
.feebox__out.is-ok, .plan__fee.is-ok { background: var(--mint); box-shadow: inset 0 0 0 1.5px #9fd6b6; color: #14532f; }
.feebox__out.is-bad, .plan__fee.is-bad { background: #fff4e5; box-shadow: inset 0 0 0 1.5px #f0c98a; color: #6b3d00; }
.plan__fee { font-weight: 500; }
.plan__fee.is-ok, .plan__fee.is-bad { font-weight: 600; }
@media (max-width: 620px) { .zones th, .zones td { padding: 12px 6px; } .zones { font-size: 1rem; } .feebox .btn { justify-self: stretch; justify-content: center; } }
/* "Your Plan" with the delivery charge known (Meg, 2026-10-10: "i want the total"): water, delivery charge, then the total of the two */
.plan__tot[hidden] { display: none; }
.plan__sum.has-fee .plan__tot:not(.plan__tot--all) { margin-top: 12px; font-weight: 500; color: #dbe2fb; }
.plan__sum.has-fee .plan__tot:not(.plan__tot--all) b { font: 700 1.15rem/1 var(--head); color: #fff; }
.plan__tot--fee small { display: block; margin-top: 2px; font: 500 .85rem/1.3 var(--body); color: #b9c4ee; }
.plan__tot--all { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .24); }

/* ── 2026-10-13: the client's delivery promotion and the sales tax line (his own words) ── */
.promo { margin: 0 0 28px; padding: clamp(20px, 3vw, 30px); border-radius: 28px; background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--leaf2); color: var(--navy); }
.promo p { margin: 10px 0 0; }
.promo .promo__k { margin: 0; font: 700 .8125rem/1.3 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.promo .promo__big { margin: 8px 0 0; font: 700 clamp(1.3rem, 2.6vw, 1.9rem)/1.15 var(--head); color: var(--deep); }
.promo .promo__fine { font-size: .875rem; color: var(--text); }
.split__txt .promo { margin: 24px 0 0; }
.taxnote { margin-top: 14px; }
.shopnote.taxnote { margin-top: 28px; font-weight: 400; font-size: .9375rem; color: var(--text); }
/* The header button now reads "Submit Delivery Request" (the client's wording), ten letters longer than before:
   in the two widths where the header is tightest it is set a little smaller so the page never scrolls sideways. */
@media (min-width: 1180px) and (max-width: 1320px) { .hdr__act .btn--sm { padding: 0 12px; font-size: .8125rem; } }
@media (min-width: 761px) and (max-width: 900px) { .hdr__act .btn--sm { padding: 0 12px; font-size: .8125rem; } }
@media (min-width: 1180px) and (max-width: 1215px) { .hdr__in { gap: 6px; } .hdr__act { gap: 4px; } .hdr__tel { padding: 0 8px; } }
@media (min-width: 761px) and (max-width: 800px) { .hdr__act { gap: 4px; } .hdr__tel { padding: 0 8px; } }

/* A leased dispenser (the client, 2026-10-13): its monthly price and the one-time deposit are lines of "Your Plan" as
   soon as it is chosen, before the address is in; the note under the total says what the later deliveries come to. */
.plan__sum .plan__tot--fee { margin-top: 12px; font-weight: 500; color: #dbe2fb; }
.plan__sum .plan__tot--fee b { font: 700 1.15rem/1 var(--head); color: #fff; white-space: nowrap; }
.plan__after { margin: 8px 0 0; font: 500 .9rem/1.4 var(--body); color: #b9c4ee; }
.plan__after[hidden], .plan__dep[hidden] { display: none; }
.plan__dep { margin: 12px 0 0; font: 500 .95rem/1.4 var(--body); }