:root {
  color-scheme: dark;
  --ink: #f7f0e5;
  --paper: #f2e7d3;
  --paper-deep: #d9c7a8;
  --graphite: #080a0a;
  --panel: #101412;
  --panel-soft: rgba(247, 240, 229, 0.055);
  --muted: rgba(247, 240, 229, 0.72);
  --soft: rgba(247, 240, 229, 0.52);
  --line: rgba(219, 174, 108, 0.2);
  --line-strong: rgba(219, 174, 108, 0.46);
  --copper: #d7a866;
  --copper-soft: #f0c989;
  --blue: #79c7ff;
  --teal: #69d9c7;
  --rust: #b9634a;
  --transition-black: #050606;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --display: "Fraunces", Georgia, serif;
  --body: "Manrope", "Helvetica Neue", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--graphite);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--graphite);
  color: var(--ink);
  font-family: var(--body);
  letter-spacing: 0;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  content: "";
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 54% 10%, #000 0, transparent 62%);
}

body.menu-open {
  overflow: hidden;
}

body.is-page-loading {
  overflow: hidden;
}

body.is-page-loading .cursor {
  opacity: 0;
}

body.is-route-transitioning {
  overflow: hidden;
}

body.is-route-transitioning .cursor {
  opacity: 0;
}

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

button {
  font: inherit;
}

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

main > section[id] {
  scroll-margin-top: 96px;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--transition-black);
  pointer-events: none;
  transform: translateY(0);
  transition:
    transform 680ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0ms linear 680ms;
  visibility: visible;
  will-change: transform;
}

body.is-page-loaded .page-loader {
  transform: translateY(-100%);
  visibility: hidden;
}

.page-loader__title {
  display: block;
  max-width: min(82vw, 980px);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(28px, 4.8vw, 72px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.96;
  text-align: center;
  text-wrap: balance;
  opacity: 1;
  transform: translateY(0);
  will-change: transform;
}

/* The title sits centered inside the panel, so it rides the panel's slide
   as one motion. No separate exit transform — the decoupled squash/rotate
   exit is what made the words jitter instead of lifting with the screen. */

.route-transition {
  position: fixed;
  inset: 0;
  z-index: 2700;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--transition-black);
  color: var(--ink);
  pointer-events: none;
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 620ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 620ms;
  will-change: transform;
}

.route-transition.is-active {
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 620ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s;
}

.route-transition.is-leaving {
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform 700ms cubic-bezier(0.76, 0, 0.24, 1),
    visibility 0s linear 700ms;
}

.route-transition__title {
  display: block;
  max-width: min(82vw, 980px);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(28px, 4.8vw, 72px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.96;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 460ms ease,
    transform 620ms cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform, opacity;
}

.route-transition.is-active .route-transition__title {
  opacity: 1;
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 26px clamp(18px, 4vw, 62px);
  color: var(--ink);
  mix-blend-mode: difference;
  transform: translateY(0);
  transition:
    opacity 260ms ease,
    transform 260ms var(--ease);
  pointer-events: auto;
}

body.is-page-loading .site-header {
  z-index: 2650;
}

.brand-mark,
.menu-toggle {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 520ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-page-loading:not(.is-page-entered) .brand-mark,
body.is-page-loading:not(.is-page-entered) .menu-toggle {
  opacity: 0;
  transform: translateY(-28px);
}

body.is-page-entered .brand-mark {
  transition-delay: 90ms;
}

body.is-page-entered .menu-toggle {
  transition-delay: 210ms;
}

.site-header.is-hidden {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.menu-open .site-header {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.brand-mark {
  display: inline-flex;
  width: clamp(164px, 16vw, 246px);
  align-items: center;
  min-width: 0;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-mark__symbol {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(247, 240, 229, 0.58);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 0 24px rgba(247, 240, 229, 0.1);
}

.brand-mark__text {
  display: grid;
  gap: 5px;
  line-height: 1;
  text-transform: uppercase;
}

.brand-mark__text strong {
  font-size: 14px;
  font-weight: 800;
}

.brand-mark__text span,
.side-tagline,
.eyebrow,
.section-label p,
.case-row__copy > span,
.build-item span,
.method-step__number {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand-mark__text span {
  color: rgba(247, 240, 229, 0.7);
  font-size: 9px;
  letter-spacing: 0.22em;
}

.side-tagline {
  position: fixed;
  left: clamp(14px, 2.2vw, 30px);
  top: 50%;
  z-index: 1100;
  margin: 0;
  writing-mode: vertical-rl;
  color: rgba(247, 240, 229, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  white-space: nowrap;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) rotate(180deg) translateX(18px);
  transition:
    opacity 600ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.past-hero .side-tagline {
  opacity: 1;
  transform: translateY(-50%) rotate(180deg) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .side-tagline {
    transition: opacity 300ms ease;
    transform: translateY(-50%) rotate(180deg);
  }
}

.menu-toggle {
  position: relative;
  display: inline-flex;
  width: max-content;
  min-height: 44px;
  align-items: center;
  justify-self: end;
  gap: 14px;
  border: 0;
  padding: 8px 0 8px 18px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-transform: uppercase;
}

body.menu-open .site-header {
  mix-blend-mode: normal;
}

.menu-toggle__label {
  position: relative;
  display: block;
  width: 62px;
  height: 1.08em;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.menu-toggle__label::after,
.menu-toggle__label span {
  display: block;
  transition:
    opacity 240ms ease,
    transform 340ms var(--ease);
}

.menu-toggle__label::after {
  position: absolute;
  inset: 0;
  content: attr(data-hover-label);
  opacity: 0;
  transform: translateY(92%) scaleY(0.55);
  transform-origin: center bottom;
}

body:not(.menu-open) .menu-toggle:is(:hover, :focus-visible) .menu-toggle__closed {
  opacity: 0;
  transform: translateY(-42%) scaleY(0.3);
}

body:not(.menu-open) .menu-toggle:is(:hover, :focus-visible) .menu-toggle__label::after {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.menu-toggle__icon {
  position: relative;
  display: block;
  width: 26px;
  height: 14px;
}

.menu-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition:
    top 280ms var(--ease),
    transform 280ms var(--ease),
    opacity 200ms ease;
}

.menu-toggle__icon span:nth-child(1) {
  top: 0;
}

.menu-toggle__icon span:nth-child(2) {
  top: 6px;
}

.menu-toggle__icon span:nth-child(3) {
  top: 12px;
}

body.menu-open .menu-toggle__icon span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

body.menu-open .menu-toggle__icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}

body.menu-open .menu-toggle__icon span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 78% 22%, rgba(215, 168, 102, 0.15), transparent 24%),
    radial-gradient(circle at 24% 82%, rgba(105, 217, 199, 0.1), transparent 24%),
    #080a0a;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform 520ms var(--ease),
    opacity 240ms ease,
    visibility 0s linear 520ms;
}

.site-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 520ms var(--ease),
    opacity 240ms ease,
    visibility 0s;
}

.site-menu__inner {
  position: relative;
  display: grid;
  min-height: 100%;
  grid-template-columns: minmax(220px, 0.82fr) minmax(420px, 1fr);
  column-gap: clamp(48px, 8vw, 150px);
  row-gap: 28px;
  align-content: center;
  padding: clamp(110px, 15vh, 160px) clamp(28px, 7vw, 110px) clamp(38px, 7vh, 78px);
}

.site-menu__meta {
  position: relative;
  z-index: 2;
  max-width: 390px;
  align-self: end;
}

.site-menu__meta span {
  display: block;
  margin-bottom: 18px;
  color: var(--copper-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-menu__meta p {
  margin: 0;
  color: rgba(247, 240, 229, 0.72);
  font-size: 16px;
  line-height: 1.55;
}

.site-menu__nav {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 560px);
  justify-self: start;
  align-self: center;
  gap: 0;
}

.site-menu__group {
  position: relative;
  display: grid;
  gap: 2px;
}

.site-menu__group + .site-menu__group {
  margin-top: clamp(18px, 2.4vw, 30px);
  padding-top: clamp(18px, 2.4vw, 30px);
  border-top: 1px solid rgba(247, 240, 229, 0.14);
}

.site-menu__group-label {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--copper-soft);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.92;
  pointer-events: none;
}

.site-menu__link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  color: rgba(247, 240, 229, 0.28);
  font-family: var(--body);
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 800;
  line-height: 1.22;
  outline-offset: 8px;
  text-wrap: balance;
  transition: color 240ms ease;
}

.site-menu__link::before {
  flex: none;
  width: 0;
  height: 1px;
  margin-right: 0;
  background: currentColor;
  content: "";
}

.site-menu__link:is(:hover, :focus-visible)::before,
.site-menu__link.is-current::before {
  width: 34px;
  margin-right: 18px;
}

.site-menu__link.is-current {
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .site-menu__link::before {
    transition:
      width 240ms var(--ease),
      margin-right 240ms var(--ease);
  }
}

.site-menu__link span {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%);
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
  transition-delay: calc(130ms + var(--i, 0) * 44ms);
}

.site-menu.is-open .site-menu__link span {
  opacity: 1;
  transform: translateY(0);
}

.site-menu__link:is(:hover, :focus-visible) {
  color: var(--ink);
}

.menu-card-stack {
  position: absolute;
  left: clamp(150px, 34vw, 560px);
  top: 50%;
  z-index: 1;
  width: min(26vw, 360px);
  aspect-ratio: 4 / 5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.menu-hover-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(240, 201, 137, 0.28);
  background: rgba(247, 240, 229, 0.06);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.45),
    0 0 42px rgba(215, 168, 102, 0.12);
  opacity: 0;
  transform: translate3d(-16%, 14%, 0) rotate(-8deg) scale(0.82);
  transition:
    opacity 420ms ease,
    transform 700ms cubic-bezier(0.25, 1, 0.5, 1);
}

.menu-hover-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(1.08) contrast(1.1) brightness(1.08);
}

.menu-hover-card:nth-child(2) {
  transform: translate3d(14%, 12%, 0) rotate(8deg) scale(0.82);
}

.menu-hover-card:nth-child(3) {
  transform: translate3d(-4%, 18%, 0) rotate(12deg) scale(0.82);
}

.menu-hover-card:nth-child(4) {
  transform: translate3d(8%, 20%, 0) rotate(-12deg) scale(0.82);
}

.menu-hover-card:nth-child(5) {
  transform: translate3d(-10%, 16%, 0) rotate(6deg) scale(0.82);
}

.menu-hover-card:nth-child(6) {
  transform: translate3d(12%, 18%, 0) rotate(-10deg) scale(0.82);
}

.menu-hover-card:nth-child(7) {
  transform: translate3d(-12%, 16%, 0) rotate(10deg) scale(0.82);
}

.menu-hover-card:nth-child(8) {
  transform: translate3d(10%, 15%, 0) rotate(-7deg) scale(0.82);
}

.menu-hover-card.is-active {
  opacity: 0.92;
  transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
}

.menu-hover-card:nth-child(2).is-active {
  transform: translate3d(0, 0, 0) rotate(6deg) scale(1);
}

.menu-hover-card:nth-child(3).is-active {
  transform: translate3d(0, 0, 0) rotate(4deg) scale(1);
}

.menu-hover-card:nth-child(4).is-active {
  transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
}

.menu-hover-card:nth-child(5).is-active {
  transform: translate3d(0, 0, 0) rotate(5deg) scale(1);
}

.menu-hover-card:nth-child(6).is-active {
  transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
}

.menu-hover-card:nth-child(7).is-active {
  transform: translate3d(0, 0, 0) rotate(5deg) scale(1);
}

.menu-hover-card:nth-child(8).is-active {
  transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
}

.hero {
  position: relative;
  min-height: 260svh;
  overflow: visible;
  background: #080a0a;
}

.hero__sticky {
  position: sticky;
  top: 0;
  isolation: isolate;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: #080a0a;
}

.hero__canvas,
.hero__fallback,
.hero__shade,
.hero__grain {
  position: absolute;
  inset: 0;
}

.hero__canvas,
.hero__fallback {
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  filter: brightness(1.14) saturate(1.08) contrast(1.03);
}

.hero__canvas {
  display: block;
  z-index: 1;
}

.hero__fallback {
  display: block;
  z-index: 0;
}

.hero__mobile-bridge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(1.12) saturate(1.08) contrast(1.03);
  transform: translate3d(0, var(--mobile-bridge-y, 0px), 0) scale(var(--mobile-bridge-scale, 1));
  transform-origin: center bottom;
  z-index: 1;
  display: none;
  will-change: transform;
}

.hero__shade {
  z-index: 2;
  background:
    radial-gradient(circle at 76% 26%, rgba(238, 182, 111, 0.08), transparent 34%),
    radial-gradient(circle at 58% 58%, rgba(75, 155, 196, 0.04), transparent 26%),
    linear-gradient(90deg, rgba(7, 9, 9, 0.8) 0%, rgba(7, 9, 9, 0.52) 30%, rgba(7, 9, 9, 0.07) 58%, rgba(7, 9, 9, 0.015) 100%),
    linear-gradient(0deg, rgba(7, 9, 9, 0.28), transparent 44%, rgba(7, 9, 9, 0.08));
}

.hero__grain {
  z-index: 3;
  opacity: 0.08;
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.14), transparent 1px);
  background-size: 80px 80px, 4px 4px;
}

.hero__content {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 100svh;
  width: min(800px, calc(100% - 40px));
  margin-left: clamp(20px, 7vw, 116px);
  padding: clamp(128px, 19vh, 220px) 0 118px;
  flex-direction: column;
  justify-content: center;
  opacity: var(--hero-copy-opacity, 1);
  transform: translateY(var(--hero-copy-y, 0px));
  will-change: transform, opacity;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--copper-soft);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 800;
}

.hero h1,
.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero h1 {
  max-width: 780px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.02;
  overflow-wrap: break-word;
}

