/* ==========================================================================
   HotelOS landing — site.css
   Type scale: EXACTLY five sizes (--fs-display, --fs-title, --fs-lead,
   --fs-body, --fs-small). Every font-size on the page references one of them.
   Faces (picked 2026-09-15 in /font-lab/, preset "Mona"): Mona Sans for all
   text, headlines and the iMac screen; Geist Mono for figures and
   micro-labels. FoundersGrotesk (from the new.studio 1:1 clone) now only
   sets the HotelOS wordmark (--font-brand). Both new faces are OFL,
   self-hosted, latin + latin-ext (Ő ő Ű ű checked in the files).
   ========================================================================== */

@font-face { font-family: "FoundersGrotesk"; src: url("../fonts/FoundersGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Medium, for the feature card headline. Until the licensed
   FoundersGrotesk-Medium.woff2 is in assets/fonts the second src serves
   Regular. The second src is load-bearing: a 500 face that simply 404s does
   not re-match 400, the browser drops to the Arial fallback. */
@font-face { font-family: "FoundersGrotesk"; src: url("../fonts/FoundersGrotesk-Medium.woff2") format("woff2"), url("../fonts/FoundersGrotesk-Regular.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "FoundersGrotesk"; src: url("../fonts/FoundersGrotesk-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "FoundersGrotesk"; src: url("../fonts/FoundersGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "FoundersGrotesk"; src: url("../fonts/FoundersGrotesk-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "FoundersGrotesk Fallback"; src: local("Arial"); ascent-override: 107.8%; descent-override: 24.7%; line-gap-override: 0%; size-adjust: 89.06%; }
/* Mona Sans: variable wght 200–900, wdth 75–125, split like Google Fonts serves it */
@font-face { font-family: "Mona Sans"; src: url("../fonts/MonaSans-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; 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: "Mona Sans"; src: url("../fonts/MonaSans-latin-ext.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/MonaSans-Italic-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; 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: "Mona Sans"; src: url("../fonts/MonaSans-Italic-latin-ext.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; 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; }
/* Arial tuned to Mona Sans' width and vertical metrics, so the swap does not reflow */
@font-face { font-family: "Mona Sans Fallback"; src: local("Arial"); ascent-override: 107%; descent-override: 31.4%; line-gap-override: 0%; size-adjust: 102%; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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: "Geist Mono"; src: url("../fonts/GeistMono-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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; }
/* Fragment Mono: no longer referenced by the tokens; kept for original/ */
@font-face { font-family: "Fragment Mono"; src: url("../fonts/FragmentMono-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Fragment Mono"; src: url("../fonts/FragmentMono-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --font-sans: "Mona Sans", "Mona Sans Fallback", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --font-brand: "FoundersGrotesk", "FoundersGrotesk Fallback", system-ui, sans-serif;
  /* headline weights: semibold display, a notch under it for titles */
  --fw-display: 600;
  --fw-title: 560;

  /* the five sizes */
  --fs-display: clamp(2.4rem, 1.3rem + calc(4 * var(--vw)), 4.75rem);
  --fs-title:   clamp(1.5rem, 1.15rem + calc(1.4 * var(--vw)), 2.25rem);
  --fs-lead:    1.25rem;
  --fs-body:    1rem;
  --fs-small:   0.8125rem;
  /* the one size outside the five: clay.com's feature-card headline (48 at
     desktop), used by .feat__title only */
  --fs-feature: clamp(1.875rem, 1.2rem + calc(2.4 * var(--vw)), 3rem);

  --lh-display: 1;
  --lh-title: 1.12;
  --lh-lead: 1.45;
  --lh-body: 1.5;
  --lh-small: 1.35;
  --track-display: -0.03em;
  --track-title: -0.018em;

  /* neutrals: one cool-neutral cast (16,19,23) */
  --ground: #f4f5f5;
  --surface: #fafbfb;
  --ink: #101317;
  --ink-2: rgba(16, 19, 23, 0.66);
  --ink-3: rgba(16, 19, 23, 0.52);
  --line: rgba(16, 19, 23, 0.10);
  --line-strong: rgba(16, 19, 23, 0.18);

  /* accent: the mark's tropical hue (190°), at UI-legal darkness.
     Keyed to --mark-1 #17a8bd so the UI and the logo read as one brand;
     #0c6a7b is the handoff's own designated text-legal tropical value.
     Still outside the 210–260° SaaS-blue band. */
  --accent: #0c6a7b;          /* 5.7:1 on ground · 6.0:1 on surface · white on it 6.2:1 */
  --accent-hover: #0a5a69;
  --accent-pressed: #084a57;
  --accent-ink: #0a5c6b;      /* 6.2:1 on --accent-tint */
  --accent-tint: #dcebee;
  --accent-on-ink: #56d6e6;   /* = --mark-1-on-ink · 10.8:1 on --ink */

  /* the mark's three layers — LOGO ONLY, i.e. these exact bright values are
     never a button, link, chip, chart, badge, calendar block or text. The UI
     still has exactly ONE accent: --accent, which is this same tropical hue
     taken down to a legible darkness (--mark-1-text is now that same value).
     What is forbidden is the raw #17a8bd / #3fbf8c / #0b3d49 in the UI.
     One exception, by the user's call (2026-09-23): the three-pill set
     (.pills) is the mark itself, one layer per pill. */
  --mark-1: #17a8bd;          /* tropical water — top layer   */
  --mark-2: #3fbf8c;          /* mint — middle layer          */
  --mark-3: #0b3d49;          /* deep water — base layer      */
  --mark-1-on-ink: #56d6e6;
  --mark-2-on-ink: #3fbf8c;
  --mark-3-on-ink: #1c7a8a;
  --mark-1-text: #0c6a7b;

  --band-1: #e3edef;   /* accent-leaning */
  --band-2: #eaebea;
  --band-3: #e5eaec;

  /* status: each has a fill/text pair, never colour alone */
  --ok: #1b7a4b;    --ok-tint: #e2f2e8;
  --warn: #9c6112;  --warn-tint: #f7ecdd;
  --error: #a8352a; --error-tint: #f7e5e2;

  /* on-ink ramp: dark plates, bezels, scrimmed photos */
  --on-ink-1: #ffffff;
  --on-ink-2: rgba(255, 255, 255, 0.72);
  --on-ink-3: rgba(255, 255, 255, 0.54);
  --on-ink-line: rgba(255, 255, 255, 0.14);

  --radius-nav: 8px;      /* the clone's own */
  --radius-card: 20px;
  --radius-chip: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 19, 23, 0.06);
  --shadow-md: 0 1px 2px rgba(16, 19, 23, 0.05), 0 14px 36px rgba(16, 19, 23, 0.08);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-settle: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.215, 0.61, 0.355, 1); /* GSAP power2.out */

  --container: 1600px;
  --container-margin: clamp(1.25rem, 0.7857rem + calc(1.9048 * var(--vw)), 2.5rem);
  --nav-h: 56px;
  --nav-top: 20px;
  --section-pad: clamp(5rem, 3rem + calc(7 * var(--vw)), 9rem);

  /* viewport units that survive the small-desktop zoom (below): 1vh / zoom
     is one visual percent of the screen, whatever the zoom */
  --z: 1;
  --vh: calc(1vh / var(--z)); --svh: calc(1svh / var(--z)); --dvh: calc(1dvh / var(--z));
  --lvh: calc(1lvh / var(--z)); --vw: calc(1vw / var(--z));
  --vmin: calc(1vmin / var(--z)); --vmax: calc(1vmax / var(--z));

  /* new.studio grid (clone) */
  --grid-columns: 12;
  --grid-gap: 1.25rem;
  --white: #f7f7f7;
  --black: #000014;
  --dark-gray: #00001466;
  --light-gray: #e0e0e366;
}

/* ---------- the same five sizes, tuned for a phone ----------
   No sixth size is introduced: only the small end of the existing tokens
   moves. Every value from 48rem up is byte-for-byte what it was, and each
   mobile clamp lands exactly on the desktop value at its own breakpoint, so
   nothing jumps as the viewport crosses it. */
@media (max-width: 48rem) {
  :root {
    --fs-lead: 1.125rem;   /* 20px is a desktop measure; on a phone it costs a line every paragraph */
    --nav-top: 12px;
  }
}
@media (max-width: 26rem) {
  :root {
    --fs-display: clamp(1.875rem, 1.15rem + calc(4.8 * var(--vw)), 2.4rem);
    --fs-title:   clamp(1.25rem, 1.05rem + calc(1.73 * var(--vw)), 1.5rem);
    --fs-lead:    1.0625rem;
  }
}

/* ---------- reset & base ---------- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
/* momentum is Lenis (assets/js/lenis.min.js, wired in site.js); no bare scroll-behavior */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--nav-top) + 24px); }
/* ---------- small desktops: the 27-inch composition, zoomed to fit ----------
   The design is composed for a wide screen (a 27" 1440p lays it out at
   ~2100–2560 CSS px). A 1080p laptop at Windows' 125% is 1536×~790 CSS px:
   the same sizes filled the screen and nothing fitted. On a mouse-driven
   desktop below 1920 the whole page is zoomed instead — type, padding, the
   px-built cards and calendars, images — so it lays out as a wider screen
   and is drawn smaller: 100% at 1920, 72% at 1536 (= a 2133 px layout, the
   27" at 120%), never under 60%. 1920 and up, phones and touch tablets are
   untouched. Steps of 64px with no gaps (fractional widths at 175% etc.).
   On :root, not html: :root's own --z: 1 would outrank an html rule.
   Viewport units do not follow zoom (100vh would be 72% of the screen), so
   every one in the stylesheets is written as calc(N * var(--vh)) etc., which
   divides it back out: see the --vh family in :root. JS that mixes layout
   sizes (offsetHeight) with visual ones (getBoundingClientRect) must use one
   kind only. */
@media (1856px <= width < 1920px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.953; --z: 0.953; } }
@media (1792px <= width < 1856px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.907; --z: 0.907; } }
@media (1728px <= width < 1792px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.860; --z: 0.860; } }
@media (1664px <= width < 1728px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.813; --z: 0.813; } }
@media (1600px <= width < 1664px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.767; --z: 0.767; } }
@media (1536px <= width < 1600px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.720; --z: 0.720; } }
@media (1472px <= width < 1536px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.673; --z: 0.673; } }
@media (1408px <= width < 1472px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.627; --z: 0.627; } }
@media (1344px <= width < 1408px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.600; --z: 0.600; } }
@media (1280px <= width < 1344px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.600; --z: 0.600; } }
@media (1216px <= width < 1280px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.600; --z: 0.600; } }
@media (1152px <= width < 1216px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.600; --z: 0.600; } }
@media (1088px <= width < 1152px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.600; --z: 0.600; } }
@media (64.0625rem <= width < 1088px) and (hover: hover) and (pointer: fine) { :root { zoom: 0.600; --z: 0.600; } }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; background: none; letter-spacing: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
h1, h2, h3, h4 { font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.block { display: block; }
.ns-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 48px; pointer-events: none; }

/* focus: crisp ring, no glow */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
input:focus-visible { outline-offset: -2px; }

/* ---------- type roles ---------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--fw-display); }
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: var(--fw-title); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0.04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.muted { color: var(--ink-2); }
em { font-style: italic; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: max(var(--container-margin), env(safe-area-inset-left), env(safe-area-inset-right)); }
.narrow { max-width: 56rem; margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + calc(2 * var(--vw)), 4rem); }
.section-head h2 { text-wrap: balance; }
.section-head p { margin-top: 1.25rem; max-width: 36rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  height: 3.25rem; padding-inline: 1.5rem; border-radius: var(--radius-pill);
  font-size: var(--fs-body); line-height: 1; white-space: nowrap;
  transition: transform 0.18s var(--ease-settle), background-color 0.18s, color 0.18s, border-color 0.18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:hover { background: #1c2130; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-glass { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.26); }
.btn .arrow { width: 0.9em; height: 0.9em; }
.link-underline { position: relative; display: inline-block; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.55s var(--ease-out); }
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }
/* touch: a text link next to a 52px pill needs a hit area, not a bigger box —
   an invisible inset pseudo gives it one without moving the underline */
@media (max-width: 64rem) { .link-underline::before { content: ""; position: absolute; inset: -0.75rem -0.5rem; } }

/* ==========================================================================
   NAV — new.studio header, cloned 1:1 (packages/clone newstudio-nav).
   The numbers below are the original's own CSS: fixed top-5, container,
   12-col flex grid, light-gray/60 pill, blur 16px, ring 2px white/30,
   the double inset white glow + 0 4px 20px rgba(0,0,20,.2), radius 8px,
   56px bar, px 16/24, 88px logo slot, 24px link gap, 28px hamburger.
   Collapse: --span 12 at rest -> 4 when scrolled; the aside opens 0fr -> 1fr.
   ========================================================================== */
