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

:root {
  --bg: #0a0a0a;
  --lilac: #c584e3;
  --lilac-tab: #bb7dd7;
  --line: rgba(255, 255, 255, .1); /* hairlines: header rule, category rules, FAQ dividers */
  --text: #ebeae4;
  --muted: #7e7e7c;
  --gutter: 24px;
  --serif: "Ancizar Serif", Georgia, "Times New Roman", serif;
  --sans: "Ancizar Sans", system-ui, sans-serif;
}

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

html { background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoscroll) { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--lilac); text-decoration: none; transition: color .25s ease, opacity .25s ease; }
a:hover { color: #e2b6f4; }
a:focus-visible { outline: 1px solid var(--lilac); outline-offset: 6px; border-radius: 2px; }
::selection { background: rgba(197, 132, 227, .35); color: #fff; }
img { display: block; }

/* film grain: a tiled noise PNG behind the content (videos and text sit on top) */
.grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/noise.png") 0 0 / 256px 256px repeat;
  opacity: .55;
}

.grain-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* decorative line ornaments behind the hero and footer */
.site { position: relative; overflow: hidden; }
.ornament {
  position: absolute;
  left: 50%;
  transform: translate(-50%, var(--py, 0px));
  will-change: transform;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ornament--hero {
  width: 2753px;
  height: 1379px;
  top: clamp(-500px, calc(-346px - (1440px - 100vw) * .37), -346px);
}
.ornament--footer {
  /* --fs scales the pattern about its centre, which stays level with the email. A bigger
     pattern widens the clear diamond between its two fans, so the FAQ can sit inside it. */
  --fs: 1.3;
  width: calc(2433px * var(--fs));
  height: calc(1459px * var(--fs));
  bottom: calc(244.5px - 729.5px * var(--fs));
  /* The pattern is pinned to the page bottom. When the FAQ opens, the page grows and the
     last video row moves up, which would uncover the pattern's top ends: fade them out. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
}
/* page column: fluid up to 1100px */
.page {
  container-type: inline-size;
  position: relative;
  z-index: 1;
  width: min(1100px, 100% - 48px);
  margin: 0 auto;
}

/* header: one component with two states.
   Resting: it scrolls with the page, sitting in the content column with the big top padding.
   Once it has scrolled up to the top of the window, main.js adds .is-docked: it becomes fixed, the
   wordmark moves out to the left, the links to the right and the rule stretches between them (the bar
   is wider than the content column). No background, no border. The vertical position is identical in
   both states at the moment of switching, so only the horizontal motion is animated. */
.top {
  --pt: clamp(56px, 10.5vw, 151px);
  --side: max(24px, calc((100% - 1100px) / 2));   /* aligns the row with the 1100px content column */
  --ease: cubic-bezier(.2, .7, .2, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: var(--pt) var(--side) 0;
  transition: padding-left .7s var(--ease), padding-right .7s var(--ease);
}
.top.is-docked {
  --pt: 14px;
  --side: max(clamp(20px, 2.6vw, 40px), calc((100% - 1600px) / 2));   /* wider than the content, capped on huge screens */
  position: fixed;
  padding-bottom: 14px;
}
/* keeps the page content where it was when the header sat in the flow */
.top-spacer { height: calc(clamp(56px, 10.5vw, 151px) + 34px); }
.wordmark { width: 119px; height: 34px; transition: width .6s var(--ease), height .6s var(--ease); }
.top.is-docked .wordmark { width: 102px; height: 29px; }
.rule {
  flex: 0 1 89px;
  min-width: 0;
  height: 1px;
  margin: 7px 15px 0 28px;   /* the same 7px as the links, so the rule sits level with the diamond */
  background: var(--line);
  transition: flex-grow .7s var(--ease), margin .6s var(--ease), opacity .3s ease;   /* undock: it returns at once */
}
/* docked: the line stretches, then, once it has fully stretched, fades away (the .65s delay) */
.top.is-docked .rule {
  flex-grow: 1;
  margin: 6px 22px 0 28px;
  opacity: 0;
  transition: flex-grow .7s var(--ease), margin .6s var(--ease), opacity .5s ease .65s;
}
.links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 7px;
  font-size: 24px;
  letter-spacing: -.018em;
  line-height: 25.92px;
  transition: font-size .6s var(--ease), margin .6s var(--ease);
}
.top.is-docked .links { font-size: 20px; margin-top: 6px; }
/* narrow screens (phones, small laptops): the docked bar has no room outside the content column, so it
   would sit right on top of the work. A soft dark fade beneath it keeps the links readable. */
.top::before {
  content: "";
  position: absolute;
  inset: 0 0 -36px 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 10, 10, .93) 0%, rgba(10, 10, 10, .82) 45%, rgba(10, 10, 10, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
@media (max-width: 1199px) {
  .top.is-docked::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .top::before { transition: none; } }

/* the links travel a long way, so they fade out as the move starts and back in once only a small
   drift is left (the padding move below eases out, so most of the distance is covered early) */
/* two identical keyframes with different names: switching between them restarts the animation on
   every dock and undock (re-using one name would let the running animation continue, not replay) */
@keyframes links-swap-dock {
  0%   { opacity: 1; }
  14%  { opacity: 0; }
  50%  { opacity: 0; }
  80%, 100% { opacity: 1; }
}
@keyframes links-swap-undock {
  0%   { opacity: 1; }
  14%  { opacity: 0; }
  50%  { opacity: 0; }
  80%, 100% { opacity: 1; }
}
.top.is-docked .links { animation: links-swap-dock .85s ease both; }
.top.was-docked:not(.is-docked) .links { animation: links-swap-undock .85s ease both; }
@media (prefers-reduced-motion: reduce) {
  .top, .wordmark, .rule, .links { transition: none; }
  .top .links { animation: none !important; }
}
.dot { width: 6px; height: 6px; flex: none; }

/* hero */
h1 {
  margin: clamp(48px, 7vw, 80px) 0 0;
  font-weight: 300;
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1.18;
  letter-spacing: -.018em;
}
h1 .lead, h1 .sub { display: block; }
h1 .lead { color: var(--text); text-wrap: balance; }
h1 .sub { color: var(--muted); }

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: clamp(48px, 7vw, 83px);
  opacity: .47;            /* white logos at 47% over #0a0a0a = 125, the same gray as the subtext (#7e7e7c = 126) */
  filter: grayscale(1);
}
.logos img:not(.dot) { height: 20px; width: auto; }
.logos img[alt="Immutable"], .logos img[alt="CSGOROLL"] { height: 26px; }

/* intro: display title with a lilac italic, a dimmer sub-line, and four ruled columns */
.intro { margin-top: clamp(56px, 9vw, 120px); }
.intro-title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(29px, 8vw, 38px); /* stays well under the 52px h1 */
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--text);
}
.intro-title em { font-style: normal; color: var(--lilac); }
.intro-sub {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  max-width: 700px;
  font-weight: 300;
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: #a3a39e;
}
.tabs {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(40px, 5.5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11", "dlig";
  color: var(--lilac-tab);
}
.tabs li {
  min-height: clamp(96px, 12vw, 160px);
  padding-left: calc(clamp(16px, 2.4vw, 32px) - 8px);
  border-left: 1px solid var(--line);
}

/* ---------- video blocks ----------
   Each block is a 12-column grid. Clips are cropped to a fixed aspect ratio
   (--ar, set per clip) with object-fit: cover. Layouts:
     full     one clip across all 12 columns
     pair     big (8 cols) + small (4 cols), small aligned to the bottom
     collage  big + 2 or 3 small clips; .is-flip mirrors it
     row      2-4 equal clips (--n)                                        */
.blocks {
  display: grid;
  gap: var(--block-gap);
  --block-gap: 3.6364cqw; /* 40px on the 1100px column */
}
.blocks-hero { margin-top: clamp(64px, 10vw, 143px); }
.blocks-work { margin-top: clamp(56px, 6vw, 88px); }
.blocks-last { margin-top: clamp(80px, 9vw, 130px); }

.block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap, 24px);
  align-items: start;
}
.clip {
  position: relative;
  overflow: hidden;
  background: #050505;
  aspect-ratio: var(--ar);
}
/* layered ("realistic") shadow: offset and blur double per layer at low alpha,
   so it reads as one soft, natural falloff. The 1px ring sits outside the clip
   and borrows the shadow hue, lightened, so the edge picks up the shadow's tint. */
