/* Uhrenatelier Vallembert: shared styles of every page (base, type roles, actions, navigation, menu, footer) and the
   building blocks of the subpages. The start page adds home.css for its two sticky runs.
   Base styles are the calm flow layout (no JS, reduced motion): every text is visible in reading order. Entrances
   are set by reveal.js on elements below the first window only, so nothing here hides content.
   Breakpoints: 40rem (nav CTA, two columns), 48rem (pairs), 64rem (full navigation, page grids). Portrait framing of
   the page heads is a window shape (aspect below 17/20) or a phone (device class from boot.js, never a width). */

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-weight: var(--w-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: rgba(237, 237, 234, 0.22) var(--c-ground);
  scrollbar-width: thin;
  hanging-punctuation: first;
  overflow-x: clip;
}
html:not(.has-lenis) { scroll-behavior: auto; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--c-ground);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

::selection { background: var(--c-brass); color: var(--c-ground); }
input, textarea { caret-color: var(--c-brass); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-ground); }
::-webkit-scrollbar-thumb { background: rgba(237, 237, 234, 0.18); border-radius: var(--r-pill); border: 3px solid var(--c-ground); }

[hidden] { display: none !important; }

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }

/* keyboard focus: a brass outline at a distance, never a red ring, nothing for mouse and touch */
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--c-brass); outline-offset: 4px; border-radius: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: var(--gut); top: 0.75rem; z-index: var(--z-skip);
  padding: 0.75rem 1.125rem; border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-ground); font-weight: var(--w-ui); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--dur-ui) var(--ease-house);
}
.skip-link:focus-visible { transform: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- type roles ---------- */

.display, .h2, .h3, .path-say, .brand-word, .kern, .sector-num, .rates .amt, .rates tbody th {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-kerning: normal;
}
.display {
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display);
  font-weight: var(--w-display); text-wrap: balance; max-width: 11.5em;
}
.h2 {
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  font-weight: var(--w-display); text-wrap: balance; max-width: 18em;
}
.h3 {
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  font-weight: var(--w-h3); text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-ink-2);
  max-width: 30em; text-wrap: pretty;
}
.body-text { color: var(--c-ink-2); max-width: var(--measure); text-wrap: pretty; }
.body-text + .body-text { margin-top: var(--sp-4); }

/* ---------- actions ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 2.875rem; padding: 0 1.375rem;
  border: 0; border-radius: var(--r-pill);
  font: var(--w-ui) var(--fs-small) / 1 var(--f-text); letter-spacing: 0.005em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-house);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn-signal { background: var(--c-signal); color: var(--c-signal-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-signal:hover { background: var(--c-signal-hover); }
}
.btn[aria-busy="true"] { cursor: progress; }
.btn:disabled { cursor: default; }

.text-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: var(--w-ui); font-size: var(--fs-small); color: var(--c-ink); text-align: left;
  text-decoration: underline; text-decoration-color: var(--c-brass-soft);
  text-decoration-thickness: 1px; text-underline-offset: 0.36em;
  transition: text-decoration-color var(--dur-ui) ease, color var(--dur-ui) ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { text-decoration-color: var(--c-brass); }
}
/* links inside running text */
.prose-link { color: var(--c-ink); text-decoration-color: var(--c-brass-soft); text-underline-offset: 0.28em; transition: text-decoration-color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) {
  .prose-link:hover { text-decoration-color: var(--c-brass); }
}

/* the «Demoprojekt» badge and the «Beispiel» label share one form */
.demo-badge, .tag {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0.4rem 0.75rem; border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  font: var(--w-ui) var(--fs-micro) / 1 var(--f-text); letter-spacing: var(--tr-micro); color: var(--c-ink-2);
}
.tag { justify-self: start; }

/* ---------- navigation ---------- */

