/* Praemius GmbH · Entwurf 5
   Clean white canvas, brand greys, League Spartan, big type. Motion with a purpose:
   brand intro, giant headline (both kept from Entwurf 4), the AVVO shop opening from an
   address pill, the towel story on its disc, rows that open on click, reveals as content
   arrives, and the two pills that always stay. */

@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/league-spartan-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/league-spartan-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --ink: #0b0b0c;
  --muted: #66686b;
  --soft: #f2f2f3;
  --soft-2: #e8e8ea;
  --brand-grey: #c5c6c7;
  --charcoal: #2f2f2f;
  --line: rgba(11, 11, 12, 0.1);
  --max: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(96px, 12vw, 176px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --font: "League Spartan", "Avenir Next", "Futura", "Helvetica Neue", Arial, sans-serif;
  --intro-delay: 0s;
  color-scheme: light;
}
.motion:not(.intro-seen) { --intro-delay: 1.55s; }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg); color: var(--ink);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--ink); color: #fff; }
[id] { scroll-margin-top: 92px; }
.nowrap { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section) 0; }
.muted { color: var(--muted); }
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }
.copy-fallback { position: fixed; top: -200px; left: 0; opacity: 0; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.kicker {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
h2 { font-size: clamp(2.2rem, 1.3rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -0.04em; }
h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.012em; }

/* ---------- Brand intro (first visit only) ---------- */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); pointer-events: none; }
.intro-logo { width: min(560px, 72vw); height: auto; overflow: hidden; }
html:not(.motion) .intro, .intro-seen .intro { display: none; }

/* ---------- Floating pill navigation ---------- */
.nav-wrap { position: fixed; inset: 14px 0 auto; z-index: 50; display: flex; justify-content: center; padding-inline: 12px; pointer-events: none; }
.nav {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: clamp(12px, 3vw, 40px);
  padding: 7px 7px 7px 22px; border-radius: 999px;
  background: rgba(242, 242, 243, 0.78);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 8px 30px rgba(11, 11, 12, 0.06);
  transition: padding 0.4s var(--ease), background-color 0.4s ease, box-shadow 0.4s ease, gap 0.4s var(--ease);
}
.nav.is-compact {
  padding: 5px 5px 5px 18px; gap: clamp(10px, 2vw, 28px);
  background: rgba(242, 242, 243, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 12px 36px rgba(11, 11, 12, 0.1);
}
.nav-logo img { width: 92px; height: auto; transition: width 0.4s var(--ease); }
.nav.is-compact .nav-logo img { width: 84px; }
.nav-menu { position: relative; }
.nav-links { position: relative; z-index: 1; display: flex; gap: 2px; }
.nav-links a {
  display: block; padding: 9px 15px; border-radius: 999px;
  font-weight: 500; font-size: 0.98rem; text-decoration: none; color: var(--muted);
  transition: background-color 0.2s ease, color 0.25s ease;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-links a:hover { background: rgba(11, 11, 12, 0.07); }
.js .nav-links a:hover { background: transparent; }
.nav-indicator {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: var(--ind-w, 0px);
  translate: var(--ind-x, 0px) 0; border-radius: 999px;
  background: rgba(11, 11, 12, 0.08); opacity: 0; pointer-events: none;
  transition: translate 0.45s var(--ease), width 0.45s var(--ease), opacity 0.25s ease;
}
.nav-indicator.is-visible { opacity: 1; }
.nav-progress {
  position: absolute; left: 24px; right: 24px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--ink); opacity: 0.55; transform-origin: left center; scale: 0 1; pointer-events: none;
}
.nav-toggle { display: none; }

/* ---------- Hero: giant headline, then one row ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 112px 0 92px; overflow: clip;
}
.hero-wrap { display: flex; flex-direction: column; }
.hero-kicker { margin-bottom: clamp(10px, 1.6vw, 22px); }
.giant { font-size: clamp(3.1rem, 10.4vw, 12.4rem); line-height: 0.88; letter-spacing: -0.058em; font-weight: 600; }
.giant-line { display: block; overflow: clip; padding-bottom: 0.07em; margin-bottom: -0.04em; }
.giant-in { display: inline-block; }
.l2 { text-align: right; }
.hero-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 4vw, 64px);
  margin-top: clamp(24px, 4.5vh, 52px); padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line);
}
.hero-lead { font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.4rem); line-height: 1.42; color: var(--muted); max-width: 40ch; letter-spacing: -0.01em; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* The 3D "p.": 24 copies of the logo shape stacked in depth */
.scene { position: relative; width: clamp(84px, 8.6vw, 126px); aspect-ratio: 1; perspective: 1400px; }
.rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.mark { position: absolute; inset: 8%; transform-style: preserve-3d; --step: 0.62px; }
.mark span {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #505154, #3a3b3d);
  -webkit-mask: url("/assets/monogram.svg") center / contain no-repeat;
  mask: url("/assets/monogram.svg") center / contain no-repeat;
}
.mark span:first-child, .mark span:last-child {
  background: linear-gradient(135deg, #8a8b8e 0%, #3d3e40 30%, #2f2f2f 52%, #18181a 100%);
}
.mark span:nth-child(1) { transform: translateZ(calc(-11.5 * var(--step))); }
.mark span:nth-child(2) { transform: translateZ(calc(-10.5 * var(--step))); }
.mark span:nth-child(3) { transform: translateZ(calc(-9.5 * var(--step))); }
.mark span:nth-child(4) { transform: translateZ(calc(-8.5 * var(--step))); }
.mark span:nth-child(5) { transform: translateZ(calc(-7.5 * var(--step))); }
.mark span:nth-child(6) { transform: translateZ(calc(-6.5 * var(--step))); }
.mark span:nth-child(7) { transform: translateZ(calc(-5.5 * var(--step))); }
.mark span:nth-child(8) { transform: translateZ(calc(-4.5 * var(--step))); }
.mark span:nth-child(9) { transform: translateZ(calc(-3.5 * var(--step))); }
.mark span:nth-child(10) { transform: translateZ(calc(-2.5 * var(--step))); }
.mark span:nth-child(11) { transform: translateZ(calc(-1.5 * var(--step))); }
.mark span:nth-child(12) { transform: translateZ(calc(-0.5 * var(--step))); }
.mark span:nth-child(13) { transform: translateZ(calc(0.5 * var(--step))); }
.mark span:nth-child(14) { transform: translateZ(calc(1.5 * var(--step))); }
.mark span:nth-child(15) { transform: translateZ(calc(2.5 * var(--step))); }
.mark span:nth-child(16) { transform: translateZ(calc(3.5 * var(--step))); }
.mark span:nth-child(17) { transform: translateZ(calc(4.5 * var(--step))); }
.mark span:nth-child(18) { transform: translateZ(calc(5.5 * var(--step))); }
.mark span:nth-child(19) { transform: translateZ(calc(6.5 * var(--step))); }
.mark span:nth-child(20) { transform: translateZ(calc(7.5 * var(--step))); }
.mark span:nth-child(21) { transform: translateZ(calc(8.5 * var(--step))); }
.mark span:nth-child(22) { transform: translateZ(calc(9.5 * var(--step))); }
.mark span:nth-child(23) { transform: translateZ(calc(10.5 * var(--step))); }
.mark span:nth-child(24) { transform: translateZ(calc(11.5 * var(--step))); }

/* Leistungen ticker (its speed follows the visitor's scrolling) */
.ticker {
  display: flex; overflow: hidden; margin-top: clamp(28px, 5vh, 56px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; flex: none; }
.ticker-track li {
  display: flex; align-items: center; white-space: nowrap;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); font-weight: 500; color: #9a9b9e; letter-spacing: -0.01em;
}
.ticker-track li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-grey); margin-inline: clamp(22px, 3vw, 40px); }