.word-switcher {
  display: inline-grid;
  position: relative;
  width: min(100%, 4.35em);
  height: 1.14em;
  overflow: hidden;
  vertical-align: -0.17em;
}

.word-switcher__track {
  position: relative;
  display: block;
  height: 1.14em;
  transform: translateY(0.08em);
}

.word-switcher strong {
  position: absolute;
  inset: 0;
  display: block;
  height: 1.02em;
  color: var(--copper-soft);
  font: inherit;
  opacity: 0;
  transform: translateY(0);
  text-shadow: 0 0 30px rgba(215, 168, 102, 0.22);
  transition:
    opacity 280ms ease,
    transform 620ms var(--ease);
}

.word-switcher strong.is-active {
  opacity: 1;
  transform: translateY(0);
}

.word-switcher strong.is-exiting {
  opacity: 0;
  transform: translateY(-0.32em);
  transition:
    opacity 90ms linear,
    transform 420ms var(--ease);
}

.hero__lede {
  max-width: 650px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.6;
}

.hero__actions,
.read-band__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.hero__cta-note {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  padding: 0 22px;
  font-size: 14px;
  font-weight: 800;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  border-color: rgba(240, 201, 137, 0.68);
  background: var(--ink);
  color: #16110b;
}

.button--secondary {
  background: rgba(247, 240, 229, 0.06);
  color: var(--ink);
  backdrop-filter: blur(12px);
}

.authority-orb {
  position: absolute;
  z-index: 6;
  right: clamp(34px, 7vw, 120px);
  top: 50%;
  width: clamp(122px, 10vw, 174px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(calc(-50% + var(--hero-orb-y, 0px))) scale(var(--hero-orb-scale, 1));
  will-change: transform, opacity;
}

.authority-orb__center,
.authority-orb__ring {
  position: absolute;
  inset: 0;
}

.authority-orb__center {
  display: grid;
  width: 44%;
  height: 44%;
  margin: auto;
  place-items: center;
  border: 1px solid rgba(247, 240, 229, 0.52);
  border-radius: 50%;
  background: rgba(6, 8, 8, 0.26);
  backdrop-filter: blur(14px);
}

.authority-orb__center svg {
  width: 42%;
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.authority-orb__ring {
  overflow: visible;
  animation: authority-ring-spin 18s linear infinite;
}

.authority-orb__ring text {
  fill: rgba(247, 240, 229, 0.86);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.authority-orb:hover .authority-orb__center,
.authority-orb:focus-visible .authority-orb__center {
  border-color: var(--copper-soft);
  background: rgba(240, 201, 137, 0.1);
}

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

.scroll-cue {
  position: absolute;
  right: clamp(18px, 4vw, 64px);
  bottom: clamp(28px, 5vh, 58px);
  z-index: 6;
  display: grid;
  width: 42px;
  height: 70px;
  place-items: center;
}

.scroll-cue span {
  position: relative;
  width: 1px;
  height: 48px;
  background: rgba(247, 240, 229, 0.68);
}

.scroll-cue span::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(247, 240, 229, 0.68);
  border-bottom: 1px solid rgba(247, 240, 229, 0.68);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.section-pad {
  padding: clamp(86px, 12vw, 170px) clamp(20px, 5vw, 76px);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 38px;
}

.section-label > span {
  position: relative;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--copper), rgba(215, 168, 102, 0));
}

.section-label > span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(240, 201, 137, 0.86);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.section-label p {
  margin: 0;
  color: rgba(247, 240, 229, 0.58);
  font-size: 12px;
  font-weight: 800;
}

.display {
  max-width: 1120px;
  font-size: clamp(42px, 6.2vw, 100px);
  line-height: 0.92;
}

.manifesto {
  background:
    linear-gradient(180deg, #0b0d0c, #151713 52%, #0d0f0e),
    radial-gradient(circle at 10% 18%, rgba(185, 99, 74, 0.18), transparent 34%);
  border-top: 1px solid rgba(215, 168, 102, 0.16);
}

.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(260px, 0.52fr);
  gap: clamp(36px, 7vw, 104px);
  align-items: end;
}

.manifesto__copy {
  padding-bottom: 8px;
}

.manifesto__copy p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.7;
}

.manifesto__copy p:last-child {
  margin-bottom: 0;
}

/* The first post-hero section is a deliberate cream "light moment" (like .proof),
   so the page reads hero(dark) -> buyer fit(cream) -> Diagnosis(dark) -> Proof(cream).
   The header stays legible via its mix-blend-mode: difference. */
.about {
  background: var(--paper);
  color: #141210;
}

.about .section-label > span {
  background: linear-gradient(90deg, rgba(20, 18, 16, 0.62), rgba(20, 18, 16, 0));
}

.about .section-label > span::before {
  border-color: rgba(20, 18, 16, 0.62);
}

.about .section-label p {
  color: rgba(20, 18, 16, 0.6);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(260px, 0.52fr);
  gap: clamp(36px, 7vw, 104px);
  align-items: end;
}

.about__copy {
  padding-bottom: 8px;
}

.about__copy p {
  margin: 0 0 22px;
  color: rgba(20, 18, 16, 0.74);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.7;
}

.about__copy p:last-child {
  margin-bottom: 0;
}

.about__signature {
  color: #141210;
  font-weight: 800;
}

.about__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 34px);
  margin-top: clamp(40px, 6vw, 80px);
  padding: 0;
  list-style: none;
}

.about__facts li {
  display: grid;
  gap: 12px;
  border-top: 1px solid rgba(20, 18, 16, 0.2);
  padding-top: 16px;
}

.about__facts-index {
  color: rgba(20, 18, 16, 0.66);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
}

.about__facts-body {
  display: grid;
  gap: 8px;
}

.about__facts-label {
  color: rgba(20, 18, 16, 0.9);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
}

.about__facts-detail {
  color: rgba(20, 18, 16, 0.62);
  font-size: 13.5px;
  line-height: 1.5;
}

.diagnostic-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(48px, 7vw, 96px);
  padding: 0;
  list-style: none;
}

/* Desktop: one shared 6-column track. The two lists snap onto it via subgrid,
   so all six cards line up as a single continuous row; short labels sit below,
   the visibility leak centered under cards 1-4 and the conversion leak under 5-6. */
.diagnostic-groups {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Row 1 pinned to the card height (.diagnostic-strip li min-height) so the
     bracket risers below meet the cards. `auto` over-sizes here because the
     collapsed hover-detail still counts toward each card's intrinsic height. */
  grid-template-rows: 168px max-content;
  column-gap: 10px;
  row-gap: 0;
  align-items: start;
  margin-top: clamp(48px, 7vw, 96px);
}

/* Desktop: the label is a flex row. Its ::before / ::after draw a bracket that
   flanks the text and rises at the group's outer edges up to the cards. */
.diagnostic-group__label {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  color: rgba(240, 201, 137, 0.82);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.diagnostic-group__label::before,
.diagnostic-group__label::after {
  content: "";
  flex: 1;
  height: 34px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(215, 168, 102, 0.4);
}

.diagnostic-group__label::before {
  border-left: 1px solid rgba(215, 168, 102, 0.4);
}

.diagnostic-group__label::after {
  border-right: 1px solid rgba(215, 168, 102, 0.4);
}

/* Desktop short form: hide the question tail, keep just "The ... leak". */
.diagnostic-group__label__q {
  display: none;
}

.diagnostic-group__label--vis {
  grid-row: 2;
  grid-column: 1 / 5;
}

.diagnostic-group__label--conv {
  grid-row: 2;
  grid-column: 5 / 7;
}

.diagnostic-strip--quad,
.diagnostic-strip--duo {
  grid-row: 1;
  margin-top: 0;
  grid-template-columns: subgrid;
}

.diagnostic-strip--quad {
  grid-column: 1 / 5;
}

.diagnostic-strip--duo {
  grid-column: 5 / 7;
}

.diagnostic-strip::before {
  position: absolute;
  top: 34px;
  right: 20px;
  left: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(215, 168, 102, 0), rgba(215, 168, 102, 0.54), rgba(121, 199, 255, 0.24), rgba(215, 168, 102, 0));
  content: "";
  opacity: 0.76;
}

.diagnostic-strip li {
  position: relative;
  display: flex;
  min-height: 168px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  border: 1px solid rgba(219, 174, 108, 0.16);
  background:
    linear-gradient(180deg, rgba(247, 240, 229, 0.066), rgba(247, 240, 229, 0.024)),
    radial-gradient(circle at 50% 0, rgba(121, 199, 255, 0.12), transparent 58%);
  box-shadow:
    inset 0 1px 0 rgba(247, 240, 229, 0.08),
    inset 0 -1px 0 rgba(8, 10, 10, 0.42);
  padding: 18px 16px 16px;
  overflow: hidden;
  transition:
    background 520ms var(--ease),
    border-color 520ms var(--ease),
    box-shadow 520ms var(--ease),
    transform 520ms var(--ease);
}

.diagnostic-strip li::before {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(240, 201, 137, 0.78);
  border-radius: 50%;
  background: #151713;
  box-shadow:
    0 0 0 5px rgba(215, 168, 102, 0.08),
    0 0 20px rgba(121, 199, 255, 0.14);
  content: "";
  transform: translateX(-50%);
}

.diagnostic-strip li::after {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(247, 240, 229, 0.045);
  content: "";
  pointer-events: none;
}

.diagnostic-strip__index {
  color: rgba(240, 201, 137, 0.82);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1;
}

.diagnostic-strip__body {
  display: grid;
  gap: 9px;
}

.diagnostic-strip__label {
  max-width: 10.5em;
  color: rgba(247, 240, 229, 0.82);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}

.diagnostic-strip__detail {
  display: block;
  max-height: 0;
  max-width: 14.5em;
  color: rgba(247, 240, 229, 0.64);
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition:
    max-height 560ms var(--ease),
    opacity 420ms ease,
    transform 520ms var(--ease);
}

.diagnostic-strip li:is(:hover, :focus-visible) {
  border-color: rgba(240, 201, 137, 0.38);
  background:
    linear-gradient(180deg, rgba(247, 240, 229, 0.09), rgba(247, 240, 229, 0.036)),
    radial-gradient(circle at 50% 0, rgba(121, 199, 255, 0.2), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(247, 240, 229, 0.12),
    inset 0 -1px 0 rgba(8, 10, 10, 0.48),
    0 18px 46px rgba(0, 0, 0, 0.22);
  transform: translateY(-5px);
}

.diagnostic-strip li:focus-visible {
  outline: 2px solid rgba(121, 199, 255, 0.5);
  outline-offset: 5px;
}

.diagnostic-strip li:is(:hover, :focus-visible)::before {
  border-color: rgba(121, 199, 255, 0.72);
  box-shadow:
    0 0 0 6px rgba(215, 168, 102, 0.12),
    0 0 28px rgba(121, 199, 255, 0.26);
}

.diagnostic-strip li:is(:hover, :focus-visible) .diagnostic-strip__detail {
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .diagnostic-strip.reveal-up li {
    opacity: 0;
    transform: translateY(18px);
    transition-delay: calc(var(--diagnostic-index, 0) * 70ms);
  }

  .js-motion .diagnostic-strip.reveal-up::before {
    opacity: 0;
    transform: scaleX(0.72);
    transform-origin: left center;
    transition:
      opacity 820ms ease 180ms,
      transform 940ms var(--ease) 180ms;
  }

  .js-motion .diagnostic-strip.reveal-up.is-visible li {
    opacity: 1;
    transform: translateY(0);
  }

  .js-motion .diagnostic-strip.reveal-up.is-visible::before {
    opacity: 0.76;
    transform: scaleX(1);
  }

  .js-motion .diagnostic-strip.reveal-up.is-visible li:is(:hover, :focus-visible) {
    transform: translateY(-5px);
  }

  .diagnostic-strip li:nth-child(1) {
    --diagnostic-index: 1;
  }

  .diagnostic-strip li:nth-child(2) {
    --diagnostic-index: 2;
  }

  .diagnostic-strip li:nth-child(3) {
    --diagnostic-index: 3;
  }

  .diagnostic-strip li:nth-child(4) {
    --diagnostic-index: 4;
  }

  .diagnostic-strip li:nth-child(5) {
    --diagnostic-index: 5;
  }

  .diagnostic-strip li:nth-child(6) {
    --diagnostic-index: 6;
  }
}

@keyframes diagnostic-node-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 6px rgba(215, 168, 102, 0.14),
      0 0 26px rgba(121, 199, 255, 0.26);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(215, 168, 102, 0.2),
      0 0 36px rgba(121, 199, 255, 0.42);
  }
}

.proof {
  background: var(--paper);
  color: #141210;
}

.proof .eyebrow {
  color: rgba(20, 18, 16, 0.58);
}

.proof__intro {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) 1fr;
  gap: clamp(20px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(58px, 8vw, 110px);
}

.proof__intro-copy {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}

.proof__bridge {
  max-width: 760px;
  margin: 0;
  color: rgba(20, 18, 16, 0.68);
  font-size: clamp(17px, 1.28vw, 20px);
  line-height: 1.62;
}

.proof__cta {
  margin-top: clamp(58px, 9vw, 120px);
  display: flex;
  justify-content: center;
}

.proof__cta .button {
  background: #141210;
  color: var(--ink);
  border-color: #141210;
}

.case-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  margin: 0 0 clamp(74px, 12vw, 160px);
}

.case-row:last-child {
  margin-bottom: 0;
}

.case-row--reverse {
  grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1fr);
}

.case-row--reverse .case-row__media {
  order: 2;
}

.case-row__media {
  display: block;
  overflow: hidden;
  contain: paint;
  aspect-ratio: 1.42 / 1;
  background: #151311;
  clip-path: inset(0);
  transition:
    clip-path 900ms var(--ease),
    opacity 450ms linear,
    transform 900ms var(--ease);
}

.case-row:first-of-type .case-row__media img {
  object-position: center top;
}

