/* ==========================================================================
   Opaya · shared styles (every page)
   Tokens, base, type, the link and button system, the header and menu, the
   product cards, the partner strip, the start-bubbles visual, the footer with
   its blurred wordmark, and the entrance-motion states. Page layers:
   home.css + hero.css (home), company.css (Company), legal.css (Privacy,
   Terms, Disclosures).
   Palette: forest, stone, sand, ink, mist, sage. Type: Italiana (display,
   uppercase), Fragment Mono (labels), Instrument Sans (body), Hedvig Letters
   Sans (the logo's face, footer wordmark). Corners: square everywhere, except
   page-level cards and media at 4px.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --white: #FFFFFF;
  --stone: #F6F5F3;      /* page ground */
  --sand: #E6E1DA;       /* UI dividers, quiet tiles */
  --ink: #0C0A08;
  --forest: #163B37;     /* stipple ground, start, wordmark */
  --forest-2: #1F4E49;   /* pixel glyphs, square bullets, line art */
  --forest-deep: #0F2A27;
  --mist: #CFE3DD;       /* stipple dots, labels on forest */
  --sage: #6FA88F;       /* logo second tone on light, agent dots */
  --mist-2: #8FB9A5;     /* logo second tone on forest */
  --grey-text: #6B6B6B;  /* small secondary text: 5:1 on stone */
  --line: rgba(12, 10, 8, .16);       /* Kvant hairlines on stone */
  --line-soft: rgba(12, 10, 8, .08);
  --line-dark: rgba(207, 227, 221, .22);

  --display: "Italiana", "Didot", "Bodoni 72", serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --brandface: "Hedvig Letters Sans", var(--sans);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r: 4px;                                  /* cards and media only */

  --max: 1220px;
  --gutter: 40px;
  --header: 76px;
  --section: 152px;
  --overlap: 72px;       /* how far the product cards sit over the hero's bottom edge */

  --lift: 0 0 0 1px rgba(12, 10, 8, .06), 0 1px 2px rgba(12, 10, 8, .05), 0 28px 48px -28px rgba(12, 10, 8, .38);
}
@media (max-width: 1099px) { :root { --gutter: 32px; --section: 128px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; --header: 64px; --section: 96px; --overlap: 64px; } }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto !important; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font: 500 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p, figure, blockquote, h1, h2, h3, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, li { text-wrap: pretty; }
[id] { scroll-margin-top: calc(var(--header) + 24px); }
section[id] { scroll-margin-top: var(--header); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--mist); }
[tabindex="-1"]:focus { outline: none; }
.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; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }

/* 3. Type ------------------------------------------------------------------ */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em; font-kerning: normal; }
.h2 { font-size: clamp(32px, calc(26.06px + 1.524vw), 48px); line-height: .958; text-wrap: balance; }
.h2--xl { font-size: clamp(40px, calc(18px + 3.9vw), 76px); line-height: .94; }
.lead-xl { font: 600 clamp(20px, calc(15.5px + .56vw), 24px)/1.32 var(--sans); letter-spacing: -0.02em; text-wrap: balance; }

/* Mono label: Fragment Mono, uppercase, +0.04em, preceded by a ■. */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  font: 400 12.5px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
}
.label::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--sq, var(--forest-2)); }
.label-row { display: flex; justify-content: center; }
.lead-bold { font: 600 20px/27px var(--sans); letter-spacing: -0.02em; text-wrap: balance; }

/* Links: no brackets anywhere. One system for header, body and footer:
   - .ulink: utility and footer links, mono uppercase;
   - .ulink--sq: a primary utility link, with a small sage square before it;
   - .ilink: an inline link in running text, Instrument Sans, with a faint resting rule.
   A 1px underline about 4px below the baseline draws in from the left on hover and
   on keyboard focus (scaleX, 220ms); focus also keeps the page's 2px ring. The nav
   links and the menu button share the same underline. */
