/* ==========================================================================
   KINEPIK site: the calm look.
   The same tokens and recipes as the Kinepik app (design rule book, docs/DESIGN.md in the
   client-app repo): one family (DM Sans, self-hosted), light only, flat cards, one filled
   button per screen, shadow only on what floats, thin-line pictograms, quiet motion.
   Shared by index.html, privacy.html and cookies.html.
   ========================================================================== */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/dm-sans-latin-opsz-variable.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --bg: #FBFAF7;               /* the page: warm white, never cream */
  --surface: #F4F2ED;          /* a section sheet, quiet tag grounds */
  --raised: #FFFFFF;           /* cards and inputs */
  --hairline: #E7E4DD;         /* list dividers, a white card on a light page */
  --line: #DCD8D0;             /* outlined controls at rest */
  --ink: #141B2B;              /* everything that must be read, and the one filled button */
  --support: #535B6B;          /* second-level sentences, eyebrows */
  --faint: #676C78;            /* times and metadata only */
  --accent-display: #4F8890;   /* petrol, display tone: headline emphasis, 24 px and up only */
  --brand-text: #2A5F68;       /* petrol, text tone: links, focus ring */
  --brand-soft: #E3EEEF;
  --accent-sky: #D9E8EA;

  /* the mist: used by the hero and the contact sheet only */
  --cover-top: #C5DADE;
  --cover-mid: #E1EBEA;
  --cover-bottom: #E8EFEE;
  --cover-light: rgba(255, 255, 255, .7);

  /* frost: one card per screen, only over the mist */
  --frost-bg: rgba(255, 255, 255, .62);
  --frost-border: rgba(255, 255, 255, .7);
  --frost-blur: 1.25rem;

  /* floating bars */
  --bar-bg: rgba(255, 255, 255, .86);
  --bar-border: rgba(255, 255, 255, .7);
  --float-shadow: 0 0.5rem 1.5rem rgba(20, 27, 43, .06), 0 1px 0.125rem rgba(20, 27, 43, .04);

  --ink-hover: #2A3348;
  --ink-active: #0B101C;

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 200ms;
  --dur: 260ms;

  --gutter: 1.5rem;
  --col: min(100% - 2 * var(--gutter), max(77.375rem, 86vw));   /* content width: about 86 percent of the window on wide screens */
  --sr: 1.75rem;               /* sheet top corners: 28 px on the phone, 40 px on the laptop */
  --pad: 4.5rem;               /* inner padding of a sheet, top and bottom */
}
@media (min-width: 900px) {
  :root { --sr: 2.5rem; --pad: 7rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 3rem; }   /* in-page links and keyboard focus stop below the floating bar */
/* big screens: from 1440 px the whole page grows with the window, held back by its height so the hero still fits */
@media (min-width: 1440px) {
  html { font-size: min(40px, max(16px, min(1.1111vw, 1.7778vh))); }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
svg { display: block; }
::selection { background: var(--brand-soft); color: var(--ink); }

/* one focus ring everywhere: 2 px petrol text tone */
:focus-visible { outline: 0.125rem solid var(--brand-text); outline-offset: 0.1875rem; }
main:focus { outline: none; }

/* pictograms: thin line, stroke 1.5, 20 to 24 px, never filled */
.ico {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm { width: 1.25rem; height: 1.25rem; }

/* ---------- Type ---------- */
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
h1 { font-size: 2.125rem; line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.005em; }
.tone { color: var(--accent-display); font-weight: inherit; font-style: normal; }   /* emphasis is a second colour, never weight */
.support { font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--support); }
.eyebrow {
  font-size: 0.75rem; font-weight: 600; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase; color: var(--support);
}
@media (min-width: 900px) {
  h1 { font-size: 3rem; line-height: 1.12; }
  h2 { font-size: 2rem; }
  .support { font-size: 1.0625rem; }
  .eyebrow { font-size: 0.8125rem; }
}

/* ---------- Layout ---------- */
.wrap { width: var(--col); margin-inline: auto; }
@media (min-width: 900px) {
  :root { --gutter: 2rem; }
}

/* the way past the bar, for keyboards */
.skip {
  position: fixed; left: 1rem; top: -7.5rem; z-index: 100;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 0.9375rem; font-weight: 500;
}
.skip:focus { top: 1rem; }

/* ---------- Floating top bar: a frosted pill ---------- */
.bar {
  position: fixed; top: 1rem; left: 1rem; right: 1rem; z-index: 50;
  width: auto; max-width: calc(max(77.375rem, 86vw) + 5rem); height: 4rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 0.75rem 0 1.5rem;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--bar-border); border-radius: 999px;
  box-shadow: var(--float-shadow);
}
.bar__brand { display: inline-flex; align-items: center; min-height: 2.75rem; padding-right: 0.75rem; color: var(--ink); }
.wordmark { height: 0.875rem; width: auto; aspect-ratio: 3812.2 / 700; color: var(--ink); }
.bar__nav { display: none; }
.bar__link {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500; color: var(--support);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.bar__link:hover { background: var(--surface); color: var(--ink); }
@media (min-width: 900px) {
  .bar { padding: 0 0.75rem 0 2.5rem; gap: 1.5rem; }   /* the wordmark lines up with the 1120 px column */
  .bar__nav { display: flex; flex: 1; justify-content: center; align-items: center; gap: 0.25rem; }
  .bar__link { white-space: nowrap; }
}
/* narrow laptops and tablets: the four links, the switcher and the pill share the bar */
@media (min-width: 900px) and (max-width: 1199px) {
  .bar { padding-left: 1.75rem; gap: 1rem; }
  .bar__nav { gap: 0; }
  .bar__link { padding: 0 0.625rem; font-size: 0.875rem; }
}

/* ---------- Buttons: ink pill, outlined secondary, nothing scales ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3.25rem; padding: 0 1.75rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font-size: 1rem; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--surface); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn--primary:active { background: var(--ink-active); border-color: var(--ink-active); }
.btn:disabled { cursor: default; opacity: .75; pointer-events: none; }

/* the small outlined pill in the bar */
.pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 1.125rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font-size: 0.9375rem; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pill::after { content: ""; position: absolute; inset: -0.125rem; }   /* a 44 px tap area, no visible change */
.pill:hover { background: var(--surface); }

/* ---------- The language switcher: always in the bar, on every page ---------- */
.lang { position: relative; margin-left: auto; flex: none; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 2.5rem; padding: 0 0.75rem;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1; letter-spacing: .04em; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lang__btn .ico { width: 1.125rem; height: 1.125rem; color: var(--support); }
.lang__btn:hover, .lang__btn[aria-expanded="true"] { background: var(--surface); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 0.875rem); z-index: 60; min-width: 11rem; margin: 0; padding: 0.375rem; list-style: none;
  background: rgba(255, 255, 255, .985);   /* nearly solid: a blur cannot work inside the frosted bar, and the words below must not show through */
  border: 1px solid var(--hairline); border-radius: 1.125rem; box-shadow: var(--float-shadow);
}
.lang__menu[hidden] { display: none; }
.lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0 0.875rem; border-radius: 0.75rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink); transition: background var(--dur-fast) var(--ease);
}
.lang__menu a:hover { background: var(--surface); }
.lang__menu a[aria-current="true"] { color: var(--brand-text); }
.lang__menu a[aria-current="true"]::after { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--brand-text); }
/* small phones: the wordmark, the switcher and the pill share 288 px */
@media (max-width: 399px) {
  .bar { gap: 0.5rem; padding-left: 1.25rem; }
  .bar__brand { padding-right: 0.25rem; }
  .lang__btn { padding: 0 0.5rem; }
  .pill { padding: 0 0.875rem; }
  .pill--back .pill__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the arrow alone, the words for screen readers */
  .pill--back { padding: 0 0.75rem; }
}

