@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

:root {
  --black: #060606;
  --black-soft: #0d0e0e;
  --graphite: #171818;
  --panel: #232424;
  --paper: #f1f1ee;
  --paper-soft: #fbfbf7;
  --smoke: #9a9a94;
  --muted: #6f706c;
  --ink: #080808;
  --line: rgba(8, 8, 8, 0.16);
  --line-light: rgba(251, 251, 247, 0.16);
  --card-border-color: rgba(251, 251, 247, 0.17);
  /* accent: the studio's signal colour */
  --accent: #74d4ee;
  --accent-strong: #3fb9dd;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --text: "Hanken Grotesk", "Helvetica Neue", "Avenir Next", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", "Menlo", "Consolas", monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-measured: cubic-bezier(0.22, 1, 0.36, 1);
  --page-pad: 5rem;
}

* {
  box-sizing: border-box;
}

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

body {
  min-width: 320px;
  margin: 0;
  color: var(--paper-soft);
  background: var(--black);
  font-family: var(--text);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  content: "";
  opacity: 0.36;
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.08), transparent 24rem),
    radial-gradient(circle at 10% 88%, rgba(255, 255, 255, 0.055), transparent 28rem),
    linear-gradient(180deg, transparent 0 70%, rgba(0, 0, 0, 0.26));
}

body.menu-open {
  overflow: hidden;
}

html.js body.is-booting {
  overflow: hidden;
}

html:not(.js) .site-loader {
  display: none;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--paper-soft);
  background:
    radial-gradient(125% 85% at 50% 40%, rgba(116, 212, 238, 0.07), transparent 58%),
    #060707;
  pointer-events: none;
}

.site-loader__core {
  display: grid;
  justify-items: center;
  gap: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  padding: 2rem;
  text-align: center;
}

.site-loader__brand {
  margin: 0;
  display: grid;
  gap: 0;
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(2.5rem, 1.8rem + 2.8vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* The hero's masked blur-rise, in miniature, on each word of the mark. */
.site-loader__line {
  display: block;
  will-change: clip-path, transform, filter;
}

.js .site-loader__line {
  animation: loader-line-rise 880ms var(--ease-measured) both;
}

.js .site-loader__brand .site-loader__line:nth-child(1) {
  animation-delay: 120ms;
}
.js .site-loader__brand .site-loader__line:nth-child(2) {
  animation-delay: 230ms;
}

.site-loader__track {
  position: relative;
  width: clamp(180px, 22vw, 300px);
  height: 2px;
  overflow: hidden;
  background: rgba(251, 251, 247, 0.16);
  border-radius: 2px;
}

.site-loader__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--loader-p, 0));
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(116, 212, 238, 0.55);
}

.site-loader__count {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(251, 251, 247, 0.58);
}

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

.site-loader__meta {
  position: absolute;
  left: 50%;
  bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, 0.4);
}

/* Lift to reveal: the curtain rises and blurs as the hero rises beneath it.
   The core lifts a touch further for a parallax pull into the headline. */
body.is-loaded .site-loader {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-2vh) scale(1.012);
  transition:
    opacity 760ms var(--ease-measured) 180ms,
    filter 760ms var(--ease-measured) 180ms,
    transform 920ms var(--ease-measured) 180ms;
}

body.is-loaded .site-loader__core {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(-1.1em);
  transition:
    opacity 600ms var(--ease-measured) 120ms,
    filter 600ms var(--ease-measured) 120ms,
    transform 760ms var(--ease-measured) 120ms;
}

body.is-boot-complete .site-loader {
  display: none;
}

@keyframes loader-line-rise {
  0% {
    clip-path: inset(100% 0 -20% 0);
    transform: translateY(0.5em);
    filter: blur(14px);
    opacity: 0;
  }
  55% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0% 0 -20% 0);
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .site-loader__line {
    animation: none;
    clip-path: none;
    transform: none;
    filter: none;
    opacity: 1;
  }
  body.is-loaded .site-loader,
  body.is-loaded .site-loader__core {
    filter: none;
    transform: none;
    transition-duration: 260ms;
  }
}

html.js body.is-booting .site-header,
html.js body.is-booting .hero-copy,
html.js body.is-booting .hero-frame,
html.js body.is-booting .hero-type,
html.js body.is-booting .network-hero,
html.js body.is-booting .rotating-seal,
html.js body.is-booting .coordinates,
html.js body.is-booting .scroll-cue {
  opacity: 0;
}

html.js body.is-booting .hero .kicker,
html.js body.is-booting .hero h1 .hero-word,
html.js body.is-booting .hero-intro,
html.js body.is-booting .hero-support,
html.js body.is-booting .hero-actions {
  opacity: 0;
}

[hidden] {
  display: none !important;
}

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

button {
  font: inherit;
}

img,
svg {
  display: block;
}

section {
  scroll-margin-top: 5.5rem;
}

::selection {
  color: var(--black);
  background: var(--paper-soft);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 11rem 1fr 11rem;
  align-items: start;
  gap: 1.25rem;
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 1.7rem var(--page-pad) 1.2rem;
  color: var(--paper-soft);
  border-bottom: 1px solid rgba(251, 251, 247, 0.34);
  transition:
    padding 520ms var(--ease),
    background-color 520ms var(--ease),
    border-color 520ms var(--ease);
}

.site-header.is-scrolled {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom-color: rgba(251, 251, 247, 0.12);
  background: rgba(7, 7, 7, 0.8);
  backdrop-filter: blur(20px);
}

.brand {
  width: max-content;
  font-family: var(--text);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 0.86;
  text-transform: uppercase;
}

.brand span {
  display: block;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: 5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1;
  text-transform: uppercase;
}

.site-nav a,
.contact-link {
  position: relative;
  width: max-content;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  transition: transform 260ms var(--ease);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  transform: translateY(-1px);
}

.nav-marker {
  width: 0.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0.35);
  transition:
    opacity 260ms var(--ease),
    transform 260ms var(--ease);
}

.site-nav a:hover .nav-marker,
.site-nav a:focus-visible .nav-marker {
  opacity: 0.86;
  transform: scale(1);
}

.site-nav a::after,
.text-link::after {
  position: absolute;
  right: 0;
  bottom: -0.42rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: right;
  opacity: 0.55;
  transition:
    transform 520ms var(--ease),
    opacity 520ms var(--ease);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
  opacity: 1;
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: max-content;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.text-link span {
  display: inline-block;
  transition: transform 520ms var(--ease);
}

.text-link:hover span,
.text-link:focus-visible span {
  transform: translate(0.25rem, -0.18rem);
}

.contact-link {
  justify-self: end;
}

.menu-toggle {
  display: none;
  justify-self: end;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(251, 251, 247, 0.26);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: currentColor;
}

.menu-toggle span {
  display: block;
  width: 1rem;
  height: 1px;
  margin: 0.2rem auto;
  background: currentColor;
  transition:
    transform 420ms var(--ease),
    opacity 420ms var(--ease);
}

.menu-open .menu-toggle span:first-child {
  transform: translateY(0.17rem) rotate(45deg);
}

.menu-open .menu-toggle span:last-child {
  transform: translateY(-0.17rem) rotate(-45deg);
}

.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 6rem 2rem 2rem;
  color: var(--paper-soft);
  background: rgba(7, 7, 7, 0.95);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1rem);
  transition:
    opacity 460ms var(--ease),
    transform 460ms var(--ease);
  backdrop-filter: blur(16px);
}

.mobile-panel a {
  font-family: var(--display);
  font-size: 4.2rem;
  font-stretch: expanded;
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
}

.menu-open .mobile-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hero {
  position: relative;
  --hero-x: 0;
  --hero-y: 0;
  --hero-scroll: 0;
  display: grid;
  align-items: start;
  min-height: 100dvh;
  overflow: hidden;
  padding: 14rem var(--page-pad) 4.5rem;
  border-bottom: 1px solid rgba(251, 251, 247, 0.12);
  background: var(--black);
  isolation: isolate;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(6, 6, 6, 0.92), rgba(6, 6, 6, 0.45) 43%, rgba(6, 6, 6, 0.82)),
    linear-gradient(180deg, rgba(6, 6, 6, 0.2), rgba(6, 6, 6, 0.18) 44%, rgba(6, 6, 6, 0.94));
}

.hero::after {
  position: absolute;
  inset: 7.3rem var(--page-pad) 5.8rem;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-top: 1px solid rgba(251, 251, 247, 0.26);
  border-bottom: 1px solid rgba(251, 251, 247, 0.2);
  background:
    linear-gradient(90deg, rgba(251, 251, 247, 0.06), transparent 16%, transparent 84%, rgba(251, 251, 247, 0.045)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 38%, rgba(0, 0, 0, 0.28));
  opacity: 0.8;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  opacity: 0.74;
  filter: grayscale(1) contrast(1.28) brightness(0.5);
}