.case-row__media img {
  display: block;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(1);
  transform:
    translateY(calc(var(--case-img-parallax, 0px) + var(--case-img-offset-y, 0px) + var(--case-img-hover-y, 0px)))
    scale(var(--case-img-scale, 1));
  transition:
    transform 260ms var(--ease),
    filter 500ms linear;
}

.case-row--tall-page {
  --case-img-offset-y: -32px;
}

.case-row--tall-page .case-row__media {
  background: #f4ead8;
}

/* Anchor tall full-page captures at the top so the card shows the site's hero at rest,
   then drifts down through the page on scroll. The first row gets this via :first-of-type;
   later tall-page rows (DecideNorth) need it explicitly or they open mid-page. */
.case-row--tall-page .case-row__media img {
  object-position: center top;
}

.case-row--wide-shot .case-row__media {
  aspect-ratio: 1.92 / 1;
  background: #f1e4cf;
}

/* The DecideNorth screenshot carries critical UI on its left/right edges (logo, nav,
   "Start Free", keepsake badge), so it can't be side-cropped like the cover cards.
   The frame is set a touch wider than the 1.745 image so object-fit:cover spills only
   top/bottom (sky + water) — that gives it the same scroll-drift the other two rows
   have, with zero horizontal crop. (screen-shot is unused but kept on the shared
   selector.) Parallax is gain-scaled here because the frame is shorter. */
.case-row--wide-shot .case-row__media img,
.case-row--screen-shot .case-row__media img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform:
    translateY(calc(var(--case-img-parallax, 0px) * var(--wide-parallax-gain, 0.55) + var(--case-img-hover-y, 0px)))
    scale(var(--case-img-scale, 1));
}

.case-row--wide-shot .case-row__media:is(:hover, :focus-visible) img {
  --case-img-scale: 1;
  --case-img-hover-y: -6px;
}

.case-row--screen-shot .case-row__media {
  background: #f8faf9;
}

.case-row--avatar-proof .case-row__media {
  background: #17130e;
}

.case-row__media:is(:hover, :focus-visible) img {
  --case-img-hover-y: -12px;
  --case-img-scale: 0.985;
  filter: brightness(0.64);
}

.case-row__copy > span {
  display: block;
  margin-bottom: 26px;
  color: rgba(20, 18, 16, 0.56);
  font-size: 12px;
  font-weight: 800;
}

.case-row__copy h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(38px, 4vw, 64px);
  line-height: 0.9;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.case-row__copy h3.word-reveal .word {
  display: inline;
}

.case-row__copy p {
  max-width: 590px;
  margin: 24px 0 0;
  color: rgba(20, 18, 16, 0.72);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.65;
}

.case-row__copy dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
}

.case-row__copy dl div {
  border-top: 1px solid rgba(20, 18, 16, 0.18);
  padding-top: 14px;
}

.case-row__copy dt,
.case-row__copy dd {
  margin: 0;
}

.case-row__copy dt {
  color: rgba(20, 18, 16, 0.48);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.case-row__copy dd {
  margin-top: 8px;
  color: rgba(20, 18, 16, 0.78);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.builds {
  background:
    radial-gradient(circle at 83% 18%, rgba(121, 199, 255, 0.14), transparent 30%),
    linear-gradient(180deg, #080a0a, #111614);
}

.builds .display {
  max-width: 1160px;
}

.builds__bridge {
  max-width: 760px;
  margin: 28px 0 0;
  color: rgba(247, 240, 229, 0.64);
  font-size: clamp(17px, 1.22vw, 20px);
  line-height: 1.62;
}

.builds__more {
  margin: clamp(36px, 5vw, 60px) 0 0;
  font-size: clamp(15px, 1vw, 17px);
}

.build-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(52px, 7vw, 92px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.build-item {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(20px, 2.4vw, 34px);
  background: rgba(247, 240, 229, 0.035);
  transition:
    background 240ms ease,
    transform 240ms ease;
}

.build-item:hover,
.build-item:focus-visible {
  background: rgba(247, 240, 229, 0.075);
  transform: translateY(-4px);
}

.build-item span {
  color: var(--copper-soft);
  font-size: 12px;
  font-weight: 800;
}

.build-item h3 {
  margin: clamp(22px, 2.6vw, 34px) 0 14px;
  min-height: 2.1em;
  font-family: var(--display);
  font-size: clamp(23px, 1.45vw, 26px);
  line-height: 1.05;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.build-item p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.build-item p strong {
  color: rgba(247, 240, 229, 0.88);
  font-weight: 850;
}

.work-page .side-tagline,
.about-page .side-tagline {
  opacity: 1;
  transform: translateY(-50%) rotate(180deg) translateX(0);
}

.about-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 0.86fr) minmax(300px, 0.42fr);
  gap: clamp(38px, 7vw, 112px);
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 16%, rgba(215, 168, 102, 0.18), transparent 30%),
    radial-gradient(circle at 8% 82%, rgba(121, 199, 255, 0.1), transparent 34%),
    linear-gradient(180deg, #080a0a 0%, #101614 100%);
}

.about-hero.section-pad {
  padding-top: clamp(132px, 14vw, 190px);
}

.about-hero__copy {
  max-width: 980px;
}

.about-hero .display {
  max-width: 1040px;
  font-size: clamp(48px, 5.6vw, 92px);
  line-height: 0.92;
}

.about-hero__lede {
  display: grid;
  max-width: 820px;
  gap: 18px;
  margin-top: 28px;
}

.about-hero__lede p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.65;
}

.about-hero__side {
  display: grid;
  width: min(100%, 460px);
  gap: clamp(18px, 2vw, 26px);
  align-self: center;
  justify-self: end;
}

.about-founder-video {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(210, 164, 91, 0.26);
  background:
    radial-gradient(circle at 50% 8%, rgba(210, 164, 91, 0.18), transparent 42%),
    rgba(8, 10, 10, 0.72);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
  isolation: isolate;
}

.about-founder-video::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(247, 240, 229, 0.08);
  content: "";
  pointer-events: none;
}

.about-founder-video video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  opacity: 0.92;
}

.about-founder-video figcaption {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  right: clamp(16px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 2;
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(247, 240, 229, 0.16);
  padding-top: 12px;
  color: var(--ink);
}

.about-founder-video figcaption strong {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.about-founder-video figcaption span {
  color: rgba(247, 240, 229, 0.64);
  font-size: 13px;
  line-height: 1.4;
}

.about-hero__panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(247, 240, 229, 0.07), rgba(247, 240, 229, 0.025)),
    rgba(8, 10, 10, 0.58);
  padding: clamp(20px, 2.4vw, 30px);
}

.about-hero__panel p {
  margin: 0 0 22px;
  color: var(--copper-soft);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-hero__panel ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-hero__panel li {
  --about-panel-hover-y: 0px;
  --reveal-y-visible: var(--about-panel-hover-y);
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 7px 14px;
  overflow: hidden;
  border: 1px solid rgba(247, 240, 229, 0.12);
  background:
    linear-gradient(180deg, rgba(247, 240, 229, 0.055), rgba(247, 240, 229, 0.02)),
    rgba(8, 10, 10, 0.24);
  padding: 14px;
  transition:
    opacity 720ms ease,
    transform 720ms var(--ease),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.about-hero__panel li:nth-child(2) {
  transition-delay: 80ms;
}

.about-hero__panel li:nth-child(3) {
  transition-delay: 160ms;
}

.about-hero__panel li::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 18% 8%, rgba(240, 201, 137, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(247, 240, 229, 0.055), rgba(247, 240, 229, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.about-hero__panel li > * {
  position: relative;
  z-index: 1;
}

.about-hero__panel li:is(:hover, :focus-within) {
  --about-panel-hover-y: -4px;
  border-color: rgba(240, 201, 137, 0.34);
  background:
    linear-gradient(180deg, rgba(247, 240, 229, 0.075), rgba(247, 240, 229, 0.03)),
    rgba(8, 10, 10, 0.3);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.about-hero__panel li:is(:hover, :focus-within)::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__panel li:is(:hover, :focus-within) {
    --about-panel-hover-y: 0px;
  }
}

.about-hero__panel span {
  display: inline-flex;
  grid-row: 1 / span 2;
  width: 100%;
  align-items: center;
  align-self: stretch;
  border-right: 1px solid rgba(240, 201, 137, 0.22);
  color: var(--copper-soft);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1;
  padding-right: 12px;
  text-transform: uppercase;
}

.about-hero__panel strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.32;
  text-transform: uppercase;
}

.about-hero__panel small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
}

.about-story {
  background: var(--paper);
  color: #141210;
}

.about-story .section-label > span {
  background: linear-gradient(90deg, rgba(20, 18, 16, 0.62), rgba(20, 18, 16, 0));
}

.about-story .section-label > span::before {
  border-color: rgba(20, 18, 16, 0.62);
}

.about-story .section-label p,
.about-story .eyebrow {
  color: rgba(20, 18, 16, 0.6);
}

.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.56fr);
  gap: clamp(36px, 7vw, 104px);
  align-items: end;
}

.about-story__copy {
  display: grid;
  gap: 20px;
}

.about-story__copy p {
  margin: 0;
  color: rgba(20, 18, 16, 0.74);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.7;
}

.about-principles {
  background:
    radial-gradient(circle at 12% 10%, rgba(121, 199, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #080a0a, #111614);
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.principle-card {
  --principle-hover-y: 0px;
  --reveal-y-visible: var(--principle-hover-y);
  position: relative;
  overflow: hidden;
  min-height: 340px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 2.8vw, 38px);
  background: rgba(247, 240, 229, 0.035);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--ease);
}

.principle-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 18% 12%, rgba(240, 201, 137, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(247, 240, 229, 0.06), rgba(247, 240, 229, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.principle-card > * {
  position: relative;
  z-index: 1;
}

.principle-card:is(:hover, :focus-within) {
  --principle-hover-y: -4px;
  border-color: var(--line-strong);
  background: rgba(247, 240, 229, 0.07);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
}

.principle-card:is(:hover, :focus-within)::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .principle-card:is(:hover, :focus-within) {
    --principle-hover-y: 0px;
  }
}

.principle-card > span {
  color: var(--copper-soft);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.principle-card h3 {
  max-width: 360px;
  margin: 72px 0 0;
  font-family: var(--display);
  font-size: clamp(30px, 2.4vw, 44px);
  line-height: 0.98;
  letter-spacing: 0;
}

.principle-card p {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.work-hero {
  position: relative;
  display: grid;
  min-height: 86svh;
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.56fr);
  gap: clamp(38px, 7vw, 112px);
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 20%, rgba(215, 168, 102, 0.18), transparent 28%),
    radial-gradient(circle at 10% 78%, rgba(105, 217, 199, 0.1), transparent 34%),
    linear-gradient(180deg, #080a0a 0%, #101614 100%);
}

.work-hero.section-pad {
  padding-top: clamp(116px, 10vw, 150px);
  padding-bottom: clamp(58px, 6vw, 86px);
}

.work-hero__copy {
  max-width: 980px;
}

.work-hero .display {
  max-width: 900px;
  font-size: clamp(54px, 6.35vw, 106px);
  line-height: 0.9;
}

.work-hero__lede {
  max-width: 820px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.65;
}

.work-hero__wall {
  display: grid;
  gap: 14px;
  transform: translateY(clamp(18px, 4vw, 54px));
}

.work-hero__tile {
  position: relative;
  display: block;
  height: 168px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #151311;
}

.work-hero__tile:first-child {
  height: 246px;
}

.work-hero__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.76) saturate(0.9);
  transform: scale(1.02);
  transition:
    filter 260ms linear,
    transform 320ms var(--ease);
}

.work-hero__tile:first-child img {
  object-position: center top;
}

.work-hero__tile:nth-child(2) img {
  object-fit: contain;
  background: #efe1ca;
}

.work-hero__tile span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.work-hero__tile:is(:hover, :focus-visible) img {
  filter: brightness(0.95) saturate(1);
  transform: scale(0.995);
}

.work-featured {
  border-top: 1px solid rgba(20, 18, 16, 0.12);
}

.work-index {
  --work-wall-gap: clamp(28px, 5vw, 86px);
  position: relative;
  overflow: hidden;
}

.work-index__intro {
  margin-bottom: clamp(28px, 4vw, 54px);
}

.work-index__lede {
  max-width: 720px;
  margin: 26px 0 0;
  color: rgba(20, 18, 16, 0.7);
  font-size: clamp(16px, 1.22vw, 20px);
  line-height: 1.7;
}

.work-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: calc((100% - var(--work-wall-gap)) / 2);
  margin-bottom: clamp(46px, 7vw, 92px);
  padding-top: 18px;
  border-top: 1px solid rgba(20, 18, 16, 0.14);
}

.work-filter-strip span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(20, 18, 16, 0.14);
  padding: 0 14px;
  color: rgba(20, 18, 16, 0.62);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-project-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(92px, 10vw, 156px) var(--work-wall-gap);
  align-items: start;
}

.work-project-wall > :nth-child(even) {
  --project-stagger-y: clamp(-156px, -10.5vw, -132px);
}

.work-project {
  --project-stagger-y: 0px;
  --project-reveal-y: 0px;
  display: block;
  min-width: 0;
  color: inherit;
  opacity: 1;
  transform: translateY(calc(var(--project-stagger-y) + var(--project-reveal-y)));
  transition:
    opacity 760ms ease,
    transform 760ms var(--ease);
}

.work-project__media {
  position: relative;
  display: block;
  overflow: hidden;
  contain: paint;
  aspect-ratio: 1.18 / 1;
  background: #151311;
  transition:
    clip-path 900ms var(--ease),
    transform 900ms var(--ease);
}

.work-project__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 56%, rgba(8, 10, 10, 0.32)),
    radial-gradient(circle at 12% 12%, rgba(215, 168, 102, 0.16), transparent 34%);
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 240ms linear;
}

