@font-face {
  font-family: "Satoshi_Variable_Font";
  src: url("../public/fonts/Satoshi-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Onest_Cyrillic";
  src: url("../public/fonts/Onest-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #050505;
  --black-soft: #0a0a09;
  --surface: #11110f;
  --ivory: #f0ede4;
  --ivory-dim: #b7b3a9;
  --line: rgba(240, 237, 228, 0.18);
  --line-strong: rgba(240, 237, 228, 0.4);
  --champagne: #bfa882;
  --scroll: 0;
  --pointer-x: 0;
  --pointer-y: 0;
  font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif;
  font-weight: 380;
  background: var(--black);
  color: var(--ivory);
  scroll-behavior: smooth;
  scrollbar-color: var(--champagne) var(--black);
}

* { box-sizing: border-box; }

html { background: var(--black); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--black);
  color: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  isolation: isolate;
}

button, a { color: inherit; }
button { font: inherit; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }

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

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  background: var(--ivory);
  color: var(--black);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.page-shell { width: min(100% - 64px, 1440px); margin-inline: auto; }

.ambient {
  position: fixed;
  z-index: -1;
  inset: -12vh -10vw;
  background: url("../public/images/black-silk-ribbon.png") center / cover no-repeat;
  opacity: 0.16;
  transform: translate3d(calc(var(--pointer-x) * -22px), calc(var(--pointer-y) * -16px), 0) scale(1.05);
  animation: ambient-drift 28s ease-in-out infinite alternate;
  pointer-events: none;
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.58);
}

.motion-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
  pointer-events: none;
}

@keyframes ambient-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.1); }
}

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; flex-direction: column; justify-self: start; gap: 1px; }
.brand span { font-size: 12px; font-weight: 520; letter-spacing: 0.15em; text-transform: uppercase; }
.brand small { color: var(--ivory-dim); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; }

.nav { display: flex; gap: 30px; }
.nav a, .menu-button { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; }
.nav a { position: relative; padding: 10px 0; color: var(--ivory-dim); transition: color 240ms ease; }
.nav a::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; background: var(--ivory); transform: scaleX(0); transform-origin: right; transition: transform 240ms ease; }
.nav a:hover, .nav a:focus-visible { color: var(--ivory); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.menu-button { display: none; justify-self: end; border: 0; padding: 12px 0; background: transparent; cursor: pointer; }

.scroll-line { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: var(--champagne); transform: scaleX(var(--scroll)); transform-origin: left; }

.hero {
  position: relative;
  min-height: 100svh;
  padding: 132px 0 58px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-ribbon, .contact-ribbon {
  position: absolute;
  inset: -12%;
  background: url("../public/images/black-silk-ribbon.png") center / cover no-repeat;
  opacity: 0.52;
  animation: ribbon-breathe 18s ease-in-out infinite alternate;
}

.hero-ribbon::after, .contact-ribbon::after { content: ""; position: absolute; inset: 0; background: rgba(5, 5, 5, 0.36); }

@keyframes ribbon-breathe {
  0% { transform: translate3d(-1.5%, 0, 0) scale(1.03); filter: contrast(1); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.08); filter: contrast(1.08); }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.78fr) 120px;
  gap: clamp(30px, 4vw, 72px);
  align-items: center;
}

.eyebrow { margin: 0 0 26px; color: var(--champagne); font-size: 10px; font-weight: 520; letter-spacing: 0.2em; text-transform: uppercase; }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 0; font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif; font-weight: 320; letter-spacing: -0.055em; text-transform: uppercase; }
h1 { font-size: clamp(64px, 7.2vw, 130px); line-height: 0.84; }
h2 { font-size: clamp(48px, 5.4vw, 96px); line-height: 0.9; }
h1 em, h2 em { font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif; font-style: italic; font-weight: 300; letter-spacing: -0.045em; text-transform: none; }

.hero-lead { max-width: 530px; margin: 42px 0 30px; color: var(--ivory-dim); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.55; }
.text-link { display: inline-block; padding: 11px 0 9px; border-bottom: 1px solid var(--line-strong); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; transition: border-color 220ms ease, color 220ms ease; }
.text-link:hover, .text-link:focus-visible { color: var(--champagne); border-color: var(--champagne); }