.hero-frame {
  position: absolute;
  z-index: 3;
  top: 9.65rem;
  left: var(--page-pad);
  right: var(--page-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  color: rgba(251, 251, 247, 0.72);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1;
  text-transform: uppercase;
  transform: translate3d(
    calc(var(--hero-x) * -5px),
    calc((var(--hero-y) * -3px) + (var(--hero-scroll) * -10px)),
    0
  );
  transition: transform 900ms var(--ease-measured);
  will-change: transform;
}

.hero-frame span:nth-child(2) {
  text-align: center;
}

.hero-frame span:last-child {
  text-align: right;
}

.hero-type {
  position: absolute;
  z-index: 0;
  top: 11rem;
  left: var(--page-pad);
  right: var(--page-pad);
  display: flex;
  align-items: flex-start;
  gap: 0.18em;
  overflow: hidden;
  color: rgba(251, 251, 247, 0.2);
  font-family: var(--display);
  font-size: 7.4rem;
  font-stretch: expanded;
  font-weight: 200;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  transform: translate3d(
    calc(var(--hero-x) * 7px),
    calc((var(--hero-y) * 5px) + (var(--hero-scroll) * -18px)),
    0
  );
  transition: transform 1100ms var(--ease-measured);
  will-change: transform;
}

.network {
  pointer-events: none;
}

.network line {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  opacity: 0.34;
  animation: draw-line 2300ms var(--ease) forwards;
}

.network circle {
  fill: currentColor;
}

.network-hero {
  position: absolute;
  z-index: 2;
  inset: 8rem 2rem auto auto;
  width: min(58rem, 66vw);
  color: rgba(251, 251, 247, 0.52);
  opacity: 0.36;
  transform: translate3d(
    calc(var(--hero-x) * 13px),
    calc((var(--hero-y) * 10px) + (var(--hero-scroll) * -28px)),
    0
  );
  transition: transform 820ms var(--ease-measured);
  will-change: transform;
}

.network-nodes circle {
  opacity: 0;
  animation: node-in 760ms var(--ease) forwards;
}

.network-nodes circle:nth-child(2) {
  animation-delay: 210ms;
}

.network-nodes circle:nth-child(3) {
  animation-delay: 360ms;
}

.network-nodes circle:nth-child(4) {
  animation-delay: 510ms;
}

.network-nodes circle:nth-child(5) {
  animation-delay: 660ms;
}

.rotating-seal {
  position: absolute;
  z-index: 3;
  right: 12%;
  bottom: 32%;
  width: 8rem;
  color: rgba(251, 251, 247, 0.9);
  opacity: 0;
  animation: reveal-soft 950ms var(--ease) 1100ms forwards;
  transform: translate3d(calc(var(--hero-x) * 9px), calc(var(--hero-y) * 7px), 0);
  transition: transform 820ms var(--ease-measured);
  will-change: transform;
}

.rotating-seal svg {
  animation: spin 22s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.rotating-seal text {
  fill: currentColor;
  font-family: var(--mono);
  font-size: 0.52rem;
  text-transform: uppercase;
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(58rem, 62vw);
  padding-bottom: 0;
}

.is-loaded .hero-copy.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.kicker {
  margin: 0 0 1.8rem;
  color: inherit;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.45;
  text-transform: uppercase;
}

.hero h1,
.section-copy h2,
.chapters-header h2,
.work-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-stretch: expanded;
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero h1 {
  font-size: 5.1rem;
  font-weight: 200;
  line-height: 1;
}

.hero h1 > span {
  display: block;
}

.hero h1 .hero-word {
  display: inline-block;
}

.motion-ready .site-header {
  animation: header-enter 860ms var(--ease-measured) both;
}

.motion-ready .hero .kicker {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: clip-in 820ms var(--ease-measured) 260ms both;
}

.motion-ready .hero h1 span {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(1.1rem);
  animation: title-wipe 920ms var(--ease-measured) both;
}

.motion-ready .hero h1 span:nth-child(1) {
  animation-delay: 520ms;
}

.motion-ready .hero h1 span:nth-child(2) {
  animation-delay: 660ms;
}

.motion-ready .hero h1 span:nth-child(3) {
  animation-delay: 800ms;
}

.motion-ready .hero h1 span:nth-child(4) {
  animation-delay: 940ms;
}

.motion-ready .hero h1 span:nth-child(5) {
  animation-delay: 1080ms;
}

.motion-ready .hero-intro,
.motion-ready .hero-support,
.motion-ready .hero-actions {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: fade-rise 760ms var(--ease-measured) both;
}

.motion-ready .hero-intro {
  animation-delay: 1120ms;
}

.motion-ready .hero-support {
  animation-delay: 1260ms;
}

.motion-ready .hero-actions {
  animation-delay: 1400ms;
}

.motion-ready .hero-intro {
  animation-delay: 1320ms;
}

.motion-ready .hero .cta-link {
  animation-delay: 1460ms;
}

.motion-ready .hero .cta-link::after {
  transform: scaleX(0);
  transform-origin: left;
  animation: underline-load 720ms var(--ease-measured) 1660ms both;
}

.motion-ready .hero-metrics {
  animation-delay: 1620ms;
}

.motion-ready .hero-type span {
  opacity: 0;
  transform: translateY(1.4rem);
  animation: type-enter 980ms var(--ease-measured) both;
}

.motion-ready .hero-type span:nth-child(1) {
  animation-delay: 260ms;
}

.motion-ready .hero-type span:nth-child(2) {
  animation-delay: 380ms;
}

.motion-ready .hero-type span:nth-child(3) {
  animation-delay: 500ms;
}

.motion-ready .network-hero line {
  animation-duration: 2600ms;
  animation-delay: 700ms;
}

.motion-ready .network-hero .network-nodes circle {
  animation-delay: 1420ms;
}

.motion-settled .site-header,
.motion-settled .hero .kicker,
.motion-settled .hero h1 span,
.motion-settled .hero-intro,
.motion-settled .hero .cta-link,
.motion-settled .hero-metrics,
.motion-settled .hero-type span {
  opacity: 1 !important;
  clip-path: none !important;
  transform: translateY(0) !important;
  animation: none !important;
}

.motion-settled .network line {
  stroke-dashoffset: 0 !important;
}

.motion-settled .network-nodes circle:not(.signal-node) {
  opacity: 1 !important;
  animation: none !important;
}

.motion-settled .signal-rings circle {
  animation: none !important;
  opacity: 0.2;
}

.motion-settled .hero .cta-link::after {
  opacity: 0.55;
  transform: scaleX(0.28);
}

.motion-settled .hero .cta-link:hover::after,
.motion-settled .hero .cta-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.motion-ready .site-header {
  opacity: 1;
  transform: translateY(0);
  animation: interface-slide 860ms var(--ease-measured) both;
  transition:
    opacity 860ms var(--ease-measured),
    transform 860ms var(--ease-measured),
    padding 520ms var(--ease),
    background-color 520ms var(--ease),
    border-color 520ms var(--ease);
}

.motion-ready .hero .kicker,
.motion-ready .hero h1 span,
.motion-ready .hero-intro,
.motion-ready .hero .cta-link,
.motion-ready .hero-metrics,
.motion-ready .hero-type span {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  animation: boot-rise 760ms var(--ease-measured) both;
  transition:
    opacity 760ms var(--ease-measured),
    clip-path 820ms var(--ease-measured),
    transform 760ms var(--ease-measured);
}

.motion-ready .hero .kicker {
  transition-delay: 260ms;
  animation-delay: 260ms;
}

.motion-ready .hero h1 span:nth-child(1) {
  transition-delay: 520ms;
  animation-delay: 520ms;
}

.motion-ready .hero h1 span:nth-child(2) {
  transition-delay: 660ms;
  animation-delay: 660ms;
}

.motion-ready .hero h1 span:nth-child(3) {
  transition-delay: 800ms;
  animation-delay: 800ms;
}

.motion-ready .hero h1 span:nth-child(4) {
  transition-delay: 940ms;
  animation-delay: 940ms;
}

.motion-ready .hero h1 span:nth-child(5) {
  transition-delay: 1080ms;
  animation-delay: 1080ms;
}

.motion-ready .hero-intro {
  transition-delay: 1440ms;
  animation-delay: 1440ms;
}

.motion-ready .hero .cta-link {
  transition-delay: 1580ms;
  animation-delay: 1580ms;
}

.motion-ready .hero-metrics {
  transition-delay: 1740ms;
  animation-delay: 1740ms;
}

.motion-ready .hero-type span:nth-child(1) {
  transition-delay: 260ms;
  animation-delay: 260ms;
}

.motion-ready .hero-type span:nth-child(2) {
  transition-delay: 380ms;
  animation-delay: 380ms;
}

.motion-ready .hero-type span:nth-child(3) {
  transition-delay: 500ms;
  animation-delay: 500ms;
}

.motion-ready .hero .cta-link::after {
  opacity: 0.55;
  transform: scaleX(0.28);
  animation: none;
  transition:
    opacity 520ms var(--ease),
    transform 720ms var(--ease-measured);
  transition-delay: 1660ms;
}

.motion-ready .hero .cta-link:hover::after,
.motion-ready .hero .cta-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0ms;
}

.motion-ready .network line {
  stroke-dashoffset: 0;
  animation: none;
  transition: stroke-dashoffset 2300ms var(--ease-measured);
  transition-delay: 700ms;
}

.motion-ready .network-nodes circle:not(.signal-node) {
  opacity: 1;
  animation: none;
  transition: opacity 760ms var(--ease-measured);
  transition-delay: 1420ms;
}

.motion-ready .rotating-seal {
  opacity: 1;
  animation: none;
  transition: opacity 950ms var(--ease-measured) 1100ms;
}

.motion-ready .signal-rings circle {
  animation: none;
  opacity: 0.2;
  transition: opacity 760ms var(--ease-measured);
}

.motion-ready .site-header {
  opacity: 0;
  animation: header-enter 860ms var(--ease-measured) 1450ms both;
}

/* The keyframe's `both` fill owns the masked/blurred start and clean end,
   so when the settle pass kills the animation the line reverts to a clean,
   visible default rather than a stuck blur (and it fails soft to visible). */
.motion-ready .hero h1 .hero-line {
  animation: hero-line-rise 1.1s var(--ease-measured) both;
}

.motion-ready .hero h1 .hero-line:nth-child(1) {
  animation-delay: 0.3s;
}
.motion-ready .hero h1 .hero-line:nth-child(2) {
  animation-delay: 0.46s;
}
.motion-ready .hero h1 .hero-line:nth-child(3) {
  animation-delay: 0.62s;
}
.motion-ready .hero h1 .hero-line:nth-child(4) {
  animation-delay: 0.78s;
}

.motion-ready .hero .kicker {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: none;
  animation: clip-in 760ms var(--ease-measured) 150ms both;
  transition: none;
}

.motion-ready .hero-intro {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: fade-rise 760ms var(--ease-measured) 1150ms both;
  transition: none;
}

.motion-ready .hero-support {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: fade-rise 760ms var(--ease-measured) 1300ms both;
  transition: none;
}

.motion-ready .hero-actions {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: fade-rise 760ms var(--ease-measured) 1440ms both;
  transition: none;
}

.motion-ready .hero .cta-link {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: fade-rise 760ms var(--ease-measured) 2600ms both;
  transition: none;
}

.motion-ready .hero .cta-link::after {
  transition-delay: 2800ms;
}

.motion-ready .hero-metrics {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: fade-rise 760ms var(--ease-measured) 2760ms both;
  transition: none;
}

.motion-ready .hero-type span {
  opacity: 0;
  transform: translateY(1.4rem);
  animation: type-enter 980ms var(--ease-measured) both;
  transition: none;
}

.motion-ready .hero-type span:nth-child(1) {
  animation-delay: 2380ms;
}

.motion-ready .hero-type span:nth-child(2) {
  animation-delay: 2500ms;
}

.motion-ready .hero-type span:nth-child(3) {
  animation-delay: 2620ms;
}

.motion-ready .hero-frame,
.motion-ready .coordinates,
.motion-ready .scroll-cue {
  opacity: 0;
  animation: fade-rise 760ms var(--ease-measured) 1900ms both;
}

.motion-ready .network line {
  transition-delay: 2740ms;
  animation-delay: 2740ms;
}

.motion-ready .network-nodes circle:not(.signal-node) {
  transition-delay: 3240ms;
  animation-delay: 3240ms;
}

.motion-ready .rotating-seal {
  transition-delay: 3100ms;
}

body.motion-ready .hero h1 .hero-word {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(1rem);
  animation: none;
  transition: transform 680ms var(--ease-measured);
}

body.motion-ready .hero h1 .hero-word.is-word-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

body.motion-ready .site-header,
body.motion-ready .hero .kicker,
body.motion-ready .hero-intro,
body.motion-ready .hero .cta-link,
body.motion-ready .hero-metrics,
body.motion-ready .hero-type span,
body.motion-ready .hero-frame,
body.motion-ready .coordinates,
body.motion-ready .scroll-cue {
  opacity: 0;
  animation: none;
  transition: transform 760ms var(--ease-measured);
}

body.motion-ready .site-header,
body.motion-ready .hero-frame,
body.motion-ready .coordinates,
body.motion-ready .scroll-cue {
  transform: translateY(-0.55rem);
}

body.motion-ready .hero .kicker {
  clip-path: inset(0 100% 0 0);
}

body.motion-ready .hero-intro,
body.motion-ready .hero .cta-link,
body.motion-ready .hero-metrics,
body.motion-ready .hero-type span {
  transform: translateY(1rem);
}

body.motion-ready.is-rest-visible .site-header,
body.motion-ready.is-rest-visible .hero .kicker,
body.motion-ready.is-rest-visible .hero-intro,
body.motion-ready.is-rest-visible .hero-support,
body.motion-ready.is-rest-visible .hero-actions,
body.motion-ready.is-rest-visible .hero .cta-link,
body.motion-ready.is-rest-visible .hero-metrics,
body.motion-ready.is-rest-visible .hero-type span,
body.motion-ready.is-rest-visible .hero-frame,
body.motion-ready.is-rest-visible .coordinates,
body.motion-ready.is-rest-visible .scroll-cue {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

body.motion-ready.is-rest-visible .hero-copy {
  opacity: 1;
  transform: none;
}

body.motion-settled .site-header,
body.motion-settled .hero-copy,
body.motion-settled .hero .kicker,
body.motion-settled .hero h1 span,
body.motion-settled .hero h1 .hero-word,
body.motion-settled .hero-intro,
body.motion-settled .hero-support,
body.motion-settled .hero-actions,
body.motion-settled .hero .cta-link,
body.motion-settled .hero-metrics,
body.motion-settled .hero-type span,
body.motion-settled .hero-frame,
body.motion-settled .coordinates,
body.motion-settled .scroll-cue {
  opacity: 1 !important;
  clip-path: none !important;
  transform: translateY(0) !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.hero-intro {
  width: min(34rem, 100%);
  margin: 2rem 0 1.4rem;
  color: rgba(251, 251, 247, 0.78);
  font-size: 0.98rem;
  line-height: 1.72;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  width: min(38rem, 100%);
  margin-top: 2.5rem;
  border-top: 1px solid rgba(251, 251, 247, 0.22);
}

.hero-metrics p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: end;
  margin: 0;
  padding-top: 0.9rem;
  color: rgba(251, 251, 247, 0.66);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.45;
  text-transform: uppercase;
}

.hero-metrics strong {
  color: var(--paper-soft);
  font-family: var(--display);
  font-size: 3.4rem;
  font-stretch: expanded;
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: 0;
}

.coordinates {
  position: absolute;
  left: calc(var(--page-pad) + 11rem);
  bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  color: rgba(251, 251, 247, 0.72);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.7;
}

.coordinates > span:first-child {
  font-size: 1.35rem;
  line-height: 1;
}

.scroll-cue {
  position: absolute;
  right: var(--page-pad);
  bottom: 1.45rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: rgba(251, 251, 247, 0.78);
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.mouse {
  position: relative;
  width: 1rem;
  height: 1.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.mouse::before {
  position: absolute;
  top: 0.35rem;
  left: 50%;
  width: 2px;
  height: 0.36rem;
  content: "";
  background: currentColor;
  border-radius: 99px;
  transform: translateX(-50%);
  animation: mouse-pulse 1700ms var(--ease) infinite;
}

.section-light {
  background: var(--paper);
  color: var(--ink);
}

.connection {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.connection::before {
  position: absolute;
  top: 1.5rem;
  right: -0.35rem;
  color: rgba(8, 8, 8, 0.06);
  content: "SYSTEM";
  font-family: var(--display);
  font-size: 16rem;
  font-stretch: expanded;
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section-grid,
.work-layout {
  position: relative;
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 7.8rem var(--page-pad);
}

.section-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 5.5rem;
  align-items: center;
  min-height: 48rem;
}

.section-copy {
  position: relative;
}

.section-copy::after {
  position: absolute;
  left: 0;
  bottom: 2.8rem;
  width: min(29rem, 82vw);
  height: 1px;
  pointer-events: none;
  content: "";
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    opacity 520ms var(--ease),
    transform 720ms var(--ease-measured);
}

.connection.is-cta-active .section-copy::after {
  opacity: 0.34;
  transform: scaleX(1);
}

.section-copy h2,
.chapters-header h2,
.work-copy h2 {
  max-width: 43rem;
  font-size: 4.4rem;
}

.section-copy p:not(.kicker) {
  width: min(31rem, 100%);
  margin: 2rem 0 4.5rem;
  color: rgba(8, 8, 8, 0.72);
  font-size: 0.98rem;
  line-height: 1.82;
}

.signal-map {
  position: relative;
  --signal-x: 0;
  --signal-y: 0;
  min-height: 35rem;
  border-top: 1px solid rgba(8, 8, 8, 0.42);
  border-bottom: 1px solid rgba(8, 8, 8, 0.28);
  background:
    radial-gradient(circle at 52% 48%, rgba(8, 8, 8, 0.055), transparent 42%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.025), transparent 50%, rgba(8, 8, 8, 0.035));
  transition:
    border-color 520ms var(--ease),
    opacity 720ms var(--ease-measured);
}

.signal-map__bar {
  position: absolute;
  z-index: 2;
  top: 0.9rem;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  color: rgba(8, 8, 8, 0.58);
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.signal-map__bar span:nth-child(n + 2) {
  text-align: center;
}

.signal-map__bar span:last-child {
  text-align: right;
}

.signal-svg {
  position: absolute;
  inset: 1.4rem 0 0;
  width: 100%;
  height: calc(100% - 1.4rem);
  color: rgba(8, 8, 8, 0.88);
  transform: translate3d(calc(var(--signal-x) * 10px), calc(var(--signal-y) * 8px), 0);
  transition: transform 820ms var(--ease-measured);
  will-change: transform;
}

.signal-map .network {
  pointer-events: auto;
}

.signal-map .network line,
.signal-map .signal-rings {
  pointer-events: none;
}

.system-line {
  opacity: 0.24;
  transition:
    opacity 420ms var(--ease),
    stroke-width 420ms var(--ease);
}

.system-line--frame {
  opacity: 0.16;
}

.signal-rings circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.2;
  transform-origin: center;
  animation: ring-in 1600ms var(--ease) forwards;
}

.signal-node {
  fill: currentColor !important;
  opacity: 1 !important;
  animation: signal-pulse 2800ms var(--ease) infinite !important;
}

.system-node,
.core-node {
  transform-box: fill-box;
  transform-origin: center;
}

.system-node {
  pointer-events: auto;
  cursor: pointer;
  animation: node-dot-in 760ms var(--ease) forwards;
  outline: none;
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}

.system-node:focus-visible {
  filter: drop-shadow(0 0 0.35rem rgba(8, 8, 8, 0.42));
}

.signal-map.is-active .system-node {
  opacity: 0.36 !important;
  transform: scale(0.9);
}

.signal-map[data-active="strategy"] [data-node="strategy"],
.signal-map[data-active="experience"] [data-node="experience"],
.signal-map[data-active="interface"] [data-node="interface"],
.signal-map[data-active="code"] [data-node="code"] {
  opacity: 1 !important;
  transform: scale(1.55);
}

.signal-map.is-active .system-line {
  opacity: 0.14;
}

.signal-map[data-active="strategy"] [data-line="strategy"],
.signal-map[data-active="experience"] [data-line="experience"],
.signal-map[data-active="interface"] [data-line="interface"],
.signal-map[data-active="code"] [data-line="code"] {
  opacity: 0.82;
  stroke-width: 1.35;
}

.signal-map.is-active .core-node {
  animation:
    signal-pulse 2800ms var(--ease) infinite,
    core-acknowledge 900ms var(--ease-measured) both !important;
}

.connection.is-cta-active .signal-map {
  border-color: rgba(8, 8, 8, 0.52);
}

.connection.is-cta-active .system-line {
  opacity: 0.42;
}

.connection.is-cta-active .system-node {
  animation: node-ping 960ms var(--ease-measured) both;
}

.connection.is-cta-active [data-node="experience"] {
  animation-delay: 90ms;
}

.connection.is-cta-active [data-node="code"] {
  animation-delay: 180ms;
}

.connection.is-cta-active [data-node="interface"] {
  animation-delay: 270ms;
}

.signal-status {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: -2.1rem;
  color: rgba(8, 8, 8, 0.62);
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.4rem);
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}

.signal-map.is-active .signal-status {
  opacity: 1;
  transform: translateY(0);
}

.map-label {
  position: absolute;
  width: min(15.5rem, 42%);
  color: rgba(8, 8, 8, 0.78);
  font-size: 0.78rem;
  line-height: 1.6;
  cursor: pointer;
  outline: none;
  transition:
    color 420ms var(--ease),
    opacity 420ms var(--ease),
    filter 420ms var(--ease),
    transform 420ms var(--ease);
}

.map-label span {
  display: block;
  width: 1.35rem;
  height: 1px;
  margin-bottom: 0.75rem;
  background: currentColor;
  transition:
    width 420ms var(--ease),
    opacity 420ms var(--ease);
}

.map-label h3 {
  margin: 0 0 0.65rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.map-label p {
  margin: 0;
}

.map-label:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.5rem;
}

.signal-map.is-active .map-label {
  opacity: 0.42;
  filter: blur(0.2px);
}

.signal-map[data-active="strategy"] [data-label="strategy"],
.signal-map[data-active="experience"] [data-label="experience"],
.signal-map[data-active="interface"] [data-label="interface"],
.signal-map[data-active="code"] [data-label="code"] {
  color: rgba(8, 8, 8, 0.92);
  opacity: 1;
  filter: none;
  transform: translateY(-0.18rem);
}

.signal-map[data-active="strategy"] [data-label="strategy"] > span,
.signal-map[data-active="experience"] [data-label="experience"] > span,
.signal-map[data-active="interface"] [data-label="interface"] > span,
.signal-map[data-active="code"] [data-label="code"] > span {
  width: 2.5rem;
}

.map-details {
  display: grid;
  gap: 0.34rem;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  opacity: 0;
  transform: translateY(0.4rem);
  transition:
    max-height 520ms var(--ease),
    margin 520ms var(--ease),
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}

.map-details li {
  color: rgba(8, 8, 8, 0.58);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.signal-map[data-active="strategy"] [data-label="strategy"] .map-details,
.signal-map[data-active="experience"] [data-label="experience"] .map-details,
.signal-map[data-active="interface"] [data-label="interface"] .map-details,
.signal-map[data-active="code"] [data-label="code"] .map-details {
  max-height: 5.5rem;
  margin-top: 0.75rem;
  opacity: 1;
  transform: translateY(0);
}

.map-label--strategy {
  top: 4rem;
  left: 3%;
}

.map-label--experience {
  top: 4rem;
  right: 1.5%;
}

.map-label--interface {
  bottom: 2rem;
  left: 3%;
}

.map-label--code {
  right: 1.5%;
  bottom: 2rem;
}

.connection-hero {
  min-height: 100dvh;
}

.connection-hero::before {
  top: 5.2rem;
  right: 2rem;
  color: rgba(8, 8, 8, 0.035);
  content: "CONNECTION";
  font-size: 11rem;
}

.connection-hero .section-grid {
  grid-template-columns: minmax(26rem, 0.82fr) minmax(40rem, 1.18fr);
  gap: 5rem;
  min-height: 100dvh;
  padding-top: 11.2rem;
  padding-bottom: 3rem;
}

.connection-hero .section-copy h2 {
  max-width: 42rem;
  font-size: 5.7rem;
  font-weight: 200;
  line-height: 0.98;
  text-wrap: balance;
}

.connection-hero .section-copy p:not(.kicker) {
  width: min(37rem, 100%);
  margin: 3rem 0 5.2rem;
  color: rgba(8, 8, 8, 0.74);
  font-size: 1.08rem;
  line-height: 1.85;
}

.connection-hero .signal-map {
  min-height: 46rem;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 8, 8, 0.05), transparent 36%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.025), transparent 52%, rgba(8, 8, 8, 0.035));
}

.connection-hero .signal-map::before,
.connection-hero .signal-map::after {
  position: absolute;
  z-index: 4;
  width: 1.6rem;
  height: 1.6rem;
  pointer-events: none;
  content: "";
  opacity: 0.22;
}

.connection-hero .signal-map::before {
  right: 0.65rem;
  top: 0.9rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.connection-hero .signal-map::after {
  right: 0.65rem;
  bottom: 5.6rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.connection-hero .signal-map__bar {
  top: 1.55rem;
  left: 7%;
  right: 7%;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(8, 8, 8, 0.1);
  color: rgba(8, 8, 8, 0.74);
  font-size: 0.68rem;
}

.connection-hero .signal-map__bar span:last-child {
  text-align: center;
}

.connection-hero .signal-svg {
  inset: 4rem 0 5.6rem;
  height: auto;
  color: rgba(8, 8, 8, 0.9);
}

.panel-crosshair line {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.12;
}

.scan-line {
  fill: currentColor;
  opacity: 0.035;
  animation: scan-pass 5800ms var(--ease) infinite;
}

.intent-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.16;
  transform-box: fill-box;
  transform-origin: center;
  animation: intent-breathe 5200ms var(--ease) infinite;
}

.intent-ring:nth-child(2) {
  animation-delay: 180ms;
}

.intent-ring:nth-child(3) {
  animation-delay: 360ms;
}

.intent-ring:nth-child(4) {
  animation-delay: 540ms;
}

.intent-ring:nth-child(5) {
  animation-delay: 720ms;
}

.intent-path,
.module-connector {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 560;
  stroke-dashoffset: 0;
  opacity: 0.23;
  transition:
    opacity 420ms var(--ease),
    stroke-width 420ms var(--ease);
}

.intent-path-dot {
  fill: currentColor;
  opacity: 0.72;
  transform-box: fill-box;
  transform-origin: center;
  animation: path-dot-blink 3600ms var(--ease) infinite;
}

.intent-path-dot:nth-child(2) {
  animation-delay: 900ms;
}

.intent-path-dot:nth-child(3) {
  animation-delay: 1800ms;
}

.intent-path-dot:nth-child(4) {
  animation-delay: 2700ms;
}

.orbit-dot-wrap {
  transform-box: view-box;
  transform-origin: 360px 260px;
  animation: orbit-core 16000ms linear infinite;
}

.orbit-dot {
  fill: currentColor;
  opacity: 0.42;
}

.intent-core {
  transform-box: fill-box;
  transform-origin: center;
}

.intent-core-disc {
  fill: var(--ink) !important;
  opacity: 1 !important;
  animation: intent-core-idle 3600ms var(--ease) infinite !important;
}

.intent-core text {
  fill: var(--paper-soft);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-anchor: middle;
  text-transform: uppercase;
}

.connection-hero .signal-status {
  right: 10.5%;
  top: 50%;
  bottom: auto;
  z-index: 6;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0.2rem 0.42rem;
  align-items: center;
  color: var(--ink);
  opacity: 1;
  transform: translateY(-50%);
}

.connection-hero .signal-status strong {
  padding: 0.16rem 0.38rem;
  background: var(--ink);
  color: var(--paper-soft);
  font-family: var(--mono);
  font-size: 0.65rem;
  line-height: 1;
  text-transform: uppercase;
}

.connection-hero .signal-status > span:last-child {
  grid-column: 2 / 3;
  color: rgba(8, 8, 8, 0.68);
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.status-dot {
  display: inline-block;
  width: 0.54rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation: status-pulse 1900ms var(--ease) infinite;
}

.connection-hero .signal-map.is-active .map-label {
  opacity: 0.42;
}

.connection-hero .map-label {
  z-index: 5;
  display: grid;
  width: min(13rem, 28%);
  border: 0;
  background: transparent;
  color: rgba(8, 8, 8, 0.84);
  font-family: var(--text);
}

.connection-hero .map-label span {
  display: inline-block;
  justify-self: start;
  width: auto;
  height: auto;
  margin-bottom: 0;
  background: transparent;
}

.connection-hero .map-label:hover,
.connection-hero .map-label:focus-visible,
.connection-hero .signal-map[data-active="strategy"] [data-label="strategy"],
.connection-hero .signal-map[data-active="experience"] [data-label="experience"],
.connection-hero .signal-map[data-active="interface"] [data-label="interface"],
.connection-hero .signal-map[data-active="code"] [data-label="code"] {
  color: var(--ink);
  opacity: 1;
  transform: translateY(-0.22rem);
}

.module-number {
  margin-bottom: 0.22rem;
  color: currentColor;
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1;
}

.module-rule {
  display: block;
  width: 0.9rem;
  height: 1px;
  margin-bottom: 0.74rem;
  background: currentColor;
  opacity: 0.68;
}

.connection-hero .map-label h3 {
  margin-bottom: 0.72rem;
  color: currentColor;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.connection-hero .map-label p {
  color: rgba(8, 8, 8, 0.68);
  font-size: 0.82rem;
  line-height: 1.62;
}

.module-plus {
  width: max-content;
  margin-top: 0.9rem;
  color: currentColor;
  font-family: var(--mono);
  font-size: 1.1rem;
  line-height: 1;
}

.module-signal {
  margin-top: 0.65rem;
  color: rgba(8, 8, 8, 0.62);
  font-family: var(--mono);
  font-size: 0.56rem;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.35rem);
  transition:
    opacity 360ms var(--ease),
    transform 360ms var(--ease);
}

.connection-hero .signal-map[data-active="strategy"] [data-label="strategy"] .module-signal,
.connection-hero .signal-map[data-active="experience"] [data-label="experience"] .module-signal,
.connection-hero .signal-map[data-active="interface"] [data-label="interface"] .module-signal,
.connection-hero .signal-map[data-active="code"] [data-label="code"] .module-signal {
  opacity: 1;
  transform: translateY(0);
}

.connection-hero .signal-map[data-active="strategy"] [data-label="strategy"] > span:not(.module-rule),
.connection-hero .signal-map[data-active="experience"] [data-label="experience"] > span:not(.module-rule),
.connection-hero .signal-map[data-active="interface"] [data-label="interface"] > span:not(.module-rule),
.connection-hero .signal-map[data-active="code"] [data-label="code"] > span:not(.module-rule) {
  width: auto;
}

.connection-hero .map-label--strategy {
  top: 7.2rem;
  left: 7.5%;
}

.connection-hero .map-label--experience {
  top: 7.2rem;
  right: 6.5%;
}

.connection-hero .map-label--interface {
  bottom: 8.9rem;
  left: 7.5%;
}

.connection-hero .map-label--code {
  right: 6.5%;
  bottom: 8.9rem;
}

.connection-hero .signal-map.is-active .intent-path,
.connection-hero .signal-map.is-active .intent-path-dot {
  opacity: 0.12;
}

.connection-hero .signal-map[data-active="strategy"] [data-line="strategy"],
.connection-hero .signal-map[data-active="experience"] [data-line="experience"],
.connection-hero .signal-map[data-active="interface"] [data-line="interface"],
.connection-hero .signal-map[data-active="code"] [data-line="code"] {
  opacity: 0.72;
  stroke-width: 1.35;
}

.connection-hero .signal-map[data-active="strategy"] [data-node="strategy"],
.connection-hero .signal-map[data-active="experience"] [data-node="experience"],
.connection-hero .signal-map[data-active="interface"] [data-node="interface"],
.connection-hero .signal-map[data-active="code"] [data-node="code"] {
  opacity: 1;
}

.connection-hero .signal-map.is-active .intent-core,
.connection-hero.is-cta-active .intent-core {
  animation: core-pop 720ms var(--ease-measured) both;
}

.signal-telemetry {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem 1rem;
  padding: 1.05rem 5%;
  border-top: 1px solid rgba(8, 8, 8, 0.13);
  color: rgba(8, 8, 8, 0.72);
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1;
  text-transform: uppercase;
}

.signal-telemetry p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin: 0;
}

.signal-telemetry p:last-of-type {
  justify-self: end;
}

.signal-telemetry [data-signal-step].is-active {
  color: var(--ink);
  font-weight: 700;
}

.signal-ruler {
  grid-column: 1 / -1;
  height: 1rem;
  opacity: 0.22;
  background: repeating-linear-gradient(
    90deg,
    currentColor 0,
    currentColor 1px,
    transparent 1px,
    transparent 8px
  );
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  animation: ruler-flicker 4800ms steps(1, end) infinite;
}

.connection-hero.is-cta-active .map-label {
  animation: module-sequence 900ms var(--ease-measured) both;
}

.connection-hero.is-cta-active [data-label="experience"] {
  animation-delay: 90ms;
}

.connection-hero.is-cta-active [data-label="interface"] {
  animation-delay: 180ms;
}

.connection-hero.is-cta-active [data-label="code"] {
  animation-delay: 270ms;
}

.chapters {
  position: relative;
  overflow: clip;
  background: var(--black-soft);
  color: var(--paper-soft);
}

.chapters::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.055), transparent 26rem),
    linear-gradient(180deg, transparent 0 72%, rgba(255, 255, 255, 0.035));
}

.chapters::after {
  position: absolute;
  top: 3.5rem;
  right: -0.35rem;
  pointer-events: none;
  color: rgba(251, 251, 247, 0.045);
  content: "PROCESS";
  font-family: var(--display);
  font-size: 14rem;
  font-stretch: expanded;
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.chapters-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 3.8rem 1fr;
  gap: 4.2rem;
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 7.8rem var(--page-pad);
}

.chapter-rail {
  position: sticky;
  top: 35vh;
  align-self: start;
  display: grid;
  gap: 4.65rem;
  padding-top: 4.2rem;
  color: rgba(251, 251, 247, 0.54);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.rail-line {
  position: absolute;
  top: 5.2rem;
  bottom: 1rem;
  left: 0.38rem;
  width: 1px;
  background: rgba(251, 251, 247, 0.18);
}

.rail-line span {
  display: block;
  width: 100%;
  height: 0%;
  background: rgba(251, 251, 247, 0.88);
  transition: height 420ms var(--ease);
}

.rail-point {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    color 320ms var(--ease),
    transform 320ms var(--ease);
}

.rail-point span {
  position: relative;
  z-index: 1;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--black-soft);
  transition:
    background-color 320ms var(--ease),
    border-color 320ms var(--ease),
    transform 320ms var(--ease);
}

.rail-point.is-active {
  color: var(--paper-soft);
}

.rail-point.is-active span {
  border-color: var(--paper-soft);
  background: var(--paper-soft);
  transform: scale(1.08);
}

.chapters-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  margin-bottom: 3.8rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(251, 251, 247, 0.24);
}

.text-link--light {
  color: var(--paper-soft);
}

.chapter-list {
  border-top: 1px solid rgba(251, 251, 247, 0.14);
}

.chapter-row {
  position: relative;
  display: grid;
  grid-template-columns: 12rem 16rem minmax(18rem, 1fr) 4rem;
  gap: 3.2rem;
  align-items: center;
  min-height: 13.8rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid rgba(251, 251, 247, 0.14);
  opacity: 0.52;
  transition:
    border-color 360ms var(--ease),
    opacity 360ms var(--ease),
    background-color 360ms var(--ease);
}

.chapter-row.is-active,
.chapter-row:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(251, 251, 247, 0.32);
  opacity: 1;
}

