@charset "UTF-8";
/* Banja Kulaši — site styles. Colors, fonts, spacing and radii come from tokens.css (generated). */

/* ---------- Base ---------- */
:root {
  --gutter: clamp(var(--space-4), 4vw, var(--space-12));
  --section: clamp(var(--space-16), 9vw, var(--space-24));
  --container: 1200px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Fluid type: the max of each step is the design-system token size. */
  --fs-display-xl: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);
  --fs-display-l: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
  --fs-quote: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-figure: clamp(2.25rem, 1.8rem + 1.8vw, 2.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.625;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.on-deep :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .panel :focus-visible, .drawer :focus-visible { outline-color: var(--brass-fill); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-4); color: var(--on-brand); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typography ---------- */
.display-xl, .display-l, .h1, .h2, .quote { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
.display-xl { font-size: var(--fs-display-xl); line-height: 1.05; letter-spacing: -.01em; }
.display-l { font-size: var(--fs-display-l); line-height: 1.08; letter-spacing: -.01em; }
.h1 { font-size: var(--fs-h1); line-height: 1.15; }
.h2 { font-size: var(--fs-h2); line-height: 1.2; }
.h3 { font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.4; font-weight: 600; }
.quote { font-size: var(--fs-quote); line-height: 1.42; }
.eyebrow {
  font-family: var(--font-sans); font-size: .75rem; line-height: 1.33; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass);
}
.lead { font-size: 1.125rem; line-height: 1.67; }
.body-s { font-size: .875rem; line-height: 1.57; }
.caption { font-size: .75rem; line-height: 1.5; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.figure { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-figure); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.data { font-family: var(--font-mono); font-size: .875rem; line-height: 1.43; font-variant-numeric: tabular-nums; }
.prose { max-width: 36rem; display: grid; gap: var(--space-4); }
.prose p { color: var(--ink); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--compact { padding-block: clamp(var(--space-12), 6vw, var(--space-16)); }
.section--compact > .container > .intro:last-child { margin-bottom: 0; }
.section--tint { background: var(--mineral-100); }
.section--sunken { background: var(--surface-sunken); }
.section--raised { background: var(--surface-raised); }
.stack { display: grid; gap: var(--space-4); }
.stack-lg { display: grid; gap: var(--space-8); }

/* Eyebrow + heading + text intro, left aligned (or centered with --center). */
.intro { display: grid; gap: var(--space-4); max-width: 44rem; margin-bottom: clamp(var(--space-8), 5vw, var(--space-12)); }
.intro .eyebrow { margin-bottom: calc(var(--space-2) * -1); }
.intro--center { margin-inline: auto; text-align: center; justify-items: center; }
.intro--split { max-width: none; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .intro--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-12); } }
.intro--top { align-items: start; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  font: 500 .875rem/1.43 var(--font-sans); letter-spacing: .02em;
  border-radius: var(--radius-md); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn--outline { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--light { border-color: color-mix(in srgb, var(--on-deep) 70%, transparent); color: var(--on-deep); background: transparent; }
.btn--light:hover { background: var(--on-deep); color: var(--surface-deep); }
.btn--brass { background: var(--brass-fill); color: var(--on-brass); }
.btn--brass:hover { background: var(--on-deep); color: var(--surface-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 .875rem/1.43 var(--font-sans); letter-spacing: .02em;
  color: var(--brand); text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform .25s var(--ease); }
.link-arrow:hover::after, a:hover .link-arrow::after { transform: translateX(4px); }
.on-deep .link-arrow { color: var(--on-deep); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--ink);
  transition: transform .4s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.announce {
  background: var(--surface-deep); color: var(--on-deep);
  font-size: .8125rem; line-height: 1.4; text-align: center;
  padding: var(--space-2) var(--gutter);
}
.announce a { color: var(--on-deep); font-weight: 600; margin-left: var(--space-2); }
.announce a:hover { color: var(--brass-fill); }
.navbar {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.navbar__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: var(--header-h); gap: var(--space-4);
}
.brand-mark { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; justify-self: center; }
.brand-mark img { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.brand-mark span { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.brand-mark:hover { color: inherit; }

/* Transparent state over a hero image */
.has-hero .site-header:not(.is-solid) .navbar { background: transparent; border-color: transparent; color: var(--on-deep); }
.has-hero .site-header:not(.is-solid) .navbar::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--surface-deep) 55%, transparent), transparent);
}
.site-header.is-solid .navbar { box-shadow: var(--shadow-raised); }

.nav { display: none; }
.nav__list { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.nav__link, .nav__toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-3);
  font: 500 .875rem/1 var(--font-sans); letter-spacing: .02em;
  color: inherit; background: none; border: 0; cursor: pointer; text-decoration: none; border-radius: var(--radius-sm);
}
.nav__link:hover, .nav__toggle:hover, .nav__toggle[aria-expanded="true"] { color: inherit; text-decoration: underline; text-underline-offset: 6px; }
.nav__link[aria-current="page"], .nav__item:has(.nav-panel [aria-current="page"]) > .nav__toggle { text-decoration: underline; text-underline-offset: 6px; }
.nav__social { display: flex; align-items: center; gap: 2px; margin-left: var(--space-2); padding-left: var(--space-3); border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: inherit; border-radius: var(--radius-pill); opacity: .85; transition: opacity .2s var(--ease), background-color .2s var(--ease); }
.social-link:hover, .social-link:focus-visible { color: inherit; opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.nav__toggle::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.nav__toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

.nav-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface-raised); color: var(--ink);
  border-top: 1px solid var(--line); box-shadow: var(--shadow-raised);
}
.nav-panel__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--space-12); align-items: start; padding-block: var(--space-8) var(--space-12); }
.nav-panel__links { display: grid; grid-template-columns: 1fr; align-content: start; list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.nav-panel__links li + li { border-top: 1px solid var(--line); }
.nav-panel__links a { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-6); row-gap: 2px; align-items: center; padding: var(--space-4) var(--space-2); text-decoration: none; color: var(--ink); }
.nav-panel__links a::after { content: "\2192"; grid-column: 2; grid-row: 1 / span 2; font-size: 1.25rem; color: var(--brand); opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.nav-panel__links a:hover, .nav-panel__links a:focus-visible { color: var(--ink); }
.nav-panel__links a:hover::after, .nav-panel__links a:focus-visible::after { opacity: 1; transform: none; }
.nav-panel__links a:hover strong { color: var(--brand); }
.nav-panel__links a[aria-current="page"] strong { color: var(--brass); }
.nav-panel__links a[aria-current="page"]::after { content: "\2022"; opacity: 1; transform: none; color: var(--brass); }
.nav-panel__links strong { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.3; transition: color .25s var(--ease); }
.nav-panel__links span { font-size: .875rem; color: var(--ink-muted); }
.nav-panel__feature { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; color: var(--on-deep); text-decoration: none; }
.nav-panel__feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.nav-panel__feature:hover img { transform: scale(1.04); }
.nav-panel__feature span { position: absolute; inset: auto 0 0 0; padding: var(--space-8) var(--space-6) var(--space-6); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; text-wrap: balance; background: linear-gradient(to top, color-mix(in srgb, var(--surface-deep) 85%, transparent), transparent); }
.nav-panel__feature:hover { color: var(--on-deep); }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; font: 600 .75rem/1 var(--font-sans); letter-spacing: .12em; }
.lang-switch a, .lang-switch span { padding: 10px 8px; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.lang-switch [aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.lang-switch a { opacity: .75; }
.lang-switch a:hover { opacity: 1; color: inherit; }

.menu-btn {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2);
  background: none; border: 0; color: inherit; font: 500 .875rem/1 var(--font-sans); cursor: pointer;
}
.menu-btn__bars { width: 22px; display: grid; gap: 5px; }
.menu-btn__bars span { height: 1.5px; background: currentColor; }

@media (min-width: 1080px) {
  .nav { display: block; justify-self: start; }
  .menu-btn { display: none; }
}
@media (max-width: 640px) {
  .brand-mark span { display: none; }
  /* Hidden visually but kept as the button's accessible name */
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: var(--surface-deep); color: var(--on-deep);
  padding: var(--space-4) var(--gutter) var(--space-12);
}
.drawer__top { display: flex; justify-content: space-between; align-items: center; min-height: 60px; }
.drawer__close { background: none; border: 0; color: inherit; font: 500 .875rem/1 var(--font-sans); min-height: 44px; padding: 0 var(--space-2); cursor: pointer; display: inline-flex; gap: var(--space-2); align-items: center; }
.drawer__close::before { content: "\2715"; font-size: 1rem; }
.drawer nav { margin-top: var(--space-8); display: grid; gap: var(--space-2); }
.drawer details { border-bottom: 1px solid color-mix(in srgb, var(--on-deep-muted) 35%, transparent); }
.drawer summary, .drawer__link { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; font-family: var(--font-display); font-size: 1.75rem; cursor: pointer; list-style: none; color: var(--on-deep); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--on-deep-muted) 35%, transparent); }
.drawer details summary { border-bottom: 0; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; font-family: var(--font-sans); font-size: 1.5rem; }
.drawer details[open] summary::after { content: "\2013"; }
.drawer details ul { list-style: none; margin: 0; padding: 0 0 var(--space-4); display: grid; gap: var(--space-1); }
.drawer details a { display: block; padding: var(--space-2) 0; color: var(--on-deep-muted); text-decoration: none; font-size: 1.0625rem; }
.drawer details a:hover, .drawer__link:hover { color: var(--on-deep); }
.drawer__home { display: inline-block; border-radius: var(--radius-sm); }
.drawer__home img { border-radius: var(--radius-sm); }
.drawer [aria-current="page"] { color: var(--brass-fill); }
.drawer__contact { margin-top: var(--space-12); display: grid; gap: var(--space-2); justify-items: start; }
.drawer__contact .eyebrow { color: var(--brass-fill); }
.drawer__contact a.drawer__phone { font: 500 1.75rem/1.2 var(--font-mono); color: var(--on-deep); text-decoration: none; white-space: nowrap; }
.drawer__contact a.drawer__mail { color: var(--on-deep-muted); }
.drawer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.drawer__social .social-link { width: 44px; height: 44px; color: var(--on-deep); border: 1px solid color-mix(in srgb, var(--on-deep-muted) 45%, transparent); }
.drawer__lang { margin-top: var(--space-6); display: inline-flex; border: 1px solid color-mix(in srgb, var(--on-deep-muted) 45%, transparent); border-radius: var(--radius-pill); overflow: hidden; }
.drawer__lang a, .drawer__lang span { padding: 12px 20px; font: 600 .75rem/1 var(--font-sans); letter-spacing: .14em; color: var(--on-deep); text-decoration: none; }
.drawer__lang span[aria-current="true"] { background: var(--on-deep); color: var(--surface-deep); }
.drawer__lang a:hover { background: color-mix(in srgb, var(--on-deep) 12%, transparent); }
body.drawer-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; display: grid; min-height: min(100svh, 980px); color: var(--on-deep); background: var(--surface-deep); }
.hero__media, .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__media video { z-index: -1; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__media video.is-playing { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, color-mix(in srgb, var(--surface-deep) 85%, transparent) 0%, color-mix(in srgb, var(--surface-deep) 50%, transparent) 55%, color-mix(in srgb, var(--surface-deep) 50%, transparent) 100%); }
.hero__content { align-self: end; display: grid; justify-items: center; gap: var(--space-6); text-align: center; padding-top: calc(var(--header-h) + 80px); padding-bottom: clamp(var(--space-12), 8vw, var(--space-24)); }
.hero__content .eyebrow { color: var(--on-deep); }
.hero__content .display-xl { max-width: 14ch; }
.hero__content .lead { max-width: 36rem; color: var(--on-deep); }
.hero__scroll { position: absolute; left: 50%; bottom: var(--space-6); translate: -50% 0; width: 1px; height: 40px; background: color-mix(in srgb, var(--on-deep) 50%, transparent); overflow: hidden; }
.hero__scroll::after { content: ""; position: absolute; inset: 0; background: var(--on-deep); animation: scrollcue 2.2s var(--ease) infinite; }
@keyframes scrollcue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.video-toggle { position: absolute; right: var(--gutter); bottom: var(--space-6); z-index: 1; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--on-deep) 60%, transparent); background: transparent; color: var(--on-deep); cursor: pointer; display: grid; place-items: center; }
.video-toggle:hover { background: color-mix(in srgb, var(--on-deep) 15%, transparent); }