/* ---------- The mist, the frost, the sheets ---------- */
.mist {
  --lift: 0px;   /* the gradient box starts this far above the sheet: the darkest top tone hides behind the bar, text stays on the lighter tones */
  position: relative; isolation: isolate;
  background:
    radial-gradient(circle at 78% 15%, var(--cover-light) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--cover-top) 0%, var(--cover-mid) 55%, var(--cover-bottom) 100%);
  background-size: 100% 100%, 100% calc(100% + var(--lift));
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}
/* a very quiet grain so it feels photographic */
.mist::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 15rem 15rem;
}
.frost {
  background: var(--frost-bg);
  -webkit-backdrop-filter: blur(var(--frost-blur)); backdrop-filter: blur(var(--frost-blur));
  border: 1px solid var(--frost-border); border-radius: 1.125rem;
}

/* tags: a pill in small caps, always a word */
.tag {
  display: inline-flex; align-items: center; padding: 0.375rem 0.625rem; border-radius: 999px;
  background: var(--surface); color: var(--support);
  font-size: 0.6875rem; font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
/* the "AI" circle: the anchor for the AI assistant */
.ai-circle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.5rem; height: 1.5rem; border: 0.0938rem solid currentColor; border-radius: 50%;
  font-size: 0.625rem; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--ink);
}

/* ---------- Hero: a mist sheet, the story, and the build stage ---------- */
.hero {
  --lift: 10rem;
  /* equal padding above and below (the next sheet covers the radius); the main block then clears the floating bar
     (1 + 4 rem) by another 3rem. min-height only, never a fixed height */
  padding: 3rem 0 calc(3rem + var(--sr));
  overflow: clip;
  background:
    linear-gradient(180deg, var(--cover-top) 0%, var(--cover-mid) 55%, var(--cover-bottom) 100%);
  background-size: 100% calc(100% + var(--lift));
  background-position: 0 100%;
  background-repeat: no-repeat;
}
/* the mist breathes: its soft white light drifts slowly (transform only, paused when off screen) */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -12%; top: -18%; width: 78%; height: 100%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .32) 55%, rgba(255, 255, 255, 0) 100%);
  animation: breathe 24s ease-in-out infinite alternate;
}
.hero.is-off::after { animation-play-state: paused; }
@keyframes breathe {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-9%, 7%, 0); }
}

