:root {
  --ink: #0b1320;
  --ink-2: #111c2e;
  --paper: #faf7f2;
  --paper-2: #f1ede6;
  --white: #fffdf9;
  --teal: #00abf4;
  --teal-wash: #e3f6ff;
  --amber: #e8a33d;
  --amber-wash: #fbf0dc;
  --slate: #5b6470;
  --slate-light: #aab4c3;
  --line: rgba(11, 19, 32, 0.12);
  --line-dark: rgba(255, 255, 255, 0.14);
  --shadow: 0 32px 80px -42px rgba(6, 20, 35, 0.55);
  --radius: 24px;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-sans: "Manrope", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  content: "";
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

img { display: block; width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
}

::selection {
  color: var(--ink);
  background: var(--teal);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 16px;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

h1, h2, h3, p, figure, blockquote { margin-top: 0; }
h1, h2, h3, blockquote { text-wrap: balance; }
p, li { text-wrap: pretty; }

h1, h2, h3, blockquote {
  font-family: var(--font-display);
  font-weight: 600;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(48px, 6vw, 76px);
  letter-spacing: -0.05em;
  line-height: 0.98;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(38px, 4.7vw, 62px);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

h3 {
  margin-bottom: 16px;
  font-size: clamp(24px, 2.5vw, 33px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.hero .eyebrow,
.experience .eyebrow,
.contact .eyebrow { color: var(--teal); }

.lede {
  max-width: 680px;
  color: var(--slate);
  font-size: clamp(17px, 1.7vw, 20px);
}

.highlight {
  padding: 0 2px;
  background: linear-gradient(180deg, transparent 62%, rgba(232, 163, 61, 0.5) 62%, rgba(232, 163, 61, 0.5) 94%, transparent 94%);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 8px 8px 24px;
  color: var(--ink);
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.button > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  background: rgba(11, 19, 32, 0.12);
  border-radius: 50%;
}

.button:hover {
  box-shadow: 0 20px 48px -24px rgba(0, 171, 244, 0.85);
  transform: translateY(-2px);
}

.button.ghost {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
}

.button.ghost > span { background: rgba(255, 255, 255, 0.1); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: 86px;
  background: rgba(250, 247, 242, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.nav {
  display: flex;
  width: min(1240px, calc(100% - 40px));
  height: 86px;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  color: var(--ink);
  background: var(--teal);
  border-radius: 10px;
}

.brand-mark svg { width: 17px; height: 17px; }
.brand-lockup { display: grid; gap: 4px; line-height: 1; }

.brand-lockup strong {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.025em;
}

.brand-lockup small {
  color: var(--slate);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 2vw, 28px);
}

.nav-links a {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.nav-links a:not(.nav-cta) {
  position: relative;
  padding: 12px 0;
}

.nav-links a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease);
}

.nav-links a:not(.nav-cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  background: var(--teal);
  border-radius: 999px;
}

.nav-cta::after {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  content: "→";
  background: rgba(11, 19, 32, 0.12);
  border-radius: 50%;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 76% 18%, rgba(0, 171, 244, 0.17), transparent 28rem),
    var(--ink);
}

.hero-grid {
  display: grid;
  min-height: calc(100dvh - 134px);
  grid-template-columns: minmax(0, 0.95fr) minmax(430px, 1.05fr);
  align-items: center;
  gap: 72px;
  padding-top: 72px;
  padding-bottom: 72px;
}

.hero-lede {
  max-width: 680px;
  margin-bottom: 16px;
  color: var(--white);
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 650;
}

.hero-detail {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--slate-light);
}

.hero-credentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 48px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.hero-credentials div {
  display: grid;
  gap: 2px;
  padding: 16px 24px 16px 0;
}

.hero-credentials div + div {
  padding-left: 24px;
  border-left: 1px solid var(--line-dark);
}

.hero-credentials strong {
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 24px;
}

.hero-credentials span {
  color: var(--slate-light);
  font-size: 10px;
}

.hero-kinetic {
  min-height: 650px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: 0 48px 100px -48px rgba(0, 0, 0, 0.8), inset 0 1px rgba(255,255,255,.08);
}

.kinetic-stage {
  position: relative;
  min-height: 634px;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 43%, rgba(0, 171, 244, 0.16), transparent 15rem),
    var(--ink-2);
  border-radius: var(--radius);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.kinetic-stage::before,
.kinetic-stage::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  opacity: .55;
  pointer-events: none;
}

.kinetic-stage::before {
  top: -110px;
  right: -120px;
  width: 330px;
  height: 330px;
  border: 40px solid rgba(0,171,244,.14);
}

.kinetic-stage::after {
  right: 80px;
  bottom: -100px;
  width: 230px;
  height: 230px;
  border: 30px solid rgba(232,163,61,.12);
}

.kinetic-field {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  opacity: .18;
}

.kinetic-field i {
  border-right: 1px solid rgba(255,255,255,.12);
  transform: translateY(-10%);
  animation: field-breathe 7s var(--ease) infinite alternate;
}

.kinetic-field i:nth-child(2) { animation-delay: -.6s; }
.kinetic-field i:nth-child(3) { animation-delay: -1.2s; }
.kinetic-field i:nth-child(4) { animation-delay: -1.8s; }
.kinetic-field i:nth-child(5) { animation-delay: -2.4s; }
.kinetic-field i:nth-child(6) { animation-delay: -3s; }

.kinetic-axis {
  position: absolute;
  top: 47%;
  right: 7%;
  left: 7%;
  height: 2px;
  background: rgba(255,255,255,.14);
}

.kinetic-axis::before,
.kinetic-axis::after {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(232,163,61,.1);
  animation: axis-travel 4.8s var(--ease) infinite;
}

.kinetic-axis::after {
  background: var(--teal);
  box-shadow: 0 0 0 8px rgba(0,171,244,.1);
  animation-delay: -2.4s;
}

.kinetic-side-label {
  position: absolute;
  top: 27px;
  color: var(--slate-light);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.side-input { left: 28px; }
.side-output { right: 28px; }

.raw-material {
  position: absolute;
  left: 4.5%;
  z-index: 3;
  display: grid;
  width: 29%;
  min-height: 47px;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  box-shadow: 0 18px 42px -28px rgba(0,0,0,.75);
  will-change: transform, opacity;
  animation: material-feed 4.8s var(--ease) infinite;
}

.raw-material span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  background: var(--teal-wash);
  border-radius: 50%;
  font-size: 7px;
  font-weight: 800;
}

.raw-material strong {
  min-width: 0;
  font-size: clamp(6.5px, .72vw, 8px);
  letter-spacing: .035em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

.raw-one { top: 16%; animation-delay: 0s; }
.raw-two { top: 26%; animation-delay: .14s; }
.raw-three { top: 36%; animation-delay: .28s; }
.raw-four { top: 50%; animation-delay: .42s; }
.raw-five { top: 60%; animation-delay: .56s; }

.industrial-press {
  position: absolute;
  top: 15%;
  left: 31.5%;
  z-index: 4;
  width: 38%;
  min-width: 200px;
  filter: drop-shadow(0 28px 32px rgba(0,0,0,.28));
}

.industrial-press svg { display: block; width: 100%; overflow: visible; }

.industrial-press path,
.industrial-press circle {
  vector-effect: non-scaling-stroke;
}

.press-frame,
.press-rail,
.press-base {
  stroke: rgba(255,255,255,.52);
  stroke-width: 2;
}

.press-head {
  fill: var(--teal);
  stroke: var(--ink);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
  animation: press-cycle 4.8s var(--ease) infinite;
}

.press-platen {
  fill: rgba(232,163,61,.92);
  stroke: var(--ink);
  stroke-width: 2;
}

.press-joint {
  fill: var(--ink);
  stroke: var(--teal);
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
  animation: joint-turn 4.8s var(--ease) infinite;
}

.press-pulse {
  stroke: var(--white);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .2;
  transform-box: fill-box;
  transform-origin: center;
  animation: platen-flash 4.8s var(--ease) infinite;
}

.press-title {
  position: absolute;
  top: 4.5%;
  left: 68%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 4px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(11,19,32,.16);
  border-radius: 999px;
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.8);
  transform: translateX(-50%);
  white-space: nowrap;
}

.press-title span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--ink);
  background: var(--teal-wash);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
}