.clip {
  --shadow-color: 240 30% 2%;
  --ring-color: 240 16% 62%;
  box-shadow:
    0 0 0 1px hsl(var(--ring-color) / .26),
    0 1px 1px hsl(var(--shadow-color) / .30),
    0 2px 2px hsl(var(--shadow-color) / .30),
    0 4px 4px hsl(var(--shadow-color) / .30),
    0 8px 8px hsl(var(--shadow-color) / .30),
    0 16px 16px hsl(var(--shadow-color) / .30),
    0 32px 32px hsl(var(--shadow-color) / .30);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease;
}
@media (hover: hover) {
  .clip:hover {
    transform: translateY(-4px);
    box-shadow:
      0 0 0 1px hsl(var(--ring-color) / .36),
      0 1px 1px hsl(var(--shadow-color) / .30),
      0 2px 2px hsl(var(--shadow-color) / .30),
      0 4px 4px hsl(var(--shadow-color) / .30),
      0 8px 8px hsl(var(--shadow-color) / .30),
      0 16px 16px hsl(var(--shadow-color) / .30),
      0 32px 32px hsl(var(--shadow-color) / .30),
      0 56px 64px hsl(var(--shadow-color) / .34);
  }
}
/* the video is a little taller than its frame and anchored to the bottom, so the
   top is cropped, exactly as on the original */