.chapter-number {
  margin: 0;
  color: transparent;
  font-family: var(--display);
  font-size: 9rem;
  font-stretch: expanded;
  font-weight: 200;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-text-stroke: 0.75px rgba(251, 251, 247, 0.42);
  transition:
    color 360ms var(--ease),
    transform 360ms var(--ease),
    -webkit-text-stroke-color 360ms var(--ease);
}

.chapter-row.is-active .chapter-number,
.chapter-row:hover .chapter-number {
  color: rgba(251, 251, 247, 0.9);
  -webkit-text-stroke-color: rgba(251, 251, 247, 0.9);
  transform: translateX(0.2rem);
}

.chapter-title > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  color: rgba(251, 251, 247, 0.58);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.chapter-title > p:first-child span {
  width: 1.35rem;
  height: 1px;
  background: rgba(251, 251, 247, 0.7);
}

.chapter-title h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 3.4rem;
  font-stretch: expanded;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.chapter-capability {
  margin: 0.9rem 0 0;
  color: rgba(251, 251, 247, 0.58);
  font-size: 0.76rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.chapter-content {
  display: grid;
  gap: 1.15rem;
}

.chapter-copy {
  max-width: 42rem;
  margin: 0;
  color: rgba(251, 251, 247, 0.72);
  font-size: 0.98rem;
  line-height: 1.65;
}

.chapter-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chapter-outputs span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgba(251, 251, 247, 0.18);
  border-radius: 999px;
  color: rgba(251, 251, 247, 0.7);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1;
  text-transform: uppercase;
  transition:
    border-color 320ms var(--ease),
    color 320ms var(--ease);
}

.chapter-row.is-active .chapter-outputs span,
.chapter-row:hover .chapter-outputs span {
  border-color: rgba(251, 251, 247, 0.34);
  color: rgba(251, 251, 247, 0.9);
}

.round-action {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-right: 2.2rem;
  padding: 0;
  border: 1px solid rgba(251, 251, 247, 0.42);
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition:
    border-color 420ms var(--ease),
    background-color 420ms var(--ease),
    color 420ms var(--ease),
    transform 420ms var(--ease);
}

.round-action span {
  display: block;
  transition: transform 420ms var(--ease);
}

.round-action:hover,
.round-action:focus-visible {
  border-color: var(--paper-soft);
  background: var(--paper-soft);
  color: var(--black);
  transform: scale(1.04);
}

.round-action:hover span,
.round-action:focus-visible span {
  transform: translateX(0.18rem);
}

.capabilities-link {
  margin-top: 2.75rem;
}

.chapter-rail button:focus-visible,
.round-action:focus-visible,
.text-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.chapters {
  --chapter-grid-shift: 0rem;
}

.chapters::before {
  background-position:
    0 var(--chapter-grid-shift),
    var(--chapter-grid-shift) 0;
  transition: background-position 720ms var(--ease-measured);
}

.chapters::after {
  top: 5.5rem;
  right: var(--page-pad);
  color: rgba(251, 251, 247, 0.035);
  font-size: 15.5rem;
}

.chapters-inner {
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 4.8rem;
  padding-top: 8.8rem;
  padding-bottom: 9rem;
}

.chapters-main {
  position: relative;
  min-width: 0;
}

.chapters-header {
  align-items: end;
  min-height: 18rem;
  margin-bottom: 3.4rem;
  padding-bottom: 2.8rem;
}

.chapters-header h2 span {
  display: block;
}

.chapter-list {
  display: grid;
  gap: 1rem;
  border-top: 0;
}

.chapter-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 15.5rem minmax(14rem, 0.62fr) minmax(20rem, 1fr) auto;
  gap: 2.25rem;
  min-height: 14.8rem;
  padding: 2.15rem 2.3rem;
  border: 1px solid rgba(251, 251, 247, 0.14);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(251, 251, 247, 0.045), rgba(251, 251, 247, 0.015)),
    rgba(255, 255, 255, 0.018);
  opacity: 0.48;
  transform: scale(0.985);
  transition:
    background-color 520ms var(--ease),
    border-color 520ms var(--ease),
    color 520ms var(--ease),
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}

.chapter-row::before {
  position: absolute;
  inset: 1rem;
  z-index: -1;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(251, 251, 247, 0.08);
  border-radius: inherit;
  opacity: 0.75;
}

.chapter-row::after {
  position: absolute;
  inset: 50% 2rem auto 2rem;
  z-index: -1;
  height: 1px;
  pointer-events: none;
  content: "";
  background: currentColor;
  opacity: 0.08;
  transform: scaleX(0.72);
  transform-origin: left;
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}

.chapter-row.is-active,
.chapter-row:hover,
.chapter-row:focus-within {
  border-color: rgba(251, 251, 247, 0.56);
  background: rgba(241, 241, 238, 0.92);
  color: var(--ink);
  opacity: 1;
  transform: scale(1);
}

.chapter-row:hover,
.chapter-row:focus-within {
  background: rgba(251, 251, 247, 0.96);
}

.chapter-row.is-active::after,
.chapter-row:hover::after,
.chapter-row:focus-within::after {
  opacity: 0.18;
  transform: scaleX(1);
}

.chapter-number {
  position: relative;
  z-index: 2;
  align-self: center;
  width: max-content;
  color: transparent;
  font-size: 12.5rem;
  line-height: 0.72;
  -webkit-text-stroke: 0.75px rgba(251, 251, 247, 0.34);
  transform: translateX(0);
  transition:
    color 520ms var(--ease),
    transform 520ms var(--ease),
    -webkit-text-stroke-color 520ms var(--ease);
}

.chapter-row.is-active .chapter-number,
.chapter-row:hover .chapter-number,
.chapter-row:focus-within .chapter-number {
  color: rgba(8, 8, 8, 0.9);
  -webkit-text-stroke-color: rgba(8, 8, 8, 0.9);
  transform: translateX(0.7rem);
}

.chapter-title,
.chapter-content,
.chapter-row .round-action {
  position: relative;
  z-index: 2;
}

.chapter-title {
  align-self: center;
  transition: transform 520ms var(--ease);
}

.chapter-row:hover .chapter-title,
.chapter-row:focus-within .chapter-title {
  transform: translateX(0.35rem);
}

.chapter-title > p:first-child {
  color: currentColor;
  opacity: 0.62;
}

.chapter-title > p:first-child span {
  background: currentColor;
  opacity: 0.7;
}

.chapter-title h3 {
  font-size: 3.75rem;
  font-weight: 300;
  text-wrap: balance;
}

.chapter-capability {
  color: currentColor;
  opacity: 0.58;
}

.chapter-content {
  align-self: center;
}

.chapter-copy,
.chapter-outputs span {
  color: currentColor;
  opacity: 0.72;
  transform: translateY(0.25rem);
  transition:
    border-color 420ms var(--ease),
    color 420ms var(--ease),
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}

.chapter-row.is-active .chapter-copy,
.chapter-row:hover .chapter-copy,
.chapter-row:focus-within .chapter-copy {
  opacity: 0.76;
  transform: translateY(0);
}

.chapter-row.is-active .chapter-outputs span,
.chapter-row:hover .chapter-outputs span,
.chapter-row:focus-within .chapter-outputs span {
  border-color: rgba(8, 8, 8, 0.24);
  color: rgba(8, 8, 8, 0.82);
  opacity: 1;
  transform: translateY(0);
}

.chapter-row.is-active .chapter-outputs span:nth-child(2),
.chapter-row:hover .chapter-outputs span:nth-child(2),
.chapter-row:focus-within .chapter-outputs span:nth-child(2) {
  transition-delay: 40ms;
}

.chapter-row.is-active .chapter-outputs span:nth-child(3),
.chapter-row:hover .chapter-outputs span:nth-child(3),
.chapter-row:focus-within .chapter-outputs span:nth-child(3) {
  transition-delay: 80ms;
}

.chapter-row.is-active .chapter-outputs span:nth-child(4),
.chapter-row:hover .chapter-outputs span:nth-child(4),
.chapter-row:focus-within .chapter-outputs span:nth-child(4) {
  transition-delay: 120ms;
}

.chapter-row .round-action {
  align-self: center;
  justify-self: end;
  margin-right: 0;
  color: currentColor;
  border-color: currentColor;
  opacity: 0.64;
}

.chapter-row.is-active .round-action,
.chapter-row:hover .round-action,
.chapter-row:focus-within .round-action {
  opacity: 1;
}

.chapter-row:hover .round-action,
.chapter-row:focus-within .round-action {
  color: var(--paper-soft);
  border-color: var(--ink);
  background: var(--ink);
  transform: translate(0.25rem, -0.25rem) rotate(-45deg) scale(1.04);
}

.chapter-row:hover .round-action span,
.chapter-row:focus-within .round-action span {
  transform: translateX(0);
}

.chapter-signal {
  position: absolute;
  inset: 1.3rem 6.5rem 1.3rem auto;
  z-index: 1;
  width: 16rem;
  pointer-events: none;
  opacity: 0.08;
  transition:
    opacity 520ms var(--ease),
    transform 720ms var(--ease-measured);
}

.chapter-row.is-active .chapter-signal,
.chapter-row:hover .chapter-signal,
.chapter-row:focus-within .chapter-signal {
  opacity: 0.22;
  transform: translateX(-0.4rem);
}

.chapter-signal span {
  position: absolute;
  border: 1px solid currentColor;
}

.chapter-signal--decode span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.chapter-signal--decode span:nth-child(1) {
  top: 18%;
  left: 12%;
}

.chapter-signal--decode span:nth-child(2) {
  top: 34%;
  right: 22%;
}

.chapter-signal--decode span:nth-child(3) {
  bottom: 24%;
  left: 38%;
}

.chapter-signal--decode span:nth-child(4) {
  inset: 26% 18% 34% 14%;
  width: auto;
  height: auto;
  border-radius: 999px;
}

.chapter-signal--design span:nth-child(1),
.chapter-signal--design span:nth-child(2),
.chapter-signal--design span:nth-child(3) {
  width: 4.8rem;
  height: 3.1rem;
}

.chapter-signal--design span:nth-child(1) {
  top: 18%;
  left: 8%;
}

.chapter-signal--design span:nth-child(2) {
  top: 36%;
  left: 42%;
}

.chapter-signal--design span:nth-child(3) {
  bottom: 17%;
  left: 24%;
}

.chapter-signal--design span:nth-child(4) {
  inset: 50% 0 auto 0;
  height: 1px;
  border-width: 1px 0 0;
}

.chapter-signal--engineer span {
  width: 5.4rem;
  height: 1.2rem;
}

.chapter-signal--engineer span:nth-child(1) {
  top: 20%;
  left: 12%;
}

.chapter-signal--engineer span:nth-child(2) {
  top: 40%;
  left: 28%;
}

.chapter-signal--engineer span:nth-child(3) {
  top: 60%;
  left: 8%;
}

.chapter-signal--engineer span:nth-child(4) {
  top: 40%;
  right: 8%;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
}

.chapter-signal--refine span:nth-child(1) {
  inset: auto auto 18% 10%;
  width: 10.5rem;
  height: 5.5rem;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 2rem;
}

.chapter-signal--refine span:nth-child(2),
.chapter-signal--refine span:nth-child(3),
.chapter-signal--refine span:nth-child(4) {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: currentColor;
}

.chapter-signal--refine span:nth-child(2) {
  left: 20%;
  bottom: 24%;
}

.chapter-signal--refine span:nth-child(3) {
  left: 48%;
  bottom: 46%;
}

.chapter-signal--refine span:nth-child(4) {
  right: 16%;
  top: 20%;
}

.work {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 12%, rgba(8, 8, 8, 0.06), transparent 24rem),
    linear-gradient(180deg, rgba(8, 8, 8, 0.025), transparent 42%),
    var(--paper-soft);
}

.work::before {
  position: absolute;
  top: 1.8rem;
  right: -0.5rem;
  pointer-events: none;
  color: rgba(8, 8, 8, 0.045);
  content: "ARCHIVE";
  font-family: var(--display);
  font-size: clamp(6rem, 13vw, 18rem);
  font-stretch: normal;
  font-weight: 100;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}

.work::after {
  position: absolute;
  inset: auto var(--page-pad) 3.4rem;
  height: 1px;
  pointer-events: none;
  content: "";
  background: rgba(8, 8, 8, 0.14);
}

.work-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.4rem;
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 6.6rem var(--page-pad) 7.2rem;
}

.work-copy {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(20rem, 0.62fr) minmax(18rem, 0.28fr) auto;
  gap: 1.4rem 2.8rem;
  align-items: end;
}

.work-copy .kicker {
  margin-bottom: 1.25rem;
  color: rgba(8, 8, 8, 0.76);
}

.work .work-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(3.8rem, 6.2vw, 7rem);
  font-stretch: normal;
  font-weight: 100;
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.work-copy h2 span {
  display: block;
}

.work-intro {
  max-width: 25rem;
  margin: 0;
  color: rgba(8, 8, 8, 0.72);
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.work-link {
  justify-self: end;
  align-self: end;
}

.project-grid {
  display: flex;
  gap: 0.8rem;
  min-height: 38rem;
  isolation: isolate;
}

.project-card {
  position: relative;
  flex: 0.74 1 0;
  min-width: 0;
  min-height: 38rem;
  overflow: hidden;
  border: 1px solid rgba(8, 8, 8, 0.14);
  border-radius: 8px;
  background: var(--black);
  color: var(--paper-soft);
  transition:
    flex 780ms var(--ease),
    border-color 520ms var(--ease),
    filter 520ms var(--ease),
    transform 520ms var(--ease);
  will-change: flex;
}

.project-card.is-featured {
  flex: 1.56 1 0;
}

.project-grid.has-active .project-card,
.project-grid:hover .project-card,
.project-grid:focus-within .project-card {
  flex: 0.58 1 0;
  filter: grayscale(1) brightness(0.74);
}

.project-grid.has-active .project-card.is-active,
.project-grid .project-card:hover,
.project-grid .project-card:focus-within {
  z-index: 2;
  flex: 2.16 1 0;
  border-color: rgba(8, 8, 8, 0.58);
  filter: grayscale(1) brightness(1);
  transform: translateY(-0.28rem);
}

.project-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.12), transparent 11rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%);
  opacity: 0.42;
}

.project-card::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.16), transparent 23rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.9));
}

.project-panel {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 1rem;
  outline-offset: -0.45rem;
}

.project-number {
  position: relative;
  z-index: 5;
  width: max-content;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.project-number::after {
  display: block;
  width: 1.2rem;
  height: 1px;
  margin-top: 0.55rem;
  content: "";
  background: currentColor;
  opacity: 0.58;
}

.project-letters {
  position: absolute;
  top: 4.5rem;
  left: 1rem;
  z-index: 4;
  display: grid;
  gap: 0.04em;
  color: rgba(251, 251, 247, 0.94);
  font-family: var(--display);
  font-size: clamp(4.4rem, 6.3vw, 8rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: 0;
  text-transform: uppercase;
  transition:
    color 520ms var(--ease),
    transform 780ms var(--ease);
}

.project-letters span {
  display: block;
}

.project-card.is-active .project-letters,
.project-card:hover .project-letters,
.project-card:focus-within .project-letters {
  color: #ffffff;
  transform: translateX(0.34rem);
}

.project-capsule {
  position: absolute;
  top: 5.4rem;
  right: 50%;
  z-index: 3;
  width: min(16rem, 58%);
  height: 25.5rem;
  overflow: hidden;
  border: 1px solid rgba(251, 251, 247, 0.24);
  border-radius: 999px;
  opacity: 0.7;
  transform: translateX(50%);
  transition:
    width 780ms var(--ease),
    right 780ms var(--ease),
    opacity 520ms var(--ease),
    transform 780ms var(--ease);
}

.project-capsule__image,
.project-capsule__grain {
  position: absolute;
  inset: 0;
}

.project-capsule__image {
  transform: scale(1.04);
  transition:
    filter 520ms var(--ease),
    transform 900ms var(--ease);
}

.project-capsule__grain {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: none;
}

.project-capsule--empire .project-capsule__image {
  background:
    linear-gradient(180deg, transparent 0 8%, rgba(0, 0, 0, 0.84) 86%),
    radial-gradient(ellipse at 48% 38%, rgba(255, 255, 255, 0.86) 0 7%, rgba(255, 255, 255, 0.12) 8% 18%, transparent 19%),
    radial-gradient(ellipse at 50% 54%, rgba(255, 255, 255, 0.26) 0 18%, transparent 19%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.12) 0 28%, transparent 29%),
    linear-gradient(180deg, #d8d8d2, #0b0b0b 76%);
  filter: contrast(1.15) grayscale(1);
}

.project-capsule--brand .project-capsule__image {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.9)),
    radial-gradient(ellipse at 46% 30%, rgba(255, 255, 255, 0.7) 0 22%, transparent 23%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 18%, transparent 18% 34%, rgba(255, 255, 255, 0.16) 34% 52%, transparent 52%),
    #1b1c1c;
}

.project-capsule--system .project-capsule__image {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.66) 0 7%, transparent 8%),
    repeating-radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.32) 0 1px, transparent 1px 1.35rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.88)),
    #080808;
}