.hero-aperture { margin: 0; align-self: stretch; min-height: 510px; display: flex; flex-direction: column; overflow: hidden; }
.hero-aperture img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; object-position: 58% center; filter: saturate(0.72) contrast(1.03); animation: aperture-drift 16s ease-in-out infinite alternate; }
.hero-aperture figcaption { display: flex; justify-content: space-between; padding-top: 10px; color: var(--ivory-dim); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; }

@keyframes aperture-drift { from { transform: scale(1.01) translateX(-0.5%); } to { transform: scale(1.07) translateX(1.5%); } }

.hero-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hero-index li { border-bottom: 1px solid var(--line); }
.hero-index a { display: block; padding: 16px 0; color: var(--ivory-dim); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; transition: color 200ms ease, transform 200ms ease; }
.hero-index span { display: inline-block; width: 34px; color: var(--champagne); }
.hero-index a:hover, .hero-index a:focus-visible { color: var(--ivory); transform: translateX(5px); }

.scroll-cue { position: absolute; z-index: 1; left: 7px; bottom: 20px; margin: 0; color: var(--ivory-dim); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }

.section { position: relative; z-index: 1; padding: clamp(110px, 12vw, 220px) 0; border-bottom: 1px solid var(--line); background: rgba(5, 5, 5, 0.84); }
.section-heading { display: grid; grid-template-columns: minmax(140px, 0.34fr) minmax(0, 1.4fr) minmax(260px, 0.62fr); align-items: end; gap: 42px; }
.section-heading .eyebrow { align-self: start; margin-top: 7px; }
.section-heading > p:last-child { margin: 0 0 5px; color: var(--ivory-dim); font-size: 15px; line-height: 1.7; }
.section-heading.compact { grid-template-columns: minmax(150px, 0.34fr) 1fr; align-items: start; }