.ulink {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font: 400 12.5px/18px var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: inherit; text-decoration: none;
}
.ulink--sq { --ul-l: 17px; }
.ulink--sq::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--sage); }
.ilink {
  position: relative; white-space: nowrap;
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1px) / 100% 1px no-repeat;
  background-image: linear-gradient(color-mix(in srgb, currentColor 38%, transparent), color-mix(in srgb, currentColor 38%, transparent));
  --ul-b: 1px;
}
:is(.ulink, .ilink, .nav-link, .menu-btn)::after {
  content: ""; position: absolute; left: var(--ul-l, 0); right: var(--ul-r, 0); bottom: var(--ul-b, -1px);
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 220ms var(--ease);
  pointer-events: none;
}
:is(.ulink, .ilink, .nav-link, .menu-btn):focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  :is(.ulink, .ilink, .nav-link, .menu-btn):hover::after { transform: scaleX(1); }
}

/* 4. Buttons ---------------------------------------------------------------- */
.mini-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 13px 0 11px;
  border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font: 600 14px/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.mini-btn::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; }
.mini-btn--light { background: var(--white); border-color: var(--white); color: var(--ink); }
.mini-btn--light::before { background: var(--forest-2); }
.mini-btn--ghost { background: transparent; border-color: rgba(246, 245, 243, .72); color: var(--stone); }
.mini-btn--ghost::before { background: var(--mist); }
.mini-btn--lg { height: 46px; padding: 0 20px 0 17px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .mini-btn:hover { background: var(--ink); color: var(--white); }
  .mini-btn--light:hover { background: var(--mist); border-color: var(--mist); color: var(--ink); }
  .mini-btn--ghost:hover { background: var(--stone); border-color: var(--stone); color: var(--ink); }
}

/* Ghost button: outline only, never filled. A 1px forest border, forest text
   in the button type and the small sage square; on hover and focus the border darkens and
   a 6% forest tint fades in. */
.gbtn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 13px 0 11px;
  border: 1px solid var(--forest); border-radius: 0;
  background-color: rgba(22, 59, 55, 0); color: var(--forest);
  font: 600 14px/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.gbtn::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--sage); }
.gbtn:focus-visible { border-color: var(--ink); background-color: rgba(22, 59, 55, .06); }
@media (hover: hover) and (pointer: fine) {
  .gbtn:hover { border-color: var(--ink); background-color: rgba(22, 59, 55, .06); }
}
@media (prefers-reduced-motion: reduce) { .gbtn { transition-duration: 1ms; } }