/* Shorter hero for inner pages */
.page-hero { min-height: min(72svh, 720px); }
.page-hero .hero__content { justify-items: start; text-align: left; }
.page-hero .display-l { max-width: 18ch; }

/* ---------- Facts + pH meter ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-8) var(--space-6); }
.fact { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--line-strong); }
.fact .figure { color: var(--brand); }
.fact p:not(.figure) { color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }

.ph-meter { margin-top: clamp(var(--space-12), 6vw, var(--space-16)); padding-inline: clamp(28px, 5vw, 64px); }
.ph-meter__title { margin-inline: calc(-1 * clamp(28px, 5vw, 64px)); }
.ph-meter__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-6); }
.ph-meter__track { position: relative; height: 12px; border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--ph-7) 0%, var(--ph-9) 33%, var(--ph-12) 75%, var(--ph-12) 100%); }
.ph-meter__marks { position: relative; height: 92px; }
.ph-mark { position: absolute; top: 0; left: calc((var(--ph) - 7) / 7 * 100%); translate: -50% 0; display: grid; justify-items: center; gap: var(--space-1); text-align: center; width: max-content; max-width: 140px; }
.ph-mark::before { content: ""; width: 1px; height: 14px; background: var(--ink-muted); }
.ph-mark strong { font-family: var(--font-mono); font-weight: 500; font-size: .9375rem; }
.ph-mark span { font-size: .75rem; line-height: 1.35; color: var(--ink-muted); }
.ph-mark--ours strong { color: var(--brand); font-size: 1.125rem; }
.ph-mark--ours::after { content: ""; position: absolute; top: -14px; left: 50%; translate: -50% 0; width: 16px; height: 16px; border-radius: 50%; background: var(--brass-fill); border: 3px solid var(--surface); }
.ph-meter__scale { display: flex; justify-content: space-between; font: .75rem/1 var(--font-mono); color: var(--ink-muted); margin-top: var(--space-2); }
.section--tint .ph-mark--ours::after { border-color: var(--mineral-100); }
@media (max-width: 560px) { .ph-mark span { display: none; } .ph-meter__marks { height: 44px; } }

/* ---------- Sticky stacking panels ---------- */
.panels { position: relative; }
.panel { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: grid; color: var(--on-deep); isolation: isolate; background: var(--surface-deep); }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--surface-deep) 85%, transparent) 0%, color-mix(in srgb, var(--surface-deep) 20%, transparent) 60%, transparent); }
.panel__content { align-self: end; display: grid; gap: var(--space-4); padding-bottom: clamp(var(--space-12), 8vw, var(--space-24)); }
.panel__content > * { max-width: 34rem; }
.panel__count { font: 500 .8125rem/1 var(--font-mono); letter-spacing: .08em; color: var(--on-deep-muted); }
.panel .display-l { color: var(--on-deep); }
.panel p { color: var(--on-deep); }
@media (max-width: 700px) { .panel { height: 88svh; } }