.approach-grid { margin-top: clamp(70px, 8vw, 130px); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.approach-item { min-height: 300px; padding: 28px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; transition: background 300ms ease; }
.approach-item:hover { background: rgba(240, 237, 228, 0.035); }
.approach-item > span { color: var(--champagne); font-size: 10px; letter-spacing: 0.16em; }
.approach-item h3 { margin: auto 0 18px; font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif; font-size: clamp(24px, 2vw, 34px); font-weight: 420; }
.approach-item p { margin: 0; color: var(--ivory-dim); font-size: 13px; line-height: 1.65; }

.process { overflow: hidden; }
.process-track { width: max-content; min-width: 100%; margin-top: 100px; display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-step { width: clamp(180px, 15vw, 250px); aspect-ratio: 1 / 0.75; padding: 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.process-step span { color: var(--champagne); font-size: 10px; letter-spacing: 0.16em; }
.process-step strong { max-width: 140px; font-size: 12px; font-weight: 480; letter-spacing: 0.1em; text-transform: uppercase; }
.process-note { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; color: var(--ivory-dim); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

.project-heading { margin-bottom: 90px; grid-template-columns: 0.32fr 1fr; }
.projects, .principles { overflow: hidden; }
.projects::before, .principles::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16% -12%;
  background: url("../public/images/black-silk-ribbon.png") center / cover no-repeat;
  opacity: 0.32;
  pointer-events: none;
  animation: section-ribbon-drift 22s ease-in-out infinite alternate;
}
.projects::after, .principles::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(5, 5, 5, 0.42);
  pointer-events: none;
}
.projects > .page-shell, .principles > .page-shell { position: relative; z-index: 2; }
.principles::before {
  opacity: 0.27;
  transform: rotate(180deg) scale(1.06);
  animation-name: section-ribbon-drift-reverse;
  animation-duration: 26s;
}
@keyframes section-ribbon-drift {
  from { transform: translate3d(-2.5%, 1%, 0) scale(1.04); }
  to { transform: translate3d(2.5%, -1.5%, 0) scale(1.1); }
}
@keyframes section-ribbon-drift-reverse {
  from { transform: rotate(180deg) translate3d(2%, -1%, 0) scale(1.05); }
  to { transform: rotate(180deg) translate3d(-2%, 1.5%, 0) scale(1.11); }
}
.project-stage { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.78fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-image { position: relative; margin: 0; min-height: 580px; overflow: hidden; border-right: 1px solid var(--line); animation: project-enter 600ms ease both; }
.project-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); transition: filter 500ms ease, transform 900ms cubic-bezier(.2,.7,.2,1); }
.project-image:hover img { filter: saturate(1); transform: scale(1.025); }
.project-image.is-lighting-changing > #project-image { animation: lighting-change 620ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes lighting-change { 0% { opacity: 0.42; filter: brightness(0.72) saturate(0.72); } 55% { opacity: 0.82; } 100% { opacity: 1; } }
.project-image figcaption { position: absolute; bottom: 18px; left: 20px; padding: 8px 10px; background: rgba(5, 5, 5, 0.76); font-size: 9px; letter-spacing: 0.17em; }
.project-image.is-changing { animation: project-enter 600ms ease both; }
@keyframes project-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.lighting-widget { position: absolute; z-index: 3; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 13px; padding: 9px 12px 9px 9px; border: 1px solid rgba(191, 168, 130, 0.42); border-radius: 999px; background: rgba(5, 5, 5, 0.82); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38); backdrop-filter: blur(14px); transition: opacity 240ms ease, transform 240ms ease; }
.lighting-widget[hidden] { display: none; }
.lighting-toggle { position: relative; width: 76px; height: 76px; flex: 0 0 76px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: #050505; box-shadow: inset 0 0 0 1px rgba(240, 237, 228, 0.1), 0 7px 20px rgba(0, 0, 0, 0.52); cursor: pointer; transition: transform 160ms ease, box-shadow 220ms ease; }
.lighting-toggle:hover { box-shadow: inset 0 0 0 1px rgba(191, 168, 130, 0.48), 0 9px 24px rgba(0, 0, 0, 0.6); }
.lighting-toggle:active { transform: scale(0.95); }
.toggle-visual { position: absolute; inset: 0; display: block; }
.toggle-frame { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50%; filter: none !important; transform: scale(1.22) !important; transition: opacity 160ms ease, transform 240ms cubic-bezier(.2,.9,.25,1.3) !important; }
.toggle-frame-up { opacity: 0; }
.lighting-toggle.is-up .toggle-frame-down { opacity: 0; transform: scale(1.18) rotate(-2deg) !important; }
.lighting-toggle.is-up .toggle-frame-up { opacity: 1; transform: scale(1.22) rotate(1deg) !important; }
.lighting-toggle.is-kicking { animation: toggle-kick 280ms cubic-bezier(.18,.88,.34,1.28); }
@keyframes toggle-kick { 0%, 100% { transform: rotate(0) scale(1); } 45% { transform: rotate(-3deg) scale(0.94); } 72% { transform: rotate(1.5deg) scale(1.02); } }
.toggle-hint { position: absolute; inset: auto 0 5px; color: rgba(240, 237, 228, 0.78); font-size: 6px; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 4px #000; pointer-events: none; }
.lighting-meta { min-width: 128px; padding-right: 5px; display: grid; gap: 3px; }
.lighting-meta span, .lighting-meta small { color: var(--ivory-dim); font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; }
.lighting-meta strong { max-width: 170px; font-size: 11px; font-weight: 420; line-height: 1.25; }
.lighting-meta small { color: var(--champagne); }

.project-copy { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; }
.project-kicker { color: var(--champagne) !important; font-size: 10px !important; letter-spacing: 0.16em; text-transform: uppercase; }
.project-copy h3 { margin: 22px 0 32px; font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif; font-size: clamp(34px, 3vw, 58px); font-weight: 380; line-height: 1.04; }
.project-copy dl { margin: 0 0 34px; border-top: 1px solid var(--line); }
.project-copy dl div { display: grid; grid-template-columns: 90px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); }
.project-copy dt { color: var(--ivory-dim); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
.project-copy dd { margin: 0; font-size: 11px; line-height: 1.4; }
.project-copy > p { color: var(--ivory-dim); font-size: 14px; line-height: 1.7; }
.project-result { margin-top: auto; padding-top: 30px; color: var(--ivory) !important; }
.project-controls { display: flex; gap: 10px; margin-top: 24px; }
.project-controls button, .project-tabs button { border: 0; background: transparent; cursor: pointer; }
.project-controls button { min-width: 92px; padding: 11px 14px; border: 1px solid var(--line); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; transition: border-color 220ms ease, background 220ms ease; }
.project-controls button:hover, .project-controls button:focus-visible { border-color: var(--champagne); background: rgba(191, 168, 130, 0.08); }

.project-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.project-tabs button { min-height: 86px; padding: 18px; border-right: 1px solid var(--line); color: var(--ivory-dim); text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; transition: color 220ms ease, background 220ms ease; }
.project-tabs button:last-child { border-right: 0; }
.project-tabs button span { display: block; margin-bottom: 9px; color: var(--champagne); font-size: 8px; }
.project-tabs button:hover, .project-tabs button:focus-visible, .project-tabs button[aria-selected="true"] { color: var(--ivory); background: rgba(240, 237, 228, 0.04); }

.project-film { margin-top: 100px; display: grid; grid-template-columns: 0.8fr 1.25fr 0.92fr; gap: 16px; align-items: end; }
.project-film button { padding: 0; border: 0; background: transparent; cursor: pointer; overflow: hidden; }
.project-film button:nth-child(1) { height: 310px; }
.project-film button:nth-child(2) { height: 470px; }
.project-film button:nth-child(3) { height: 350px; }
.project-film img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7); transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter 400ms ease; }
.project-film button:hover img, .project-film button:focus-visible img { transform: scale(1.035); filter: saturate(1); }