.work-project__media img {
  display: block;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.96) saturate(0.96);
  transform:
    translateY(calc(var(--case-img-parallax, 0px) + var(--case-img-hover-y, 0px)))
    scale(var(--case-img-scale, 1.01));
  transition:
    filter 320ms linear,
    transform 360ms var(--ease);
}

.work-project--tall .work-project__media img {
  height: 118%;
  object-position: center top;
}

.work-project--wide .work-project__media {
  aspect-ratio: 1.745 / 1;
  background: #f1e4cf;
}

.work-project--wide .work-project__media img {
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform: scale(var(--case-img-scale, 1));
}

.work-project--screenshot .work-project__media {
  aspect-ratio: var(--project-media-ratio, 1.6 / 1);
  background: #101312;
}

.work-project--screenshot .work-project__media img {
  height: 100%;
  object-fit: contain;
  object-position: center top;
  transform: scale(var(--case-img-scale, 1));
}

.work-project--scroll-shot .work-project__media img {
  height: auto;
  min-height: 100%;
  object-fit: initial;
  transform:
    translateY(calc(var(--case-img-parallax, 0px) - 54px + var(--case-img-hover-y, 0px)))
    scale(var(--case-img-scale, 1.005));
}

.work-project--dark .work-project__media {
  background: #17130e;
}

.work-project--graph .work-project__media {
  background:
    radial-gradient(circle at 50% 42%, rgba(215, 168, 102, 0.22), transparent 34%),
    #080a0a;
}

.work-project--graph .work-project__media img {
  height: 108%;
  object-fit: contain;
  padding: clamp(24px, 5vw, 58px);
}

a.work-project:is(:hover, :focus-visible) .work-project__media img {
  --case-img-hover-y: -12px;
  --case-img-scale: 0.985;
  filter: brightness(0.72) saturate(0.9);
}

a.work-project:is(:hover, :focus-visible) .work-project__media::after {
  opacity: 0.55;
}

.work-project__body {
  display: block;
  padding-top: clamp(22px, 3vw, 34px);
}

.work-project__eyebrow {
  display: block;
  margin-bottom: 18px;
  color: rgba(20, 18, 16, 0.55);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.work-project__body strong {
  display: block;
  max-width: 680px;
  color: #141210;
  font-family: var(--display);
  font-size: clamp(38px, 4.5vw, 76px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0;
}

.work-project__text {
  display: block;
  max-width: 620px;
  margin-top: 20px;
  color: rgba(20, 18, 16, 0.72);
  font-size: clamp(16px, 1.22vw, 20px);
  line-height: 1.62;
}

.work-project__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 680px;
  margin-top: 28px;
}

.work-project__meta span {
  border-top: 1px solid rgba(20, 18, 16, 0.16);
  padding-top: 12px;
  color: rgba(20, 18, 16, 0.68);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.work-more {
  background:
    radial-gradient(circle at 12% 10%, rgba(121, 199, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #080a0a, #111614);
}

.work-section-head,
.work-standard {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.52fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}

.work-section-head {
  margin-bottom: clamp(40px, 6vw, 78px);
}

.work-section-head > p:last-child,
.work-standard__copy p,
.work-cta p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.22vw, 20px);
  line-height: 1.7;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.work-card {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 2.8vw, 38px);
  background: rgba(247, 240, 229, 0.035);
  transition:
    background 220ms ease,
    transform 220ms var(--ease);
}

a.work-card:is(:hover, :focus-visible) {
  background: rgba(247, 240, 229, 0.075);
  transform: translateY(-4px);
}

.work-card__index,
.work-card__type {
  color: var(--copper-soft);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.work-card__type {
  margin: 44px 0 18px;
  color: rgba(240, 201, 137, 0.68);
}

.work-card h3 {
  max-width: 460px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 2.4vw, 42px);
  line-height: 0.98;
  letter-spacing: 0;
}

.work-card > p:not(.work-card__type) {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}

.work-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: auto 0 0;
  padding-top: 30px;
}

.work-card dl div {
  border-top: 1px solid rgba(247, 240, 229, 0.18);
  padding-top: 12px;
}

.work-card dt,
.work-card dd {
  margin: 0;
}

.work-card dt {
  color: rgba(247, 240, 229, 0.45);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.work-card dd {
  margin-top: 7px;
  color: rgba(247, 240, 229, 0.78);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.work-standard {
  background: var(--paper);
  color: #141210;
}

.work-standard .eyebrow {
  color: rgba(20, 18, 16, 0.58);
}

.work-standard__copy {
  display: grid;
  gap: 18px;
}

.work-standard__copy p {
  color: rgba(20, 18, 16, 0.72);
}

.work-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 12vw, 156px) clamp(20px, 5vw, 76px);
  background:
    linear-gradient(90deg, rgba(8, 10, 10, 0.94), rgba(8, 10, 10, 0.62)),
    url("./assets/authority-read-table-v1.png") center / cover;
}

.work-cta__inner {
  width: min(760px, 100%);
}

.work-cta p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 24px;
}

.project-page .side-tagline {
  opacity: 1;
  transform: translateY(-50%) rotate(180deg) translateX(0);
}

.project-hero {
  position: relative;
  display: grid;
  min-height: 94svh;
  grid-template-columns: minmax(0, 0.9fr) minmax(310px, 0.44fr);
  gap: clamp(38px, 7vw, 108px);
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(215, 168, 102, 0.18), transparent 30%),
    radial-gradient(circle at 10% 74%, rgba(121, 199, 255, 0.1), transparent 32%),
    linear-gradient(180deg, #080a0a 0%, #101614 100%);
}

.project-hero.section-pad {
  padding-top: clamp(136px, 12vw, 186px);
  padding-bottom: clamp(68px, 8vw, 116px);
}

.project-hero__copy {
  max-width: 1120px;
}

.project-back {
  display: inline-flex;
  margin-bottom: clamp(34px, 5vw, 70px);
  color: rgba(247, 240, 229, 0.62);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.project-back:hover,
.project-back:focus-visible {
  color: var(--copper-soft);
}

.project-hero .display {
  max-width: 1120px;
  font-size: clamp(48px, 6.2vw, 104px);
  line-height: 0.9;
}

.project-hero__lede {
  max-width: 830px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.66;
}

.project-meta {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(247, 240, 229, 0.07), rgba(247, 240, 229, 0.025)),
    rgba(8, 10, 10, 0.56);
  padding: clamp(22px, 3vw, 34px);
}

.project-meta dl {
  display: grid;
  gap: 20px;
  margin: 0;
}

.project-meta div {
  border-top: 1px solid rgba(247, 240, 229, 0.14);
  padding-top: 15px;
}

.project-meta div:first-child {
  border-top: 0;
  padding-top: 0;
}

.project-meta dt,
.project-meta dd {
  margin: 0;
}

.project-meta dt {
  color: rgba(240, 201, 137, 0.7);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-meta dd {
  margin-top: 8px;
  color: rgba(247, 240, 229, 0.82);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.42;
}

.project-viewer {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(105, 217, 199, 0.09), transparent 30%),
    linear-gradient(180deg, #0c100f, #080a0a);
}

.project-viewer__head {
  display: grid;
  grid-template-columns: minmax(180px, 0.3fr) 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(42px, 6vw, 78px);
}

.project-viewer__head .display {
  max-width: 1040px;
}

.browser-preview {
  --browser-viewport-width: 100%;
  --browser-ratio: 16 / 10;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(247, 240, 229, 0.12);
  border-radius: 8px;
  padding-bottom: clamp(64px, 6vw, 76px);
  background: #111514;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 30px 90px rgba(0, 0, 0, 0.34);
  transition: box-shadow 320ms ease;
}

.browser-preview[data-device="tablet"] {
  --browser-viewport-width: min(768px, 100%);
  --browser-ratio: 3 / 4;
}

.browser-preview[data-device="mobile"] {
  --browser-viewport-width: min(393px, 100%);
  --browser-ratio: 390 / 844;
}

.browser-preview__bar {
  display: grid;
  min-height: 46px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(247, 240, 229, 0.1);
  padding: 9px 12px;
  background: rgba(16, 20, 18, 0.94);
}

.browser-preview__lights {
  display: flex;
  gap: 7px;
  align-items: center;
}

.browser-preview__lights span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(247, 240, 229, 0.24);
  transition: background 180ms ease;
}

.browser-preview__lights span:nth-child(1) {
  background: rgba(185, 99, 74, 0.8);
}

.browser-preview__lights span:nth-child(2) {
  background: rgba(215, 168, 102, 0.78);
}

.browser-preview__lights span:nth-child(3) {
  background: rgba(105, 217, 199, 0.68);
}

.browser-preview__url {
  justify-self: center;
  max-width: min(360px, 100%);
  overflow: hidden;
  border: 1px solid rgba(247, 240, 229, 0.1);
  border-radius: 6px;
  padding: 6px 12px;
  color: rgba(247, 240, 229, 0.58);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(247, 240, 229, 0.035);
}

.browser-preview__tools {
  display: flex;
  gap: 6px;
  justify-content: end;
}

.browser-preview__tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid rgba(247, 240, 229, 0.08);
  border-radius: 6px;
  padding: 0 9px;
  color: rgba(247, 240, 229, 0.54);
  background: rgba(247, 240, 229, 0.035);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease;
}

.browser-preview__tools button:hover,
.browser-preview__tools button:focus-visible,
.browser-preview__tools button[aria-pressed="true"] {
  border-color: rgba(240, 201, 137, 0.3);
  color: var(--ink);
  background: rgba(247, 240, 229, 0.09);
}

.browser-preview__stage {
  position: relative;
  width: var(--browser-viewport-width);
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: var(--browser-ratio);
  background: #efe4d3;
  box-shadow:
    -1px 0 0 rgba(247, 240, 229, 0.08),
    1px 0 0 rgba(247, 240, 229, 0.08);
  transition:
    aspect-ratio 480ms var(--ease),
    width 480ms var(--ease);
}

.browser-preview__stage iframe,
.browser-preview__fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.browser-preview__stage iframe {
  z-index: 2;
  border: 0;
  background: #fff;
}

.browser-preview__fallback {
  z-index: 1;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.95);
}

.browser-preview__notice {
  position: absolute;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 4;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: min(460px, calc(100% - 24px));
  border: 1px solid rgba(247, 240, 229, 0.16);
  border-radius: 8px;
  padding: 8px;
  color: rgba(247, 240, 229, 0.66);
  background: rgba(15, 18, 16, 0.82);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.browser-preview__notice span {
  padding: 0 4px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.browser-preview__notice a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 6px;
  padding: 0 12px;
  color: #141210;
  background: var(--copper-soft);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.browser-preview__notice a:hover,
.browser-preview__notice a:focus-visible {
  background: #f4d79b;
  transform: translateY(-1px);
}

.browser-preview--scroll-capture .browser-preview__stage {
  overflow-y: auto;
  overscroll-behavior-y: auto;
}

.browser-preview--scroll-capture .browser-preview__fallback {
  position: relative;
  height: auto;
  min-height: 100%;
  object-fit: initial;
}

.browser-preview--interactive-graph {
  --browser-ratio: auto;
  scroll-margin-top: 128px;
}

.browser-preview--interactive-graph .browser-preview__stage {
  height: clamp(560px, 72vh, 860px);
  min-height: 560px;
  background: #02070d;
}

.browser-preview--interactive-graph .browser-preview__stage iframe {
  background: #02070d;
}

.browser-preview--interactive-graph .browser-preview__fallback {
  object-fit: cover;
}

/* Before/after comparison slider (rides on top of the scroll-capture stage) */
.project-viewer__hint {
  max-width: 62ch;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  color: rgba(247, 240, 229, 0.62);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.55;
}

.browser-preview--ba .browser-preview__stage {
  background: #efe4d3;
}

.ba-compare__scroll {
  position: relative;
  width: 100%;
}

.ba-compare__img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.97);
  user-select: none;
  -webkit-user-drag: none;
}

.ba-compare__img--after {
  position: relative;
  z-index: 1;
}

.ba-compare__img--before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}

/* Live hero video overlaid on the "after" side only, pinned to the top of the
   scrolling frame. Matches the after screenshot's hero region (full width,
   1280x990 source ratio) so it sits exactly over the frozen hero frame. */
.ba-compare__video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1280 / 990;
  height: auto;
  object-fit: cover;
  clip-path: inset(0 0 0 var(--ba-pos, 50%));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* The live hero's foreground text rides on top of the background video (which
   only carries the moving slab/landscape). Reproduced as HTML so the headline,
   subhead, CTAs and nav stay crisp and visible when the after side is revealed.
   Sized in container-query units (cqw) so it scales with the hero box. */
.ba-compare__hero-fg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1280 / 990;
  container-type: inline-size;
  clip-path: inset(0 0 0 var(--ba-pos, 50%));
  pointer-events: none;
  user-select: none;
  font-family: "Manrope", system-ui, sans-serif;
  color: #153244;
}