/* ---------- Split with offset images ---------- */
.split { display: grid; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .split--flip > :first-child { order: 2; } }
.offset-pair { position: relative; padding-bottom: 18%; padding-right: 12%; }
.offset-pair img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.offset-pair img + img { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5; border: 6px solid var(--surface); }
.section--tint .offset-pair img + img { border-color: var(--mineral-100); }
.media-frame { border-radius: var(--radius-lg); overflow: hidden; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.arch { border-radius: var(--radius-arch) var(--radius-arch) var(--radius-lg) var(--radius-lg); overflow: hidden; }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding: 6px 12px; border-radius: var(--radius-pill); font: 600 .75rem/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--warning); border: 1px solid currentColor; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-8); padding-block: var(--space-4); border-block: 1px solid var(--line); }
.stat-row div { display: grid; gap: 2px; }
.stat-row .figure { font-size: 2rem; color: var(--brand); }

/* ---------- Deep band with ripples ---------- */
.band-deep { position: relative; overflow: hidden; background: var(--surface-deep); color: var(--on-deep); }
.band-deep .eyebrow { color: var(--brass-fill); }
.band-deep p { color: var(--on-deep); }
.band-deep .muted, .band-deep .caption { color: var(--on-deep-muted); }
.ripples { position: absolute; left: -120px; bottom: -120px; width: 620px; height: 620px; pointer-events: none; opacity: .5; }
.ripples circle { fill: none; stroke: var(--on-deep-muted); stroke-width: 1; }
.band-deep .container { position: relative; }
.band-deep blockquote { border-left: 1px solid var(--brass-fill); padding-left: var(--space-6); display: grid; gap: var(--space-3); }
.band-deep blockquote cite { font-style: normal; font-size: .875rem; color: var(--on-deep-muted); }

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 360px); gap: var(--space-6);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); padding-bottom: var(--space-4);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
@media (min-width: 1300px) { .carousel__track { padding-inline: calc((100vw - var(--container)) / 2); scroll-padding-inline: calc((100vw - var(--container)) / 2); } }
.carousel__track > * { scroll-snap-align: start; }
.carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.carousel__buttons { display: flex; gap: var(--space-2); }
.carousel__btn { width: 48px; height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; font-size: 1.125rem; display: grid; place-items: center; }
.carousel__btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__count { font: 500 .875rem/1 var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- Cards ---------- */
.card { display: grid; gap: var(--space-4); align-content: start; color: var(--ink); text-decoration: none; }
.card:hover { color: var(--ink); }
.card__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-sunken); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.05); }
.card__body { display: grid; gap: var(--space-2); }
.card__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; }
.card p { color: var(--ink-muted); font-size: .9375rem; line-height: 1.55; }