.clip video {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--vw, 100%);
  height: var(--vh, 100%);
  object-fit: cover;
  transform: translate(var(--fx, 0%), var(--fy, 0%)) scale(var(--fz, 1)); /* per-tile framing */
  transform-origin: 50% 50%;
}

/* category badge: a tiny gray terminal-style label flush in the clip's top-left corner */
.badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 5px 5px 4px 6px; /* uppercase has no descenders, so the bottom needs 1px more to look centered */
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #dcdad4; /* a little off-white */
  /* same gray as the clip's outside ring, made opaque so the video can't show through */
  background: #2c2c33;
  background: color-mix(in srgb, hsl(var(--ring-color)) 26%, var(--bg));
  /* a slightly brighter hairline on the bottom and right edges */
  border-right: 1px solid #46464f;
  border-bottom: 1px solid #46464f;
  border-right-color: color-mix(in srgb, hsl(var(--ring-color)) 45%, var(--bg));
  border-bottom-color: color-mix(in srgb, hsl(var(--ring-color)) 45%, var(--bg));
  pointer-events: none;
  user-select: none;
}

/* decorative fine-line marks in the gaps of scatter blocks (corner brackets, viewfinder frames,
   registration crosses, diamonds). Sizes use cqw so they scale with the column; hidden on phones. */
.mark {
  position: absolute;
  left: calc(var(--x, 0) * 1%);
  top: calc(var(--y, 0) * 1%);
  z-index: 0;
  pointer-events: none;
  color: rgba(255, 255, 255, .2);
}
.mark--corner { width: calc(var(--s, 3) * 1cqw); height: calc(var(--s, 3) * 1cqw); }
.mark--corner.at-tl { border-top: 1px solid currentColor; border-left: 1px solid currentColor; }
.mark--corner.at-tr { border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-100%); }
.mark--corner.at-bl { border-bottom: 1px solid currentColor; border-left: 1px solid currentColor; transform: translateY(-100%); }
.mark--corner.at-br { border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; transform: translate(-100%, -100%); }
.mark--frame { width: calc(var(--w, 20) * 1cqw); height: calc(var(--h, 10) * 1cqw); }
.mark--frame > .mark--corner { --s: inherit; width: calc(var(--s) * 1cqw); height: calc(var(--s) * 1cqw); }
.mark--frame > .at-tl { left: 0; top: 0; }
.mark--frame > .at-tr { left: 100%; top: 0; }
.mark--frame > .at-bl { left: 0; top: 100%; }
.mark--frame > .at-br { left: 100%; top: 100%; }
.mark--cross {
  width: calc(var(--s, 1.4) * 1cqw);
  height: calc(var(--s, 1.4) * 1cqw);
  transform: translate(-50%, -50%);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
}
.mark--diamond {
  width: calc(var(--s, .7) * 1cqw);
  height: calc(var(--s, .7) * 1cqw);
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid currentColor;
}
.mark--diamond.is-accent { border-color: var(--lilac); background: var(--lilac); opacity: .8; }
.mark--rule { width: calc(var(--len, 4) * 1cqw); height: 1px; background: currentColor; }

