/* fonts.css is linked from the document head, not @imported: an @import is only
   discovered after this file has been fetched and parsed, so the two style
   sheets download one after the other instead of side by side. */

/* =========================================================
   BRAINFLOW — Design system
   Palette & motion inspired by the Arpeggio editorial style:
   bone background, near-black ink, one hot orange accent,
   serif display + grotesque UI, tight negative tracking.
   ========================================================= */

:root {
  --bg: #f6f6f6;
  --bg-alt: #efeeec;
  --surface: #ffffff;
  --ink: #333336;
  --ink-strong: #17171a;
  --muted: #929298;
  --faint: #b8b8bd;
  --line: #e2e2e0;
  --line-soft: #ebebe9;
  --accent: #ff4400;
  --accent-soft: rgba(255, 68, 0, 0.06);
  --dark: #131316;
  --dark-2: #1c1c20;

  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Motion vocabulary lifted from the Arpeggio template's own animation data:
     tween 1.4s on [.22,1,.36,1], slow 2s hero on [.5,.26,.31,1.01], a symmetric
     [.44,0,.56,1] for masks, and a spring with bounce ≈0.2 for accents. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hero: cubic-bezier(0.5, 0.26, 0.31, 1.01);
  --ease-soft: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --dur: 1.4s;
  --dur-slow: 2s;
  --dur-mask: 1.5s;
  --rise: 30px;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1400px;
  --radius: 4px;
  --header-h: 76px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

/* No orphan words. Headlines get balanced line lengths; running text asks the
   browser not to leave a single word alone on the last line. Where the text
   comes from data we also glue the last two words with nw() in PHP, because
   text-wrap is a hint and this is not negotiable. */
h1,
h2,
h3,
h4,
.h-display,
.h-1,
.h-2,
.lead,
.quote,
.plan__name,
.wcard__name,
.cband__name,
.cband__l1 {
  text-wrap: balance;
}

p,
li,
.wcard__sub,
.cband__l2,
.plan__blurb {
  text-wrap: pretty;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.section {
  padding: clamp(56px, 6.5vw, 104px) 0;
  position: relative;
  /* The hero is sticky and sits behind the page: everything that scrolls over it
     needs its own background, or the hero shows through. */
  background: var(--bg);
}

.section--tight {
  padding: clamp(40px, 4.5vw, 68px) 0;
}

.section--dark {
  background: var(--dark);
  color: #e9e9ea;
}

.section--dark .eyebrow,
.section--dark .sec-label {
  color: #9d9da8;
}

.section--dark .lead,
.section--dark .body-lg,
.section--dark p {
  color: #c8c8ce;
}

.section--alt {
  background: var(--bg-alt);
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------- Type ---------- */

.eyebrow,
.sec-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.eyebrow--plain::before {
  display: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
  margin: 0;
  text-wrap: balance;
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: #fff;
}

.h-display {
  font-size: clamp(46px, 8.2vw, 118px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.h-1 {
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.042em;
}

.h-2 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.038em;
}

.h-3 {
  font-size: clamp(21px, 1.7vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

em,
.ital {
  font-style: italic;
}

.accent {
  color: var(--accent);
}

.lead {
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.5;
  color: #55555c;
  max-width: 62ch;
  margin: 0;
}

.body-lg {
  font-size: 17.5px;
  line-height: 1.62;
  color: #55555c;
  margin: 0;
}

.small {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  margin: 0;
  text-wrap: balance;
}

.section--dark .quote {
  color: #fff;
}

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--ink-strong);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), transform 0.5s var(--ease);
  will-change: transform;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
  border-radius: inherit;
}

.btn:hover::before {
  transform: translateY(0);
}

.btn:hover {
  color: #fff;
}

.btn .arrow {
  transition: transform 0.45s var(--ease);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

/* The accent button stays accent. The wipe used to bring a black panel up from
   the bottom, which left a sliver at the rounded edge and clashed with the
   orange it was covering. Now it deepens in place and a light sweeps across. */
.btn--accent {
  --btn-bg: var(--accent);
  transition: color 0.35s var(--ease), transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}

.btn--accent::before {
  background: linear-gradient(100deg, #ff6a24 0%, #ff4400 48%, #dd3800 100%);
  transform: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.btn--accent:hover::before {
  opacity: 1;
}

.btn--accent:hover {
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(255, 68, 0, 0.65);
}

/* The sheen: a soft band of light crossing the button, left to right. */
.btn--accent::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  transform: translateX(-120%);
  transition: transform 0.8s var(--ease);
}

.btn--accent:hover::after {
  transform: translateX(120%);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-strong);
  border: 1px solid var(--line);
}

.btn--ghost:hover {
  border-color: var(--accent);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink-strong);
}

.btn--lg {
  padding: 18px 32px;
  font-size: 15px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Text link with underline sweep */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-strong);
  padding-bottom: 3px;
}

.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.4s var(--ease);
}

.tlink:hover::after {
  transform-origin: left;
  animation: sweep 0.6s var(--ease);
}

@keyframes sweep {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  50% {
    transform: scaleX(0);
    transform-origin: right;
  }
  51% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.tlink:hover {
  color: var(--accent);
}

/* ---------- Loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--dark);
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--pad);
  transition: transform 1s var(--ease) 0.15s;
}

.loader__word {
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 92px);
  line-height: 1;
  letter-spacing: -0.045em;
  overflow: hidden;
}

.loader__word span {
  display: inline-block;
  transform: translateY(105%);
  animation: loadIn 0.9s var(--ease) forwards;
}

@keyframes loadIn {
  to {
    transform: translateY(0);
  }
}

.loader__num {
  font-size: clamp(38px, 6vw, 80px);
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.loader.is-done {
  transform: translateY(-101%);
}

.no-loader .loader {
  display: none;
}

/* ---------- Header ---------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: transform 0.6s var(--ease), background 0.4s ease,
    border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

/* Pages whose hero is a dark image: until the frosted bar kicks in, the header
   sits on black and the default ink is unreadable, so it goes light. */
.header--over-dark:not(.is-stuck) .logo,
.header--over-dark:not(.is-stuck) .nav a:hover,
.header--over-dark:not(.is-stuck) .nav a[aria-current="page"] {
  color: #fff;
}

.header--over-dark:not(.is-stuck) .nav a {
  color: rgba(255, 255, 255, 0.78);
}

.header--over-dark:not(.is-stuck) .burger span {
  background: #fff;
}

.header.is-stuck {
  background: rgba(246, 246, 246, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
}

/* The wordmark is the brand's own SVG, in accent orange: it reads on the light
   pages and on the dark heroes alike, so it never needs a second version. */
.logo img {
  display: block;
  height: 21px;
  width: auto;
  transition: opacity 0.35s var(--ease);
}

.logo:hover img {
  opacity: 0.72;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.62);
    opacity: 0.55;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #5c5c63;
  transition: color 0.3s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink-strong);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink-strong);
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}