.product-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.product { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.product__media { aspect-ratio: 1; display: grid; place-items: center; background: #ffffff; border-radius: var(--radius-md); overflow: hidden; }
.product__media img { width: 100%; height: 100%; object-fit: contain; }
.product__ph { font: 500 .8125rem/1 var(--font-mono); color: var(--peloid); letter-spacing: .04em; }
.product h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.25; }
.product p { color: var(--ink-muted); font-size: .9375rem; line-height: 1.55; }
.product__placeholder { display: grid; place-items: center; gap: var(--space-2); color: var(--ink-muted); text-align: center; padding: var(--space-6); }
.product__placeholder img { width: 72px; height: 72px; object-fit: contain; }

/* ---------- Icon index ---------- */
.icon-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--space-4); }
.icon-index li { display: grid; }
.icon-index a { display: grid; align-content: start; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); text-decoration: none; color: var(--ink); text-align: center; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.icon-index a:hover { border-color: var(--brand); transform: translateY(-2px); color: var(--ink); }
.icon-index .icon-disc { width: 84px; height: 84px; border-radius: var(--radius-pill); background: #ffffff; display: grid; place-items: center; overflow: hidden; }
.icon-index img { width: 68px; height: 68px; }
.icon-index strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.25; }
.icon-index span { font-size: .8125rem; color: var(--ink-muted); line-height: 1.4; }