/* one block (eyebrow, headline, support, buttons, with the stage beside it), then the tick row at the bottom */
.hero__inner { display: flex; flex-direction: column; }
.hero__main { padding: 5rem 0 2.5rem; }
.hero__grid { display: grid; gap: 2.5rem; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero__copy .eyebrow { margin-bottom: 0.75rem; }
.hero__copy .support { margin-top: 1.25rem; max-width: 34em; }
.hero__actions { display: flex; flex-direction: column; align-self: stretch; gap: 0.75rem; margin-top: 1.75rem; }

/* the tick row: four reassurances at the bottom of the hero. Not links, no hover. */
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(20, 27, 43, .1); }
.tick { display: flex; align-items: flex-start; gap: 0.75rem; }
.tick .ico { width: 1.5rem; height: 1.5rem; color: var(--brand-text); stroke-width: 1.25; }
.tick .tick__check { stroke-width: 1.75; }
.tick p { margin: 0; }
.tick__a { display: block; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.tick__b { display: block; margin-top: 0.125rem; font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--support); }

/* the headline: "We build" in ink, a cycling phrase on its own line in the petrol display tone */
.hero__h1 { font-size: 2.75rem; line-height: 1.06; letter-spacing: -.02em; text-wrap: wrap; }
.h1v { display: block; }
.h1v__a { display: block; }
/* every phrase sits in the same grid cell, so the cell is always as tall as the tallest one at this width */
.ph { display: grid; }
.ph__i {
  grid-area: 1 / 1; display: block; text-wrap: balance;
  opacity: 0; transform: translate3d(0, 0.4rem, 0); filter: blur(6px);
  transition: opacity 550ms var(--ease), transform 550ms var(--ease), filter 550ms var(--ease);
}
.ph__i.is-on { opacity: 1; transform: none; filter: blur(0); }
.ph__i.is-out {
  opacity: 0; transform: translate3d(0, -0.4rem, 0); filter: blur(6px);
  transition-duration: 350ms;
}
/* the visually hidden full sentence */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* still: no script, or reduced motion. The last phrase alone, "We build anything you need". */
html:not(.js) .ph__i:not(:last-child), html.rm .ph__i:not(:last-child) { display: none; }
html:not(.js) .ph__i:last-child, html.rm .ph__i:last-child { opacity: 1; transform: none; filter: none; }

/* the build stage: the one frosted panel, a faint dot grid, a drawing that builds itself */
.stage {
  --sw0: 1.75;   /* stroke width in drawing units, tuned per size so it renders near 1.5 px */
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 3; border-radius: 1.75rem;
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(20, 27, 43, .07) 0, rgba(20, 27, 43, .07) 1.2px, transparent 1.7px);
  background-size: 1.375rem 1.375rem; background-position: center;
}
.d {
  --sw: var(--sw0);
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; visibility: hidden;
}
#d5 { --sw: calc(var(--sw0) / 1.04); }   /* the phone is drawn 1.04 times larger inside its group */
#d4 .big { --sw: calc(var(--sw0) / 1.32); }   /* the document workflow is drawn 1.32 times larger */
.d.is-on { opacity: 1; visibility: visible; transition: opacity 200ms linear; }
.d.is-out { opacity: 0; visibility: visible; filter: blur(6px); transition: opacity 400ms ease, filter 400ms ease; }
.d.rs, .d.rs * { transition: none !important; }