body.menu-open .burger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

body.menu-open .burger span:nth-child(2) {
  opacity: 0;
}

body.menu-open .burger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile overlay menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--dark);
  color: #fff;
  padding: calc(var(--header-h) + 32px) var(--pad) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease);
  pointer-events: none;
}

body.menu-open .menu {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.menu__list a {
  display: block;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 58px);
  letter-spacing: -0.04em;
  color: #fff;
  transform: translateY(105%);
  transition: transform 0.7s var(--ease), color 0.3s ease;
}

body.menu-open .menu__list a {
  transform: translateY(0);
}

.menu__list li:nth-child(1) a {
  transition-delay: 0.1s;
}
.menu__list li:nth-child(2) a {
  transition-delay: 0.16s;
}
.menu__list li:nth-child(3) a {
  transition-delay: 0.22s;
}
.menu__list li:nth-child(4) a {
  transition-delay: 0.28s;
}
.menu__list li:nth-child(5) a {
  transition-delay: 0.34s;
}

.menu__list a:hover {
  color: var(--accent);
}

.menu__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  color: #a6a6b0;
  font-size: 13px;
}

/* ---------- Hero: full-screen intro. Sticky, so it shrinks and dims in place
   while the next section rides up over it. ---------- */

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.6);
  transition: transform var(--dur-slow) var(--ease-hero);
}

.hero__bg.in img {
  transform: scale(1);
}

.hero__scrim,
.stage__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at 50% 52%,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.42) 45%,
      rgba(0, 0, 0, 0.62) 100%
    ),
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  will-change: transform, opacity;
}

.hero .eyebrow {
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
}

.hero__title {
  margin: 20px auto 0;
  max-width: 15ch;
  color: #fff;
}

/* Headline scales in on a spring, like the template's intro. */
.hero-scale {
  transform: scale(0.7);
  opacity: 0.001;
  transition: transform 1.3s var(--ease-spring) 0.4s, opacity 1s var(--ease) 0.4s;
}

.hero-scale.in {
  transform: scale(1);
  opacity: 1;
}

.hero__sub {
  margin: clamp(24px, 2.6vw, 34px) auto 0;
  max-width: 56ch;
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.hero__cta {
  margin-top: 34px;
  justify-content: center;
}

.hero .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.26);
}

.hero__meta {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.hero__meta .accent {
  color: var(--accent);
}

/* ---------- Stage: its own section, below the hero. The contents pin while you
   scroll: a centre block (media + centred title) holds the middle of the screen
   while the tall images travel up past it and leave through the top. Every
   transform is written by JS from the scroll progress — no CSS transitions. */

.stage {
  position: relative;
  z-index: 1;
  height: 240vh;
  background: var(--dark);
}

.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage__card {
  position: relative;
  z-index: 2;
  /* Narrow enough that the side lanes never ride over it. */
  width: min(56vw, 900px);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9);
}

.stage__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__title {
  position: relative;
  z-index: 2;
  max-width: 18ch;
  padding: 0 6%;
  text-align: center;
  color: #fff;
  text-wrap: balance;
}

/* The travelling images ride in their own layer, in lanes at the sides. */
.stage__floats {
  position: absolute;
  inset: 0;
  z-index: 1; /* behind the centre card: the images emerge from behind it */
  pointer-events: none;
}