.principles-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(60px, 8vw, 140px); }
.principles-layout .section-heading.compact { display: block; position: sticky; top: 130px; align-self: start; }
.principles-list { border-top: 1px solid var(--line); }
.principles-list article { display: grid; grid-template-columns: 70px 0.45fr 1fr; align-items: baseline; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.principles-list span { color: var(--champagne); font-size: 9px; }
.principles-list h3 { margin: 0; font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif; font-size: 24px; font-weight: 420; }
.principles-list p { margin: 0; color: var(--ivory-dim); font-size: 13px; line-height: 1.6; }

.testimonials { padding-bottom: clamp(140px, 16vw, 260px); }
.reviews-grid { display: grid; grid-template-columns: 1.2fr 0.9fr 1fr; gap: 16px; margin-top: 80px; align-items: start; }
.reviews-grid figure { margin: 0; padding: 34px; border: 1px solid var(--line); }
.reviews-grid figure:nth-child(2) { margin-top: 90px; }
.reviews-grid figure:nth-child(3) { margin-top: 36px; }
.reviews-grid blockquote { margin: 0 0 50px; font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif; font-size: clamp(23px, 2.25vw, 38px); font-weight: 360; line-height: 1.24; }
.reviews-grid figcaption { display: flex; justify-content: space-between; color: var(--ivory-dim); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; }
.reviews-grid figcaption span { color: var(--champagne); }

.contact { position: relative; min-height: 92svh; padding: clamp(120px, 14vw, 230px) 0 36px; display: flex; overflow: hidden; background: var(--black); }
.contact-ribbon { opacity: 0.4; transform: rotate(180deg) scale(1.08); }
.contact-inner { position: relative; z-index: 1; display: flex; flex-direction: column; }
.contact h2 { max-width: 1100px; font-size: clamp(54px, 7vw, 122px); }
.contact-links { margin: clamp(70px, 9vw, 145px) 0 110px; display: flex; flex-wrap: wrap; gap: 20px 60px; }
.contact-links a { padding: 10px 0; border-bottom: 1px solid var(--line-strong); font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif; font-size: clamp(22px, 2.4vw, 40px); font-weight: 360; transition: color 220ms ease, border-color 220ms ease; }
.contact-links a:hover, .contact-links a:focus-visible { color: var(--champagne); border-color: var(--champagne); }
.contact-bottom { margin-top: auto; display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ivory-dim); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; }
.contact-bottom p { margin: 0; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

:focus-visible { outline: 1px solid var(--champagne); outline-offset: 5px; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); }
  .hero-index { display: none; }
  .section-heading { grid-template-columns: 0.28fr 1.3fr; }
  .section-heading > p:last-child { grid-column: 2; max-width: 620px; }
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .project-image { min-height: 480px; }
  .principles-layout { grid-template-columns: 1fr; }
  .principles-layout .section-heading.compact { position: static; }
}