/* ---------- Buttons and pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px;
  border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, translate 0.35s var(--ease), scale 0.15s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; transition: translate 0.25s var(--ease); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--charcoal); }
.btn-soft { background: var(--soft); color: var(--ink); }
.btn-soft:hover { background: var(--soft-2); }
.magnetic { translate: var(--mag-x, 0px) var(--mag-y, 0px); }
.btn:active, .pill:active, .dock a:active, .dock button:active, .copy-btn:active { scale: 0.96; }

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 0; border-radius: 999px;
  background: var(--soft); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, translate 0.35s var(--ease), scale 0.15s ease;
}
button.pill:hover, a.pill:hover { background: var(--soft-2); }
.pill svg { width: 20px; height: 20px; flex: none; }
.pill-dark { background: var(--ink); color: #fff; }
.pill-dark:hover, a.pill-dark:hover { background: var(--charcoal); }
.pill-icon { padding: 14px; }
.pill-icon .i-done { display: none; }
.pill-icon.is-done { background: var(--ink); color: #fff; }
.pill-icon.is-done .i-copy { display: none; }
.pill-icon.is-done .i-done { display: block; }

/* ---------- AVVO: our shop on a browser window and a phone ---------- */
.shop { padding-top: var(--section); }
.shop-head { display: flex; flex-direction: column; align-items: flex-start; }
.shop-logo { width: clamp(220px, 32vw, 460px); height: auto; margin: 4px 0 clamp(30px, 4.5vw, 56px); }
.shop-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; gap: 24px clamp(18px, 4vw, 64px);
  padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line);
}
.shop-row h2 { font-size: clamp(2rem, 1.2rem + 2.3vw, 3.4rem); line-height: 1.02; max-width: 15ch; }
.shop-text { color: var(--muted); max-width: 46ch; }