.dnfg-nav {
  position: absolute;
  top: 3.1%;
  left: 3.6%;
  right: 3.6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dnfg-logo {
  font-size: 1.5cqw;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dnfg-links {
  display: flex;
  align-items: center;
  gap: 1.45cqw;
  font-size: 1.17cqw;
  font-weight: 600;
}

.dnfg-navbtn {
  background: #153244;
  color: #fff;
  padding: 0.62cqw 1.15cqw;
  border-radius: 0.47cqw;
}

.dnfg-copy {
  position: absolute;
  left: 7%;
  top: 13.2%;
  width: 46%;
}

.dnfg-eyebrow {
  margin: 0 0 1.9cqw;
  font-size: 0.94cqw;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a6732;
  line-height: 1.45;
}

.dnfg-head {
  margin: 0;
  font-size: 4.69cqw;
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.005em;
}

.dnfg-head em {
  font-style: italic;
  font-weight: 400;
  color: #4a6272;
}

.dnfg-sub {
  margin: 2.5cqw 0 0;
  width: 29.3cqw;
  font-size: 1.29cqw;
  font-weight: 400;
  line-height: 1.52;
}

.dnfg-cta {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 2.7cqw;
}

.dnfg-btn {
  background: #153244;
  color: #fff;
  font-size: 1.17cqw;
  font-weight: 500;
  padding: 1.1cqw 2.2cqw;
  border-radius: 0.47cqw;
}

.dnfg-link {
  color: #8a6732;
  font-size: 1.17cqw;
  font-weight: 500;
}

.dnfg-trust {
  position: absolute;
  left: 9.2%;
  bottom: 9%;
  display: flex;
  gap: 3.1cqw;
  font-size: 1.02cqw;
  font-weight: 500;
}

.dnfg-trust span {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  max-width: 13cqw;
}

.dnfg-trust i {
  width: 0.85cqw;
  height: 0.85cqw;
  border-radius: 50%;
  background: #8a6732;
  flex: none;
}

/* Tablet/mobile show real per-device screenshots (swapped in JS), so the
   desktop-sized slab video and text overlay step aside; the portrait video
   (below) animates the hero's field band on those breakpoints instead. */
.browser-preview--ba[data-device="tablet"] .ba-compare__video--slab,
.browser-preview--ba[data-device="tablet"] .ba-compare__hero-fg,
.browser-preview--ba[data-device="mobile"] .ba-compare__video--slab,
.browser-preview--ba[data-device="mobile"] .ba-compare__hero-fg {
  display: none;
}

/* Portrait hero video: shown only on tablet/mobile, overlaid 1:1 on the static
   screenshot's hero, then clipped to reveal only the field band (the strip
   between the CTA and the Alignment Book, where there is no text). Top/height/
   clip are per-device because each breakpoint's screenshot has its own geometry. */
.ba-compare__video--portrait {
  display: none;
  aspect-ratio: auto;
}

.browser-preview--ba[data-device="mobile"] .ba-compare__video--portrait,
.browser-preview--ba[data-device="tablet"] .ba-compare__video--portrait {
  display: block;
}

.browser-preview--ba[data-device="mobile"] .ba-compare__video--portrait {
  top: 0.1%;
  height: 6.94%;
  clip-path: inset(37% 0 49.8% var(--ba-pos, 50%));
}

.browser-preview--ba[data-device="tablet"] .ba-compare__video--portrait {
  top: 0;
  height: 9.79%;
  clip-path: inset(37.4% 0 49.1% var(--ba-pos, 50%));
}

/* Healing Journey's live hero video is the scenic right-side panel behind the
   already-captured page text. Keep it below the before image so the divider
   mask reveals/hides it naturally without covering the rebuilt site's copy. */
.ba-compare__video--thj-trees {
  top: 1.249%;
  right: 0;
  left: auto;
  z-index: 1;
  width: 56.315%;
  height: 10.41%;
  aspect-ratio: auto;
  object-fit: fill;
  object-position: top right;
  /* The source video begins at y=96 while the nav CTA ends at y=112. Crop the
     16px overlap from the video (2% of its 800px source box) so it cannot paint
     over the CTA's lower corners; the screenshot remains visible in that strip. */
  -webkit-clip-path: inset(2% 0 0 0);
  clip-path: inset(2% 0 0 0);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.55) 30%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.55) 30%, #000 42%);
}

.ba-compare__tags {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 0;
  pointer-events: none;
}

.ba-compare__tag {
  position: absolute;
  top: 14px;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(247, 240, 229, 0.2);
  color: var(--ink);
  background: rgba(15, 18, 16, 0.72);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 180ms ease;
}

.ba-compare__tag--before {
  left: 14px;
}

.ba-compare__tag--after {
  right: 14px;
}

.ba-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos, 50%);
  z-index: 4;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(247, 240, 229, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.ba-compare__handle {
  position: absolute;
  top: 50%;
  left: var(--ba-pos, 50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}

.ba-compare__grip {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #141210;
  background: var(--copper-soft);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  transition: transform 160ms ease, background 160ms ease;
}

.ba-compare__handle:hover .ba-compare__grip,
.ba-compare__handle:focus-visible .ba-compare__grip {
  background: #f4d79b;
  transform: scale(1.06);
}

.ba-compare__handle:focus-visible {
  outline: none;
}

.ba-compare__handle:focus-visible .ba-compare__grip {
  box-shadow: 0 0 0 3px rgba(240, 201, 137, 0.5), 0 12px 28px rgba(0, 0, 0, 0.34);
}

.project-story {
  background: var(--paper);
  color: #141210;
}

.project-story .section-label > span {
  background: linear-gradient(90deg, rgba(20, 18, 16, 0.62), rgba(20, 18, 16, 0));
}

.project-story .section-label > span::before {
  border-color: rgba(20, 18, 16, 0.62);
}

.project-story .section-label p,
.project-story .eyebrow {
  color: rgba(20, 18, 16, 0.6);
}

.project-story__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.52fr);
  gap: clamp(34px, 7vw, 102px);
  align-items: end;
  margin-bottom: clamp(50px, 7vw, 92px);
}

.project-story__intro p {
  margin: 0;
  color: rgba(20, 18, 16, 0.72);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.7;
}

.project-chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(20, 18, 16, 0.14);
  border-left: 1px solid rgba(20, 18, 16, 0.14);
}

.project-chapter {
  min-height: 360px;
  border-right: 1px solid rgba(20, 18, 16, 0.14);
  border-bottom: 1px solid rgba(20, 18, 16, 0.14);
  padding: clamp(22px, 2.6vw, 34px);
}

.project-chapter__index,
.project-proof > span {
  color: rgba(20, 18, 16, 0.52);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-chapter__index {
  display: inline-block;
  color: #8f6125;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.project-chapter h3,
.project-proof h3 {
  min-height: 1.96em;
  margin: clamp(50px, 6vw, 86px) 0 0;
  font-family: var(--display);
  font-size: clamp(29px, 2.4vw, 44px);
  line-height: 0.98;
  letter-spacing: 0;
}

.project-chapter p,
.project-proof p {
  margin: 22px 0 0;
  color: rgba(20, 18, 16, 0.72);
  font-size: 15.5px;
  line-height: 1.66;
}

.project-build {
  background:
    radial-gradient(circle at 84% 12%, rgba(215, 168, 102, 0.16), transparent 30%),
    linear-gradient(180deg, #080a0a, #111614);
}

.project-results {
  display: grid;
  gap: clamp(30px, 4.5vw, 52px);
  background:
    radial-gradient(circle at 82% 14%, rgba(215, 168, 102, 0.14), transparent 32%),
    linear-gradient(180deg, #0b0d0c, #080a0a);
}

.project-results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.project-results__stat {
  border-top: 2px solid var(--line-strong);
  padding-top: 20px;
}

.project-results__stat strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(52px, 7vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--copper-soft);
}

.project-results__stat span {
  display: block;
  max-width: 30ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}

.project-results__cta {
  display: flex;
}

@media (max-width: 760px) {
  .project-results__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.project-page--companionwise .project-hero {
  background:
    radial-gradient(circle at 80% 16%, rgba(215, 168, 102, 0.16), transparent 30%),
    radial-gradient(circle at 18% 78%, rgba(105, 217, 199, 0.1), transparent 34%),
    linear-gradient(180deg, #080a0a 0%, #111514 100%);
}

.project-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.project-proof {
  --proof-hover-y: 0px;
  --reveal-y-visible: var(--proof-hover-y);
  position: relative;
  overflow: hidden;
  min-height: 330px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 2.8vw, 38px);
  background: rgba(247, 240, 229, 0.035);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--ease);
}

.project-proof::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 18% 12%, rgba(240, 201, 137, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(247, 240, 229, 0.06), rgba(247, 240, 229, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.project-proof > * {
  position: relative;
  z-index: 1;
}

.project-proof:is(:hover, :focus-within) {
  --proof-hover-y: -4px;
  border-color: var(--line-strong);
  background: rgba(247, 240, 229, 0.07);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
}

.project-proof:is(:hover, :focus-within)::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .project-proof:is(:hover, :focus-within) {
    --proof-hover-y: 0px;
  }
}

.project-proof > span {
  color: var(--copper-soft);
}

.project-proof h3 {
  color: var(--ink);
}

.project-proof p {
  color: var(--muted);
}

.project-gallery {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(215, 168, 102, 0.12), transparent 30%),
    linear-gradient(180deg, #111614, #080a0a);
}

.project-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}

.project-shot {
  --shot-hover-y: 0px;
  --reveal-y-visible: var(--shot-hover-y);
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid rgba(247, 240, 229, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(247, 240, 229, 0.04);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms var(--ease);
}

.project-shot--wide {
  grid-column: span 2;
}

.project-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 5px;
  object-fit: cover;
  object-position: center top;
  background: #efe4d3;
}

.project-shot span {
  display: grid;
  gap: 5px;
  padding: 0 4px 6px;
  color: rgba(247, 240, 229, 0.62);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.42;
}

.project-shot strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0;
}

.project-shot:hover,
.project-shot:focus-visible {
  --shot-hover-y: -5px;
  border-color: rgba(240, 201, 137, 0.34);
  background: rgba(247, 240, 229, 0.07);
}

.project-honesty {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(320px, 0.54fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  background: var(--paper);
  color: #141210;
}

.project-honesty .eyebrow {
  color: rgba(20, 18, 16, 0.58);
}

.project-honesty__copy {
  display: grid;
  gap: 18px;
}

.project-honesty__copy p {
  margin: 0;
  color: rgba(20, 18, 16, 0.72);
  font-size: clamp(16px, 1.22vw, 20px);
  line-height: 1.7;
}

.project-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.58fr) minmax(0, 0.82fr);
  gap: clamp(32px, 7vw, 102px);
  align-items: end;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 10, 10, 0.94), rgba(8, 10, 10, 0.62)),
    url("./assets/decidenorth-home-live-1920-v1.png") center top / cover;
}

.project-page--healing-journey .project-next {
  background: linear-gradient(180deg, #0b0d0c, #080a0a);
}

.project-next > :not(.project-next__media) {
  position: relative;
  z-index: 1;
}

.project-next__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.project-next__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(0.92) contrast(1.04) brightness(0.8);
}

.project-next__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 10, 0.94), rgba(8, 10, 10, 0.66));
}

.project-page--callcatch .project-hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(215, 168, 102, 0.2), transparent 30%),
    radial-gradient(circle at 14% 74%, rgba(71, 124, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #080a0f 0%, #11140f 100%);
}

.project-page--callcatch .project-viewer {
  background:
    radial-gradient(circle at 12% 10%, rgba(215, 168, 102, 0.1), transparent 30%),
    linear-gradient(180deg, #10140f, #080a0a);
}

.project-page--callcatch .project-next {
  background:
    linear-gradient(90deg, rgba(8, 10, 10, 0.94), rgba(8, 10, 10, 0.66)),
    url("./assets/callcatch-pro-demo-live-1920-v1.png") center top / cover;
}

.project-page--companionwise .project-next {
  background:
    linear-gradient(90deg, rgba(8, 10, 10, 0.94), rgba(8, 10, 10, 0.64)),
    url("./assets/companionwise-home-live-1728-v1.png") center top / cover;
}

.project-page--brown-sugar .project-next {
  background:
    linear-gradient(90deg, rgba(8, 10, 10, 0.94), rgba(8, 10, 10, 0.62)),
    url("./assets/authority-read-table-v1.png") center / cover;
}

.project-page--authority-graph .project-next {
  background:
    linear-gradient(90deg, rgba(8, 10, 10, 0.94), rgba(8, 10, 10, 0.66)),
    url("./assets/authority-read-table-v1.png") center / cover;
}

.project-next__links {
  display: grid;
  gap: 12px;
}

.project-next__card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  padding: clamp(18px, 2.4vw, 28px);
  background: rgba(8, 10, 10, 0.62);
  transition:
    background 220ms ease,
    transform 220ms var(--ease);
}

.project-next__card:hover,
.project-next__card:focus-visible {
  background: rgba(247, 240, 229, 0.08);
  transform: translateY(-3px);
}

.project-next__card span {
  color: var(--copper-soft);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-next__card strong {
  font-family: var(--display);
  font-size: clamp(28px, 2.8vw, 46px);
  line-height: 0.95;
  letter-spacing: 0;
}

.method {
  position: relative;
  overflow: hidden;
  background: #0d100f;
  border-top: 1px solid rgba(215, 168, 102, 0.16);
  isolation: isolate;
  transition: background 360ms ease;
}

.method.section-pad {
  padding-top: clamp(72px, 8vw, 118px);
  padding-bottom: clamp(72px, 8vw, 118px);
}

.method__media-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 360ms linear;
  pointer-events: none;
}

.method__media-stage::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(90deg, rgba(8, 10, 10, 0.94), rgba(8, 10, 10, 0.58) 40%, rgba(8, 10, 10, 0.28)),
    linear-gradient(0deg, rgba(8, 10, 10, 0.46), rgba(8, 10, 10, 0.1));
}

.method__media-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(0.9) contrast(1.04) brightness(0.86);
}

.method.is-media-active .method__media-stage {
  opacity: 0.82;
}

.method__header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) 1fr;
  gap: clamp(20px, 5vw, 80px);
  align-items: start;
}

.method__bridge {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: clamp(20px, 3vw, 32px) 0 0;
  color: rgba(247, 240, 229, 0.66);
  font-size: clamp(17px, 1.22vw, 20px);
  line-height: 1.5;
}

.method__steps {
  display: grid;
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: clamp(42px, 5vw, 74px);
  border-top: 1px solid var(--line);
}

.method-step {
  position: relative;
  z-index: 1;
  min-height: clamp(214px, 17vw, 238px);
  border-bottom: 1px solid var(--line);
  background: rgba(13, 16, 15, 0.76);
  transition: background 360ms ease;
}

.method.is-media-active .method-step {
  background: rgba(13, 16, 15, 0.18);
}