.float {
  position: absolute;
  top: 0;
  margin: 0;
  aspect-ratio: 519 / 800;
  border-radius: 6px;
  overflow: hidden;
  will-change: transform;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  transform: translate3d(0, 130vh, 0);
}

.float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Header sits over the black hero until the page scrolls. */
.page-index .header:not(.is-stuck) .logo,
.page-index .header:not(.is-stuck) .nav a:hover,
.page-index .header:not(.is-stuck) .nav a[aria-current="page"] {
  color: #fff;
}

.page-index .header:not(.is-stuck) .nav a {
  color: rgba(255, 255, 255, 0.66);
}

.page-index .header:not(.is-stuck) .burger span {
  background: #fff;
}

/* No room for side lanes on a phone: shorten the scene, drop the floats. */
@media (max-width: 860px) {
  .hero {
    position: relative;
  }
  .stage {
    height: 170vh;
  }
  .stage__card {
    width: 90vw;
    aspect-ratio: 4 / 5;
  }
  .stage__floats {
    display: none;
  }
}

/* Page hero (inner pages) */
.phero {
  padding: calc(var(--header-h) + clamp(56px, 7vw, 104px)) 0
    clamp(36px, 4vw, 64px);
  position: relative;
  overflow: hidden;
}

.phero .lead {
  margin-top: 28px;
}

/* ---------- Legal / prose pages ---------- */
.legal {
  padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 7vw, 96px);
}

/* Centre the whole reading column (intro + body) on the page, text still left
   aligned for legibility, so it doesn't hug the left edge of the wide layout. */
.page-privacy .phero .wrap,
.page-privacy .legal .wrap,
.page-legal .phero .wrap,
.page-legal .legal .wrap,
.page-cookies .phero .wrap,
.page-cookies .legal .wrap {
  max-width: 820px;
}

.legal__body {
  max-width: none;
}

.legal__updated {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 clamp(28px, 4vw, 44px);
}

.legal__body h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  margin: clamp(34px, 4vw, 52px) 0 14px;
}

.legal__body h2:first-of-type {
  margin-top: 0;
}

.legal__body h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-strong);
  margin: 26px 0 8px;
}

.legal__body p,
.legal__body li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}

.legal__body p {
  margin: 0 0 16px;
}

.legal__body ul {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}

.legal__body li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}

.legal__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.legal__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__body strong {
  color: var(--ink-strong);
  font-weight: 600;
}

/* ---------- Animations utils ---------- */

/* Arpeggio animates from opacity .001 (never a hard 0) and travels 30–100px. */
[data-reveal] {
  opacity: 0.001;
  transform: translateY(var(--rise));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0s);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* Section-scale blocks travel further, like the original's 60px lift. */
[data-reveal="lift"] {
  --rise: 60px;
}

/* Accent elements arrive on a spring with a light overshoot (bounce ≈0.2). */
[data-reveal="spring"] {
  --rise: 40px;
  transition: opacity 1s var(--ease), transform 1s var(--ease-spring);
}

.split .line {
  display: block;
  overflow: hidden;
}

.split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Room inside the clip box for descenders (g, y) and italic overshoot (f, e),
     cancelled by equal negative margins so word spacing is untouched. */
  padding: 0.06em 0.1em 0.24em;
  margin: -0.06em -0.1em -0.24em;
}

.split .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
  transition-delay: calc(var(--i) * 0.055s + var(--base, 0s));
}

.split.in .word > span {
  transform: translateY(0);
}

/* The hero headline uses the template's slowest curve: 2s, long settle. */
.hero__title .word > span {
  transition: transform var(--dur-slow) var(--ease-hero);
  transition-delay: calc(var(--i) * 0.07s + 0.3s);
}

/* Line draw */
.draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mask) var(--ease-soft);
}

.draw.in {
  transform: scaleX(1);
}

/* Image / visual reveal.
   NOTE: never hide an observed element with clip-path/height:0 — IntersectionObserver
   measures the *clipped* box, so a fully clipped element never reaches the threshold
   and never gets revealed. Opacity does not affect intersection, so we fade instead. */
.mask {
  opacity: 0.001;
  transition: opacity var(--dur-mask) var(--ease-soft),
    transform var(--dur-mask) var(--ease-soft);
  transform: translateY(40px);
}

.mask.in {
  opacity: 1;
  transform: none;
}

/* Zoom-out reveal for visual blocks (scale 1.6 → 1 over 2s in the original). */
.zoom {
  overflow: hidden;
}

.zoom > * {
  transform: scale(1.6);
  transition: transform var(--dur-slow) var(--ease-soft);
}

.zoom.in > * {
  transform: scale(1);
}

/* Lateral entrances (the original slides blocks in from x: ±367px). */
.slide-l,
.slide-r {
  opacity: 0.001;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0s);
}

.slide-l {
  transform: translateX(-120px);
}

.slide-r {
  transform: translateX(120px);
}

.slide-l.in,
.slide-r.in {
  opacity: 1;
  transform: none;
}

