/* Recorded CONVRT presentation, layered over the production site. */
:root { --page-gutter: clamp(1.25rem, 2.7vw, 3rem); }
html { scroll-padding-top: 100px; }
.section-light {
  --muted: #656561;
  --muted-strong: #50504c;
  --line: rgb(14 14 14 / 10%);
  --line-strong: rgb(14 14 14 / 22%);
  --accent: #0e0e0e;
  --accent-ink: #f5f5f2;
  color: var(--ink);
  background: var(--surface);
}
.section-shell { width: 100%; max-width: none; }
.section-label, .hero-note, .studio-signature, .model-number {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.67rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
}
.section-label { margin-bottom: 2rem; opacity: .65; }
.reference-grid { position: relative; isolation: isolate; }
.reference-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 var(--page-gutter);
  pointer-events: none;
  border-inline: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%);
}
.reference-grid::after {
  content: "+";
  position: absolute;
  top: -.55em;
  left: calc(var(--page-gutter) - .3em);
  font: 13px "IBM Plex Mono", monospace;
  opacity: .45;
}
.site-header {
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  mix-blend-mode: difference;
}
.site-header .brand { width: clamp(8rem, 10vw, 10rem); }
.site-header .brand img { filter: grayscale(1) invert(1); }
.site-header .menu-button, .site-header .call-widget { color: #fff; }
.site-header .call-widget i { color: #0e0e0e; background: #fff; }
.site-header .call-widget img { filter: grayscale(1) invert(1); }
.menu-panel {
  inset: calc(var(--header-height) - .4rem) auto auto 50%;
  display: block;
  width: min(27rem, 47vw);
  max-height: calc(100dvh - var(--header-height) - 1rem);
  overflow-y: auto;
  padding: 2.4rem;
  transform: translateY(-1rem);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 550ms var(--ease-out), opacity 350ms ease, transform 550ms var(--ease-out), visibility 0s 550ms;
}
.menu-open .menu-panel { clip-path: inset(0); }
.menu-brand { display: block; width: 9rem; margin-bottom: 2rem; }
.menu-brand img { width: 100%; height: auto; filter: grayscale(1) invert(1); }
.menu-panel-inner { gap: 0; }
.menu-panel-inner a {
  display: block;
  width: fit-content;
  min-height: 0;
  padding: .55rem 0;
  border: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.25;
  text-transform: uppercase;
}
.menu-panel-inner a:hover, .menu-panel-inner a:focus-visible { padding-left: 0; }
.menu-panel > p { margin-top: 2.5rem; font-size: 1.15rem; font-weight: 650; color: #c9c9c5; }
.split-text { position: relative; }
.char-window { display: inline-block; overflow: hidden; height: 1.15em; vertical-align: -.12em; }
.split-text .char {
  position: relative;
  display: inline-block;
  height: 1.05em;
  line-height: 1.05;
  transition: transform 420ms var(--ease-out);
}
.split-text .char::after { content: attr(data-char); position: absolute; left: 0; top: 115%; }
.split-text:hover .char, .split-text:focus-visible .char { transform: translateY(-115%); }
.split-icon { flex: 0 0 auto; }
.hero { min-height: 100svh; padding-top: clamp(104px, 12vh, 124px); padding-bottom: 40px; }
.hero::before { opacity: .3; }
.hero-portrait { top: 0; width: min(50vw, 760px); }
.hero-portrait img { filter: grayscale(1) contrast(1.05); }
.hero-content { margin-top: clamp(64px, 10vh, 98px); }
.hero-note { margin: 0 0 2.8rem 50%; display: flex; align-items: center; gap: .7rem; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.massive { font-size: clamp(56px, 10.8vw, 224px); letter-spacing: 0; line-height: .82; }
.massive em { font-size: clamp(30px, 4.2vw, 88px); letter-spacing: -.04em; }
.massive .hero-char { display: inline-block; white-space: pre; }
.massive .hero-word { display: inline-block; max-width: none; white-space: nowrap; }
.has-motion .massive .hero-char {
  animation: hero-letter-in 950ms var(--ease-out) both;
  animation-delay: calc(100ms + var(--letter-index, 0) * 18ms);
}
.intro-active .massive .hero-char { animation-play-state: paused; }
.hero-copy { font-weight: 450; line-height: 1.3; font-size: clamp(20px, 1.65vw, 28px); margin-top: 3rem; }
.hero-actions { margin-top: clamp(3rem, 7vh, 6rem); }
.hero .button { min-height: 4.3rem; font-size: .72rem; }
.signal-strip { background: var(--surface); color: var(--ink); border-color: rgb(14 14 14 / 12%); }
.signal-strip p { min-height: 5rem; color: #575754; font: .65rem/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; border-color: rgb(14 14 14 / 12%); }
.studio { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: clamp(7rem, 12vw, 13rem); }
.studio-preview { width: 50%; align-self: start; position: sticky; top: 8rem; padding: 1rem; border-block: 1px solid var(--line); }
.studio-preview img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; object-position: top; filter: grayscale(1); }
.studio-preview figcaption { margin-top: 1.5rem; font: .62rem/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; color: #9b9b97; }
.studio-preview .text-link { font: .65rem/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; }
.studio-copy { padding-left: 0; }
.studio-statement { font-size: clamp(2.6rem, 4.5vw, 6rem); font-weight: 900; line-height: .94; letter-spacing: -.075em; text-transform: uppercase; }
.studio-signature { display: block; margin-top: 3rem; }
.studio-signature span { display: inline-block; margin-top: .35rem; color: #9b9b97; }
.section-heading h2, .spatial-heading h2, .model-stage h2, .governance-copy h2, .lab-copy h2, .diagnostic-copy h2 {
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .87;
  text-transform: uppercase;
  text-wrap: initial;
}
.scroll-highlight { --highlight-muted: rgb(245 245 242 / 28%); --highlight-active: var(--paper); word-spacing: .05em; }
.section-light .scroll-highlight { --highlight-muted: rgb(14 14 14 / 24%); --highlight-active: var(--ink); }
.highlight-word { display: inline-block; color: var(--highlight-muted); transition: color 95ms linear; }
.highlight-word.is-lit { color: var(--highlight-active); }
.highlight-word.is-next { color: color-mix(in srgb, var(--highlight-active) 54%, var(--highlight-muted)); }
@supports (color: color-mix(in srgb, white, black)) {
  .scroll-highlight .highlight-word { color: color-mix(in srgb, var(--highlight-active) calc(var(--word-progress, 0) * 100%), var(--highlight-muted)); }
}
.spatial-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 0; }
.spatial-heading .section-label { grid-column: 1 / -1; margin: 0; font-size: .67rem; }
.section-heading .section-label { font: .67rem/1.4 "IBM Plex Mono", monospace; }
.spatial-heading h2 { font-size: clamp(3rem, 5.2vw, 6rem); max-width: 14ch; }
.spatial-heading > p:not(.section-label) { margin-top: 0; padding: .4rem 3rem 0 0; }
.service-rail strong { font-weight: 650; text-transform: uppercase; font-size: 1.1rem; }
.governance { grid-template-columns: 1fr 1fr; gap: 0; }
.governance-copy { position: static; padding-right: 5vw; }
.governance-copy h2 { font-size: clamp(3.8rem, 7.3vw, 8rem); max-width: 8ch; }
.governance-copy > p:not(.section-label) { max-width: 26rem; font-size: 1.05rem; }
.governance-field { grid-template-columns: 1fr; border-left: 0; margin-top: 3.2rem; }
.governance-field article { position: relative; min-height: 0; display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; gap: .6rem 1.1rem; padding: 1.5rem 0; border-right: 0; }
.governance-field h3 { margin: 0; font: .9rem/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; }
.governance-field p { grid-column: 2; margin: 0; max-width: 34ch; font-size: .92rem; }
.governance-field article:hover { background: transparent; color: var(--ink); }
.governance-field article::after { content: "+"; position: absolute; bottom: -.6rem; left: -.2rem; color: #858581; font: .8rem "IBM Plex Mono", monospace; }
.pocket-section {
  position: relative;
  isolation: isolate;
  min-height: clamp(760px, 64vw, 940px);
  padding-top: clamp(120px, 13vw, 190px);
  overflow: clip;
}
.metric-strip { position: relative; z-index: 2; width: min(62vw, 1030px); display: grid; grid-template-columns: repeat(3, 1fr); }
.metric-strip div { display: flex; align-items: start; gap: 16px; }
.metric-strip strong { font-size: clamp(40px, 4.8vw, 72px); font-weight: 900; letter-spacing: -.075em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-strip span { max-width: 90px; padding-top: 8px; color: var(--muted); font: 11px/1.3 "IBM Plex Mono", monospace; text-transform: uppercase; }
.pocket-copy { position: relative; z-index: 2; width: 43%; max-width: 650px; margin-top: 155px; padding-left: clamp(0px, 4.4vw, 88px); }
.pocket-copy h2 { max-width: 14.5ch; margin: 0 0 36px; font-size: clamp(44px, 3.1vw, 66px); font-weight: 900; letter-spacing: -.075em; line-height: .95; text-transform: uppercase; }
.pocket-copy > p:last-child { max-width: 33rem; color: var(--muted); font-size: clamp(1.05rem, 1.35vw, 1.4rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.35; }
.phone-visual { position: absolute; z-index: 1; inset: 170px 0 0 auto; width: 50%; pointer-events: none; }
.phone-glow { position: absolute; right: -10vw; bottom: 100px; width: min(56vw, 900px); max-width: none; opacity: .7; }
.phone-hand { position: absolute; right: 1vw; top: -50px; height: min(46vw, 690px); width: auto; max-width: none; filter: grayscale(1) contrast(1.05); }
.phone-brand { position: absolute; left: 0; bottom: 200px; width: 90px; height: auto; opacity: .18; }
.operating-model { background: var(--surface); }
.model-stage { grid-template-columns: 1fr 1fr; gap: 0; max-width: none; }
.model-stage > header { position: static; padding-right: 5vw; }
.model-stage h2 { font-size: clamp(3.5rem, 6.4vw, 7.5rem); max-width: 9ch; }
.model-stage .eyebrow { margin-bottom: 2rem; font-size: .65rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.model-sequence { grid-template-columns: 1fr 1fr; counter-reset: steps; }
.model-sequence li { min-height: 18rem; padding: 1.8rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.model-number { display: block; font: 600 2.8rem/.95 "Geist", sans-serif; letter-spacing: -.075em; }
.model-sequence strong { margin-top: 4rem; margin-bottom: 1rem; font: 600 1rem/1 "Geist", sans-serif; text-transform: uppercase; letter-spacing: -.03em; }
.model-sequence p { font: .65rem/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; }
.work .section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 0; max-width: none; }
.work .section-heading .section-label { grid-column: 1 / -1; }
.work .section-heading h2 { max-width: 9ch; }
.work .section-heading > p:not(.section-label) { align-self: end; max-width: 34ch; }
.case-stack { gap: 6rem; }
.case-study { position: relative; top: auto; grid-template-columns: 1fr 1fr; min-height: 34rem; box-shadow: none; border: 0; border-top: 1px solid var(--line-strong); background: transparent; }
.case-copy { padding: 2rem 4vw 2rem 0; border: 0; }
.case-copy h3 { font-size: clamp(2.3rem, 4vw, 5rem); font-weight: 850; text-transform: uppercase; letter-spacing: -.075em; }
.case-media, .pipeline-map, .voice-map { --accent: #f5f5f2; --muted-strong: #c9c9c5; color: var(--paper); }
.pipeline-map { padding: 2rem; gap: .6rem; }
.pipeline-map > div { padding: 1rem; border-color: rgb(245 245 242 / 24%); }
.pipeline-map > i { min-width: 1rem; width: 2rem; }
.case-media img { object-position: top; }
.more-work { grid-template-columns: 1fr 1fr; gap: 0; }
.more-work h3 { max-width: 10ch; font-weight: 850; text-transform: uppercase; line-height: .95; }
.more-work-grid { grid-template-columns: 1fr; gap: 0; }
.more-work-grid > p { padding: 1.5rem 0; border-bottom: 1px solid var(--line); transition: padding-left 400ms var(--ease-out); }
.more-work-grid > p:hover { padding-left: 1rem; }
.more-work-grid > p strong { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.06em; }
.lab { grid-template-columns: 1fr 1fr; gap: 0; }
.lab-media { margin-right: 6vw; }
.lab-copy h2 { font-size: clamp(2.5rem, 4.7vw, 6rem); }
.faq { grid-template-columns: 1fr 1fr; gap: 0; }
.faq .section-heading h2 { max-width: 8ch; }
.faq-list summary { font-size: 1.12rem; }
.diagnostic { grid-template-columns: 1fr 1fr; gap: 0; overflow: clip; }
.diagnostic-copy { padding-right: 5vw; }
.diagnostic-copy h2 { font-size: clamp(3rem, 5.7vw, 6.8rem); }
.diagnostic-copy .eyebrow { margin-bottom: 2rem; font-size: .65rem; }
.contact-form { padding-top: 3rem; }
.contact-form input { color: var(--ink); }
.contact-form label { font: .65rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.contact-form .button { width: 100%; background: transparent; color: var(--ink); border-radius: 0; border-bottom: 1px solid var(--line-strong); text-transform: uppercase; font-size: .78rem; }
.site-footer { position: relative; isolation: isolate; padding-top: 8rem; overflow: clip; }
.site-footer::before { content: ""; position: absolute; z-index: -1; inset: -5rem -10vw 0; background: url('./assets/phone-gradient.avif') 50% 40% / 100% auto no-repeat; opacity: .3; pointer-events: none; }
.site-footer a { color: var(--ink); }
[data-reveal] { opacity: 1; transform: none; }
.has-motion [data-reveal] { transition: opacity 850ms var(--ease-out), transform 850ms var(--ease-out), filter 850ms var(--ease-out); }
.has-motion [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(48px); }
.has-motion [data-image-reveal][data-reveal]:not(.is-visible) { transform: translateY(42px) scale(1.06); filter: blur(6px); }
.has-motion [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
.has-motion .hero-portrait.is-visible { opacity: .94; }
.case-media { overflow: hidden; }
.has-motion .case-study:not(.is-visible) .case-media img { transform: scale(1.12); filter: grayscale(1) blur(6px); }
.has-motion .case-study.is-visible .case-media img { transform: scale(1); }
@keyframes hero-letter-in { from { opacity: 0; transform: translateY(105%) rotateX(-45deg); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .studio-preview { width: 75%; }
  .hero-note { margin-bottom: 2rem; font-size: .55rem; }
  .pocket-section { min-height: 800px; padding-top: 90px; }
  .pocket-copy { width: 48%; padding-left: 0; margin-top: 130px; }
  .phone-visual { top: 260px; }
  .phone-hand { height: 500px; right: 0; top: 0; }
  .phone-glow { bottom: 20px; }
  .phone-brand { display: none; }
  .model-sequence li { padding: 1.3rem; }
  .case-study { min-height: 28rem; }
  .case-media, .pipeline-map, .voice-map { min-height: 28rem; }
  .pipeline-map { flex-direction: column; }
  .pipeline-map > i { flex: 0 0 1rem; width: 1px; }
  .pipeline-map > div { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 760px) {
  :root { --header-height: 72px; --page-gutter: 1rem; }
  html { scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 1rem); }
  .site-header { height: calc(var(--header-height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); grid-template-columns: 1fr auto auto; gap: .65rem; background: rgb(236 235 234 / 96%); color: var(--ink); mix-blend-mode: normal; border-bottom: 1px solid rgb(14 14 14 / 10%); }
  .site-header .brand img { filter: grayscale(1); }
  .site-header .menu-button, .site-header .call-widget { color: var(--ink); }
  .site-header .call-widget i { color: var(--paper); background: var(--ink); }
  .site-header .brand { width: 8rem; }
  .brand { min-height: 44px; align-items: center; }
  .site-header .call-widget > span, .site-header .call-widget img { display: none; }
  .site-header .call-widget { display: block; }
  .site-header .call-widget i { width: 44px; height: 44px; }
  .menu-panel { inset: calc(var(--header-height) + env(safe-area-inset-top)) 1rem auto; width: auto; padding: 1.5rem; max-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top) - 1rem); }
  .menu-panel-inner a { min-height: 44px; width: 100%; padding: .8rem 0; }
  .hero { min-height: 850px; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 160px; }
  .hero-portrait { width: 100%; height: 78%; top: 0; opacity: .8; mask-image: linear-gradient(black 45%, transparent 94%); -webkit-mask-image: linear-gradient(black 45%, transparent 94%); }
  .hero-portrait img { object-position: center 25%; }
  .hero-content { margin-top: 0; }
  .hero-note { margin: 0 0 1.5rem; font-size: .56rem; }
  .hero .massive { width: 100%; max-width: none; font-size: clamp(3.25rem, 16vw, 6rem); letter-spacing: -.055em; line-height: .9; }
  .massive > span { white-space: normal; max-width: 6.2ch; }
  .massive em { margin: .65rem 0 0; max-width: none; font-size: clamp(1.25rem, 6.2vw, 2.8rem); white-space: normal; line-height: 1; }
  .hero-copy { margin: 1.8rem 0 0; max-width: 27ch; font-size: 1.05rem; }
  .hero-actions { margin-top: 2rem; grid-template-columns: 1fr 1fr; }
  .hero .button { min-width: 0; min-height: 3.5rem; padding-inline: .6rem; font-size: .75rem; }
  .signal-strip { grid-template-columns: 1fr; }
  .signal-strip p { padding: 1rem var(--page-gutter); min-height: 0; border-bottom: 1px solid rgb(14 14 14 / 10%); }
  .studio, .spatial-heading, .governance, .model-stage, .work .section-heading, .case-study, .more-work, .lab, .faq, .diagnostic { grid-template-columns: 1fr; gap: 3rem; }
  .studio-preview { position: static; width: 60%; padding: 0 0 1rem; }
  .studio-preview .section-label { margin-bottom: 1rem; }
  .studio-preview .text-link { margin-top: 1rem; }
  .studio-statement { font-size: clamp(2.3rem, 8.4vw, 4rem); }
  .section-shell { padding-block: 5rem; }
  .section-heading h2, .spatial-heading h2, .model-stage h2, .governance-copy h2, .diagnostic-copy h2, .lab-copy h2 { font-size: clamp(2.8rem, 12.4vw, 5rem); }
  .spatial-heading { gap: 1.5rem; }
  .spatial-heading > p:not(.section-label) { padding: 0; }
  .governance-copy, .model-stage > header, .diagnostic-copy { padding-right: 0; }
  .governance-copy h2 { max-width: 11ch; }
  .governance-field { margin-top: 0; }
  .pocket-section { padding-bottom: 0; min-height: auto; }
  .metric-strip { width: 100%; gap: .75rem; }
  .metric-strip div { flex-direction: column; gap: .1rem; }
  .metric-strip strong { font-size: 2.8rem; }
  .metric-strip span { font-size: .72rem; padding-top: .3rem; }
  .pocket-copy { width: 100%; max-width: 33rem; margin-top: 5rem; }
  .pocket-copy h2 { font-size: clamp(2.5rem, 10.4vw, 4.5rem); max-width: 14ch; }
  .phone-visual { position: relative; inset: auto; width: 100%; height: 440px; margin-top: 3rem; }
  .phone-hand { height: 440px; max-width: 100%; object-fit: contain; right: 0; top: 0; }
  .phone-glow { width: 120%; right: -10%; bottom: 0; }
  .model-stage { padding-inline: 0; }
  .model-sequence { grid-template-columns: 1fr 1fr; }
  .model-sequence li { min-height: 17rem; }
  .model-sequence strong { margin-top: 3rem; }
  .model-sequence p { font-size: .85rem; line-height: 1.5; text-transform: none; }
  .case-stack { gap: 5rem; padding-bottom: 0; }
  .case-study { gap: 2rem; min-height: 0; }
  .case-copy { padding: 1.5rem 0 0; }
  .case-copy h3 { margin-top: 3rem; font-size: clamp(2.5rem, 10vw, 4rem); }
  .case-media, .pipeline-map, .voice-map { min-height: 24rem; }
  .more-work { margin-top: 5rem; }
  .more-work h3 { font-size: 2.6rem; max-width: 12ch; }
  .lab-media { margin: 0; }
  .contact-form { padding-top: 0; }
  .contact-form label { font-size: .75rem; }
  .site-footer { padding-top: 5rem; }
  .site-footer nav a { display: inline-flex; min-height: 44px; align-items: center; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .studio, .governance, .model-stage, .lab, .faq, .diagnostic { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .studio-preview { position: static; width: 45%; }
  .model-stage { padding-inline: 0; }
  .model-sequence p { font-size: .85rem; text-transform: none; }
  .governance-field { margin-top: 0; }
  .menu-panel-inner a { min-height: 44px; width: 100%; }
  .lab-media { margin-right: 0; }
}
@media (max-width: 980px) {
  .site-header { background: var(--surface); color: var(--ink); mix-blend-mode: normal; border-bottom: 1px solid rgb(14 14 14 / 10%); }
  .site-header .brand img { filter: grayscale(1); }
  .site-header .menu-button, .site-header .call-widget { color: var(--ink); }
  .site-header .call-widget i { color: var(--paper); background: var(--ink); }
  .spatial-shell, .spatial-heading { padding-inline: var(--page-gutter); }
  .service-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .service-rail button { min-width: 0; min-height: 6rem; padding: 1rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
  .service-rail strong { font-size: 1rem; }
  .spatial-viewport { min-height: 0; }
  .spatial-room { inset: 0 0 auto; height: 310px; }
  .spatial-stage-copy { position: relative; width: 100%; min-height: 0; margin-top: 310px; border-left: 0; padding: 1.5rem; }
  .spatial-instruction { display: none; }
}
@media (max-width: 600px) {
  .service-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-rail button { min-height: 5.5rem; padding: .9rem; }
  .service-rail strong { font-size: .92rem; }
  .spatial-room { height: 260px; }
  .spatial-stage-copy { margin-top: 260px; padding: 1.25rem; }
  .spatial-stage-copy h3 { font-size: 1.85rem; }
}
@media (max-width: 480px) {
  .model-sequence { grid-template-columns: 1fr; }
  .model-sequence li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem 1rem; min-height: 0; padding: 1.5rem 0; border-right: 0; }
  .model-number { grid-row: span 2; font-size: 2rem; }
  .model-sequence strong { margin: .2rem 0; }
  .model-sequence p { grid-column: 2; }
  .hero-note { font-size: .65rem; }
  .hero-portrait { height: 72%; }
  .hero-actions { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.5rem; }
  .hero-copy { margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .has-motion .massive .hero-char { animation: none; }
  .split-text .char, .split-text:hover .char, .split-text:focus-visible .char { transform: none; transition: none; }
  .has-motion [data-reveal], .has-motion [data-reveal]:not(.is-visible), .has-motion [data-image-reveal][data-reveal]:not(.is-visible) { opacity: 1; transform: none; filter: none; transition: none; }
  .scroll-highlight .highlight-word { color: var(--highlight-active); transition: none; }
  .has-motion .case-study:not(.is-visible) .case-media img { transform: none; filter: grayscale(1); }
  .menu-panel, .case-media img, .more-work-grid p { transition: none; }
}