/* art-deco ornaments: inline SVG, 1px strokes that do not scale, a lilac accent on the jewels */
.mark--deco-frame, .mark--deco-corner, .mark--lozenge, .mark--sunburst, .mark--chevrons, .mark--deco-rule { color: rgba(255, 255, 255, .24); }
.mark svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; }
.mark svg * { vector-effect: non-scaling-stroke; }
.mark svg .acc { stroke: var(--lilac); fill: var(--lilac); opacity: .85; }
.mark svg .bgfill { fill: var(--bg); }
.mark--deco-frame { width: calc(var(--w, 20) * 1cqw); height: calc(var(--h, 10) * 1cqw); }
.mark--deco-corner { width: calc(var(--s, 5) * 1cqw); aspect-ratio: 1; }
.mark--deco-corner.at-tr { transform: translateX(-100%); }
.mark--deco-corner.at-tr svg { transform: scaleX(-1); }
.mark--deco-corner.at-bl { transform: translateY(-100%); }
.mark--deco-corner.at-bl svg { transform: scaleY(-1); }
.mark--deco-corner.at-br { transform: translate(-100%, -100%); }
.mark--deco-corner.at-br svg { transform: scale(-1, -1); }
.mark--lozenge, .mark--chevrons, .mark--deco-rule { width: calc(var(--s, 4) * 1cqw); aspect-ratio: var(--ar); transform: translate(-50%, -50%); }
.mark--sunburst { width: calc(var(--s, 10) * 1cqw); aspect-ratio: var(--ar); transform: translate(-50%, -100%); }

.mark--rule.is-v { width: 1px; height: calc(var(--len, 4) * 1cqw); }

/* an unassigned slot in a newly added block: visible only in the editor, marked so it is easy to spot */
.clip.is-empty {
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(197, 132, 227, .05);
  box-shadow: none;
  outline: 1px dashed rgba(197, 132, 227, .55);
  outline-offset: -1px;
  color: var(--lilac);
  font: 400 14px/1.3 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.clip.is-empty small { display: block; margin-top: 6px; font-size: 11px; color: #8d8d99; text-transform: none; letter-spacing: 0; }
.block--full .clip { grid-column: 1 / -1; }

.block--pair .clip--big { grid-column: 1 / 9; }
.block--pair .clip--small { grid-column: 9 / 13; align-self: end; }
.block--pair.is-flip .clip--big { grid-column: 5 / 13; }
.block--pair.is-flip .clip--small { grid-column: 1 / 5; }

/* collage of 3: big spans two rows, two small clips stacked beside it */
.block--n3 .clip--big { grid-column: 1 / 9; grid-row: 1 / 3; aspect-ratio: auto; align-self: stretch; }
.block--n3 .clip--small { grid-column: 9 / 13; }
.block--n3.is-flip .clip--big { grid-column: 5 / 13; }
.block--n3.is-flip .clip--small { grid-column: 1 / 5; }

/* collage of 4: big + one small on top, two small clips underneath */
.block--n4 .clip--big { grid-column: 1 / 9; }
.block--n4 .clip--small:nth-child(2) { grid-column: 9 / 13; align-self: end; }
.block--n4 .clip--small:nth-child(3) { grid-column: 1 / 5; }
.block--n4 .clip--small:nth-child(4) { grid-column: 5 / 9; }
.block--n4.is-flip .clip--big { grid-column: 5 / 13; }
.block--n4.is-flip .clip--small:nth-child(2) { grid-column: 1 / 5; }
.block--n4.is-flip .clip--small:nth-child(3) { grid-column: 9 / 13; }
.block--n4.is-flip .clip--small:nth-child(4) { grid-column: 5 / 9; }

.block--row { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }

/* scatter: free placement on a 1100px-wide canvas, scaled with the column */
.block--scatter {
  display: block;
  position: relative;
  aspect-ratio: calc(1100 / var(--bh));
}
.block--scatter .clip {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
}


/* faq: a two-column list. Questions on the left, answers on the right, one ruled row per question.
   The answer column is capped at ~62 characters per line (the comfortable reading measure).
   No JS state: everything is visible, so the page height is stable. */
.faq { position: relative; margin: clamp(80px, 9vw, 130px) 0 0; }
.faq-nav { display: none; }              /* arrows are only needed by the old carousel */
.faq-track { counter-reset: faq; border-bottom: 1px solid var(--line); }
.faq-track:focus-visible { outline: 1px solid var(--lilac); outline-offset: 6px; }
.faq-card {
  counter-increment: faq;
  display: grid;
  grid-template-columns: 48px minmax(0, 4fr) minmax(0, 5fr);
  column-gap: clamp(20px, 3.6vw, 40px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 40px) 0 clamp(32px, 3.8vw, 48px);
  border-top: 1px solid var(--line);
}
/* index number, in the mono face of the category badges */
.faq-card::before {
  content: counter(faq, decimal-leading-zero);
  padding-top: .55em;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--muted);
}
.faq-card h3 {
  margin: 0;
  max-width: 14em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 26px;
  line-height: calc(1.2em - 2px);
  letter-spacing: -.005em;
  text-transform: none;
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11", "dlig";
  color: var(--lilac-tab);
}
/* answers set as serif prose; max-width keeps each line to about 62 characters */
.faq-card p {
  margin: 0;
  max-width: 62ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: #a3a39e;
}
.faq-card p a { color: var(--lilac); }

/* footer */
footer {
  position: relative;
  margin-top: clamp(144px, 18vw, 240px); /* doubled: the gap between the last video and the email */
  padding-bottom: clamp(96px, 14vw, 250px);
  text-align: center;
  font-size: 44px;
  line-height: 47.52px;
  letter-spacing: -.018em;
}

/* X profile icon: centred, its glyph sits 30px above the bottom edge of the page
   (44px tap target: bottom 18px + (44 - 20) / 2 = 30px) */
.social {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--lilac);
  opacity: .85;
  transition: opacity .25s ease, color .25s ease;
}
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social:hover { opacity: 1; color: #e2b6f4; }



/* ---------- motion (all of it is off for reduced-motion users) ---------- */
/* only a "from" frame: the animation ends on each element's own styles, so it no longer forces
   opacity 1 (which was overriding the dimmed hero logos) */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}