.method-step__link {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: inherit;
  grid-template-columns: 92px minmax(250px, 0.78fr) minmax(270px, 0.8fr);
  gap: clamp(18px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.6vw, 46px) 0;
}

.method-step__link::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, 1100px);
  height: calc(100% - 16px);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 7px rgba(247, 240, 229, 0.96);
  transition: opacity 680ms cubic-bezier(0.39, 0.575, 0.565, 1);
  pointer-events: none;
}

.method-step__link:is(:hover, :focus-visible)::before {
  opacity: 1;
  transition: none;
}

.method-step__number {
  color: var(--copper-soft);
  font-size: 12px;
  font-weight: 800;
}

.method-step h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 3.55vw, 58px);
  line-height: 0.95;
  letter-spacing: 0;
  text-wrap: balance;
}

.method-step__list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.method-step__list li {
  position: relative;
  padding-left: 20px;
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0;
}

.method-step__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "-";
  color: var(--copper-soft);
}

.read-band {
  position: relative;
  display: grid;
  min-height: 82svh;
  overflow: hidden;
  align-items: center;
  padding: clamp(86px, 12vw, 164px) clamp(20px, 6vw, 96px);
  background: #080a0a;
}

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

.read-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.42) saturate(1.06);
  transform: scale(1.02);
}

.read-band::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    radial-gradient(circle at 70% 45%, transparent 0 24%, rgba(8, 10, 10, 0.2) 46%, rgba(8, 10, 10, 0.78) 100%),
    linear-gradient(90deg, rgba(8, 10, 10, 0.92), rgba(8, 10, 10, 0.38) 56%, rgba(8, 10, 10, 0.78));
}

.read-band__content {
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
}

.read-band__content p:not(.eyebrow) {
  max-width: 660px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.65;
}

.read-summary {
  display: grid;
  width: min(660px, 100%);
  gap: 12px;
  margin-top: 28px;
  border: 1px solid rgba(247, 240, 229, 0.16);
  background: rgba(8, 10, 10, 0.52);
  box-shadow: inset 0 1px 0 rgba(247, 240, 229, 0.08);
  padding: clamp(18px, 2.4vw, 24px);
}

.read-summary p {
  max-width: none !important;
  margin: 0 !important;
  color: rgba(247, 240, 229, 0.7) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.read-summary strong {
  color: var(--ink);
  font-weight: 850;
}

.read-form {
  position: relative;
  z-index: 2;
  width: min(660px, 100%);
  margin-top: 38px;
}

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

.read-form__field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  max-width: none;
}

.read-form__field--full {
  grid-column: 1 / -1;
}

.read-form__field label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.read-form__optional {
  font-weight: 500;
  opacity: 0.55;
}

.read-form__field input,
.read-form__field textarea {
  min-height: 50px;
  width: 100%;
  border: 1px solid var(--line);
  padding: 13px 15px;
  background: var(--panel-soft);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  transition:
    border-color 220ms ease,
    background 220ms ease;
}

.read-form__field textarea {
  min-height: 110px;
  resize: vertical;
}

.read-form__field input::placeholder,
.read-form__field textarea::placeholder {
  color: var(--soft);
}

.read-form__field input:hover,
.read-form__field textarea:hover {
  border-color: var(--line-strong);
}

.read-form__field input:focus-visible,
.read-form__field textarea:focus-visible {
  border-color: var(--copper);
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  background: rgba(247, 240, 229, 0.08);
}

.read-form__submit {
  margin-top: 24px;
}

.read-form__submit .button {
  min-width: 240px;
}

.read-form__submit .button:disabled {
  cursor: progress;
  opacity: 0.62;
  transform: none;
}

.read-form__status {
  margin: 16px 0 0 !important;
  min-height: 1.2em;
  max-width: 540px !important;
  color: var(--copper-soft) !important;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.55 !important;
}

.read-form__status[data-state="error"] {
  color: var(--rust) !important;
}

.read-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.read-form__alt {
  position: relative;
  z-index: 2;
  margin: 22px 0 0 !important;
  color: var(--muted) !important;
  font-size: 15px !important;
  font-weight: 600;
}

.read-form__alt a {
  color: var(--copper-soft);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition:
    color 220ms ease,
    border-color 220ms ease;
}

.read-form__alt a:hover {
  color: var(--copper);
  border-color: var(--copper);
}

.read-form__alt a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .read-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .read-form__submit .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .read-form__field input,
  .read-form__field textarea,
  .read-form__alt a {
    transition: none;
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid var(--line);
  padding: 30px clamp(20px, 5vw, 76px);
  background: #080a0a;
  color: rgba(247, 240, 229, 0.64);
  font-size: 13px;
}

.footer p {
  margin: 0;
}

.footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer a {
  transition: color 180ms ease;
}

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

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2100;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

.cursor__dot,
.cursor__follower,
.cursor__label {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}

.cursor__dot,
.cursor__follower {
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor__dot {
  width: 6px;
  height: 6px;
  background: rgba(247, 240, 229, 0.94);
  box-shadow: 0 0 18px rgba(240, 201, 137, 0.36);
  transition:
    background 180ms ease,
    box-shadow 180ms ease;
}

.cursor__follower {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(240, 201, 137, 0.26);
  opacity: 0.72;
  transform: translate(-50%, -50%) scale(0.56);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    opacity 220ms ease,
    transform 260ms var(--ease);
}

.cursor__label {
  opacity: 0;
  color: #11100d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
}

.cursor.is-active .cursor__follower {
  border-color: rgba(240, 201, 137, 0.48);
  background: rgba(240, 201, 137, 0.08);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.22);
}

.cursor.is-on-light .cursor__dot {
  background: rgba(8, 10, 10, 0.9);
  box-shadow: 0 0 18px rgba(8, 10, 10, 0.14);
}

.cursor.is-on-light .cursor__follower {
  border-color: rgba(8, 10, 10, 0.28);
  background: rgba(8, 10, 10, 0.035);
  opacity: 0.82;
}

.cursor.is-discover .cursor__follower {
  border-color: rgba(247, 240, 229, 0.34);
  background: rgba(247, 240, 229, 0.84);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.74);
}

.cursor.is-method .cursor__follower {
  border-color: rgba(240, 201, 137, 0.44);
  background: rgba(247, 240, 229, 0.08);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.34);
}

.cursor.is-discover .cursor__label {
  opacity: 1;
}

.reveal-up {
  opacity: 0;
  transform: translateY(var(--reveal-y, 28px));
  transition:
    opacity 720ms ease,
    transform 720ms var(--ease);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(var(--reveal-y-visible, 0px));
}

.case-row {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 760ms ease,
    transform 760ms var(--ease);
}

.case-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-motion .work-project:not(.is-visible) {
  --project-reveal-y: 42px;
  opacity: 0.01;
}

.word-reveal,
.word-reveal-parent {
  min-width: 0;
}

.word-reveal .word {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  html.word-reveal-ready .word-reveal .word {
    opacity: 0;
    transform: translateY(0.52em);
    transition:
      opacity 620ms ease,
      transform 720ms var(--ease);
    transition-delay: calc(var(--word-index, 0) * var(--word-stagger, 20ms));
    will-change: opacity, transform;
  }

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

  html.word-reveal-page-replay .word-reveal .word {
    transition:
      opacity 860ms ease,
      transform 980ms var(--ease);
    transition-delay: calc(var(--word-index, 0) * 42ms);
  }

  html.word-reveal-page-replay .hero__lede.word-reveal .word,
  html.word-reveal-page-replay .manifesto__copy .word-reveal .word,
  html.word-reveal-page-replay .case-row__copy p.word-reveal .word,
  html.word-reveal-page-replay .read-band__content p.word-reveal .word {
    transition-delay: calc((var(--word-index, 0) * 22ms) + 260ms);
  }
}

.button,
.scroll-cue,
.authority-orb,
.menu-toggle,
.brand-mark,
.site-menu__link,
.build-item,
.case-row__media,
.method-step__link,
.project-back,
.browser-preview__tools button,
.browser-preview__notice a,
.project-next__card {
  outline-offset: 6px;
}

.button:focus-visible,
.scroll-cue:focus-visible,
.authority-orb:focus-visible,
.menu-toggle:focus-visible,
.brand-mark:focus-visible,
.site-menu__link:focus-visible,
.build-item:focus-visible,
.work-card:focus-visible,
.work-hero__tile:focus-visible,
.case-row__media:focus-visible,
.method-step__link:focus-visible,
.project-back:focus-visible,
.browser-preview__tools button:focus-visible,
.browser-preview__notice a:focus-visible,
.project-next__card:focus-visible {
  outline: 2px solid var(--blue);
}

.voice-concierge__launcher,
.voice-concierge__close,
.voice-concierge__tab,
.voice-concierge__link {
  outline-offset: 5px;
}

.button:focus-visible,
.scroll-cue:focus-visible,
.authority-orb:focus-visible,
.menu-toggle:focus-visible,
.brand-mark:focus-visible,
.site-menu__link:focus-visible,
.build-item:focus-visible,
.case-row__media:focus-visible,
.method-step__link:focus-visible,
.voice-concierge__launcher:focus-visible,
.voice-concierge__close:focus-visible,
.voice-concierge__tab:focus-visible,
.voice-concierge__link:focus-visible {
  outline: 2px solid var(--blue);
}

.voice-concierge {
  position: fixed;
  right: clamp(16px, 2.2vw, 30px);
  bottom: clamp(16px, 2.2vw, 30px);
  z-index: 2400;
  color: var(--ink);
  font-family: var(--body);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Reveal-gated: stays tucked off-screen until JS adds .read-desk-in at ~25% scroll. */
.voice-concierge[data-voice-concierge]:not(.read-desk-in) {
  opacity: 0;
  transform: translateY(165%);
  pointer-events: none;
}

.voice-concierge[hidden],
.voice-concierge [hidden] {
  display: none !important;
}

.voice-concierge__launcher {
  display: inline-flex;
  width: min(100%, 300px);
  min-height: 76px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  padding: 0 24px 0 106px;
  background: url("/assets/voice-concierge/read-desk/read-desk-launcher-v2.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: var(--copper-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  transition:
    transform 220ms var(--ease),
    border-color 220ms ease,
    background 220ms ease;
}

.voice-concierge__wave {
  display: none;
}

.voice-concierge__wave::before,
.voice-concierge__wave::after {
  position: absolute;
  inset: 0;
  content: "";
}

.voice-concierge__wave::before {
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 201, 137, 0.9), transparent);
  transform: translateY(-50%);
}

.voice-concierge__wave::after {
  background:
    linear-gradient(90deg,
      transparent 0 6%,
      rgba(240, 201, 137, 0.22) 6% 8%,
      transparent 8% 13%,
      rgba(240, 201, 137, 0.62) 13% 15%,
      transparent 15% 21%,
      rgba(247, 240, 229, 0.78) 21% 23%,
      transparent 23% 30%,
      rgba(240, 201, 137, 0.36) 30% 32%,
      transparent 32% 39%,
      rgba(240, 201, 137, 0.86) 39% 41%,
      transparent 41% 49%,
      rgba(247, 240, 229, 0.66) 49% 51%,
      transparent 51% 60%,
      rgba(240, 201, 137, 0.46) 60% 62%,
      transparent 62% 70%,
      rgba(240, 201, 137, 0.8) 70% 72%,
      transparent 72% 82%,
      rgba(247, 240, 229, 0.5) 82% 84%,
      transparent 84% 100%);
  clip-path: polygon(0 48%, 6% 48%, 7% 35%, 8% 60%, 13% 60%, 14% 20%, 15% 78%, 21% 78%, 22% 5%, 23% 92%, 30% 92%, 31% 36%, 32% 64%, 39% 64%, 40% 12%, 41% 88%, 49% 88%, 50% 25%, 51% 75%, 60% 75%, 61% 38%, 62% 62%, 70% 62%, 71% 18%, 72% 82%, 82% 82%, 83% 32%, 84% 68%, 100% 68%, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 8px rgba(240, 201, 137, 0.44));
}

.voice-concierge__launcher:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.voice-concierge__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  display: grid;
  width: min(94vw, 560px);
  max-height: min(82svh, 760px);
  overflow: hidden;
  border: 1px solid rgba(240, 201, 137, 0.5);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(240, 201, 137, 0.2), rgba(240, 201, 137, 0.02) 9px, transparent 9px),
    linear-gradient(90deg, rgba(247, 240, 229, 0.04), transparent 22%, transparent 78%, rgba(247, 240, 229, 0.035)),
    #080a09;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(247, 240, 229, 0.12);
  backdrop-filter: blur(22px);
}

/* The dialog receives initial focus on open (its name is announced via
   aria-labelledby), so it needs no visible ring — keyboard users still get
   one when they Tab to the controls inside. */
.voice-concierge__panel:focus {
  outline: none;
}

.voice-concierge[data-vc-active="talk"] .voice-concierge__panel,
.voice-concierge[data-vc-active="book"] .voice-concierge__panel {
  height: min(82svh, 594px);
  background:
    url("/assets/voice-concierge/read-desk/read-desk-top-shell-v1.png") top center / 100% 170px no-repeat,
    #070807;
}

.voice-concierge[data-vc-active="talk"] .voice-concierge__panel::before,
.voice-concierge[data-vc-active="talk"] .voice-concierge__panel::after,
.voice-concierge[data-vc-active="book"] .voice-concierge__panel::before,
.voice-concierge[data-vc-active="book"] .voice-concierge__panel::after {
  display: none;
}