/* 5. Header and menu ----------------------------------------------------------- */
/* Two frosted states and a ramp, on the header's two pseudo layers. Over the hero the type
   is stone; as the page moves, a dark frosted backing (::before: forest at up to 84% plus a
   14px backdrop blur) fades in over the first 160px of scroll (--hdr-a, from one
   rAF-throttled scroll read), so the hero's copy never meets bare type. Once the hero's
   bottom passes the header (.is-scrolled, from an IntersectionObserver on .hero), the light
   frosted layer (::after: stone at 84% plus blur(20px) saturate(1.3)) cross-fades in over
   420ms on cubic-bezier(.4, 0, .2, 1), with the shadow and the button's ground. During the
   cross-fade the dark backing turns opaque underneath it (first 100ms), so the ground under
   the type runs evenly from forest to frosted stone whatever lies beneath (the hero or the
   white product cards); then it fades out and is hidden, so only one backdrop layer is ever
   live once the header has settled. Ink on the light state measures 12.5:1 or better over
   the darkest content (forest, the night time-lapse, black). Type can't cross-fade with
   its ground without frames where both are mid-tone, so the type, the logo and the
   button's text switch in one step at the moment their ground passes the point where light
   and dark type read equally (the header's type 4.3:1 either way; the button's text 3.3:1,
   forest and stone being both mid-range): going to stone, the header's type at 130ms and
   the button's at 160ms; coming back, 165ms and 135ms. Without backdrop-filter both layers
   are solid. Reduced motion: 120ms, and the backing is simply on once the page has moved. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header);
  color: var(--ink);
  --tone2: var(--sage);
  --hdr-bg: 420ms cubic-bezier(.4, 0, .2, 1);
  --hdr-fg: 0s linear 130ms;         /* the header's type, going to stone */
  --hdr-btn: 0s linear 160ms;        /* the button's text, going to stone (its ground goes dark) */
  box-shadow: 0 1px 0 transparent;
  transition: color var(--hdr-fg), box-shadow var(--hdr-bg);
}
.site-header::before, .site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* The dark backing: under the light layer while it fades in, then out and hidden. */
.site-header::before {
  background-color: rgb(22, 59, 55);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0; visibility: hidden;
  transition: background-color 100ms linear, opacity 160ms linear 420ms, visibility 0s linear 580ms;
}
/* The light frosted layer. */
.site-header::after {
  background-color: rgba(246, 245, 243, .84);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  opacity: 1; visibility: visible;
  transition: opacity var(--hdr-bg), visibility 0s;
}
.js .site-header:not(.is-scrolled) { color: var(--stone); --tone2: var(--mist-2); --hdr-fg: 0s linear 165ms; --hdr-btn: 0s linear 135ms; }
.js .site-header:not(.is-scrolled)::before {
  background-color: rgba(22, 59, 55, .84);
  opacity: var(--hdr-a, 0); visibility: visible;
  transition: background-color 160ms linear 420ms, opacity 0s, visibility 0s;
}
.js .site-header:not(.is-scrolled)::after { opacity: 0; visibility: hidden; transition: opacity var(--hdr-bg), visibility 0s linear 420ms; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line-soft); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::after { background-color: var(--stone); }
  .js .site-header:not(.is-scrolled)::before { background-color: rgba(22, 59, 55, .92); }
}
.js .site-header:not(.is-scrolled) :focus-visible { outline-color: var(--mist); }
.bar { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
.brand { grid-column: 2; display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.lockup { display: block; height: 36px; width: auto; }
.lockup .tone2 { fill: var(--tone2, var(--sage)); }
.site-header .lockup .tone2 { transition: fill var(--hdr-fg); }
.nav { grid-column: 1; justify-self: start; display: none; align-items: center; gap: 30px; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 0;
  font: 400 12.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: inherit; text-decoration: none;
  --ul-b: 6px;
}
.bar-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 22px; }
/* The header's one action: a compact solid button (forest on the stone header,
   stone over the hero). */
.hbtn {
  display: none; align-items: center; gap: 8px;
  height: 32px; padding: 0 13px 0 11px;
  background: var(--forest); color: var(--stone);
  font: 600 13.5px/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--hdr-bg, 200ms var(--ease)), color var(--hdr-btn, 200ms var(--ease));
}
.hbtn::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--sage); transition: background-color var(--hdr-btn, 200ms var(--ease)); }
.js .site-header:not(.is-scrolled) .hbtn { background: var(--stone); color: var(--forest); }
.js .site-header:not(.is-scrolled) .hbtn::before { background: var(--forest-2); }
@media (hover: hover) and (pointer: fine) {
  .hbtn:hover { background: var(--forest-2); }
  .js .site-header:not(.is-scrolled) .hbtn:hover { background: var(--white); }
}
.menu-btn {
  position: relative;
  display: none; align-items: center; gap: 9px;
  height: 34px; padding: 0;
  background: none; color: inherit;
  border: 0; border-radius: 0; cursor: pointer;
  font: 400 12.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  --ul-b: 9px; --ul-r: 23px;
}
.js .menu-btn { display: inline-flex; }
.menu-btn .bars { position: relative; width: 14px; height: 7px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 200ms var(--ease); }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { bottom: 0; }
.menu-btn--close .bars::before { transform: translateY(3px) rotate(45deg); }
.menu-btn--close .bars::after { transform: translateY(-3px) rotate(-45deg); }
@media (min-width: 360px) { .hbtn { display: inline-flex; } }
@media (min-width: 1024px) { .nav { display: flex; } }
@media (max-width: 1023px) {
  .bar { grid-template-columns: auto minmax(0, 1fr); }
  .brand { grid-column: 1; }
  .bar-actions { grid-column: 2; }
}