.project-capsule--more .project-capsule__image {
  background:
    linear-gradient(140deg, transparent 0 38%, rgba(255, 255, 255, 0.48) 38% 39%, transparent 40%),
    linear-gradient(40deg, transparent 0 50%, rgba(255, 255, 255, 0.2) 50% 51%, transparent 52%),
    radial-gradient(ellipse at 60% 32%, rgba(255, 255, 255, 0.68) 0 13%, transparent 14%),
    linear-gradient(180deg, #515151, #080808 72%);
}

.project-card.is-active .project-capsule,
.project-card:hover .project-capsule,
.project-card:focus-within .project-capsule {
  right: 2.25rem;
  width: min(18rem, 42%);
  opacity: 0.94;
  transform: translateX(0);
}

.project-card.is-active .project-capsule__image,
.project-card:hover .project-capsule__image,
.project-card:focus-within .project-capsule__image {
  transform: scale(1);
}

.project-scanline {
  position: absolute;
  top: 4.25rem;
  right: 1rem;
  left: 1rem;
  z-index: 4;
  height: 1px;
  pointer-events: none;
  background: rgba(251, 251, 247, 0.24);
}

.project-scanline::before,
.project-scanline::after {
  position: absolute;
  top: -0.2rem;
  width: 0.42rem;
  height: 0.42rem;
  content: "";
  border: 1px solid rgba(251, 251, 247, 0.5);
  border-radius: 50%;
  background: var(--black);
}

.project-scanline::before {
  left: 21%;
}

.project-scanline::after {
  right: 21%;
}

.project-copy {
  position: relative;
  z-index: 5;
  align-self: end;
  display: grid;
  max-width: min(24rem, calc(100% - 19rem));
  gap: 0.7rem;
  padding: 0 4rem 0.15rem 0;
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}

.project-card.is-featured .project-copy,
.project-card.is-active .project-copy,
.project-card:hover .project-copy,
.project-card:focus-within .project-copy {
  opacity: 1;
  transform: translateY(0);
}

.project-grid.has-active .project-card:not(.is-active) .project-copy,
.project-grid:hover .project-card:not(:hover) .project-copy,
.project-grid:focus-within .project-card:not(:focus-within) .project-copy {
  opacity: 0;
  transform: translateY(1rem);
}

.project-kicker,
.project-url,
.project-tags {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.project-kicker {
  color: rgba(251, 251, 247, 0.62);
}

.project-card h3 {
  max-width: 18rem;
  margin: 0;
  color: var(--paper-soft);
  font-family: var(--display);
  font-size: clamp(2.15rem, 3.1vw, 4.2rem);
  font-stretch: normal;
  font-weight: 100;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.project-card p {
  width: min(24rem, 100%);
  margin: 0;
  color: rgba(251, 251, 247, 0.75);
  font-size: 0.92rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
  max-width: 20rem;
  color: rgba(251, 251, 247, 0.78);
}

.project-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.26rem 0.52rem;
  border: 1px solid rgba(251, 251, 247, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  white-space: nowrap;
}

.project-url {
  color: rgba(251, 251, 247, 0.88);
}

.project-card .round-action {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 6;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0;
  color: var(--paper-soft);
  background: rgba(255, 255, 255, 0.035);
  transition:
    background-color 420ms var(--ease),
    transform 520ms var(--ease);
}

.project-card:hover .round-action,
.project-card:focus-within .round-action,
.project-card.is-active .round-action {
  background: rgba(255, 255, 255, 0.1);
  transform: translate(0.18rem, -0.18rem);
}

.pricing {
  --glass-bg: rgba(18, 18, 18, 0.62);
  --glass-bg-strong: rgba(24, 24, 24, 0.78);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-strong: rgba(255, 255, 255, 0.32);
  --glass-highlight: rgba(255, 255, 255, 0.44);
  --pricing-muted-accent: rgba(251, 251, 247, 0.74);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(251, 251, 247, 0.12);
  background:
    radial-gradient(circle at 62% 10%, rgba(255, 255, 255, 0.1), transparent 22rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 38%, rgba(0, 0, 0, 0.25)),
    var(--black);
  color: var(--paper-soft);
}

.pricing::before {
  position: absolute;
  top: 2.2rem;
  right: -1rem;
  pointer-events: none;
  content: "PRICING";
  color: rgba(251, 251, 247, 0.055);
  font-family: var(--display);
  font-size: clamp(8rem, 18vw, 22rem);
  font-weight: 100;
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pricing-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 6.2rem var(--page-pad) 5.2rem;
}

.pricing-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4.4rem;
}

.pricing-header {
  display: grid;
  max-width: 58rem;
}

.pricing-header .kicker,
.estimate-heading .kicker {
  color: rgba(251, 251, 247, 0.78);
}

.pricing-header h2,
.estimate-heading h3 {
  margin: 0;
  font-family: var(--display);
  font-stretch: normal;
  font-weight: 100;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.pricing-header h2 {
  font-size: clamp(3.1rem, 5.4vw, 6.1rem);
}

.pricing-header h2 span,
.estimate-heading h3 {
  display: block;
}

.pricing-header > p:not(.kicker),
.estimate-heading > p:not(.kicker) {
  max-width: 34rem;
  margin: 1.3rem 0 0;
  color: rgba(251, 251, 247, 0.78);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.pricing-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-card-item {
  min-width: 0;
}

.pricing-card {
  position: relative;
  display: grid;
  min-height: 39rem;
  padding: 2.05rem;
  overflow: hidden;
  border: 1px solid var(--card-border-color);
  border-radius: 0;
  background: var(--black-soft);
  box-shadow: none;
  transition:
    border-color 420ms var(--ease),
    background-color 420ms var(--ease),
    transform 520ms var(--ease);
}

@supports (backdrop-filter: blur(14px)) {
  .estimate-console,
  .estimate-output {
    backdrop-filter: blur(14px);
  }
}

.pricing-card::before,
.pricing-card::after,
.estimate-console::before,
.estimate-output::before,
.estimate-output::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.pricing-card::before {
  display: none;
}

.pricing-card::after {
  display: none;
}

.pricing-card:hover,
.pricing-card:focus-within {
  border-color: rgba(251, 251, 247, 0.34);
  box-shadow: none;
  transform: translateY(-0.35rem);
}

.pricing-card:hover::before,
.pricing-card:focus-within::before {
  opacity: 0.8;
  transform: translateX(0.65rem);
}

.pricing-card:hover::after,
.pricing-card:focus-within::after {
  opacity: 0.42;
  transform: translate(-0.4rem, 0.25rem);
}

.pricing-card--featured {
  min-height: 42rem;
  margin-top: -1.5rem;
  border-color: var(--card-border-color);
  background: var(--graphite);
  box-shadow: none;
}

.pricing-card--featured::before {
  opacity: 0.9;
}

.pricing-card--featured::after {
  opacity: 0.46;
}

.pricing-card__top {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.05rem;
  align-self: start;
}

.pricing-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 2rem;
  font-stretch: normal;
  font-weight: 100;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pricing-card__top p {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(251, 251, 247, 0.14);
}

.pricing-card__top span,
.pricing-timeline,
.pricing-badge {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.pricing-card__top span {
  color: rgba(251, 251, 247, 0.52);
}

.pricing-card strong {
  color: var(--paper-soft);
  font-family: var(--mono);
  font-size: clamp(2rem, 2.3vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.pricing-badge {
  width: max-content;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(251, 251, 247, 0.32);
  border-radius: 6px;
  color: var(--pricing-muted-accent);
  background: rgba(255, 255, 255, 0.055);
}

.pricing-card__description {
  position: relative;
  z-index: 1;
  max-width: 25rem;
  margin: 1.25rem 0 1.3rem;
  color: rgba(251, 251, 247, 0.8);
  font-size: 0.92rem;
  line-height: 1.62;
}

.pricing-features {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.82rem;
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}

.pricing-features li {
  position: relative;
  padding-left: 1.65rem;
  color: rgba(251, 251, 247, 0.75);
  font-size: 0.86rem;
  line-height: 1.35;
}

.pricing-features li::before {
  position: absolute;
  top: 0.05rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  content: "✓";
  border: 1px solid rgba(251, 251, 247, 0.58);
  border-radius: 50%;
  color: rgba(251, 251, 247, 0.78);
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1;
  transition:
    border-color 420ms var(--ease),
    color 420ms var(--ease);
}

.pricing-card:hover .pricing-features li::before,
.pricing-card:focus-within .pricing-features li::before {
  border-color: var(--paper-soft);
  color: var(--paper-soft);
}

.pricing-timeline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: auto 0 1.35rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(251, 251, 247, 0.12);
  color: rgba(251, 251, 247, 0.54);
}

.pricing-timeline span:last-child {
  color: rgba(251, 251, 247, 0.72);
}

.pricing-card--featured .pricing-timeline span:first-child,
.pricing-card--featured .estimate-tier {
  color: var(--pricing-muted-accent);
}

.pricing-cta,
.estimate-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 3.15rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid rgba(251, 251, 247, 0.42);
  border-radius: 999px;
  color: var(--paper-soft);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  transition:
    border-color 420ms var(--ease),
    background-color 420ms var(--ease),
    color 420ms var(--ease),
    transform 420ms var(--ease);
}

.pricing-cta span,
.estimate-cta span {
  transition: transform 420ms var(--ease);
}

.pricing-cta:hover,
.pricing-cta:focus-visible,
.estimate-cta:hover,
.estimate-cta:focus-visible {
  border-color: var(--paper-soft);
  background: rgba(255, 255, 255, 0.08);
}

.pricing-cta:hover span,
.pricing-cta:focus-visible span,
.estimate-cta:hover span,
.estimate-cta:focus-visible span {
  transform: translateX(0.32rem);
}

.pricing-cta--filled {
  border-color: var(--paper-soft);
  background: var(--paper-soft);
  color: var(--black);
}

.pricing-cta--filled:hover,
.pricing-cta--filled:focus-visible {
  background: #ffffff;
  color: var(--black);
}

.estimate-system {
  display: grid;
  gap: 1.45rem;
  margin-top: 0.4rem;
  padding-top: 3.2rem;
  border-top: 1px solid rgba(251, 251, 247, 0.11);
}

.estimate-heading h3 {
  font-size: clamp(2.45rem, 4.2vw, 4.9rem);
}

.estimate-console {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr);
  gap: 1rem;
  overflow: hidden;
  padding: 1.35rem;
  border: 1px solid rgba(251, 251, 247, 0.13);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.estimate-console::before {
  inset: 0;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.11), transparent 13rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 48%);
  opacity: 0.68;
}

.estimate-controls,
.estimate-output {
  position: relative;
  z-index: 1;
  min-width: 0;
  border: 1px solid rgba(251, 251, 247, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(12, 12, 12, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.estimate-controls {
  display: grid;
  gap: 1.5rem;
  padding: 1.8rem;
}

.estimate-output {
  display: grid;
  align-content: center;
  gap: 1.3rem;
  padding: 2rem;
  overflow: hidden;
}

.estimate-output::before {
  top: -1px;
  right: 1rem;
  left: 1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  opacity: 0.72;
}

.estimate-output::after {
  top: -2.2rem;
  right: -1rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 64%);
  opacity: 0.56;
}

.estimate-control-group {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.estimate-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.estimate-label-row label,
.estimate-label-row output,
.estimate-control-group legend,
.estimate-tier,
.estimate-timeline,
.estimate-smallprint,
.estimate-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.35;
  text-transform: uppercase;
}

.estimate-label-row label,
.estimate-control-group legend {
  color: rgba(251, 251, 247, 0.8);
}

.estimate-label-row output {
  color: var(--paper-soft);
}

.estimate-controls input[type="range"] {
  --range-progress: 29%;
  width: 100%;
  height: 2rem;
  margin: 1rem 0 0.2rem;
  appearance: none;
  border: 0;
  background: transparent;
}

.estimate-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--paper-soft) 0 var(--range-progress), rgba(251, 251, 247, 0.18) var(--range-progress) 100%);
}

.estimate-controls input[type="range"]::-moz-range-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(251, 251, 247, 0.18);
}

.estimate-controls input[type="range"]::-moz-range-progress {
  height: 2px;
  background: var(--paper-soft);
}

.estimate-controls input[type="range"]::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.44rem;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: var(--paper-soft);
  box-shadow: 0 0 0 0.36rem rgba(255, 255, 255, 0.08);
}

.estimate-controls input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: var(--paper-soft);
  box-shadow: 0 0 0 0.36rem rgba(255, 255, 255, 0.08);
}

.estimate-controls input[type="range"]:focus-visible {
  outline: 2px solid var(--paper-soft);
  outline-offset: 0.35rem;
}

.estimate-range-labels {
  display: flex;
  justify-content: space-between;
  color: rgba(251, 251, 247, 0.58);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.estimate-segments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(251, 251, 247, 0.24);
  border-radius: 12px;
}

.estimate-segments label,
.estimate-checkboxes label {
  position: relative;
  cursor: pointer;
}

.estimate-segments input,
.estimate-checkboxes input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.estimate-segments span {
  display: grid;
  min-height: 3rem;
  place-items: center;
  border-right: 1px solid rgba(251, 251, 247, 0.12);
  color: rgba(251, 251, 247, 0.68);
  font-size: 0.84rem;
  transition:
    background-color 320ms var(--ease),
    color 320ms var(--ease);
}

.estimate-segments label:last-child span {
  border-right: 0;
}

.estimate-segments input:checked + span,
.estimate-segments input:focus-visible + span {
  background: rgba(251, 251, 247, 0.12);
  color: var(--paper-soft);
}

.estimate-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  margin-top: 1rem;
}

.estimate-checkboxes span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2rem;
  color: rgba(251, 251, 247, 0.72);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.3;
  text-transform: uppercase;
}

.estimate-checkboxes span::before {
  flex: 0 0 auto;
  width: 1.05rem;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(251, 251, 247, 0.38);
  background: rgba(255, 255, 255, 0.02);
  transition:
    background-color 320ms var(--ease),
    border-color 320ms var(--ease),
    box-shadow 320ms var(--ease);
}

.estimate-checkboxes input:checked + span::before {
  border-color: var(--paper-soft);
  background:
    linear-gradient(135deg, transparent 0 42%, var(--black) 42% 58%, transparent 58%),
    var(--paper-soft);
  box-shadow: 0 0 0 0.22rem rgba(255, 255, 255, 0.07);
}

.estimate-checkboxes input:focus-visible + span::before {
  outline: 2px solid var(--paper-soft);
  outline-offset: 3px;
}

.estimate-note {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(251, 251, 247, 0.12);
  color: rgba(251, 251, 247, 0.52);
  text-transform: none;
}

.estimate-note span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid rgba(251, 251, 247, 0.36);
  border-radius: 50%;
  font-size: 0.68rem;
}

.estimate-tier {
  width: max-content;
  color: var(--pricing-muted-accent);
}

.estimate-price {
  margin: 0;
  color: var(--paper-soft);
  font-family: var(--mono);
  font-size: clamp(2.15rem, 3.4vw, 4.1rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.estimate-description {
  max-width: 29rem;
  margin: 0;
  color: rgba(251, 251, 247, 0.76);
  font-size: 1rem;
  line-height: 1.62;
}

.estimate-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin: 0;
  color: var(--pricing-muted-accent);
}

.estimate-timeline strong {
  color: rgba(251, 251, 247, 0.78);
  font-weight: 400;
}

.estimate-cta {
  justify-content: space-between;
  width: min(100%, 26rem);
  min-height: 3.6rem;
  padding-right: 1.25rem;
  padding-left: 1.45rem;
  border-color: rgba(251, 251, 247, 0.22);
  background: rgba(255, 255, 255, 0.035);
  font-size: 1.05rem;
}

.estimate-smallprint {
  margin: 0;
  color: rgba(251, 251, 247, 0.46);
  text-transform: none;
}

.estimate-output.is-updating .estimate-tier,
.estimate-output.is-updating .estimate-price,
.estimate-output.is-updating .estimate-timeline {
  animation: estimate-update 320ms var(--ease) both;
}

.pricing-footer {
  display: grid;
  grid-template-columns: auto minmax(18rem, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding-top: 1rem;
}

.pricing-footer p {
  max-width: 48rem;
  margin: 0;
  color: rgba(251, 251, 247, 0.52);
  font-size: 0.88rem;
  line-height: 1.55;
}

.pricing-top {
  display: grid;
  place-items: center;
  width: 3.35rem;
  aspect-ratio: 1;
  border: 1px solid rgba(251, 251, 247, 0.52);
  border-radius: 50%;
  color: var(--paper-soft);
  transition:
    background-color 420ms var(--ease),
    color 420ms var(--ease),
    transform 420ms var(--ease);
}

.pricing-top:hover,
.pricing-top:focus-visible {
  background: var(--paper-soft);
  color: var(--black);
  transform: translateY(-0.22rem);
}

@keyframes estimate-update {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-loaded .pricing-card-list .reveal:nth-child(1) {
  transition-delay: 80ms;
}

.is-loaded .pricing-card-list .reveal:nth-child(2) {
  transition-delay: 170ms;
}

.is-loaded .pricing-card-list .reveal:nth-child(3) {
  transition-delay: 260ms;
}

@media (max-width: 1180px) {
  .pricing-inner {
    grid-template-columns: 1fr;
  }

  .pricing-card-list {
    grid-template-columns: repeat(3, minmax(21rem, 1fr));
    margin-right: calc(var(--page-pad) * -1);
    padding-right: var(--page-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .pricing-card-list::-webkit-scrollbar {
    display: none;
  }

  .pricing-card-item {
    scroll-snap-align: start;
  }

  .pricing-card--featured {
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  .pricing-inner {
    padding-top: 5.5rem;
    padding-bottom: 5.8rem;
  }

  .pricing-content {
    gap: 3.3rem;
  }

  .pricing-header h2 {
    font-size: clamp(3rem, 11vw, 5.2rem);
  }

  .estimate-console {
    grid-template-columns: 1fr;
  }

  .estimate-output {
    min-height: 24rem;
  }
}

@media (max-width: 640px) {
  .pricing::before {
    top: 4rem;
    right: -0.4rem;
    font-size: 6.8rem;
    opacity: 0.75;
  }

  .pricing-inner {
    padding-top: 5rem;
    padding-bottom: 4.9rem;
  }

  .pricing-header h2,
  .estimate-heading h3 {
    font-size: clamp(2.55rem, 13vw, 4rem);
  }

  .pricing-card-list {
    grid-template-columns: 1fr;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .pricing-card {
    min-height: auto;
    padding: 1.45rem;
    border-radius: 0;
  }

  .pricing-card h3 {
    font-size: 1.68rem;
  }

  .pricing-card strong {
    font-size: 2rem;
  }

  .pricing-timeline {
    align-items: flex-start;
    flex-direction: column;
  }

  .estimate-console {
    padding: 0.75rem;
    border-radius: 14px;
  }

  .estimate-controls,
  .estimate-output {
    padding: 1.25rem;
    border-radius: 12px;
  }

  .estimate-segments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .estimate-segments label:nth-child(2) span {
    border-right: 0;
  }

  .estimate-segments label:nth-child(-n + 2) span {
    border-bottom: 1px solid rgba(251, 251, 247, 0.12);
  }

  .estimate-checkboxes {
    grid-template-columns: 1fr;
  }

  .estimate-price {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .pricing-footer {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }

  .pricing-footer p {
    grid-column: 1 / -1;
    order: 3;
  }
}

.enquiry {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  margin-top: clamp(3rem, 5vw, 5.5rem);
  border-top: 1px solid rgba(8, 8, 8, 0.12);
  border-bottom: 1px solid rgba(8, 8, 8, 0.1);
  background:
    radial-gradient(circle at 18% 72%, rgba(8, 8, 8, 0.055), transparent 22rem),
    radial-gradient(circle at 88% 12%, rgba(8, 8, 8, 0.035), transparent 26rem),
    linear-gradient(180deg, rgba(8, 8, 8, 0.025), transparent 42%, rgba(8, 8, 8, 0.04)),
    var(--paper-soft);
  color: var(--ink);
}

.enquiry::before {
  position: absolute;
  top: 5rem;
  right: -1rem;
  pointer-events: none;
  content: "ENQUIRY";
  color: rgba(8, 8, 8, 0.045);
  font-family: var(--display);
  font-size: clamp(7rem, 16vw, 21rem);
  font-weight: 100;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}

.enquiry-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(20rem, 0.7fr) minmax(28rem, 1fr) minmax(24rem, 0.78fr);
  gap: clamp(2.25rem, 3.4vw, 4.2rem);
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: clamp(6.2rem, 6.4vw, 7.4rem) var(--page-pad) 4.4rem;
}

.enquiry-intro {
  position: relative;
  min-height: 43rem;
  padding-top: 0.25rem;
}

.enquiry-intro h2 {
  max-width: 44rem;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.4rem, 5.45vw, 6.3rem);
  font-stretch: normal;
  font-weight: 100;
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

.enquiry-intro h2 span {
  display: block;
}

.enquiry-intro h2 em {
  font-style: italic;
  font-weight: 100;
}

.enquiry-intro > p:not(.kicker) {
  max-width: 28rem;
  margin: 2.25rem 0 0;
  color: rgba(8, 8, 8, 0.68);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.75;
}

.enquiry-orbit {
  position: absolute;
  left: -9rem;
  bottom: 1rem;
  width: min(38vw, 30rem);
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid rgba(8, 8, 8, 0.12);
  border-radius: 50%;
  opacity: 0.9;
}

.enquiry-orbit::before {
  position: absolute;
  inset: 32%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 8, 8, 0.18), rgba(8, 8, 8, 0.05) 32%, transparent 68%);
  filter: blur(0.45rem);
}

.enquiry-orbit span {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(8, 8, 8, 0.12);
  border-radius: 50%;
}

.enquiry-orbit span:last-child {
  inset: 42%;
}

.brief-form {
  display: grid;
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.18vw, 1.35rem) clamp(1rem, 1.3vw, 1.4rem);
  min-width: 0;
  padding: clamp(1.3rem, 1.75vw, 2rem);
  border: 1px solid rgba(8, 8, 8, 0.34);
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.12), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    #0b0b0b;
  color: var(--paper-soft);
  box-shadow:
    0 1.5rem 4rem rgba(8, 8, 8, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.brief-fields,
.brief-form > .brief-choice-group,
.brief-split-groups,
.brief-submit-row,
.brief-status,
.brief-success {
  grid-column: 1 / -1;
}

.brief-form > .brief-field--textarea {
  grid-column: span 1;
}

.brief-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem 1.25rem;
}

.brief-field {
  position: relative;
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}

.brief-field--wide,
.brief-field--textarea {
  grid-column: 1 / -1;
}

.brief-field label,
.brief-choice-group legend {
  color: rgba(251, 251, 247, 0.78);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.brief-field label span,
.brief-choice-group legend span {
  color: var(--paper-soft);
}

.brief-field input,
.brief-field textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(251, 251, 247, 0.22);
  border-radius: 0;
  background: transparent;
  color: var(--paper-soft);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  outline: 0;
  padding: 0.45rem 0 0.58rem;
  transition:
    border-color 320ms var(--ease),
    background-color 320ms var(--ease);
}

.brief-field textarea {
  min-height: 5.6rem;
  resize: vertical;
}

.brief-field input::placeholder,
.brief-field textarea::placeholder {
  color: rgba(251, 251, 247, 0.38);
}

.brief-field input:focus,
.brief-field textarea:focus {
  border-bottom-color: rgba(251, 251, 247, 0.86);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent);
}

.brief-field.is-invalid input,
.brief-field.is-invalid textarea {
  border-bottom-color: rgba(251, 251, 247, 0.78);
  box-shadow: inset 0 -1px 0 rgba(251, 251, 247, 0.52);
}

.brief-error {
  min-height: 0.7rem;
  margin: 0;
  color: rgba(251, 251, 247, 0.78);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.35;
  text-transform: uppercase;
}

.brief-choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brief-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.8rem), 1fr));
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.brief-choice-grid--project {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.6rem), 1fr));
}

.brief-choice-grid label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.brief-choice-grid input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.brief-choice-grid span {
  position: relative;
  display: grid;
  min-height: 2.35rem;
  place-items: center;
  padding: 0.54rem 0.6rem;
  border: 1px solid rgba(251, 251, 247, 0.22);
  color: rgba(251, 251, 247, 0.66);
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  transition:
    border-color 320ms var(--ease),
    background-color 320ms var(--ease),
    color 320ms var(--ease),
    transform 320ms var(--ease);
}

.brief-choice-grid input:checked + span {
  border-color: rgba(251, 251, 247, 0.74);
  background: rgba(255, 255, 255, 0.075);
  color: var(--paper-soft);
}

.brief-choice-grid input:focus-visible + span {
  outline: 2px solid var(--paper-soft);
  outline-offset: 3px;
}

.brief-choice-grid input:checked + span::after {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  content: "";
  width: 0.28rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}

.brief-split-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1rem;
}

.brief-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 14.5rem);
  gap: 0.9rem;
  align-items: center;
  padding-top: 0.35rem;
}

.brief-submit-row p {
  margin: 0;
  color: rgba(251, 251, 247, 0.58);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
}

.brief-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.72rem 0.9rem 0.72rem 1.25rem;
  border: 1px solid rgba(251, 251, 247, 0.42);
  border-radius: 999px;
  background: transparent;
  color: var(--paper-soft);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1;
  text-transform: uppercase;
  transition:
    border-color 420ms var(--ease),
    background-color 420ms var(--ease),
    transform 420ms var(--ease);
}

.brief-submit span:first-child {
  white-space: nowrap;
}

.brief-submit span:last-child {
  display: grid;
  place-items: center;
  width: 2.15rem;
  aspect-ratio: 1;
  border: 1px solid rgba(251, 251, 247, 0.34);
  border-radius: 50%;
  transition:
    border-color 420ms var(--ease),
    transform 420ms var(--ease);
}

.brief-submit:hover,
.brief-submit:focus-visible {
  border-color: var(--paper-soft);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-0.15rem);
}

.brief-submit:hover span:last-child,
.brief-submit:focus-visible span:last-child {
  border-color: var(--paper-soft);
  transform: translate(0.18rem, -0.18rem);
}

.brief-submit:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.brief-status {
  margin: 0;
  color: rgba(251, 251, 247, 0.82);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.brief-status a {
  color: var(--paper-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.brief-success {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding: clamp(0.5rem, 1vw, 1.1rem) 0;
}

.brief-success__mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(251, 251, 247, 0.5);
  border-radius: 50%;
  color: var(--paper-soft);
  font-size: 1.15rem;
  line-height: 1;
}

.brief-success h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.brief-success p {
  margin: 0;
  max-width: 46ch;
  color: rgba(251, 251, 247, 0.74);
  font-size: 0.94rem;
  line-height: 1.6;
}

.brief-success a {
  color: var(--paper-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.brief-form.is-sent {
  align-content: center;
  justify-items: start;
  min-height: 24rem;
}

.brief-form.is-sent > *:not(.brief-success) {
  display: none;
}

.brief-form.is-sent .brief-success {
  animation: brief-success-in 480ms var(--ease) both;
}

@keyframes brief-success-in {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brief-form.is-sent .brief-success {
    animation: none;
  }
}

.brief-summary {
  position: sticky;
  top: 6.5rem;
  align-self: start;
  display: grid;
  min-width: 0;
  min-height: 42rem;
  border: 1px solid rgba(8, 8, 8, 0.38);
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.1), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.01)),
    rgba(10, 10, 10, 0.88);
  box-shadow:
    0 1.5rem 4rem rgba(8, 8, 8, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@supports (backdrop-filter: blur(12px)) {
  .brief-summary {
    backdrop-filter: blur(12px);
  }
}

.brief-summary__top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.8rem 1.8rem 1rem;
}

.brief-summary h3,
.brief-next h4,
.brief-reset,
.brief-summary-list dt,
.brief-private,
.enquiry-strip {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.35;
  text-transform: uppercase;
}

.brief-summary h3,
.brief-next h4 {
  margin: 0;
  color: rgba(251, 251, 247, 0.7);
  font-weight: 400;
}

.brief-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(251, 251, 247, 0.58);
  cursor: pointer;
}

.brief-reset:hover,
.brief-reset:focus-visible {
  color: var(--paper-soft);
}

.brief-summary-list {
  margin: 1.1rem 1.8rem 0;
}

.brief-summary-list div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(8rem, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px dotted rgba(251, 251, 247, 0.16);
}

.brief-summary-list dt {
  color: rgba(251, 251, 247, 0.52);
}

.brief-summary-list dd {
  margin: 0;
  padding-right: 0.5rem;
  color: var(--paper-soft);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: right;
  transition:
    opacity 240ms var(--ease),
    transform 240ms var(--ease);
}

.brief-summary.is-updating dd {
  animation: brief-value-update 260ms var(--ease) both;
}

.brief-next {
  margin: 2.2rem 1.8rem 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(251, 251, 247, 0.18);
}

.brief-next ol {
  display: grid;
  gap: 1rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.brief-next li {
  counter-increment: next-step;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.75rem;
  color: rgba(251, 251, 247, 0.64);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.55;
}

.brief-next li::before {
  content: counter(next-step, decimal-leading-zero);
  color: rgba(251, 251, 247, 0.8);
}

.brief-private {
  align-self: end;
  margin: 2rem 1.8rem 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(251, 251, 247, 0.15);
  color: rgba(251, 251, 247, 0.54);
  text-transform: none;
}

.enquiry-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 1fr) auto auto auto;
  gap: 1.4rem;
  align-items: center;
  min-height: 5.2rem;
  margin-top: clamp(4rem, 5vw, 6rem);
  border-top: 1px solid rgba(8, 8, 8, 0.14);
  border-bottom: 1px solid rgba(8, 8, 8, 0.14);
  color: rgba(8, 8, 8, 0.7);
}