.voice-concierge__panel::before,
.voice-concierge__panel::after {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.voice-concierge__panel::before {
  top: 0;
  height: 8px;
  background: linear-gradient(90deg, #6b4a28, #f2d08a 34%, #fff0b7 50%, #9d6d35);
  box-shadow: 0 2px 18px rgba(240, 201, 137, 0.22);
}

.voice-concierge__panel::after {
  bottom: 0;
  height: 22px;
  background:
    radial-gradient(42px 13px at 50% 1px, rgba(255, 215, 143, 0.72), rgba(123, 77, 35, 0.55) 58%, transparent 62%),
    linear-gradient(180deg, rgba(247, 240, 229, 0.06), rgba(0, 0, 0, 0.2)),
    #0b0c0b;
  box-shadow: inset 0 1px 0 rgba(240, 201, 137, 0.34);
}

.voice-concierge__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 20px;
  border-bottom: 1px solid rgba(240, 201, 137, 0.12);
}

.voice-concierge__brand {
  margin: 0 0 6px;
  color: rgba(240, 201, 137, 0.82);
  font-family: var(--body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.voice-concierge__title {
  margin: 0;
  color: var(--paper);
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
}

.voice-concierge__close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(247, 240, 229, 0.16);
  border-radius: 999px;
  background: rgba(247, 240, 229, 0.04);
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.voice-concierge__close:hover {
  border-color: rgba(240, 201, 137, 0.48);
  background: rgba(247, 240, 229, 0.1);
  transform: rotate(3deg);
}

.voice-concierge__tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-top: 1px solid rgba(247, 240, 229, 0.07);
  border-bottom: 1px solid rgba(240, 201, 137, 0.16);
  padding: 0 12px;
  background: #0e0f0e;
}

.voice-concierge__tab {
  position: relative;
  min-height: 58px;
  border: 0;
  border-left: 1px solid rgba(247, 240, 229, 0.06);
  border-radius: 0;
  background: rgba(247, 240, 229, 0.02);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.voice-concierge__tab:last-child {
  border-right: 1px solid rgba(247, 240, 229, 0.06);
}

.voice-concierge__tab::after {
  position: absolute;
  left: 36%;
  right: 36%;
  bottom: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: transparent;
  content: "";
  transition:
    left 180ms ease,
    right 180ms ease,
    background 180ms ease;
}

.voice-concierge__tab[aria-selected="true"] {
  background: rgba(247, 240, 229, 0.04);
  color: var(--ink);
}

.voice-concierge__tab[aria-selected="true"]::after {
  left: 38%;
  right: 38%;
  background: linear-gradient(90deg, rgba(186, 120, 50, 0.9), rgba(255, 217, 142, 0.95));
}

.voice-concierge__view {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  min-height: 370px;
  max-height: calc(min(82svh, 760px) - 172px);
  overflow: auto;
  padding: 18px;
  scrollbar-color: rgba(240, 201, 137, 0.42) rgba(247, 240, 229, 0.08);
}

#vc-panel-talk {
  position: relative;
  display: block;
  height: 400px;
  min-height: 0;
  max-height: none;
  margin: 0 29px 34px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: url("/assets/voice-concierge/read-desk/read-desk-paper-v2.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #17120d;
}

#vc-panel-talk::before {
  display: none;
}

#vc-panel-book {
  display: grid;
  height: 400px;
  min-height: 0;
  max-height: none;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0 29px 34px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 44px 48px 30px;
  background: url("/assets/voice-concierge/read-desk/read-desk-paper-v2.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #17120d;
}

#vc-panel-book .voice-concierge__link {
  min-height: 32px;
  border-bottom-color: rgba(159, 103, 39, 0.48);
  color: #8f602c;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#vc-panel-book .voice-concierge__link:hover {
  border-color: #17120d;
  color: #17120d;
}

.voice-concierge__lede {
  position: absolute;
  top: 17%;
  left: 50%;
  width: min(72%, 9.2em);
  margin: 0 auto;
  color: #19130e;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.98;
  text-align: center;
  transform: translateX(-50%);
}

.voice-concierge__signature {
  position: absolute;
  top: 40%;
  left: 14%;
  display: block;
  width: 72%;
  height: 10%;
  pointer-events: none;
}

.voice-concierge__signature::before,
.voice-concierge__signature::after {
  display: none;
}

.voice-concierge__hint {
  position: absolute;
  top: 53%;
  left: 18%;
  right: 18%;
  margin: 0;
  color: rgba(23, 18, 13, 0.68);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.voice-concierge__status {
  position: absolute;
  top: 63.1%;
  left: 14%;
  right: 14%;
  display: flex;
  height: 8%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  padding: 0 22px;
  background: transparent;
  color: #9a6a31;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.voice-concierge__status::before {
  display: none;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  vertical-align: 1px;
}

.voice-concierge__status[data-state="error"] {
  border-color: rgba(185, 99, 74, 0.42);
  color: #833a28;
}

.voice-concierge__status[data-state="live"] {
  border-color: rgba(82, 116, 80, 0.34);
  color: #264f32;
}

.voice-concierge__talk,
.voice-concierge__stop {
  position: absolute;
  top: 72.8%;
  left: 14%;
  display: flex;
  width: 72%;
  height: 11.7%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  padding: 0 54px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.voice-concierge__talk {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--copper-soft);
}

.voice-concierge__talk::after {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 12px;
  height: 18px;
  border: 2px solid var(--copper-soft);
  border-radius: 999px;
  content: "";
  transform: translateY(-58%);
}

.voice-concierge__talk::before {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 18px;
  height: 14px;
  border-bottom: 2px solid var(--copper-soft);
  border-radius: 0 0 999px 999px;
  content: "";
  transform: translateY(-18%);
}

.voice-concierge__stop {
  border-color: rgba(20, 16, 12, 0.22);
  background: rgba(20, 16, 12, 0.08);
  color: #17120d;
}

.voice-concierge__talk[disabled],
.voice-concierge__stop[disabled] {
  cursor: progress;
  opacity: 0.62;
  transform: none;
}

.voice-concierge__transcript {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 8%;
  display: grid;
  gap: 10px;
  max-height: 118px;
  overflow: auto;
  border-top: 1px solid rgba(159, 103, 39, 0.18);
  padding-top: 12px;
  background: rgba(242, 231, 211, 0.9);
}

.voice-concierge__turn {
  margin: 0;
  border-left: 2px solid rgba(159, 103, 39, 0.42);
  padding-left: 10px;
  color: rgba(23, 18, 13, 0.7);
  font-size: 13px;
  line-height: 1.5;
}

.voice-concierge__turn strong {
  display: block;
  margin-bottom: 2px;
  color: #17120d;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Resting poster: "Leave a message" toggle (where the old type fallback sat) ── */
.voice-concierge__message {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 6%;
}

.voice-concierge__message-toggle {
  width: 100%;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: #8f602c;
  cursor: pointer;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 32px;
  text-align: center;
  text-transform: uppercase;
}

.voice-concierge__message-toggle::after {
  margin-left: 10px;
  content: "→";
}

.voice-concierge__message-toggle[aria-expanded="true"]::after {
  content: "↓";
}

/* Live pulse — hidden on the resting poster, shown on the working surface */
.voice-concierge__livehead {
  display: none;
  align-items: center;
}

.voice-concierge__pulse {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--copper-soft);
  box-shadow: 0 0 14px rgba(240, 201, 137, 0.55);
}

/* ════════ Read Desk working surface (call active / compose / ended) ════════ */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) #vc-panel-talk {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "pulse   status"
    "trans   trans"
    "control control"
    "msg     msg";
  align-content: start;
  gap: 10px 12px;
  padding: 20px 22px 22px;
  overflow: hidden;
  color: var(--ink);
  /* warm dark surface — NOT the paper image: read-desk-paper-v1.png has the
     resting poster's light status-plate baked in, which bled through the dim
     as a pale box behind the controls once a call started. */
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(46, 34, 20, 0.55), rgba(12, 11, 9, 0) 62%),
    linear-gradient(180deg, #0c0b09, #070706);
  transition: background 220ms ease;
}

/* during an actual call the transcript becomes the dominant, space-filling row */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"]) #vc-panel-talk {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

/* hide the resting-poster copy while the working surface is up */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) :is(.voice-concierge__lede, .voice-concierge__signature, .voice-concierge__hint) {
  display: none;
}

.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) #vc-panel-talk > *:not([hidden]) {
  animation: vc-surface-in 220ms ease both;
}

/* live header row */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__livehead {
  display: flex;
  grid-area: pulse;
  align-self: center;
}

.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"]) .voice-concierge__pulse {
  animation: vc-pulse 1.7s ease-out infinite;
}

/* status moves beside the pulse */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__status {
  position: static;
  inset: auto;
  grid-area: status;
  height: auto;
  align-self: center;
  justify-content: flex-start;
  padding: 0;
  color: rgba(247, 240, 229, 0.9);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: left;
}

.voice-concierge:is([data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__status {
  color: rgba(247, 240, 229, 0.7);
}

/* transcript becomes the dominant scroll region */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__transcript {
  position: static;
  inset: auto;
  grid-area: trans;
  height: auto;
  max-height: none;
  padding: 12px 14px;
  border: 1px solid rgba(240, 201, 137, 0.22);
  border-radius: 6px;
  background: rgba(6, 8, 7, 0.5);
}

.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__turn {
  color: rgba(247, 240, 229, 0.74);
  border-left-color: rgba(240, 201, 137, 0.5);
}

.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__turn strong {
  color: var(--paper);
}

/* controls row — whichever of talk/stop is visible */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) :is(.voice-concierge__talk, .voice-concierge__stop) {
  position: relative;
  inset: auto;
  grid-area: control;
  width: 100%;
  height: auto;
  min-height: 46px;
  transform: none;
}

/* the End-read control is dark-on-paper by default; lift it onto the dimmed surface */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__stop {
  border: 1px solid rgba(240, 201, 137, 0.42);
  background: rgba(240, 201, 137, 0.08);
  color: var(--paper);
}

.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__stop:hover {
  background: rgba(240, 201, 137, 0.16);
}

/* message box becomes the bottom row */
.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__message {
  position: static;
  inset: auto;
  grid-area: msg;
}

.voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) .voice-concierge__message-toggle {
  color: var(--copper-soft);
}

/* the inline message form */
.voice-concierge__message-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.voice-concierge__field {
  display: grid;
  gap: 4px;
}

.voice-concierge__field-label {
  color: rgba(240, 201, 137, 0.78);
  font-family: var(--body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.voice-concierge__field-input {
  width: 100%;
  border: 1px solid rgba(240, 201, 137, 0.28);
  border-radius: 5px;
  padding: 9px 11px;
  background: rgba(6, 8, 7, 0.55);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

.voice-concierge__field-input::placeholder {
  color: rgba(247, 240, 229, 0.4);
}

.voice-concierge__field-input:focus-visible {
  outline: 2px solid var(--copper-soft);
  outline-offset: 1px;
  border-color: var(--copper-soft);
}

.voice-concierge__message-send {
  width: 100%;
  min-height: 44px;
}

.voice-concierge__message-feedback {
  margin: 2px 0 0;
  color: rgba(247, 240, 229, 0.78);
  font-size: 12px;
  line-height: 1.4;
}

.voice-concierge__message-feedback[data-state="live"] {
  color: #9bd3a8;
}

.voice-concierge__message-feedback[data-state="error"] {
  color: #e7a892;
}

/* after a successful send, keep only the thank-you line */
.voice-concierge__message[data-sent="true"] .voice-concierge__field,
.voice-concierge__message[data-sent="true"] .voice-concierge__message-send {
  display: none;
}

@keyframes vc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 201, 137, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(240, 201, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 201, 137, 0); }
}

@keyframes vc-surface-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-concierge__pulse { animation: none !important; }
  .voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) #vc-panel-talk > * { animation: none !important; }
  .voice-concierge:is([data-vc-call="connecting"], [data-vc-call="live"], [data-vc-call="ended"], [data-vc-call="compose"]) #vc-panel-talk { transition: none; }
}

.voice-concierge__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(159, 103, 39, 0.54);
  color: #765028;
  font-size: 14px;
  font-weight: 800;
}

.voice-concierge__link:hover {
  color: var(--paper);
  border-color: var(--paper);
}

.voice-concierge__cal {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(159, 103, 39, 0.38);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(23, 18, 13, 0.06), transparent 28%),
    #141210;
  box-shadow:
    0 12px 26px rgba(23, 18, 13, 0.18),
    inset 0 1px 0 rgba(247, 240, 229, 0.08);
}

.voice-concierge__cal iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 220ms ease;
}

.voice-concierge__cal[data-loaded="true"] iframe {
  opacity: 1;
}

.voice-concierge__cal-loading {
  margin: 0;
  color: #8f602c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.voice-concierge__cal[data-loaded="true"] .voice-concierge__cal-loading {
  opacity: 0;
}