/* Full-screen overlay menu: a modal dialog with a focus trap (see script). */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--stone); color: var(--ink);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease), visibility 0s; }
.menu-bar { height: var(--header); --tone2: var(--sage); }
.menu-inner { transform: translate3d(0, 10px, 0); transition: transform 240ms var(--ease); }
.menu.is-open .menu-inner { transform: none; }
.menu-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 96px; padding-top: 56px; padding-bottom: 72px; }
.menu-products { margin-top: 22px; border-top: 1px solid var(--line); }
.menu-product {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.menu-product img { width: 64px; height: 64px; object-fit: cover; }
.mp-name { display: block; font-family: var(--display); font-size: clamp(30px, calc(22px + 1.4vw), 44px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; }
.mp-desc { display: block; margin-top: 10px; color: var(--grey-text); }
.menu-product:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .menu-product:hover .mp-name { color: var(--forest); } }
.menu-side { display: flex; flex-direction: column; align-items: flex-start; }
.menu-links { margin-top: 22px; }
.menu-links a { display: inline-block; padding: 7px 0; font-family: var(--display); font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .menu-links a:hover { color: var(--forest); } }

/* 6. Product cards (home, under the hero; Company) ------------------------------ */
.products { position: relative; z-index: 2; margin-top: calc(-1 * var(--overlap)); }
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; gap: 10px; }
.aud-card {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 24px;
  background: var(--white); border-radius: var(--r);
  color: var(--ink); text-decoration: none;
  box-shadow: inset 0 0 0 1px transparent, 0 24px 48px -32px rgba(12, 10, 8, .28);
  transition: box-shadow 160ms var(--ease);
}
.aud-swatch { width: 44px; height: 44px; object-fit: cover; }
.aud-name { margin-top: 20px; font: 600 20px/24px var(--sans); letter-spacing: -0.02em; }
.aud-for { margin-top: 4px; font: 500 16px/22px var(--sans); color: var(--grey-text); }
.aud-card .mini-btn { margin-top: 20px; }
.aud-card:focus-visible { outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .aud-card:hover { box-shadow: inset 0 0 0 1px var(--ink), 0 24px 48px -32px rgba(12, 10, 8, .28); }
  .aud-card:hover .mini-btn { background: var(--ink); color: var(--white); }
}

/* 7. Partner strip (home, Company): single-colour logos, optically sized -------- */
/* Each logo is a <symbol> drawn with currentColor, shown at its own height (from the
   asset notes) so the five carry equal visual weight, not equal width. One colour:
   forest-2 at about 70% on stone. Pauses on hover; static row under reduced motion. */
.partners { padding: 104px 0 0; }
.partners .label-row { margin-bottom: 26px; }
.partners .label::before { content: none; }   /* no square marker on this label */
/* No rules above or below. The logos dissolve at both ends: an opacity fade (a
   mask on the strip) under a stack of backdrop-blur layers at each edge, each masked to a
   band, so the blur ramps 1 -> 16px toward the edge (the footer's Planes recipe, turned on
   its side). Without backdrop-filter the fade alone remains. */
.pstrip { position: relative; --edge: clamp(96px, 17vw, 280px); }
.pmarq {
  display: flex; overflow: hidden;
  padding-block: 34px;
  color: rgba(31, 78, 73, .72);
  --fade: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .32) calc(var(--edge) * .28), #000 calc(var(--edge) * .92), #000 calc(100% - var(--edge) * .92), rgba(0, 0, 0, .32) calc(100% - var(--edge) * .28), transparent 100%);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}