/* strokes draw in (pathLength 1: the dash math is simple), delays are 80 ms per step (--k), --b offsets a group */
.d .s {
  fill: none; stroke: var(--ink); stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0;
}
.d .fr { --dd: 1000ms; }
.d .hl { stroke: #D3D8DE; stroke-width: calc(var(--sw) * .8); }
.d .bar { stroke: #C5CBD4; stroke-width: calc(var(--sw) * 2.3); }
.d .bar2 { stroke: #C5CBD4; stroke-width: calc(var(--sw) * 1.5); }
.d .dk { stroke: #7C8596; stroke-width: calc(var(--sw) * 2.3); }
.d .pt { stroke: var(--brand-text); }
.d .w { stroke: #fff; stroke-width: calc(var(--sw) * 1.7); }
.d .w.th { stroke-width: var(--sw); }
.d .tk { stroke-width: calc(var(--sw) * 1.4); }
.d.is-on .s {
  stroke-dashoffset: 0; opacity: 1;
  transition:
    stroke-dashoffset var(--dd, 700ms) var(--ease) calc(var(--b, 0ms) + var(--k, 0) * 80ms),
    opacity 120ms linear calc(var(--b, 0ms) + var(--k, 0) * 80ms);
}
/* white and tinted fills: a twin shape that fades in once its outline is under way */
.d .fl, .d .fo { fill: #fff; stroke: none; opacity: 0; }
.d .fl.t, .d .fo.t { fill: var(--brand-soft); }
.d .fl.p, .d .fo.p { fill: var(--brand-text); }
.d .fl.i, .d .fo.i { fill: var(--ink); }
.d.is-on .fl { opacity: 1; transition: opacity 450ms var(--ease) calc(var(--b, 0ms) + var(--k, 0) * 80ms + 260ms); }
.d.is-on .fo { opacity: 1; transition: opacity 450ms var(--ease) calc(var(--b, 0ms) + var(--k, 0) * 80ms); }
.d .dots circle { opacity: .25; }
.d.is-on .dots circle { animation: tdot 1.3s ease-in-out infinite; }
.d.is-on .dots circle:nth-child(2) { animation-delay: .18s; }
.d.is-on .dots circle:nth-child(3) { animation-delay: .36s; }
@keyframes tdot { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
/* the stage never animates while it is off screen */
.stage.is-off .d.is-on .dots circle { animation-play-state: paused; }

/* still: beat 7 only, fully drawn */
html:not(.js) .d:not(#d7), html.rm .d:not(#d7) { display: none; }
html:not(.js) #d7, html.rm #d7 { opacity: 1; visibility: visible; }
html:not(.js) #d7 .s, html.rm #d7 .s { stroke-dashoffset: 0; opacity: 1; }
html:not(.js) #d7 .fl, html:not(.js) #d7 .fo, html.rm #d7 .fl, html.rm #d7 .fo { opacity: 1; }
html:not(.js) #d7 .dots circle, html.rm #d7 .dots circle { opacity: .7; animation: none; }

/* small phones: the whole first message (eyebrow to the Europe line) fits the first screen. Gaps and the
   support text tighten; the copy never changes. */
@media (max-width: 399px) {
  .hero__copy .eyebrow { margin-bottom: 0.5rem; }
  .hero__h1 { font-size: 2.5rem; }
  .hero__copy .support { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.45; }
  .hero__actions { margin-top: 1.25rem; gap: 0.5rem; }
  .hero__actions .btn { min-height: 3rem; }
}
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; align-self: auto; flex-wrap: wrap; }
  .hero__h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); }
  .stage { --sw0: 1.17; max-width: 32rem; }
}
@media (min-width: 900px) {
  /* the hero fills the first screen (up to 60rem): the block sits centred between the bar and the tick row */
  .hero { min-height: calc(min(100svh, 60rem) + var(--sr)); }
  .hero__inner { min-height: calc(min(100svh, 60rem) - 6rem); }
  .hero__main { flex: 1; display: flex; align-items: center; padding: 5rem 0 3rem; }
  .hero__grid { width: 100%; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
  /* every phrase on one line: the headline is sized to its column (the longest phrase is 9.95 times the font size wide) */
  .hero__copy { container-type: inline-size; }
  .hero__h1 { font-size: min(calc(100cqi / var(--ph-w, 10.42)), 5rem); }   /* --ph-w: the longest phrase in em, set by the language build when longer than English */
  .ph__i { white-space: nowrap; text-wrap: nowrap; }
  .ticks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .tick__a { font-size: 1rem; }
  .tick__b { font-size: 0.9375rem; }
  .hero__copy .support { font-size: 1.1875rem; }
  .stage { --sw0: 1.12; max-width: none; justify-self: end; }
}

/* ---------- Sheets: one section, one full-width sheet, one colour ----------
   Every sheet has rounded top corners and overlaps the sheet above by its radius, so the corners
   show the colour above. The padding underneath is the padding on top plus that radius (the next
   sheet covers it), so the visible space above and below the content is equal. */
.sheet {
  position: relative; z-index: 1;
  margin-top: calc(var(--sr) * -1);
  padding: var(--pad) 0 calc(var(--pad) + var(--sr));
  border-radius: var(--sr) var(--sr) 0 0;
}
.sheet--bg { background: var(--bg); }
.sheet--surface { background: var(--surface); }
.sheet--tint { background: var(--brand-soft); }
.sheet--ink {
  background: var(--ink); color: #FBFAF7;
  --on-ink: #FBFAF7; --on-ink-support: #B3B8C4; --on-ink-tone: #6FA8B0; --on-ink-line: rgba(255, 255, 255, .12);
}
.sheet--ink .eyebrow, .sheet--ink .support { color: var(--on-ink-support); }
.sheet--ink .tone { color: var(--on-ink-tone); }
.sheet--ink :focus-visible { outline-color: #9CCBD2; }
.sheet h2 { font-size: 1.875rem; line-height: 1.12; letter-spacing: -.015em; }
.sheet--ink h2 { color: var(--on-ink); }
.contact { padding-bottom: var(--pad); }   /* nothing covers the last sheet */
@media (min-width: 900px) {
  .sheet h2 { font-size: 3rem; }
}

/* ---------- Section headers ---------- */
/* one left-aligned column at every width: eyebrow, headline, then the support line right under it */
.head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.head__main { display: flex; flex-direction: column; gap: 0.75rem; max-width: 46rem; }
.head .support { max-width: 40em; }
@media (min-width: 900px) {
  .head { gap: 1.5rem; }
}

/* ---------- What we build: a marquee and four cards ---------- */
.marquee {
  display: grid; gap: 0.75rem; margin-top: 3rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.marquee__row { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: mq 60s linear infinite; }
.marquee__row--rev .marquee__track { animation-direction: reverse; }
.marquee__half { display: flex; flex: none; gap: 0.75rem; padding-right: 0.75rem; }
@keyframes mq { to { transform: translate3d(-25%, 0, 0); } }
.marquee.is-off .marquee__track { animation-play-state: paused; }   /* only off screen: it never stops for the pointer */
.marquee__row { pointer-events: none; cursor: default; }
.mpill {
  display: inline-flex; align-items: center; gap: 0.625rem; height: 3rem; padding: 0 1.25rem 0 1rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink);
  font-size: 0.9375rem; font-weight: 500; line-height: 1; white-space: nowrap;
}
.mpill .ico { width: 1.25rem; height: 1.25rem; }
/* still: one static wrapped list, no duplicates */
html.rm .marquee { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; -webkit-mask-image: none; mask-image: none; padding: 0 var(--gutter); }
html.rm .marquee__row, html.rm .marquee__track, html.rm .marquee__half { display: contents; animation: none; }
html.rm .marquee__half[aria-hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; -webkit-mask-image: none; mask-image: none; padding: 0 var(--gutter); }
  .marquee__row, .marquee__track, .marquee__half { display: contents; animation: none; }
  .marquee__half[aria-hidden] { display: none; }
}

.cards { display: grid; gap: 1rem; margin-top: 3rem; }
.card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem; border-radius: 1.25rem; background: var(--raised); }
.card .ico { width: 1.75rem; height: 1.75rem; color: var(--ink); }
.card__title { margin-top: 2.5rem; font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--ink); }
.card__text { margin-top: 0.5rem; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--support); }
/* under the cards: one line and a link */
.more { margin-top: 2.5rem; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--support); }
.more__link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--brand-text); white-space: nowrap; }
.more__link .ico { width: 1.25rem; height: 1.25rem; color: currentColor; transition: transform 240ms var(--ease); }
.more__link:hover .ico { transform: translateX(0.2rem); }
@media (min-width: 640px) { .more { text-align: center; } }
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}