@media (max-width: 1180px) {
  .build-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .build-item {
    min-height: 250px;
  }

  .build-item:last-child {
    grid-column: 1 / -1;
  }

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

  .project-chapters,
  .project-proof-grid,
  .project-shot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .side-tagline {
    display: none;
  }

  .site-menu__inner {
    grid-template-columns: 1fr;
    align-content: center;
  }

  .site-menu__meta {
    max-width: 620px;
  }

  .site-menu__nav {
    justify-self: start;
    width: min(100%, 620px);
  }

  .site-menu__group-label {
    display: none;
  }

  .site-menu__link {
    font-size: clamp(34px, 7vw, 58px);
  }

  .menu-card-stack {
    left: auto;
    right: 0;
    width: min(34vw, 290px);
    transform: translateY(-50%);
    opacity: 0.76;
  }

  .hero__content {
    width: min(690px, calc(100% - 40px));
    margin-left: clamp(20px, 5vw, 52px);
  }

  .word-switcher {
    display: block;
    width: min(100%, 5.6em);
  }

  .word-switcher__track {
    transform: translateY(0.07em);
  }

  .authority-orb {
    right: clamp(20px, 5vw, 48px);
    top: auto;
    bottom: clamp(92px, 10vh, 132px);
    width: 112px;
    transform: none;
  }

  .manifesto__grid,
  .about__grid,
  .about-hero,
  .about-story__grid,
  .work-hero,
  .project-hero,
  .project-viewer__head,
  .project-story__intro,
  .work-section-head,
  .project-honesty,
  .project-next,
  .work-standard,
  .proof__intro,
  .method__header,
  .case-row,
  .case-row--reverse {
    grid-template-columns: 1fr;
  }

  .case-row--reverse .case-row__media {
    order: 0;
  }

  .case-row__copy dl {
    max-width: 620px;
  }

  .work-hero {
    min-height: auto;
    align-items: start;
  }

  .work-hero__wall {
    transform: none;
  }

  .work-hero__wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work-hero__tile,
  .work-hero__tile:first-child {
    height: 180px;
  }

  .work-card {
    min-height: 360px;
  }

  .work-project-wall {
    gap: 86px 28px;
  }

  .work-filter-strip {
    width: 100%;
  }

  .work-project-wall > :nth-child(even) {
    --project-stagger-y: -42px;
  }

  .work-project__meta {
    grid-template-columns: 1fr;
  }

  .principle-card {
    min-height: 300px;
  }

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

  .project-proof-grid {
    grid-template-columns: 1fr;
  }

  .project-shot-grid {
    grid-template-columns: 1fr;
  }

  .project-shot--wide {
    grid-column: auto;
  }

  .project-proof {
    min-height: 260px;
  }

  .project-proof h3 {
    min-height: auto;
  }

  .diagnostic-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .diagnostic-groups {
    display: block;
  }

  .diagnostic-group__label {
    display: block;
  }

  .diagnostic-group__label::before,
  .diagnostic-group__label::after {
    display: none;
  }

  .diagnostic-group__label__q {
    display: inline;
  }

  .diagnostic-strip--quad,
  .diagnostic-strip--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
  }

  .diagnostic-group__label--vis {
    text-align: left;
  }

  .diagnostic-group__label--conv {
    margin-top: clamp(32px, 4.5vw, 64px);
    text-align: left;
  }

  .method-step {
    min-height: 300px;
  }

  .method-step__link {
    grid-template-columns: 72px 1fr;
    gap: 20px 30px;
  }

  .method-step__list {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding: 18px;
  }

  .brand-mark {
    width: clamp(136px, 42vw, 178px);
  }

  .menu-toggle {
    min-height: 48px;
    gap: 12px;
    padding: 10px 0 10px 16px;
  }

  .menu-toggle__label {
    width: 58px;
    font-size: 13px;
  }

  .site-menu__inner {
    padding: 92px 18px 28px;
    justify-content: start;
    gap: 20px;
  }

  .site-menu__nav {
    gap: 1px;
  }

  .site-menu__link {
    width: 100%;
    color: rgba(247, 240, 229, 0.68);
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.14;
  }

  .site-menu__meta p {
    font-size: 13px;
  }

  .about__facts {
    grid-template-columns: 1fr;
  }

  .about-hero {
    min-height: auto;
  }

  .project-hero {
    min-height: auto;
  }

  .menu-card-stack {
    display: none;
  }

  .cursor {
    display: none;
  }

  .hero {
    min-height: 185svh;
  }

  .hero__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
  }

  .hero__canvas {
    display: none;
  }

  .hero__fallback {
    display: none;
  }

  .hero__mobile-bridge {
    display: block;
  }

  .hero__mobile-bridge {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
  }

  .hero__shade {
    background:
      linear-gradient(180deg, rgba(7, 9, 9, 0.42) 0%, rgba(7, 9, 9, 0.46) 30%, rgba(7, 9, 9, 0.28) 58%, rgba(7, 9, 9, 0.14) 76%, rgba(7, 9, 9, 0.36) 100%);
  }

  .hero__content {
    min-height: 100svh;
    padding: 112px 0 150px;
    justify-content: flex-start;
  }

  .hero h1 {
    font-size: clamp(34px, 10.4vw, 48px);
    line-height: 1;
    text-shadow: 0 1px 26px rgba(4, 6, 6, 0.62);
  }

  .hero__lede {
    text-shadow: 0 1px 20px rgba(4, 6, 6, 0.58);
  }

  .word-switcher {
    display: block;
    width: min(100%, 5.6em);
    min-width: 0;
    max-width: 100%;
  }

  .hero__lede {
    font-size: 16px;
  }

  .button {
    width: 100%;
  }

  /* Orb stays hidden on mobile: the fixed "Ask the Read Desk" voice bar already
     owns the bottom-right and is itself a prominent Read CTA, so a floating orb
     here both collides with it and duplicates the primary button. */
  .authority-orb,
  .scroll-cue {
    display: none;
  }

  .hero__cta-note {
    margin-top: 14px;
  }

  .section-pad {
    padding: 76px 18px;
  }

  .display {
    font-size: clamp(38px, 12vw, 62px);
  }

  .diagnostic-strip,
  .build-list,
  .work-grid,
  .work-hero__wall {
    grid-template-columns: 1fr;
  }

  .work-hero {
    min-height: auto;
  }

  .work-hero__wall {
    display: none;
  }

  .about-hero.section-pad {
    padding-top: 112px;
  }

  .work-hero.section-pad {
    padding-top: 112px;
  }

  .project-hero.section-pad {
    padding-top: 112px;
  }

  .about-hero__lede p,
  .work-hero__lede,
  .project-hero__lede,
  .project-story__intro p,
  .work-section-head > p:last-child,
  .project-honesty__copy p,
  .work-standard__copy p,
  .work-cta p {
    font-size: 16px;
  }

  .about-hero .display,
  .work-hero .display,
  .project-hero .display {
    font-size: clamp(38px, 10.4vw, 50px);
    line-height: 0.96;
  }

  .principle-grid {
    grid-template-columns: 1fr;
  }

  .project-chapters,
  .project-proof-grid {
    grid-template-columns: 1fr;
  }

  .project-chapter,
  .project-proof {
    min-height: auto;
  }

  .project-chapter h3,
  .project-proof h3 {
    min-height: auto;
    margin-top: 44px;
  }

  .principle-card {
    min-height: auto;
  }

  .principle-card h3 {
    margin-top: 44px;
    font-size: clamp(28px, 9vw, 38px);
  }

  .work-hero__tile,
  .work-hero__tile:first-child {
    height: 208px;
  }

  .work-card {
    min-height: auto;
  }

  .work-project-wall {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .work-project-wall > :nth-child(even) {
    --project-stagger-y: 0px;
  }

  .work-filter-strip {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 44px;
  }

  .work-project__media {
    aspect-ratio: 1.18 / 1;
  }

  .work-project--wide .work-project__media {
    aspect-ratio: 1.745 / 1;
  }

  .work-project--screenshot .work-project__media {
    aspect-ratio: var(--project-media-ratio, 1.6 / 1);
  }

  .work-project__body strong {
    font-size: clamp(34px, 10vw, 48px);
  }

  .work-card h3 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .work-card dl {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .work-standard {
    gap: 26px;
  }

  .work-cta {
    padding: 76px 18px;
  }

  .browser-preview__bar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .browser-preview__lights {
    display: none;
  }

  .browser-preview__url {
    justify-self: stretch;
    max-width: 100%;
    text-align: center;
  }

  .browser-preview__tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .browser-preview__tools button {
    padding: 0 6px;
    font-size: 10px;
  }

  .browser-preview__notice {
    right: 10px;
    bottom: 10px;
    left: auto;
    justify-content: flex-end;
  }

  .browser-preview__notice span {
    white-space: normal;
  }

  .project-next {
    padding: 76px 18px;
  }

  .diagnostic-strip li,
  .diagnostic-strip li:is(:hover, :focus-visible) {
    min-height: 190px;
    transform: none;
  }

  .diagnostic-strip__detail,
  .diagnostic-strip li:is(:hover, :focus-visible) .diagnostic-strip__detail {
    max-height: none;
    opacity: 1;
    transform: none;
  }

  .build-item:last-child {
    grid-column: auto;
  }

  .case-row__media {
    aspect-ratio: 1 / 1.08;
  }

  .case-row--wide-shot .case-row__media {
    aspect-ratio: 1.92 / 1;
  }

  .case-row--screen-shot .case-row__media {
    aspect-ratio: 1.42 / 1;
  }

  .case-row--avatar-proof .case-row__media {
    aspect-ratio: 1.42 / 1;
  }

  .case-row__copy dl {
    grid-template-columns: 1fr;
  }

  .method-step {
    min-height: auto;
  }

  .method-step__link {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 32px 0;
  }

  .method-step__list {
    grid-column: auto;
  }

  .method-step__link::before,
  .method__media-stage {
    display: none;
  }

  .read-band {
    min-height: 76svh;
    padding: 76px 18px;
  }

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

@media (max-width: 720px) {
  .voice-concierge {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .voice-concierge__launcher {
    width: 100%;
  }

  .voice-concierge__panel {
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    width: 100%;
    max-height: min(80svh, 660px);
  }

  .voice-concierge__head,
  .voice-concierge__tabs,
  .voice-concierge__view {
    padding-left: 14px;
    padding-right: 14px;
  }

  .voice-concierge__head {
    padding-top: 26px;
    padding-bottom: 18px;
  }

  .voice-concierge__brand {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .voice-concierge__title {
    font-size: 32px;
  }

  .voice-concierge__close {
    width: 52px;
    height: 52px;
  }

  .voice-concierge__tabs {
    padding-left: 0;
    padding-right: 0;
  }

  .voice-concierge__tab {
    min-height: 52px;
  }

  .voice-concierge__view {
    max-height: calc(min(80svh, 660px) - 170px);
    min-height: auto;
  }

  #vc-panel-talk {
    height: 374px;
    margin: 0 14px 26px;
    padding: 0;
  }

  #vc-panel-book {
    height: 374px;
    margin: 0 14px 26px;
    padding: 44px 28px 28px;
  }

  #vc-panel-talk::before {
    width: 104px;
    height: 23px;
  }

  .voice-concierge__lede {
    top: 17%;
    width: 92%;
    font-size: 34px;
    line-height: 1.02;
  }

  .voice-concierge__signature {
    top: 41%;
    left: 13%;
    width: 74%;
    height: 9%;
  }

  .voice-concierge__hint {
    top: 52.5%;
    left: 12%;
    right: 12%;
    font-size: 13px;
  }

  .voice-concierge__status {
    top: 62.9%;
    left: 14%;
    right: 14%;
    height: 8.5%;
    padding: 0 18px;
  }

  .voice-concierge__talk,
  .voice-concierge__stop {
    top: 73%;
    left: 14%;
    width: 72%;
    height: 12%;
    min-height: 0;
    padding: 0 44px;
  }

  .voice-concierge__type-fallback {
    bottom: 4%;
  }
}

.voice-concierge[data-vc-active="talk"] .voice-concierge__head > div,
.voice-concierge[data-vc-active="book"] .voice-concierge__head > div {
  max-width: calc(100% - 96px);
}

.voice-concierge[data-vc-active="talk"] .voice-concierge__close,
.voice-concierge[data-vc-active="book"] .voice-concierge__close {
  position: absolute;
  top: 69px;
  left: calc(88.3% - 22px);
  width: 44px;
  height: 44px;
  border-color: transparent;
  background: transparent;
  transform: translateY(-50%);
}

.voice-concierge[data-vc-active="talk"] .voice-concierge__close:hover,
.voice-concierge[data-vc-active="book"] .voice-concierge__close:hover {
  border-color: transparent;
  background: rgba(247, 240, 229, 0.04);
  transform: translateY(-50%);
}

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

  .diagnostic-strip li,
  .diagnostic-strip li:is(:hover, :focus-visible) {
    min-height: 190px;
    transform: none;
  }

  .diagnostic-strip__detail,
  .diagnostic-strip li:is(:hover, :focus-visible) .diagnostic-strip__detail {
    max-height: none;
    opacity: 1;
    transform: none;
  }

  /* Scroll spotlight: touch devices can't hover, so script.js lights the card
     nearest the middle of the screen as you scroll — one at a time. Reuses the
     desktop hover look (gold edge, blue glow, lift) with a softly pulsing node. */
  /* No translateY lift here: lifting the lit card shifted it up ~4px, which
     tightened the gap above it and opened the gap below — reading as uneven
     card spacing. The glow + shadow + node pulse signal "active" without
     moving the card, so all six stay evenly spaced. */
  .diagnostic-strip li.is-spotlight {
    border-color: rgba(240, 201, 137, 0.42);
    background:
      linear-gradient(180deg, rgba(247, 240, 229, 0.1), rgba(247, 240, 229, 0.042)),
      radial-gradient(circle at 50% 0, rgba(121, 199, 255, 0.22), transparent 62%);
    box-shadow:
      inset 0 1px 0 rgba(247, 240, 229, 0.12),
      inset 0 -1px 0 rgba(8, 10, 10, 0.48),
      0 18px 46px rgba(0, 0, 0, 0.26);
  }

  .diagnostic-strip li.is-spotlight::before {
    border-color: rgba(121, 199, 255, 0.78);
    animation: diagnostic-node-pulse 2.4s var(--ease) infinite;
  }

  .method-step__link::before {
    display: none;
  }

  /* Touch can't hover, so the method poster never showed on mobile. script.js
     reveals it as a faint backdrop when the section scrolls into view
     (.is-media-active). Poster image only — the video never plays on touch. */
  .method__media-stage {
    display: block;
  }

  .method__media-stage::after {
    background: linear-gradient(180deg, rgba(8, 10, 10, 0.72), rgba(8, 10, 10, 0.9));
  }

  .method.is-media-active .method__media-stage {
    opacity: 0.46;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .hero__canvas {
    display: none;
  }

  .hero__fallback {
    opacity: 1;
  }

  .hero__content {
    opacity: 1 !important;
    transform: none !important;
  }

  .authority-orb {
    opacity: 1 !important;
    transform: translateY(-50%) !important;
  }

  .cursor {
    display: none;
  }

  .method__media-stage {
    display: none;
  }

  .reveal-up,
  .case-row,
  .work-project,
  .word-reveal .word {
    opacity: 1 !important;
    transform: none !important;
  }
}