.press-title strong {
  width: 48px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.05;
  white-space: normal;
}

.press-head-label,
.press-platen-label {
  position: absolute;
  left: 50%;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.press-head-label {
  top: 48.5%;
  display: grid;
  color: var(--ink);
  text-align: center;
}

.press-head-label strong {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
}

.press-head-label span {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.press-platen-label {
  top: 71.5%;
  color: var(--ink);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .11em;
}

.press-glow {
  position: absolute;
  top: 64%;
  left: 50%;
  width: 120px;
  height: 26px;
  background: var(--amber);
  border-radius: 50%;
  opacity: .16;
  transform: translate(-50%, -50%) scale(.6);
  will-change: transform, opacity;
  animation: press-glow 4.8s var(--ease) infinite;
}

.market-piece {
  position: absolute;
  right: 4.5%;
  z-index: 5;
  display: flex;
  width: 27%;
  align-items: center;
  gap: 9px;
  color: var(--white);
  opacity: 0;
  transform: translateX(-32px) rotate(-2deg);
  will-change: transform, opacity;
  animation: piece-emerge 4.8s var(--ease) infinite;
}

.market-piece i {
  width: 26px;
  height: 4px;
  flex: none;
  background: var(--teal);
}

.market-piece span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.piece-one { top: 18%; animation-delay: 1.48s; }
.piece-two { top: 28%; animation-delay: 1.62s; }
.piece-three { top: 38%; animation-delay: 1.76s; }
.piece-four { top: 52%; animation-delay: 1.9s; }
.piece-five { top: 62%; animation-delay: 2.04s; }
.piece-six { top: 72%; animation-delay: 2.18s; }
.piece-two i, .piece-five i { background: var(--amber); }

.kinetic-caption {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  z-index: 6;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.28);
}

.kinetic-caption span {
  padding-top: 4px;
  color: var(--teal);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
}

.kinetic-caption strong {
  max-width: 430px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
}

@keyframes field-breathe {
  from { transform: translateY(-10%); opacity: .55; }
  to { transform: translateY(10%); opacity: 1; }
}

@keyframes axis-travel {
  0% { opacity: 0; transform: translateX(0) scale(.7); }
  12% { opacity: 1; }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translateX(440px) scale(1.15); }
}

@keyframes material-feed {
  0%, 10% { opacity: 0; transform: translateX(-24px) rotate(-2deg); }
  18%, 38% { opacity: 1; transform: translateX(0) rotate(0); }
  52%, 100% { opacity: 0; transform: translateX(96px) rotate(1deg); }
}

@keyframes press-cycle {
  0%, 37%, 68%, 100% { transform: translateY(0); }
  48%, 57% { transform: translateY(34px); }
}

.press-head-label {
  animation: press-label-cycle 4.8s var(--ease) infinite;
}

@keyframes press-label-cycle {
  0%, 37%, 68%, 100% { transform: translate(-50%, -50%); }
  48%, 57% { transform: translate(-50%, calc(-50% + 34px)); }
}

@keyframes joint-turn {
  0%, 38% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(180deg); }
}

@keyframes platen-flash {
  0%, 46%, 62%, 100% { opacity: .12; transform: scaleX(.5); }
  52%, 57% { opacity: 1; transform: scaleX(1.35); }
}