.pblur { position: absolute; top: 0; bottom: 0; width: var(--edge); pointer-events: none; --to: to left; }
.pblur--l { left: 0; }
.pblur--r { right: 0; --to: to right; }
.pblur > i { position: absolute; inset: 0; }
.pblur > i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(var(--to), transparent 0%, #000 16%, #000 32%, transparent 48%); mask-image: linear-gradient(var(--to), transparent 0%, #000 16%, #000 32%, transparent 48%); }
.pblur > i:nth-child(2) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(var(--to), transparent 16%, #000 32%, #000 48%, transparent 64%); mask-image: linear-gradient(var(--to), transparent 16%, #000 32%, #000 48%, transparent 64%); }
.pblur > i:nth-child(3) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(var(--to), transparent 32%, #000 48%, #000 64%, transparent 80%); mask-image: linear-gradient(var(--to), transparent 32%, #000 48%, #000 64%, transparent 80%); }
.pblur > i:nth-child(4) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(var(--to), transparent 48%, #000 64%, #000 80%, transparent 96%); mask-image: linear-gradient(var(--to), transparent 48%, #000 64%, #000 80%, transparent 96%); }
.pblur > i:nth-child(5) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(var(--to), transparent 64%, #000 80%); mask-image: linear-gradient(var(--to), transparent 64%, #000 80%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pblur { display: none; }
}
.pmarq-track { flex: none; display: flex; align-items: center; animation: slide var(--pm-dur, 70s) linear infinite; }
.pmarq-track li { flex: none; display: flex; align-items: center; justify-content: center; height: 48px; padding-inline: clamp(36px, 4.4vw, 68px); }
.plogo { display: block; height: var(--h, 28px); width: auto; fill: currentColor; overflow: visible; }
.pmarq:hover .pmarq-track { animation-play-state: paused; }
@keyframes slide { to { transform: translate3d(-100%, 0, 0); } }

/* 8. The start-bubbles visual (home "Start with Opaya", Company opening) --------- */
/* First paint is a still of the opening frame (contain-fit, the canvas's own framing);
   the canvas fades in over it once it has drawn. */
.smark { position: absolute; inset: -6% -8% -6% -6%; }
.smark-still, .smark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.smark-still { object-fit: contain; }
.smark canvas { opacity: 0; transition: opacity 420ms var(--ease); }
.smark.is-live canvas { opacity: 1; }
.smark.is-live .smark-still { visibility: hidden; transition: visibility 0s linear 480ms; }

/* 9. Footer and the blurred wordmark ---------------------------------------------- */
.site-footer { padding-top: 104px; background: var(--white); overflow: hidden; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.foot-col ul { margin-top: 22px; display: grid; gap: 10px; justify-items: start; }
.foot-legal {
  position: relative;
  margin-top: 88px; padding-top: 28px; border-top: 1px solid transparent;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 40px; align-items: start;
}
/* The rule above the legal block is a pseudo-element over a transparent border (same
   place, same layout), so the entrance can draw it in from the left. */
.foot-legal::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-soft); transform-origin: 0 50%; pointer-events: none; }
.foot-brand { color: var(--forest); --tone2: var(--sage); }
.foot-brand .lockup { height: 40px; }
.foot-disclosure { font: 500 14px/22px var(--sans); color: var(--grey-text); max-width: 62em; }
.foot-disclosure + .foot-disclosure { margin-top: 10px; }
.foot-copy { font: 400 12.5px/18px var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

/* The giant wordmark in the logo's face, lowercase Hedvig Letters Sans. The letters
   are sharp at the top and dissolve downward: a gradient fill fades them, and a stack
   of backdrop-blur layers, each masked to a band, ramps the blur (Planes-style). */
.wordmark { position: relative; margin-top: 64px; height: var(--wm-h, 26vw); overflow: hidden; }
.wordmark-text {
  position: absolute; left: var(--gutter); top: 0;
  font-family: var(--brandface); font-weight: 400; font-size: 32vw; line-height: 1;
  letter-spacing: -0.02em; white-space: nowrap;
  color: var(--forest);
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest) 38%, rgba(22, 59, 55, .62) 66%, rgba(22, 59, 55, .14) 92%, rgba(22, 59, 55, 0) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transform-origin: 0 0;
}
.wordmark-blur { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; pointer-events: none; }
.wordmark-blur > i { position: absolute; inset: 0; }
.wordmark-blur > i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 28%, transparent 42%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 28%, transparent 42%); }
.wordmark-blur > i:nth-child(2) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent 14%, #000 28%, #000 42%, transparent 56%); mask-image: linear-gradient(to bottom, transparent 14%, #000 28%, #000 42%, transparent 56%); }
.wordmark-blur > i:nth-child(3) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 42%, #000 56%, transparent 70%); mask-image: linear-gradient(to bottom, transparent 28%, #000 42%, #000 56%, transparent 70%); }
.wordmark-blur > i:nth-child(4) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, transparent 42%, #000 56%, #000 70%, transparent 84%); mask-image: linear-gradient(to bottom, transparent 42%, #000 56%, #000 70%, transparent 84%); }
.wordmark-blur > i:nth-child(5) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom, transparent 56%, #000 70%, #000 84%, transparent 98%); mask-image: linear-gradient(to bottom, transparent 56%, #000 70%, #000 84%, transparent 98%); }
.wordmark-blur > i:nth-child(6) { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); -webkit-mask-image: linear-gradient(to bottom, transparent 70%, #000 86%); mask-image: linear-gradient(to bottom, transparent 70%, #000 86%); }
/* A last veil of the page ground, so the base of the letters melts into it. */
.wordmark-blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .55) 84%, var(--white) 100%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wordmark-blur > i { display: none; }
}