.ns-header {
  --col: calc((100% - (var(--grid-columns) - 1) * var(--grid-gap)) / var(--grid-columns));
  position: fixed; top: var(--nav-top); left: 50%; z-index: 50;
  width: 100%; max-width: var(--container); padding-inline: max(var(--container-margin), env(safe-area-inset-left), env(safe-area-inset-right));
  transform: translateX(-50%);
  display: flex; justify-content: center; column-gap: var(--grid-gap);
  pointer-events: none;
}
.ns-nav {
  --span: 12;
  pointer-events: auto;
  position: relative;
  width: calc(var(--span) * var(--col) + (var(--span) - 1) * var(--grid-gap));
  border-radius: var(--radius-nav);
  background-color: var(--light-gray);
  background-color: color-mix(in oklab, #e0e0e3 60%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3),
              0 0 60px 0 rgba(255, 255, 255, 0.3) inset,
              0 0 60px 0 rgba(255, 255, 255, 0.3) inset,
              0 4px 20px 0 rgba(0, 0, 20, 0.2);
  color: var(--black);
  transition: width 0.6s var(--ease-out);
}
.ns-header.is-scrolled .ns-nav, .ns-header.is-open .ns-nav { --span: 4; }
.ns-bar { display: flex; width: 100%; height: var(--nav-h); align-items: center; justify-content: space-between; padding-inline: 1rem; }
@media (min-width: 40rem) { .ns-bar { padding-inline: 1.5rem; } }
.ns-logo { display: flex; align-items: center; width: auto; }
.ns-links { position: relative; display: flex; align-items: center; gap: 1.5rem; }
.ns-link { display: block; width: fit-content; overflow: clip; }
.ns-link .word { display: inline-block; transition: transform 0.45s var(--ease-out), opacity 0.3s; }
.ns-link:hover .word { opacity: 0.4; }
.ns-header.is-scrolled .ns-link, .ns-header.is-open .ns-link { pointer-events: none; }
.ns-header.is-scrolled .ns-link .word, .ns-header.is-open .ns-link .word { transform: translateY(120%); opacity: 0; }
.ns-header.is-scrolled .ns-links .ns-link, .ns-header.is-open .ns-links .ns-link { position: absolute; right: 0; visibility: hidden; }
/* hamburger: 28px box, two 2px lines, scales in from the right */
.ns-burger {
  position: absolute; right: 0; top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.375rem;
  width: 1.75rem; height: 1.75rem; padding: 0.25rem; transform-origin: right center;
  transform: scaleX(0); opacity: 0; pointer-events: none;
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.ns-burger span { display: block; height: 2px; width: 100%; background: var(--black); border-radius: 1px; transition: transform 0.3s var(--ease-settle), translate 0.3s var(--ease-settle); }
.ns-header.is-scrolled .ns-burger, .ns-header.is-open .ns-burger { transform: scaleX(1); opacity: 1; pointer-events: auto; }
.ns-header.is-open .ns-burger span:first-child { translate: 0 0.25rem; transform: rotate(45deg); }
.ns-header.is-open .ns-burger span:last-child { translate: 0 -0.25rem; transform: rotate(-45deg); }
/* the sheet. Two directions, two curves: opening keeps the clone's own
   0.5s ease-out (fast reveal, long settle), but that curve reversed spends 84%
   of its travel in the first 70ms and the pane appears to vanish rather than
   close. The dismiss — the hamburger, Escape, a tap outside, or a scroll —
   rolls it up on a symmetric ease instead. */
.ns-sheet { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease-settle); }
.ns-header.is-open .ns-sheet { grid-template-rows: 1fr; transition-duration: 0.5s; transition-timing-function: var(--ease-out); }
.ns-sheet-inner { display: flex; flex-direction: column; gap: 2rem; overflow: hidden; padding-inline: 1rem; }
@media (min-width: 40rem) { .ns-sheet-inner { padding-inline: 1.5rem; } }
.ns-sheet-group { display: flex; flex-direction: column; gap: 0.5rem; }
.ns-sheet-group.mt { margin-top: 1rem; }
.ns-sheet-group.sm-gap { gap: 0.25rem; }
.ns-caption { font-size: var(--fs-small); line-height: 1; color: var(--dark-gray); }
.ns-menu-links { display: flex; flex-direction: column; }
.ns-menu-link { display: block; width: fit-content; font-size: var(--fs-title); font-weight: var(--fw-title); line-height: 1.35; cursor: pointer; }
.ns-menu-link:hover .wrapper, .ns-p2:hover .wrapper { opacity: 0.4; }
.ns-menu-link .wrapper, .ns-p2 .wrapper { transition: opacity 0.15s; }
.ns-sheet-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; }
@media (min-width: 40rem) { .ns-sheet-bottom { margin-bottom: 1.5rem; } }
.ns-p2 { display: block; width: fit-content; font-size: var(--fs-body); line-height: 1.375; }
.ns-item { filter: blur(10px); opacity: 0; transition: filter 0.28s var(--ease-settle), opacity 0.28s var(--ease-settle); transition-delay: 0s; }
/* on the way out the rows blur off together and just ahead of the pane, so the
   sheet is already empty by the time the last of it rolls up */
.ns-header.is-open .ns-item { filter: blur(0); opacity: 1; transition-duration: 0.5s; transition-timing-function: var(--ease-out); }
/* The cascade has to reach the BOTTOM of every column. The stagger stopped at
   five, and the longest column in the sheet is eight rows deep (a caption plus
   seven links), so its last rows fell back to the base delay of 0s and fired
   before the staggered ones above them — they read as "not animating" because
   they were finished before the eye got to them. The step is 0.05s rather than
   the old 0.06s so that eight rows still land inside the same window five used
   to, and the tail past ten holds the last delay so a future row can never
   drop back to zero again. */
.ns-header.is-open .ns-item:nth-child(1) { transition-delay: 0.08s; }
.ns-header.is-open .ns-item:nth-child(2) { transition-delay: 0.13s; }
.ns-header.is-open .ns-item:nth-child(3) { transition-delay: 0.18s; }
.ns-header.is-open .ns-item:nth-child(4) { transition-delay: 0.23s; }
.ns-header.is-open .ns-item:nth-child(5) { transition-delay: 0.28s; }
.ns-header.is-open .ns-item:nth-child(6) { transition-delay: 0.33s; }
.ns-header.is-open .ns-item:nth-child(7) { transition-delay: 0.38s; }
.ns-header.is-open .ns-item:nth-child(8) { transition-delay: 0.43s; }
.ns-header.is-open .ns-item:nth-child(9) { transition-delay: 0.48s; }
.ns-header.is-open .ns-item:nth-child(10) { transition-delay: 0.53s; }
.ns-header.is-open .ns-item:nth-child(n+11) { transition-delay: 0.58s; }
@media (max-width: 40rem) {
  :root { --grid-columns: 4; --grid-gap: 1rem; }
  .ns-nav { --span: 4 !important; }
  .ns-links .ns-link { position: absolute; right: 0; visibility: hidden; pointer-events: none; }
  .ns-burger { transform: scaleX(1); opacity: 1; pointer-events: auto; }
}
/* Touch. The sheet carries 20+ links, which on a 667px phone runs off the
   bottom of a pane whose whole open/close trick is `overflow: hidden` — those
   links were simply unreachable. Cap it to the viewport and let it scroll,
   open state only, so the 0fr collapse is untouched. The lines of the burger
   and the type of every row stay exactly as they are; only the hit areas grow
   to something a thumb can land on. */
@media (max-width: 64rem) {
  .ns-header.is-open .ns-sheet-inner {
    max-height: calc(calc(100 * var(--dvh)) - var(--nav-h) - var(--nav-top) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* 44px box, same 20px lines: the extra 12px of padding is pure hit area */
  .ns-burger { width: 2.75rem; height: 2.75rem; padding: 0.75rem; right: -0.5rem; }
  .ns-menu-link { display: flex; align-items: center; min-height: 2.75rem; }
  .ns-p2 { display: flex; align-items: center; min-height: 2.25rem; }
  .ns-sheet-group.sm-gap { gap: 0; }
  .ns-sheet-bottom { gap: 1.25rem; }
}
/* ---------- logo: "the layer" (mark) + the wordmark ----------
   Mark first, gap 0.4em, both optically centred. The wordmark stays live text:
   `Hotel` at 500 / -0.03em and `OS` one weight step heavier and tighter
   (600 / -0.075em) — that contrast is the wordmark's whole idea. On ink the
   pair lightens to 400 / 500 and the mark switches to its -on-ink ramp.
   The mark is sized in `em`, so a 16px lockup (mockup chrome) scales with it.
   NOTE: FoundersGrotesk ships only 400 and 700, so today 500 resolves to 400
   and 600 to 700. The intended one-step contrast lands with the Archivo swap.
   The old trailing accent square is retired. */
.logo { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-brand); font-size: var(--fs-lead); line-height: 1; white-space: nowrap; }
.logo__mark { flex: none; width: 1em; height: 1em; }
.logo__word { font-weight: 500; letter-spacing: -0.03em; }
.logo__os { font-weight: 600; letter-spacing: -0.075em; }
/* on dark plates, bezels and scrimmed photos */
.logo--on-ink { --mark-1: var(--mark-1-on-ink); --mark-2: var(--mark-2-on-ink); --mark-3: var(--mark-3-on-ink); }
.logo--on-ink .logo__word { font-weight: 400; }
.logo--on-ink .logo__os { font-weight: 500; }
/* sub-brands (HotelOS Pay / HotelOS Go): the mark does not grow with the lockup */
.logo__sub { margin-left: 0.34em; font-weight: 400; letter-spacing: -0.02em; color: var(--ink-2); }

/* ==========================================================================
   MOCK-SCREEN CHROME — the figure tiles and status chips the generated
   product pages quote inside their mock screens (assets/css/pages.css).
   The homepage's own simulated interface is in assets/css/home.css.
   ========================================================================== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-chip); padding: 0.75rem 0.9rem; }
.kpi .t-mono { color: var(--ink-3); }
.kpi__v { display: block; margin-top: 0.35rem; font-size: var(--fs-title); font-weight: var(--fw-title); line-height: 1; letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; }
.kpi__s { display: block; margin-top: 0.4rem; color: var(--ink-2); }
.kpi--accent { background: var(--accent-tint); border-color: transparent; }
.kpi--accent .kpi__v { color: var(--accent-ink); }
.chip { display: inline-flex; align-items: center; gap: 0.35rem; height: 1.5rem; padding: 0 0.55rem; border-radius: var(--radius-pill); background: var(--ground); color: var(--ink-2); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--ok { background: var(--ok-tint); color: var(--ok); }
.chip--warn { background: var(--warn-tint); color: var(--warn); }
.chip--accent { background: var(--accent-tint); color: var(--accent-ink); }
.chip--plain::before { display: none; }
@media (max-width: 48rem) { .kpis { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .kpi { padding: 0.6rem 0.65rem; } }

/* ==========================================================================
   FEATURE STACK — clay.com's home feature list (packages/clone
   clay-feature-list): tinted sticky bands, segmented pill row, a headline
   whose second clause carries the accent, a paragraph, a photo on the right.
   ========================================================================== */
.features { padding-block: var(--section-pad) 0; }
.feature-stack { display: grid; gap: 1.25rem; }
.feat {
  position: sticky; top: calc(var(--nav-h) + var(--nav-top) + 1.25rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem;
  padding: 1.5rem; border-radius: var(--radius-card); min-height: min(38rem, calc(calc(100 * var(--vh)) - 8rem));
  background: var(--band-1);
}
.feat:nth-child(2) { top: calc(var(--nav-h) + var(--nav-top) + 2rem); background: var(--band-2); }
.feat:nth-child(3) { top: calc(var(--nav-h) + var(--nav-top) + 2.75rem); background: var(--band-3); }
.feat__left { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding: 1.5rem 1rem 1rem 1.5rem; }
/* clay.com's .home-feature_pill, measured live: every pill is the same
   32px capsule with a 1px light ring, stacked so each unlabelled one shows
   only a ~15px sliver (68px wide, -52.8px margin). Capsule slivers read as
   layered tabs; round dots read as bubbles, and the ring is what keeps the
   overlaps crisp instead of melting into one blob. */
.pills { display: flex; align-items: center; }
.pill {
  position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
  height: 2rem; width: 4.25rem; margin-right: -3.3rem; flex: none;
  /* the ring is the ground the set sits on, so each overlap reads as a
     clean cut rather than a white outline */
  border: 1.5px solid var(--pill-ring, var(--ground)); border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--set, var(--mark-1)) 26%, #fff);
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), padding 0.35s var(--ease-out);
}
.pill:last-child { margin-right: 0; }
/* the set is the logo: slot 1 tropical, 2 mint, 3 deep water. The label is
   its slot's layer at full strength; the slivers are all one pale tint of
   that same layer (clay's tonal pairing: one strong label, quiet slivers).
   Deep-water type on the two bright layers, white on deep water. */