/* ---------- Lists, timeline, details ---------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.check-list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; }
.check-list li::before { content: "\2713"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mineral-200); color: var(--brand-strong); font-weight: 700; font-size: .875rem; }
.check-list strong { display: block; font-size: 1.0625rem; margin-bottom: 2px; }
.check-list p { color: var(--ink-muted); font-size: .9375rem; line-height: 1.55; }
.band-deep .check-list li::before { background: color-mix(in srgb, var(--on-deep) 14%, transparent); color: var(--brass-fill); }
.band-deep .check-list p { color: var(--on-deep-muted); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: minmax(84px, 140px) 1fr; gap: var(--space-6); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline .figure { font-size: 1.5rem; color: var(--brass); }
.timeline h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.3; margin-bottom: var(--space-1); }
.timeline p { color: var(--ink-muted); font-size: .9375rem; line-height: 1.55; max-width: 42rem; }

.analysis { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.analysis article { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); display: grid; gap: var(--space-2); align-content: start; }
.analysis .figure { font-size: 1.75rem; color: var(--brand); }
.analysis h3 { font-size: 1rem; font-weight: 600; }
.analysis p { color: var(--ink-muted); font-size: .9375rem; line-height: 1.55; }

.info-list { display: grid; gap: var(--space-4); margin: 0; }
.info-list div { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.info-list dt { color: var(--ink-muted); font-size: .875rem; }
.info-list dd { margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .container { display: grid; justify-items: center; gap: var(--space-6); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-deep); color: var(--on-deep); padding-top: clamp(var(--space-16), 8vw, var(--space-24)); }
.site-footer > .container { position: relative; }
.footer-ripples { position: absolute; right: -300px; top: -320px; width: 640px; height: 640px; pointer-events: none; opacity: .28; z-index: -1; }
.footer-ripples circle { fill: none; stroke: var(--on-deep-muted); stroke-width: 1; }
.site-footer a { color: var(--on-deep); text-decoration: none; }
.site-footer a:hover { color: var(--brass-fill); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .eyebrow { color: var(--brass-fill); }

/* Sign-off: tagline and key facts on the left, reception on the right */
.footer-top { display: grid; gap: var(--space-12); padding-bottom: clamp(var(--space-12), 6vw, var(--space-16)); border-bottom: 1px solid color-mix(in srgb, var(--on-deep-muted) 30%, transparent); }
@media (min-width: 900px) { .footer-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-16); } }
.footer-sign { display: grid; gap: var(--space-4); }
.footer-tagline { font-family: var(--font-display); font-size: var(--fs-display-l); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; color: var(--on-deep); max-width: 14ch; }
.footer-facts { font: 500 .875rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--on-deep-muted); font-variant-numeric: tabular-nums; }
.footer-reception { display: grid; gap: var(--space-2); justify-items: start; }
.site-footer a.footer-phone { font: 500 clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem)/1.15 var(--font-mono); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.footer-reception__more { font-size: .9375rem; color: var(--on-deep-muted); }
.footer-reception__more a { white-space: nowrap; }
.footer-reception__note { font-size: .875rem; color: var(--on-deep-muted); }