/* 10. Entrance motion -------------------------------------------------------------- */
/* One system: initReveal() reveals each [data-rv] element once, when about 15% of it is on
   screen, with Web Animations (fill: backwards; nothing persists once they end). These
   rules are only the first-paint hidden states, the same as each animation's first
   keyframe, and apply only under .enter-ready (JS on, motion allowed; the head script
   drops it after 4s if the page script never runs). Tokens: ease cubic-bezier(.2,.7,.1,1);
   1100ms media, 900ms headings, 700ms small items; 80ms stagger (60ms letters); rise 28px
   (16px on phones). Transform, opacity, clip-path and filter only. */
:root { --rise: 28px; }
@media (max-width: 767px) { :root { --rise: 16px; } }
.enter-ready [data-rv]:not(.is-in) { opacity: 0; }
.enter-ready :is([data-rv="card"], [data-rv="item"], [data-rv="row"], [data-rv="text"]):not(.is-in) { transform: translate3d(0, var(--rise), 0); }
.enter-ready [data-rv="label"]:not(.is-in) { transform: translate3d(0, 10px, 0); }
.enter-ready [data-rv="gcard"]:not(.is-in) { transform: translate3d(0, var(--rise), 0) scale(.965); }
.enter-ready :is([data-rv="stage"], [data-rv="visual"]):not(.is-in) { transform: scale(.97); }
.enter-ready [data-rv="media"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 100% 0); }
.enter-ready [data-rv="media"]:not(.is-in) > :is(img, video) { transform: scale(1.08); }
.enter-ready [data-rv-child]:not(.is-in) { opacity: 0; transform: translate3d(24px, 0, 0); }
/* containers whose parts enter one by one */
.enter-ready :is([data-rv="tabs"], [data-rv="logos"], [data-rv="stack"], [data-rv="legal"], [data-rv="wordmark"]):not(.is-in) { opacity: 1; }
.enter-ready [data-rv="tabs"]:not(.is-in) .wtab, .enter-ready [data-rv="legal"]:not(.is-in) > * { opacity: 0; transform: translate3d(0, var(--rise), 0); }
.enter-ready [data-rv="logos"]:not(.is-in) li { opacity: 0; filter: blur(6px); }
.enter-ready [data-rv="stack"]:not(.is-in) .how-layer { opacity: 0; translate: 0 -40px; }
.enter-ready [data-rv="stack"]:not(.is-in) .how-callouts > g { opacity: 0; }
.enter-ready [data-rv="wordmark"]:not(.is-in) .wordmark-text { opacity: 0; }
/* hairlines, drawn in from the left */
.enter-ready :is([data-rv="tabs"]:not(.is-in)::before, [data-rv="tabs"]:not(.is-in) .wtab::after, [data-rv="row"]:not(.is-in)::after, [data-rv="legal"]:not(.is-in)::before, [data-rv-line]:not(.rv-drawn)::before) { transform: scaleX(0); }
/* Heading lines while they rise: the mask is widened above and to the sides (clip-path,
   no layout change), so tall glyphs aren't cut; the split is reverted when they land. */