.enquiry-strip a {
  width: max-content;
}

.enquiry-strip a:hover,
.enquiry-strip a:focus-visible {
  color: var(--ink);
}

.enquiry-top {
  display: grid;
  place-items: center;
  width: 3.1rem;
  aspect-ratio: 1;
  border: 1px solid rgba(8, 8, 8, 0.42);
  border-radius: 50%;
  transition:
    background-color 420ms var(--ease),
    color 420ms var(--ease),
    transform 420ms var(--ease);
}

.enquiry-top:hover,
.enquiry-top:focus-visible {
  background: var(--ink);
  color: var(--paper-soft);
  transform: translate(0.18rem, -0.18rem);
}

@keyframes brief-value-update {
  from {
    opacity: 0;
    transform: translateY(0.3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1280px) {
  .enquiry-inner {
    grid-template-columns: minmax(19rem, 0.78fr) minmax(25rem, 1.2fr);
  }

  .brief-summary {
    grid-column: 1 / -1;
    position: relative;
    top: auto;
    min-height: auto;
  }

  .brief-summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
  }

  .brief-next ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .enquiry-inner {
    grid-template-columns: 1fr;
    gap: 2.6rem;
    padding-top: 5.5rem;
  }

  .enquiry-orbit {
    display: none;
  }

  .enquiry-intro {
    min-height: auto;
    padding-bottom: 1.4rem;
  }

  .enquiry-intro h2 {
    font-size: clamp(3.2rem, 12vw, 5.6rem);
  }

  .brief-summary {
    grid-column: auto;
  }

  .brief-form {
    margin-top: 2rem;
  }

  .brief-next ol {
    grid-template-columns: 1fr;
  }

  .enquiry-strip {
    grid-template-columns: 1fr 1fr;
  }

  .enquiry-top {
    justify-self: end;
  }
}

@media (max-width: 640px) {
  .enquiry::before {
    display: none;
  }

  .enquiry-inner {
    gap: 2.25rem;
    padding-top: 5rem;
  }

  .enquiry-intro h2 {
    font-size: clamp(2.65rem, 14vw, 4.1rem);
  }

  .enquiry-intro > p:not(.kicker) {
    font-size: 0.76rem;
  }

  .brief-summary-list,
  .enquiry-strip {
    grid-template-columns: 1fr;
  }

  .brief-choice-grid span {
    min-height: 3rem;
  }

  .brief-submit {
    width: 100%;
  }

  .brief-summary__top,
  .brief-summary-list,
  .brief-next,
  .brief-private {
    margin-right: 1.2rem;
    margin-left: 1.2rem;
  }

  .brief-summary__top {
    padding: 1.35rem 1.2rem 0.6rem;
  }

  .brief-summary-list div {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .brief-summary-list dd {
    text-align: left;
  }

  .enquiry-strip {
    gap: 1rem;
    padding: 1.25rem 0;
  }

  .enquiry-top {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .brief-form {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.25rem;
  }

  .brief-form > .brief-field--textarea {
    grid-column: 1 / -1;
  }

  .brief-fields,
  .brief-split-groups,
  .brief-choice-grid,
  .brief-choice-grid--project,
  .brief-submit-row {
    grid-template-columns: 1fr;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.studio-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(251, 251, 247, 0.13);
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.055), transparent 26rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 50%, rgba(0, 0, 0, 0.22)),
    var(--black);
  color: var(--paper-soft);
}

.studio-section::before {
  position: absolute;
  top: 4rem;
  right: -1rem;
  pointer-events: none;
  color: rgba(251, 251, 247, 0.035);
  content: attr(id);
  font-family: var(--display);
  font-size: clamp(6rem, 15vw, 18rem);
  font-weight: 100;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}

.studio-section__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 1880px);
  margin: 0 auto;
}

.studio-section__inner--about {
  grid-template-columns: minmax(25rem, 0.95fr) minmax(30rem, 1.05fr);
  min-height: 44rem;
}

.studio-about__intro {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 5.2rem 4.8rem;
}

.studio-about__intro h2,
.capabilities-heading h2,
.faq-panel h2,
.ownership-panel h2 {
  margin: 0;
  font-family: var(--display);
  font-stretch: normal;
  font-weight: 100;
  letter-spacing: 0;
  text-transform: uppercase;
}

.studio-about__intro h2 {
  font-size: clamp(4rem, 6.3vw, 7.5rem);
  line-height: 0.94;
}

.studio-about__intro h2 span,
.faq-panel h2 span,
.ownership-panel h2 span {
  display: block;
}

.studio-about__intro > p:not(.kicker),
.capabilities-heading p,
.studio-copy p,
.ownership-panel > p,
.footer-brand > p {
  color: rgba(251, 251, 247, 0.76);
  font-size: 1.05rem;
  line-height: 1.7;
}

.studio-about__intro > p:not(.kicker) {
  max-width: 30rem;
  margin: 1.45rem 0 0;
}

.studio-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 4.8rem 0 0;
}

.studio-stats div {
  padding-left: 2rem;
  border-left: 1px solid rgba(251, 251, 247, 0.15);
}

.studio-stats div:first-child {
  padding-left: 0;
  border-left: 0;
}

.studio-stats dt {
  color: var(--paper-soft);
  font-family: var(--mono);
  font-size: 1.55rem;
  line-height: 1;
}

.studio-stats dd {
  margin: 0.55rem 0 0;
  color: rgba(251, 251, 247, 0.6);
  font-size: 0.82rem;
  line-height: 1.45;
}

.studio-stats dd span {
  display: block;
  color: rgba(251, 251, 247, 0.78);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.studio-about__body {
  display: grid;
  align-content: center;
  gap: 2.2rem;
  min-width: 0;
  padding: 5.2rem 4.8rem;
  border-left: 1px solid rgba(251, 251, 247, 0.12);
}

.studio-copy {
  display: grid;
  gap: 1.4rem;
  max-width: 38rem;
}

.studio-copy p {
  margin: 0;
}

.studio-orbit-panel,
.capability-card,
.ownership-panel,
.ownership-cta {
  border: 1px solid var(--card-border-color);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(10, 10, 10, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.studio-orbit-panel {
  display: grid;
  grid-template-columns: minmax(15rem, 0.9fr) minmax(16rem, 1fr);
  min-height: 18rem;
}

.studio-orbit {
  position: relative;
  min-height: 18rem;
  border-right: 1px solid rgba(251, 251, 247, 0.12);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 56%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.02), transparent 48%);
}

.studio-orbit span,
.studio-orbit i {
  position: absolute;
  border-radius: 50%;
}

.studio-orbit span {
  inset: 19%;
  border: 1px solid rgba(251, 251, 247, 0.13);
}

.studio-orbit span:nth-child(2) {
  inset: 31%;
}

.studio-orbit span:nth-child(3) {
  inset: 43%;
}

.studio-orbit i {
  width: 0.34rem;
  aspect-ratio: 1;
  background: var(--paper-soft);
  opacity: 0.86;
  animation: studio-orbit-drift 9000ms linear infinite;
}

.studio-orbit i:nth-of-type(1) {
  top: 17%;
  left: 70%;
}

.studio-orbit i:nth-of-type(2) {
  right: 25%;
  bottom: 22%;
  animation-delay: -2600ms;
}

.studio-orbit i:nth-of-type(3) {
  left: 32%;
  bottom: 15%;
  animation-delay: -5200ms;
}

.studio-principles {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 1.35rem 1.45rem;
  list-style: none;
}

.studio-principles li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(251, 251, 247, 0.1);
}

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

.studio-principles > li > span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  aspect-ratio: 1;
  border: 1px solid rgba(251, 251, 247, 0.35);
  border-radius: 50%;
  color: rgba(251, 251, 247, 0.76);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1;
}

.studio-principles h3,
.capability-card h3,
.ownership-list h3,
.footer-nav h3,
.footer-contact h3,
.footer-descriptor {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.35;
  text-transform: uppercase;
}

.studio-principles p,
.capability-card p,
.ownership-list p {
  margin: 0.45rem 0 0;
  color: rgba(251, 251, 247, 0.7);
  font-size: 0.8rem;
  line-height: 1.55;
}

.studio-section__inner--capabilities {
  grid-template-columns: minmax(19rem, 0.45fr) minmax(34rem, 1fr);
  min-height: 42rem;
}

.capabilities-heading {
  align-self: start;
  padding: 5.2rem 4.8rem;
}

.capabilities-heading h2 {
  font-size: clamp(3rem, 4.3vw, 5.2rem);
  line-height: 1;
}

.capabilities-heading p {
  max-width: 26rem;
  margin: 1.45rem 0 0;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  min-width: 0;
  padding: 5.2rem var(--page-pad) 5.2rem 0;
}

.capability-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 17rem;
  padding: 1.45rem;
  overflow: hidden;
  transition:
    border-color 360ms var(--ease),
    background-color 360ms var(--ease),
    transform 360ms var(--ease);
}

.capability-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.5;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.1), transparent 9rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 54%);
}

.capability-card:hover,
.capability-card:focus-within {
  border-color: rgba(251, 251, 247, 0.42);
  background-color: rgba(255, 255, 255, 0.035);
  transform: translateY(-0.2rem);
}

.capability-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 1rem 0 1.35rem;
  color: rgba(251, 251, 247, 0.86);
  font-family: var(--mono);
  font-size: 1.05rem;
  transition: transform 360ms var(--ease);
}

.capability-card:hover .capability-icon,
.capability-card:focus-within .capability-icon {
  transform: translate(0.12rem, -0.12rem);
}

.capability-icon--frame,
.capability-icon--cursor,
.capability-icon--gauge,
.capability-icon--access {
  border: 1px solid rgba(251, 251, 247, 0.44);
}

.capability-icon--frame span {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid rgba(251, 251, 247, 0.62);
}

.capability-icon--cursor {
  border-radius: 50%;
}

.capability-icon--cursor span {
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1px solid rgba(251, 251, 247, 0.78);
  border-bottom: 1px solid rgba(251, 251, 247, 0.78);
  transform: rotate(-24deg);
}

.capability-icon--grid {
  grid-template-columns: repeat(2, 0.55rem);
  gap: 0.22rem;
}

.capability-icon--grid span {
  width: 0.55rem;
  aspect-ratio: 1;
  border: 1px solid rgba(251, 251, 247, 0.62);
}

.capability-icon--gauge {
  border-radius: 50% 50% 0 0;
  border-bottom: 0;
}

.capability-icon--gauge span {
  width: 0.8rem;
  height: 1px;
  background: rgba(251, 251, 247, 0.72);
  transform: rotate(-36deg);
  transform-origin: right center;
}

.capability-icon--access {
  border-radius: 50%;
}

.capability-icon--access span::before,
.capability-icon--access span::after {
  position: absolute;
  content: "";
  background: rgba(251, 251, 247, 0.72);
}

.capability-icon--access span::before {
  width: 1px;
  height: 1.15rem;
  transform: translateY(-0.05rem);
}

.capability-icon--access span::after {
  width: 1rem;
  height: 1px;
  transform: translate(-0.45rem, -0.28rem);
}

.capability-card h3,
.capability-card p,
.capability-card ul,
.capability-arrow {
  position: relative;
  z-index: 1;
}

.capability-card h3 {
  color: var(--paper-soft);
}

.capability-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.capability-card li {
  padding: 0.24rem 0.45rem;
  border: 1px solid rgba(251, 251, 247, 0.13);
  color: rgba(251, 251, 247, 0.56);
  font-family: var(--mono);
  font-size: 0.56rem;
  line-height: 1;
  text-transform: uppercase;
}

.capability-arrow {
  align-self: end;
  width: max-content;
  margin-top: 1.25rem;
  color: rgba(251, 251, 247, 0.72);
  font-family: var(--mono);
  transition: transform 360ms var(--ease);
}

.capability-card:hover .capability-arrow,
.capability-card:focus-within .capability-arrow {
  transform: translate(0.16rem, -0.16rem);
}

.studio-section__inner--trust {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.faq-panel,
.ownership-panel {
  min-width: 0;
  padding: 5.2rem 4.8rem;
}

.faq-panel {
  border-right: 1px solid rgba(251, 251, 247, 0.12);
}

.faq-panel h2,
.ownership-panel h2 {
  font-size: clamp(3rem, 4.4vw, 5.5rem);
  line-height: 0.98;
}

.faq-list {
  display: grid;
  margin: 2.1rem 0 1.6rem;
  border-top: 1px solid var(--card-border-color);
}

.faq-list details {
  border-bottom: 1px solid var(--card-border-color);
}

.faq-list summary {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem 0;
  color: rgba(251, 251, 247, 0.78);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.35;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span:first-child {
  color: rgba(251, 251, 247, 0.55);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.faq-list summary span:last-child {
  position: relative;
  width: 0.9rem;
  aspect-ratio: 1;
}

.faq-list summary span:last-child::before,
.faq-list summary span:last-child::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 1px;
  content: "";
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 260ms var(--ease);
}

.faq-list summary span:last-child::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-list details[open] summary span:last-child::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-list details p {
  max-width: 42rem;
  margin: -0.2rem 0 1.05rem 3.6rem;
  color: rgba(251, 251, 247, 0.7);
  font-size: 0.88rem;
  line-height: 1.65;
}

.studio-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  width: max-content;
  min-height: 2.85rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(251, 251, 247, 0.4);
  border-radius: 999px;
  color: var(--paper-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
  transition:
    border-color 360ms var(--ease),
    background-color 360ms var(--ease),
    transform 360ms var(--ease);
}

.studio-pill-link:hover,
.studio-pill-link:focus-visible {
  border-color: rgba(251, 251, 247, 0.8);
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-0.12rem);
}

.ownership-panel {
  position: relative;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ownership-panel::before {
  position: absolute;
  inset: 2.4rem;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(251, 251, 247, 0.11);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.07), transparent 15rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 52%);
}

.ownership-panel > * {
  position: relative;
  z-index: 1;
}

.ownership-panel > p:not(.kicker) {
  max-width: 28rem;
  margin: 1.2rem 0 0;
}

.ownership-list {
  display: grid;
  gap: 1.05rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.ownership-list li {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: 1.1rem;
  align-items: start;
}

.ownership-list > li > span {
  color: rgba(251, 251, 247, 0.74);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.2;
}

.ownership-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  max-width: 34rem;
  min-height: 5.2rem;
  padding: 1rem 0.9rem 1rem 1.45rem;
  color: var(--paper-soft);
  font-size: 1rem;
  line-height: 1.45;
  transition:
    border-color 360ms var(--ease),
    background-color 360ms var(--ease);
}

.ownership-cta span:last-child {
  display: grid;
  place-items: center;
  width: 3.7rem;
  aspect-ratio: 1;
  border-left: 1px solid rgba(251, 251, 247, 0.16);
  font-family: var(--mono);
  font-size: 1.5rem;
  transition: transform 360ms var(--ease);
}

.ownership-cta:hover,
.ownership-cta:focus-visible {
  border-color: rgba(251, 251, 247, 0.42);
  background-color: rgba(255, 255, 255, 0.035);
}

.ownership-cta:hover span:last-child,
.ownership-cta:focus-visible span:last-child {
  transform: translate(0.14rem, -0.14rem);
}

.site-footer {
  display: grid;
  border-top: 1px solid rgba(251, 251, 247, 0.16);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.045), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 48%),
    var(--black);
  color: var(--paper-soft);
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(20rem, 1.3fr) repeat(3, minmax(10rem, 0.7fr));
  gap: 3rem;
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 4.2rem var(--page-pad);
}

.footer-brand {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  max-width: 28rem;
}

.footer-logo {
  width: max-content;
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 0.86;
  text-transform: uppercase;
}

.footer-logo span {
  display: block;
}

.footer-descriptor {
  color: rgba(251, 251, 247, 0.72);
  letter-spacing: 0.06em;
}

.footer-brand > p:not(.footer-descriptor) {
  margin: 0;
  max-width: 24rem;
  font-size: 0.86rem;
  line-height: 1.65;
}

.footer-nav,
.footer-contact {
  display: grid;
  align-content: start;
  gap: 0.72rem;
  min-width: 0;
  font-style: normal;
}

.footer-nav h3,
.footer-contact h3 {
  margin-bottom: 0.25rem;
  color: rgba(251, 251, 247, 0.62);
  font-weight: 400;
}

.footer-nav a,
.footer-contact a,
.footer-contact span,
.site-footer__bottom {
  color: rgba(251, 251, 247, 0.68);
  font-size: 0.84rem;
  line-height: 1.45;
}

.footer-nav a,
.footer-contact a,
.site-footer__bottom a {
  width: max-content;
  transition:
    color 260ms var(--ease),
    transform 260ms var(--ease);
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible,
.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: var(--paper-soft);
  transform: translateX(0.12rem);
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  width: min(100%, 1880px);
  margin: 0 auto;
  padding: 1.25rem var(--page-pad);
  border-top: 1px solid rgba(251, 251, 247, 0.1);
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__bottom a {
  justify-self: end;
}

@keyframes studio-orbit-drift {
  0%,
  100% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.9;
    transform: translate3d(0.32rem, -0.26rem, 0);
  }
}