/* Link columns */
.footer-grid { display: grid; gap: var(--space-12) var(--space-8); padding-block: clamp(var(--space-12), 6vw, var(--space-16)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer-grid > * { min-width: 0; }
@media (min-width: 1080px) { .footer-grid { grid-template-columns: .8fr 1fr 1fr 1.2fr; } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 1080px) { .footer-brand { grid-column: auto; } }
.footer-brand img { width: 96px; height: 96px; border-radius: var(--radius-md); }
.footer-col h2 { font: 600 .75rem/1.33 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-fill); margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-col li { font-size: .9375rem; line-height: 1.6; color: var(--on-deep-muted); }
.footer-col a[aria-current="page"] { color: var(--brass-fill); }
.footer-col address { font-style: normal; font-size: .9375rem; line-height: 1.6; color: var(--on-deep); }
.footer-col .footer-col__meta { margin-top: var(--space-3); gap: var(--space-1); }

/* Bottom row */
.footer-bottom { padding-block: var(--space-6); border-top: 1px solid color-mix(in srgb, var(--on-deep-muted) 30%, transparent); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); justify-content: space-between; align-items: center; font-size: .8125rem; color: var(--on-deep-muted); }
.footer-bottom__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.footer-follow { color: var(--on-deep-muted); }
.footer-sep { width: 1px; height: 14px; background: color-mix(in srgb, var(--on-deep-muted) 45%, transparent); }

/* ---------- Reveal on scroll (only when JS runs and motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scroll::after { animation: none; }
  .card__media img { transition: none; }
}

/* A deep band that ends the page needs a visible edge against the deep footer. */
main > .band-deep:last-child { border-bottom: 1px solid color-mix(in srgb, var(--on-deep-muted) 30%, transparent); }

/* ---------- Therapy groups (Medicine) ---------- */
.therapy-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.therapy { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.therapy__head { display: grid; gap: var(--space-1); }
.therapy__head .data { color: var(--brass); }
.therapy h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; line-height: 1.2; }
.therapy > p { color: var(--ink-muted); font-size: .9375rem; line-height: 1.55; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips li { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--mineral-100); color: var(--ink); font-size: .875rem; line-height: 1.4; }

/* ---------- Uses (Therapeutic water) ---------- */
.uses { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: none; }
.uses article { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-6); border-top: 2px solid var(--brand); }
.uses h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.25; }
.uses p { color: var(--ink-muted); font-size: .9375rem; line-height: 1.55; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery figure { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); aspect-ratio: 4 / 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .gallery figure { aspect-ratio: auto; }
  .gallery .g-wide { grid-column: span 2; }
  .gallery .g-tall { grid-row: span 2; }
}

/* ---------- Alternating feature rows ---------- */
.rows { display: grid; gap: clamp(var(--space-16), 10vw, var(--space-24)); }
.row-num { font: 500 .8125rem/1 var(--font-mono); letter-spacing: .08em; color: var(--brass); }
.media-frame--portrait img { aspect-ratio: 4 / 5; }
.media-frame--wide img { aspect-ratio: 3 / 2; }