@keyframes clip-in {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .top, h1 .lead, h1 .sub, .logos, .intro-title, .intro-sub, .tabs {
    animation: rise 1s cubic-bezier(.2, .7, .2, 1) both;
  }
  .top       { animation-delay: .05s; }
  h1 .lead   { animation-delay: .18s; }
  h1 .sub    { animation-delay: .32s; }
  .logos     { animation-delay: .46s; }

  /* clips wait for the script, then ease in as they scroll into view */
  .reveal .clip { opacity: 0; }
  .reveal .clip.is-in {
    opacity: 1;
    animation: clip-in 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) backwards;
  }
}

/* tablets */
@media (max-width: 1023px) {
  .block { --gap: 16px; }
}
@media (max-width: 1199px) {
  .ornament--footer {
    width: calc(1953px * var(--fs));
    height: calc(1120px * var(--fs));
    bottom: calc(245px - 560px * var(--fs));
  }
}

/* phones: single column, clips stacked in content order */
@media (max-width: 767px) {
  .ornament--hero { display: none; }
  .top { --pt: 60px; --side: 24px; }
  .top.is-docked { --pt: 14px; --side: 24px; }
  .top-spacer { height: 94px; }
  .rule, .top.is-docked .rule { flex: 1; margin: 7px 16px 0; opacity: 1; }   /* phones keep the line */
  .links, .top.is-docked .links { flex-direction: row-reverse; gap: 14px; font-size: 22px; margin-top: 7px; }
  .top.is-docked .wordmark { width: 119px; height: 34px; }
  .top .links { animation: none !important; }   /* on phones the links don't travel */
  .logos { justify-content: center; gap: 14px; }
  .logos > :nth-child(6), .logos > :nth-child(12) { display: none; }
  .blocks { --block-gap: 16px; }
  .block { grid-template-columns: 1fr; gap: 16px; }
  .block--scatter { display: grid; aspect-ratio: auto; }
  .mark { display: none; }
  .block--scatter .clip { position: relative; left: auto; top: auto; width: 100%; }
  .block .clip {
    grid-column: 1 !important;
    grid-row: auto !important;
    align-self: start !important;
    aspect-ratio: var(--ar) !important;
  }
  .badge { font-size: 9px; padding: 5px 4px 4px 5px; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; font-size: 15px; }
  .tabs li { min-height: 64px; padding-left: 6px; }
  .faq-card { grid-template-columns: 32px minmax(0, 1fr); row-gap: 14px; padding: 26px 0 30px; }
  .faq-card::before { grid-row: 1; }
  .faq-card h3 { font-size: 21px; grid-column: 2; max-width: none; }
  .faq-card p { grid-column: 2; font-size: 17px; line-height: 1.5; }
  footer { font-size: 26px; }
}