@media (max-width: 760px) {
  .page-shell { width: min(100% - 32px, 1440px); }
  .site-header { height: 68px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .brand span { font-size: 10px; }
  .brand small { font-size: 8px; }
  .menu-button { display: block; }
  .nav { position: fixed; inset: 68px 0 auto; padding: 30px 16px 36px; display: grid; gap: 0; background: rgba(5, 5, 5, 0.97); border-bottom: 1px solid var(--line); transform: translateY(-130%); opacity: 0; pointer-events: none; transition: transform 400ms cubic-bezier(.2,.7,.2,1), opacity 260ms ease; }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 17px 0; border-bottom: 1px solid var(--line); font-family: "Satoshi_Variable_Font", "Onest_Cyrillic", "Segoe UI", Arial, sans-serif; font-size: 24px; font-weight: 380; letter-spacing: 0; text-transform: none; }
  .nav a::after { display: none; }

  .hero { min-height: auto; padding: 112px 0 72px; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 42px; }
  h1 { font-size: clamp(50px, 14.4vw, 68px); }
  h2 { font-size: clamp(44px, 12vw, 62px); }
  .hero-copy { max-width: 100%; }
  .hero-lead { margin-top: 30px; font-size: 16px; }
  .hero-aperture { width: 58%; min-height: 380px; align-self: flex-end; }
  .hero-aperture img { min-height: 350px; object-position: 58% center; }
  .scroll-cue { display: none; }

  .section { padding: 105px 0; }
  .section-heading, .section-heading.compact, .project-heading { display: block; margin-bottom: 0; }
  .section-heading .eyebrow { margin-top: 0; }
  .section-heading > p:last-child { margin-top: 34px; }
  .approach-grid { margin-top: 68px; grid-template-columns: 1fr; }
  .approach-item { min-height: 240px; }

  .process-track { margin-top: 64px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; }
  .process-step { width: 54vw; flex: 0 0 54vw; scroll-snap-align: start; }
  .process-note { align-items: flex-start; flex-direction: column; }

  .project-heading { margin-bottom: 60px; }
  .project-stage { display: block; }
  .project-image { min-height: 0; aspect-ratio: 4 / 5; border-right: 0; border-bottom: 1px solid var(--line); }
  .lighting-widget { right: 10px; bottom: 10px; padding: 6px; }
  .lighting-toggle { width: 66px; height: 66px; flex-basis: 66px; }
  .lighting-meta { display: none; }
  .project-image figcaption { bottom: 14px; left: 12px; }
  .project-copy { padding: 30px 0 36px; }
  .project-copy h3 { margin-top: 15px; }
  .project-result { margin-top: 10px; }
  .project-tabs { grid-template-columns: repeat(2, 1fr); }
  .project-tabs button { border-bottom: 1px solid var(--line); }
  .project-film { margin-top: 70px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .project-film button:nth-child(1), .project-film button:nth-child(2) { height: 280px; }
  .project-film button:nth-child(3) { height: 220px; grid-column: 1 / -1; }

  .principles-list article { grid-template-columns: 46px 1fr; gap: 10px 16px; }
  .principles-list p { grid-column: 2; }

  .reviews-grid { grid-template-columns: 1fr; margin-top: 56px; }
  .reviews-grid figure:nth-child(2), .reviews-grid figure:nth-child(3) { margin-top: 0; }
  .reviews-grid blockquote { font-size: 27px; }

  .contact { min-height: 88svh; }
  .contact-links { align-items: flex-start; flex-direction: column; margin: 72px 0 100px; }
  .contact-links a { font-size: 22px; overflow-wrap: anywhere; }
  .contact-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}