.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: calc(var(--nav-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
}
/* over a picture: a soft scrim from the top edge (gradients only at the top of the window) */
.site-nav::after {
  content: ""; position: absolute; inset: 0 0 -60% 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16, 14, 11, 0.72), rgba(16, 14, 11, 0));
  transition: opacity 400ms var(--ease-house);
}
/* over content sections: the solid bar with a hairline */
.site-nav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(21, 19, 15, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: inset 0 -1px 0 var(--c-line);
  opacity: 0; transition: opacity 400ms var(--ease-house);
}
.site-nav.is-solid::before { opacity: 1; }
.site-nav.is-solid::after { opacity: 0; }
@media (prefers-reduced-transparency: reduce) {
  .site-nav::before { background: var(--c-ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.nav-inner {
  position: relative; z-index: 1; height: var(--nav-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding-inline: var(--edge);
}
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--c-ink); }
.brand-word {
  font-size: 1.0625rem; font-weight: 460; letter-spacing: 0.2em; text-transform: uppercase;
  margin-right: -0.2em; line-height: 1;
}
.nav-badge { margin-left: var(--sp-1); }
.nav-links { margin-left: auto; display: none; }
.nav-links ul { display: flex; gap: var(--sp-2); }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem;
  font-weight: var(--w-ui); font-size: var(--fs-small); text-decoration: none; color: var(--c-ink);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.5em;
  transition: text-decoration-color var(--dur-ui) ease;
}
.nav-links a[aria-current="page"] { text-decoration-color: var(--c-brass); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { text-decoration-color: var(--c-brass-soft); }
  .nav-links a[aria-current="page"]:hover { text-decoration-color: var(--c-brass); }
}
.nav-cta { display: none; }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 2.75rem; padding: 0 0.875rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: transparent; cursor: pointer; font-weight: var(--w-ui); font-size: var(--fs-small);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-house);
}
.nav-toggle:active { transform: scale(0.97); }
.nav-toggle-icon { position: relative; width: 16px; height: 10px; }
.nav-toggle-icon i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 300ms var(--ease-house), top 300ms var(--ease-house);
}
.nav-toggle-icon i:first-child { top: 1px; }
.nav-toggle-icon i:last-child { top: 7.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:first-child { top: 4.25px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:last-child { top: 4.25px; transform: rotate(-45deg); }

@media (min-width: 40rem) {
  .nav-cta { display: inline-flex; margin-left: auto; }
  .nav-toggle { margin-left: 0; }
}
@media (min-width: 64rem) {
  .nav-links { display: block; }
  .nav-cta { margin-left: var(--sp-2); }
  .nav-toggle { display: none; }
  .nav-badge { margin-left: var(--sp-2); }
}
@media (max-width: 39.99rem) {
  .nav-inner { gap: var(--sp-3); }
  .brand-word { font-size: 0.9375rem; letter-spacing: 0.17em; margin-right: -0.17em; }
  .nav-badge { margin-left: 0; padding: 0.35rem 0.6rem; font-size: 0.75rem; }
  .nav-toggle { padding: 0 0.75rem; gap: 0.5rem; }
}
@media (max-width: 22.5rem) {
  .nav-toggle-label { display: none; }
  .nav-toggle { padding: 0 0.875rem; }
}
/* «Schliessen» is longer than «Menü»: on narrow phones the open toggle shows the cross only, the word stays for
   screen readers */
@media (max-width: 30rem) {
  .nav-toggle[aria-expanded="true"] { padding: 0 0.875rem; gap: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* menu sheet (below 64rem) */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
  background: var(--c-ground);
  clip-path: inset(0 0 100% 0); opacity: 0;
  transition: clip-path 420ms var(--ease-drawer), opacity 300ms var(--ease-house);
}
.menu.is-open { clip-path: inset(0 0 0 0); opacity: 1; }
.menu-inner { display: grid; gap: var(--sp-7); padding: var(--sp-6) var(--gut) calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.menu-inner:focus, .menu-inner:focus-visible { outline: none; }
.menu-links { display: grid; gap: var(--sp-2); }
.menu-links a {
  display: block; padding: 0.5rem 0; text-decoration: none;
  font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 3vw, 2.75rem); line-height: 1.15;
  font-weight: var(--w-display); letter-spacing: var(--tr-h2);
}
.menu-links a[aria-current="page"] { color: var(--c-ink-2); }
.menu-cta { justify-self: start; }
.menu-meta a { color: var(--c-ink-2); text-decoration: none; font-size: var(--fs-body); }
html.menu-open .site-nav::after { opacity: 0; }

/* ---------- footer (calm columns) ---------- */

.site-foot {
  position: relative; z-index: 3; background: var(--c-ground); border-top: 1px solid var(--c-line);
  padding: var(--sp-9) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6); }
.foot-brand { grid-column: 1 / -1; display: grid; gap: var(--sp-4); align-content: start; }
.foot-brand p { color: var(--c-ink-2); font-size: var(--fs-small); max-width: 22rem; }
.foot-col:first-of-type { grid-column: 1 / -1; }
.foot-h { font: var(--w-ui) var(--fs-micro) / 1.3 var(--f-text); letter-spacing: var(--tr-micro); color: var(--c-ink-3); margin-bottom: var(--sp-4); }
.foot-col ul { display: grid; gap: var(--sp-1); font-size: var(--fs-small); color: var(--c-ink-2); }
.foot-col li { min-height: 2rem; display: flex; align-items: center; text-wrap: balance; }
.foot-col a { color: var(--c-ink-2); text-decoration: none; transition: color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { color: var(--c-ink); } }
.foot-mail { overflow-wrap: anywhere; }
.foot-end {
  margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-micro); letter-spacing: var(--tr-micro); color: var(--c-ink-3);
}
@media (min-width: 48rem) {
  .foot-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .foot-brand, .foot-col:first-of-type { grid-column: auto; }
}

/* ---------- the pause switch of a running watch (start page and inquiry) ---------- */

.pause {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0 1rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: transparent; cursor: pointer;
  font-weight: var(--w-ui); font-size: var(--fs-micro); letter-spacing: var(--tr-micro); color: var(--c-ink-2);
  transition: transform var(--dur-press) var(--ease-house), color var(--dur-ui) ease;
}
.pause:active { transform: scale(0.97); }
.pause::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brass); }
.pause[aria-pressed="true"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--c-ink-3); }