/* ---------- Marquee ---------- */

.marquee {
  /* Must be positioned: the sticky hero paints above in-flow blocks, so an
     unpositioned band shows the hero photo straight through its background. */
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  background: var(--bg);
}

.marquee--dark {
  background: var(--dark);
  border-color: rgba(255, 255, 255, 0.08);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll-x 38s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.035em;
  color: var(--ink-strong);
  white-space: nowrap;
}

.marquee--dark .marquee__item {
  color: #fff;
}

.marquee__item i {
  font-style: normal;
  color: var(--accent);
  font-size: 0.5em;
  line-height: 1;
}

.marquee__item em {
  color: var(--accent);
}

@keyframes scroll-x {
  to {
    transform: translateX(-50%);
  }
}


/* ---------- Media + text: image on one side, copy on the other ---------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-alt);
  aspect-ratio: 4 / 5;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  transition: transform var(--dur-slow) var(--ease-soft);
}

.media.in img {
  transform: scale(1);
}

.media--wide {
  aspect-ratio: 16 / 10;
}

.media--card {
  aspect-ratio: 4 / 3;
}

.media__tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75);
}

/* Two-column split: media one side, words the other. */
.split-media {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.split-media--flip .media {
  order: 2;
}

/* Full-bleed image band with copy over it. */
.band {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
}

.band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The copy sits on the right, so keep that side dark enough to read on. */
  background: linear-gradient(
    100deg,
    rgba(19, 19, 22, 0.9) 0%,
    rgba(19, 19, 22, 0.78) 40%,
    rgba(19, 19, 22, 0.72) 100%
  );
}

/* Airy variant: let more of the photograph through, while keeping the right
   side (where the copy sits) dark enough for white text to stay legible. */
.band--airy .band__bg img {
  opacity: 0.72;
}

.band--airy .band__bg::after {
  background: linear-gradient(
    100deg,
    rgba(19, 19, 22, 0.74) 0%,
    rgba(19, 19, 22, 0.66) 35%,
    rgba(19, 19, 22, 0.74) 100%
  );
}

/* The band already sits inside a .section, which supplies the vertical padding.
   Adding its own on top made it far taller than its content and left a dead
   strip of photograph under the copy. */
.band .wrap {
  position: relative;
  z-index: 1;
}

.band h2,
.band h3 {
  color: #fff;
}

.band p {
  color: #c8c8ce;
}

.band .quote {
  color: #fff;
}

.band .eyebrow,
.band .sec-label {
  color: #9d9da8;
}

/* Image at the head of a card/column. */
.aud__media {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 26px;
  background: var(--bg-alt);
}

.aud__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}

.aud__col:hover .aud__media img {
  transform: scale(1.05);
}

@media (max-width: 860px) {
  .split-media {
    grid-template-columns: 1fr;
  }
  .split-media--flip .media {
    order: 0;
  }
}




/* ---------- Case bands (home): the image runs edge to edge and drifts against
   the scroll (JS writes the transform); the copy sits over it. ---------- */

.cbands {
  position: relative;
  z-index: 1;
  background: var(--dark);
}

/* Each band pins to the top and the next one rides up over it, so they stack —
   the same trick as the "What we do" pillars, at full-screen scale. */
.cband {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  height: 100svh;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

/* Darkens the band as the next one covers it. Driven by JS. */
.cband__dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #08080a;
  opacity: 0;
  pointer-events: none;
}

.cband__media {
  position: absolute;
  inset: -14% 0;      /* taller than the band, so it has room to drift */
  z-index: 0;
}

.cband__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transition: scale 1.6s var(--ease);
  scale: 1;
}

.cband:hover .cband__media img {
  scale: 1.05;
}

.cband__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Strong on the left, where the copy sits: the client artwork behind is busy
     and brightly coloured, so the text needs a floor to stand on. */
  background: linear-gradient(
      95deg,
      rgba(8, 8, 10, 0.95) 0%,
      rgba(8, 8, 10, 0.86) 30%,
      rgba(8, 8, 10, 0.5) 62%,
      rgba(8, 8, 10, 0.25) 100%
    ),
    linear-gradient(rgba(8, 8, 10, 0.6), rgba(8, 8, 10, 0.25));
  transition: opacity 0.6s var(--ease);
}

.cband:hover .cband__scrim {
  opacity: 0.86;
}

.cband__copy {
  position: relative;
  z-index: 2;
  display: block;
  /* The band pins at top 0 under the fixed header, so the copy has to clear it. */
  padding-top: calc(var(--header-h) + clamp(32px, 4vw, 60px));
  padding-bottom: clamp(40px, 5vw, 72px);
  max-width: min(var(--maxw), 100%);
}

.cband__n {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.cband__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #fff;
}

/* Line 1 — what the raise achieved. */
.cband__l1 {
  display: block;
  margin-top: 16px;
  max-width: 30ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.94);
}

/* Line 2 — what the work was. */
.cband__l2 {
  display: block;
  margin-top: 14px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
}

.cband__foot {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 38px);
}

.cband__metric {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.cband__metric b {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--accent);
  margin-right: 8px;
  vertical-align: -2px;
}