/* ---------- How we work: four steps hanging from one thin line ----------
   Laptop: the line runs from the left edge of card 1 to the right edge of card 4. It draws left to right in 2 s,
   linear, so it reaches each dot (the centre of each card) at a known time (--t on each step): the dot appears
   and its card is lowered into place under it. Then a petrol dot travels the line, rests at the end, fades and starts again.
   Phone: the line runs down the left from the top of card 1 to the bottom of card 4, drawn piece by piece as each
   step scrolls in. Only transform, opacity and filter animate. */
.steps {
  --gap: 1rem; --o: 150ms;
  position: relative; display: grid; gap: var(--gap); margin-top: 3rem; padding-left: 2.25rem;
}
.steps__line, .steps__rail { position: absolute; left: 0.375rem; top: 0; bottom: 0; width: 0; }
.steps__line { width: 1px; background: var(--line); }
.steps__fill { position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: top; }
.steps__dot { position: absolute; left: -0.375rem; top: 0; width: 0.75rem; height: 100%; opacity: 0; }
.steps__dot::after {
  content: ""; position: absolute; left: 0; bottom: -0.375rem; width: 0.75rem; height: 0.75rem;
  border-radius: 50%; background: var(--brand-text);
}
/* 6 s of travel, 1.6 s of rest at the end of the line, then it fades and starts again */
@keyframes travy {
  0%   { transform: translate3d(0, -100%, 0); opacity: 0; animation-timing-function: ease-in-out; }
  3%   { opacity: 1; }
  75%  { transform: none; opacity: 1; animation-timing-function: linear; }
  95%  { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
@keyframes travx {
  0%   { transform: translate3d(-100%, 0, 0); opacity: 0; animation-timing-function: ease-in-out; }
  3%   { opacity: 1; }
  75%  { transform: none; opacity: 1; animation-timing-function: linear; }
  95%  { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.step { position: relative; display: flex; flex-direction: column; }
.step__seg { position: absolute; left: -1.875rem; top: calc(var(--gap) * -1); bottom: 0; width: 1px; background: var(--ink); transform: scaleY(0); transform-origin: top; }
.step:first-of-type .step__seg { top: 0; }
.step__node, .step__twin {
  position: absolute; top: 1.375rem; left: -2.25rem; width: 0.75rem; height: 0.75rem; border-radius: 50%;
}
.step__node { background: var(--surface); border: 1.5px solid var(--ink); }
.step__twin { background: var(--brand-text); opacity: 0; }
.step__card { flex: 1; padding: 1.5rem; border: 1px solid var(--hairline); border-radius: 1.25rem; background: var(--raised); }
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step .ico { color: var(--ink); }
.step__title { margin-top: 2rem; font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--ink); }
.step__text { margin-top: 0.5rem; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--support); }

/* phone arrival: each step on its own as it scrolls in */
html.js:not(.rm) .step__node { opacity: 0; filter: blur(4px); }
html.js:not(.rm) .step__card { opacity: 0; transform: translate3d(0, 1rem, 0); filter: blur(6px); }
@media (max-width: 899px) {
  html.js:not(.rm) .step.is-in .step__seg { transform: none; transition: transform 600ms var(--ease); }
  html.js:not(.rm) .step.is-in .step__node { opacity: 1; filter: blur(0); transition: opacity 300ms var(--ease) 500ms, filter 300ms var(--ease) 500ms; }
  html.js:not(.rm) .step.is-in .step__card { opacity: 1; transform: none; filter: blur(0); transition: opacity 700ms var(--ease) 650ms, transform 700ms var(--ease) 650ms, filter 700ms var(--ease) 650ms; }
  html.js:not(.rm) .steps:has(.step:last-of-type.is-in) .steps__dot { animation: travy 8s linear 1.8s infinite; }
}
@media (min-width: 900px) {
  .steps { --gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 0; margin-top: 4rem; }
  .steps__line, .steps__rail { top: 0.375rem; bottom: auto; left: 0; right: 0; height: 0; width: auto; }
  .steps__line { height: 1px; }
  .steps__fill { transform: scaleX(0); transform-origin: left; }
  html.js:not(.rm) .steps.is-in .steps__fill { transform: none; transition: transform 2000ms linear var(--o); }
  .steps__dot { left: 0; top: -0.375rem; width: 100%; height: 0.75rem; }
  .steps__dot::after { left: auto; right: -0.375rem; top: 0; bottom: auto; }
  html.js:not(.rm) .steps.is-in .steps__dot { animation: travx 8s linear 3.2s infinite; }
  .step { padding-top: 1.5rem; }
  .step__seg { display: none; }
  .step__node, .step__twin { top: 0; left: calc(50% - 0.375rem); }
  html.js:not(.rm) .step__card { transform: translate3d(0, -0.75rem, 0); }   /* lowered from the line */
  html.js:not(.rm) .steps.is-in .step__node { opacity: 1; filter: blur(0); transition: opacity 300ms var(--ease) calc(var(--o) + var(--t)), filter 300ms var(--ease) calc(var(--o) + var(--t)); }
  html.js:not(.rm) .steps.is-in .step__card { opacity: 1; transform: none; filter: blur(0); transition: opacity 700ms var(--ease) calc(var(--o) + var(--t) + 150ms), transform 700ms var(--ease) calc(var(--o) + var(--t) + 150ms), filter 700ms var(--ease) calc(var(--o) + var(--t) + 150ms); }
  /* as the travelling dot passes a step, a petrol twin glows over its dot (ease-in-out travel: 18.45, 32, 43, 56.55 percent of 8 s) */
  html.js:not(.rm) .steps.is-in .step__twin { animation: 8s linear 3.2s infinite; }
  html.js:not(.rm) .steps.is-in .step:nth-of-type(1) .step__twin { animation-name: twin1; }
  html.js:not(.rm) .steps.is-in .step:nth-of-type(2) .step__twin { animation-name: twin2; }
  html.js:not(.rm) .steps.is-in .step:nth-of-type(3) .step__twin { animation-name: twin3; }
  html.js:not(.rm) .steps.is-in .step:nth-of-type(4) .step__twin { animation-name: twin4; }
}
/* every loop here pauses while the section is off screen (after the rules that start them, and stronger) */
html.js:not(.rm) .steps.is-off .steps__dot, html.js:not(.rm) .steps.is-in.is-off .steps__dot, html.js:not(.rm) .steps.is-in.is-off .step__twin { animation-play-state: paused; }
@keyframes twin1 { 0%, 16.6% { opacity: 0; } 18.45% { opacity: 1; } 23.4% { opacity: 0; } 100% { opacity: 0; } }
@keyframes twin2 { 0%, 30.1% { opacity: 0; } 32% { opacity: 1; } 37% { opacity: 0; } 100% { opacity: 0; } }
@keyframes twin3 { 0%, 41.2% { opacity: 0; } 43% { opacity: 1; } 48% { opacity: 0; } 100% { opacity: 0; } }
@keyframes twin4 { 0%, 54.7% { opacity: 0; } 56.55% { opacity: 1; } 61.5% { opacity: 0; } 100% { opacity: 0; } }
/* still: line, dots, stems and cards all there, no dot travels */
html.rm .steps__fill, html.rm .step__seg { transform: none; }
html.rm .steps__dot, html.rm .step__twin { display: none; }
@media (prefers-reduced-motion: reduce) { .steps__fill, .step__seg { transform: none; } .steps__dot, .step__twin { display: none; } }

/* ---------- AI in Europe: the petrol tint sheet ---------- */
.europe__grid { display: grid; gap: 2.5rem; margin-top: 3rem; }
.europe__art { display: flex; justify-content: center; }
.eudraw { width: 9rem; height: 9rem; flex: none; overflow: visible; }
.eudot { fill: var(--brand-soft); stroke: var(--ink); stroke-width: 1.5; }
.eushield { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.eucheck { fill: none; stroke: var(--brand-text); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
html.js:not(.rm) .eudraw:not(.is-in) .eudot { opacity: 0; filter: blur(4px); }
html.js:not(.rm) .eudraw:not(.is-in) .eushield, html.js:not(.rm) .eudraw:not(.is-in) .eucheck { stroke-dashoffset: 1; }
html.js:not(.rm) .eudraw.is-in .eudot { transition: opacity 500ms var(--ease) calc(200ms + var(--i) * 90ms), filter 500ms var(--ease) calc(200ms + var(--i) * 90ms); }
html.js:not(.rm) .eudraw.is-in .eushield { transition: stroke-dashoffset 900ms var(--ease) 1400ms; }
html.js:not(.rm) .eudraw.is-in .eucheck { transition: stroke-dashoffset 400ms var(--ease) 2300ms; }
/* an accordion: one answer open at a time (the script says when). The row height eases with grid rows,
   the one place on the page where something other than transform, opacity and filter animates. */
.faq { border-bottom: 1px solid #C9D9DB; }
.faq__row { border-top: 1px solid #C9D9DB; }
.faq__q { font-size: 1.125rem; font-weight: 400; line-height: 1.3; color: var(--ink); }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; min-height: 3rem; padding: 1.25rem 0;
  background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.faq__chev { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--support); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease), stroke 240ms var(--ease); }
.faq__btn:hover .faq__chev, .faq__row.is-open .faq__chev { stroke: var(--brand-text); }
.faq__row.is-open .faq__chev { transform: rotate(180deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 300ms var(--ease), visibility 0s linear 300ms; }
.faq__row.is-open .faq__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 300ms var(--ease), visibility 0s; }
.faq__inner { overflow: hidden; min-height: 0; }
.faq__a { max-width: 38em; padding: 0 2.75rem 1.5rem 0; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--support); opacity: 0; transition: opacity 300ms var(--ease); }
.faq__row.is-open .faq__a { opacity: 1; }
html.rm .faq__panel, html.rm .faq__a, html.rm .faq__chev { transition: none; }
@media (min-width: 900px) {
  .europe__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; margin-top: 4rem; }
  /* the drawing sits beside the list, vertically centred against it */
  .europe__art { align-self: center; display: flex; justify-content: center; }
  .eudraw { width: 19rem; height: 19rem; }
  .faq__q { font-size: 1.25rem; }
  .faq__a { font-size: 1.0625rem; }
}

/* ---------- Communication: the deep ink sheet ---------- */
.reel { margin-top: 3rem; }
.reel__frame {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 2.4 / 1; border: 1px solid var(--on-ink-line); border-radius: 1.75rem; background: #0C111C;
}
.reel__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--on-ink-support); }
.disc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2.5rem; }
.disc__item { padding: 1.125rem; border: 1px solid var(--on-ink-line); border-radius: 1.25rem; }
.disc__item .ico { width: 1.75rem; height: 1.75rem; color: var(--on-ink); }
.disc__title { margin-top: 0.875rem; font-size: 1.125rem; font-weight: 400; line-height: 1.3; color: var(--on-ink); }
.disc__text { margin-top: 0.375rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--on-ink-support); }
@media (min-width: 900px) {
  .disc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
  .disc__item { padding: 1.5rem; }
  .disc__title { margin-top: 1rem; font-size: 1.25rem; }
  .disc__text { font-size: 1rem; }
}