/* =========================================================================================
   Subpages
   ========================================================================================= */

/* ---------- page head: copy on the left, a still of the sequence behind it (subject right of the copy) ---------- */

.page-head {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(88svh, 56rem);
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + 3rem) var(--edge) clamp(2.5rem, 7svh, 5rem);
}
.head-media {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--c-ground);
  container-type: size;
}
.head-media > .slot, .head-media > picture, .head-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: var(--sx, 69%) var(--sy, 50%);
}
.head-copy { position: relative; display: grid; gap: var(--sp-4); max-width: min(46rem, 52vw); }
.head-copy .lead { max-width: 28em; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-2); }
.head-note { flex-basis: 100%; font-size: var(--fs-small); color: var(--c-ink-2); max-width: 26rem; }
.head-labels { display: none; }

/* stacked head: picture on top, copy below on the flat ground (portrait windows and phones held either way) */
@media (max-aspect-ratio: 17/20) {
  .page-head:has(.head-media) {
    min-height: 0; justify-content: flex-start;
    padding: calc(48svh + var(--sp-6)) var(--gut) var(--sp-7);
  }
  .page-head .head-media { inset: 0 0 auto 0; height: 48svh; }
  .head-copy { max-width: 36rem; }
  .head-media > .slot { --sx: 50%; --sy: 42%; }
}
html[data-device="phone"] .page-head:has(.head-media) {
  min-height: 0; justify-content: flex-start;
  padding: calc(48svh + var(--sp-6)) var(--gut) var(--sp-7);
}
html[data-device="phone"] .page-head .head-media { inset: 0 0 auto 0; height: 48svh; }
html[data-device="phone"] .head-copy { max-width: 36rem; }
html[data-device="phone"] .head-media > .slot { --sx: 50%; --sy: 42%; }

/* plain head without picture (inquiry, legal pages) */
.page-head.is-plain { min-height: 0; padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + clamp(3.5rem, 12svh, 7rem)); padding-bottom: clamp(2.5rem, 6svh, 4rem); }
.page-head.is-plain .head-copy { max-width: 46rem; }

/* placeholder of a still that is not rendered yet: the studio backdrop of the Cycles frames (#15130F with the faint
   lift behind the subject), same box as the picture that replaces it */
.slot {
  display: block; width: 100%; height: 100%;
  background: radial-gradient(ellipse 52% 58% at var(--sx, 50%) var(--sy, 50%), #1e1a15 0%, var(--c-ground) 66%);
}
.head-media > .slot { --sx: 69%; --sy: 50%; }

/* ---------- sections ---------- */

.sec { position: relative; padding-top: var(--sec); }
.sec:last-child { padding-bottom: var(--sec); }
.sec-head { display: grid; gap: var(--sp-5); margin-bottom: clamp(2.5rem, 6svh, 4.5rem); }
.sec-head .body-text { max-width: 38rem; }

/* six cards with a cut of a montage still; titles share one row height (subgrid) */
.cards { display: grid; gap: var(--sp-8) var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* wide windows: two cards per row in alternating widths (7 + 5, then 5 + 7 of twelve columns). Both pictures of a row
   get the height of the wide one at 16:10, computed from the width of the card grid (a container), so the titles of
   a row stay level; an explicit height also keeps WebKit from sizing the row before the picture */
@media (min-width: 64rem) {
  .cards { --cg: clamp(1.5rem, 3vw, 3rem); container-type: inline-size; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
  .card:nth-child(4n + 1), .card:nth-child(4n + 4) { grid-column: span 7; }
  .card:nth-child(4n + 2), .card:nth-child(4n + 3) { grid-column: span 5; }
  .cards .card-media { aspect-ratio: auto; height: calc(((100cqw - 11 * var(--cg)) * 7 / 12 + 6 * var(--cg)) / 1.6); }
}
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--sp-3); align-content: start; }
.card p { color: var(--c-ink-2); text-wrap: pretty; }
.card-media { aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background: var(--c-ground-deep); margin-bottom: var(--sp-2); }
.card-media > * { width: 100%; height: 100%; }

/* guide prices: a calm table with tabular figures, the price drivers beside it */
.rates-grid { display: grid; gap: var(--sp-8); }
@media (min-width: 64rem) { .rates-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8) clamp(3rem, 6vw, 6rem); align-items: start; } }
.rates { width: 100%; font-variant-numeric: tabular-nums lining-nums; }
.rates caption { caption-side: top; text-align: left; padding-bottom: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-2); }
.rates th, .rates td { text-align: left; vertical-align: baseline; padding: 1rem 1.25rem 1rem 0; }
.rates th:last-child, .rates td:last-child { padding-right: 0; }
.rates thead th { padding-top: 0; padding-bottom: 0.75rem; font: var(--w-ui) var(--fs-micro) / 1.3 var(--f-text); letter-spacing: var(--tr-micro); color: var(--c-ink-3); }
.rates tbody tr { border-top: 1px solid var(--c-line); }
.rates tbody th { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-h3); }
.rates .amt { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 360; white-space: nowrap; }
.rates td { color: var(--c-ink-2); }
.rates .amt { color: var(--c-ink); }
.rates-note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--c-ink-2); max-width: 32rem; }
.drivers-title { margin-bottom: var(--sp-5); }
.drivers { display: grid; gap: var(--sp-4); color: var(--c-ink-2); }
.drivers li { max-width: 32rem; text-wrap: pretty; }
.rates-close { margin-top: var(--sp-6); color: var(--c-ink); max-width: 32rem; }