/* the devices are shown open by default; where scroll timelines exist they are pinned and choreographed (see Motion) */
.stage { padding-top: clamp(56px, 8vw, 112px); }
.stage-sticky { padding-inline: var(--gutter); }
.devices { position: relative; width: min(1120px, 100%); margin: 0 auto; padding-bottom: 5%; isolation: isolate; }
.devices::before {
  content: ""; position: absolute; z-index: -1; inset: -14% -8% -8%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(3, 175, 241, 0.14), rgba(3, 175, 241, 0.05) 52%, rgba(3, 175, 241, 0));
}
.browser { --url-w: 220px; position: relative; width: 86%; filter: drop-shadow(0 30px 32px rgba(11, 11, 12, 0.13)) drop-shadow(0 1px 2px rgba(11, 11, 12, 0.1)); }
.browser-win { position: relative; border-radius: 14px; overflow: hidden; background: #ececee; }
.browser-bar { position: relative; height: 42px; display: flex; align-items: center; padding-inline: 16px; }
.browser-dots { display: flex; gap: 7px; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #cfd0d3; }
.url {
  position: absolute; left: 50%; top: 7px; translate: -50% 0; width: var(--url-w); height: 28px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; background: #fff; color: var(--ink); font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap;
}
.url svg { width: 12px; height: 12px; flex: none; color: var(--muted); }
.type { display: inline-flex; }
.caret { display: none; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--ink); border-radius: 1px; }
.browser-screen { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #fff; }
.screen-img { width: 100%; max-width: none; height: auto; }

.phone {
  --phone-travel: -72.86%; /* (3110 - 844) / 3110 of the phone screenshot */
  position: absolute; right: 0; bottom: 0; width: 21%; container-type: inline-size;
  filter: drop-shadow(0 26px 28px rgba(11, 11, 12, 0.2)) drop-shadow(0 1px 2px rgba(11, 11, 12, 0.12));
}
.phone-body { position: relative; padding: 3.4cqi; border-radius: 15cqi; background: #17181b; }
.phone-screen { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 11.6cqi; background: #fff; }
.phone-island { position: absolute; z-index: 2; top: 2.4cqi; left: 50%; translate: -50% 0; width: 28cqi; height: 8cqi; border-radius: 999px; background: #17181b; }
.phone-url {
  z-index: 2; top: auto; bottom: 3.6cqi; width: 70cqi; height: 11cqi; gap: 1.6cqi; font-size: 4.4cqi;
  background: rgba(246, 246, 247, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(11, 11, 12, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.phone-url svg { width: 3.4cqi; height: 3.4cqi; }

.shop-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(16px, 3vw, 40px);
  margin: clamp(56px, 8vw, 112px) 0 0;
}
.shop-stats div { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: 20px; }
.shop-stats div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left center; }
.shop-stats dd { margin: 0; font-size: clamp(2.5rem, 0.9rem + 4.4vw, 5.6rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.055em; white-space: nowrap; }
.shop-stats dt { margin-top: 12px; color: var(--muted); font-size: 0.9375rem; line-height: 1.35; max-width: 24ch; }

/* ---------- Statement ---------- */
.statement { padding: var(--section) var(--gutter) 0; }
.statement-inner { position: relative; display: grid; place-items: center; }
.statement p {
  font-size: clamp(1.75rem, 1rem + 2.7vw, 3.4rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.032em;
  text-align: center; max-width: 23ch;
}
/* words turn from praemius grey to black while the statement is pinned (pure CSS, scroll-driven) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes ink { from { color: var(--brand-grey); } to { color: var(--ink); } }
    .statement { height: 240vh; padding: 0; view-timeline-name: --statement; view-timeline-axis: block; }
    .statement-inner { position: sticky; top: 0; height: 100svh; padding-inline: var(--gutter); }
    .reveal span { animation: ink linear both; animation-timeline: --statement; }
    .reveal span:nth-child(1) { animation-range: contain 6.00% contain 13.00%; }
    .reveal span:nth-child(2) { animation-range: contain 8.96% contain 15.96%; }
    .reveal span:nth-child(3) { animation-range: contain 11.93% contain 18.93%; }
    .reveal span:nth-child(4) { animation-range: contain 14.89% contain 21.89%; }
    .reveal span:nth-child(5) { animation-range: contain 17.85% contain 24.85%; }
    .reveal span:nth-child(6) { animation-range: contain 20.81% contain 27.81%; }
    .reveal span:nth-child(7) { animation-range: contain 23.78% contain 30.78%; }
    .reveal span:nth-child(8) { animation-range: contain 26.74% contain 33.74%; }
    .reveal span:nth-child(9) { animation-range: contain 29.70% contain 36.70%; }
    .reveal span:nth-child(10) { animation-range: contain 32.67% contain 39.67%; }
    .reveal span:nth-child(11) { animation-range: contain 35.63% contain 42.63%; }
    .reveal span:nth-child(12) { animation-range: contain 38.59% contain 45.59%; }
    .reveal span:nth-child(13) { animation-range: contain 41.56% contain 48.56%; }
    .reveal span:nth-child(14) { animation-range: contain 44.52% contain 51.52%; }
    .reveal span:nth-child(15) { animation-range: contain 47.48% contain 54.48%; }
    .reveal span:nth-child(16) { animation-range: contain 50.44% contain 57.44%; }
    .reveal span:nth-child(17) { animation-range: contain 53.41% contain 60.41%; }
    .reveal span:nth-child(18) { animation-range: contain 56.37% contain 63.37%; }
    .reveal span:nth-child(19) { animation-range: contain 59.33% contain 66.33%; }
    .reveal span:nth-child(20) { animation-range: contain 62.30% contain 69.30%; }
    .reveal span:nth-child(21) { animation-range: contain 65.26% contain 72.26%; }
    .reveal span:nth-child(22) { animation-range: contain 68.22% contain 75.22%; }
    .reveal span:nth-child(23) { animation-range: contain 71.19% contain 78.19%; }
    .reveal span:nth-child(24) { animation-range: contain 74.15% contain 81.15%; }
    .reveal span:nth-child(25) { animation-range: contain 77.11% contain 84.11%; }
    .reveal span:nth-child(26) { animation-range: contain 80.07% contain 87.07%; }
    .reveal span:nth-child(27) { animation-range: contain 83.04% contain 90.04%; }
  }
}

/* ---------- Services: big rows ---------- */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head p { color: var(--muted); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); max-width: 40ch; }
.rows { border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); }
.row-head {
  position: relative; isolation: isolate; width: 100%;
  display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr) 44px; align-items: center; gap: 20px;
  padding: clamp(22px, 3vw, 36px) clamp(10px, 2vw, 28px);
  border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink);
  transition: color 0.35s ease;
}
.row-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  scale: 1 0; transform-origin: 50% 100%; transition: scale 0.55s var(--ease-io);
}
.row-head:hover, .row.is-open .row-head { color: #fff; }
.row-head:hover::before, .row.is-open .row-head::before { scale: 1 1; }
.row-head:focus-visible { outline-offset: -3px; }
.row-num { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; opacity: 0.55; }
.row-title { font-size: clamp(2.1rem, 1.2rem + 3.8vw, 4.8rem); font-weight: 600; line-height: 1; letter-spacing: -0.045em; transition: translate 0.5s var(--ease); }
.row-head:hover .row-title { translate: 14px 0; }
.row-short { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); opacity: 0.72; max-width: 34ch; }
.row-icon { position: relative; width: 22px; height: 22px; justify-self: end; }
.row-icon i { position: absolute; left: 0; top: 10px; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: rotate 0.45s var(--ease); }
.row-icon i:last-child { rotate: 90deg; }
.row.is-open .row-icon i:last-child { rotate: 0deg; }
.row-body { display: grid; grid-template-rows: 1fr; }
.row-inner { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px 48px; align-items: center; }
.row-art { width: min(220px, 70%); margin: 8px 0 24px clamp(10px, 2vw, 28px); justify-self: start; overflow: visible; }
.row-list { margin: 0 clamp(10px, 2vw, 28px) 28px 0; }
.row-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem); font-weight: 500; }
.draw { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .row-body { grid-template-rows: 0fr; background: var(--ink); color: #fff; transition: grid-template-rows 0.6s var(--ease-io); }
.js .row.is-open .row-body { grid-template-rows: 1fr; }
.js .row-list li { border-color: rgba(255, 255, 255, 0.16); }

/* ---------- Own brand: the towel story ---------- */
/* default: all four facts as a list next to the towel; with JS and motion the stage is pinned and the facts take turns */
.towel { padding-top: var(--section); }
.towel-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.towel-copy h2 { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem); margin-bottom: clamp(22px, 3.5vw, 44px); }
.towel-steps { border-top: 1px solid var(--line); }
.towel-step { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.step-num { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); }
.step-big { margin-top: 10px; font-size: clamp(2.4rem, 1.1rem + 4.2vw, 5.6rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.055em; }
.step-text { margin-top: 14px; color: var(--muted); max-width: 40ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.step-quote { margin: 12px 0 0; }
.step-quote p { font-size: clamp(1.45rem, 1rem + 1.3vw, 2.25rem); font-weight: 500; line-height: 1.16; letter-spacing: -0.025em; max-width: 24ch; }
.towel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(24px, 3.5vw, 40px); }
.towel-care { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9375rem; }
.towel-care::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-grey); }

.towel-stage { position: relative; width: min(100%, 640px); aspect-ratio: 1; justify-self: center; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-base { fill: none; stroke: rgba(11, 11, 12, 0.1); stroke-width: 0.25; }
.ring-fill { fill: none; stroke: var(--ink); stroke-width: 0.45; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring-tick { fill: var(--ink); stroke: var(--ink); stroke-width: 0.35; }
.towel-disc { position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #fbfbfc 0%, #f1f1f3 55%, #e5e5e8 100%); }
.towel-img { position: absolute; left: 9%; top: 8%; width: 82%; height: auto; mix-blend-mode: multiply; }
.towel-img + .towel-img { display: none; }
@media (min-width: 961px) { .towel:not(.is-story) .towel-stage { align-self: start; position: sticky; top: 110px; } }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); }
.about h2 { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 5rem); }
.about-head { align-self: start; position: sticky; top: 110px; }
.lead { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.012em; }
.about-copy > p:not(.lead) { margin-top: 18px; color: var(--muted); max-width: 54ch; }
.values { margin-top: 40px; border-top: 1px solid var(--line); }
.values li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 22px 0; }
.values li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left center; }
.values span { font-weight: 600; color: var(--muted); font-size: 0.875rem; letter-spacing: 0.1em; padding-top: 5px; }
.values h3 { font-size: 1.25rem; }
.values p { margin-top: 4px; color: var(--muted); }