/* ---------- Contact: a mist sheet holding the one frosted card ---------- */
.contact__card { display: grid; gap: 2rem; padding: 1.5rem; }
.contact__head { display: flex; flex-direction: column; gap: 0.75rem; }
.contact__head .support { max-width: 28em; }
.form__fields { display: flex; flex-direction: column; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--support); }
.field input, .field textarea {
  width: 100%; min-height: 3.5rem; padding: 0 1rem;
  border: 1px solid var(--hairline); border-radius: 1rem; background: var(--raised);
  font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 8rem; padding: 0.9375rem 1rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--line); }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0.125rem; border-color: var(--brand-text); }
.hp { position: absolute; left: -9999px; opacity: 0; }
.contact__card .btn { margin-top: 1.5rem; width: 100%; }
.status { min-height: 1.5rem; margin-top: 1rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.status a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 0.1875rem; }
@media (min-width: 640px) {
  .contact__card .btn { width: auto; min-width: 10rem; }
}
@media (min-width: 900px) {
    /* top-aligned: the CONTACT eyebrow and the "Name" label share one baseline */
  .contact__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; padding: 3.5rem; align-items: start; align-items: baseline; }
}

/* ---------- Footer ---------- */
.foot { padding: 3.5rem 0 3rem; color: var(--support); }
.foot__row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem 2.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.5; }
.foot__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.375rem; margin-left: -0.25rem; }
.foot a, .foot__legal button {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem;
  background: none; border: 0; color: var(--support); font-size: inherit; font-weight: inherit; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.foot a:hover, .foot__legal button:hover { color: var(--ink); }
.foot .foot__brand { padding: 0; color: var(--ink); }
@media (min-width: 900px) {
  .foot { padding: 4.5rem 0 3.5rem; }
  .foot__row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}

/* ---------- Policy pages (privacy, cookies) ---------- */
.legal { padding: 8.5rem 0 4.5rem; }
.legal__col { width: min(100% - 3rem, 42.5rem); margin-inline: auto; }
.legal h1 { font-size: 2.125rem; }
.legal .updated { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--faint); }
.legal h2 { margin-top: 3rem; font-size: 1.5rem; }
.legal h3 { margin-top: 2rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.legal h2 + p, .legal h2 + ul, .legal h3 + p, .legal h3 + table { margin-top: 0.75rem; }
.legal p, .legal li { font-size: 1rem; font-weight: 500; line-height: 1.6; color: var(--support); }
.legal p + p, .legal ul + p, .legal p + ul, .legal table + h3 { margin-top: 0.75rem; }
.legal ul { padding-left: 1.375rem; list-style: disc; }
.legal li + li { margin-top: 0.5rem; }
.legal li::marker { color: var(--faint); }
.legal strong { font-weight: 600; color: var(--ink); }
.legal p a, .legal li a {
  color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.1875rem;
}
.legal table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.legal th {
  padding: 0 0.75rem 0.625rem 0; text-align: left; vertical-align: bottom;
  font-size: 0.75rem; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--support);
}
.legal td { padding: 0.875rem 0.75rem 0.875rem 0; border-top: 1px solid var(--hairline); vertical-align: top; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--support); }
.legal tr:last-child td { border-bottom: 1px solid var(--hairline); }
.legal td:first-child { color: var(--ink); }
.legal td:nth-child(3) { white-space: nowrap; }
.legal .btn { margin-top: 1rem; }
.legal .btn + p { margin-top: 1.5rem; }
@media (max-width: 639px) {
  /* four narrow columns do not fit a phone: each cell becomes a labelled line */
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal tr:first-child { display: none; }
  .legal tr + tr { border-top: 1px solid var(--hairline); padding: 0.875rem 0; }
  .legal td { padding: 0.125rem 0; border: 0; }
  .legal tr:last-child td { border-bottom: 0; }
  .legal td::before { content: attr(data-label) ": "; color: var(--faint); }
  .legal td:first-child::before { content: ""; }
  .legal tr:last-child { border-bottom: 1px solid var(--hairline); }
}
@media (min-width: 900px) {
  .legal { padding: 10.5rem 0 6rem; }
  .legal h1 { font-size: 3rem; line-height: 1.12; }
}