/* process sentences (the start page's sentence row without the word-by-word lighting) */
.says { display: grid; gap: clamp(2.5rem, 6svh, 4rem) var(--sp-8); }
/* wide windows: a staircase in two columns, each step one row lower than the one before and on the other side, so the
   order reads by itself from top to bottom (no numbers, no line) */
@media (min-width: 64rem) {
  .says { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); row-gap: clamp(1.25rem, 3svh, 2rem); }
  .says > li:nth-child(odd) { grid-column: 1; }
  .says > li:nth-child(even) { grid-column: 2; }
  .says > li:nth-child(1) { grid-row: 1 / span 2; }
  .says > li:nth-child(2) { grid-row: 2 / span 2; }
  .says > li:nth-child(3) { grid-row: 3 / span 2; }
  .says > li:nth-child(4) { grid-row: 4 / span 2; }
  .says > li:nth-child(5) { grid-row: 5 / span 2; }
  .says > li:nth-child(6) { grid-row: 6 / span 2; }
}
.path-say {
  font-size: var(--fs-say); line-height: 1.2; letter-spacing: -0.015em; font-weight: var(--w-display);
  max-width: 20em; text-wrap: pretty;
}
.says .path-say { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); }
.path-meta { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-2); max-width: 30rem; text-wrap: pretty; }
.fine { margin-top: clamp(3rem, 7svh, 4.5rem); font-size: var(--fs-small); color: var(--c-ink-3); max-width: 40rem; }

/* measuring protocol: the timegrapher drawing beside the table */
.protocol { display: grid; gap: var(--sp-7); }
@media (min-width: 64rem) {
  .protocol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8) clamp(3rem, 5vw, 5rem); align-items: start; }
  .tg { position: sticky; top: calc(var(--nav-h) + 3rem); }
}
.tg { display: grid; gap: var(--sp-4); }
.tg[hidden] { display: none; }
.tg-pair { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { html.rm .tg-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-panel {
  position: relative; width: min(100%, calc(40svh * 5 / 3)); aspect-ratio: 5 / 3;
  background: var(--c-ground-raise); border-radius: var(--r-m); overflow: hidden;
}
html.rm .tg-panel { width: 100%; }
.tg-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tg-state, .tg-panel .tag { position: absolute; top: 1rem; z-index: 1; }
.tg-state {
  left: 1.125rem; font: var(--w-ui) var(--fs-micro) / 1.2 var(--f-text); letter-spacing: var(--tr-micro); color: var(--c-ink-2);
  transition: opacity var(--dur-state-out) var(--ease-house), transform var(--dur-state-out) var(--ease-house);
}
.tg-state.is-swap { opacity: 0; transform: translateY(4px); }
.tg-panel .tag { right: 1rem; background: var(--c-ground-raise); }
.tg-dot { fill: var(--c-brass); }
.tg-dot.is-old { fill-opacity: 0.45; }
.tg-dot.is-off { fill-opacity: 0; }
.tg-axis line { stroke: var(--c-ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tg-axis text { fill: var(--c-ink-3); font: var(--w-ui) 0.75rem var(--f-text); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-micro); }

.ptable { display: grid; gap: var(--sp-4); }
.ptable .rates tbody th { font-family: var(--f-text); font-size: var(--fs-small); line-height: 1.4; font-weight: var(--w-ui); color: var(--c-ink); }
.ptable .rates td { font-size: var(--fs-small); color: var(--c-ink-2); white-space: nowrap; }
.ptable .rates td + td { color: var(--c-ink); }
.defs { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-2); }
.defs div { max-width: 32rem; }
.defs dt { display: inline; color: var(--c-ink); font-weight: var(--w-ui); }
.defs dd { display: inline; }

/* core sentence large, the supporting sentences as short blocks */
.argue { display: grid; gap: var(--sp-6) var(--sp-8); }
.kern { font-size: var(--fs-h3); line-height: 1.32; letter-spacing: var(--tr-h3); font-weight: var(--w-h3); max-width: 34em; text-wrap: pretty; }
.argue > p:not(.kern) { color: var(--c-ink-2); max-width: var(--measure); text-wrap: pretty; }
@media (min-width: 64rem) {
  .argue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .argue > .kern { grid-column: 1 / -1; }
}

/* the closing panel of a page */
.close-panel {
  display: grid; gap: var(--sp-5); justify-items: start;
  padding: clamp(2.25rem, 5vw, 4.5rem); border-radius: var(--r-m); background: var(--c-ground-raise);
}
.close-panel .lead { max-width: 34em; }
.close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }

/* two panels side by side, titles on one line height */
.duo { display: grid; gap: var(--sp-5); }
@media (min-width: 48rem) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo > article {
  display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--sp-3);
  padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--r-m); background: var(--c-ground-raise);
}
.duo p { color: var(--c-ink-2); text-wrap: pretty; }