.cband__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
    color 0.45s var(--ease), gap 0.45s var(--ease);
}

.cband:hover .cband__go {
  background: var(--accent);
  border-color: var(--accent);
  gap: 14px;
}

@media (max-width: 860px) {
  .cband {
    min-height: 70svh;
  }
}

/* ---------- Work index: editorial card grid. The imagery is the point here,
   so it is always on screen — a staggered two-column rhythm, each frame
   drifting at its own speed as you scroll. ---------- */

.wcards {
  position: relative;
  z-index: 1;
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 90px) clamp(28px, 3.4vw, 56px);
  padding: clamp(48px, 6vw, 90px) var(--pad) clamp(70px, 8vw, 120px);
}

/* Every second card rides lower, so the eye zig-zags instead of marching. */
.wcard:nth-child(even) {
  margin-top: clamp(40px, 8vw, 130px);
}

.wcard {
  position: relative;
  display: block;
  color: var(--ink-strong);
}

.wcard__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  background: #101014;
}

.wcard__frame img {
  position: absolute;
  inset: -10% 0;          /* room to drift without exposing an edge */
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
  transition: scale 1.2s var(--ease), filter 0.8s var(--ease);
  scale: 1.02;
}

.wcard:hover .wcard__frame img {
  scale: 1.08;
}

/* Number, sat on the image. */

/* The metric floats over the bottom of the frame, on a blurred plate. */
.wcard__metric {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 100px;
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(10px);
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}

.wcard.in .wcard__metric {
  transform: none;
  opacity: 1;
}

.wcard__metric b {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.wcard__metric span {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.wcard__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
}

.wcard__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.wcard__sub {
  display: block;
  margin-top: 10px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.wcard__tags {
  display: block;
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.wcard__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease), transform 0.45s var(--ease);
}

.wcard:hover .wcard__arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translate(3px, -3px);
}

@media (max-width: 860px) {
  .wcards {
    grid-template-columns: 1fr;
    gap: clamp(36px, 8vw, 56px);
  }

  .wcard:nth-child(even) {
    margin-top: 0;
  }
}

/* ---------- Work list: stacked project rows. The imagery stays hidden until
   you hover a row — then it fades in behind the name and the row goes dark,
   after the Arpeggio project list. Still used for the "next case" link. ---------- */

.worklist {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.wrow {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  color: var(--ink-strong);
  isolation: isolate;
  transition: color 0.5s var(--ease);
}

.wrow__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  background: var(--dark);
}

.wrow__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transform: scale(1.12);
  transition: transform 1.4s var(--ease);
}

.wrow__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19, 19, 22, 0.9) 0%, rgba(19, 19, 22, 0.55) 55%, rgba(19, 19, 22, 0.3) 100%);
}

.wrow:hover {
  color: #fff;
}

.wrow:hover .wrow__bg {
  opacity: 1;
}

.wrow:hover .wrow__bg img {
  transform: scale(1);
}

.wrow__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding-top: clamp(28px, 3.4vw, 46px);
  padding-bottom: clamp(28px, 3.4vw, 46px);
  transition: transform 0.6s var(--ease);
}

.wrow:hover .wrow__inner {
  transform: translateX(10px);
}



.wrow__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.wrow__sub {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--muted);
  transition: color 0.5s var(--ease);
  max-width: 46ch;
}

.wrow:hover .wrow__sub {
  color: rgba(255, 255, 255, 0.78);
}

.wrow__meta {
  text-align: right;
  white-space: nowrap;
}

.wrow__meta b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.wrow__meta span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.5s var(--ease);
}

.wrow:hover .wrow__meta span {
  color: rgba(255, 255, 255, 0.6);
}

.wrow__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
}

.wrow:hover .wrow__arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateX(4px);
}

.worklist--next {
  background: var(--bg);
  border-top: 0;
}

/* ---------- Case study page ---------- */

.case-hero {
  position: relative;
  min-height: 72svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
  color: #fff;
  padding: calc(var(--header-h) + 60px) 0 clamp(40px, 5vw, 70px);
}

.case-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.case-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.case-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35) 45%, rgba(19, 19, 22, 0.95));
}

.case-hero__inner {
  position: relative;
  z-index: 1;
}

.case-hero .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.case-hero__name {
  margin: 14px 0 0;
  color: #fff;
}

.case-hero__tag {
  margin: 18px 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.9);
}

/* Facts strip */
.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 28px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  overflow: hidden;
}

.case-facts__col {
  background: var(--dark);
  padding: 20px 22px;
}

.case-facts__col--wide {
  grid-column: span 2;
}

.case-facts h4 {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8e8e98;
  margin: 0 0 8px;
}

.case-facts p {
  margin: 0;
  font-size: 14.5px;
  color: #d2d2d8;
}

.case-context {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.case-context li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.55;
  color: #55555c;
}

.case-context li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

.case-trigger {
  margin-top: 24px;
  font-size: 15px;
  color: #55555c;
}

.case-trigger b {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.case-stakes {
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 26px 30px;
  background: var(--dark);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
}

.case-stakes span {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.dlist--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 4vw, 64px);
}

