/* Colour chapters: white, water blue, navy, wax mustard. One typeface. */
:root {
  --paper: #ffffff;
  --surface: #e9ecf1;
  --surface-2: #dce1e8;
  --ink: #0a1a3a;
  --muted: #3d4a66;
  --blue: #0b5cd5;
  --blue-deep: #0d3f96;
  --blue-mid: #0c4db4;
  --navy: #0a1a3a;
  --wax: #eab308;
  --m: clamp(20px, 2.4vw, 36px);
  --small: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
  --body: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --lead: clamp(1.3125rem, 1.15rem + 0.8vw, 1.75rem);
  --head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --display: clamp(48px, 10.5vw, 170px);
  --sub: clamp(28px, 3vw, 44px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--body); line-height: 1.45; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
h2 { font-size: var(--head); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; text-wrap: balance; }
.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); }
:focus-visible { outline: 4px solid var(--wax); outline-offset: 3px; }
.on-wax :focus-visible, .f-wax :focus-visible { outline-color: var(--navy); }
::selection { background: var(--wax); color: var(--navy); }
sup { font-size: 0.6em; line-height: 0; font-weight: 600; }
sup a { text-decoration: none; padding: 0 0.15em; }

/* fields */
.f-paper { background: var(--paper); color: var(--ink); }
.f-surface { background: var(--surface); color: var(--ink); }
.f-blue { background: var(--blue); color: #fff; }
.f-navy { background: var(--navy); color: #fff; }
.f-wax { background: var(--wax); color: var(--navy); }

/* buttons: square, flat, 56px or taller */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 30px;
  background: var(--wax); color: var(--navy); font: inherit; font-weight: 800; font-size: var(--body);
  letter-spacing: -0.02em; text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s;
}
.btn:hover { background: #ffd21f; transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.navy { background: var(--navy); color: #fff; }
.btn.navy:hover { background: #142b5c; }
.btn.white { background: #fff; color: var(--navy); }
.btn.white:hover { background: var(--surface); }

/* preview strip */
.preview { background: var(--navy); color: #fff; font-size: var(--small); padding: 10px var(--m); line-height: 1.35; }

/* header */
.top { position: absolute; inset: auto 0 auto 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--m); }
.top .mark { font-weight: 800; font-size: 28px; letter-spacing: -0.05em; text-decoration: none; color: var(--ink); }
.top nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.top nav a:not(.btn) { font-weight: 600; font-size: var(--body); text-decoration: none; padding: 10px 0; }
.top nav a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.top .btn { min-height: 52px; padding: 0 22px; font-size: var(--body); background: var(--navy); color: #fff; }
.top .btn:hover { background: var(--blue); }
@media (max-width: 860px) { .top nav a:not(.btn) { display: none; } }

/* hero: headline across two fields */
.hero { position: relative; height: max(100svh, 640px); background: var(--blue); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0 0 50% 0; background: var(--paper); }
.hero-h { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-66.67%); margin: 0; text-align: center;
  font-weight: 800; font-size: var(--hero-size); line-height: 0.86; letter-spacing: -0.055em; white-space: nowrap; }
.hero-h { color: var(--blue); }
.hero-h span { display: block; }
.hero-h .l2 { position: relative; }
.hero-h .l2::after { content: attr(data-t); position: absolute; inset: 0; color: var(--navy); clip-path: inset(33.33% -5% -30% -5%); }
.hero-foot { position: absolute; left: var(--m); right: var(--m); bottom: clamp(28px, 5svh, 56px); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; color: #fff; }
.hero-foot p { max-width: 44ch; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; font-weight: 600; text-wrap: balance; }
body[data-lang='en'] { --hero-size: clamp(72px, 16vw, 250px); }
body[data-lang='es-MX'] { --hero-size: clamp(56px, 12.6vw, 200px); }
@media (max-width: 640px) {
  .hero::before { inset: 0 0 54% 0; }
  .hero-h { top: 46%; }
  body[data-lang='en'] { --hero-size: 20vw; }
  body[data-lang='es-MX'] { --hero-size: 15.5vw; }
}

/* stats: moving picture with two figure tiles */
.stats { padding-top: clamp(56px, 8vw, 120px); }
.stats h2 { margin-bottom: 40px; max-width: 16ch; }
.mosaic { display: grid; grid-template-columns: 2fr 1fr; height: min(62vw, 88svh); min-height: 520px; }
.mosaic .pic { position: relative; overflow: hidden; background: var(--navy); }
.mosaic .pic video, .mosaic .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tiles { display: grid; grid-template-rows: 1fr 1fr; }
.tile { padding: 28px; }
.tile .n { font-size: clamp(56px, 6.4vw, 110px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.9; }
.tile p { margin-top: 14px; max-width: 22ch; font-weight: 600; line-height: 1.3; }
@media (max-width: 760px) {
  .mosaic { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .mosaic .pic { aspect-ratio: 4 / 3; }
  .tiles { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .tile { padding: 18px; min-height: 50vw; }
  .tile .n { font-size: 13vw; }
  .tile p { font-size: var(--small); }
}

/* moments: accordion of tinted panels */
.moments { padding-block: clamp(72px, 10vw, 150px); }
.moments .intro h2 { grid-column: 1 / span 6; }
.moments .intro p { grid-column: 8 / span 5; font-size: var(--lead); line-height: 1.3; align-self: end; }
.acc { display: flex; height: 540px; margin-top: 64px; }
.acc .panel { position: relative; flex: 1 1 0; min-width: 76px; overflow: hidden; color: #fff; transition: flex-grow .45s var(--ease); }
.acc .panel[aria-expanded='true'] { flex-grow: 9; }
.acc .panel:nth-child(1) { background: var(--navy); }
.acc .panel:nth-child(2) { background: var(--blue-deep); }
.acc .panel:nth-child(3) { background: var(--blue-mid); }
.acc .panel:nth-child(4) { background: var(--blue); }
.acc button.tab { position: absolute; inset: 0; width: 100%; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 0; }
.acc .tab span { position: absolute; left: 50%; bottom: 24px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-weight: 800; font-size: var(--body); letter-spacing: -0.03em; white-space: nowrap; }
.acc .panel[aria-expanded='true'] .tab { display: none; }
.acc .open { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; visibility: hidden; transition: opacity .3s .15s; }
.acc .panel[aria-expanded='true'] .open { opacity: 1; visibility: visible; }
.acc .open .txt { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; min-width: 300px; }
.acc .open h3 { font-size: var(--sub); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.acc .open p { max-width: 30ch; font-weight: 400; }
.acc .open img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .moments .intro h2, .moments .intro p { grid-column: 1 / -1; }
  .moments .intro p { margin-top: 20px; }
  .acc { flex-direction: column; height: auto; margin-top: 40px; }
  .acc .panel { min-height: 68px; flex: none; }
  .acc button.tab { position: static; display: block; min-height: 68px; padding: 0 20px; }
  .acc .tab span { position: static; writing-mode: horizontal-tb; transform: none; }
  .acc .open { position: static; display: none; grid-template-columns: 1fr; }
  .acc .panel[aria-expanded='true'] .open { display: grid; }
  .acc .open .txt { padding: 22px 20px 20px; gap: 14px; min-width: 0; }
  .acc .open img { aspect-ratio: 3 / 2; height: auto; }
}

/* evidence: two columns with highlighted facts */
.evidence { padding-block: clamp(72px, 9vw, 130px); }
.evidence h2 { margin-bottom: 44px; }
.evidence .story { columns: 2; column-gap: var(--m); font-size: clamp(1.3125rem, 1rem + 1.2vw, 1.875rem); line-height: 1.24; letter-spacing: -0.02em; font-weight: 600; }
.evidence mark { padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--navy); }
.evidence .m1 { background: var(--wax); }
.evidence .m2 { background: var(--blue); color: #fff; }
.evidence .go { display: inline-block; margin-top: 32px; padding: 4px 10px; background: var(--navy); color: #fff; font-weight: 800; font-size: clamp(1.3125rem, 1rem + 1.2vw, 1.875rem); letter-spacing: -0.03em; text-decoration: none; }
.evidence .go:hover { background: var(--blue); }
@media (max-width: 860px) { .evidence .story { columns: 1; } }

/* reserved proof areas (preview only) */
.proof { padding-block: clamp(64px, 8vw, 120px); }
.proof .note { margin-top: 20px; max-width: 62ch; color: var(--muted); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.slot { min-height: 190px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; font-weight: 600; color: var(--muted); font-size: var(--small); }
.slot:nth-child(odd) { background: var(--surface-2); }
.slot:nth-child(even) { background: #cfd5de; }
.slots.wide { grid-template-columns: 2fr 1fr 1fr; }
.slots.wide .slot { min-height: 150px; }
@media (max-width: 760px) { .slots, .slots.wide { grid-template-columns: 1fr 1fr; } .slot { min-height: 140px; padding: 16px; } }
html:not(.preview-on) [data-proof] { display: none; }

/* how it works: square plate, tabs, two action cells */
.how { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; }
.how .plate { padding: 40px; display: grid; place-items: center; }
.how .plate .sq { position: relative; width: 100%; aspect-ratio: 1; max-height: 78svh; max-width: 78svh; background: var(--navy); overflow: hidden; }
.how .sq > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.how .sq > .on { opacity: 1; }
.how .side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 40px var(--m) 40px 0; }
.how h2 { margin-bottom: 28px; }
.how .tabs { display: flex; gap: 8px; }
.how .tabs button { min-height: 56px; padding: 0 22px; background: var(--blue-deep); color: #fff; border: 0; font: inherit; font-weight: 800; font-size: var(--body); letter-spacing: -0.02em; cursor: pointer; transition: background-color .18s, color .18s; }
.how .tabs button[aria-selected='true'] { background: #fff; color: var(--navy); }
.how .tabs button:hover { background: var(--navy); }
.how .tabs button[aria-selected='true']:hover { background: #fff; }
.how .pane h3 { font-size: var(--sub); font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin-bottom: 24px; max-width: 16ch; }
.how .pane p { max-width: 38ch; }
.how .pane[hidden] { display: none; }
.how .cells { display: grid; grid-template-columns: 1fr 1fr; }
.how .cells .btn { min-height: 72px; padding: 0 16px; text-align: center; line-height: 1.1; }
@media (max-width: 860px) {
  .how { grid-template-columns: 1fr; min-height: 0; }
  .how .plate { padding: var(--m) var(--m) 0; }
  .how .side { padding: 28px var(--m) 40px; gap: 28px; }
  .how .cells { grid-template-columns: 1fr; }
  .how .cells .btn { min-height: 60px; }
}

/* safety: statements on colour fields */
.state { position: relative; min-height: 76svh; padding: var(--m); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.state .exp { max-width: 32ch; margin-left: 58%; font-weight: 600; line-height: 1.35; }
.state h2 { font-size: var(--display); line-height: 0.88; letter-spacing: -0.055em; max-width: 9ch; text-wrap: balance; }
.state.flip .exp { margin-left: 8.33%; }
.state > .btn { align-self: flex-start; }
.compare .btn, .aids .btn, .notwax .btn { align-self: flex-start; margin-top: 8px; }
.compare .after { margin-top: 40px; }
.state.flip h2 { align-self: flex-end; text-align: right; }
@media (max-width: 760px) {
  .state { min-height: 64svh; }
  .state p.exp, .state.flip .exp { margin-left: 0; max-width: 34ch; }
  .state.flip h2 { align-self: flex-start; text-align: left; }
}

/* compare: a real table */
.compare { padding-block: clamp(72px, 9vw, 130px); }
.compare h2 { margin-bottom: 48px; }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 20px 20px 20px 0; }
.compare thead th { font-size: var(--small); font-weight: 600; color: var(--muted); padding-bottom: 12px; }
.compare tbody th { font-weight: 800; font-size: var(--lead); letter-spacing: -0.03em; line-height: 1.1; width: 26%; padding-left: 20px; }
.compare tbody tr:nth-child(odd) { background: var(--surface); }
.compare tbody tr:last-child { background: var(--blue); color: #fff; }
@media (max-width: 760px) {
  .compare thead { display: none; }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tbody th { width: auto; padding: 20px 20px 6px; }
  .compare td { padding: 6px 20px; }
  .compare td:last-child { padding-bottom: 22px; }
}

/* hearing aids: clip and text */
.aids { display: grid; grid-template-columns: 7fr 5fr; }
.aids .pic { position: relative; min-height: 70svh; background: #06112a; overflow: hidden; }
.aids .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aids .txt { padding: clamp(40px, 6vw, 96px) var(--m); display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.aids h2 { max-width: 14ch; margin-bottom: 8px; }
@media (max-width: 860px) { .aids { grid-template-columns: 1fr; } .aids .pic { min-height: 0; aspect-ratio: 16 / 10; } }

/* not wax + check */
.notwax { display: grid; grid-template-columns: 5fr 7fr; }
.notwax .txt { padding: clamp(48px, 7vw, 110px) var(--m); display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.notwax .txt p { max-width: 40ch; }
.notwax .alarm { background: var(--navy); color: #fff; padding: 22px 24px; font-weight: 600; line-height: 1.35; max-width: 44ch; }
.notwax .pic { position: relative; min-height: 78svh; overflow: hidden; }
.notwax .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .notwax { grid-template-columns: 1fr; } .notwax .pic { min-height: 0; aspect-ratio: 3 / 2; order: -1; } }

.check { padding-block: clamp(72px, 9vw, 130px); }
.check .head { grid-column: 1 / span 5; }
.check .head p { margin-top: 20px; font-size: var(--lead); line-height: 1.3; max-width: 22ch; }
.check form { grid-column: 7 / span 6; }
.check label { display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 12px 18px; font-weight: 600; line-height: 1.25; cursor: pointer; background: var(--blue-mid); transition: background-color .15s; }
.check label:nth-child(even) { background: var(--blue-deep); }
.check label:hover { background: var(--navy); }
.check input[type='checkbox'] { appearance: none; -webkit-appearance: none; flex: none; width: 32px; height: 32px; margin: 0; background: #fff; display: grid; place-items: center; cursor: pointer; }
.check input[type='checkbox']:checked { background: var(--wax); }
.check input[type='checkbox']:checked::after { content: ''; width: 16px; height: 9px; border: solid var(--navy); border-width: 0 0 5px 5px; transform: translateY(-2px) rotate(-45deg); }
.check .act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.check .result { margin-top: 20px; padding: 24px; font-weight: 800; font-size: var(--lead); letter-spacing: -0.02em; line-height: 1.2; }
.check .result.stop { background: var(--navy); color: #fff; }
.check .result.ok { background: var(--wax); color: var(--navy); }
.check .result[hidden] { display: none; }
@media (max-width: 860px) { .check .head, .check form { grid-column: 1 / -1; } .check form { margin-top: 32px; } }

/* family statement */
.family { min-height: 70svh; }

/* faq: a band per question */
.faq-head { min-height: 30svh; padding: var(--m); display: flex; align-items: flex-end; }
.faq-head h2 { font-size: var(--display); letter-spacing: -0.055em; line-height: 0.9; }
.qa { padding: 52px 0; }
.qa:nth-child(odd) { background: var(--surface); }
.qa h3 { grid-column: 1 / span 5; font-size: var(--lead); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.qa p { grid-column: 7 / span 6; line-height: 1.5; }
@media (max-width: 860px) { .qa { padding: 32px 0; } .qa h3, .qa p { grid-column: 1 / -1; } .qa p { margin-top: 12px; } }

/* close */
.close { min-height: 74svh; padding: var(--m); display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.close h2 { font-size: var(--display); line-height: 0.88; letter-spacing: -0.055em; padding-top: 5svh; }
.close h2 span { display: block; }
.close .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.close .row p { max-width: 36ch; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; }
@media (max-width: 760px) { .close .btn { width: 100%; } }

/* footer */
.foot { padding: 120px var(--m) 40px; }
.blocks { display: flex; align-items: flex-end; gap: 4px; height: min(34svh, 26vw); }
.blocks span { flex: 1; display: grid; place-items: center; font-weight: 800; font-size: min(20vw, 30svh); line-height: 0.8; letter-spacing: -0.05em; overflow: hidden; }
.blocks span:nth-child(3n+1) { background: var(--blue); color: #fff; height: 100%; }
.blocks span:nth-child(3n+2) { background: var(--wax); color: var(--navy); height: 72%; }
.blocks span:nth-child(3n) { background: #fff; color: var(--navy); height: 86%; }
.foot .cols { margin-top: 56px; row-gap: 40px; }
.foot h3 { font-size: var(--small); font-weight: 600; margin-bottom: 14px; color: #b9c4dc; }
.foot .c1 { grid-column: 1 / span 2; } .foot .c2 { grid-column: 3 / span 2; } .foot .c3 { grid-column: 6 / span 7; }
.foot li { margin-bottom: 10px; }
.foot li a { font-weight: 600; text-underline-offset: 4px; }
.foot .c3 ol { list-style: decimal; padding-left: 1.4em; font-size: var(--small); }
.foot .c3 li { margin-bottom: 8px; color: #dfe6f5; }
.lang a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; margin-right: 6px; font-weight: 800; text-decoration: none; background: var(--blue-deep); }
.lang a[aria-current='true'] { background: #fff; color: var(--navy); }
.foot .last { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; font-size: var(--small); color: #dfe6f5; }
.foot .last p { max-width: 70ch; }
@media (max-width: 860px) { .foot { padding-top: 140px; } .foot .c1, .foot .c2 { grid-column: span 6; } .foot .c3 { grid-column: 1 / -1; } .blocks { height: 22svh; } }

/* product page */
.p-hero { padding: 120px var(--m) 56px; min-height: 86svh; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.p-hero .back { font-weight: 600; text-underline-offset: 5px; }
.p-hero h1 { font-size: clamp(38px, 10.2vw, 170px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.88; margin: 0; }
.p-hero h1 span { display: block; }
.p-hero .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); align-items: end; }
.p-hero .lead { font-size: var(--lead); line-height: 1.3; max-width: 30ch; font-weight: 600; }
.p-hero .soon { background: var(--navy); padding: 26px; }
.p-hero .soon h2 { font-size: var(--lead); letter-spacing: -0.04em; margin-bottom: 10px; }
.p-hero .soon .btn { margin-top: 20px; }
@media (max-width: 860px) { .p-hero { padding-top: 104px; } .p-hero .row { grid-template-columns: 1fr; } }
.use { padding-block: clamp(72px, 9vw, 130px); }
.use .lhs { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; }
.use .lhs h2 { margin-bottom: 28px; }
.use .lhs img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.use ol { grid-column: 6 / span 7; list-style: none; counter-reset: s; }
.use ol li { padding: 22px 24px; }
.use ol li:nth-child(odd) { background: var(--surface); }
.use ol h3 { font-size: var(--lead); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 6px; }
.use .halt { grid-column: 6 / span 7; margin-top: 24px; background: var(--navy); color: #fff; padding: 24px; }
.use .halt h3 { font-size: var(--lead); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
@media (max-width: 860px) { .use .lhs, .use ol, .use .halt { grid-column: 1 / -1; } .use ol { margin-top: 32px; } }
.warn { padding-block: clamp(72px, 9vw, 130px); }
.warn h2 { margin-bottom: 44px; }
.warn ul { columns: 2; column-gap: var(--m); }
.warn li { break-inside: avoid; padding: 16px 20px; margin-bottom: 8px; background: var(--paper); line-height: 1.4; }
@media (max-width: 860px) { .warn ul { columns: 1; } }

/* canal drawing */
.canal .water { stroke-dasharray: 26 14; animation: flow 1.1s linear infinite; }
.canal .waxlump { animation: washout 9s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.canal .stream { animation: streamon 9s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -40; } }
@keyframes streamon { 0%, 16% { opacity: 0; } 22%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes washout {
  0%, 30% { transform: translate(0, 0) rotate(0); opacity: 1; }
  46% { transform: translate(-30px, 6px) rotate(-12deg); opacity: 1; }
  74% { transform: translate(-300px, 60px) rotate(-70deg); opacity: 1; }
  80%, 94% { transform: translate(-330px, 120px) rotate(-90deg); opacity: 0; }
  95% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* entrances */
.js [data-in] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-in].in { opacity: 1; transform: none; }
.js .mosaic .pic video, .js .aids .pic video, .js .notwax .pic img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.js .seen .pic video, .js .seen .pic img { transform: none; }
@media print { .js [data-in] { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-in] { opacity: 1; transform: none; transition: none; }
  .canal .water, .canal .waxlump, .canal .stream { animation: none; }
  .canal .stream { opacity: 1; }
  .js .pic video, .js .pic img { transform: none !important; transition: none; }
  .acc .panel, .btn { transition: none; }
}