@keyframes press-glow {
  0%, 43%, 65%, 100% { opacity: .08; transform: translate(-50%, -50%) scale(.5); }
  53%, 58% { opacity: .55; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes piece-emerge {
  0%, 41% { opacity: 0; transform: translateX(-32px) rotate(-2deg); }
  54%, 80% { opacity: 1; transform: translateX(0) rotate(0); }
  100% { opacity: .3; transform: translateX(12px) rotate(1deg); }
}

.hero-ribbon {
  position: relative;
  z-index: 2;
  padding: 17px 0;
  color: var(--ink);
  background: var(--teal);
}

.hero-ribbon .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hero-ribbon span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-ribbon i {
  width: 4px;
  height: 4px;
  background: var(--ink);
  border-radius: 50%;
}

/* Reality */
.reality { padding: 112px 0; background: var(--paper); }
.reality-intro { max-width: 900px; margin-bottom: 64px; }
.reality-layout { display: grid; grid-template-columns: 1.25fr .75fr; align-items: start; gap: 72px; }
.reality-stories { border-top: 1px solid var(--line); }

.reality-stories article {
  display: grid;
  grid-template-columns: 44px 1.4fr 90px .8fr;
  align-items: start;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.reality-stories article > span {
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.reality-stories h3 {
  margin-bottom: 8px;
  font-size: 26px;
}

.reality-stories article div p {
  margin: 0;
  color: var(--slate);
  font-size: 13px;
}

.reality-stories article > strong {
  color: var(--slate);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reality-stories .cost {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.consequence-card {
  position: sticky;
  top: 118px;
  padding: 32px;
  color: var(--white);
  background: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.consequence-card .eyebrow { color: var(--teal); }

.consequence-card blockquote {
  margin: 0 0 32px;
  font-size: clamp(34px, 4vw, 49px);
  letter-spacing: -.04em;
  line-height: 1.03;
}

.consequence-card blockquote span { color: var(--amber); }
.consequence-card > div { border-top: 1px solid var(--line-dark); }

.consequence-card > div p {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
}

.consequence-card p i {
  color: var(--teal);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.consequence-card p > span { display: grid; }
.consequence-card p strong { font-size: 12px; }
.consequence-card p span { color: var(--slate-light); font-size: 9px; }

/* Experience */
.experience {
  padding: 112px 0;
  color: var(--white);
  background:
    radial-gradient(circle at 14% 32%, rgba(0,171,244,.16), transparent 25rem),
    var(--ink);
}

.experience-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 80px;
}

.experience-proof-visual {
  position: relative;
  min-height: 650px;
  perspective: 1100px;
}

.proof-poster {
  position: absolute;
  border-radius: var(--radius);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.72);
}

.proof-poster-back {
  top: 24px;
  right: 0;
  bottom: 70px;
  left: 70px;
  padding: 34px;
  color: var(--ink);
  background: var(--teal);
  transform: rotate(5deg);
}

.proof-poster-back span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
}

.proof-poster-back i {
  display: block;
  width: 72px;
  height: 6px;
  margin: 40px 0 24px;
  background: var(--ink);
}

.proof-poster-back strong {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}

.proof-poster-front {
  top: 70px;
  right: 48px;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 34px;
  color: var(--ink);
  background:
    linear-gradient(rgba(11,19,32,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,19,32,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 32px 32px;
  transform: rotate(-2deg);
}

.proof-poster-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}

.proof-poster-head span {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.proof-poster-head small {
  color: var(--slate);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.proof-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0 10px;
  margin-top: 36px;
}

.proof-stat > strong {
  grid-row: 1 / span 2;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 104px;
  letter-spacing: -.08em;
  line-height: .75;
}

.proof-stat > span {
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.proof-stat > p {
  max-width: 250px;
  margin: 5px 0 0;
  color: var(--slate);
  font-size: 10px;
}

.proof-divider {
  width: 100%;
  height: 1px;
  margin: 34px 0;
  background: rgba(11,19,32,.2);
}

.proof-stat-small { margin-top: 0; }
.proof-stat-small > strong { color: var(--amber); font-size: 74px; }

.proof-stamp {
  position: absolute;
  right: 30px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--slate);
  transform: rotate(-7deg);
}

.proof-stamp span {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.25;
  text-align: right;
}

.proof-stamp i {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.experience-copy h2 { max-width: 760px; }
.experience-lede { color: var(--white); font-family: var(--font-display); font-size: 24px; line-height: 1.35; }
.experience-copy > p:not(.eyebrow):not(.experience-lede) { color: var(--slate-light); }
.experience-points { margin-top: 40px; border-top: 1px solid var(--line-dark); }

.experience-points p {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 2px 16px;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
}

.experience-points p > span {
  grid-row: 1 / span 2;
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
}

.experience-points strong { font-size: 13px; }
.experience-points small { color: var(--slate-light); font-size: 10px; }

/* Services */
.services { padding: 112px 0; background: var(--white); }
.services-intro { max-width: 850px; margin-bottom: 72px; }
.service-list { border-top: 1px solid var(--line); }

.service-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1.2fr) minmax(310px, .8fr);
  align-items: center;
  gap: 40px;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}

.service-number {
  align-self: start;
  padding-top: 4px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.service-kicker {
  margin-bottom: 12px;
  color: var(--slate);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.service-copy > p:not(.service-kicker):not(.service-meta) {
  max-width: 700px;
  color: var(--slate);
}

.service-help {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.service-help strong {
  width: 100%;
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.service-help span {
  padding: 7px 11px;
  color: var(--slate);
  background: var(--paper-2);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
}

.service-meta {
  margin: 24px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.service-art {
  position: relative;
  min-height: 300px;
  padding: 28px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.show-art {
  color: var(--white);
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    var(--ink);
  background-size: 28px 28px;
}

.show-booth {
  position: absolute;
  bottom: 42px;
  left: 50%;
  z-index: 2;
  width: 52%;
  height: 190px;
  border-right: 3px solid rgba(255,255,255,.68);
  border-bottom: 3px solid rgba(255,255,255,.68);
  border-left: 3px solid rgba(255,255,255,.68);
  transform: translateX(-50%);
}

.booth-sign {
  position: absolute;
  top: 0;
  right: -15px;
  left: -15px;
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  color: var(--ink);
  background: var(--teal);
  box-shadow: 0 12px 30px -18px rgba(0,171,244,.9);
}

.booth-sign span { font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.booth-sign i { width: 19px; height: 4px; background: var(--ink); border-radius: 999px; animation: booth-signal 2.8s ease-in-out infinite; }

.booth-screen {
  position: absolute;
  top: 65px;
  left: 16px;
  display: grid;
  width: 72px;
  height: 60px;
  place-content: center;
  color: var(--white);
  background: #15253b;
  border: 2px solid rgba(255,255,255,.38);
  text-align: center;
}

.booth-screen small { color: var(--teal); font-size: 5px; font-weight: 800; letter-spacing: .1em; }
.booth-screen strong { margin-top: 2px; font-family: var(--font-display); font-size: 16px; }

.booth-counter {
  position: absolute;
  right: 13px;
  bottom: 0;
  display: grid;
  width: 68px;
  height: 58px;
  place-items: center;
  color: var(--ink);
  background: var(--amber);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

.booth-counter span { font-size: 5px; font-weight: 800; letter-spacing: .08em; }

.show-invite,
.show-follow {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 104px;
  gap: 3px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--white);
  border-radius: 13px;
  box-shadow: 0 18px 32px -22px rgba(0,0,0,.9);
}

.show-invite { top: 24px; left: 18px; transform: rotate(-3deg); animation: show-invite 6s var(--ease) infinite; }
.show-follow { top: 54px; right: 16px; transform: rotate(3deg); animation: show-follow 6s var(--ease) infinite; }
.show-invite small, .show-follow small { color: var(--teal); font-size: 5px; font-weight: 800; letter-spacing: .12em; }
.show-invite strong, .show-follow strong { font-family: var(--font-display); font-size: 11px; line-height: 1.05; }
.show-invite span { margin-top: 4px; padding-top: 4px; color: var(--slate); border-top: 1px solid var(--line); font-size: 5px; font-weight: 800; }
.show-follow small { color: var(--amber); }

.show-path { position: absolute; right: 28px; bottom: 25px; left: 28px; height: 2px; background: rgba(255,255,255,.18); }
.show-path::after {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(0,171,244,.12);
  animation: show-path 6s var(--ease) infinite;
}

.show-visitor { position: absolute; bottom: 36px; z-index: 3; width: 18px; height: 38px; animation: show-visitor 6s var(--ease) infinite; }
.show-visitor i { position: absolute; top: 0; left: 5px; width: 9px; height: 9px; background: var(--paper); border-radius: 50%; }
.show-visitor span { position: absolute; bottom: 0; left: 3px; width: 13px; height: 25px; background: var(--paper); border-radius: 7px 7px 2px 2px; }
.visitor-one { left: 14%; }
.visitor-two { left: 23%; animation-delay: -.55s; }

.launch-art { background: var(--amber-wash); }
.launch-art::before,
.launch-art::after {
  position: absolute;
  top: 46%;
  left: 50%;
  content: "";
  border: 1px solid rgba(232,163,61,.36);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: launch-ring 4.8s ease-out infinite;
}
.launch-art::before { width: 125px; height: 125px; }
.launch-art::after { width: 185px; height: 185px; animation-delay: -2.4s; }

.launch-calendar {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  display: grid;
  width: 56px;
  height: 58px;
  place-content: center;
  color: var(--white);
  background: var(--ink);
  border-radius: 12px;
  text-align: center;
}
.launch-calendar small { color: var(--teal); font-size: 5px; font-weight: 800; letter-spacing: .12em; }
.launch-calendar strong { font-family: var(--font-display); font-size: 19px; line-height: 1; }

.launch-product {
  position: absolute;
  top: 76px;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 102px;
  height: 92px;
  place-content: center;
  color: var(--white);
  background: var(--ink);
  border: 4px solid var(--teal);
  box-shadow: 0 28px 34px -26px rgba(11,19,32,.8);
  text-align: center;
  transform: translateX(-50%);
  animation: product-reveal 4.8s var(--ease) infinite;
}
.launch-product span { font-size: 6px; font-weight: 800; letter-spacing: .12em; }
.launch-product i { width: 34px; height: 5px; margin: 10px auto 0; background: var(--amber); }
.launch-product b { position: absolute; right: 14px; bottom: 13px; left: 14px; height: 2px; background: rgba(255,255,255,.24); }

.launch-channel {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--slate);
  font-size: 5.5px;
  font-weight: 800;
  letter-spacing: .08em;
  animation: channel-arrive 4.8s var(--ease) infinite;
}
.launch-channel i { width: 10px; height: 10px; background: var(--teal); border: 3px solid var(--white); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.launch-sales { top: 105px; left: 17px; }
.launch-partners { top: 48px; right: 17px; animation-delay: .16s; }
.launch-market { top: 142px; right: 22px; animation-delay: .32s; }
.launch-market i { background: var(--amber); }

.launch-timeline {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 14px;
  border-top: 2px solid rgba(11,19,32,.15);
  color: var(--slate);
  font-size: 5.5px;
  font-weight: 800;
  text-align: center;
}
.launch-timeline i {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--ink);
  border: 2px solid var(--amber);
  border-radius: 50%;
  animation: launch-timeline 4.8s var(--ease) infinite;
}

.content-art { background: var(--teal-wash); }
.expert-source {
  position: absolute;
  top: 22px;
  right: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.expert-avatar { display: grid; width: 44px; height: 44px; flex: none; place-items: center; color: var(--white); background: var(--ink); border-radius: 50%; font-family: var(--font-display); font-size: 11px; font-weight: 700; }
.expert-bubble { position: relative; display: grid; gap: 3px; padding: 10px 12px; background: var(--white); border-radius: 13px; box-shadow: 0 12px 26px -22px rgba(11,19,32,.55); }
.expert-bubble::before { position: absolute; top: 15px; left: -7px; width: 14px; height: 14px; content: ""; background: var(--white); transform: rotate(45deg); }
.expert-bubble small, .expert-bubble strong { position: relative; z-index: 1; }
.expert-bubble small { color: var(--teal); font-size: 5px; font-weight: 800; letter-spacing: .11em; }
.expert-bubble strong { font-family: var(--font-display); font-size: 10px; line-height: 1.15; }

.content-flow {
  position: absolute;
  top: 103px;
  right: 26px;
  left: 72px;
  display: flex;
  justify-content: space-between;
  color: var(--slate);
  font-size: 5px;
  font-weight: 800;
  letter-spacing: .08em;
}
.content-flow b { position: absolute; top: -14px; left: 0; color: var(--teal); font-size: 5px; font-weight: 800; letter-spacing: .11em; }
.content-flow i { position: absolute; top: 15px; right: 0; left: 0; height: 2px; overflow: hidden; background: rgba(11,19,32,.13); }
.content-flow i::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, var(--teal), transparent); transform: translateX(-100%); animation: content-flow 4.6s linear infinite; }

.content-stack { position: absolute; right: 18px; bottom: 20px; left: 18px; height: 130px; }
.content-card {
  position: absolute;
  display: grid;
  width: 46%;
  height: 94px;
  align-content: start;
  gap: 4px;
  padding: 12px;
  background: var(--white);
  border: 1px solid rgba(11,19,32,.09);
  border-radius: 13px;
  box-shadow: 0 18px 32px -24px rgba(11,19,32,.55);
  animation: content-card-float 5.2s var(--ease) infinite;
}
.content-card small { color: var(--teal); font-size: 5px; font-weight: 800; letter-spacing: .12em; }
.content-card strong { font-family: var(--font-display); font-size: 11px; line-height: 1.05; }
.content-card i { height: 3px; margin-top: 5px; background: var(--paper-2); }
.content-card i + i { width: 70%; margin-top: 0; }
.content-tof { bottom: 0; left: 0; z-index: 1; transform: rotate(-4deg); }
.content-mof { bottom: 14px; left: 28%; z-index: 2; color: var(--white); background: var(--ink); animation-delay: -.35s; }
.content-mof i { background: rgba(255,255,255,.2); }
.content-bof { right: 0; bottom: 28px; z-index: 3; background: var(--teal); animation-delay: -.7s; }
.content-bof small { color: var(--ink); }

.lead-art { background: var(--paper-2); }
.lead-track { position: absolute; top: 50%; right: 38px; left: 38px; height: 3px; background: rgba(11,19,32,.14); }
.lead-track i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal), var(--amber)); transform: scaleX(.15); transform-origin: left; animation: lead-progress 5.4s var(--ease) infinite; }
.lead-track b { position: absolute; top: -5px; left: 0; width: 13px; height: 13px; background: var(--ink); border: 3px solid var(--teal); border-radius: 50%; box-shadow: 0 0 0 7px rgba(0,171,244,.12); animation: lead-travel 5.4s var(--ease) infinite; }

.lead-question,
.lead-offer,
.lead-conversation {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 16px 30px -24px rgba(11,19,32,.5);
}
.lead-question { top: 83px; left: 17px; width: 82px; min-height: 116px; gap: 4px; padding: 12px; }
.lead-question > span { display: grid; width: 28px; height: 28px; place-items: center; color: var(--ink); background: var(--teal); border-radius: 50%; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.lead-question small, .lead-offer small, .lead-conversation small { margin-top: 4px; color: var(--slate); font-size: 4.5px; font-weight: 800; letter-spacing: .08em; }
.lead-question strong { font-family: var(--font-display); font-size: 10px; line-height: 1.05; }

.lead-offer { top: 56px; left: 50%; width: 110px; min-height: 160px; gap: 6px; padding: 14px; border-top: 5px solid var(--amber); transform: translateX(-50%); animation: guide-open 5.4s var(--ease) infinite; }
.lead-offer small { color: var(--amber); }
.lead-offer strong { font-family: var(--font-display); font-size: 13px; line-height: 1.08; }
.lead-offer span { margin-top: 7px; padding-top: 7px; color: var(--teal); border-top: 1px solid var(--line); font-size: 5px; font-weight: 800; }

.lead-conversation { top: 83px; right: 16px; width: 84px; min-height: 116px; gap: 10px; padding: 12px 10px; }
.lead-conversation > div { display: flex; align-items: center; justify-content: center; }
.lead-conversation > div span { display: grid; width: 27px; height: 27px; place-items: center; color: var(--white); background: var(--ink); border-radius: 50%; font-size: 4.5px; font-weight: 800; }
.lead-conversation > div span:last-child { color: var(--ink); background: var(--teal); }
.lead-conversation > div i { width: 16px; height: 2px; background: var(--amber); }
.lead-conversation small { color: var(--ink); text-align: center; }

.newsletter-art { color: var(--white); background: var(--ink); }
.newsletter-art::before { position: absolute; top: -80px; right: -65px; width: 190px; height: 190px; content: ""; border: 22px solid rgba(0,171,244,.22); border-radius: 50%; }
.inbox-shell {
  position: absolute;
  top: 18px;
  right: 28px;
  left: 28px;
  height: 220px;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 16px;
  box-shadow: 0 28px 44px -28px rgba(0,0,0,.8);
}
.inbox-top { position: relative; z-index: 4; display: flex; height: 38px; align-items: center; gap: 7px; padding: 0 12px; background: var(--white); border-bottom: 1px solid var(--line); }
.inbox-top i { width: 8px; height: 8px; background: var(--teal); border-radius: 50%; box-shadow: 12px 0 var(--amber), 24px 0 rgba(11,19,32,.18); }
.inbox-top span { margin-left: 22px; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.inbox-top small { margin-left: auto; padding: 3px 6px; color: var(--ink); background: var(--teal-wash); border-radius: 999px; font-size: 5px; font-weight: 800; }

.newsletter-envelope { position: absolute; right: 18px; bottom: 14px; left: 18px; height: 115px; background: var(--teal); border-radius: 10px; }
.envelope-flap { position: absolute; inset: 0; z-index: 3; background: #38bcf7; clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); transform-origin: top; animation: envelope-open 5.2s var(--ease) infinite; }
.newsletter-sheet {
  position: absolute;
  right: 11px;
  bottom: 10px;
  left: 11px;
  z-index: 2;
  display: grid;
  height: 158px;
  align-content: start;
  gap: 7px;
  padding: 14px;
  color: var(--ink);
  background: var(--white);
  border-top: 5px solid var(--amber);
  box-shadow: 0 12px 24px -18px rgba(0,0,0,.55);
  animation: newsletter-rise 5.2s var(--ease) infinite;
}
.newsletter-sheet small { color: var(--teal); font-size: 5px; font-weight: 800; letter-spacing: .12em; }
.newsletter-sheet strong { max-width: 180px; font-family: var(--font-display); font-size: 15px; line-height: 1.05; }
.newsletter-sheet i { height: 3px; background: var(--paper-2); }
.newsletter-sheet i:nth-of-type(2) { width: 78%; }
.newsletter-sheet i:nth-of-type(3) { width: 55%; }

.newsletter-rhythm { position: absolute; right: 24px; bottom: 18px; left: 24px; display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--slate-light); font-size: 5px; font-weight: 800; letter-spacing: .06em; }
.newsletter-rhythm i { height: 1px; flex: 1; background: rgba(255,255,255,.24); }
.newsletter-rhythm span:nth-of-type(2) { color: var(--teal); }

.podcast-art { color: var(--white); background: var(--ink); }
.podcast-art::before { position: absolute; right: -55px; bottom: -65px; width: 170px; height: 170px; content: ""; border: 22px solid rgba(232,163,61,.18); border-radius: 50%; }
.podcast-topic { position: absolute; top: 22px; right: 22px; left: 22px; z-index: 2; display: grid; gap: 5px; padding-bottom: 13px; border-bottom: 1px solid var(--line-dark); }
.podcast-topic small { color: var(--teal); font-size: 5px; font-weight: 800; letter-spacing: .14em; }
.podcast-topic strong { max-width: 240px; font-family: var(--font-display); font-size: 22px; line-height: .95; }

.podcast-studio { position: absolute; right: 24px; bottom: 35px; left: 24px; display: grid; grid-template-columns: 74px 1fr 74px; align-items: end; }
.podcast-person { position: relative; height: 120px; }
.podcast-person::before { position: absolute; top: 4px; left: 50%; width: 35px; height: 35px; content: ""; background: var(--paper); border: 5px solid #1b2b40; border-radius: 50%; transform: translateX(-50%); }
.podcast-person::after { position: absolute; bottom: 18px; left: 50%; width: 54px; height: 59px; content: ""; background: #1b2b40; border-radius: 27px 27px 9px 9px; transform: translateX(-50%); }
.podcast-person span { position: absolute; bottom: 0; left: 50%; z-index: 3; color: var(--slate-light); font-size: 5px; font-weight: 800; letter-spacing: .12em; transform: translateX(-50%); }
.podcast-person i { position: absolute; top: 49px; z-index: 4; width: 16px; height: 30px; background: var(--teal); border: 4px solid var(--ink); border-radius: 10px; }
.podcast-person b { position: absolute; top: 74px; z-index: 3; width: 3px; height: 30px; background: rgba(255,255,255,.55); }
.podcast-host i { right: 1px; transform: rotate(-14deg); }
.podcast-host b { right: 8px; transform: rotate(-14deg); }
.podcast-guest i { left: 1px; background: var(--amber); transform: rotate(14deg); }
.podcast-guest b { left: 8px; transform: rotate(14deg); }

.podcast-wave { display: flex; height: 72px; align-items: center; justify-content: center; gap: 4px; padding-bottom: 18px; }
.podcast-wave i { width: 3px; height: 18px; background: var(--teal); border-radius: 99px; animation: podcast-wave 1.2s ease-in-out infinite alternate; }
.podcast-wave i:nth-child(2), .podcast-wave i:nth-child(6) { height: 31px; animation-delay: -.25s; }
.podcast-wave i:nth-child(3), .podcast-wave i:nth-child(5) { height: 44px; background: var(--amber); animation-delay: -.5s; }
.podcast-wave i:nth-child(4) { height: 56px; animation-delay: -.75s; }

.podcast-status { position: absolute; top: 26px; right: 22px; z-index: 3; display: flex; align-items: center; gap: 6px; color: var(--slate-light); font-size: 5px; font-weight: 800; }
.podcast-status span { color: #ff6a60; }
.podcast-status i { width: 6px; height: 6px; background: #ff6a60; border-radius: 50%; animation: record-pulse 1.5s ease-in-out infinite; }

@keyframes booth-signal {
  0%, 100% { opacity: .35; transform: scaleX(.65); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes show-invite {
  0%, 12%, 100% { opacity: .35; transform: translateX(-15px) rotate(-5deg); }
  22%, 72% { opacity: 1; transform: translateX(0) rotate(-3deg); }
}

@keyframes show-follow {
  0%, 46% { opacity: .25; transform: translateX(15px) rotate(5deg); }
  58%, 88% { opacity: 1; transform: translateX(0) rotate(3deg); }
  100% { opacity: .35; transform: translateX(8px) rotate(4deg); }
}

@keyframes show-path {
  0%, 10% { opacity: 0; transform: translateX(0); }
  20%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(270px); }
}

@keyframes show-visitor {
  0%, 18% { opacity: 0; transform: translateX(-18px); }
  35%, 72% { opacity: 1; transform: translateX(70px); }
  100% { opacity: 0; transform: translateX(148px); }
}

@keyframes launch-ring {
  0% { opacity: .65; transform: translate(-50%, -50%) scale(.55); }
  75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes product-reveal {
  0%, 12% { opacity: .45; transform: translate(-50%, 18px) scale(.88); }
  28%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: .72; transform: translate(-50%, -5px) scale(1.02); }
}

@keyframes channel-arrive {
  0%, 28% { opacity: .2; transform: translateY(6px); }
  42%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: .55; }
}

@keyframes launch-timeline {
  0% { transform: translateX(0); }
  100% { transform: translateX(255px); }
}

@keyframes content-flow {
  to { transform: translateX(100%); }
}

@keyframes content-card-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -7px; }
}

@keyframes lead-progress {
  0%, 12% { transform: scaleX(.06); }
  82%, 100% { transform: scaleX(1); }
}

@keyframes lead-travel {
  0%, 10% { opacity: .25; transform: translateX(0); }
  20%, 85% { opacity: 1; }
  100% { opacity: .35; transform: translateX(235px); }
}

@keyframes guide-open {
  0%, 25% { transform: translateX(-50%) scale(.94); box-shadow: 0 16px 30px -24px rgba(11,19,32,.5); }
  40%, 76% { transform: translateX(-50%) scale(1); box-shadow: 0 26px 42px -26px rgba(11,19,32,.72); }
  100% { transform: translateX(-50%) scale(.98); }
}

@keyframes envelope-open {
  0%, 28% { transform: rotateX(0deg); }
  44%, 82% { transform: rotateX(178deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes newsletter-rise {
  0%, 24% { transform: translateY(78px); }
  44%, 82% { transform: translateY(0); }
  100% { transform: translateY(74px); }
}

@keyframes podcast-wave {
  from { transform: scaleY(.55); opacity: .55; }
  to { transform: scaleY(1.12); opacity: 1; }
}

@keyframes record-pulse {
  0%, 100% { opacity: .35; box-shadow: 0 0 0 0 rgba(255,106,96,.25); }
  50% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,106,96,0); }
}

/* Review */
.review { padding: 112px 0; background: var(--paper-2); }
.review-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 88px; }
.review-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.review-facts div { display: grid; gap: 4px; padding: 18px 20px 18px 0; }
.review-facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.review-facts strong { font-family: var(--font-display); font-size: 22px; }
.review-facts span { color: var(--slate); font-size: 10px; }
.review-copy ul { display: grid; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; }
.review-copy li { position: relative; padding-left: 24px; color: var(--slate); font-size: 13px; }
.review-copy li::before { position: absolute; top: 7px; left: 0; width: 8px; height: 8px; content: ""; background: var(--teal); border-radius: 50%; }

.review-papers { position: relative; min-height: 620px; }
.paper { position: absolute; padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.paper-back { top: 0; right: 0; left: 100px; height: 380px; transform: rotate(5deg); }
.paper-mid { top: 55px; right: 35px; left: 55px; height: 420px; transform: rotate(-3deg); }
.paper-front { top: 100px; right: 70px; bottom: 0; left: 0; z-index: 3; }
.paper-back > span, .paper-mid > span { color: var(--teal); font-size: 10px; font-weight: 800; }
.paper-back > strong, .paper-mid > strong { display: block; margin-top: 12px; font-family: var(--font-display); font-size: 27px; }
.paper-mid > p { max-width: 270px; color: var(--slate); font-size: 12px; }
.paper-heading { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.paper-heading span { font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.paper-heading small { color: var(--slate); font-size: 8px; text-transform: uppercase; }
.paper-label { margin: 28px 0 8px; color: var(--teal); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.paper-front h3 { max-width: 480px; font-size: 27px; }
.paper-rule { width: 64px; height: 5px; margin: 24px 0; background: var(--amber); }
.paper-front > p:not(.paper-label) { color: var(--slate); font-size: 12px; }
.paper-signoff { position: absolute; right: 32px; bottom: 28px; left: 32px; display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--slate); font-size: 8px; text-transform: uppercase; }

/* Approach */
.approach { padding: 112px 0; color: var(--white); background: var(--ink); }
.approach-intro { max-width: 820px; margin-bottom: 64px; }
.approach-intro .eyebrow { color: var(--teal); }
.approach-intro .lede { color: var(--slate-light); }
.approach-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.approach-steps article { min-height: 330px; padding: 28px; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.approach-steps article > span { color: var(--teal); font-size: 10px; font-weight: 800; }
.approach-steps article > small { display: block; margin: 64px 0 10px; color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.approach-steps h3 { font-size: 28px; }
.approach-steps p { margin: 0; color: var(--slate-light); font-size: 13px; }
.approach-rule { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 24px 28px; color: var(--ink); background: var(--teal); border-radius: var(--radius); }
.approach-rule > strong { font-family: var(--font-display); font-size: 24px; }
.approach-rule p { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.approach-rule i { width: 4px; height: 4px; background: var(--ink); border-radius: 50%; }

/* Boundaries */
.boundaries { padding: 112px 0; background: var(--white); }
.boundaries-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 88px; }
.boundaries-grid > div:first-child > p:not(.eyebrow):not(.lede) { color: var(--slate); }
.boundary-list { border-top: 1px solid var(--line); }
.boundary-list p { display: grid; grid-template-columns: 150px 1fr; gap: 24px; margin: 0; padding: 24px 0; border-bottom: 1px solid var(--line); }
.boundary-list span { color: var(--slate); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.boundary-list strong { font-family: var(--font-display); font-size: 20px; line-height: 1.3; }

/* Contact */
.contact { padding: 112px 0; color: var(--white); background: var(--ink); }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 88px; }
.contact-copy > p:not(.eyebrow) { color: var(--slate-light); }
.contact-form { display: grid; gap: 20px; padding: 32px; color: var(--ink); background: var(--white); border-radius: var(--radius); box-shadow: 0 48px 100px -48px rgba(0,0,0,.75); }
.form-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.form-heading > span { font-family: var(--font-display); font-size: 27px; font-weight: 700; }
.form-heading small { max-width: 180px; color: var(--slate); font-size: 8px; font-weight: 800; text-align: right; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 8px; color: var(--ink); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 13px 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; outline: 0; text-transform: none; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.contact-form textarea { resize: vertical; }
.contact-form .button { justify-self: start; border: 0; }
.form-note, .form-status { margin: 0; color: var(--slate); font-size: 9px; text-transform: none; }
.form-status { color: #126337; font-weight: 800; }

/* Footer */
.site-footer { padding: 72px 0 32px; background: var(--paper-2); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 64px; }
.footer-grid > div { display: grid; align-content: start; gap: 10px; }
.footer-brand > p { max-width: 520px; margin: 20px 0 0; color: var(--slate); font-size: 12px; }
.footer-grid > div:not(:first-child) > strong { margin-bottom: 8px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.footer-grid a { color: var(--slate); font-size: 12px; text-decoration: none; }
.footer-grid span { color: var(--slate); font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 24px; color: var(--slate); border-top: 1px solid var(--line); font-size: 9px; }
/* Motion */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .kinetic-field i,
  .raw-material,
  .press-head,
  .press-head-label,
  .press-joint,
  .press-pulse,
  .press-glow,
  .market-piece { animation: none !important; }
  .raw-material,
  .market-piece { opacity: 1; transform: none; }
  .press-head-label { transform: translate(-50%, -50%); }
  .press-glow { opacity: .18; transform: translate(-50%, -50%) scale(1); }
  .kinetic-axis::before,
  .kinetic-axis::after { display: none; }
  .service-art *,
  .service-art *::before,
  .service-art *::after { animation: none !important; }
  .lead-track i { transform: scaleX(1); }
  .lead-track b { right: 0; left: auto; }
  .envelope-flap { transform: rotateX(178deg); }
}

@media (max-width: 1080px) {
  .nav-links > a:not(.nav-cta) { display: none; }
  .menu-toggle { display: grid; }
  .nav-links.open {
    position: absolute;
    top: 86px;
    right: 20px;
    left: 20px;
    display: grid;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .nav-links.open > a:not(.nav-cta) { display: block; padding: 12px; }
  .hero-grid { min-height: auto; grid-template-columns: 1fr; }
  .hero-kinetic { width: min(760px, 100%); min-height: 620px; margin-inline: auto; }
  .kinetic-stage { min-height: 604px; }
  .reality-layout { grid-template-columns: 1fr; }
  .consequence-card { position: static; }
  .experience-grid, .review-grid, .boundaries-grid, .contact-grid { grid-template-columns: 1fr; gap: 64px; }
  .experience-proof-visual { width: min(680px, 100%); min-height: 620px; margin-inline: auto; }
  .service-row { grid-template-columns: 40px 1fr; }
  .service-art { grid-column: 2; }
}

@media (max-width: 820px) {
  .wrap { width: min(100% - 32px, 1180px); }
  h1 { font-size: clamp(44px, 12vw, 64px); }
  .hero-grid { padding-top: 64px; padding-bottom: 64px; }
  .hero-ribbon .wrap { justify-content: center; flex-wrap: wrap; }
  .reality, .experience, .services, .review, .approach, .boundaries, .contact { padding: 80px 0; }
  .reality-stories article { grid-template-columns: 36px 1fr; }
  .reality-stories article > strong, .reality-stories .cost { grid-column: 2; }
  .approach-steps { grid-template-columns: 1fr; }
  .approach-steps article { min-height: 280px; }
  .approach-steps article > small { margin-top: 40px; }
  .review-papers { min-height: 590px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .brand-lockup small { display: none; }
  .nav-links .nav-cta { display: none; }
  .nav-links.open .nav-cta { display: inline-flex; }
  .hero-credentials { grid-template-columns: 1fr; }
  .hero-credentials div + div { padding-left: 0; border-top: 1px solid var(--line-dark); border-left: 0; }
  .hero-kinetic { min-height: 620px; padding: 6px; }
  .kinetic-stage { min-height: 606px; }
  .kinetic-side-label { display: none; }
  .raw-material { left: 3%; width: 39%; min-height: 40px; grid-template-columns: 23px minmax(0, 1fr); gap: 6px; padding: 7px 8px; }
  .raw-material span { width: 23px; height: 23px; font-size: 6px; }
  .raw-material strong { font-size: clamp(5px, 1.55vw, 6.5px); letter-spacing: .015em; }
  .raw-one { top: 12%; }
  .raw-two { top: 21%; }
  .raw-three { top: 30%; }
  .raw-four { top: 52%; }
  .raw-five { top: 61%; }
  .industrial-press { top: 19%; left: 28.5%; width: 47%; min-width: 0; }
  .press-title { top: 3%; gap: 5px; padding: 3px 6px 3px 3px; }
  .press-title span { width: 23px; height: 23px; font-size: 7px; }
  .press-title strong { font-size: 5.25px; }
  .press-head-label strong { font-size: 6px; }
  .press-head-label span { font-size: 8px; }
  .press-platen-label { font-size: 4.75px; }
  .market-piece { right: 2%; width: 34%; gap: 6px; }
  .market-piece i { width: 16px; }
  .market-piece span { font-size: 10px; }
  .piece-one { top: 15%; }
  .piece-two { top: 24%; }
  .piece-three { top: 33%; }
  .piece-four { top: 55%; }
  .piece-five { top: 64%; }
  .piece-six { top: 73%; }
  .kinetic-caption { right: 18px; bottom: 20px; left: 18px; grid-template-columns: 1fr; gap: 6px; }
  .kinetic-caption strong { font-size: 18px; }
  .reality-stories article { padding: 28px 0; }
  .consequence-card { padding: 24px; }
  .experience-proof-visual { min-height: 580px; }
  .proof-poster-back { right: 6px; left: 36px; padding: 24px; }
  .proof-poster-front { top: 58px; right: 20px; padding: 24px; }
  .proof-stat > strong { font-size: 82px; }
  .proof-stat-small > strong { font-size: 62px; }
  .proof-stamp { right: 22px; bottom: 22px; }
  .service-row { grid-template-columns: 1fr; gap: 20px; padding: 48px 0; }
  .service-number, .service-art { grid-column: auto; }
  .service-art { min-height: 280px; }
  .show-art { min-height: 330px; }
  .review-facts { grid-template-columns: 1fr; }
  .review-facts div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .review-papers { min-height: 560px; }
  .paper { padding: 24px; }
  .paper-back { left: 48px; }
  .paper-mid { right: 12px; left: 28px; }
  .paper-front { top: 85px; right: 28px; }
  .paper-front h3 { font-size: 23px; }
  .paper-signoff { right: 24px; left: 24px; }
  .approach-rule { align-items: flex-start; flex-direction: column; }
  .approach-rule p { flex-wrap: wrap; }
  .boundary-list p { grid-template-columns: 1fr; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-heading { flex-direction: column; }
  .form-heading small { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}