@font-face {
  font-family: Manrope;
  src: url("assets/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --paper: #f3f1eb;
  --ink: #242623;
  --muted: #6b6d66;
  --red: #d9412b;
  --line: #d3d3c9;
  --gutter: clamp(24px, 4.6vw, 88px);
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
svg {
  display: block;
}
p {
  line-height: 1.65;
  margin: 0 0 20px;
}
h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.065em;
  margin: 0;
}
h2 {
  font-size: clamp(48px, 5.8vw, 88px);
}
h3 {
  font-size: 30px;
  letter-spacing: -0.045em;
}
em {
  font-style: normal;
  color: var(--muted);
}
::selection {
  background: var(--red);
  color: var(--paper);
}
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 7px;
}
.mono,
.eyebrow {
  font: 10px/1.6 var(--mono);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.eyebrow {
  display: block;
  margin-bottom: 30px;
}
.eyebrow b {
  color: var(--red);
  font-weight: 500;
  margin-right: 14px;
}
.skip {
  position: fixed;
  left: 20px;
  top: -100px;
  background: var(--ink);
  color: white;
  padding: 16px;
  z-index: 100;
}
.skip:focus {
  top: 10px;
}
.header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: -0.06em;
  font-size: 26px;
}
.brand svg {
  width: 25px;
  height: 25px;
  fill: var(--red);
}
.brand-dot {
  color: var(--muted);
  font-weight: 400;
}
.header nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 12px;
}
.header nav a {
  padding: 12px 0;
}
.header nav a:hover {
  color: var(--red);
}
.header .nav-contact {
  margin-left: 25px;
}
.nav-contact span {
  margin-left: 18px;
  font-size: 18px;
}
.experience {
  position: relative;
}
.stage {
  position: relative;
}
.canvas-wrap {
  display: none;
}
.stage-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 54%;
  width: 1px;
  background: linear-gradient(transparent, var(--line) 35%, transparent);
  opacity: 0.45;
  pointer-events: none;
}
.scene {
  position: relative;
  min-height: 90svh;
  padding: 100px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.scene-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}