/* ---------- Hero without a photo (pages that have no photography yet) ---------- */
.hero--plain { overflow: hidden; }
.hero--plain::after { display: none; }
.hero--plain .ripples { left: auto; right: -140px; bottom: -220px; z-index: -1; }
/* Plain hero with photos beside the text: the split carries the header offset instead of .hero__content. */
.hero__split { align-self: center; padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(var(--space-12), 6vw, var(--space-16)); }
.hero__split .hero__content { padding: 0; }
.hero__split .offset-pair img + img { border-color: var(--surface-deep); }
.hero__icon { width: 96px; height: 96px; border-radius: var(--radius-pill); background: #ffffff; display: grid; place-items: center; }
.hero__icon img { width: 72px; height: 72px; }
.uses .data { color: var(--brass); }

/* Blocks marked data-confirm hold client content that still needs confirmation. The attribute
   has no styling; list them with: grep -rn 'data-confirm' site/ */


/* ---------- Contact cards ---------- */
.contact-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.contact-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.contact-card .eyebrow { color: var(--brass); }
.contact-card a.data { font-size: 1.125rem; }
.contact-card p { color: var(--ink-muted); font-size: .9375rem; }

/* ---------- Product rows ---------- */
.product-hero { background: #ffffff; border-radius: var(--radius-lg); border: 1px solid var(--line); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.product-hero img { width: 100%; height: 100%; object-fit: contain; }
.product-hero--placeholder { gap: var(--space-2); align-content: center; justify-items: center; color: var(--ink-muted); }
.product-hero--placeholder img { width: 120px; height: 120px; }

/* Phone numbers never break across lines; label/value lists stack on narrow screens. */
a.data, .data a { white-space: nowrap; }
@media (max-width: 520px) {
  .info-list div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---------- Effects (subject-specific; all off for reduced motion, page complete without JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Photos are revealed like water rising, then settle */
  .js .media-frame[data-reveal] img,
  .js .offset-pair[data-reveal] img,
  .js .gallery[data-reveal] img,
  .js .carousel .card__media img {
    clip-path: inset(100% 0 0 0); transform: scale(1.08);
    transition: clip-path 1.4s var(--ease), transform 1.8s var(--ease);
  }
  .js .media-frame[data-reveal].is-in img,
  .js .offset-pair[data-reveal].is-in img,
  .js .gallery[data-reveal].is-in img,
  .js .carousel.is-in .card__media img { clip-path: inset(0 0 0 0); transform: scale(1); }
  .js .offset-pair[data-reveal] img + img,
  .js .gallery[data-reveal] figure:nth-child(2) img { transition-delay: .25s; }
  .js .gallery[data-reveal] figure:nth-child(3) img { transition-delay: .4s; }
  .js .gallery[data-reveal] figure:nth-child(n+4) img { transition-delay: .55s; }
  .js .carousel .card:nth-child(2) .card__media img { transition-delay: .12s; }
  .js .carousel .card:nth-child(3) .card__media img { transition-delay: .24s; }
  .js .carousel .card:nth-child(n+4) .card__media img { transition-delay: .36s; }
  .card:hover .card__media img { transition-delay: 0s; }

  /* 2. The pH scale fills from neutral to alkaline, markers slide into place */
  .js .ph-meter[data-reveal] .ph-meter__track { clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 1.6s var(--ease) .2s; }
  .js .ph-meter[data-reveal].is-in .ph-meter__track { clip-path: inset(0 0 0 0 round 999px); }
  .js .ph-meter[data-reveal] .ph-mark { left: 0; opacity: 0; transition: left 1.6s var(--ease), opacity .6s var(--ease); }
  .js .ph-meter[data-reveal].is-in .ph-mark { left: calc((var(--ph) - 7) / 7 * 100%); opacity: 1; }
  .js .ph-meter[data-reveal].is-in .ph-mark:nth-child(2) { transition-delay: .25s; }
  .js .ph-meter[data-reveal].is-in .ph-mark:nth-child(3) { transition-delay: .5s; }

  /* 3. Ripples spread slowly, like a drop landing on water */
  .ripples circle, .footer-ripples circle { transform-box: fill-box; transform-origin: center; animation: ripple 12s linear infinite; opacity: 0; }
  .ripples circle:nth-child(2), .footer-ripples circle:nth-child(2) { animation-delay: -2.4s; }
  .ripples circle:nth-child(3), .footer-ripples circle:nth-child(3) { animation-delay: -4.8s; }
  .ripples circle:nth-child(4), .footer-ripples circle:nth-child(4) { animation-delay: -7.2s; }
  .ripples circle:nth-child(5), .footer-ripples circle:nth-child(5) { animation-delay: -9.6s; }
  @keyframes ripple {
    0% { transform: scale(.25); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: scale(1.25); opacity: 0; }
  }

  /* 4. Stacked panels: the covered panel dims and its photo eases back (--cover set by main.js) */
  .panel img { transform: scale(calc(1.02 + var(--cover, 0) * .08)); }
  .panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--surface-deep); opacity: calc(var(--cover, 0) * .55); }
  .panel__content { position: relative; z-index: 1; opacity: calc(1 - var(--cover, 0) * .7); }
}

/* 5. Timeline: a gold line grows down the years as the reader scrolls (--progress set by main.js; full without JS) */
.timeline { position: relative; }
.timeline li { padding-left: var(--space-6); }
.timeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.timeline::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--progress, 1) * 100%); background: var(--brass-fill); }