.pair { display: grid; gap: var(--sp-5) var(--sp-8); }
@media (min-width: 64rem) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pair > p { color: var(--c-ink-2); max-width: var(--measure); text-wrap: pretty; }
.pair > .kern { color: var(--c-ink); }

/* release in stages: the power-reserve sector of the start page with three marks */
.stages { display: grid; gap: var(--sp-6); }
.stages-bar { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top)); z-index: 1; padding-block: var(--sp-3); background: var(--c-ground); }
.sector { position: relative; width: 4.25rem; height: 4.25rem; }
.sector svg { width: 100%; height: 100%; overflow: visible; }
.sector line { stroke: var(--c-ink-3); stroke-width: 1.5; stroke-linecap: round; transition: stroke 300ms ease; }
.sector line.is-done { stroke: var(--c-ink-2); }
.sector line.is-active { stroke: var(--c-brass); stroke-width: 2; }
.sector-num {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-size: 1.125rem; font-variant-numeric: tabular-nums lining-nums; color: var(--c-ink);
}
.stage-list { display: grid; gap: clamp(2.5rem, 7svh, 4.5rem); }
.stage-list li { display: grid; gap: var(--sp-3); max-width: 40rem; }
.stage-list p { color: var(--c-ink-2); text-wrap: pretty; }
.stages-after { margin-top: clamp(3rem, 7svh, 4.5rem); color: var(--c-ink-2); max-width: 40rem; }
@media (min-width: 64rem) {
  .stages { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .stage-list { grid-column: 2; grid-row: 1; }
  .stages-bar { grid-column: 1; grid-row: 1; }
  .stages-bar { top: calc(var(--nav-h) + 3rem); padding: 0; background: none; }
  .sector { width: 6rem; height: 6rem; }
  .sector-num { font-size: 1.375rem; }
}
html:not(.js) .stages-bar { display: none; }

/* before / after comparison: a vertical split over two renders of the same watch */
.compare {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--c-ground-deep);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; --split: 50%;
}
@media (max-aspect-ratio: 17/20) { .compare { aspect-ratio: 4 / 5; } }
html[data-device="phone"] .compare { aspect-ratio: 4 / 5; }
.cmp-layer { position: absolute; inset: 0; }
.cmp-layer > * { width: 100%; height: 100%; }
.cmp-before > .slot { --sx: 50%; --sy: 46%; filter: sepia(0.35) brightness(0.92); }
.cmp-after > .slot { --sx: 50%; --sy: 46%; }
.cmp-after { clip-path: inset(0 0 0 var(--split)); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1px; margin-left: -0.5px; background: var(--c-ink); pointer-events: none; }
.cmp-grip {
  position: absolute; top: 50%; left: var(--split); width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgb(21 19 15 / 0.55); cursor: ew-resize; touch-action: none;
}
.cmp-grip svg { width: 100%; height: 100%; overflow: visible; }
.cmp-grip line { stroke: var(--c-ink); stroke-width: 2.5; stroke-linecap: round; }
.cmp-label, .compare > .tag { position: absolute; top: 1rem; z-index: 1; }
.cmp-label {
  padding: 0.4rem 0.75rem; border-radius: var(--r-pill); background: rgb(21 19 15 / 0.6);
  font: var(--w-ui) var(--fs-micro) / 1 var(--f-text); letter-spacing: var(--tr-micro); color: var(--c-ink);
}
.cmp-label-before { left: 1rem; }
.cmp-label-after { right: calc(1rem + 5.75rem); }
.compare > .tag { right: 1rem; background: rgb(21 19 15 / 0.6); }
.cmp-range { position: absolute; inset: auto 0 0 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.compare:has(.cmp-range:focus-visible) .cmp-grip { outline: 1.5px solid var(--c-brass); outline-offset: 4px; }
html:not(.js) .cmp-grip, html:not(.js) .cmp-line { display: none; }

/* case studies */
.cases { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 48rem) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case {
  display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: var(--sp-3); align-content: start;
  padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--r-m); background: var(--c-ground-raise);
}
.case-line { font-size: var(--fs-small); color: var(--c-ink-2); font-variant-numeric: tabular-nums lining-nums; }
.case p:not(.case-line) { color: var(--c-ink-2); text-wrap: pretty; }