.scene h2 {
  font-size: clamp(46px, 4.6vw, 73px);
}
.scene-copy > p {
  max-width: 385px;
  font-size: 15px;
  margin-top: 26px;
  color: #5e615a;
}
.hero-top {
  position: absolute;
  top: 144px;
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
}
.red-dot {
  display: inline-block;
  background: var(--red);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.hero-copy h1 {
  font-size: clamp(78px, 9.3vw, 150px);
  letter-spacing: -0.078em;
  line-height: 0.97;
}
.hero-copy h1 > span {
  color: var(--red);
}
.hero-copy .hero-description {
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
  margin: 30px 0 15px;
  letter-spacing: -0.03em;
}
.hero-copy .hero-detail {
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 28px;
  color: var(--muted);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 16px 20px;
  font-size: 12px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.button:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
}
.button span {
  font-size: 20px;
  line-height: 1;
}
.hero-art-label {
  position: absolute;
  top: 160px;
  right: var(--gutter);
  width: 34%;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.cross {
  font-size: 26px;
  font-weight: 300;
}
.hero-bottom {
  position: absolute;
  bottom: 40px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scroll-link {
  display: flex;
  align-items: center;
  gap: 18px;
}
.scroll-icon {
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 48px;
  font-size: 19px;
}
.hero-location {
  color: var(--muted);
}
.scene-result {
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 345px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scene-result .mono {
  color: var(--red);
  font-size: 9px;
}
.scene-result > span:last-child {
  font-size: 14px;
}
.object-caption {
  position: absolute;
  bottom: 130px;
  left: 57%;
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 9px;
}
.stage-controls {
  display: none;
}
.stage-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--line);
  display: none;
}
.stage-progress span {
  height: 100%;
  display: block;
  background: var(--red);
  transform-origin: left;
  transform: scaleX(0);
}
.still-art {
  width: 100%;
  align-self: center;
}
.scene-hero {
  padding-top: 200px;
  padding-bottom: 140px;
  min-height: 100svh;
}
/* Progressive enhancement: normal content first, one continuous stage when WebGL is ready. */
body.motion .experience {
  height: 590svh;
}
body.motion .stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
body.motion .scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: block;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.motion .scene.is-active {
  visibility: visible;
  pointer-events: auto;
}
body.motion .scene-copy {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-44%);
  width: 46%;
}
body.motion .hero-copy {
  transform: translateY(-43%);
}
body.motion .canvas-wrap {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
#swarm {
  display: block;
  width: 100%;
  height: 100%;
}
body.motion .still-art {
  display: none;
}
body.motion .stage-controls {
  position: absolute;
  bottom: 38px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}
body.motion .hero-bottom {
  bottom: 100px;
}
body.motion .hero-location {
  display: none;
}
body.motion .stage-progress {
  display: block;
}
.chapter-nav {
  display: flex;
  gap: 9px;
}
.chapter-nav a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 10px var(--mono);
  color: var(--muted);
  position: relative;
}
.chapter-nav a:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 1px;
  background: var(--line);
  transition:
    background 0.2s,
    transform 0.2s;
}
.chapter-nav a[aria-current] {
  color: var(--red);
}
.chapter-nav a[aria-current]:after {
  background: var(--red);
  transform: scaleY(2);
}
#motion-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 10px var(--mono);
  min-height: 44px;
  padding: 0 12px;
  text-transform: uppercase;
}
.motion-glyph {
  font-size: 17px;
}
body.still .stage-controls {
  position: absolute;
  top: 115px;
  right: var(--gutter);
  bottom: auto;
  left: auto;
  display: flex;
}
body.still .chapter-nav {
  display: none;
}
body.still .hero-art-label,
body.still .hero-bottom {
  display: none;
}
body.still .scene:not(.scene-hero) {
  border-top: 1px solid var(--line);
}
.strip {
  padding: 46px var(--gutter);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.strip p {
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.025em;
}
.strip p strong {
  font-weight: 500;
  color: var(--muted);
}
.strip > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.strip > div > strong {
  font-size: 41px;
  letter-spacing: -0.055em;
  font-weight: 500;
}
.strip > div > strong > span {
  font-size: 22px;
}
.strip > div > span {
  font-size: 10px;
  color: var(--muted);
}
.section-dark {
  background: #242623;
  color: var(--paper);
}
.work {
  padding: 110px var(--gutter) 48px;
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 25px;
  margin-bottom: 64px;
  align-items: start;
}
.section-heading .eyebrow {
  grid-column: 1;
}
.section-heading h2 {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.section-heading p {
  font-size: 13px;
  color: #b0b3a9;
  align-self: end;
}
.section-dark em {
  color: #aeb2a7;
}
.feature-project {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 6vw;
  align-items: center;
}
.feature-image {
  position: relative;
  background: #171b19;
  overflow: hidden;
  aspect-ratio: 1.35;
}
.feature-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.feature-project:hover img,
.project:hover img {
  transform: scale(1.035);
}
.image-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  color: #ddd;
  font-size: 9px;
  background: #242623a6;
  padding: 7px 10px;
}
.round-arrow {
  position: absolute;
  bottom: 22px;
  right: 22px;
  border: 1px solid #ffffff60;
  background: #f3f1eb;
  color: #242623;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 23px;
  transition: transform 0.25s;
}
.feature-project:hover .round-arrow,
.project:hover .round-arrow {
  transform: rotate(45deg);
}
.feature-story .eyebrow {
  color: #b2b7ac;
  font-size: 9px;
}
.feature-story h3 {
  font-size: clamp(30px, 3vw, 45px);
  line-height: 1.15;
}
.feature-story p {
  font-size: 13px;
  color: #b2b7ac;
  max-width: 310px;
  margin-top: 25px;
}
.under-link {
  display: inline-flex;
  align-items: center;
  gap: 35px;
  padding: 10px 0;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
}
.under-link span {
  font-size: 18px;
}
.project-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  margin-top: 100px;
}
.project-offset {
  margin-top: 100px;
}
.project-image {
  aspect-ratio: 1.46;
  overflow: hidden;
  position: relative;
  background: #363a33;
  padding: 28px;
}
.project-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.project:nth-child(2) .project-image {
  background: #d6d6c8;
}
.project-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}
.project-title h3 {
  font-size: 25px;
}
.project-title .mono {
  color: #aeb2a7;
  font-size: 9px;
}
.project p {
  font-size: 13px;
  color: #aeb2a7;
  margin-top: 12px;
}
.work-footer {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid #53564d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.work-footer .mono {
  font-size: 9px;
  color: #aeb2a7;
}
.work-footer > a {
  font-size: 12px;
}
.work-footer > a > span {
  margin-left: 20px;
}
.about {
  padding: 120px var(--gutter);
}
.about-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.about-meta > .mono {
  color: var(--muted);
  font-size: 9px;
  width: 43%;
}
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12vw;
  align-items: center;
}
.portrait-frame {
  position: relative;
}
.portrait-frame > img {
  width: 100%;
  height: 590px;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  background: #d4d4c8;
}
.portrait-mark {
  position: absolute;
  bottom: 0;
  left: -10px;
  font-size: 220px;
  line-height: 0.75;
  color: var(--paper);
  letter-spacing: -0.09em;
  font-weight: 600;
}
.portrait-mark > span {
  color: var(--red);
}
.portrait-caption {
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 25px;
  font-size: 9px;
}
.about-copy h2 {
  font-size: clamp(45px, 5.2vw, 78px);
}
.about-copy .about-lead {
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-top: 30px;
}
.about-copy p {
  font-size: 13px;
  color: var(--muted);
  max-width: 430px;
}
.about-copy .under-link {
  margin-top: 8px;
}
.method {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #e7e5dc;
}
.method-art {
  position: relative;
  min-height: 730px;
  overflow: hidden;
}
.method-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  position: absolute;
}
.art-label {
  position: absolute;
  left: var(--gutter);
  bottom: 45px;
  background: var(--paper);
  padding: 12px 16px;
  font-size: 9px;
}
.method-content {
  padding: 80px var(--gutter) 70px 6vw;
}
.method-content h2 {
  font-size: clamp(45px, 5vw, 70px);
}
.method-steps {
  margin-top: 45px;
  border-top: 1px solid #c4c4b8;
}
.method-steps details {
  border-bottom: 1px solid #c4c4b8;
}
.method-steps summary {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
}
.method-steps summary::-webkit-details-marker {
  display: none;
}
.method-steps summary .mono {
  color: var(--red);
  font-size: 9px;
}
.method-steps h3 {
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.035em;
}
.details-sign {
  width: 12px;
  height: 12px;
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}
.details-sign:before,
.details-sign:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--ink);
}
.details-sign:after {
  transform: rotate(90deg);
}
details[open] .details-sign:after {
  transform: rotate(0);
}
.method-steps p {
  font-size: 12px;
  padding-left: 32px;
  color: #5e615a;
  margin-top: -5px;
  margin-bottom: 25px;
  max-width: 390px;
}
.method-note {
  font-size: 11px;
  color: #62655d;
  max-width: 350px;
  margin: 25px 0 0;
}
.contact {
  padding: 75px var(--gutter) 60px;
  background: var(--red);
  color: var(--paper);
}
.contact-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 65px;
}
.contact-top .mono {
  font-size: 9px;
}
.contact h2 {
  font-size: clamp(68px, 10vw, 150px);
  letter-spacing: -0.074em;
}
.contact h2 em {
  color: #f3f1eb88;
}
.contact-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 55px;
  gap: 20px;
}
.contact-bottom p {
  font-size: 15px;
}
.contact-link {
  font-size: 50px;
  letter-spacing: -0.055em;
  border-bottom: 1px solid #f3f1eb80;
  display: flex;
  align-items: center;
  gap: 9vw;
  padding-bottom: 15px;
}
.contact-link span {
  transition: transform 0.25s;
}
.contact-link:hover span {
  transform: translate(6px, -6px);
}
.contact-email {
  display: flex;
  justify-content: space-between;
  margin-top: 55px;
  padding-top: 25px;
  border-top: 1px solid #f3f1eb60;
  font-size: 11px;
}
.contact-email span {
  opacity: 0.75;
}
footer {
  padding: 32px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
footer .brand {
  font-size: 21px;
}
footer > .mono {
  font-size: 8px;
  color: var(--muted);
}
footer > a:not(.brand) {
  font-size: 11px;
}
.footer-draft {
  display: none;
}
@media (min-width: 1700px) {
  .scene-copy > p {
    font-size: 18px;
    max-width: 460px;
  }
  .hero-copy .hero-description {
    font-size: 26px;
  }
  .hero-copy .hero-detail {
    font-size: 14px;
  }
  .eyebrow,
  .mono {
    font-size: 11px;
  }
}
@media (max-height: 750px) and (min-width: 761px) {
  .hero-top {
    top: 125px;
  }
  .hero-copy h1 {
    font-size: clamp(70px, 8.4vw, 115px);
  }
  body.motion .hero-copy {
    transform: translateY(-35%);
  }
  .hero-copy .hero-description {
    font-size: 18px;
    margin: 20px 0 10px;
  }
  .hero-copy .hero-detail {
    margin-bottom: 18px;
  }
  .hero-bottom {
    display: none;
  }
  .scene h2 {
    font-size: clamp(40px, 4.5vw, 62px);
  }
  .scene-copy > p {
    font-size: 13px;
    margin-top: 20px;
  }
  .scene-result {
    margin-top: 22px;
  }
}
@media (max-width: 1000px) {
  .header nav {
    gap: 24px;
  }
  .header .nav-contact {
    margin-left: 0;
  }
  .scene-copy > p {
    font-size: 13px;
    max-width: 340px;
  }
  .hero-copy .hero-description {
    font-size: 19px;
  }
  .object-caption {
    flex-direction: column;
    gap: 5px;
  }
  .feature-project {
    gap: 40px;
    grid-template-columns: 1.3fr 1fr;
  }
  .project-title {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .about-layout {
    gap: 7vw;
  }
  .portrait-frame > img {
    height: 530px;
  }
  .method {
    grid-template-columns: 0.9fr 1fr;
  }
  .method-content {
    padding-left: 35px;
  }
  .method-steps h3 {
    font-size: 15px;
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 24px;
  }
  .header {
    height: 80px;
  }
  .brand {
    font-size: 24px;
    gap: 9px;
  }
  .brand svg {
    width: 23px;
  }
  .header nav > a:not(.nav-contact) {
    display: none;
  }
  .header .nav-contact {
    font-size: 12px;
  }
  .hero-top {
    top: 112px;
    font-size: 9px;
  }
  .hero-art-label {
    display: none;
  }
  .scene {
    grid-template-columns: 1fr;
    padding: 65px var(--gutter);
    min-height: 0;
  }
  .scene-hero {
    padding-top: 150px;
  }
  .hero-copy h1 {
    font-size: clamp(72px, 15.5vw, 115px);
  }
  .hero-copy .hero-description {
    font-size: 18px;
    margin: 20px 0 12px;
  }
  .hero-copy .hero-detail {
    font-size: 11px;
    margin-bottom: 24px;
  }
  .button {
    padding: 14px 18px;
    font-size: 11px;
  }
  .still-art {
    max-height: 400px;
    margin: 25px auto 0;
    object-fit: contain;
  }
  .scene h2 {
    font-size: clamp(39px, 9.5vw, 60px);
  }
  .scene-copy > p {
    font-size: 13px;
    max-width: 400px;
    margin-top: 20px;
  }
  .eyebrow {
    font-size: 9px;
    margin-bottom: 20px;
  }
  .scene-result {
    display: none;
  }
  .stage-line {
    display: none;
  }
  .object-caption {
    display: none;
  }
  .hero-bottom {
    display: none;
  }
  body.motion .experience {
    height: 520svh;
  }
  body.motion .scene-copy {
    width: calc(100% - 48px);
    left: 24px;
    top: 112px;
    transform: none;
  }
  body.motion .hero-copy {
    top: 166px;
    transform: none;
  }
  body.motion .scene:not(.scene-hero) .scene-copy {
    top: 70px;
  }
  body.motion .scene:not(.scene-hero) .scene-copy > p {
    max-width: 340px;
    font-size: 12px;
    margin-top: 15px;
  }
  body.motion .scene:not(.scene-hero) .scene-copy h2 {
    font-size: clamp(39px, 9vw, 55px);
  }
  body.motion .stage-controls {
    bottom: 18px;
  }
  body.motion .scene-hero .button {
    margin-top: 0;
  }
  .chapter-nav a {
    width: 33px;
  }
  .chapter-nav {
    gap: 2px;
  }
  #motion-toggle {
    font-size: 9px;
    padding-right: 0;
  }
  body.still .stage-controls {
    top: 88px;
    right: 14px;
  }
  .strip {
    grid-template-columns: 1fr 1fr;
    padding-block: 35px;
    gap: 32px;
  }
  .strip p {
    font-size: 15px;
  }
  .strip > div > strong {
    font-size: 35px;
  }
  .strip > div > span {
    font-size: 9px;
    line-height: 1.5;
  }
  .work {
    padding-top: 65px;
  }
  .section-heading {
    display: block;
    margin-bottom: 40px;
  }
  .section-heading h2 {
    font-size: 49px;
  }
  .section-heading p {
    margin-top: 25px;
    font-size: 12px;
  }
  .feature-project {
    display: block;
  }
  .feature-image {
    aspect-ratio: 1.1;
  }
  .feature-story {
    padding-top: 30px;
  }
  .feature-story h3 {
    font-size: 33px;
  }
  .feature-story .eyebrow {
    margin-bottom: 18px;
  }
  .feature-story p {
    margin-top: 18px;
    max-width: 380px;
  }
  .project-pair {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 55px;
  }
  .project-offset {
    margin-top: 0;
  }
  .project-image {
    padding: 18px;
  }
  .project-title {
    flex-direction: row;
    align-items: center;
  }
  .project-title h3 {
    font-size: 23px;
  }
  .project-title .mono {
    font-size: 8px;
  }
  .work-footer {
    margin-top: 40px;
    align-items: start;
    flex-direction: column;
    gap: 20px;
  }
  .work-footer .mono {
    font-size: 8px;
  }
  .about {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  .about-meta {
    margin-bottom: 35px;
    display: block;
  }
  .about-meta > .mono {
    display: none;
  }
  .about-layout {
    display: flex;
    flex-direction: column;
    gap: 65px;
    align-items: stretch;
  }
  .portrait-frame > img {
    height: 460px;
    object-position: 50% 38%;
  }
  .portrait-mark {
    font-size: 175px;
  }
  .about-copy h2 {
    font-size: 58px;
  }
  .about-copy .about-lead {
    font-size: 18px;
  }
  .method {
    display: flex;
    flex-direction: column;
  }
  .method-art {
    min-height: 430px;
  }
  .method-art > img {
    object-position: center;
  }
  .art-label {
    bottom: 24px;
  }
  .method-content {
    padding: 55px 24px;
  }
  .method-content h2 {
    font-size: 56px;
  }
  .method-steps h3 {
    font-size: 16px;
  }
  .contact {
    padding-top: 45px;
    padding-bottom: 35px;
  }
  .contact-top {
    margin-bottom: 40px;
    display: block;
  }
  .contact-top > .mono {
    display: none;
  }
  .contact h2 {
    font-size: clamp(55px, 12.4vw, 88px);
  }
  .contact-bottom {
    align-items: start;
    flex-direction: column;
    margin-top: 30px;
    gap: 20px;
  }
  .contact-bottom p {
    font-size: 13px;
  }
  .contact-link {
    font-size: 42px;
    width: 100%;
    justify-content: space-between;
  }
  .contact-email {
    margin-top: 35px;
    gap: 15px;
    font-size: 10px;
    flex-wrap: wrap;
  }
  footer {
    gap: 25px;
    padding-block: 30px;
  }
  footer > .mono {
    width: 100%;
    order: 3;
    font-size: 8px;
  }
}
@media (max-width: 760px) and (max-height: 740px) {
  body.motion .hero-copy {
    top: 145px;
  }
  .hero-copy h1 {
    font-size: 69px;
  }
  .hero-copy .hero-description {
    font-size: 16px;
    margin: 14px 0 8px;
  }
  .hero-copy .hero-detail {
    font-size: 10px;
    margin-bottom: 14px;
  }
  .hero-top {
    top: 105px;
  }
  body.motion .scene:not(.scene-hero) .scene-copy {
    top: 50px;
  }
  body.motion .scene:not(.scene-hero) .scene-copy h2 {
    font-size: 36px;
  }
  body.motion .scene:not(.scene-hero) .scene-copy > p {
    font-size: 11px;
  }
  .eyebrow {
    margin-bottom: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
/* Supporting motion follows document scroll; it never controls document scroll. */
@keyframes editorial-reveal {
  from {
    opacity: 0.25;
    transform: translateY(42px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes image-arrival {
  from {
    clip-path: inset(8% 0 0 0);
    transform: translateY(35px);
  }
  to {
    clip-path: inset(0);
    transform: translateY(0);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body:not(.still) .section-heading h2,
    body:not(.still) .about-copy h2,
    body:not(.still) .contact h2 {
      animation: editorial-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    body:not(.still) .feature-image,
    body:not(.still) .project-image,
    body:not(.still) .portrait-frame {
      animation: image-arrival linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
  }
}
@media (max-width: 760px) {
  .chapter-nav a {
    width: 44px;
  }
  .chapter-nav {
    gap: 0;
  }
  #motion-toggle {
    font-size: 8px;
  }
}
[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  body.still .hero-top {
    top: 140px;
  }
  body.still .scene-hero {
    padding-top: 190px;
  }
  .strip > div > span {
    font-size: 10px;
  }
}

@media (min-width: 761px) {
  body.motion .canvas-wrap {
    clip-path: inset(105px 0 76px 0);
  }
}

/* Elevation: the opening is one spatial composition, not two columns. */
:root{--paper:#eef0f2;--ink:#1b252b;--muted:#64717a;--red:#de4b25;--line:#cbd1d5;--gutter:clamp(24px,4.5vw,88px)}
.header{border:0;height:104px;position:absolute}
.brand{font-size:24px;letter-spacing:-.065em}.brand svg{display:none}.brand-dot{color:inherit;font-weight:700}
.header nav{font-size:12px;gap:30px}.header .nav-contact{background:var(--ink);color:white;border-radius:30px;padding:14px 21px;margin-left:10px}
.header .nav-contact:hover{background:var(--red);color:white}
.stage-line,.hero-art-label{display:none}
.stage{background:var(--paper)}
body.motion .canvas-wrap{clip-path:none}
body.motion .experience{height:640svh}
body.motion .scene-copy:not(.hero-copy){width:34%;top:47%;transform:translateY(-40%)}
.scene h2{font-size:clamp(48px,4.3vw,74px);line-height:1.05;letter-spacing:-.064em}
.scene-copy>p{font-size:15px;max-width:330px;line-height:1.65;color:#55616b}
.scene-result{max-width:285px;margin-top:30px;border:0;padding:0;gap:5px}.scene-result .mono{color:#67737c}
.scene-result>span:last-child{font-size:13px}
body.motion .scene-hero .hero-copy{top:auto;bottom:155px;left:var(--gutter);right:var(--gutter);width:auto;max-width:none;transform:none}
.hero-copy h1{font-size:clamp(75px,10.9vw,190px);line-height:1;letter-spacing:-.064em;white-space:nowrap;font-weight:500}
.hero-copy h1>span{color:var(--ink)}
.hero-top{top:132px;left:var(--gutter);font-size:12px;line-height:1.6;display:block;letter-spacing:-.025em}
.hero-top span{color:var(--muted)}
.hero-intro{display:flex;align-items:end;justify-content:space-between;margin-top:34px;gap:24px}
.hero-intro p{font-size:16px;line-height:1.5;margin:0;letter-spacing:-.02em}
.hero-cta{display:flex;align-items:center;gap:34px;font-size:13px;white-space:nowrap}
.hero-cta span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--red);color:white;font-size:22px;transition:transform .3s}
.hero-cta:hover span{transform:translateY(5px)}
body.motion .hero-bottom{bottom:98px;font-size:10px;color:var(--muted);letter-spacing:.02em;display:flex;justify-content:space-between;right:var(--gutter)}
body.motion .stage-controls{bottom:24px;border-top:1px solid var(--line);padding-top:12px}
.chapter-nav{gap:12px}.chapter-nav a{font-size:10px}
.object-caption{left:49%;right:var(--gutter);bottom:118px;font-size:9px}
.stage-progress{background:transparent!important;height:2px}
#motion-toggle{color:var(--muted)}
.eyebrow{font-family:Manrope,Arial,sans-serif;font-size:10px;letter-spacing:.1em}
.credibility{background:#dfe4e7;border:0;padding-block:54px}
.section-dark{background:#18242b}.work{padding-top:110px}
.section-heading h2{font-size:clamp(55px,7vw,110px)}
.feature-image{border-radius:4px}.project-image{border-radius:4px}
.about{background:#eef0f2}.portrait-frame{border-radius:3px}
.contact{background:#db4b28}.contact h2{font-size:clamp(62px,8.5vw,145px)}
.contact-link{transition:gap .3s}.contact-link:hover{gap:65px}
body.still .scene-hero{display:block;padding-top:125px;padding-bottom:80px;min-height:800px}
body.still .hero-top{position:static;margin-bottom:15px}
body.still .scene-hero .still-art{height:340px;object-fit:contain;position:static}
body.still .hero-copy{max-width:none}body.still .hero-copy h1{font-size:clamp(62px,10vw,160px)}
body.still .hero-bottom{position:static;margin-top:30px;display:flex;justify-content:space-between;font-size:11px}
@media(min-width:1700px){body.motion .hero-copy{bottom:18vh!important}.hero-top{top:16vh}.hero-intro{margin-top:35px}}
@media(max-width:1000px) and (min-width:761px){.scene h2{font-size:45px}.scene-copy>p{font-size:13px}.object-caption>span:last-child{display:none}.hero-copy h1{font-size:10.7vw}.header nav{gap:20px}}
@media(max-width:760px){
 .header{height:80px}.brand{font-size:23px}.header nav>a:not(.nav-contact){display:none}.header .nav-contact{font-size:11px;padding:12px 17px;margin:0}.nav-contact span{margin-left:12px}
 .hero-top{top:100px;font-size:11px}
 body.motion .experience{height:550svh}
 body.motion .scene-hero .hero-copy{top:auto;bottom:164px;left:24px;right:24px;width:auto;transform:none}
 .hero-copy h1{font-size:clamp(66px,13.8vw,104px);line-height:1;white-space:normal;max-width:650px}
 .hero-copy h1>span{display:block}
 .hero-intro{display:block;margin-top:24px}.hero-intro p{font-size:13px;max-width:310px}.hero-cta{display:none}
 body.motion .hero-bottom{bottom:108px;left:24px;right:24px;font-size:9px;gap:18px}.hero-bottom>span:first-child{max-width:150px}
 body.motion .scene-copy:not(.hero-copy){top:106px;left:24px;right:24px;width:auto;max-width:550px;transform:none}
 .scene h2{font-size:clamp(40px,9.7vw,64px);line-height:1.04}.scene h2 br{display:none}
 .scene .eyebrow{margin-bottom:16px;font-size:9px}
 .scene-copy>p{font-size:13px;line-height:1.55;margin-top:16px;max-width:340px}
 .scene-result{display:none}
 .object-caption{left:24px;right:24px;bottom:98px;font-size:8px}.object-caption>span:last-child{display:none}
 body.motion .stage-controls{left:24px;right:24px;bottom:20px}.chapter-nav{gap:3px}.chapter-nav a{width:38px}
 #motion-toggle{font-size:10px}
 .credibility{padding-block:34px}
 body.still .scene-hero{min-height:0;padding-top:105px}.still .hero-top{display:none}.still .hero-copy h1{font-size:17vw}
 body.still .hero-intro p{font-size:14px}.still .hero-bottom{font-size:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-cta span,.contact-link{transition:none}}

.hero-copy h1{word-spacing:.06em}.hero-top{z-index:3}body.motion .canvas-wrap{clip-path:inset(95px 0 80px)}
.enclosure-project{margin-top:85px}.enclosure-intro{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:end;margin-bottom:45px}
.enclosure-intro h3{font-size:clamp(38px,4vw,60px);letter-spacing:-.06em}.enclosure-intro p{font-size:15px;max-width:390px;color:#bec9ce}.enclosure-intro .eyebrow{color:#9cacb6}
.enclosure-visual{position:relative;height:clamp(530px,59vw,820px);background:radial-gradient(ellipse at 50% 40%,#3c505f,#18232b 70%);overflow:hidden;border-radius:4px}
.enclosure-poster{position:absolute;width:100%;height:100%;object-fit:contain;transition:none}.enclosure-mount{position:absolute;inset:0;visibility:hidden}.enclosure-mount iframe{border:0;width:100%;height:100%;display:block}.has-model .enclosure-mount{visibility:visible}.has-model .enclosure-poster{visibility:hidden}
.enclosure-caption{position:absolute;left:25px;right:25px;top:24px;display:flex;justify-content:space-between;gap:15px;pointer-events:none;font-size:10px;color:#d3dee4}
.enclosure-status:before{content:'';display:inline-block;width:5px;height:5px;background:#e56940;border-radius:50%;margin-right:10px}.enclosure-note{font-size:10px;color:#a5b1b8;margin:14px 0 0}
@media(max-width:760px){body.motion .canvas-wrap{clip-path:inset(80px 0 90px)}.enclosure-project{margin-top:55px}.enclosure-intro{grid-template-columns:1fr;gap:25px;margin-bottom:28px}.enclosure-intro h3{font-size:44px}.enclosure-intro p{font-size:13px}.enclosure-visual{height:550px;margin-inline:-12px}.enclosure-caption{left:14px;right:14px;font-size:9px}.enclosure-caption>span:last-child{display:none}}

.header{position:fixed;inset:0 0 auto;margin:0;padding:0 var(--gutter);height:82px;mix-blend-mode:difference;pointer-events:none;color:#fff}.header a,.header nav{pointer-events:auto}.header .brand-dot{color:inherit}.header .nav-contact{background:#fff;color:#172127}.header .nav-contact:hover{background:#ddd;color:#172127}.header nav a:hover{color:#d0d5d9}.scene h2{letter-spacing:-.053em}.hero-top{top:120px}
@media(max-width:760px){.header{height:76px}.hero-top{top:103px}.scene h2{letter-spacing:-.055em}body.motion .scene-copy:not(.hero-copy){top:102px}}

@media(min-width:761px) and (max-width:1000px){
 body.motion .scene-copy:not(.hero-copy){top:135px;left:var(--gutter);right:var(--gutter);width:auto;max-width:570px;transform:none}
 .scene h2{font-size:52px;max-width:650px}.scene h2 br{display:none}.scene-copy>p{font-size:14px;max-width:440px;margin-top:22px}.scene-result{display:none}.scene .eyebrow{margin-bottom:22px}.object-caption{left:var(--gutter);right:var(--gutter);bottom:118px}
}
.scene h2{text-wrap:balance}

/* Keep navigation legible when detailed artwork passes beneath it. */
.header{mix-blend-mode:normal;background:rgba(238,240,242,.94);backdrop-filter:blur(16px);color:var(--ink)}
.header .nav-contact{background:var(--ink);color:#fff}.header .nav-contact:hover{background:var(--red);color:#fff}.header nav a:hover{color:var(--red)}

/* Anchor navigation lands directly; scroll-driven artwork retains its own interpolation. */
html{scroll-behavior:auto}