/* ---------- Company facts ---------- */
.facts-card {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px);
  background: var(--soft); border-radius: 30px; padding: clamp(28px, 5vw, 64px);
}
.facts-card h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); }
.facts-card .muted { margin-top: 16px; max-width: 32ch; }
.facts { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); margin: 0; }
.facts dt, .facts dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; padding-right: 12px; }
.facts dd { color: var(--muted); }
.facts dd[data-copy] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.copy-btn {
  flex: none; border: 0; border-radius: 999px; padding: 6px 12px; background: #fff; color: var(--ink);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; opacity: 0; translate: 6px 0;
  transition: opacity 0.2s ease, translate 0.25s var(--ease), background-color 0.2s ease, color 0.2s ease, scale 0.15s ease;
}
.facts dd[data-copy]:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.is-done { opacity: 1; translate: 0 0; }
.copy-btn.is-done { background: var(--ink); color: #fff; }
@media (hover: none) { .copy-btn { opacity: 1; translate: 0 0; } }

/* ---------- Contact ---------- */
.cta { text-align: center; padding-bottom: clamp(64px, 9vw, 128px); }
.cta h2 { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.6rem); max-width: 13ch; margin-inline: auto; }
.cta .sub { margin: 22px auto 0; max-width: 44ch; color: var(--muted); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.note { margin-top: 26px; color: var(--muted); font-size: 0.95rem; }

/* ---------- Footer with the giant logo ---------- */
.footer { padding-bottom: 104px; }
.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
  background: var(--ink); color: #fff; border-radius: 24px; padding: 22px 26px;
}
.footer-logo img { width: 92px; height: auto; }
.footer-meta { color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; }
.footer ul { display: flex; gap: 22px; }
.footer a { text-decoration: none; }
.footer nav a:hover { text-decoration: underline; }