/* ---------- inquiry ---------- */

.inq-grid { display: grid; gap: var(--sp-9); padding-bottom: var(--sec); }
@media (min-width: 64rem) {
  .inq-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8) clamp(3rem, 6vw, 7rem); align-items: start; }
  .inq-side { position: sticky; top: calc(var(--nav-h) + 2rem); }
  .inq-side .clock { order: -1; }
}
.inq-main { min-width: 0; max-width: 44rem; }
.inq-demo {
  margin-bottom: var(--sp-7); padding: 1rem 1.25rem; border-radius: var(--r-m); background: var(--c-ground-raise);
  font-size: var(--fs-small); color: var(--c-ink-2); max-width: 40rem;
}

.inq-summary {
  margin-bottom: var(--sp-6); padding: 1.25rem 1.5rem; border-radius: var(--r-m); background: var(--c-ground-raise);
  display: grid; gap: var(--sp-3);
}
.inq-summary[hidden] { display: none; }
.inq-summary p { font-weight: var(--w-ui); }
.inq-summary ul { display: grid; gap: 0; font-size: var(--fs-small); }
/* links that stand alone on their line get a hit area of at least 24 px (WCAG 2.5.8) */
.inq-summary a { display: inline-block; padding-block: 0.375rem; color: var(--c-ink); text-decoration-color: var(--c-brass-soft); text-underline-offset: 0.28em; }

.step-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-7); }
/* step indicator: the words alone, no marks in front (two steps, each with its own title) */
.stepper { font: var(--w-ui) var(--fs-small) / 1.2 var(--f-text); color: var(--c-ink-2); }
.step-title:focus-visible { outline-offset: 6px; }
html.js .inq-step[hidden] { display: none; }

.field { display: grid; gap: 0.5rem; margin-bottom: var(--sp-6); }
.field-label, .field > legend { font-weight: var(--w-ui); font-size: var(--fs-body); line-height: 1.35; }
.field > legend { margin-bottom: 0.5rem; }
.field-hint { font-size: var(--fs-small); color: var(--c-ink-2); max-width: 36rem; text-wrap: pretty; }
.input {
  width: 100%; min-height: 3.25rem; padding: 0.8rem 1rem;
  font-size: max(16px, var(--fs-body)); line-height: 1.4; color: var(--c-ink);
  background: var(--c-ground-raise); border: 0; border-radius: var(--r-s);
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
  transition: box-shadow var(--dur-ui) ease;
  -webkit-appearance: none; appearance: none;
}
textarea.input { min-height: 8.5rem; resize: vertical; }
.input::placeholder { color: var(--c-ink-3); }
@media (hover: hover) and (pointer: fine) { .input:hover { box-shadow: inset 0 0 0 1px rgba(237, 237, 234, 0.36); } }
.input:focus-visible { outline: 1.5px solid var(--c-brass); outline-offset: 3px; border-radius: var(--r-s); }
.field.is-invalid .input, .contact-group.is-invalid .input { box-shadow: inset 0 0 0 1px var(--c-line-strong), inset 0 -1px 0 var(--c-brass); }
.field-error { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--fs-small); color: var(--c-ink); }
.field-error::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brass); transform: translateY(-2px); }
.field-error[hidden] { display: none; }
/* two fields side by side share three rows (label, input, message): a message under one field never moves or
   stretches the other */
.pair-fields { display: grid; gap: 0 var(--sp-5); }
.field { align-content: start; }
@media (min-width: 40rem) {
  .pair-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
  .pair-fields .field { grid-row: span 3; grid-template-rows: subgrid; }
}
.pair-fields .field { margin-bottom: var(--sp-3); }
.contact-group { margin-bottom: var(--sp-6); }
.contact-group > .field-hint { margin-bottom: var(--sp-3); }