/* Gallery: every image for the case, no captions. Wide pieces take two columns,
   tall pieces take two rows, so the grid stays dense without cropping badly. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 220px;
  gap: clamp(10px, 1.2vw, 18px);
  padding: 0 var(--pad);
  max-width: var(--maxw);
  margin: 26px auto 0;
}

.gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-alt);
}

.gallery__item--tall {
  grid-row: span 2;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.gallery__item:hover img {
  transform: scale(1.05);
}

@media (max-width: 860px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 150px;
  }
}

.case-relevant {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.case-relevant h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

.case-relevant ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(24px, 3vw, 48px);
}

.case-relevant li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: #c8c8ce;
}

.case-relevant li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 9px;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 860px) {
  .wrow__inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .wrow__meta {
    text-align: left;
  }
  .wrow__arrow {
    display: none;
  }
  .case-facts,
  .case-relevant ul,
  .dlist--2col,
  .case-gallery {
    grid-template-columns: 1fr;
  }
  .case-facts__col--wide {
    grid-column: span 1;
  }
}

/* ---------- Pillars (sticky stack) ---------- */

.pillars {
  display: grid;
  gap: 24px;
}

.pillar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(28px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  transition: box-shadow 0.5s ease;
}

.pillar:hover {
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.18);
}

.pillar__n {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--accent);
  letter-spacing: 0;
  padding-top: 6px;
}

.pillar h3 {
  /* One point up on the shared .h-3 size, only here. */
  font-size: clamp(22px, 1.7vw, 28px);
  margin-bottom: 14px;
}

.pillar p {
  margin: 0;
  color: #5b5b62;
  max-width: 68ch;
}

/* ---------- Cards / tiers ---------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.tier {
  background: var(--surface);
  padding: clamp(26px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: background 0.5s ease;
}

.tier:hover {
  background: #fcfbfa;
}

.tier__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.tier__tag b {
  color: var(--accent);
  font-weight: 500;
}

.tier h3 {
  margin: 0;
}

.tier p {
  margin: 0;
  color: #5b5b62;
  font-size: 15.5px;
  flex: 1;
}

.tier--feature {
  background: var(--dark);
  color: #d8d8dc;
}

.tier--feature:hover {
  background: var(--dark-2);
}

.tier--feature h3 {
  color: #fff;
}

.tier--feature p {
  color: #c3c3ca;
}

/* Detailed service block */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(36px, 4vw, 60px) 0;
  border-top: 1px solid var(--line);
  /* Stretch, so the image column can fill the height of the deliverables list
     instead of ending early and leaving a hole. */
  align-items: stretch;
}

.svc__aside {
  display: flex;
  flex-direction: column;
}

/* The image takes whatever height is left, so both columns finish together. */
.svc__aside .media {
  flex: 1;
  aspect-ratio: auto;
  min-height: 240px;
  margin-top: 34px;
}

.svc__num {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.svc__pos {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  margin: 0 0 26px;
  max-width: 44ch;
}

.dlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dlist li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}

.dlist li:first-child {
  padding-top: 0;
}

.dlist__k {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.dlist b {
  display: block;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink-strong);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.dlist span {
  color: #5b5b62;
  font-size: 15px;
  line-height: 1.55;
}

.svc__for {
  margin-top: 30px;
  padding: 20px 24px;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  font-size: 15px;
  color: #5b5b62;
  border-radius: 0 6px 6px 0;
}

.svc__for b {
  color: var(--ink-strong);
  font-weight: 600;
}

/* ---------- Comparison table ---------- */

/* ---------- Plan cards: the three tiers side by side. Replaces the old
   comparison table — a matrix of ticks read as a spreadsheet, not as an offer.
   The middle card is lifted, the way pricing tables signal the default pick. ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
  /* The featured card is pulled up out of the row, so the grid needs enough
     head-room of its own not to crowd the heading above it. */
  margin-top: clamp(64px, 7vw, 108px);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 38px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease),
    border-color 0.6s var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
  border-color: #d2d2ce;
  box-shadow: 0 24px 60px -34px rgba(20, 20, 24, 0.3);
}

/* The recommended tier: raised out of the row and given the weight to match. */
.plan--featured {
  margin-top: clamp(-34px, -2.4vw, -18px);
  padding-top: clamp(34px, 3.2vw, 48px);
  padding-bottom: clamp(34px, 3.2vw, 48px);
  border-color: transparent;
  background: #fff;
  box-shadow: 0 30px 70px -40px rgba(20, 20, 24, 0.42);
}

.plan__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.plan__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.plan__badge {
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(255, 68, 0, 0.1);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.plan--featured .plan__badge {
  background: var(--accent);
  color: #fff;
}

.plan__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
}

.plan__blurb {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.plan__cta {
  align-self: stretch;
  justify-content: center;
  margin-top: clamp(22px, 2.4vw, 30px);
}

.plan__inc-h {
  margin-top: clamp(26px, 2.6vw, 34px);
  padding-top: clamp(20px, 2vw, 26px);
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan__inc {
  margin-top: 16px;
  display: grid;
  gap: 11px;
  padding-left: 0;
  list-style: none;
}

.plan__inc li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-strong);
}