/* ---------- Floating contact dock ---------- */
.dock {
  position: fixed; z-index: 60; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  translate: -50% 0;
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(14, 14, 15, 0.84); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 12px 36px rgba(11, 11, 12, 0.22);
}
.dock a, .dock button {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border: 0; border-radius: 999px;
  background: transparent; color: #fff; text-decoration: none; font-weight: 500; font-size: 0.98rem; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s ease, scale 0.15s ease;
}
.dock a:hover, .dock button:hover, .dock .is-open { background: rgba(255, 255, 255, 0.13); }
.dock svg { width: 15px; height: 15px; transition: translate 0.25s var(--ease); }
.dock .dock-top { width: 0; padding-inline: 0; margin-right: -2px; overflow: hidden; opacity: 0; pointer-events: none; transition: width 0.4s var(--ease), padding 0.4s var(--ease), margin 0.4s var(--ease), opacity 0.25s ease, background-color 0.2s ease; }
.dock .dock-top svg { width: 17px; height: 17px; flex: none; }
.dock.has-top .dock-top { width: 44px; padding-inline: 13px; margin-right: 0; opacity: 1; pointer-events: auto; }
.dock :focus-visible, .footer :focus-visible { outline-color: #fff; }

.mail-card {
  position: fixed; inset: auto auto calc(max(14px, env(safe-area-inset-bottom)) + 70px) 50%; margin: 0;
  width: min(360px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 24px;
  background: #fff; color: var(--ink);
  box-shadow: 0 24px 60px rgba(11, 11, 12, 0.18), 0 0 0 1px rgba(11, 11, 12, 0.06);
  translate: -50% 0; transform-origin: 50% 100%;
}
.mail-card-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.mail-card-address { margin-top: 6px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; word-break: break-all; }
.mail-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mail-card .pill { padding: 12px 18px; font-size: 0.98rem; }

.toast {
  position: fixed; z-index: 80; left: 50%; top: 86px; translate: -50% -10px;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 500; font-size: 0.95rem;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, translate 0.35s var(--ease);
}
.toast.is-visible { opacity: 1; translate: -50% 0; }

/* ---------- Legal pages ---------- */
.legal { max-width: 820px; padding-block: 150px 96px; }
.legal h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.5rem); letter-spacing: -0.038em; line-height: 1; }
.legal .intro { margin-top: 24px; font-size: 1.25rem; line-height: 1.5; color: var(--muted); }
.legal h2 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); letter-spacing: -0.015em; line-height: 1.2; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); }
.legal p, .legal address, .legal ul { margin-top: 14px; }
.legal address { font-style: normal; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal .stand { margin-top: 52px; color: var(--muted); font-size: 1rem; }
.notfound { padding-block: 180px 120px; text-align: center; }
.notfound h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.5rem); letter-spacing: -0.038em; }
.notfound p:not(.kicker) { margin-top: 18px; color: var(--muted); font-size: 1.25rem; }
.notfound .btn { margin-top: 30px; }
.page-plain .footer { padding-bottom: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-row { grid-template-columns: auto minmax(0, 1fr); }
  .hero-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .about, .facts-card, .section-head { grid-template-columns: 1fr; }
  .about-head { position: static; }
  .shop-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shop-cta { grid-column: 1 / -1; }
  .shop-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-head { grid-template-columns: 40px minmax(0, 1fr) 32px; }
  .row-short { grid-column: 2 / 3; grid-row: 2; }
  .row-icon { grid-column: 3; grid-row: 1; }
  .row-inner { grid-template-columns: 1fr; gap: 0; }
  .row-art { width: 150px; margin: 4px clamp(10px, 2vw, 28px) 8px; }
  .row-list { margin: 0 clamp(10px, 2vw, 28px) 24px; }
}
@media (max-width: 720px) {
  .nav-wrap { padding-inline: 14px; }
  .nav { width: min(100%, 440px); flex-wrap: wrap; justify-content: space-between; gap: 0; padding: 6px 6px 6px 18px; border-radius: 26px; transition: padding 0.4s var(--ease), background-color 0.4s ease, box-shadow 0.4s ease; }
  .nav.is-compact { padding: 5px 5px 5px 16px; gap: 0; }
  html:not(.js) .nav-links li:not(:last-child) { display: none; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 16px; border: 0; border-radius: 999px;
    background: rgba(11, 11, 12, 0.06); font-weight: 500; font-size: 0.98rem; cursor: pointer;
  }
  .nav-toggle-icon { position: relative; width: 16px; height: 10px; }
  .nav-toggle-icon i { position: absolute; left: 0; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: translate 0.35s var(--ease), rotate 0.35s var(--ease); }
  .nav-toggle-icon i:first-child { top: 0; }
  .nav-toggle-icon i:last-child { bottom: 0; }
  .nav.is-open .nav-toggle-icon i:first-child { translate: 0 4px; rotate: 45deg; }
  .nav.is-open .nav-toggle-icon i:last-child { translate: 0 -4px; rotate: -45deg; }
  .js .nav-menu { flex-basis: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
  .js .nav-menu > .nav-links { min-height: 0; overflow: hidden; flex-direction: column; gap: 0; }
  .js .nav.is-open .nav-menu { grid-template-rows: 1fr; }
  .nav.is-open { background: rgba(246, 246, 247, 0.97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 18px 50px rgba(11, 11, 12, 0.16); }
  .js .nav-links a { padding: 14px 4px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); border-radius: 0; }
  .js .nav-links li:first-child a { margin-top: 12px; }
  .js .nav-links li + li a { border-top: 1px solid var(--line); }
  .js .nav-links li:last-child a { margin-bottom: 8px; }
  .nav-indicator { display: none; }
  .nav-progress { left: 20px; right: 20px; }

  .hero { padding-top: 100px; }
  .giant { font-size: clamp(3rem, 15.5vw, 5.4rem); line-height: 0.9; }
  .l2 { text-align: left; padding-left: 0.42em; }
  .hero-row { grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .pill-address { display: none; }
  .shop-row { grid-template-columns: 1fr; align-items: start; }
  .shop-row h2 { max-width: 14ch; }
  .devices { width: min(300px, 74vw); padding-bottom: 0; }
  .devices::before { inset: -16% -40% -10%; }
  .browser { display: none; }
  .phone { position: relative; width: 100%; }
  .shop-stats { gap: 30px 18px; }
  .shop-stats dd { font-size: clamp(2.3rem, 11.5vw, 3.4rem); }
  .towel-grid { grid-template-columns: 1fr; }
  .towel-stage { order: -1; width: min(86vw, 440px); }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .facts-card { border-radius: 24px; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .facts dd { padding-top: 2px; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .dock a, .dock button { padding: 10px 14px; }
  .dock.has-top .dock-top { width: 40px; padding-inline: 11px; }
}

/* ---------- Motion (skipped entirely when the visitor asks for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: site-nav; }
  .dock { view-transition-name: site-dock; }
  ::view-transition-old(root) { animation: vt-out 0.22s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.42s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; translate: 0 16px; } }

  @keyframes ticker { to { translate: -100% 0; } }
  @keyframes rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
  @keyframes line-up { from { translate: 0 105%; } to { translate: 0 0; } }
  @keyframes glyph-up { from { translate: 0 125%; } to { translate: 0 0; } }
  @keyframes intro-wipe { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
  @keyframes appear { from { opacity: 0; scale: 0.6; rotate: -12deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
  @keyframes dock-in { from { opacity: 0; translate: -50% 30px; } to { opacity: 1; translate: -50% 0; } }
  @keyframes nav-in { from { opacity: 0; translate: 0 -20px; } to { opacity: 1; translate: 0 0; } }
  @keyframes menu-item { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  @keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  /* intro: the logo letters rise, then the screen wipes open */
  .intro { animation: intro-wipe 0.85s var(--ease-io) 1.15s both; }
  .intro-logo path { transform-box: fill-box; animation: glyph-up 0.8s var(--ease) both; }
  .intro-logo path:nth-child(1) { animation-delay: 0.1s; }
  .intro-logo path:nth-child(2) { animation-delay: 0.15s; }
  .intro-logo path:nth-child(3) { animation-delay: 0.2s; }
  .intro-logo path:nth-child(4) { animation-delay: 0.25s; }
  .intro-logo path:nth-child(5) { animation-delay: 0.3s; }
  .intro-logo path:nth-child(6) { animation-delay: 0.35s; }
  .intro-logo path:nth-child(7) { animation-delay: 0.4s; }
  .intro-logo path:nth-child(8) { animation-delay: 0.45s; }
  .intro-logo path:nth-child(9) { animation-delay: 0.55s; }

  .ticker-track { animation: ticker 36s linear infinite; }

  /* page load, after the intro */
  .nav-wrap { animation: nav-in 0.8s var(--ease) calc(var(--intro-delay) + 0.1s) both; }
  .hero-kicker { animation: rise 0.8s var(--ease) calc(var(--intro-delay) + 0.05s) both; }
  .giant-in { animation: line-up 1.05s var(--ease) both; }
  .l1 .giant-in { animation-delay: calc(var(--intro-delay) + 0.1s); }
  .l2 .giant-in { animation-delay: calc(var(--intro-delay) + 0.22s); }
  .scene { animation: appear 1.2s var(--spring) calc(var(--intro-delay) + 0.45s) both; }
  .hero-lead { animation: rise 0.9s var(--ease) calc(var(--intro-delay) + 0.5s) both; }
  .hero-actions { animation: rise 0.9s var(--ease) calc(var(--intro-delay) + 0.62s) both; }
  .ticker { animation: rise 0.9s var(--ease) calc(var(--intro-delay) + 0.75s) both; }
  .dock { animation: dock-in 0.8s var(--ease) calc(var(--intro-delay) + 0.9s) both; }

  /* mobile menu items arrive one after another */
  .nav.is-open .nav-links li { animation: menu-item 0.4s var(--ease) both; }
  .nav.is-open .nav-links li:nth-child(2) { animation-delay: 0.05s; }
  .nav.is-open .nav-links li:nth-child(3) { animation-delay: 0.1s; }
  .nav.is-open .nav-links li:nth-child(4) { animation-delay: 0.15s; }

  /* hover feedback */
  .btn:hover svg, .dock a:hover svg { translate: 2px -2px; }
  .dock .dock-top:hover svg { translate: 0 -2px; }
  .row.is-open .draw { animation: redraw 1.4s var(--ease) 0.15s both; }

  /* e-mail card opens from the dock */
  .mail-card { transition: opacity 0.25s ease, scale 0.35s var(--spring), display 0.35s allow-discrete, overlay 0.35s allow-discrete; opacity: 0; scale: 0.92; }
  .mail-card:popover-open { opacity: 1; scale: 1; }
  @starting-style { .mail-card:popover-open { opacity: 0; scale: 0.92; } }

  /* content arrives as it scrolls into view (classes set by app.js) */
  .motion.reveal-ready [data-reveal] { opacity: 0; translate: 0 34px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); transition-delay: var(--d, 0s); }
  .motion.reveal-ready [data-reveal].is-in { opacity: 1; translate: 0 0; }
  .motion.reveal-ready .split-words .w { display: inline-block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; vertical-align: top; }
  .motion.reveal-ready .split-words .w > span { display: inline-block; translate: 0 110%; transition: translate 0.95s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
  .motion.reveal-ready .split-words.is-in .w > span { translate: 0 0; }
  .motion.reveal-ready .values li::after { scale: 0 1; transition: scale 1.1s var(--ease-io) 0.15s; }
  .motion.reveal-ready .values li.is-in::after { scale: 1 1; }
  .motion.reveal-ready .shop-stats div::before { scale: 0 1; transition: scale 1.1s var(--ease-io) calc(var(--d, 0s) + 0.1s); }
  .motion.reveal-ready .shop-stats div.is-in::before { scale: 1 1; }

  @supports (animation-timeline: scroll()) {
    @keyframes progress { to { scale: 1 1; } }
    @keyframes flip { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
    @keyframes drift-in { to { translate: 7vw 0; } }
    @keyframes drift-out { to { translate: -7vw 0; } }
    .nav-progress { animation: progress linear both; animation-timeline: scroll(root); }
    .mark { animation: flip linear both; animation-timeline: scroll(root); animation-range: 0px 90vh; }
    .l1 { animation: drift-in linear both; animation-timeline: scroll(root); animation-range: 0px 100vh; }
    .l2 { animation: drift-out linear both; animation-timeline: scroll(root); animation-range: 0px 100vh; }
  }

  /* ---------- AVVO stage (app.js adds .is-live and sets --open, --glow, --shot, --phone, --pshot from the scroll position,
     so it runs the same in every browser, Firefox and Zen included): a lone address pill types the address,
     opens into the browser window, the shop scrolls by, the phone joins ---------- */
  @keyframes blink { 50% { opacity: 0; } }
  .stage.is-live { height: 250vh; padding: 0; }
  .stage.is-live .stage-sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 92px var(--gutter) 84px; overflow: clip; }
  .stage.is-live .devices::before { opacity: var(--glow); scale: calc(0.6 + 0.4 * var(--glow)); }
  .stage.is-live .type span { opacity: 0; }
  .stage.is-live .type span.is-on { opacity: 1; }
  .stage.is-live.is-typing .caret { display: inline-block; animation: blink 1s steps(1, end) infinite; }
  @media (min-width: 721px) {
    .stage.is-live .devices { width: min(1120px, 100%, calc((100svh - 218px) * 1.7)); }
    .stage.is-live .browser {
      transform-origin: 50% 21px;
      translate: calc(8.14% * (1 - var(--open))) calc((50% - 21px) * (1 - var(--open)));
      scale: calc(1.5 - 0.5 * var(--open));
    }
    .stage.is-live .browser-win {
      clip-path: inset(calc(7px * (1 - var(--open))) calc((50% - var(--url-w) / 2) * (1 - var(--open))) calc((100% - 35px) * (1 - var(--open))) calc((50% - var(--url-w) / 2) * (1 - var(--open))) round 14px);
    }
    .stage.is-live .browser .screen-img { translate: 0 calc(-80% * var(--shot)); }
    .stage.is-live .phone { opacity: var(--phone); translate: calc(22% * (1 - var(--phone))) calc(30% * (1 - var(--phone))); rotate: calc(8deg * (1 - var(--phone))); }
    .stage.is-live .phone .screen-img { translate: 0 calc(var(--phone-travel) * var(--pshot)); }
    .stage.is-live .phone .type span { opacity: 1; }
    .stage.is-live .phone .caret { display: none; }
  }
  @media (max-width: 720px) {
    .stage.is-live { height: 210vh; }
    .stage.is-live .devices { width: min(300px, 74vw, calc((100svh - 176px) * 0.452)); }
    .stage.is-live .phone-body {
      clip-path: inset(calc((100% - 18cqi) * (1 - var(--open))) calc(15cqi * (1 - var(--open))) calc(7cqi * (1 - var(--open))) calc(15cqi * (1 - var(--open))) round calc(5.5cqi + 9.5cqi * var(--open)));
      translate: 0 calc((12.5cqi - 50%) * (1 - var(--open)));
    }
    .stage.is-live .phone .screen-img { translate: 0 calc(var(--phone-travel) * var(--pshot)); }
  }

  /* statement for browsers without CSS scroll timelines (app.js adds .is-live and turns the words one by one) */
  .statement.is-live { height: 240vh; padding: 0; }
  .statement.is-live .statement-inner { position: sticky; top: 0; height: 100svh; padding-inline: var(--gutter); }
  .statement.is-live .reveal span { color: var(--brand-grey); transition: color 0.35s ease; }
  .statement.is-live .reveal span.is-ink { color: var(--ink); }

  /* ---------- Towel story (class set by app.js): the stage stays pinned, the towel changes form, the facts take turns ---------- */
  .towel.is-story .towel-track { height: 320vh; }
  .towel.is-story .towel-sticky { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; padding-block: 92px 84px; }
  .towel.is-story .towel-steps { display: grid; border: 0; }
  .towel.is-story .towel-step { grid-area: 1 / 1; padding: 0; border: 0; }
  .towel.is-story .towel-step > * { opacity: 0; translate: 0 44px; transition: opacity 0.3s ease, translate 0.5s var(--ease); }
  .towel.is-story .towel-step.is-before > * { translate: 0 -44px; }
  .towel.is-story .towel-step.is-active > * { opacity: 1; translate: 0 0; transition: opacity 0.7s ease 0.16s, translate 1s var(--ease) 0.1s; }
  .towel.is-story .towel-step.is-active > :nth-child(2) { transition-delay: 0.22s, 0.16s; }
  .towel.is-story .towel-step.is-active > :nth-child(3) { transition-delay: 0.3s, 0.24s; }
  .towel.is-story .towel-img { display: block; opacity: 0; scale: 0.86; rotate: -9deg; transition: opacity 0.45s ease, scale 0.9s var(--ease), rotate 1s var(--ease); }
  .towel.is-story .towel-img.is-before { scale: 1.1; rotate: 7deg; }
  .towel.is-story .towel-img.is-active { opacity: 1; scale: 1; rotate: 0deg; transition: opacity 0.6s ease 0.12s, scale 1.1s var(--ease) 0.05s, rotate 1.2s var(--ease) 0.05s; }
  .towel.is-story .ring-fill { stroke-dashoffset: calc(1 - var(--p, 0)); }
  .towel.is-story .ring-tick { fill: #fff; transition: fill 0.35s ease; }
  .towel.is-story .ring-tick.is-on { fill: var(--ink); }
  @media (max-width: 720px) {
    .towel.is-story .towel-sticky { padding-block: 80px 86px; }
    .towel.is-story .towel-grid { gap: 14px; }
    .towel.is-story .towel-stage { width: min(78vw, 40svh); }
    .towel.is-story .kicker { display: none; }
    .towel.is-story .towel-copy h2 { font-size: 1.6rem; margin-bottom: 12px; }
    .towel.is-story .step-big { margin-top: 6px; font-size: clamp(2.2rem, 10.5vw, 3rem); }
    .towel.is-story .step-text { margin-top: 10px; font-size: 1rem; }
    .towel.is-story .step-quote p { font-size: 1.3rem; }
    .towel.is-story .towel-foot { margin-top: 18px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track[aria-hidden] { display: none; }
  .ticker { justify-content: center; }
  .ticker-track { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}