@media (max-width: 1280px) {
  .studio-section__inner--about {
    grid-template-columns: minmax(23rem, 0.9fr) minmax(27rem, 1.1fr);
  }

  .studio-about__intro,
  .studio-about__body,
  .capabilities-heading,
  .faq-panel,
  .ownership-panel {
    padding-right: 3rem;
    padding-left: 3rem;
  }

  .studio-orbit-panel {
    grid-template-columns: 1fr;
  }

  .studio-orbit {
    min-height: 15rem;
    border-right: 0;
    border-bottom: 1px solid rgba(251, 251, 247, 0.12);
  }

  .studio-section__inner--capabilities {
    grid-template-columns: minmax(16rem, 0.38fr) minmax(32rem, 1fr);
  }

  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .studio-section::before {
    font-size: 8rem;
  }

  .studio-section__inner,
  .studio-section__inner--about,
  .studio-section__inner--capabilities,
  .studio-section__inner--trust {
    grid-template-columns: 1fr;
  }

  .studio-about__intro,
  .studio-about__body,
  .capabilities-heading,
  .faq-panel,
  .ownership-panel {
    padding: 4.7rem var(--page-pad);
  }

  .studio-about__body,
  .faq-panel {
    border-left: 0;
    border-top: 1px solid rgba(251, 251, 247, 0.12);
    border-right: 0;
  }

  .capabilities-heading {
    padding-bottom: 1rem;
  }

  .capability-grid {
    padding: 1.2rem var(--page-pad) 4.8rem;
  }

  .studio-section__inner--trust {
    gap: 0;
  }

  .ownership-panel {
    border-top: 1px solid rgba(251, 251, 247, 0.12);
  }

  .site-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom a {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .studio-section::before {
    display: none;
  }

  .studio-about__intro,
  .studio-about__body,
  .capabilities-heading,
  .faq-panel,
  .ownership-panel {
    padding-top: 4.3rem;
    padding-bottom: 4.3rem;
  }

  .studio-about__intro h2 {
    font-size: clamp(3.1rem, 14vw, 4.35rem);
  }

  .capabilities-heading h2,
  .faq-panel h2,
  .ownership-panel h2 {
    font-size: clamp(2.55rem, 12vw, 3.55rem);
  }

  .studio-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 3rem;
  }

  .studio-stats div,
  .studio-stats div:first-child {
    padding: 1rem 0 0;
    border-top: 1px solid rgba(251, 251, 247, 0.15);
    border-left: 0;
  }

  .studio-orbit-panel {
    min-height: 0;
  }

  .studio-orbit {
    min-height: 12rem;
  }

  .studio-principles {
    padding: 1rem 1.1rem;
  }

  .capability-grid,
  .site-footer__main,
  .site-footer__bottom {
    grid-template-columns: 1fr;
  }

  .capability-card {
    min-height: 0;
  }

  .faq-list summary {
    grid-template-columns: 2rem 1fr auto;
    gap: 0.7rem;
    font-size: 0.82rem;
  }

  .faq-list details p {
    margin-left: 2.7rem;
    font-size: 0.82rem;
  }

  .ownership-panel::before {
    inset: 1.25rem;
  }

  .ownership-cta {
    grid-template-columns: 1fr;
  }

  .ownership-cta span:last-child {
    justify-self: start;
    width: 2.9rem;
    border-left: 0;
    border-top: 1px solid rgba(251, 251, 247, 0.16);
  }

  .site-footer__main {
    gap: 2.4rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.reveal {
  opacity: 1;
  transform: translateY(0);
}

.is-loaded .reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition:
    opacity 760ms var(--ease),
    transform 760ms var(--ease);
}

.is-loaded .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.is-loaded .chapter-row.reveal {
  opacity: 0.48;
  transform: scale(0.985);
}

.is-loaded .chapter-row.reveal.is-active,
.is-loaded .chapter-row.reveal:hover,
.is-loaded .chapter-row.reveal:focus-within {
  opacity: 1;
  transform: scale(1);
}

@keyframes header-enter {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes interface-slide {
  from {
    transform: translateY(-0.55rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes boot-rise {
  from {
    transform: translateY(0.85rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes clip-in {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes title-wipe {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(1.1rem);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes hero-word-in {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes underline-load {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 0.55;
    transform: scaleX(0.28);
  }
}

@keyframes type-enter {
  from {
    opacity: 0;
    transform: translateY(1.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes node-in {
  from {
    opacity: 0;
    transform: scale(0.65);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes node-dot-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes reveal-soft {
  to {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ring-in {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 0.2;
  }
}

@keyframes signal-pulse {
  0%,
  100% {
    r: 11;
  }
  48% {
    r: 14;
  }
}

@keyframes core-acknowledge {
  0% {
    filter: drop-shadow(0 0 0 rgba(8, 8, 8, 0));
  }
  42% {
    filter: drop-shadow(0 0 0.8rem rgba(8, 8, 8, 0.5));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(8, 8, 8, 0));
  }
}

@keyframes node-ping {
  0%,
  100% {
    transform: scale(1);
  }
  44% {
    transform: scale(1.7);
  }
}

@keyframes mouse-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0.58rem);
  }
}

@keyframes scan-pass {
  0% {
    transform: translateY(-12rem);
    opacity: 0;
  }
  18% {
    opacity: 0.055;
  }
  50% {
    opacity: 0.035;
  }
  100% {
    transform: translateY(12rem);
    opacity: 0;
  }
}

@keyframes intent-breathe {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(1);
  }
  48% {
    opacity: 0.2;
    transform: scale(1.018);
  }
}

@keyframes path-dot-blink {
  0%,
  82%,
  100% {
    opacity: 0.32;
  }
  88% {
    opacity: 0.92;
  }
}

@keyframes orbit-core {
  to {
    transform: rotate(360deg);
  }
}

@keyframes intent-core-idle {
  0%,
  100% {
    r: 45;
  }
  50% {
    r: 47;
  }
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes core-pop {
  0%,
  100% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.075);
  }
}

@keyframes module-sequence {
  0%,
  100% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-0.34rem);
  }
}

@keyframes ruler-flicker {
  0%,
  78%,
  100% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.34;
  }
  83% {
    opacity: 0.16;
  }
}

@media (max-width: 1280px) {
  :root {
    --page-pad: 3rem;
  }

  .site-nav {
    gap: 3rem;
  }

  .hero {
    min-height: 100dvh;
    padding-top: 13rem;
    padding-bottom: 4.5rem;
  }

  .hero-frame {
    top: 8.7rem;
  }

  .hero-type {
    top: 10.4rem;
    font-size: 6.1rem;
  }

  .hero-copy {
    width: min(48rem, 66vw);
  }

  .hero h1 {
    font-size: 4.9rem;
  }

  .section-copy h2,
  .chapters-header h2,
  .work-copy h2 {
    font-size: 3.55rem;
  }

  .connection-hero .section-grid {
    grid-template-columns: minmax(22rem, 0.76fr) minmax(34rem, 1.24fr);
    gap: 3.2rem;
  }

  .connection-hero .section-copy h2 {
    font-size: 4.6rem;
  }

  .connection-hero .signal-map {
    min-height: 43rem;
  }

  .chapter-row {
    grid-template-columns: 10.5rem minmax(12rem, 0.55fr) minmax(18rem, 1fr) auto;
    gap: 1.6rem;
    min-height: 13.2rem;
    padding: 1.85rem 2rem;
  }

  .chapter-number {
    font-size: 8rem;
  }
}

@media (max-width: 980px) {
  :root {
    --page-pad: 1.5rem;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
  }

  .site-nav,
  .contact-link {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    min-height: 100dvh;
    padding-top: 7rem;
    padding-bottom: 5.8rem;
    align-items: start;
  }

  .hero::after {
    inset: 6.5rem var(--page-pad) 5.8rem;
  }

  .hero-image {
    object-position: 50% center;
    opacity: 0.78;
  }

  .hero-frame {
    top: 7rem;
    grid-template-columns: 1fr;
  }

  .hero-frame span:nth-child(2),
  .hero-frame span:last-child {
    display: none;
  }

  .hero-type {
    top: 8.8rem;
    left: var(--page-pad);
    right: var(--page-pad);
    flex-wrap: wrap;
    gap: 0 0.18em;
    max-height: 7.2rem;
    color: rgba(251, 251, 247, 0.16);
    font-size: 5.2rem;
    line-height: 0.95;
    white-space: normal;
  }

  .hero-copy {
    width: min(46rem, 100%);
    padding-top: 12.25rem;
    padding-bottom: 0;
  }

  .hero h1 {
    font-size: 4.4rem;
    line-height: 0.98;
  }

  .network-hero,
  .rotating-seal,
  .coordinates {
    display: none;
  }

  .scroll-cue {
    right: auto;
    left: var(--page-pad);
  }

  .section-grid,
  .work-layout {
    grid-template-columns: 1fr;
    padding-top: 5.5rem;
    padding-bottom: 5.8rem;
  }

  .section-grid {
    min-height: auto;
  }

  .connection::before,
  .chapters::after,
  .work::before {
    font-size: 8rem;
  }

  .signal-map {
    min-height: 37rem;
  }

  .connection-hero .section-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    padding-top: 7.2rem;
  }

  .connection-hero .section-copy h2 {
    max-width: 40rem;
    font-size: 3.55rem;
  }

  .connection-hero .section-copy p:not(.kicker) {
    margin-bottom: 2.8rem;
  }

  .connection-hero .signal-map {
    min-height: 46rem;
  }

  .connection-hero .signal-svg {
    inset: 4.2rem 0 6.8rem;
    height: auto;
  }

  .connection-hero .map-label {
    width: min(13rem, 41%);
  }

  .connection-hero .map-label--strategy {
    top: 6.3rem;
    left: 4%;
  }

  .connection-hero .map-label--experience {
    top: 6.3rem;
    right: 4%;
  }

  .connection-hero .map-label--interface {
    bottom: 9.8rem;
    left: 4%;
  }

  .connection-hero .map-label--code {
    right: 4%;
    bottom: 9.8rem;
  }

  .connection-hero .signal-status {
    right: 4%;
  }

  .chapters-inner {
    display: flex;
    flex-direction: column;
    padding-top: 4.2rem;
    padding-bottom: 5.8rem;
  }

  .chapters-main {
    display: contents;
  }

  .chapter-rail {
    position: sticky;
    top: 4.75rem;
    z-index: 3;
    order: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.72rem 0;
    overflow-x: auto;
    background: rgba(13, 14, 14, 0.92);
    backdrop-filter: blur(12px);
  }

  .rail-line {
    display: none;
  }

  .rail-point {
    flex: 0 0 auto;
    gap: 0.45rem;
  }

  .chapters-header {
    order: 1;
    grid-template-columns: 1fr;
    min-height: auto;
    margin-bottom: 1.35rem;
    padding-bottom: 1.45rem;
  }

  .chapter-list {
    order: 3;
  }

  .capabilities-link {
    order: 4;
  }

  .chapter-row {
    grid-template-columns: 1fr auto;
    gap: 1.2rem;
    min-height: auto;
    padding: 2rem;
    border-radius: 0;
  }

  .chapter-number {
    grid-column: 1 / -1;
    font-size: 6.8rem;
  }

  .chapter-title,
  .chapter-content {
    grid-column: 1 / -1;
  }

  .chapter-title h3 {
    font-size: 3.1rem;
  }

  .chapter-signal {
    top: 1rem;
    right: 1rem;
    bottom: auto;
    width: 10rem;
    height: 7rem;
    opacity: 0.08;
  }

  .chapter-row .round-action {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.4rem;
  }

  .work-copy {
    position: static;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .project-grid {
    min-height: 31rem;
  }

  .project-card {
    min-height: 31rem;
  }

  .project-card.is-featured {
    flex: 1.45 1 0;
  }

  .project-grid .project-card:hover,
  .project-grid .project-card:focus-within {
    flex: 1.9 1 0;
  }

}

@media (max-width: 640px) {
  .mobile-panel a {
    font-size: 3.1rem;
  }

  .hero {
    min-height: 100dvh;
    padding-bottom: 4.6rem;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 8.8vw, 2.95rem);
    font-stretch: normal;
    line-height: 0.98;
  }

  .hero-type {
    top: 8.95rem;
    left: var(--page-pad);
    right: var(--page-pad);
    max-height: 6.3rem;
    font-size: 3.35rem;
  }

  .hero-copy {
    padding-top: 9.25rem;
  }

  .hero-intro {
    font-size: 0.92rem;
    margin-top: 1.45rem;
  }

  .hero-metrics {
    display: none;
  }

  .chapters::after {
    top: 4.5rem;
    right: 1rem;
    font-size: 6.4rem;
  }

  .chapter-row {
    padding: 1.5rem;
    border-radius: 0;
  }

  .chapter-number {
    font-size: 5.5rem;
  }

  .chapter-title h3 {
    font-size: 2.55rem;
  }

  .chapter-copy {
    font-size: 0.9rem;
  }

  .chapter-signal {
    width: 7.2rem;
    height: 5.5rem;
  }

  .kicker,
  .text-link,
  .scroll-cue,
  .coordinates {
    font-size: 0.65rem;
  }

  .section-copy h2,
  .chapters-header h2,
  .work-copy h2 {
    font-size: 2.7rem;
  }

  .signal-map {
    min-height: 46rem;
  }

  .connection-hero .section-grid {
    padding-top: 6.6rem;
  }

  .connection-hero .section-copy h2 {
    font-size: 2.85rem;
  }

  .connection-hero .section-copy p:not(.kicker) {
    font-size: 0.95rem;
  }

  .connection-hero .signal-map {
    min-height: 52rem;
  }

  .connection-hero .signal-map__bar {
    display: grid;
    left: 0;
    right: 0;
    font-size: 0.58rem;
  }

  .connection-hero .signal-svg {
    inset: 11.5rem -4.5rem 12.2rem;
    height: auto;
  }

  .connection-hero .signal-status {
    top: 50%;
    right: 1rem;
    left: auto;
    transform: translateY(-50%) scale(0.9);
    transform-origin: right center;
  }

  .signal-status {
    top: 32.5rem;
    right: auto;
    bottom: auto;
    left: 0;
  }

  .signal-map__bar {
    display: none;
  }

  .connection-hero .map-label {
    width: calc(50% - 0.7rem);
    font-size: 0.72rem;
  }

  .connection-hero .map-label--strategy,
  .connection-hero .map-label--experience {
    top: 4.15rem;
  }

  .connection-hero .map-label--interface,
  .connection-hero .map-label--code {
    bottom: 7.5rem;
  }

  .connection-hero .map-label h3 {
    font-size: 0.72rem;
  }

  .connection-hero .map-label p,
  .module-signal {
    font-size: 0.64rem;
  }

  .signal-telemetry {
    grid-template-columns: 1fr;
    padding: 0.9rem 0;
    font-size: 0.56rem;
  }

  .signal-telemetry p:last-of-type {
    justify-self: start;
  }

  .signal-svg {
    top: 6rem;
    height: 27rem;
  }

  .map-label {
    width: calc(50% - 0.75rem);
    font-size: 0.73rem;
  }

  .map-details li {
    font-size: 0.58rem;
  }

  .map-label--strategy {
    top: 0;
    left: 0;
  }

  .map-label--experience {
    top: 0;
    right: 0;
  }

  .map-label--interface {
    bottom: 0;
    left: 0;
  }

  .map-label--code {
    right: 0;
    bottom: 0;
  }

  .project-grid {
    gap: 0.85rem;
    min-height: auto;
    margin-right: calc(var(--page-pad) * -1);
    padding-right: var(--page-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .project-grid::-webkit-scrollbar {
    display: none;
  }

  .project-card,
  .project-card.is-featured,
  .project-card.is-active,
  .project-grid.has-active .project-card,
  .project-grid.has-active .project-card.is-active,
  .project-grid:hover .project-card,
  .project-grid:focus-within .project-card,
  .project-grid .project-card:hover,
  .project-grid .project-card:focus-within {
    flex: 0 0 min(18.5rem, 82vw);
    min-height: 31.5rem;
    filter: none;
    scroll-snap-align: start;
    transform: none;
  }

  .project-copy,
  .project-card.is-featured .project-copy,
  .project-card.is-active .project-copy,
  .project-card:hover .project-copy,
  .project-card:focus-within .project-copy,
  .project-grid.has-active .project-card:not(.is-active) .project-copy,
  .project-grid:hover .project-card:not(:hover) .project-copy,
  .project-grid:focus-within .project-card:not(:focus-within) .project-copy {
    opacity: 1;
    transform: none;
  }

  .project-word {
    font-size: 4rem;
  }

  .project-card h3 {
    font-size: 2.25rem;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1280px) {
  .work-layout {
    padding-top: 5.9rem;
  }

  .project-grid {
    min-height: 36rem;
  }

  .project-card {
    min-height: 36rem;
  }

  .project-capsule {
    height: 23.5rem;
  }
}

@media (max-width: 980px) {
  .work-layout {
    gap: 2.5rem;
  }

  .work-copy {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .work .work-copy h2 {
    font-size: clamp(3.2rem, 12vw, 5.8rem);
  }

  .work-intro {
    max-width: 35rem;
  }

  .work-link {
    justify-self: start;
  }

  .work .project-grid {
    gap: 0.9rem;
    min-height: 34rem;
    margin-right: calc(var(--page-pad) * -1);
    padding-right: var(--page-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .work .project-grid::-webkit-scrollbar {
    display: none;
  }

  .work .project-card,
  .work .project-card.is-featured,
  .work .project-card.is-active,
  .work .project-grid.has-active .project-card,
  .work .project-grid.has-active .project-card.is-active,
  .work .project-grid:hover .project-card,
  .work .project-grid:focus-within .project-card,
  .work .project-grid .project-card:hover,
  .work .project-grid .project-card:focus-within {
    flex: 0 0 min(31rem, 76vw);
    min-height: 34rem;
    filter: grayscale(1);
    scroll-snap-align: start;
    transform: none;
  }

  .work .project-copy,
  .work .project-card.is-featured .project-copy,
  .work .project-card.is-active .project-copy,
  .work .project-card:hover .project-copy,
  .work .project-card:focus-within .project-copy,
  .work .project-grid.has-active .project-card:not(.is-active) .project-copy,
  .work .project-grid:hover .project-card:not(:hover) .project-copy,
  .work .project-grid:focus-within .project-card:not(:focus-within) .project-copy {
    max-width: calc(100% - 10rem);
    opacity: 1;
    transform: none;
  }

  .work .project-capsule,
  .work .project-card.is-active .project-capsule,
  .work .project-card:hover .project-capsule,
  .work .project-card:focus-within .project-capsule {
    top: 5.4rem;
    right: 1.1rem;
    width: min(11rem, 38%);
    height: 21.5rem;
    opacity: 0.88;
    transform: none;
  }

  .work .project-letters {
    font-size: clamp(4.2rem, 13vw, 6.4rem);
  }
}

@media (max-width: 640px) {
  .work::after {
    right: var(--page-pad);
    left: var(--page-pad);
    bottom: 2.1rem;
  }

  .work-layout {
    gap: 2rem;
    padding-top: 5rem;
    padding-bottom: 5.4rem;
  }

  .work .work-copy h2 {
    font-size: clamp(2.75rem, 16vw, 4.4rem);
  }

  .work-intro {
    font-size: 0.94rem;
  }

  .work .project-grid {
    display: grid;
    gap: 1rem;
    min-height: auto;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .work .project-card,
  .work .project-card.is-featured,
  .work .project-card.is-active,
  .work .project-grid.has-active .project-card,
  .work .project-grid.has-active .project-card.is-active,
  .work .project-grid:hover .project-card,
  .work .project-grid:focus-within .project-card,
  .work .project-grid .project-card:hover,
  .work .project-grid .project-card:focus-within {
    width: 100%;
    min-height: 35.5rem;
    filter: grayscale(1);
    scroll-snap-align: none;
  }

  .work .project-panel {
    min-height: 35.5rem;
  }

  .work .project-letters {
    top: 4.6rem;
    left: 0.9rem;
    font-size: clamp(3.9rem, 19vw, 5.2rem);
  }

  .work .project-capsule,
  .work .project-card.is-active .project-capsule,
  .work .project-card:hover .project-capsule,
  .work .project-card:focus-within .project-capsule {
    top: 5.5rem;
    right: 0.9rem;
    width: min(10.4rem, 42%);
    height: 19.5rem;
  }

  .work .project-copy,
  .work .project-card.is-featured .project-copy,
  .work .project-card.is-active .project-copy,
  .work .project-card:hover .project-copy,
  .work .project-card:focus-within .project-copy,
  .work .project-grid.has-active .project-card:not(.is-active) .project-copy,
  .work .project-grid:hover .project-card:not(:hover) .project-copy,
  .work .project-grid:focus-within .project-card:not(:focus-within) .project-copy {
    max-width: 100%;
    padding-right: 3.6rem;
  }

  .work .project-card h3 {
    max-width: 15rem;
    font-size: 2.35rem;
  }

  .work .project-tags {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .chapter-row,
  .chapter-number,
  .rail-point,
  .rail-line span,
  .chapter-outputs span {
    transition: none !important;
  }

  .hero-frame,
  .hero-type,
  .network-hero,
  .rotating-seal,
  .signal-svg {
    transform: none !important;
  }

  .motion-ready .hero .kicker,
  .motion-ready .hero h1 span,
  .motion-ready .hero-intro,
  .motion-ready .hero .cta-link,
  .motion-ready .hero-metrics,
  .motion-ready .hero-type span {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Refokus-grade motion layer (progressive enhancement).
   Driven by motion.js + GSAP/ScrollTrigger/Lenis. Every rule
   degrades to a fully visible, fully usable default.
   ============================================================ */

/* Lenis smooth-scroll — overrides the native smooth behaviour
   only while Lenis is actually mounted. */
.lenis,
.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Masked editorial line reveals. The heading is visible by
   default; motion.js only arms it when GSAP + motion allow. */
.reveal-lines .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.reveal-lines .line-inner {
  display: block;
  will-change: transform;
}
.reveal-lines.is-done .line-mask {
  overflow: visible;
}

/* Magnetic buttons. Uses the standalone `translate` property so
   it composes with existing transform-based hover and boot
   animations instead of overwriting them. */
.is-magnetic {
  --mag-x: 0px;
  --mag-y: 0px;
  translate: var(--mag-x) var(--mag-y);
}

@media (prefers-reduced-motion: reduce) {
  .is-magnetic {
    translate: none !important;
  }
  .reveal-lines .line-inner {
    transform: none !important;
  }
  .reveal-lines .line-mask {
    overflow: visible;
  }
}

/* ============================================================
   CINEMATIC HERO  (progressive enhancement, driven by
   hero-cinematic.js). Turns the static .hero-image into a live
   frame sequence + particle field + fingertip spark. Everything
   is gated behind .hero.is-cinematic, so the static poster and
   SVG network stay the no-JS / reduced-motion default.

   Stacking inside .hero (existing → new):
     -4 .hero-image (poster)      -3 .hero-frames (canvas)
     -2 .hero::before (readability gradient)
      0 .hero-type   1 .hero-particles + .hero-glow
      2 .network-hero  3 frame/seal   4 .hero-copy
   ============================================================ */
.hero {
  /* spark tokens; JS overwrites position, colour, intensity */
  --hero-spark-color: rgba(150, 226, 236, 1);
  --hero-spark-color-soft: rgba(120, 196, 226, 1);
  --hero-spark-x: 58%;
  --hero-spark-y: 52%;
  --hero-spark-size: clamp(150px, 20vw, 300px);
  --hero-spark-intensity: 0;
}

.hero-frames {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  /* moody darken — keep the clip's cyan (the poster is grayscale) */
  filter: brightness(0.6) contrast(1.06) saturate(1.04);
  transform: translate3d(calc(var(--hero-x) * 6px), calc(var(--hero-y) * 4px), 0)
    scale(1.05);
  transition: opacity 900ms var(--ease-measured);
  will-change: opacity, transform;
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms var(--ease-measured) 200ms;
}

.hero.is-cinematic .hero-frames {
  opacity: 1;
}

.hero.is-cinematic .hero-particles {
  opacity: 0.55;
}

/* once the live frames carry the artwork, retire the grayscale
   poster and the small static SVG network (the field replaces it) */
.hero.is-cinematic .hero-image {
  opacity: 0;
  transition: opacity 900ms var(--ease-measured);
}

.hero.is-cinematic .network-hero {
  opacity: 0;
  transition: opacity 700ms var(--ease-measured);
}

/* ---- fingertip spark: four diffused parts, screen-blended so it
   reads as light, not a sticker. Everything scales off intensity. -- */
.hero-glow {
  position: absolute;
  left: var(--hero-spark-x);
  top: var(--hero-spark-y);
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
  translate: calc(var(--hero-x) * 4px) calc(var(--hero-y) * 3px);
  mix-blend-mode: screen;
}

.hero-glow > span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
}

.hero-spark-halo {
  width: calc(var(--hero-spark-size) * 2.1);
  height: calc(var(--hero-spark-size) * 2.1);
  background: radial-gradient(
    circle,
    var(--hero-spark-color-soft) 0%,
    rgba(120, 196, 226, 0.16) 32%,
    rgba(120, 196, 226, 0) 70%
  );
  opacity: calc(var(--hero-spark-intensity) * 0.5);
  transform: translate(-50%, -50%)
    scale(calc(0.7 + var(--hero-spark-intensity) * 0.4));
  filter: blur(6px);
}

.hero-spark-bloom {
  width: calc(var(--hero-spark-size) * 4.2);
  height: calc(var(--hero-spark-size) * 0.16);
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(150, 226, 236, 0) 0%,
    var(--hero-spark-color) 50%,
    rgba(150, 226, 236, 0) 100%
  );
  opacity: calc(var(--hero-spark-intensity) * 0.42);
  transform: translate(-50%, -50%)
    scaleX(calc(0.6 + var(--hero-spark-intensity) * 0.6));
  filter: blur(3px);
}

.hero-spark-ring {
  width: var(--hero-spark-size);
  height: var(--hero-spark-size);
  border: 1px solid var(--hero-spark-color);
  opacity: 0;
  animation: hero-spark-pulse 3.6s var(--ease) infinite;
}

.hero-spark-core {
  width: calc(var(--hero-spark-size) * 0.34);
  height: calc(var(--hero-spark-size) * 0.34);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    var(--hero-spark-color) 38%,
    rgba(150, 226, 236, 0) 72%
  );
  opacity: calc(var(--hero-spark-intensity) * 0.95);
  transform: translate(-50%, -50%)
    scale(calc(0.55 + var(--hero-spark-intensity) * 0.5));
  filter: blur(1px);
}

@keyframes hero-spark-pulse {
  0% {
    opacity: calc(var(--hero-spark-intensity) * 0.5);
    transform: translate(-50%, -50%) scale(0.4);
  }
  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@supports not (mix-blend-mode: screen) {
  .hero-glow {
    opacity: 0.7;
  }
}

/* reduced motion: a single connected still, gentle static glow,
   no field, no pulse, no parallax */
@media (prefers-reduced-motion: reduce) {
  .hero-frames {
    transform: none;
    transition: opacity 0.4s ease;
  }
  .hero-particles {
    display: none;
  }
  .hero-glow {
    translate: none;
  }
  .hero-spark-ring {
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   Measured-results section — glassmorphism floating cards over
   a scroll-scrubbed ambient aura. Progressive enhancement:
   --p (scroll progress 0..1) and --mx/--my (pointer) are driven
   by impact-scroll.js; without JS they hold their rest defaults
   and the composition stays a clean, fully legible static scene.
   ============================================================ */
.impact {
  --spark: 150, 226, 236; /* hero fingertip cyan, as the ambient accent */
  --spark-soft: 120, 196, 226;
  position: relative;
  min-height: 210vh; /* scroll runway for the sticky stage to scrub against */
  background: var(--black);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.impact-stage {
  --p: 0.5;
  --mx: 0;
  --my: 0;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100svh;
  min-height: 44rem;
  overflow: hidden;
}

/* ---- ambient backdrop ---- */
.impact-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.impact-aura__image {
  position: absolute;
  inset: -14%;
  background:
    url("assets/hero-connection.jpg") center 42% / cover no-repeat;
  filter: blur(58px) grayscale(0.55) brightness(0.48) contrast(1.12);
  opacity: 0.56;
  transform: scale(calc(1.16 + var(--p) * 0.18))
    translateY(calc((var(--p) - 0.5) * -3.2%));
  will-change: transform;
}

.impact-aura__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.62;
  mix-blend-mode: screen;
  will-change: transform, translate;
}

.impact-aura__blob--a {
  top: -8%;
  left: 8%;
  width: 46vw;
  height: 46vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(
    circle at 40% 38%,
    rgba(var(--spark), 0.64),
    rgba(var(--spark), 0.18) 46%,
    transparent 68%
  );
  translate: calc((var(--p) - 0.5) * 7%) calc((var(--p) - 0.5) * -13%);
  animation: impact-blob-a 19s var(--ease-measured) infinite alternate;
}

.impact-aura__blob--b {
  right: 2%;
  bottom: -14%;
  width: 52vw;
  height: 52vw;
  max-width: 880px;
  max-height: 880px;
  background: radial-gradient(
    circle at 58% 56%,
    rgba(var(--spark-soft), 0.54),
    rgba(var(--spark-soft), 0.14) 48%,
    transparent 70%
  );
  translate: calc((var(--p) - 0.5) * -9%) calc((var(--p) - 0.5) * 11%);
  animation: impact-blob-b 23s var(--ease-measured) infinite alternate;
}

.impact-aura__blob--c {
  top: 32%;
  left: 40%;
  width: 30vw;
  height: 30vw;
  max-width: 520px;
  max-height: 520px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(126, 158, 230, 0.42),
    rgba(126, 158, 230, 0.12) 50%,
    transparent 72%
  );
  translate: calc((var(--p) - 0.5) * 12%) calc((var(--p) - 0.5) * 6%);
  animation: impact-blob-c 27s var(--ease-measured) infinite alternate;
}

.impact-aura__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 48%, rgba(6, 6, 6, 0.42) 100%),
    linear-gradient(180deg, rgba(6, 6, 6, 0.42), transparent 22% 72%, rgba(6, 6, 6, 0.58));
}

@keyframes impact-blob-a {
  from {
    transform: translate3d(-3%, 2%, 0) scale(1);
  }
  to {
    transform: translate3d(6%, -4%, 0) scale(1.12);
  }
}
@keyframes impact-blob-b {
  from {
    transform: translate3d(2%, 3%, 0) scale(1.06);
  }
  to {
    transform: translate3d(-5%, -3%, 0) scale(0.94);
  }
}
@keyframes impact-blob-c {
  from {
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  to {
    transform: translate3d(-7%, 5%, 0) scale(1.14);
  }
}

/* ---- card field ---- */
.impact-field {
  position: relative;
  z-index: 1;
  width: min(100%, 1880px);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.impact-card-wrap {
  position: absolute;
}

.impact-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(251, 251, 247, 0.12);
  background:
    linear-gradient(
      150deg,
      rgba(28, 31, 34, 0.66),
      rgba(11, 12, 13, 0.46) 78%
    );
  box-shadow:
    0 30px 64px -32px rgba(0, 0, 0, 0.86),
    0 2px 10px -6px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(251, 251, 247, 0.14),
    inset 0 0 0 1px rgba(var(--spark), 0.03);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  transform: translate3d(
      calc(var(--mx) * var(--depth, 0.6) * 20px),
      calc(
        (var(--p) - 0.5) * var(--depth, 0.6) * -168px +
          var(--my) * var(--depth, 0.6) * 14px
      ),
      0
    )
    scale(calc(1 + (var(--p) - 0.5) * var(--depth, 0.6) * 0.04));
  will-change: transform;
}

.impact-card::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  border-radius: inherit;
  background: radial-gradient(
    120% 140% at 18% 0%,
    rgba(var(--spark), 0.1),
    transparent 52%
  );
  opacity: 0.9;
}

/* lead panel */
.impact-card-wrap--lead {
  top: 50%;
  left: var(--page-pad);
  translate: 0 -50%;
  width: min(33rem, 40%);
  --depth: 0.26;
}

.impact-card--lead {
  padding: 2.6rem 2.7rem 2.4rem;
}

.impact-card--lead .kicker {
  margin-bottom: 1.4rem;
  color: rgba(var(--spark), 0.92);
  letter-spacing: 0.02em;
}

.impact-card--lead h2 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--display);
  font-stretch: expanded;
  font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--paper-soft);
}

.impact-lead__body {
  margin: 1.5rem 0 1.9rem;
  max-width: 30ch;
  color: rgba(251, 251, 247, 0.74);
  font-size: 1rem;
  line-height: 1.66;
}

.impact-lead__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--paper-soft);
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.impact-lead__link span {
  transition: transform 420ms var(--ease);
}

.impact-lead__link:hover span {
  transform: translate(0.2rem, -0.2rem);
}

/* metric cards */
.impact-card--metric {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 15.5rem;
  padding: 1.9rem 1.9rem 1.7rem;
}

.impact-card--metric-lg {
  width: 17.5rem;
  padding: 2.3rem 2.2rem 2rem;
}

.impact-metric__value {
  display: flex;
  align-items: baseline;
  font-family: var(--display);
  font-size: clamp(2.8rem, 1.9rem + 2.4vw, 4rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--paper-soft);
}

.impact-card--metric-lg .impact-metric__value {
  font-size: clamp(3.2rem, 2.1rem + 2.9vw, 4.6rem);
}

.impact-metric__unit {
  margin-left: 0.12em;
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(var(--spark), 0.85);
}

.impact-metric__label {
  max-width: 14ch;
  color: rgba(251, 251, 247, 0.72);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.impact-card-wrap--m1 {
  top: 13%;
  right: calc(var(--page-pad) + 1%);
  --depth: 0.72;
}
.impact-card-wrap--m2 {
  top: 39%;
  right: calc(var(--page-pad) + 18%);
  --depth: 1.15;
}
.impact-card-wrap--m3 {
  top: 66%;
  right: calc(var(--page-pad) + 4%);
  --depth: 0.9;
}

/* signal chip */
.impact-card-wrap--signal {
  top: 15%;
  right: calc(var(--page-pad) + 27%);
  --depth: 0.46;
}

.impact-card--signal {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1.2rem 0.75rem 0.95rem;
  border-radius: 999px;
}

.impact-signal__dot {
  position: relative;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: rgb(var(--spark));
  box-shadow: 0 0 0 0 rgba(var(--spark), 0.55);
  animation: impact-pulse 2.6s var(--ease) infinite;
}

.impact-signal__rows {
  display: grid;
  gap: 0.12rem;
}

.impact-signal__label {
  color: rgba(251, 251, 247, 0.66);
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.impact-signal__value {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper-soft);
}

@keyframes impact-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--spark), 0.5);
  }
  70% {
    box-shadow: 0 0 0 0.55rem rgba(var(--spark), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--spark), 0);
  }
}

/* entrance: wrapper handles the one-shot reveal (opacity + rise),
   the inner .impact-card owns the continuous parallax transform,
   so the two never fight over a single transform. */
.is-loaded .impact-card-wrap.reveal {
  opacity: 0;
  transform: translateY(2.4rem);
  transition:
    opacity 820ms var(--ease),
    transform 820ms var(--ease);
}
.is-loaded .impact-card-wrap--lead.reveal {
  transform: translateY(2.4rem);
}
.is-loaded .impact-card-wrap.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.is-loaded .impact-card-wrap--lead.reveal.is-visible {
  transform: translateY(0);
}

/* backdrop-filter unsupported → lean on a more opaque glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .impact-card {
    background: linear-gradient(150deg, rgba(24, 27, 30, 0.92), rgba(12, 13, 14, 0.88));
  }
}

/* ---- responsive: collapse the collage into a clean stack ---- */
@media (max-width: 1180px) {
  .impact-card-wrap--lead {
    width: min(30rem, 46%);
  }
  .impact-card-wrap--m2 {
    right: calc(var(--page-pad) + 13%);
  }
  .impact-card-wrap--signal {
    right: calc(var(--page-pad) + 23%);
  }
  .impact-card--metric {
    width: 13.5rem;
  }
  .impact-card--metric-lg {
    width: 15rem;
  }
}

@media (max-width: 900px) {
  .impact {
    min-height: 0;
    border-bottom: 1px solid var(--line-light);
  }
  .impact-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding: 6.4rem 0 7rem;
  }
  .impact-aura {
    position: absolute;
  }
  .impact-aura__image,
  .impact-aura__blob {
    transform: none;
    translate: none;
  }
  .impact-field {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    height: auto;
  }
  .impact-card-wrap {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    translate: none;
  }
  .impact-card {
    transform: none;
    width: 100%;
  }
  .impact-card--metric,
  .impact-card--metric-lg {
    width: 100%;
  }
  .impact-metrics-row {
    display: grid;
  }
  .impact-card--signal {
    align-self: flex-start;
  }
  .is-loaded .impact-card-wrap.reveal,
  .is-loaded .impact-card-wrap--lead.reveal {
    transform: translateY(1.6rem);
  }
  .is-loaded .impact-card-wrap.reveal.is-visible,
  .is-loaded .impact-card-wrap--lead.reveal.is-visible {
    transform: translateY(0);
  }
}

@media (max-width: 540px) {
  .impact-card--lead {
    padding: 2.1rem 1.7rem 1.9rem;
  }
  .impact-card--metric,
  .impact-card--metric-lg {
    padding: 1.7rem 1.6rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .impact-aura__image,
  .impact-aura__blob {
    transform: none;
    translate: none;
    animation: none;
  }
  .impact-card {
    transform: none;
  }
  .impact-signal__dot {
    animation: none;
  }
  .is-loaded .impact-card-wrap.reveal,
  .is-loaded .impact-card-wrap--lead.reveal {
    transition: opacity 600ms var(--ease);
    transform: none;
  }
  .is-loaded .impact-card-wrap.reveal.is-visible,
  .is-loaded .impact-card-wrap--lead.reveal.is-visible {
    transform: none;
  }
}

/* ============================================================
   MULTI-PAGE SYSTEM
   Secondary pages (services, pricing, work, about, contact),
   the Services dropdown, and soft cross-document transitions.
   Built entirely on the existing tokens + components — no new
   visual identity. Dark page heroes keep the always-light header
   legible; light content blocks reuse .section-light.
   ============================================================ */

/* ---- Soft page transitions (progressive enhancement) ---------- */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: page-fade-out 200ms var(--ease) both;
  }
  ::view-transition-new(root) {
    animation: page-fade-in 460ms var(--ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---- Shell adjustments: 6-item nav + multi-page footer bottom ---- */
.site-nav {
  gap: clamp(1.8rem, 0.6rem + 2.6vw, 3.4rem);
}

.contact-link {
  white-space: nowrap;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.75rem;
  grid-template-columns: none;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.footer-legal a,
.site-footer__bottom .footer-totop {
  width: max-content;
  justify-self: auto;
}

@media (max-width: 640px) {
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@keyframes page-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
}

/* ---- Services dropdown (desktop nav only; ≤980px uses panel) -- */
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 260ms var(--ease);
}

.nav-trigger:hover,
.nav-group:focus-within .nav-trigger {
  transform: translateY(-1px);
}

.nav-caret {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 320ms var(--ease);
}

.nav-group:hover .nav-caret,
.nav-trigger[aria-expanded="true"] .nav-caret {
  transform: translateY(0) rotate(-135deg);
}

.nav-trigger::after {
  position: absolute;
  right: 0;
  bottom: -0.42rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: right;
  opacity: 0.55;
  transition:
    transform 520ms var(--ease),
    opacity 520ms var(--ease);
}

.nav-group:hover .nav-trigger::after,
.nav-trigger[aria-expanded="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
  opacity: 1;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 40;
  display: grid;
  gap: 0.15rem;
  width: max-content;
  min-width: 18.5rem;
  margin-top: 1.4rem;
  padding: 0.7rem;
  border: 1px solid var(--card-border-color);
  border-radius: 16px;
  background: rgba(8, 9, 9, 0.92);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-0.5rem);
  transition:
    opacity 300ms var(--ease),
    transform 300ms var(--ease),
    visibility 0s linear 300ms;
}

/* invisible hover bridge so the pointer can cross the gap */
.nav-dropdown::before {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 1.4rem;
  content: "";
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 320ms var(--ease),
    transform 320ms var(--ease),
    visibility 0s;
}

.nav-dropdown a {
  display: grid;
  gap: 0.28rem;
  width: auto;
  padding: 0.78rem 0.85rem;
  border-radius: 11px;
  transition:
    background-color 240ms var(--ease),
    transform 240ms var(--ease);
}

.nav-dropdown a::after {
  display: none;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  transform: none;
}

.nav-dropdown .nav-dropdown__name {
  font-family: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-soft);
}

.nav-dropdown .nav-dropdown__desc {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, 0.5);
}

/* ---- Mobile panel: services subgroup -------------------------- */
.mobile-panel {
  justify-content: flex-start;
  gap: 0.4rem;
  padding-top: 7.5rem;
  padding-bottom: 3rem;
  overflow-y: auto;
}

.mobile-panel a {
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  line-height: 1.04;
}

.mobile-services {
  display: grid;
  gap: 0.55rem;
  margin: 0.6rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(251, 251, 247, 0.16);
}

.mobile-services__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, 0.5);
}

.mobile-panel .mobile-services a {
  font-family: var(--text);
  font-size: 1.18rem;
  font-weight: 500;
  font-stretch: normal;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.mobile-panel__cta {
  margin-top: auto;
}

/* ---- Page hero (dark) ----------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(9.5rem, 9rem + 6vw, 13.5rem) var(--page-pad) clamp(4.5rem, 4rem + 4vw, 7rem);
  border-bottom: 1px solid var(--line-light);
  background:
    radial-gradient(118% 92% at 80% 8%, rgba(150, 226, 236, 0.12), transparent 50%),
    radial-gradient(90% 80% at 8% 110%, rgba(126, 158, 230, 0.1), transparent 55%),
    linear-gradient(180deg, #070707, #0c0d0d 58%, #090a0a);
  color: var(--paper-soft);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin: 0 auto;
}

.page-hero__watermark {
  position: absolute;
  top: clamp(6rem, 5rem + 5vw, 9rem);
  right: -0.4rem;
  z-index: 0;
  max-width: 60vw;
  color: rgba(251, 251, 247, 0.045);
  font-family: var(--display);
  font-size: clamp(6rem, 16vw, 15rem);
  font-stretch: expanded;
  font-weight: 200;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: right;
  pointer-events: none;
  user-select: none;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 2.2rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, 0.55);
}

.breadcrumb a {
  transition: color 240ms var(--ease);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--paper-soft);
}

.breadcrumb span[aria-current] {
  color: rgba(251, 251, 247, 0.85);
}

.breadcrumb .breadcrumb__sep {
  color: rgba(251, 251, 247, 0.3);
}

.page-hero__title {
  max-width: 18ch;
  font-family: var(--display);
  font-size: clamp(2.55rem, 1.7rem + 4.4vw, 4.6rem);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.page-hero__lead {
  max-width: 56ch;
  margin-top: 1.7rem;
  color: rgba(251, 251, 247, 0.8);
  font-size: clamp(1rem, 0.97rem + 0.3vw, 1.18rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.page-hero__lead + .page-hero__lead {
  margin-top: 1.1rem;
}

.page-hero__support {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(251, 251, 247, 0.62);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

/* ---- Generic content block ------------------------------------ */
.page-block {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.page-block__inner {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(4.2rem, 3.4rem + 4vw, 7rem) var(--page-pad);
}

.page-block--dark {
  border-bottom-color: var(--line-light);
  background:
    radial-gradient(100% 120% at 88% 0%, rgba(150, 226, 236, 0.07), transparent 46%),
    linear-gradient(180deg, #0a0b0b, #070808);
  color: var(--paper-soft);
}

.block-heading {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.2rem);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section-light .block-heading {
  color: var(--ink);
}

.lead {
  max-width: 66ch;
  font-size: 1.06rem;
  line-height: 1.74;
  text-wrap: pretty;
}

.section-light .lead {
  color: rgba(8, 8, 8, 0.8);
}

.page-block--dark .lead {
  color: rgba(251, 251, 247, 0.8);
}

.prose {
  max-width: 64ch;
  display: grid;
  gap: 1.2rem;
}

.prose p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.76;
  text-wrap: pretty;
}

.section-light .prose p {
  color: rgba(8, 8, 8, 0.78);
}

.page-block--dark .prose p {
  color: rgba(251, 251, 247, 0.78);
}

.prose strong {
  font-weight: 600;
}

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

/* ---- Split layout (heading rail + body) ----------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  align-items: start;
}

.split__aside {
  position: relative;
}

.split__eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-light .split__eyebrow {
  color: rgba(8, 8, 8, 0.5);
}

.page-block--dark .split__eyebrow {
  color: rgba(251, 251, 247, 0.5);
}

/* ---- Feature list ("What is included") ------------------------ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0.2rem 2.4rem;
  margin-top: 2.4rem;
  border-top: 1px solid var(--line);
}

.page-block--dark .feature-grid {
  border-top-color: var(--line-light);
}

.feature-grid li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  line-height: 1.5;
}

.page-block--dark .feature-grid li {
  border-bottom-color: var(--line-light);
  color: rgba(251, 251, 247, 0.82);
}

.section-light .feature-grid li {
  color: rgba(8, 8, 8, 0.82);
}

.feature-grid li::before {
  content: "+";
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--accent);
}

/* ---- Callout / note band -------------------------------------- */
.callout {
  display: grid;
  gap: 1rem;
  max-width: 60ch;
  padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8, 8, 8, 0.025);
}

.page-block--dark .callout {
  border-color: var(--line-light);
  background: rgba(255, 255, 255, 0.025);
}

.callout__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-light .callout__label {
  color: rgba(8, 8, 8, 0.55);
}

.page-block--dark .callout__label {
  color: rgba(251, 251, 247, 0.58);
}

.callout p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
}

.section-light .callout p {
  color: rgba(8, 8, 8, 0.8);
}

.page-block--dark .callout p {
  color: rgba(251, 251, 247, 0.8);
}

/* ---- Editorial type list (Work "project types") --------------- */
.type-list {
  margin-top: 2.6rem;
  border-top: 1px solid var(--line);
}

.type-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 0.4rem + 2vw, 2.6rem);
  align-items: baseline;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
}