/* ---------- Legend of Kulaš: a four-chapter scroll story (About) ---------- */
/* Without JS (or on phones) both pictures show in order; on desktop with JS the picture is pinned
   and changes with the chapter: weak in the pool (1–2), recovering (3), running free (4). */
.legend__layout { display: grid; gap: var(--space-8); }
.legend__media { margin: 0; display: grid; gap: var(--space-3); }
.legend__frame { display: grid; gap: var(--space-4); }
.legend__img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.legend__caption { min-height: 1.5em; }
.legend__cap--running { display: none; }
.legend__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.legend__step { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.legend__num { font: 500 .8125rem/1 var(--font-mono); letter-spacing: .08em; color: var(--brass); }
.legend__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.2; }
.legend__step p { max-width: 36rem; }
.legend__inline { display: none; margin: 0 0 var(--space-4); }
.legend__inline img { width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: var(--space-2); }

/* Phones: the pool picture leads; the running horse appears inside the last chapter */
@media (max-width: 899px) {
  .legend__img--running { display: none; }
  .legend__inline { display: block; }
}

/* Desktop with JS: pinned picture that follows the chapters */
@media (min-width: 900px) {
  .legend__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(var(--space-12), 6vw, var(--space-24)); align-items: start; }
  .js .legend__media { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
  .js .legend__frame { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-deep); }
  .js .legend__img { position: absolute; inset: 0; height: 100%; object-fit: cover; border-radius: 0; transition: opacity 1.1s var(--ease), transform 1.8s var(--ease), filter 1.6s var(--ease); }
  .js .legend__img--running { opacity: 0; transform: translateX(6%) scale(1.06); }
  .js .legend[data-step="1"] .legend__img--pool { filter: saturate(.7) brightness(.9); }
  .js .legend[data-step="2"] .legend__img--pool { filter: saturate(.8) brightness(.94); transform: scale(1.04); }
  .js .legend[data-step="3"] .legend__img--pool { filter: saturate(1.25) brightness(1.08); transform: scale(1.06); }
  .js .legend[data-step="4"] .legend__img--pool { opacity: 0; transform: scale(1.1); }
  .js .legend[data-step="4"] .legend__img--running { opacity: 1; transform: none; }
  .js .legend[data-step="4"] .legend__cap--pool { display: none; }
  .js .legend[data-step="4"] .legend__cap--running { display: inline; }
  .js .legend__steps { gap: 0; }
  .js .legend__step { min-height: 62vh; align-content: center; border-top: 0; padding-block: var(--space-8); opacity: .3; transition: opacity .6s var(--ease); }
  .js .legend__step.is-active { opacity: 1; }
  .js .legend__step.is-active .legend__num { color: var(--brass); }
  .js .legend__step .legend__num { color: var(--ink-muted); }
}
@media (prefers-reduced-motion: reduce) {
  .js .legend__img, .js .legend__step { transition: none; }
}

/* ---------- Menu: page dimming behind an open panel, and entrance motion ---------- */
body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; background: color-mix(in srgb, var(--surface-deep) 35%, transparent); opacity: 0; transition: opacity .3s var(--ease); }
body.nav-open::after { opacity: 1; }
/* main.js adds .is-open one frame after un-hiding, so these transitions run on open */
@media (prefers-reduced-motion: no-preference) {
  .nav-panel .nav-panel__links li, .nav-panel .nav-panel__feature { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .nav-panel.is-open .nav-panel__links li, .nav-panel.is-open .nav-panel__feature { opacity: 1; transform: none; }
  .nav-panel.is-open .nav-panel__links li:nth-child(2) { transition-delay: .04s; }
  .nav-panel.is-open .nav-panel__links li:nth-child(3) { transition-delay: .08s; }
  .nav-panel.is-open .nav-panel__links li:nth-child(4) { transition-delay: .12s; }
  .nav-panel.is-open .nav-panel__feature { transition-delay: .08s; }
  .drawer { opacity: 0; transform: translateY(-16px); transition: opacity .32s var(--ease), transform .32s var(--ease); }
  .drawer.is-open { opacity: 1; transform: none; }
  .drawer nav > *, .drawer .drawer__contact { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .drawer.is-open nav > *, .drawer.is-open .drawer__contact { opacity: 1; transform: none; }
  .drawer.is-open nav > :nth-child(2) { transition-delay: .05s; }
  .drawer.is-open nav > :nth-child(3) { transition-delay: .1s; }
  .drawer.is-open nav > :nth-child(4) { transition-delay: .15s; }
  .drawer.is-open .drawer__contact { transition-delay: .2s; }
}