/* ---------- Motion: things arrive with a soft rise while a 6 px blur clears ----------
   A reusable piece. In the markup:
     data-a            the element arrives when it scrolls into view (plays once)
     data-a="blur"     the same, with the blur (headline words and panels only)
     data-a="down"     it slides down from -0.75rem instead of rising (the floating bar)
     data-delay="650"  start this many milliseconds later
     data-stagger="100" on a parent: its children arrive in order, 100 ms apart (a child with data-keep sits out)
     data-a="none"     only watch the element: it gets .is-in when it scrolls into view, the CSS does the rest
     data-loop         the element's own loops pause while it is off screen (.is-off)
     data-words        on a headline (or a span): it arrives word by word, 70 ms apart
   The small script at the end of the page does the rest, then removes the attributes, so the
   element's own hover and focus transitions work again. Only transform, opacity and filter animate. */
html.js:not(.rm) [data-a],
html.js:not(.rm) [data-stagger] > :not([data-keep]) {
  opacity: 0; transform: translate3d(0, 1rem, 0);
}
html.js:not(.rm) [data-a="blur"] { filter: blur(6px); }
html.js:not(.rm) [data-a="down"] { transform: translate3d(0, -0.75rem, 0); }
html.js:not(.rm) [data-a="none"] { opacity: 1; transform: none; filter: none; }
html.js:not(.rm) [data-words] .w {
  display: inline-block; opacity: 0; transform: translate3d(0, 1rem, 0); filter: blur(6px);
}
html.js:not(.rm) [data-a].is-in,
html.js:not(.rm) [data-stagger].is-in > :not([data-keep]),
html.js:not(.rm) [data-words].is-in .w {
  opacity: 1; transform: none; filter: blur(0);
  transition:
    opacity 900ms var(--ease) var(--d, 0ms),
    transform 900ms var(--ease) var(--d, 0ms),
    filter 900ms var(--ease) var(--d, 0ms);
}

/* hovers: 240 ms, no scale. Cards get a darker edge, the floating shadow and a 2 px lift. */
.btn .ico { transition: transform 240ms var(--ease); }
.btn:hover .ico { transform: translateX(0.2rem); }
/* cards, tiles and step cards are not links, so they never react to the pointer (only links and buttons do) */
.card { border: 1px solid var(--hairline); }

/* ---------- Reduced motion: everything visible at once, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}