.type-row__index {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: rgba(8, 8, 8, 0.42);
}

.type-row__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.type-row__body {
  font-size: 1rem;
  line-height: 1.66;
  color: rgba(8, 8, 8, 0.74);
}

/* ---- CTA band (dark) ------------------------------------------ */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line-light);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(150, 226, 236, 0.12), transparent 55%),
    linear-gradient(180deg, #0a0b0b, #070707);
  color: var(--paper-soft);
}

.cta-band__inner {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: clamp(4.5rem, 3.6rem + 4vw, 7.5rem) var(--page-pad);
  text-align: center;
}

.cta-band__title {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.cta-band__body {
  max-width: 52ch;
  margin: 1.4rem auto 0;
  color: rgba(251, 251, 247, 0.78);
  font-size: 1.06rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.cta-band .page-actions {
  justify-content: center;
  margin-top: 2.6rem;
}

.cta-band .pricing-cta {
  min-height: 3.4rem;
  padding: 1rem 1.7rem;
}

/* ---- Secondary contact block ---------------------------------- */
.contact-aside {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.contact-aside__row {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line-light);
}

.contact-aside__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, 0.5);
}

.contact-aside__value {
  font-size: 1.04rem;
  line-height: 1.5;
  color: rgba(251, 251, 247, 0.9);
}

.contact-aside__value a:hover,
.contact-aside__value a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Responsive ----------------------------------------------- */
@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .type-row {
    grid-template-columns: 3rem 1fr;
    gap: 0.4rem 1.2rem;
  }

  .type-row__index {
    grid-row: 1;
  }

  .type-row__title {
    grid-column: 2;
  }

  .type-row__body {
    grid-column: 2;
    margin-top: 0.5rem;
  }
}