.pill:nth-child(1) { --c: var(--mark-1); --on: var(--mark-3); z-index: 1; }
.pill:nth-child(2) { --c: var(--mark-2); --on: var(--mark-3); z-index: 2; }
.pill:nth-child(3) { --c: var(--mark-3); --on: #fff; z-index: 3; }
.pills:has(> .is-active:nth-child(1)) { --set: var(--mark-1); }
.pills:has(> .is-active:nth-child(2)) { --set: var(--mark-2); }
.pills:has(> .is-active:nth-child(3)) { --set: var(--mark-3-on-ink); } /* deep water's own tint goes grey; its lighter on-ink value stays teal */
/* before the label the later sliver sits on top, after it the earlier one
   does, so every sliver peeks out on the label's own side */
.pill.is-active ~ .pill:nth-child(2) { z-index: 3; }
.pill.is-active ~ .pill:nth-child(3) { z-index: 2; }
/* clay's label: 12px/600, capitals tracked 0.25em. Ours: the page face
   semi-expanded (Roobert's wide caps), 600, 0.22em at the site's small
   size; the right padding gives back the trailing letter-space so the word
   sits optically centred. */
.pill.is-active {
  width: auto; padding: 0 calc(0.75rem - 0.22em) 0 0.75rem; z-index: 4;
  background: var(--c); color: var(--on);
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; font-stretch: 112.5%;
  line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* clay's headline: 48px Medium, tight, the accent clause on its own line */
.feat__title { margin-top: 1.5rem; max-width: 18ch; text-wrap: balance; font-size: var(--fs-feature); line-height: 1.06; letter-spacing: -0.024em; font-weight: var(--fw-title); }
/* each card's accent is its pill's layer (user, 2026-09-23): the accent
   clause and the ticks take the same colour as the label, the ring takes
   the band */
.feat:nth-child(1) { --accent: var(--mark-1); --pill-ring: var(--band-1); }
.feat:nth-child(2) { --accent: var(--mark-2); --pill-ring: var(--band-2); }
.feat:nth-child(3) { --accent: var(--mark-3); --pill-ring: var(--band-3); }
.feat__title span { display: block; color: var(--accent); }
.feat__desc { margin-top: 1rem; max-width: 46ch; color: var(--ink-2); }
.feat__points { margin-top: 1.5rem; display: grid; gap: 0.6rem; max-width: 46ch; }
.feat__points li { list-style: none; display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem; color: var(--ink); }
.feat__points li::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; border-radius: 50%; background: var(--accent); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / 70% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / 70% no-repeat; }
.feat__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.feat__img { border-radius: calc(var(--radius-card) - 6px); overflow: hidden; min-height: 22rem; }
.feat__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.feat:hover .feat__img img { transform: scale(1.06); }
@media (max-width: 64rem) {
  .feat { grid-template-columns: 1fr; position: relative; top: auto !important; min-height: 0; padding: 1rem; }
  .feat__left { padding: 0.75rem 0.5rem 0.5rem; }
  .feat__img { min-height: 16rem; order: -1; }
}

/* ==========================================================================
   STRUCTURE / NUMBERS — limlondon's course-structure band (packages/clone
   limlondon-course-structure): a small centred heading, a huge two-line
   false heading with the accent word, a grey subheading, a 3-up figure row
   where the unit carries the accent, a black button + an underlined link.
   ========================================================================== */
.structure { text-align: center; }
.structure__kicker { margin-bottom: clamp(2rem, 1.5rem + calc(2 * var(--vw)), 3.5rem); }
.structure__h { max-width: 16ch; margin-inline: auto; text-wrap: balance; }
.structure__h span { color: var(--accent); }
.structure__sub { max-width: 50rem; margin: clamp(1.5rem, 1rem + calc(2 * var(--vw)), 2.5rem) auto 0; color: var(--ink-2); }
.structure__sub b { font-weight: 700; color: var(--ink); }
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(3rem, 2rem + calc(4 * var(--vw)), 5.5rem); }
.figure { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.figure__v { font-size: var(--fs-display); font-weight: var(--fw-display); line-height: 0.9; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.figure__v .u { color: var(--accent); }
.figure__l { font-size: var(--fs-title); font-weight: var(--fw-title); line-height: 1; letter-spacing: var(--track-title); }
.structure__actions { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: clamp(3rem, 2rem + calc(4 * var(--vw)), 5.5rem); flex-wrap: wrap; }
@media (max-width: 40rem) { .figures { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================================
   PROCESS — the one ordered sequence on the page.
   ========================================================================== */
.process { background: var(--surface); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.step { display: grid; gap: 0.9rem; align-content: start; }
.step .t-mono { color: var(--accent); }
.step p { color: var(--ink-2); max-width: 34ch; }
@media (max-width: 48rem) { .steps { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ==========================================================================
   CTA BAND — reflectorbital's banner (packages/clone reflectorbital-cta):
   a black 1rem-radius plate, a 53%-wide column, the statement, a pill
   button with the white round arrow set in its right end, a photo bleeding
   in from the right.
   ========================================================================== */
.cta { padding-block: 0; background: var(--surface); }
.cta__plate { position: relative; overflow: hidden; display: flex; align-items: center; border-radius: 1rem; background: var(--ink); color: #fff; padding: clamp(2rem, 1.5rem + calc(2.5 * var(--vw)), 4rem) clamp(1.5rem, 1rem + calc(2.5 * var(--vw)), 3rem); min-height: 34rem; }
.cta__col .btn { align-self: flex-start; }
.cta__img { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; }
.cta__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.cta__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgba(16, 19, 23, 0.65) 35%, rgba(16, 19, 23, 0.15) 75%, rgba(16, 19, 23, 0.05) 100%); }
.cta__col { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; width: 53%; max-width: 50%; }
.cta__col h2 { text-wrap: balance; max-width: 18ch; }
.cta__col p { color: rgba(255, 255, 255, 0.72); max-width: 40ch; margin-top: 1rem; }
.btn-arrow { position: relative; padding: 0 3.25rem 0 1.25rem; height: 3rem; }
.btn-arrow .ring { position: absolute; right: 4px; top: 4px; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); }
.btn-arrow .ring svg { width: 11px; height: 11px; }
@media (max-width: 64rem) {
  .cta__plate { flex-direction: column; align-items: stretch; min-height: 34rem; padding: 2rem; }
  .cta__col { width: 100%; max-width: 100%; justify-content: flex-start; }
  .cta__img { width: 100%; height: 55%; top: auto; }
  .cta__img::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(16, 19, 23, 0.35) 45%, rgba(16, 19, 23, 0.1) 100%); }
}
/* Phone: the photo stops being an absolute layer the copy can grow over. Once
   the statement runs to five lines it covered the whole 55% band and the plate
   read as a plain black box; here the image is a real row under the copy. */
@media (max-width: 48rem) {
  .cta__plate { min-height: 0; padding: 0; }
  .cta__col { order: 0; gap: 1.75rem; padding: 2rem 1.5rem 2.25rem; }
  /* the photo comes first in the DOM (it is the desktop bleed); on a phone it
     is the closing band, so it is ordered after the copy and fades up into it */
  .cta__img { order: 1; position: relative; inset: auto; width: 100%; height: 13rem; }
  .cta__img::after { background: linear-gradient(180deg, var(--ink) 0%, rgba(16, 19, 23, 0) 55%); }
}
@media (max-width: 26rem) {
  .btn-arrow { padding-right: 3rem; }
  .cta__col { padding-inline: 1.25rem; }
}

/* ==========================================================================
   FAQ — LIM's accordion (packages/clone lim-faq): hairline rows, 40px
   padding, a 14px plus made of two 2px lines, the open question in the
   brand colour, the answer in grey at 90% measure.
   ========================================================================== */
.faq { background: var(--surface); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 3rem; }
.faq__grid .section-head { margin-bottom: 0; }
.faq_item { border-bottom: 1px solid var(--line-strong); cursor: pointer; display: flex; flex-direction: column; padding: 2.5rem 0; }
.faq_item.first-item { border-top: 1px solid var(--line-strong); }
.faq_trigger { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; width: 100%; text-align: left; }
.faq_question-text { font-size: var(--fs-title); font-weight: var(--fw-title); line-height: var(--lh-title); letter-spacing: var(--track-title); transition: color 0.25s; }
.faq_item.is-open .faq_question-text { color: var(--accent); }
.faq_trigger-icon { flex: 0 0 auto; position: relative; width: 14px; min-height: 14px; display: flex; align-items: center; justify-content: center; }
.faq_trigger-icon-line { position: absolute; width: 100%; height: 2px; border-radius: 500px; background: var(--ink); transition: transform 0.35s var(--ease-out); }
.faq_trigger-icon-line.second-line { transform: rotate(90deg); }
.faq_item.is-open .faq_trigger-icon-line.second-line { transform: rotate(0deg); }
.faq_answer-container { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out), opacity 0.35s, transform 0.45s var(--ease-out); opacity: 0; transform: scale(0.98); transform-origin: top left; }
.faq_item.is-open .faq_answer-container { grid-template-rows: 1fr; opacity: 1; transform: none; }
.faq_answer-container > div { overflow: hidden; }
.faq_answer { color: var(--ink-2); max-width: 90%; padding-top: 1.5rem; }
@media (max-width: 64rem) { .faq__grid { grid-template-columns: 1fr; gap: 2rem; } .faq_item { padding: 1.75rem 0; } }
@media (max-width: 30rem) { .faq_item { padding: 1.35rem 0; } .faq_trigger { gap: 1rem; } .faq_answer { max-width: 100%; padding-top: 1rem; } }

/* ==========================================================================
   FOOTER — LangChain's footer (packages/clone langchain-footer), turned to
   the light: four columns under 2px dividers, headings in the mark's deep
   water, links in mono at 40% that wake to 100%, an email row with a
   full-width button, the giant wordmark, the legal row.

   The type above the lockup is drawn from the LOCKUP's palette, not from the
   UI's: the headings sit on --mark-3, the mark's own base bar, and the links
   and legal row sit on --ink, the wordmark's own colour. The headings used to
   be --accent, a fourth teal that belonged to buttons rather than to the mark,
   and against a near-black wordmark the column read as a separate object
   stacked above the logo. Deep water bridges the two: dark enough to sit with
   the ink word, blue enough to sit with the bars.
   ========================================================================== */
.footer { background: var(--ground); padding: 5rem 0 3rem; }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.footer__col { display: flex; flex-direction: column; }
.footer__divider { width: 100%; height: 2px; background: var(--line); margin-bottom: 2.5rem; }
.footer__h { font-size: var(--fs-title); font-weight: var(--fw-title); line-height: 1.1; letter-spacing: var(--track-title); color: var(--mark-3); text-wrap: balance; }
.footer__links { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.footer__link { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1; color: var(--ink); opacity: 0.5; transition: opacity 0.2s, color 0.2s; }
.footer__link:hover { opacity: 1; color: var(--mark-3); }
.footer__form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.footer__input { width: 100%; min-height: 2.75rem; padding: 0.5rem 1.125rem; border: 1px solid var(--line-strong); border-radius: 0.375rem; background: var(--surface); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); transition: border-color 0.3s; }
.footer__input::placeholder { color: var(--ink-3); }
.footer__input:hover { border-color: var(--ink-2); }
.footer__btn { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.5rem; border-radius: 0.375rem; background: var(--ink); color: var(--surface); font-family: var(--font-mono); font-size: var(--fs-small); transition: background-color 0.2s, transform 0.18s var(--ease-settle); }
.footer__btn:hover { background: var(--accent); transform: translateY(-1px); }
/* the footer wordmark: the nav lockup, exactly, just big — mark + word, the
   mark 0.4em before it. NO horizontal stretch (the old textLength/
   lengthAdjust is retired): the whole lockup scales uniformly, and site.js
   fits the viewBox to the real bounding box once the font has loaded, so the
   letterforms are identical to the nav's.
   Surface is the identity's certified one: SOLID — the word in ink, the mark
   in its full ramp. The old three-layer treatment (7% self-fill + bands
   drifting through a mask + a 1.2px outline) is retired with its wm-drift.
   MOTION — the identity's entrance, and FOOTER-ONLY. The three bars arrive
   from three directions 80ms apart, deep water from the left, mint from the
   right, tropical from above, and the word floats up from below 240ms later.
   translate3d and opacity only, so it costs no layout. It plays ONCE per page
   load: site.js stops observing the moment it fires, so scrolling back down to
   the footer finds the lockup composed and still. */
.footer__logo { margin-top: 3.5rem; width: 100%; line-height: 0; }
.footer__logo svg { width: 100%; height: auto; display: block; overflow: visible; }
.footer__logo text { font-family: var(--font-brand); font-weight: 500; fill: var(--ink); }
.footer__logo .wm__os { font-weight: 600; }
.wm__bar--1 rect { fill: var(--mark-1); }
.wm__bar--2 rect { fill: var(--mark-2); }
.wm__bar--3 rect { fill: var(--mark-3); }
/* rest state is the FINISHED lockup, so a browser without the observer — and
   site.js's getBBox fit — always sees the composed mark, never a stray offset.
   Which is exactly why the entrance needs arming: a composed mark on screen,
   then opacity:0 on the animation's first frame, is a blink. site.js sets
   is-armed up front — only ever in the same branch that will play the
   entrance — so the lockup is simply never painted before it animates in, and
   the webfont swap and the viewBox fit both happen behind it. */
#wm-lockup.is-armed .wm__part { opacity: 0; }
/* wm-spring:start — generated by tools/wm-spring.mjs, edit the script not this block */
#wm-lockup.is-playing .wm__part { animation-timing-function: linear; animation-fill-mode: both; transform-box: fill-box; will-change: transform, opacity; }
#wm-lockup.is-playing .wm__bar--3 { animation-name: wm-in-left; animation-duration: 3.2s; animation-delay: 0s; transform-origin: center; }
#wm-lockup.is-playing .wm__bar--2 { animation-name: wm-in-right; animation-duration: 3.2s; animation-delay: 0.14s; transform-origin: center; }
#wm-lockup.is-playing .wm__bar--1 { animation-name: wm-in-top; animation-duration: 3.2s; animation-delay: 0.28s; transform-origin: center; }
#wm-lockup.is-playing .wm__word { animation-name: wm-in-word; animation-duration: 3.4s; animation-delay: 0.5s; transform-origin: center bottom; }
@keyframes wm-in-left {
  0% { transform: translate3d(-170px, 0px, 0) scale(1, 1); opacity: 0; }
  0.68% { transform: translate3d(-169px, 0px, 0) scale(1.025, 0.984); opacity: 0.017; }
  1.34% { transform: translate3d(-166.24px, 0px, 0) scale(1.083, 0.949); opacity: 0.063; }
  2.01% { transform: translate3d(-161.88px, 0px, 0) scale(1.158, 0.909); opacity: 0.133; }
  2.67% { transform: translate3d(-156.12px, 0px, 0) scale(1.232, 0.873); opacity: 0.222; }
  3.35% { transform: translate3d(-148.97px, 0px, 0) scale(1.293, 0.846); opacity: 0.327; }
  4.01% { transform: translate3d(-140.89px, 0px, 0) scale(1.33, 0.831); opacity: 0.438; }
  4.67% { transform: translate3d(-131.93px, 0px, 0) scale(1.34, 0.827); opacity: 0.551; }
  5.34% { transform: translate3d(-122.27px, 0px, 0) scale(1.323, 0.833); opacity: 0.663; }
  6% { transform: translate3d(-112.06px, 0px, 0) scale(1.284, 0.85); opacity: 0.766; }
  6.68% { transform: translate3d(-101.25px, 0px, 0) scale(1.225, 0.876); opacity: 0.859; }
  7.34% { transform: translate3d(-90.41px, 0px, 0) scale(1.157, 0.91); opacity: 0.931; }
  8.01% { transform: translate3d(-79.47px, 0px, 0) scale(1.086, 0.948); opacity: 0.98; }
  8.67% { transform: translate3d(-68.56px, 0px, 0) scale(1.018, 0.989); opacity: 1; }
  9.34% { transform: translate3d(-57.79px, 0px, 0) scale(0.957, 1.029); opacity: 1; }
  10.01% { transform: translate3d(-47.07px, 0px, 0) scale(0.908, 1.065); opacity: 1; }
  10.68% { transform: translate3d(-36.9px, 0px, 0) scale(0.872, 1.094); opacity: 1; }
  11.34% { transform: translate3d(-27.17px, 0px, 0) scale(0.848, 1.113); opacity: 1; }
  12.01% { transform: translate3d(-17.94px, 0px, 0) scale(0.836, 1.123); opacity: 1; }
  12.67% { transform: translate3d(-9.26px, 0px, 0) scale(0.833, 1.126); opacity: 1; }
  13.35% { transform: translate3d(-1.05px, 0px, 0) scale(0.837, 1.123); opacity: 1; }
  14.01% { transform: translate3d(6.36px, 0px, 0) scale(0.844, 1.117); opacity: 1; }
  14.67% { transform: translate3d(13.08px, 0px, 0) scale(0.853, 1.109); opacity: 1; }
  15.34% { transform: translate3d(19.11px, 0px, 0) scale(0.861, 1.102); opacity: 1; }
  16% { transform: translate3d(24.44px, 0px, 0) scale(0.868, 1.096); opacity: 1; }
  16.68% { transform: translate3d(29.15px, 0px, 0) scale(0.873, 1.092); opacity: 1; }
  17.34% { transform: translate3d(33.07px, 0px, 0) scale(0.876, 1.09); opacity: 1; }
  18.01% { transform: translate3d(36.3px, 0px, 0) scale(0.877, 1.089); opacity: 1; }
  18.67% { transform: translate3d(38.87px, 0px, 0) scale(0.877, 1.089); opacity: 1; }
  19.34% { transform: translate3d(40.8px, 0px, 0) scale(0.877, 1.089); opacity: 1; }
  20.01% { transform: translate3d(42.15px, 0px, 0) scale(0.878, 1.088); opacity: 1; }
  20.68% { transform: translate3d(42.9px, 0px, 0) scale(0.88, 1.087); opacity: 1; }
  21.34% { transform: translate3d(43.12px, 0px, 0) scale(0.883, 1.084); opacity: 1; }
  22.01% { transform: translate3d(42.85px, 0px, 0) scale(0.889, 1.08); opacity: 1; }
  22.67% { transform: translate3d(42.13px, 0px, 0) scale(0.896, 1.074); opacity: 1; }
  23.35% { transform: translate3d(40.99px, 0px, 0) scale(0.905, 1.067); opacity: 1; }
  24.01% { transform: translate3d(39.51px, 0px, 0) scale(0.916, 1.059); opacity: 1; }
  24.67% { transform: translate3d(37.71px, 0px, 0) scale(0.927, 1.051); opacity: 1; }
  25.34% { transform: translate3d(35.66px, 0px, 0) scale(0.938, 1.042); opacity: 1; }
  26% { transform: translate3d(33.38px, 0px, 0) scale(0.95, 1.034); opacity: 1; }
  26.68% { transform: translate3d(30.87px, 0px, 0) scale(0.961, 1.026); opacity: 1; }
  27.34% { transform: translate3d(28.27px, 0px, 0) scale(0.972, 1.019); opacity: 1; }
  28.01% { transform: translate3d(25.58px, 0px, 0) scale(0.981, 1.012); opacity: 1; }
  28.67% { transform: translate3d(22.83px, 0px, 0) scale(0.99, 1.007); opacity: 1; }
  29.34% { transform: translate3d(20.05px, 0px, 0) scale(0.997, 1.002); opacity: 1; }
  30.01% { transform: translate3d(17.23px, 0px, 0) scale(1.004, 0.997); opacity: 1; }
  30.68% { transform: translate3d(14.5px, 0px, 0) scale(1.01, 0.994); opacity: 1; }
  31.34% { transform: translate3d(11.84px, 0px, 0) scale(1.014, 0.991); opacity: 1; }
  32.01% { transform: translate3d(9.27px, 0px, 0) scale(1.019, 0.988); opacity: 1; }
  32.67% { transform: translate3d(6.8px, 0px, 0) scale(1.023, 0.986); opacity: 1; }
  33.35% { transform: translate3d(4.42px, 0px, 0) scale(1.026, 0.983); opacity: 1; }
  34.01% { transform: translate3d(2.23px, 0px, 0) scale(1.029, 0.982); opacity: 1; }
  34.67% { transform: translate3d(0.19px, 0px, 0) scale(1.031, 0.98); opacity: 1; }
  35.34% { transform: translate3d(-1.68px, 0px, 0) scale(1.033, 0.979); opacity: 1; }
  36% { transform: translate3d(-3.38px, 0px, 0) scale(1.035, 0.978); opacity: 1; }
  36.68% { transform: translate3d(-4.93px, 0px, 0) scale(1.036, 0.977); opacity: 1; }
  37.34% { transform: translate3d(-6.27px, 0px, 0) scale(1.037, 0.977); opacity: 1; }
  38.01% { transform: translate3d(-7.43px, 0px, 0) scale(1.038, 0.976); opacity: 1; }
  38.67% { transform: translate3d(-8.42px, 0px, 0) scale(1.037, 0.976); opacity: 1; }
  39.34% { transform: translate3d(-9.23px, 0px, 0) scale(1.037, 0.977); opacity: 1; }
  40.01% { transform: translate3d(-9.89px, 0px, 0) scale(1.036, 0.977); opacity: 1; }
  40.68% { transform: translate3d(-10.37px, 0px, 0) scale(1.035, 0.978); opacity: 1; }
  41.34% { transform: translate3d(-10.7px, 0px, 0) scale(1.033, 0.979); opacity: 1; }
  42.01% { transform: translate3d(-10.89px, 0px, 0) scale(1.031, 0.98); opacity: 1; }
  42.67% { transform: translate3d(-10.94px, 0px, 0) scale(1.029, 0.982); opacity: 1; }
  43.35% { transform: translate3d(-10.86px, 0px, 0) scale(1.027, 0.983); opacity: 1; }
  44.01% { transform: translate3d(-10.67px, 0px, 0) scale(1.024, 0.985); opacity: 1; }
  44.67% { transform: translate3d(-10.38px, 0px, 0) scale(1.022, 0.986); opacity: 1; }
  45.34% { transform: translate3d(-10.01px, 0px, 0) scale(1.019, 0.988); opacity: 1; }
  46% { transform: translate3d(-9.55px, 0px, 0) scale(1.017, 0.989); opacity: 1; }
  46.68% { transform: translate3d(-9.01px, 0px, 0) scale(1.014, 0.991); opacity: 1; }
  47.34% { transform: translate3d(-8.43px, 0px, 0) scale(1.012, 0.992); opacity: 1; }
  48.01% { transform: translate3d(-7.81px, 0px, 0) scale(1.01, 0.994); opacity: 1; }
  48.67% { transform: translate3d(-7.15px, 0px, 0) scale(1.007, 0.995); opacity: 1; }
  49.34% { transform: translate3d(-6.46px, 0px, 0) scale(1.005, 0.997); opacity: 1; }
  50.01% { transform: translate3d(-5.75px, 0px, 0) scale(1.003, 0.998); opacity: 1; }
  50.68% { transform: translate3d(-5.05px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  51.34% { transform: translate3d(-4.34px, 0px, 0) scale(1, 1); opacity: 1; }
  52.01% { transform: translate3d(-3.65px, 0px, 0) scale(0.998, 1.001); opacity: 1; }
  52.67% { transform: translate3d(-2.98px, 0px, 0) scale(0.997, 1.002); opacity: 1; }
  53.35% { transform: translate3d(-2.31px, 0px, 0) scale(0.995, 1.003); opacity: 1; }
  54.01% { transform: translate3d(-1.69px, 0px, 0) scale(0.994, 1.004); opacity: 1; }
  54.67% { transform: translate3d(-1.1px, 0px, 0) scale(0.993, 1.004); opacity: 1; }
  55.34% { transform: translate3d(-0.54px, 0px, 0) scale(0.992, 1.005); opacity: 1; }
  56% { transform: translate3d(-0.03px, 0px, 0) scale(0.992, 1.005); opacity: 1; }
  56.68% { transform: translate3d(0.45px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  57.34% { transform: translate3d(0.88px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  58.01% { transform: translate3d(1.26px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  58.67% { transform: translate3d(1.6px, 0px, 0) scale(0.99, 1.006); opacity: 1; }
  59.34% { transform: translate3d(1.9px, 0px, 0) scale(0.99, 1.006); opacity: 1; }
  60.01% { transform: translate3d(2.15px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  60.68% { transform: translate3d(2.35px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  61.34% { transform: translate3d(2.51px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  62.01% { transform: translate3d(2.63px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  62.67% { transform: translate3d(2.72px, 0px, 0) scale(0.992, 1.005); opacity: 1; }
  63.35% { transform: translate3d(2.76px, 0px, 0) scale(0.992, 1.005); opacity: 1; }
  64.01% { transform: translate3d(2.77px, 0px, 0) scale(0.993, 1.005); opacity: 1; }
  64.67% { transform: translate3d(2.75px, 0px, 0) scale(0.993, 1.004); opacity: 1; }
  65.34% { transform: translate3d(2.71px, 0px, 0) scale(0.994, 1.004); opacity: 1; }
  66% { transform: translate3d(2.63px, 0px, 0) scale(0.995, 1.004); opacity: 1; }
  66.68% { transform: translate3d(2.53px, 0px, 0) scale(0.995, 1.003); opacity: 1; }
  67.34% { transform: translate3d(2.41px, 0px, 0) scale(0.996, 1.003); opacity: 1; }
  68.01% { transform: translate3d(2.28px, 0px, 0) scale(0.996, 1.002); opacity: 1; }
  68.67% { transform: translate3d(2.13px, 0px, 0) scale(0.997, 1.002); opacity: 1; }
  69.34% { transform: translate3d(1.97px, 0px, 0) scale(0.998, 1.002); opacity: 1; }
  70.01% { transform: translate3d(1.8px, 0px, 0) scale(0.998, 1.001); opacity: 1; }
  70.68% { transform: translate3d(1.63px, 0px, 0) scale(0.999, 1.001); opacity: 1; }
  71.34% { transform: translate3d(1.45px, 0px, 0) scale(0.999, 1.001); opacity: 1; }
  72.01% { transform: translate3d(1.27px, 0px, 0) scale(1, 1); opacity: 1; }
  72.67% { transform: translate3d(1.1px, 0px, 0) scale(1, 1); opacity: 1; }
  73.35% { transform: translate3d(0.92px, 0px, 0) scale(1.001, 1); opacity: 1; }
  74.01% { transform: translate3d(0.75px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  74.67% { transform: translate3d(0.58px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  75.34% { transform: translate3d(0.42px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  76% { transform: translate3d(0.27px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  76.68% { transform: translate3d(0.13px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  77.34% { transform: translate3d(0px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  78.01% { transform: translate3d(-0.12px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  78.67% { transform: translate3d(-0.23px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  79.34% { transform: translate3d(-0.32px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  80.01% { transform: translate3d(-0.41px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  80.68% { transform: translate3d(-0.48px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  81.34% { transform: translate3d(-0.55px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  82.01% { transform: translate3d(-0.6px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  82.67% { transform: translate3d(-0.64px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  83.35% { transform: translate3d(-0.67px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  84.01% { transform: translate3d(-0.69px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  84.67% { transform: translate3d(-0.7px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  85.34% { transform: translate3d(-0.7px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  86% { transform: translate3d(-0.7px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  86.68% { transform: translate3d(-0.69px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  87.34% { transform: translate3d(-0.67px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  88.01% { transform: translate3d(-0.64px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  88.67% { transform: translate3d(-0.61px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  89.34% { transform: translate3d(-0.58px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  90.01% { transform: translate3d(-0.54px, 0px, 0) scale(1.001, 1); opacity: 1; }
  90.68% { transform: translate3d(-0.5px, 0px, 0) scale(1.001, 1); opacity: 1; }
  91.34% { transform: translate3d(-0.46px, 0px, 0) scale(1, 1); opacity: 1; }
  92.01% { transform: translate3d(-0.41px, 0px, 0) scale(1, 1); opacity: 1; }
  92.67% { transform: translate3d(-0.37px, 0px, 0) scale(1, 1); opacity: 1; }
  93.35% { transform: translate3d(-0.32px, 0px, 0) scale(1, 1); opacity: 1; }
  94.01% { transform: translate3d(-0.28px, 0px, 0) scale(1, 1); opacity: 1; }
  94.67% { transform: translate3d(-0.23px, 0px, 0) scale(1, 1); opacity: 1; }
  95.34% { transform: translate3d(-0.19px, 0px, 0) scale(1, 1); opacity: 1; }
  96% { transform: translate3d(-0.15px, 0px, 0) scale(1, 1); opacity: 1; }
  96.68% { transform: translate3d(-0.11px, 0px, 0) scale(1, 1); opacity: 1; }
  97.34% { transform: translate3d(-0.07px, 0px, 0) scale(1, 1); opacity: 1; }
  98.01% { transform: translate3d(-0.03px, 0px, 0) scale(1, 1); opacity: 1; }
  98.67% { transform: translate3d(0px, 0px, 0) scale(0.999, 1); opacity: 1; }
  99.34% { transform: translate3d(0.03px, 0px, 0) scale(0.999, 1); opacity: 1; }
  100% { transform: translate3d(0px, 0px, 0) scale(1, 1); opacity: 1; }
}
@keyframes wm-in-right {
  0% { transform: translate3d(170px, 0px, 0) scale(1, 1); opacity: 0; }
  0.68% { transform: translate3d(169px, 0px, 0) scale(1.025, 0.984); opacity: 0.017; }
  1.34% { transform: translate3d(166.24px, 0px, 0) scale(1.083, 0.949); opacity: 0.063; }
  2.01% { transform: translate3d(161.88px, 0px, 0) scale(1.158, 0.909); opacity: 0.133; }
  2.67% { transform: translate3d(156.12px, 0px, 0) scale(1.232, 0.873); opacity: 0.222; }
  3.35% { transform: translate3d(148.97px, 0px, 0) scale(1.293, 0.846); opacity: 0.327; }
  4.01% { transform: translate3d(140.89px, 0px, 0) scale(1.33, 0.831); opacity: 0.438; }
  4.67% { transform: translate3d(131.93px, 0px, 0) scale(1.34, 0.827); opacity: 0.551; }
  5.34% { transform: translate3d(122.27px, 0px, 0) scale(1.323, 0.833); opacity: 0.663; }
  6% { transform: translate3d(112.06px, 0px, 0) scale(1.284, 0.85); opacity: 0.766; }
  6.68% { transform: translate3d(101.25px, 0px, 0) scale(1.225, 0.876); opacity: 0.859; }
  7.34% { transform: translate3d(90.41px, 0px, 0) scale(1.157, 0.91); opacity: 0.931; }
  8.01% { transform: translate3d(79.47px, 0px, 0) scale(1.086, 0.948); opacity: 0.98; }
  8.67% { transform: translate3d(68.56px, 0px, 0) scale(1.018, 0.989); opacity: 1; }
  9.34% { transform: translate3d(57.79px, 0px, 0) scale(0.957, 1.029); opacity: 1; }
  10.01% { transform: translate3d(47.07px, 0px, 0) scale(0.908, 1.065); opacity: 1; }
  10.68% { transform: translate3d(36.9px, 0px, 0) scale(0.872, 1.094); opacity: 1; }
  11.34% { transform: translate3d(27.17px, 0px, 0) scale(0.848, 1.113); opacity: 1; }
  12.01% { transform: translate3d(17.94px, 0px, 0) scale(0.836, 1.123); opacity: 1; }
  12.67% { transform: translate3d(9.26px, 0px, 0) scale(0.833, 1.126); opacity: 1; }
  13.35% { transform: translate3d(1.05px, 0px, 0) scale(0.837, 1.123); opacity: 1; }
  14.01% { transform: translate3d(-6.36px, 0px, 0) scale(0.844, 1.117); opacity: 1; }
  14.67% { transform: translate3d(-13.08px, 0px, 0) scale(0.853, 1.109); opacity: 1; }
  15.34% { transform: translate3d(-19.11px, 0px, 0) scale(0.861, 1.102); opacity: 1; }
  16% { transform: translate3d(-24.44px, 0px, 0) scale(0.868, 1.096); opacity: 1; }
  16.68% { transform: translate3d(-29.15px, 0px, 0) scale(0.873, 1.092); opacity: 1; }
  17.34% { transform: translate3d(-33.07px, 0px, 0) scale(0.876, 1.09); opacity: 1; }
  18.01% { transform: translate3d(-36.3px, 0px, 0) scale(0.877, 1.089); opacity: 1; }
  18.67% { transform: translate3d(-38.87px, 0px, 0) scale(0.877, 1.089); opacity: 1; }
  19.34% { transform: translate3d(-40.8px, 0px, 0) scale(0.877, 1.089); opacity: 1; }
  20.01% { transform: translate3d(-42.15px, 0px, 0) scale(0.878, 1.088); opacity: 1; }
  20.68% { transform: translate3d(-42.9px, 0px, 0) scale(0.88, 1.087); opacity: 1; }
  21.34% { transform: translate3d(-43.12px, 0px, 0) scale(0.883, 1.084); opacity: 1; }
  22.01% { transform: translate3d(-42.85px, 0px, 0) scale(0.889, 1.08); opacity: 1; }
  22.67% { transform: translate3d(-42.13px, 0px, 0) scale(0.896, 1.074); opacity: 1; }
  23.35% { transform: translate3d(-40.99px, 0px, 0) scale(0.905, 1.067); opacity: 1; }
  24.01% { transform: translate3d(-39.51px, 0px, 0) scale(0.916, 1.059); opacity: 1; }
  24.67% { transform: translate3d(-37.71px, 0px, 0) scale(0.927, 1.051); opacity: 1; }
  25.34% { transform: translate3d(-35.66px, 0px, 0) scale(0.938, 1.042); opacity: 1; }
  26% { transform: translate3d(-33.38px, 0px, 0) scale(0.95, 1.034); opacity: 1; }
  26.68% { transform: translate3d(-30.87px, 0px, 0) scale(0.961, 1.026); opacity: 1; }
  27.34% { transform: translate3d(-28.27px, 0px, 0) scale(0.972, 1.019); opacity: 1; }
  28.01% { transform: translate3d(-25.58px, 0px, 0) scale(0.981, 1.012); opacity: 1; }
  28.67% { transform: translate3d(-22.83px, 0px, 0) scale(0.99, 1.007); opacity: 1; }
  29.34% { transform: translate3d(-20.05px, 0px, 0) scale(0.997, 1.002); opacity: 1; }
  30.01% { transform: translate3d(-17.23px, 0px, 0) scale(1.004, 0.997); opacity: 1; }
  30.68% { transform: translate3d(-14.5px, 0px, 0) scale(1.01, 0.994); opacity: 1; }
  31.34% { transform: translate3d(-11.84px, 0px, 0) scale(1.014, 0.991); opacity: 1; }
  32.01% { transform: translate3d(-9.27px, 0px, 0) scale(1.019, 0.988); opacity: 1; }
  32.67% { transform: translate3d(-6.8px, 0px, 0) scale(1.023, 0.986); opacity: 1; }
  33.35% { transform: translate3d(-4.42px, 0px, 0) scale(1.026, 0.983); opacity: 1; }
  34.01% { transform: translate3d(-2.23px, 0px, 0) scale(1.029, 0.982); opacity: 1; }
  34.67% { transform: translate3d(-0.19px, 0px, 0) scale(1.031, 0.98); opacity: 1; }
  35.34% { transform: translate3d(1.68px, 0px, 0) scale(1.033, 0.979); opacity: 1; }
  36% { transform: translate3d(3.38px, 0px, 0) scale(1.035, 0.978); opacity: 1; }
  36.68% { transform: translate3d(4.93px, 0px, 0) scale(1.036, 0.977); opacity: 1; }
  37.34% { transform: translate3d(6.27px, 0px, 0) scale(1.037, 0.977); opacity: 1; }
  38.01% { transform: translate3d(7.43px, 0px, 0) scale(1.038, 0.976); opacity: 1; }
  38.67% { transform: translate3d(8.42px, 0px, 0) scale(1.037, 0.976); opacity: 1; }
  39.34% { transform: translate3d(9.23px, 0px, 0) scale(1.037, 0.977); opacity: 1; }
  40.01% { transform: translate3d(9.89px, 0px, 0) scale(1.036, 0.977); opacity: 1; }
  40.68% { transform: translate3d(10.37px, 0px, 0) scale(1.035, 0.978); opacity: 1; }
  41.34% { transform: translate3d(10.7px, 0px, 0) scale(1.033, 0.979); opacity: 1; }
  42.01% { transform: translate3d(10.89px, 0px, 0) scale(1.031, 0.98); opacity: 1; }
  42.67% { transform: translate3d(10.94px, 0px, 0) scale(1.029, 0.982); opacity: 1; }
  43.35% { transform: translate3d(10.86px, 0px, 0) scale(1.027, 0.983); opacity: 1; }
  44.01% { transform: translate3d(10.67px, 0px, 0) scale(1.024, 0.985); opacity: 1; }
  44.67% { transform: translate3d(10.38px, 0px, 0) scale(1.022, 0.986); opacity: 1; }
  45.34% { transform: translate3d(10.01px, 0px, 0) scale(1.019, 0.988); opacity: 1; }
  46% { transform: translate3d(9.55px, 0px, 0) scale(1.017, 0.989); opacity: 1; }
  46.68% { transform: translate3d(9.01px, 0px, 0) scale(1.014, 0.991); opacity: 1; }
  47.34% { transform: translate3d(8.43px, 0px, 0) scale(1.012, 0.992); opacity: 1; }
  48.01% { transform: translate3d(7.81px, 0px, 0) scale(1.01, 0.994); opacity: 1; }
  48.67% { transform: translate3d(7.15px, 0px, 0) scale(1.007, 0.995); opacity: 1; }
  49.34% { transform: translate3d(6.46px, 0px, 0) scale(1.005, 0.997); opacity: 1; }
  50.01% { transform: translate3d(5.75px, 0px, 0) scale(1.003, 0.998); opacity: 1; }
  50.68% { transform: translate3d(5.05px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  51.34% { transform: translate3d(4.34px, 0px, 0) scale(1, 1); opacity: 1; }
  52.01% { transform: translate3d(3.65px, 0px, 0) scale(0.998, 1.001); opacity: 1; }
  52.67% { transform: translate3d(2.98px, 0px, 0) scale(0.997, 1.002); opacity: 1; }
  53.35% { transform: translate3d(2.31px, 0px, 0) scale(0.995, 1.003); opacity: 1; }
  54.01% { transform: translate3d(1.69px, 0px, 0) scale(0.994, 1.004); opacity: 1; }
  54.67% { transform: translate3d(1.1px, 0px, 0) scale(0.993, 1.004); opacity: 1; }
  55.34% { transform: translate3d(0.54px, 0px, 0) scale(0.992, 1.005); opacity: 1; }
  56% { transform: translate3d(0.03px, 0px, 0) scale(0.992, 1.005); opacity: 1; }
  56.68% { transform: translate3d(-0.45px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  57.34% { transform: translate3d(-0.88px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  58.01% { transform: translate3d(-1.26px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  58.67% { transform: translate3d(-1.6px, 0px, 0) scale(0.99, 1.006); opacity: 1; }
  59.34% { transform: translate3d(-1.9px, 0px, 0) scale(0.99, 1.006); opacity: 1; }
  60.01% { transform: translate3d(-2.15px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  60.68% { transform: translate3d(-2.35px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  61.34% { transform: translate3d(-2.51px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  62.01% { transform: translate3d(-2.63px, 0px, 0) scale(0.991, 1.006); opacity: 1; }
  62.67% { transform: translate3d(-2.72px, 0px, 0) scale(0.992, 1.005); opacity: 1; }
  63.35% { transform: translate3d(-2.76px, 0px, 0) scale(0.992, 1.005); opacity: 1; }
  64.01% { transform: translate3d(-2.77px, 0px, 0) scale(0.993, 1.005); opacity: 1; }
  64.67% { transform: translate3d(-2.75px, 0px, 0) scale(0.993, 1.004); opacity: 1; }
  65.34% { transform: translate3d(-2.71px, 0px, 0) scale(0.994, 1.004); opacity: 1; }
  66% { transform: translate3d(-2.63px, 0px, 0) scale(0.995, 1.004); opacity: 1; }
  66.68% { transform: translate3d(-2.53px, 0px, 0) scale(0.995, 1.003); opacity: 1; }
  67.34% { transform: translate3d(-2.41px, 0px, 0) scale(0.996, 1.003); opacity: 1; }
  68.01% { transform: translate3d(-2.28px, 0px, 0) scale(0.996, 1.002); opacity: 1; }
  68.67% { transform: translate3d(-2.13px, 0px, 0) scale(0.997, 1.002); opacity: 1; }
  69.34% { transform: translate3d(-1.97px, 0px, 0) scale(0.998, 1.002); opacity: 1; }
  70.01% { transform: translate3d(-1.8px, 0px, 0) scale(0.998, 1.001); opacity: 1; }
  70.68% { transform: translate3d(-1.63px, 0px, 0) scale(0.999, 1.001); opacity: 1; }
  71.34% { transform: translate3d(-1.45px, 0px, 0) scale(0.999, 1.001); opacity: 1; }
  72.01% { transform: translate3d(-1.27px, 0px, 0) scale(1, 1); opacity: 1; }
  72.67% { transform: translate3d(-1.1px, 0px, 0) scale(1, 1); opacity: 1; }
  73.35% { transform: translate3d(-0.92px, 0px, 0) scale(1.001, 1); opacity: 1; }
  74.01% { transform: translate3d(-0.75px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  74.67% { transform: translate3d(-0.58px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  75.34% { transform: translate3d(-0.42px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  76% { transform: translate3d(-0.27px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  76.68% { transform: translate3d(-0.13px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  77.34% { transform: translate3d(0px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  78.01% { transform: translate3d(0.12px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  78.67% { transform: translate3d(0.23px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  79.34% { transform: translate3d(0.32px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  80.01% { transform: translate3d(0.41px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  80.68% { transform: translate3d(0.48px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  81.34% { transform: translate3d(0.55px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  82.01% { transform: translate3d(0.6px, 0px, 0) scale(1.002, 0.998); opacity: 1; }
  82.67% { transform: translate3d(0.64px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  83.35% { transform: translate3d(0.67px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  84.01% { transform: translate3d(0.69px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  84.67% { transform: translate3d(0.7px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  85.34% { transform: translate3d(0.7px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  86% { transform: translate3d(0.7px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  86.68% { transform: translate3d(0.69px, 0px, 0) scale(1.002, 0.999); opacity: 1; }
  87.34% { transform: translate3d(0.67px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  88.01% { transform: translate3d(0.64px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  88.67% { transform: translate3d(0.61px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  89.34% { transform: translate3d(0.58px, 0px, 0) scale(1.001, 0.999); opacity: 1; }
  90.01% { transform: translate3d(0.54px, 0px, 0) scale(1.001, 1); opacity: 1; }
  90.68% { transform: translate3d(0.5px, 0px, 0) scale(1.001, 1); opacity: 1; }
  91.34% { transform: translate3d(0.46px, 0px, 0) scale(1, 1); opacity: 1; }
  92.01% { transform: translate3d(0.41px, 0px, 0) scale(1, 1); opacity: 1; }
  92.67% { transform: translate3d(0.37px, 0px, 0) scale(1, 1); opacity: 1; }
  93.35% { transform: translate3d(0.32px, 0px, 0) scale(1, 1); opacity: 1; }
  94.01% { transform: translate3d(0.28px, 0px, 0) scale(1, 1); opacity: 1; }
  94.67% { transform: translate3d(0.23px, 0px, 0) scale(1, 1); opacity: 1; }
  95.34% { transform: translate3d(0.19px, 0px, 0) scale(1, 1); opacity: 1; }
  96% { transform: translate3d(0.15px, 0px, 0) scale(1, 1); opacity: 1; }
  96.68% { transform: translate3d(0.11px, 0px, 0) scale(1, 1); opacity: 1; }
  97.34% { transform: translate3d(0.07px, 0px, 0) scale(1, 1); opacity: 1; }
  98.01% { transform: translate3d(0.03px, 0px, 0) scale(1, 1); opacity: 1; }
  98.67% { transform: translate3d(0px, 0px, 0) scale(0.999, 1); opacity: 1; }
  99.34% { transform: translate3d(-0.03px, 0px, 0) scale(0.999, 1); opacity: 1; }
  100% { transform: translate3d(0px, 0px, 0) scale(1, 1); opacity: 1; }
}
@keyframes wm-in-top {
  0% { transform: translate3d(0px, -150px, 0) scale(1, 1); opacity: 0; }
  0.68% { transform: translate3d(0px, -149.12px, 0) scale(0.984, 1.025); opacity: 0.017; }
  1.34% { transform: translate3d(0px, -146.68px, 0) scale(0.949, 1.083); opacity: 0.063; }
  2.01% { transform: translate3d(0px, -142.84px, 0) scale(0.909, 1.158); opacity: 0.133; }
  2.67% { transform: translate3d(0px, -137.75px, 0) scale(0.873, 1.232); opacity: 0.222; }
  3.35% { transform: translate3d(0px, -131.44px, 0) scale(0.846, 1.293); opacity: 0.327; }
  4.01% { transform: translate3d(0px, -124.31px, 0) scale(0.831, 1.33); opacity: 0.438; }
  4.67% { transform: translate3d(0px, -116.41px, 0) scale(0.827, 1.34); opacity: 0.551; }
  5.34% { transform: translate3d(0px, -107.89px, 0) scale(0.833, 1.323); opacity: 0.663; }
  6% { transform: translate3d(0px, -98.88px, 0) scale(0.85, 1.284); opacity: 0.766; }
  6.68% { transform: translate3d(0px, -89.34px, 0) scale(0.876, 1.225); opacity: 0.859; }
  7.34% { transform: translate3d(0px, -79.78px, 0) scale(0.91, 1.157); opacity: 0.931; }
  8.01% { transform: translate3d(0px, -70.12px, 0) scale(0.948, 1.086); opacity: 0.98; }
  8.67% { transform: translate3d(0px, -60.49px, 0) scale(0.989, 1.018); opacity: 1; }
  9.34% { transform: translate3d(0px, -50.99px, 0) scale(1.029, 0.957); opacity: 1; }
  10.01% { transform: translate3d(0px, -41.53px, 0) scale(1.065, 0.908); opacity: 1; }
  10.68% { transform: translate3d(0px, -32.56px, 0) scale(1.094, 0.872); opacity: 1; }
  11.34% { transform: translate3d(0px, -23.97px, 0) scale(1.113, 0.848); opacity: 1; }
  12.01% { transform: translate3d(0px, -15.83px, 0) scale(1.123, 0.836); opacity: 1; }
  12.67% { transform: translate3d(0px, -8.17px, 0) scale(1.126, 0.833); opacity: 1; }
  13.35% { transform: translate3d(0px, -0.92px, 0) scale(1.123, 0.837); opacity: 1; }
  14.01% { transform: translate3d(0px, 5.61px, 0) scale(1.117, 0.844); opacity: 1; }
  14.67% { transform: translate3d(0px, 11.54px, 0) scale(1.109, 0.853); opacity: 1; }
  15.34% { transform: translate3d(0px, 16.87px, 0) scale(1.102, 0.861); opacity: 1; }
  16% { transform: translate3d(0px, 21.57px, 0) scale(1.096, 0.868); opacity: 1; }
  16.68% { transform: translate3d(0px, 25.72px, 0) scale(1.092, 0.873); opacity: 1; }
  17.34% { transform: translate3d(0px, 29.18px, 0) scale(1.09, 0.876); opacity: 1; }
  18.01% { transform: translate3d(0px, 32.03px, 0) scale(1.089, 0.877); opacity: 1; }
  18.67% { transform: translate3d(0px, 34.29px, 0) scale(1.089, 0.877); opacity: 1; }
  19.34% { transform: translate3d(0px, 36px, 0) scale(1.089, 0.877); opacity: 1; }
  20.01% { transform: translate3d(0px, 37.19px, 0) scale(1.088, 0.878); opacity: 1; }
  20.68% { transform: translate3d(0px, 37.85px, 0) scale(1.087, 0.88); opacity: 1; }
  21.34% { transform: translate3d(0px, 38.05px, 0) scale(1.084, 0.883); opacity: 1; }
  22.01% { transform: translate3d(0px, 37.81px, 0) scale(1.08, 0.889); opacity: 1; }
  22.67% { transform: translate3d(0px, 37.18px, 0) scale(1.074, 0.896); opacity: 1; }
  23.35% { transform: translate3d(0px, 36.17px, 0) scale(1.067, 0.905); opacity: 1; }
  24.01% { transform: translate3d(0px, 34.86px, 0) scale(1.059, 0.916); opacity: 1; }
  24.67% { transform: translate3d(0px, 33.28px, 0) scale(1.051, 0.927); opacity: 1; }
  25.34% { transform: translate3d(0px, 31.46px, 0) scale(1.042, 0.938); opacity: 1; }
  26% { transform: translate3d(0px, 29.45px, 0) scale(1.034, 0.95); opacity: 1; }
  26.68% { transform: translate3d(0px, 27.24px, 0) scale(1.026, 0.961); opacity: 1; }
  27.34% { transform: translate3d(0px, 24.95px, 0) scale(1.019, 0.972); opacity: 1; }
  28.01% { transform: translate3d(0px, 22.57px, 0) scale(1.012, 0.981); opacity: 1; }
  28.67% { transform: translate3d(0px, 20.14px, 0) scale(1.007, 0.99); opacity: 1; }
  29.34% { transform: translate3d(0px, 17.69px, 0) scale(1.002, 0.997); opacity: 1; }
  30.01% { transform: translate3d(0px, 15.2px, 0) scale(0.997, 1.004); opacity: 1; }
  30.68% { transform: translate3d(0px, 12.8px, 0) scale(0.994, 1.01); opacity: 1; }
  31.34% { transform: translate3d(0px, 10.45px, 0) scale(0.991, 1.014); opacity: 1; }
  32.01% { transform: translate3d(0px, 8.18px, 0) scale(0.988, 1.019); opacity: 1; }
  32.67% { transform: translate3d(0px, 6px, 0) scale(0.986, 1.023); opacity: 1; }
  33.35% { transform: translate3d(0px, 3.9px, 0) scale(0.983, 1.026); opacity: 1; }
  34.01% { transform: translate3d(0px, 1.97px, 0) scale(0.982, 1.029); opacity: 1; }
  34.67% { transform: translate3d(0px, 0.17px, 0) scale(0.98, 1.031); opacity: 1; }
  35.34% { transform: translate3d(0px, -1.48px, 0) scale(0.979, 1.033); opacity: 1; }
  36% { transform: translate3d(0px, -2.98px, 0) scale(0.978, 1.035); opacity: 1; }
  36.68% { transform: translate3d(0px, -4.35px, 0) scale(0.977, 1.036); opacity: 1; }
  37.34% { transform: translate3d(0px, -5.53px, 0) scale(0.977, 1.037); opacity: 1; }
  38.01% { transform: translate3d(0px, -6.56px, 0) scale(0.976, 1.038); opacity: 1; }
  38.67% { transform: translate3d(0px, -7.43px, 0) scale(0.976, 1.037); opacity: 1; }
  39.34% { transform: translate3d(0px, -8.15px, 0) scale(0.977, 1.037); opacity: 1; }
  40.01% { transform: translate3d(0px, -8.73px, 0) scale(0.977, 1.036); opacity: 1; }
  40.68% { transform: translate3d(0px, -9.15px, 0) scale(0.978, 1.035); opacity: 1; }
  41.34% { transform: translate3d(0px, -9.44px, 0) scale(0.979, 1.033); opacity: 1; }
  42.01% { transform: translate3d(0px, -9.61px, 0) scale(0.98, 1.031); opacity: 1; }
  42.67% { transform: translate3d(0px, -9.65px, 0) scale(0.982, 1.029); opacity: 1; }
  43.35% { transform: translate3d(0px, -9.58px, 0) scale(0.983, 1.027); opacity: 1; }
  44.01% { transform: translate3d(0px, -9.42px, 0) scale(0.985, 1.024); opacity: 1; }
  44.67% { transform: translate3d(0px, -9.16px, 0) scale(0.986, 1.022); opacity: 1; }
  45.34% { transform: translate3d(0px, -8.83px, 0) scale(0.988, 1.019); opacity: 1; }
  46% { transform: translate3d(0px, -8.42px, 0) scale(0.989, 1.017); opacity: 1; }
  46.68% { transform: translate3d(0px, -7.95px, 0) scale(0.991, 1.014); opacity: 1; }
  47.34% { transform: translate3d(0px, -7.44px, 0) scale(0.992, 1.012); opacity: 1; }
  48.01% { transform: translate3d(0px, -6.89px, 0) scale(0.994, 1.01); opacity: 1; }
  48.67% { transform: translate3d(0px, -6.31px, 0) scale(0.995, 1.007); opacity: 1; }
  49.34% { transform: translate3d(0px, -5.7px, 0) scale(0.997, 1.005); opacity: 1; }
  50.01% { transform: translate3d(0px, -5.07px, 0) scale(0.998, 1.003); opacity: 1; }
  50.68% { transform: translate3d(0px, -4.45px, 0) scale(0.999, 1.001); opacity: 1; }
  51.34% { transform: translate3d(0px, -3.83px, 0) scale(1, 1); opacity: 1; }
  52.01% { transform: translate3d(0px, -3.22px, 0) scale(1.001, 0.998); opacity: 1; }
  52.67% { transform: translate3d(0px, -2.63px, 0) scale(1.002, 0.997); opacity: 1; }
  53.35% { transform: translate3d(0px, -2.04px, 0) scale(1.003, 0.995); opacity: 1; }
  54.01% { transform: translate3d(0px, -1.49px, 0) scale(1.004, 0.994); opacity: 1; }
  54.67% { transform: translate3d(0px, -0.97px, 0) scale(1.004, 0.993); opacity: 1; }
  55.34% { transform: translate3d(0px, -0.48px, 0) scale(1.005, 0.992); opacity: 1; }
  56% { transform: translate3d(0px, -0.03px, 0) scale(1.005, 0.992); opacity: 1; }
  56.68% { transform: translate3d(0px, 0.4px, 0) scale(1.006, 0.991); opacity: 1; }
  57.34% { transform: translate3d(0px, 0.78px, 0) scale(1.006, 0.991); opacity: 1; }
  58.01% { transform: translate3d(0px, 1.12px, 0) scale(1.006, 0.991); opacity: 1; }
  58.67% { transform: translate3d(0px, 1.41px, 0) scale(1.006, 0.99); opacity: 1; }
  59.34% { transform: translate3d(0px, 1.67px, 0) scale(1.006, 0.99); opacity: 1; }
  60.01% { transform: translate3d(0px, 1.9px, 0) scale(1.006, 0.991); opacity: 1; }
  60.68% { transform: translate3d(0px, 2.08px, 0) scale(1.006, 0.991); opacity: 1; }
  61.34% { transform: translate3d(0px, 2.22px, 0) scale(1.006, 0.991); opacity: 1; }
  62.01% { transform: translate3d(0px, 2.32px, 0) scale(1.006, 0.991); opacity: 1; }
  62.67% { transform: translate3d(0px, 2.4px, 0) scale(1.005, 0.992); opacity: 1; }
  63.35% { transform: translate3d(0px, 2.44px, 0) scale(1.005, 0.992); opacity: 1; }
  64.01% { transform: translate3d(0px, 2.45px, 0) scale(1.005, 0.993); opacity: 1; }
  64.67% { transform: translate3d(0px, 2.43px, 0) scale(1.004, 0.993); opacity: 1; }
  65.34% { transform: translate3d(0px, 2.39px, 0) scale(1.004, 0.994); opacity: 1; }
  66% { transform: translate3d(0px, 2.32px, 0) scale(1.004, 0.995); opacity: 1; }
  66.68% { transform: translate3d(0px, 2.23px, 0) scale(1.003, 0.995); opacity: 1; }
  67.34% { transform: translate3d(0px, 2.13px, 0) scale(1.003, 0.996); opacity: 1; }
  68.01% { transform: translate3d(0px, 2.01px, 0) scale(1.002, 0.996); opacity: 1; }
  68.67% { transform: translate3d(0px, 1.88px, 0) scale(1.002, 0.997); opacity: 1; }
  69.34% { transform: translate3d(0px, 1.74px, 0) scale(1.002, 0.998); opacity: 1; }
  70.01% { transform: translate3d(0px, 1.59px, 0) scale(1.001, 0.998); opacity: 1; }
  70.68% { transform: translate3d(0px, 1.44px, 0) scale(1.001, 0.999); opacity: 1; }
  71.34% { transform: translate3d(0px, 1.28px, 0) scale(1.001, 0.999); opacity: 1; }
  72.01% { transform: translate3d(0px, 1.12px, 0) scale(1, 1); opacity: 1; }
  72.67% { transform: translate3d(0px, 0.97px, 0) scale(1, 1); opacity: 1; }
  73.35% { transform: translate3d(0px, 0.81px, 0) scale(1, 1.001); opacity: 1; }
  74.01% { transform: translate3d(0px, 0.66px, 0) scale(0.999, 1.001); opacity: 1; }
  74.67% { transform: translate3d(0px, 0.51px, 0) scale(0.999, 1.001); opacity: 1; }
  75.34% { transform: translate3d(0px, 0.37px, 0) scale(0.999, 1.001); opacity: 1; }
  76% { transform: translate3d(0px, 0.24px, 0) scale(0.999, 1.002); opacity: 1; }
  76.68% { transform: translate3d(0px, 0.12px, 0) scale(0.999, 1.002); opacity: 1; }
  77.34% { transform: translate3d(0px, 0px, 0) scale(0.999, 1.002); opacity: 1; }
  78.01% { transform: translate3d(0px, -0.1px, 0) scale(0.999, 1.002); opacity: 1; }
  78.67% { transform: translate3d(0px, -0.2px, 0) scale(0.998, 1.002); opacity: 1; }
  79.34% { transform: translate3d(0px, -0.29px, 0) scale(0.998, 1.002); opacity: 1; }
  80.01% { transform: translate3d(0px, -0.36px, 0) scale(0.998, 1.002); opacity: 1; }
  80.68% { transform: translate3d(0px, -0.43px, 0) scale(0.998, 1.002); opacity: 1; }
  81.34% { transform: translate3d(0px, -0.48px, 0) scale(0.998, 1.002); opacity: 1; }
  82.01% { transform: translate3d(0px, -0.53px, 0) scale(0.998, 1.002); opacity: 1; }
  82.67% { transform: translate3d(0px, -0.56px, 0) scale(0.999, 1.002); opacity: 1; }
  83.35% { transform: translate3d(0px, -0.59px, 0) scale(0.999, 1.002); opacity: 1; }
  84.01% { transform: translate3d(0px, -0.61px, 0) scale(0.999, 1.002); opacity: 1; }
  84.67% { transform: translate3d(0px, -0.62px, 0) scale(0.999, 1.002); opacity: 1; }
  85.34% { transform: translate3d(0px, -0.62px, 0) scale(0.999, 1.002); opacity: 1; }
  86% { transform: translate3d(0px, -0.62px, 0) scale(0.999, 1.002); opacity: 1; }
  86.68% { transform: translate3d(0px, -0.6px, 0) scale(0.999, 1.002); opacity: 1; }
  87.34% { transform: translate3d(0px, -0.59px, 0) scale(0.999, 1.001); opacity: 1; }
  88.01% { transform: translate3d(0px, -0.57px, 0) scale(0.999, 1.001); opacity: 1; }
  88.67% { transform: translate3d(0px, -0.54px, 0) scale(0.999, 1.001); opacity: 1; }
  89.34% { transform: translate3d(0px, -0.51px, 0) scale(0.999, 1.001); opacity: 1; }
  90.01% { transform: translate3d(0px, -0.48px, 0) scale(1, 1.001); opacity: 1; }
  90.68% { transform: translate3d(0px, -0.44px, 0) scale(1, 1.001); opacity: 1; }
  91.34% { transform: translate3d(0px, -0.4px, 0) scale(1, 1); opacity: 1; }
  92.01% { transform: translate3d(0px, -0.36px, 0) scale(1, 1); opacity: 1; }
  92.67% { transform: translate3d(0px, -0.32px, 0) scale(1, 1); opacity: 1; }
  93.35% { transform: translate3d(0px, -0.28px, 0) scale(1, 1); opacity: 1; }
  94.01% { transform: translate3d(0px, -0.24px, 0) scale(1, 1); opacity: 1; }
  94.67% { transform: translate3d(0px, -0.2px, 0) scale(1, 1); opacity: 1; }
  95.34% { transform: translate3d(0px, -0.17px, 0) scale(1, 1); opacity: 1; }
  96% { transform: translate3d(0px, -0.13px, 0) scale(1, 1); opacity: 1; }
  96.68% { transform: translate3d(0px, -0.09px, 0) scale(1, 1); opacity: 1; }
  97.34% { transform: translate3d(0px, -0.06px, 0) scale(1, 1); opacity: 1; }
  98.01% { transform: translate3d(0px, -0.03px, 0) scale(1, 1); opacity: 1; }
  98.67% { transform: translate3d(0px, 0px, 0) scale(1, 0.999); opacity: 1; }
  99.34% { transform: translate3d(0px, 0.03px, 0) scale(1, 0.999); opacity: 1; }
  100% { transform: translate3d(0px, 0px, 0) scale(1, 1); opacity: 1; }
}
@keyframes wm-in-word {
  0% { transform: translate3d(0px, 70px, 0) scale(1, 1); opacity: 0; }
  0.67% { transform: translate3d(0px, 69.58px, 0) scale(0.991, 1.015); opacity: 0.019; }
  1.34% { transform: translate3d(0px, 68.41px, 0) scale(0.969, 1.049); opacity: 0.07; }
  2.01% { transform: translate3d(0px, 66.54px, 0) scale(0.944, 1.093); opacity: 0.15; }
  2.67% { transform: translate3d(0px, 64.12px, 0) scale(0.922, 1.133); opacity: 0.247; }
  3.33% { transform: translate3d(0px, 61.21px, 0) scale(0.906, 1.164); opacity: 0.359; }
  4.01% { transform: translate3d(0px, 57.81px, 0) scale(0.898, 1.18); opacity: 0.48; }
  4.67% { transform: translate3d(0px, 54.13px, 0) scale(0.898, 1.179); opacity: 0.6; }
  5.34% { transform: translate3d(0px, 50.11px, 0) scale(0.907, 1.163); opacity: 0.717; }
  6% { transform: translate3d(0px, 45.97px, 0) scale(0.921, 1.134); opacity: 0.82; }
  6.67% { transform: translate3d(0px, 41.69px, 0) scale(0.941, 1.098); opacity: 0.905; }
  7.34% { transform: translate3d(0px, 37.26px, 0) scale(0.964, 1.057); opacity: 0.967; }
  8% { transform: translate3d(0px, 32.9px, 0) scale(0.988, 1.019); opacity: 0.998; }
  8.68% { transform: translate3d(0px, 28.5px, 0) scale(1.011, 0.984); opacity: 1; }
  9.34% { transform: translate3d(0px, 24.26px, 0) scale(1.03, 0.956); opacity: 1; }
  10% { transform: translate3d(0px, 20.14px, 0) scale(1.044, 0.936); opacity: 1; }
  10.67% { transform: translate3d(0px, 16.1px, 0) scale(1.053, 0.923); opacity: 1; }
  11.34% { transform: translate3d(0px, 12.33px, 0) scale(1.057, 0.918); opacity: 1; }
  12.01% { transform: translate3d(0px, 8.71px, 0) scale(1.058, 0.917); opacity: 1; }
  12.67% { transform: translate3d(0px, 5.39px, 0) scale(1.055, 0.92); opacity: 1; }
  13.33% { transform: translate3d(0px, 2.32px, 0) scale(1.052, 0.925); opacity: 1; }
  14.01% { transform: translate3d(0px, -0.54px, 0) scale(1.048, 0.931); opacity: 1; }
  14.67% { transform: translate3d(0px, -3.08px, 0) scale(1.045, 0.935); opacity: 1; }
  15.34% { transform: translate3d(0px, -5.38px, 0) scale(1.042, 0.938); opacity: 1; }
  16% { transform: translate3d(0px, -7.37px, 0) scale(1.041, 0.94); opacity: 1; }
  16.67% { transform: translate3d(0px, -9.09px, 0) scale(1.04, 0.941); opacity: 1; }
  17.34% { transform: translate3d(0px, -10.57px, 0) scale(1.041, 0.94); opacity: 1; }
  18% { transform: translate3d(0px, -11.77px, 0) scale(1.041, 0.94); opacity: 1; }
  18.68% { transform: translate3d(0px, -12.74px, 0) scale(1.042, 0.939); opacity: 1; }
  19.34% { transform: translate3d(0px, -13.46px, 0) scale(1.042, 0.939); opacity: 1; }
  20% { transform: translate3d(0px, -13.96px, 0) scale(1.041, 0.94); opacity: 1; }
  20.67% { transform: translate3d(0px, -14.26px, 0) scale(1.04, 0.942); opacity: 1; }
  21.34% { transform: translate3d(0px, -14.36px, 0) scale(1.037, 0.945); opacity: 1; }
  22.01% { transform: translate3d(0px, -14.29px, 0) scale(1.034, 0.95); opacity: 1; }
  22.67% { transform: translate3d(0px, -14.06px, 0) scale(1.031, 0.955); opacity: 1; }
  23.33% { transform: translate3d(0px, -13.7px, 0) scale(1.027, 0.96); opacity: 1; }
  24.01% { transform: translate3d(0px, -13.21px, 0) scale(1.023, 0.966); opacity: 1; }
  24.67% { transform: translate3d(0px, -12.62px, 0) scale(1.019, 0.972); opacity: 1; }
  25.34% { transform: translate3d(0px, -11.93px, 0) scale(1.015, 0.977); opacity: 1; }
  26% { transform: translate3d(0px, -11.18px, 0) scale(1.012, 0.982); opacity: 1; }
  26.67% { transform: translate3d(0px, -10.38px, 0) scale(1.009, 0.987); opacity: 1; }
  27.34% { transform: translate3d(0px, -9.52px, 0) scale(1.006, 0.991); opacity: 1; }
  28% { transform: translate3d(0px, -8.64px, 0) scale(1.004, 0.994); opacity: 1; }
  28.68% { transform: translate3d(0px, -7.73px, 0) scale(1.002, 0.997); opacity: 1; }
  29.34% { transform: translate3d(0px, -6.84px, 0) scale(1, 1); opacity: 1; }
  30% { transform: translate3d(0px, -5.95px, 0) scale(0.999, 1.002); opacity: 1; }
  30.67% { transform: translate3d(0px, -5.06px, 0) scale(0.997, 1.004); opacity: 1; }
  31.34% { transform: translate3d(0px, -4.21px, 0) scale(0.996, 1.006); opacity: 1; }
  32.01% { transform: translate3d(0px, -3.38px, 0) scale(0.995, 1.008); opacity: 1; }
  32.67% { transform: translate3d(0px, -2.6px, 0) scale(0.994, 1.009); opacity: 1; }
  33.33% { transform: translate3d(0px, -1.87px, 0) scale(0.993, 1.011); opacity: 1; }
  34.01% { transform: translate3d(0px, -1.17px, 0) scale(0.992, 1.012); opacity: 1; }
  34.67% { transform: translate3d(0px, -0.54px, 0) scale(0.992, 1.013); opacity: 1; }
  35.34% { transform: translate3d(0px, 0.06px, 0) scale(0.991, 1.014); opacity: 1; }
  36% { transform: translate3d(0px, 0.58px, 0) scale(0.991, 1.015); opacity: 1; }
  36.67% { transform: translate3d(0px, 1.05px, 0) scale(0.99, 1.015); opacity: 1; }
  37.34% { transform: translate3d(0px, 1.47px, 0) scale(0.99, 1.015); opacity: 1; }
  38% { transform: translate3d(0px, 1.83px, 0) scale(0.99, 1.015); opacity: 1; }
  38.68% { transform: translate3d(0px, 2.14px, 0) scale(0.991, 1.015); opacity: 1; }
  39.34% { transform: translate3d(0px, 2.39px, 0) scale(0.991, 1.014); opacity: 1; }
  40% { transform: translate3d(0px, 2.59px, 0) scale(0.991, 1.014); opacity: 1; }
  40.67% { transform: translate3d(0px, 2.75px, 0) scale(0.992, 1.013); opacity: 1; }
  41.34% { transform: translate3d(0px, 2.86px, 0) scale(0.992, 1.012); opacity: 1; }
  42.01% { transform: translate3d(0px, 2.92px, 0) scale(0.993, 1.011); opacity: 1; }
  42.67% { transform: translate3d(0px, 2.95px, 0) scale(0.993, 1.01); opacity: 1; }
  43.33% { transform: translate3d(0px, 2.94px, 0) scale(0.994, 1.009); opacity: 1; }
  44.01% { transform: translate3d(0px, 2.89px, 0) scale(0.995, 1.008); opacity: 1; }
  44.67% { transform: translate3d(0px, 2.82px, 0) scale(0.995, 1.008); opacity: 1; }
  45.34% { transform: translate3d(0px, 2.72px, 0) scale(0.996, 1.007); opacity: 1; }
  46% { transform: translate3d(0px, 2.6px, 0) scale(0.996, 1.006); opacity: 1; }
  46.67% { transform: translate3d(0px, 2.46px, 0) scale(0.997, 1.005); opacity: 1; }
  47.34% { transform: translate3d(0px, 2.31px, 0) scale(0.997, 1.004); opacity: 1; }
  48% { transform: translate3d(0px, 2.15px, 0) scale(0.998, 1.003); opacity: 1; }
  48.68% { transform: translate3d(0px, 1.97px, 0) scale(0.998, 1.002); opacity: 1; }
  49.34% { transform: translate3d(0px, 1.79px, 0) scale(0.999, 1.002); opacity: 1; }
  50% { transform: translate3d(0px, 1.61px, 0) scale(0.999, 1.001); opacity: 1; }
  50.67% { transform: translate3d(0px, 1.42px, 0) scale(1, 1); opacity: 1; }
  51.34% { transform: translate3d(0px, 1.24px, 0) scale(1, 1); opacity: 1; }
  52.01% { transform: translate3d(0px, 1.06px, 0) scale(1.001, 0.999); opacity: 1; }
  52.67% { transform: translate3d(0px, 0.88px, 0) scale(1.001, 0.999); opacity: 1; }
  53.33% { transform: translate3d(0px, 0.71px, 0) scale(1.001, 0.998); opacity: 1; }
  54.01% { transform: translate3d(0px, 0.55px, 0) scale(1.001, 0.998); opacity: 1; }
  54.67% { transform: translate3d(0px, 0.4px, 0) scale(1.002, 0.998); opacity: 1; }
  55.34% { transform: translate3d(0px, 0.25px, 0) scale(1.002, 0.997); opacity: 1; }
  56% { transform: translate3d(0px, 0.12px, 0) scale(1.002, 0.997); opacity: 1; }
  56.67% { transform: translate3d(0px, 0px, 0) scale(1.002, 0.997); opacity: 1; }
  57.34% { transform: translate3d(0px, -0.11px, 0) scale(1.002, 0.997); opacity: 1; }
  58% { transform: translate3d(0px, -0.21px, 0) scale(1.002, 0.997); opacity: 1; }
  58.68% { transform: translate3d(0px, -0.29px, 0) scale(1.002, 0.997); opacity: 1; }
  59.34% { transform: translate3d(0px, -0.37px, 0) scale(1.002, 0.997); opacity: 1; }
  60% { transform: translate3d(0px, -0.43px, 0) scale(1.002, 0.997); opacity: 1; }
  60.67% { transform: translate3d(0px, -0.49px, 0) scale(1.002, 0.997); opacity: 1; }
  61.34% { transform: translate3d(0px, -0.53px, 0) scale(1.002, 0.997); opacity: 1; }
  62.01% { transform: translate3d(0px, -0.56px, 0) scale(1.002, 0.997); opacity: 1; }
  62.67% { transform: translate3d(0px, -0.58px, 0) scale(1.002, 0.998); opacity: 1; }
  63.33% { transform: translate3d(0px, -0.6px, 0) scale(1.002, 0.998); opacity: 1; }
  64.01% { transform: translate3d(0px, -0.6px, 0) scale(1.001, 0.998); opacity: 1; }
  64.67% { transform: translate3d(0px, -0.6px, 0) scale(1.001, 0.998); opacity: 1; }
  65.34% { transform: translate3d(0px, -0.59px, 0) scale(1.001, 0.998); opacity: 1; }
  66% { transform: translate3d(0px, -0.58px, 0) scale(1.001, 0.998); opacity: 1; }
  66.67% { transform: translate3d(0px, -0.56px, 0) scale(1.001, 0.999); opacity: 1; }
  67.34% { transform: translate3d(0px, -0.54px, 0) scale(1.001, 0.999); opacity: 1; }
  68% { transform: translate3d(0px, -0.51px, 0) scale(1.001, 0.999); opacity: 1; }
  68.68% { transform: translate3d(0px, -0.48px, 0) scale(1.001, 0.999); opacity: 1; }
  69.34% { transform: translate3d(0px, -0.44px, 0) scale(1, 0.999); opacity: 1; }
  70% { transform: translate3d(0px, -0.41px, 0) scale(1, 0.999); opacity: 1; }
  70.67% { transform: translate3d(0px, -0.37px, 0) scale(1, 1); opacity: 1; }
  71.34% { transform: translate3d(0px, -0.33px, 0) scale(1, 1); opacity: 1; }
  72.01% { transform: translate3d(0px, -0.3px, 0) scale(1, 1); opacity: 1; }
  72.67% { transform: translate3d(0px, -0.26px, 0) scale(1, 1); opacity: 1; }
  73.33% { transform: translate3d(0px, -0.22px, 0) scale(1, 1); opacity: 1; }
  74.01% { transform: translate3d(0px, -0.18px, 0) scale(1, 1); opacity: 1; }
  74.67% { transform: translate3d(0px, -0.15px, 0) scale(1, 1); opacity: 1; }
  75.34% { transform: translate3d(0px, -0.12px, 0) scale(1, 1); opacity: 1; }
  76% { transform: translate3d(0px, -0.08px, 0) scale(1, 1); opacity: 1; }
  76.67% { transform: translate3d(0px, -0.06px, 0) scale(1, 1.001); opacity: 1; }
  77.34% { transform: translate3d(0px, -0.03px, 0) scale(1, 1.001); opacity: 1; }
  78% { transform: translate3d(0px, 0px, 0) scale(1, 1.001); opacity: 1; }
  78.68% { transform: translate3d(0px, 0.02px, 0) scale(1, 1.001); opacity: 1; }
  79.34% { transform: translate3d(0px, 0.04px, 0) scale(1, 1.001); opacity: 1; }
  80% { transform: translate3d(0px, 0.06px, 0) scale(1, 1.001); opacity: 1; }
  80.67% { transform: translate3d(0px, 0.07px, 0) scale(1, 1.001); opacity: 1; }
  81.34% { transform: translate3d(0px, 0.09px, 0) scale(1, 1.001); opacity: 1; }
  82.01% { transform: translate3d(0px, 0.1px, 0) scale(1, 1.001); opacity: 1; }
  82.67% { transform: translate3d(0px, 0.11px, 0) scale(1, 1.001); opacity: 1; }
  83.33% { transform: translate3d(0px, 0.11px, 0) scale(1, 1.001); opacity: 1; }
  84.01% { transform: translate3d(0px, 0.12px, 0) scale(1, 1.001); opacity: 1; }
  84.67% { transform: translate3d(0px, 0.12px, 0) scale(1, 1); opacity: 1; }
  85.34% { transform: translate3d(0px, 0.12px, 0) scale(1, 1); opacity: 1; }
  86% { transform: translate3d(0px, 0.12px, 0) scale(1, 1); opacity: 1; }
  86.67% { transform: translate3d(0px, 0.12px, 0) scale(1, 1); opacity: 1; }
  87.34% { transform: translate3d(0px, 0.12px, 0) scale(1, 1); opacity: 1; }
  88% { transform: translate3d(0px, 0.12px, 0) scale(1, 1); opacity: 1; }
  88.68% { transform: translate3d(0px, 0.11px, 0) scale(1, 1); opacity: 1; }
  89.34% { transform: translate3d(0px, 0.1px, 0) scale(1, 1); opacity: 1; }
  90% { transform: translate3d(0px, 0.1px, 0) scale(1, 1); opacity: 1; }
  90.67% { transform: translate3d(0px, 0.09px, 0) scale(1, 1); opacity: 1; }
  91.34% { transform: translate3d(0px, 0.08px, 0) scale(1, 1); opacity: 1; }
  92.01% { transform: translate3d(0px, 0.08px, 0) scale(1, 1); opacity: 1; }
  92.67% { transform: translate3d(0px, 0.07px, 0) scale(1, 1); opacity: 1; }
  93.33% { transform: translate3d(0px, 0.06px, 0) scale(1, 1); opacity: 1; }
  94.01% { transform: translate3d(0px, 0.05px, 0) scale(1, 1); opacity: 1; }
  94.67% { transform: translate3d(0px, 0.05px, 0) scale(1, 1); opacity: 1; }
  95.34% { transform: translate3d(0px, 0.04px, 0) scale(1, 1); opacity: 1; }
  96% { transform: translate3d(0px, 0.03px, 0) scale(1, 1); opacity: 1; }
  96.67% { transform: translate3d(0px, 0.02px, 0) scale(1, 1); opacity: 1; }
  97.34% { transform: translate3d(0px, 0.02px, 0) scale(1, 1); opacity: 1; }
  98% { transform: translate3d(0px, 0.01px, 0) scale(1, 1); opacity: 1; }
  98.68% { transform: translate3d(0px, 0.01px, 0) scale(1, 1); opacity: 1; }
  99.34% { transform: translate3d(0px, 0px, 0) scale(1, 1); opacity: 1; }
  100% { transform: translate3d(0px, 0px, 0) scale(1, 1); opacity: 1; }
}
/* wm-spring:end */
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }
.footer__legal { display: flex; gap: 2.5rem; }
.footer__small { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); opacity: 0.45; transition: opacity 0.2s; }
a.footer__small:hover { opacity: 1; }
@media (max-width: 64rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
/* Touch and legibility. 45% of the ink is a fine desktop whisper and about
   3.2:1 on a phone held at arm's length in daylight; 62% clears 4.5:1 and the
   rows become tappable without changing the type. */
@media (max-width: 64rem) {
  .footer__link { display: flex; align-items: center; min-height: 2.25rem; opacity: 0.62; }
  .footer__links { gap: 0.1rem; }
  .footer__small { opacity: 0.62; }
  .footer__legal .footer__small { display: inline-flex; align-items: center; min-height: 2.25rem; }
  /* below 16px iOS Safari zooms the page the moment the field takes focus */
  .footer__input { font-size: var(--fs-body); min-height: 3rem; }
  .footer__btn { min-height: 3rem; }
}
/* Four stacked columns is a 1200px scroll of nothing but links; two columns
   with the sign-up spanning keeps the footer to a screen. */
@media (max-width: 30rem) {
  .footer { padding: 3.5rem 0 2.5rem; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.25rem; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__divider { margin-bottom: 1.5rem; }
  .footer__btn { justify-self: stretch; }
  .footer__legal { gap: 1.5rem; }
  .footer__bottom { justify-content: center; text-align: center; margin-top: 2rem; }
  .footer__logo { margin-top: 2.5rem; }
}

/* ---------- scroll reveal: new.studio's blur-in (site.js splits and triggers) ----------
   opacity 0 + blur(10px) -> sharp, GSAP power2.out, no rise. Words 0.6s,
   blocks 0.8s (new.studio's 0.75s / 1s, 20% faster); --rv-d carries each one's stagger. Hidden only when scripts run
   and motion is allowed. The rest state is filter: none, not blur(0): any
   filter value makes a containing block for fixed descendants. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal:not(.rv-split), .rv-w, .rv-el {
    opacity: 0; filter: blur(10px);
    transition: opacity 0.8s var(--ease-reveal) var(--rv-d, 0s), filter 0.8s var(--ease-reveal) var(--rv-d, 0s);
  }
  .rv-w { display: inline-block; transition-duration: 0.6s; }
  .reveal.in-view:not(.rv-split), .in-view .rv-w, .in-view .rv-el { opacity: 1; filter: none; }
  /* blocks that already transition something of their own keep it */
  .card--link.reveal { transition: opacity 0.8s var(--ease-reveal) var(--rv-d, 0s), filter 0.8s var(--ease-reveal) var(--rv-d, 0s), transform 0.5s var(--ease-out), box-shadow 0.5s; }
  /* the numbers band plays as one quick sequence (user: "slow") */
  .structure .rv-w, .structure .reveal:not(.rv-split) { transition-duration: 0.45s; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .feat { position: relative; top: auto; }
  /* the footer lockup shows finished and composed, never entering. site.js does
     not arm it here either, and the !important covers a stale class besides */
  #wm-lockup .wm__part { animation: none !important; transform: none !important; opacity: 1 !important; }
}