/* chips: rounded choices (single or multiple), chosen ones get the brass edge and a small brass point */
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.125rem;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--c-line-strong);
  font-weight: var(--w-ui); font-size: var(--fs-small); color: var(--c-ink-2); pointer-events: none;
  transition: box-shadow var(--dur-ui) ease, color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
.chip input:checked + span { box-shadow: inset 0 0 0 1px var(--c-brass); background: var(--c-ground-raise); color: var(--c-ink); }
.chip input:checked + span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brass); }
.chip input:focus-visible + span { outline: 1.5px solid var(--c-brass); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked):hover + span { box-shadow: inset 0 0 0 1px rgba(237, 237, 234, 0.4); color: var(--c-ink); } }

/* photos: the native input stays focusable, the pill label is its visible face */
.file { position: relative; display: inline-flex; }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-btn {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--c-line-strong);
  font-weight: var(--w-ui); font-size: var(--fs-small); color: var(--c-ink); pointer-events: none;
}
.file-input:focus-visible + .file-btn { outline: 1.5px solid var(--c-brass); outline-offset: 3px; }
.photos { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.photos:empty { display: none; }
.photo { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.photo canvas, .photo .photo-none { flex: none; width: 3.5rem; height: 3.5rem; border-radius: var(--r-s); background: var(--c-ground-deep); }
.photo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); color: var(--c-ink-2); }
.photo .text-link { margin-left: auto; flex: none; }
.photo-note { font-size: var(--fs-small); color: var(--c-ink-3); }

.step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-7); }
.step-note { flex-basis: 100%; font-size: var(--fs-small); color: var(--c-ink-2); }
.privacy-link { margin-top: var(--sp-2); }
.noscript-note { margin-top: var(--sp-6); padding: 1rem 1.25rem; border-radius: var(--r-m); background: var(--c-ground-raise); font-size: var(--fs-small); color: var(--c-ink-2); }

/* waiting state: a small seconds hand that jumps in fifths of a second */
.busy { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.busy::after {
  content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 1px; height: 4.5px; background: currentColor;
  transform-origin: 50% 4.5px; animation: busy-hand 3s steps(15) infinite;
}
@keyframes busy-hand { to { transform: rotate(360deg); } }

.inq-done { display: grid; gap: var(--sp-5); justify-items: start; }
.inq-done[hidden] { display: none; }
.inq-done .h2:focus-visible { outline-offset: 6px; }
.inq-done .demo-line { padding: 1rem 1.25rem; border-radius: var(--r-m); background: var(--c-ground-raise); color: var(--c-ink-2); font-size: var(--fs-small); max-width: 40rem; }
.next-steps { display: grid; gap: var(--sp-4); counter-reset: step; max-width: 38rem; }
.next-steps li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); color: var(--c-ink-2); text-wrap: pretty; }
.next-steps li::before { counter-increment: step; content: counter(step); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }

.inq-side { display: flex; flex-direction: column; gap: var(--sp-7); }
.inq-contact { display: grid; gap: var(--sp-5); }
.inq-contact .h3 { font-family: var(--f-text); font-size: var(--fs-micro); line-height: 1.3; letter-spacing: var(--tr-micro); font-weight: var(--w-ui); color: var(--c-ink-3); margin-bottom: var(--sp-2); }
.inq-contact p { color: var(--c-ink-2); font-size: var(--fs-small); }
.inq-contact a:not(.text-link) { display: inline-block; padding-block: 0.375rem; margin-block: -0.375rem; color: var(--c-ink); text-decoration-color: var(--c-brass-soft); overflow-wrap: anywhere; }
.inq-contact .text-link { font-size: var(--fs-body); }

/* the running watch: a 4:5 cut of the final picture with the three hand layers */
.clock { display: grid; gap: var(--sp-3); justify-items: start; }
.clock-face { position: relative; width: min(100%, 26rem); aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; background: var(--c-ground-deep); }
.clock-face > .slot { --sx: 50%; --sy: 44%; }
.clock .pause[hidden] { display: none; }
@media (min-width: 64rem) { .clock-face { width: min(100%, calc(46svh * 4 / 5)); } }

/* ---------- legal pages ---------- */

.legal { max-width: 46rem; padding-bottom: var(--sec); }
.legal h2 { font-size: var(--fs-h3); margin: var(--sp-8) 0 var(--sp-3); }
.legal p, .legal li { color: var(--c-ink-2); text-wrap: pretty; }
.legal p + p { margin-top: var(--sp-4); }
.legal ul { display: grid; gap: var(--sp-1); }
.legal a { color: var(--c-ink); text-decoration-color: var(--c-brass-soft); text-underline-offset: 0.28em; overflow-wrap: anywhere; }
.legal-panel {
  display: grid; gap: var(--sp-4); justify-items: start;
  padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--r-m); background: var(--c-ground-raise);
}
.legal-panel h2 { margin: 0; }
.legal-panel p { margin: 0; }