@media (max-width: 600px) {
  .page-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-actions .pricing-cta {
    width: 100%;
  }

  .cta-band .page-actions .pricing-cta {
    width: 100%;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HOMEPAGE CINEMATIC SCENES
   Scroll-choreographed scenes for the homepage journey. Built
   CSS-first so every scene is legible and complete without JS:
   nothing is gated on motion. GSAP (home-scenes.js) only adds
   scrubbed depth on top. Reduced motion + narrow screens fall
   back to clean static stacks.
   ============================================================ */

/* ---- Scene: Problem / promise (sticky headline + spotlight) -- */
.promise {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.promise__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(5rem, 4rem + 5vw, 8rem) var(--page-pad);
}

.promise__aside {
  position: sticky;
  top: clamp(7rem, 34vh, 17rem);
  align-self: start;
}

.promise__eyebrow {
  display: block;
  margin-bottom: 1.3rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 8, 8, 0.5);
}

.promise__headline {
  max-width: 15ch;
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.promise__progress {
  display: flex;
  gap: 0.5rem;
  margin-top: 2.2rem;
}

.promise__progress span {
  width: 1.6rem;
  height: 2px;
  background: rgba(8, 8, 8, 0.18);
  transition: background-color 480ms var(--ease);
}

.promise__statements {
  display: grid;
  gap: clamp(1.6rem, 1rem + 2vw, 2.6rem);
}

.promise__statement {
  margin: 0;
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.9rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}

.promise__statement .lead-in {
  color: rgba(8, 8, 8, 0.38);
}

/* JS spotlight: space the statements out and dim all but the centred
   one. Falls back (no .js) to a tight, fully legible static list. */
.js .promise__statements {
  gap: clamp(34vh, 44vh, 52vh);
  padding: clamp(22vh, 30vh, 34vh) 0;
}

.js .promise__statement {
  opacity: 0.22;
  transition: opacity 640ms var(--ease);
}

.js .promise__statement.is-active {
  opacity: 1;
}

.promise__progress span.is-active {
  background: var(--ink);
}

@media (max-width: 760px) {
  .promise__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  /* mobile: a clean static stack rather than a sticky spotlight, so the
     headline never collides with the statements in a single column */
  .promise__aside {
    position: static;
  }

  .js .promise__statements {
    gap: clamp(1.4rem, 1rem + 2vw, 2.2rem);
    padding: 0;
  }

  .js .promise__statement {
    opacity: 1;
  }

  .promise__progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promise__aside {
    position: static;
  }

  .js .promise__statements {
    gap: clamp(1.6rem, 1rem + 2vw, 2.6rem);
    padding: 0;
  }

  .js .promise__statement {
    opacity: 1;
  }
}

/* ---- Scene: Services sticky stack -------------------------- */
.svc-stack {
  position: relative;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  background:
    radial-gradient(120% 80% at 82% -6%, rgba(150, 226, 236, 0.08), transparent 52%),
    radial-gradient(90% 70% at 6% 108%, rgba(126, 158, 230, 0.07), transparent 56%),
    linear-gradient(180deg, #070808, #0b0c0c 58%, #080909);
  color: var(--paper-soft);
}

.svc-stack__inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: clamp(5rem, 4rem + 5vw, 8rem) var(--page-pad) clamp(5.5rem, 4rem + 6vw, 9rem);
}

.svc-stack__head {
  max-width: min(100%, 56rem);
  margin-bottom: clamp(2.4rem, 1.8rem + 3vw, 4.4rem);
}

.svc-stack__label {
  display: inline-block;
  margin-bottom: 1.3rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, 0.52);
}

.svc-stack__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.svc-stack__cards {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}

.svc-card {
  position: sticky;
  top: calc(clamp(5.5rem, 11vh, 8.5rem) + var(--i, 0) * 0.62rem);
  display: grid;
  gap: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
  padding: clamp(1.8rem, 1.3rem + 1.8vw, 2.9rem);
  border: 1px solid var(--card-border-color);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 23, 24, 0.94), rgba(12, 13, 13, 0.97));
  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform-origin: center top;
}

/* fan the stuck cards so each previous card's top edge stays visible */
.svc-card:nth-child(1) { --i: 0; }
.svc-card:nth-child(2) { --i: 1; }
.svc-card:nth-child(3) { --i: 2; }
.svc-card:nth-child(4) { --i: 3; }
.svc-card:nth-child(5) { --i: 4; }
.svc-card:nth-child(6) { --i: 5; }
.svc-card:nth-child(7) { --i: 6; }

.svc-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--line-light);
}

.svc-card__index {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.svc-card__arrow {
  font-size: 1rem;
  color: rgba(251, 251, 247, 0.55);
  transition: transform 420ms var(--ease), color 420ms var(--ease);
}

.svc-card:hover .svc-card__arrow {
  transform: translate(0.2rem, -0.2rem);
  color: var(--paper-soft);
}

.svc-card__title {
  font-family: var(--display);
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.svc-card__lead {
  max-width: 62ch;
  color: rgba(251, 251, 247, 0.78);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.svc-card__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 2.2rem;
  margin-top: 0.2rem;
}

.svc-card__points li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.94rem;
  line-height: 1.45;
  color: rgba(251, 251, 247, 0.8);
}

.svc-card__points li::before {
  content: "+";
  font-family: var(--mono);
  font-size: 0.82rem;
  color: rgba(120, 196, 226, 0.85);
}

/* GSAP-driven depth: covered cards settle back. Set as CSS vars
   so the rest is declarative; home-scenes.js writes --svc-scale
   and --svc-dim per card. Defaults keep the static scene crisp. */
.js .svc-card {
  transform: scale(var(--svc-scale, 1));
}

.js .svc-card::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: #050606;
  opacity: var(--svc-dim, 0);
  content: "";
  pointer-events: none;
}

@media (max-width: 760px) {
  .svc-card {
    position: static;
    top: auto;
  }

  .svc-card__points {
    grid-template-columns: 1fr;
  }

  /* never dim/scale when not stacking */
  .js .svc-card {
    transform: none;
  }

  .js .svc-card::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .svc-card {
    transform: none;
  }

  .js .svc-card::after {
    display: none;
  }
}

/* ---- Scene: Selected work (pinned horizontal on desktop) ----- */
.folio {
  --folio-head: clamp(17rem, 24vw, 26rem);
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

/* default (no JS / mobile / reduced motion): clean vertical stack */
.folio__viewport {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: clamp(5rem, 4rem + 5vw, 8rem) var(--page-pad);
}

.folio__head {
  max-width: 30ch;
  margin-bottom: clamp(2.4rem, 1.8rem + 3vw, 4rem);
}

.folio__eyebrow {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 8, 8, 0.5);
}

.folio__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.folio__lead {
  max-width: 42ch;
  margin-top: 1.4rem;
  color: rgba(8, 8, 8, 0.7);
  font-size: 1.02rem;
  line-height: 1.6;
}

.folio__progress {
  position: relative;
  width: 100%;
  max-width: 14rem;
  height: 2px;
  margin-top: 2.4rem;
  background: rgba(8, 8, 8, 0.14);
  overflow: hidden;
}

.folio__progress span {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(var(--folio-p, 0));
  transform-origin: left;
}

.folio__track {
  display: grid;
  gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}

.folio-card {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 1.6rem;
  min-height: 22rem;
  padding: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-soft);
  overflow: hidden;
}

.folio-card--featured {
  background: linear-gradient(165deg, #0c0d0d, #070808);
  border-color: rgba(8, 8, 8, 0.4);
  color: var(--paper-soft);
}

.folio-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 8, 8, 0.45);
}

.folio-card--featured .folio-card__top {
  color: rgba(251, 251, 247, 0.55);
}

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

.folio-card__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.folio-card--featured .folio-card__title {
  color: var(--paper-soft);
}

.folio-card__desc {
  max-width: 36ch;
  margin-top: 0.9rem;
  color: rgba(8, 8, 8, 0.72);
  font-size: 0.98rem;
  line-height: 1.55;
}

.folio-card--featured .folio-card__desc {
  color: rgba(251, 251, 247, 0.76);
}

.folio-card__meta {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.folio-card__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.8rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: rgba(8, 8, 8, 0.72);
}

.folio-card--featured .folio-card__row {
  color: rgba(251, 251, 247, 0.76);
}

.folio-card__row dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(8, 8, 8, 0.42);
}

.folio-card--featured .folio-card__row dt {
  color: rgba(251, 251, 247, 0.48);
}

.folio-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}

.folio-card__cta span {
  transition: transform 360ms var(--ease);
}

.folio-card__cta:hover span,
.folio-card__cta:focus-visible span {
  transform: translate(0.2rem, -0.2rem);
}

.folio-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* JS-on (desktop): pin + horizontal track */
.is-folio-on .folio__viewport {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
}

/* full-height paper mask so cards vanish cleanly behind the head column */
.is-folio-on .folio__viewport::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--page-pad) + var(--folio-head) + 3vw);
  background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 76%, transparent 100%);
  pointer-events: none;
}

.is-folio-on .folio__head {
  position: absolute;
  top: 50%;
  left: var(--page-pad);
  z-index: 3;
  width: var(--folio-head);
  margin: 0;
  transform: translateY(-50%);
}

/* the head is a fixed sidebar in horizontal mode — keep the heading
   to a few clean lines rather than a tall narrow column */
.is-folio-on .folio__title {
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.15rem);
}

.is-folio-on .folio__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 2vw, 2.6rem);
  height: 100%;
  padding-inline: calc(var(--page-pad) + var(--folio-head) + 4vw) 12vw;
  will-change: transform;
}

.is-folio-on .folio-card {
  flex: 0 0 clamp(20rem, 28vw, 28rem);
  min-height: clamp(24rem, 60vh, 32rem);
}

/* ---- Scene: SEO visibility timeline (dark) ------------------- */
.seo-time {
  position: relative;
  border-bottom: 1px solid var(--line-light);
  background:
    radial-gradient(100% 80% at 88% -4%, rgba(150, 226, 236, 0.08), transparent 50%),
    linear-gradient(180deg, #080909, #0b0c0c 60%, #080909);
  color: var(--paper-soft);
}

.seo-time__inner {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(5rem, 4rem + 5vw, 8rem) var(--page-pad);
}

.seo-time__head {
  max-width: 52ch;
  margin-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}

.seo-time__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.seo-time__intro {
  max-width: 56ch;
  margin-top: 1.5rem;
  color: rgba(251, 251, 247, 0.78);
  font-size: 1.06rem;
  line-height: 1.65;
}

.seo-time__list {
  position: relative;
  display: grid;
  gap: clamp(2.4rem, 1.6rem + 3vw, 4.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-time__list::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  bottom: 0.8rem;
  left: 0.45rem;
  width: 1px;
  background: rgba(251, 251, 247, 0.16);
}

.seo-time__fill {
  position: absolute;
  top: 0.8rem;
  left: 0.45rem;
  z-index: 1;
  width: 1px;
  height: var(--seo-fill, 0%);
  background: linear-gradient(180deg, var(--accent), rgba(126, 158, 230, 0.6));
}

.seo-time__step {
  position: relative;
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 0.6rem + 1.4vw, 1.9rem);
  align-items: start;
}

.seo-time__index {
  display: block;
  margin-bottom: 0.5rem;
}

.seo-time__dot {
  position: relative;
  z-index: 2;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.32rem;
  border-radius: 50%;
  background: #0b0c0c;
  box-shadow: 0 0 0 1px rgba(251, 251, 247, 0.3);
  transition: box-shadow 460ms var(--ease), background-color 460ms var(--ease);
}

.seo-time__step.is-visible .seo-time__dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(120, 196, 226, 0.16);
}

.seo-time__index {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: rgba(251, 251, 247, 0.5);
}

.seo-time__copy h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--paper-soft);
}

.seo-time__copy p {
  max-width: 46ch;
  margin-top: 0.7rem;
  color: rgba(251, 251, 247, 0.74);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- Scene: Maintenance split (light, sticky aside) --------- */
.maint {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.maint__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(5rem, 4rem + 5vw, 8rem) var(--page-pad);
}

.maint__aside {
  position: sticky;
  top: clamp(7rem, 22vh, 12rem);
  align-self: start;
}

.maint__eyebrow {
  display: block;
  margin-bottom: 1.3rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8, 8, 8, 0.5);
}

.maint__title {
  max-width: 16ch;
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.maint__body {
  max-width: 42ch;
  margin-top: 1.5rem;
  color: rgba(8, 8, 8, 0.74);
  font-size: 1.04rem;
  line-height: 1.65;
}

.maint__link {
  margin-top: 1.8rem;
}

.maint__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.maint__list li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.maint__list li::before {
  content: counter(maint, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(8, 8, 8, 0.4);
}

.maint__list {
  counter-reset: maint;
}

.maint__list li {
  counter-increment: maint;
}

@media (max-width: 760px) {
  .maint__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .maint__aside {
    position: static;
  }
}

/* ============================================================
   COHESION PASS
   Brings the carried-over sections (pricing, FAQ + ownership,
   enquiry) into the cinematic system used by the new scenes:
   sentence-case display headings at weight 200, mono eyebrows,
   16px rounded surfaces and the cyan accent. The hero keeps its
   uppercase cinematic voice as the deliberate anchor.
   ============================================================ */

/* shared eyebrow */
.section-eyebrow {
  display: inline-block;
  margin-bottom: 1.3rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, 0.52);
}

.section-eyebrow--ink {
  color: rgba(8, 8, 8, 0.5);
}

/* ---- Pricing ------------------------------------------------- */
.pricing-header h2 {
  font-weight: 200;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-transform: none;
}

.pricing-header > p:not(.kicker) {
  font-size: 1.04rem;
  line-height: 1.7;
}

.pricing-card {
  border-radius: 16px;
}

.pricing-card--featured {
  border-radius: 18px;
}

.pricing-card h3 {
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  letter-spacing: -0.018em;
  text-transform: none;
}

.pricing-badge {
  color: var(--accent) !important;
}

/* drop the odd "Pricing overview" self-link; keep the note + back-to-top */
.pricing-footer .text-link--light {
  display: none;
}

/* ---- FAQ + ownership ---------------------------------------- */
.faq-panel h2,
.ownership-panel h2 {
  font-weight: 200;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-transform: none;
}

.faq-panel h2 span,
.ownership-panel h2 span {
  display: inline;
}

.faq-list {
  border-top-color: var(--line-light);
}

.faq-list details {
  border-bottom-color: var(--line-light);
}

.faq-list summary {
  font-size: 1rem;
}

.faq-list summary span:first-child {
  color: var(--accent);
}

.ownership-list li {
  grid-template-columns: 2.4rem 1fr;
  counter-increment: own;
}

.ownership-list {
  counter-reset: own;
}

.ownership-mark::before {
  content: counter(own, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.ownership-list h3 {
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* round the ownership panel's framed backdrop + its CTA */
.ownership-panel::before {
  border-radius: 18px;
}

.ownership-cta {
  border: 1px solid var(--card-border-color);
  border-radius: 14px;
}

/* ---- Enquiry ------------------------------------------------ */
.enquiry-intro h2 {
  font-weight: 200;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-transform: none;
}

.enquiry-intro > p:not(.kicker) {
  font-family: var(--text);
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(8, 8, 8, 0.72);
}

.brief-form {
  border-radius: 18px;
}

.brief-field input,
.brief-field textarea {
  border-radius: 10px;
}

.brief-choice-grid label {
  border-radius: 10px;
}

.brief-summary {
  border-radius: 16px;
}

.brief-success {
  border-radius: 16px;
}

/* ---- Mobile / touch ergonomics --------------------------------
   Real-device fixes that don't surface in a desktop viewport:
   1. Text-entry controls lift to 16px so iOS Safari stops
      auto-zooming (and yanking the layout) the moment a field is
      focused. Desktop keeps the tighter 0.92rem set earlier.
   2. Footer and service-menu links gain a taller hit area so every
      tap target clears the ~44px touch minimum. */
@media (max-width: 768px) {
  .brief-field input,
  .brief-field textarea,
  .brief-field select {
    font-size: 16px;
  }

  .footer-nav a,
  .footer-contact a,
  .site-footer__bottom a {
    padding-block: 0.4rem;
  }

  .mobile-panel .mobile-services a {
    padding-block: 0.35rem;
  }
}

/* ---- Hero: editorial system (sentence-case, mono eyebrow, buttons) -- */
.hero {
  align-items: center;
  padding-top: clamp(8rem, 6.5rem + 5vw, 11rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  background: #060707;
}

/* cinematic device-reveal video, framed right; copy owns the dark left */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #060707 url("assets/hero-poster.jpg") center / cover no-repeat;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
}

.hero-media__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #060707 0%,
      rgba(6, 7, 7, 0.94) 24%,
      rgba(6, 7, 7, 0.55) 48%,
      rgba(6, 7, 7, 0.12) 76%,
      transparent 100%
    ),
    linear-gradient(0deg, rgba(6, 7, 7, 0.8), transparent 34%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

.hero h1 {
  max-width: 16ch;
  font-stretch: normal;
  font-weight: 200;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: balance;
}

.hero .kicker {
  margin-bottom: 1.5rem;
  letter-spacing: 0.14em;
  color: rgba(251, 251, 247, 0.62);
}

.hero-intro {
  max-width: 52ch;
}

.hero-support {
  margin: 1.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(251, 251, 247, 0.6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .pricing-cta {
    width: 100%;
  }
}

/* ---- Contact page: details panel replacing the duplicate heading ---- */
.contact-intro {
  display: grid;
  align-content: start;
  gap: 1.5rem;
}

.contact-intro__lead {
  max-width: 36ch;
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.7;
  color: rgba(8, 8, 8, 0.74);
}

.contact-intro__details {
  display: grid;
  gap: 1.3rem;
  margin: 0.6rem 0 0;
}

.contact-intro__details > div {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.contact-intro__details dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 8, 8, 0.5);
}

.contact-intro__details dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(8, 8, 8, 0.82);
}

.contact-intro__details a:hover,
.contact-intro__details a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* what-happens-next, relocated into the left column */
.contact-intro__next {
  margin-top: 0.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}

.contact-intro__next-label {
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 8, 8, 0.5);
}

.contact-intro__next ol {
  display: grid;
  gap: 0.95rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cnext;
}

.contact-intro__next li {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  counter-increment: cnext;
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(8, 8, 8, 0.78);
}

.contact-intro__next li::before {
  content: counter(cnext, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* ---- Contact page: 2-column layout, the form gets the room ---- */
.enquiry--contact {
  margin-top: 0;
}

.enquiry--contact .enquiry-inner {
  width: min(100%, 1340px);
  grid-template-columns: minmax(14rem, 0.45fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

/* even 3x2 chip grid now that the form has room */
.enquiry--contact .brief-choice-grid--project {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .enquiry--contact .brief-choice-grid--project {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .enquiry--contact .enquiry-inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TYPE SYSTEM — Playfair Display editorial serif
   The old system set display headings at weight 200 with tight
   negative tracking (right for a thin grotesque, wrong for a
   serif). Re-base every display heading to a confident editorial
   weight with optical sizing and near-zero tracking, so the serif
   reads crisp and intentional rather than fragile.
   ============================================================ */
.hero h1,
.page-hero__title,
.page-hero__watermark,
.block-heading,
.svc-stack__title,
.promise__headline,
.promise__statement,
.folio__title,
.seo-time__title,
.seo-time__copy h3,
.maint__title,
.maint__list li,
.cta-band__title,
.pricing-header h2,
.pricing-card h3,
.faq-panel h2,
.ownership-panel h2,
.enquiry-intro h2,
.svc-card__title,
.folio-card__title,
.type-row__title {
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: -0.005em;
  font-optical-sizing: auto;
}

/* the big statement headings carry a touch more drama */
.hero h1,
.promise__headline,
.cta-band__title {
  font-weight: 400;
  letter-spacing: -0.012em;
}

/* small serif titles want slightly more weight to hold up */
.svc-card__title,
.folio-card__title,
.pricing-card h3,
.seo-time__copy h3,
.maint__list li {
  font-weight: 500;
  letter-spacing: 0;
}

/* keep the existing emphasis italic working in Playfair Display */
.enquiry-intro h2 em {
  font-style: italic;
}


/* ---- Homepage enquiry: summary dropped, form gets the room ---- */
.enquiry--lean .enquiry-inner {
  width: min(100%, 1320px);
  grid-template-columns: minmax(16rem, 0.6fr) minmax(0, 1fr);
}

.enquiry--lean .brief-choice-grid--project {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .enquiry--lean .brief-choice-grid--project {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .enquiry--lean .enquiry-inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SERVICES — sticky spotlight rail
   Borrows the loved mechanic from the promise scene: a sticky
   anchor on the left whose big serif line CHANGES as you scroll
   the stacked cards on the right. A live counter tracks the
   active service. Falls back to a static stacked list with no JS.
   ============================================================ */
.svc-stack__body {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: start;
}

.svc-stack__rail {
  position: sticky;
  top: clamp(7rem, 18vh, 11rem);
  align-self: start;
}

.svc-rail__count {
  display: block;
  margin-bottom: 1.7rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: rgba(251, 251, 247, 0.42);
}

.svc-rail__count b {
  font-weight: 400;
  color: var(--accent);
}

.svc-rail__spot {
  position: relative;
  min-height: clamp(5rem, 3.5rem + 5vw, 7.5rem);
}

.svc-rail__tagline {
  margin: 0;
  max-width: 14ch;
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--paper-soft);
  text-wrap: balance;
}

/* JS spotlight: stack the lines and reveal only the active one */
.js .svc-rail__spot .svc-rail__tagline {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}

.js .svc-rail__spot .svc-rail__tagline.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .svc-stack__body {
    grid-template-columns: 1fr;
  }

  /* the changing tagline is a desktop flourish; cards carry the content */
  .svc-stack__rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .svc-rail__spot .svc-rail__tagline {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* ============================================================
   HERO REVEAL — a stronger serif opening
   Each line rises from behind a mask while a soft blur snaps into
   focus, staggered with a measured expo ease. The per-line timing
   and the supporting kicker/intro/actions cascade live with the
   boot rules higher up; this block holds the shared mask state,
   line metrics and the keyframe they animate through.
   ============================================================ */
.hero h1 {
  line-height: 1.08;
}

.hero h1 .hero-line {
  display: block;
  will-change: clip-path, transform, filter;
}

/* keep each line hidden under the mask until the reveal fires */
html.js body.is-booting .hero h1 .hero-line {
  clip-path: inset(100% 0 -18% 0);
}

@keyframes hero-line-rise {
  0% {
    clip-path: inset(100% 0 -18% 0);
    transform: translateY(0.6em);
    filter: blur(18px);
    opacity: 0;
  }
  55% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0% 0 -18% 0);
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js body.is-booting .hero h1 .hero-line,
  .motion-ready .hero h1 .hero-line {
    clip-path: none;
    transform: none;
    filter: none;
    opacity: 1;
    animation: none;
  }
}