/* The tick: a small corner mark rather than a checkbox, to match the rest. */
.plan__inc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
}

.plan__inherit {
  font-weight: 600;
}

@media (max-width: 900px) {
  .plans {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .plan--featured {
    margin-top: 0;
  }
}


/* ---------- Steps (method) ---------- */

.steps {
  border-top: 1px solid var(--line);
}

.step {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(30px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  position: relative;
  transition: padding-left 0.5s var(--ease);
}

.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease);
}

.step:hover {
  padding-left: 24px;
}

.step:hover::before {
  transform: scaleY(1);
}

.step__n {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 44px);
  color: var(--faint);
  letter-spacing: -0.04em;
  transition: color 0.4s ease;
}

.step:hover .step__n {
  color: var(--accent);
}

.step h3 {
  margin: 0;
}

.step p {
  margin: 0;
  color: #5b5b62;
  font-size: 16px;
}

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  overflow: hidden;
}

.stat {
  background: var(--dark);
  /* Less side padding so the longest label ("…brand to market") fits one line. */
  padding: clamp(26px, 3vw, 40px) clamp(18px, 1.6vw, 24px);
}

.stat__n {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.stat__n .u {
  color: var(--accent);
}

/* Two single-class selectors tie on specificity and .stat__n wins by order,
   so .accent alone can't recolour the number. This does. */
.stat__n.accent {
  color: var(--accent);
}

.stat__l {
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8a8b2;
  white-space: nowrap;
}

.placeholder-note {
  margin-top: 18px;
  font-size: 12px;
  color: #8e8e98;
  letter-spacing: 0.02em;
}

/* ---------- Audience ---------- */

.aud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.aud__col {
  background: var(--bg);
  padding: clamp(30px, 3.6vw, 56px) clamp(24px, 3vw, 48px);
  transition: background 0.5s ease;
}

.aud__col:hover {
  background: var(--surface);
}

.aud__col h3 {
  margin: 0 0 16px;
}

.aud__col p {
  margin: 0;
  color: #5b5b62;
  max-width: 52ch;
}

.aud__tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

/* ---------- Beliefs ---------- */

.beliefs {
  counter-reset: b;
  border-top: 1px solid var(--line);
}

.belief {
  counter-increment: b;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 24px;
  padding: clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.belief::before {
  content: "0" counter(b);
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 0.1em;
}

.belief p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  text-wrap: balance;
}

.belief:hover p {
  color: var(--accent);
  transition: color 0.4s ease;
}

/* On a dark section the belief text would otherwise inherit the dark ink colour
   above and vanish into the background. */
.section--dark .belief p {
  color: #fff;
}

.section--dark .belief::before {
  color: #8e8e98;
}

.section--dark .belief {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.section--dark .beliefs {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* ---------- Contact ---------- */

.form {
  display: grid;
  gap: 22px;
}

.tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-alt);
  border-radius: 100px;
  gap: 4px;
  margin-bottom: 36px;
}

.tabs button {
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.3s ease, background 0.4s var(--ease);
}

.tabs button.is-active {
  background: var(--ink-strong);
  color: #fff;
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field label .req {
  color: var(--accent);
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ink-strong);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  border-radius: 0;
  transition: border-color 0.35s ease;
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23929298' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}

.field textarea {
  resize: vertical;
  min-height: 96px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #c4c4c8;
}

.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.form-msg {
  font-size: 14px;
  padding: 14px 18px;
  border-radius: 6px;
  display: none;
}

.form-msg.is-ok {
  display: block;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  color: var(--ink-strong);
}

.form-msg.is-err {
  display: block;
  background: #fdecec;
  border-left: 2px solid #d33;
  color: #8b1f1f;
}

.next {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.next li {
  background: var(--surface);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.next b {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.next span {
  font-size: 15px;
  color: #5b5b62;
}

.contact-cards {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.ccard {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.ccard__k {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ccard__v {
  font-size: 16px;
  color: var(--ink-strong);
}

/* ---------- Closing CTA ---------- */

.cta {
  background: var(--dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta__glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 760px;
  max-height: 760px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 68, 0, 0.22) 0%,
    rgba(255, 68, 0, 0) 62%
  );
  left: 50%;
  bottom: -34%;
  transform: translateX(-50%);
  pointer-events: none;
  animation: breathe 9s var(--ease-io) infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translateX(-50%) scale(1.16);
    opacity: 1;
  }
}

.cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(70px, 8vw, 120px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.cta h1,
.cta h2,
.cta h3 {
  color: #fff;
}

.cta .eyebrow {
  color: #9d9da8;
}

.cta__inner .lead {
  color: #c8c8ce;
  text-align: center;
  max-width: 54ch;
}

/* ---------- Footer ---------- */

/* ---------- Footer, after Arpeggio: the wordmark edge to edge, then a row of
   panels divided by hairlines, with the channel we want you to use lit up. ---------- */

.footer {
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.footer__mark {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
  padding: clamp(40px, 4.5vw, 68px) var(--pad) clamp(30px, 3.4vw, 48px);
}

.footer__mark img {
  display: block;
  width: 100%;
  height: auto;
}

.footer__where {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--ink);
}

.footer__where b {
  font-weight: 600;
  color: var(--ink-strong);
}

.footer__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 2px;
  animation: pulse 2.8s var(--ease-io) infinite;
}

/* The clock: Arpeggio's local-time tell, in our display face. */
.footer__clock {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}

.footer__tz {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__grid {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.5fr 1.1fr;
  border-top: 1px solid var(--line);
}

.footer__col {
  padding: clamp(30px, 3vw, 46px) clamp(22px, 2.4vw, 40px);
  border-right: 1px solid var(--line);
}

.footer__col:first-child {
  padding-left: var(--pad);
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.footer__links a {
  position: relative;
  display: inline-block;
  font-size: 17px;
  color: var(--ink-strong);
  transition: color 0.3s ease, transform 0.4s var(--ease);
}

.footer__links--muted a {
  color: var(--muted);
}

/* The underline is always there, in accent, and fills on hover — Arpeggio's tell. */
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 60%;
  bottom: -3px;
  height: 1px;
  background: var(--accent);
  transition: right 0.45s var(--ease);
}

.footer__links a:hover {
  color: var(--ink-strong);
}

.footer__links a:hover::after {
  right: 0;
}

.footer__col--pitch {
  background: var(--bg);
}

.footer__col--pitch h4 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.035em;
  color: var(--ink-strong);
  margin-bottom: 12px;
}

.footer__col--pitch p {
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
}

.tlink--light {
  color: var(--ink-strong);
}

/* Footer capture: one line, an underline and an arrow. Nothing else. */
.fsignal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.4s var(--ease);
}

.fsignal:focus-within {
  border-bottom-color: var(--accent);
}

.fsignal input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}

.fsignal input[type="email"]::placeholder {
  color: var(--muted);
}

.fsignal button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    transform 0.4s var(--ease);
}

.fsignal button:hover {
  background: var(--accent);
  color: #fff;
  transform: translateX(2px);
}

.fsignal button:disabled {
  opacity: 0.45;
  cursor: default;
}

.fsignal__msg {
  min-height: 18px;
  margin-top: 10px;
  font-size: 13px;
}

.fsignal__msg.is-ok {
  color: #1f9d57;
}

.fsignal__msg.is-err {
  color: #d23b00;
}

.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;
}

/* Channels: full-bleed rows, the first one lit. */
.footer__chan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.footer__chan li {
  flex: 1;
  border-bottom: 1px solid var(--line);
}

.footer__chan li:last-child {
  border-bottom: 0;
}

.footer__chan a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  min-height: 62px;
  padding: 12px clamp(20px, 2.2vw, 34px);
  font-size: 16px;
  color: var(--ink-strong);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    padding 0.4s var(--ease);
}

.footer__chan a span {
  color: var(--accent);
  transition: transform 0.4s var(--ease);
}

.footer__chan a:hover {
  background: var(--bg);
  padding-left: clamp(26px, 2.8vw, 42px);
}

.footer__chan a:hover span {
  transform: translateX(4px);
}

.footer__chan .is-primary {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.footer__chan .is-primary span {
  color: #fff;
}

.footer__chan .is-primary:hover {
  background: #e63c00;
}

.footer__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px var(--pad);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

.footer__addr b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 1000px) {
  .footer__mark,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__col {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.to-top:hover {
  color: var(--accent);
}

/* ---------- Misc chrome ---------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
  z-index: 101;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 500;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease), height 0.35s var(--ease),
    opacity 0.3s ease;
  opacity: 0;
}

.cursor.is-visible {
  opacity: 1;
}

.cursor.is-hover {
  width: 46px;
  height: 46px;
  opacity: 0.28;
}

@media (hover: none) {
  .cursor {
    display: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .grid-2,
  .svc {
    grid-template-columns: 1fr;
  }
  .svc__aside {
    position: static;
  }
  .tiers,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .step {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .step p {
    grid-column: 2;
  }
  .pillar {
    position: static;
  }
}

@media (max-width: 860px) {
  .nav,
  .header__cta .btn {
    display: none;
  }
  .burger {
    display: flex;
  }
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__meta {
    text-align: left;
    order: -1;
  }
  .aud,
  .tiers,
  .stats,
  .fgrid {
    grid-template-columns: 1fr;
  }
  .footer__top {
    grid-template-columns: 1fr;
  }
  .pillar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal],
  .split .word > span,
  .mask,
  .draw,
  .zoom > *,
  .slide-l,
  .slide-r,
  .hero-scale,
  .stage__media img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* The stage is driven entirely by scroll. With motion off there is nothing to
     drive it, so collapse it to a plain full-screen hero instead of leaving
     three viewports of empty black behind. */
  .stage {
    height: auto;
  }

  .stage__pin {
    position: static;
    height: auto;
    min-height: 100svh;
  }

  .stage__floats {
    display: none;
  }
}