/* ---------- not found ---------- */

.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-2); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn:active, .nav-toggle:active, .pause:active { transform: none; }
  .menu { transition: opacity 200ms ease; clip-path: none; }
  .busy::after { animation: none; }
  .tg-state { transition: opacity 200ms ease; }
}

/* ---------- stills of the image sequence (2:1 frames), cut the way the player cuts them ---------- */
/* object-fit: cover, but the optical axis of the frame (--fx, --fy; per still in stills.css) lands at --lx, --ly of
   the box; the box is a size container, so cqw and cqh are the box */
.still {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  object-position: clamp(calc(100cqw - 200cqh), calc(var(--lx, 0.5) * 100cqw - var(--fx, 0.5) * 200cqh), 0px) 0px;
}
@container (min-aspect-ratio: 2/1) {
  .still { object-position: 0px clamp(calc(100cqh - 50cqw), calc(var(--ly, 0.5) * 100cqh - var(--fy, 0.5) * 50cqw), 0px); }
}
.head-media > .still { position: absolute; inset: 0; transform-origin: calc(var(--lx, 0.5) * 100%) 50%; }
.card-media, .cmp-layer, .clock-face { container-type: size; }
.card-media .still, .cmp-layer .still, .clock-face .still { --lx: 0.5; --ly: 0.5; }
/* cards: a cut of the still. stills.css sets the subject (--fx, --fy) and the zoom (--cz); the origin of the zoom is
   solved for the box at hand (any aspect up to 2:1), so the subject ends up in the middle of the card:
   origin = (zoom * subject position - middle) / (zoom - 1). reveal.js scrubs on top of it. */
.card-media .still {
  --px: calc(clamp(calc(100cqw - 200cqh), calc(50cqw - var(--fx, 0.5) * 200cqh), 0px) + var(--fx, 0.5) * 200cqh);
  transform: scale(var(--cz, 1));
  transform-origin:
    clamp(0px, calc((var(--cz, 1) * var(--px) - 50cqw) / (var(--cz, 1) - 1)), 100cqw)
    clamp(0px, calc((var(--cz, 1) * var(--fy, 0.5) * 100cqh - 50cqh) / (var(--cz, 1) - 1)), 100cqh);
}
@media (max-aspect-ratio: 17/20) { .head-media > .still { --lx: 0.5; } }
html[data-device="phone"] .head-media > .still { --lx: 0.5; }

/* the running watch, placed by clockface.js */
.clock-face.is-live { background: var(--c-ground); }
.clock-base { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.clock-hands { position: absolute; inset: 0; pointer-events: none; }
.clock-hand { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; }

/* ---------- leader lines of the page heads (drawn by head.js once the still and its anchors are there) ---------- */

.head-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.head-lines path {
  fill: none; stroke: var(--c-brass); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-state) var(--ease-house);
}
.head-lines path.is-on { stroke-dashoffset: 0; }
.head-lines circle { fill: var(--c-brass); opacity: 0; transition: opacity var(--dur-state) var(--ease-house); }
.head-lines circle.is-on { opacity: 1; }
.head-labels:not([hidden]) { display: block; position: absolute; inset: 0; pointer-events: none; }
.head-labels li {
  position: absolute; left: var(--lx, 0); top: var(--ly, 0); transform: translate(0.5rem, -50%);
  font: var(--w-ui) var(--fs-micro) / 1 var(--f-text); letter-spacing: var(--tr-micro); color: var(--c-ink); white-space: nowrap;
  padding: 0.35rem 0.6rem; border-radius: var(--r-pill); background: rgb(21 19 15 / 0.72);
  opacity: 0; transition: opacity var(--dur-state) var(--ease-house);
}
.head-labels li.is-out, .head-lines .is-out { display: none; }
.head-labels li.is-left { transform: translate(calc(-100% - 0.5rem), -50%); }
.head-labels li.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .head-lines path, .head-lines circle, .head-labels li { transition: none; }
}

/* start page: the link from the short process to the revision page */
.path-more { margin-top: clamp(2.5rem, 6svh, 4rem); }

/* before / after: the portrait renders (aspect 1290 / 3072) are cut by height on the dial */
.cmp-pic { display: block; width: 100%; height: 100%; }
@media (max-aspect-ratio: 17/20) {
  .cmp-layer .still { object-position: 50% clamp(calc(100cqh - 238.14cqw), calc(0.5 * 100cqh - var(--fy-p, 0.5) * 238.14cqw), 0px); }
}