.rv-l-mask { overflow: visible !important; clip-path: inset(-.2em -.3em 0 -.3em); }
/* The footer wordmark's letters, during their entrance only: an overlay at the measured
   glyph positions (kerning kept), each with the wordmark's own gradient. */
.wordmark-text.is-lettering { background: none; }
.wm-letters { position: absolute; inset: 0; pointer-events: none; }
.wm-l {
  position: absolute; top: 0; display: block; line-height: 1; white-space: pre; letter-spacing: 0;
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest) 38%, rgba(22, 59, 55, .62) 66%, rgba(22, 59, 55, .14) 92%, rgba(22, 59, 55, 0) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rv-lab { display: inline; }
.rv-w { display: inline-block; white-space: nowrap; }
.rv-c { display: inline-block; white-space: pre; }

/* Page titles (legal pages, Company, 404): the line rises once inside a mask at first paint.
   CSS only, so a headline never waits for a script and is never held back. */
.rise-title { overflow: clip; overflow-clip-margin: .2em; }
.rise-line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .rise-line { animation: title-rise 900ms cubic-bezier(.2, .7, .1, 1) both; }
}
@keyframes title-rise { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }

/* Unfilled content tokens (tools/build.mjs): a discreet highlighted placeholder. */
.token { padding: 0 .14em; border-radius: 2px; background: rgba(166, 105, 42, .14); box-shadow: inset 0 -1px 0 rgba(166, 105, 42, .45); color: inherit; font-style: normal; white-space: normal; }
.on-dark .token { background: rgba(235, 207, 168, .16); box-shadow: inset 0 -1px 0 rgba(235, 207, 168, .5); }

/* 11. Responsive ----------------------------------------------------------------- */
@media (max-width: 1023px) {
  .menu-body { grid-template-columns: 1fr; gap: 48px; padding-top: 32px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
  .foot-legal { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 899px) {
  .audience { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aud-card { padding: 28px 16px; }
}
@media (max-width: 767px) {
  .h2 { line-height: 1; }
  .h2--xl { line-height: .98; }
  .audience { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .aud-card {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center;
    padding: 18px; text-align: left;
  }
  .aud-swatch { grid-row: 1 / 3; }
  .aud-name { margin-top: 0; font-size: 18px; line-height: 22px; }
  .aud-for { margin-top: 0; }
  .aud-card .mini-btn { grid-column: 2; justify-self: start; margin-top: 14px; }
  .partners { padding-top: 80px; }
  .partners .label-row { margin-bottom: 18px; }
  .pmarq { padding-block: 24px; --pm-dur: 84s; }
  .pstrip { --edge: clamp(64px, 20vw, 96px); }
  .pmarq-track li { height: 36px; padding-inline: 28px; }
  .plogo { height: calc(var(--h, 28px) * .74); }
  .site-footer { padding-top: 72px; }
  .foot-legal { margin-top: 56px; }
  .wordmark { margin-top: 44px; }
  .menu-product { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 20px 0; }
  .menu-product img { width: 52px; height: 52px; }
  .menu-links a { font-size: 28px; }
  .lockup { height: 30px; }
  .bar-actions { gap: 16px; }
  .hbtn { height: 30px; padding: 0 11px 0 10px; font-size: 13px; }
}
@media (max-width: 479px) {
  .foot-col .ulink { font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; }
}

/* 12. Reduced motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pmarq-track { animation: none; }
  .pmarq-track[aria-hidden="true"], .pmarq-track [aria-hidden="true"] { display: none; }
  .pmarq { -webkit-mask-image: none; mask-image: none; justify-content: center; }
  .pblur { display: none; }
  .pmarq-track { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 18px; padding-inline: var(--gutter); }
  .menu, .menu-inner { transition-duration: 1ms; }
  .site-header, .js .site-header:not(.is-scrolled) { --hdr-bg: 120ms linear; --hdr-fg: 0s linear 60ms; --hdr-btn: 0s linear 60ms; }
  .site-header::before, .js .site-header:not(.is-scrolled)::before { transition: visibility 0s linear 120ms; }
  :is(.ulink, .ilink, .nav-link, .menu-btn)::after { transition-duration: 1ms; }
}