:root {
  --ink: #11130f;
  --green: #20382f;
  --paper: #efede6;
  --paper-deep: #dfdbd0;
  --brass: #b28b58;
  --line-dark: rgba(239, 237, 230, 0.2);
  --line-light: rgba(17, 19, 15, 0.2);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", Arial, sans-serif;
  --pad: clamp(1.35rem, 3vw, 3.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open, body.modal-open { overflow: hidden; }
button, a { color: inherit; }
button { font: inherit; }
img { display: block; width: 100%; }
a { text-decoration: none; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .8rem 1rem;
  transform: translateY(-150%);
  background: var(--paper);
  color: var(--ink);
}
.skip-link:focus { transform: translateY(0); }

.intro {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: transform 1s var(--ease) .2s;
}
.intro.is-finished { transform: translateY(-105%); }
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .68rem;
  line-height: 1;
}
.brand-lockup img {
  width: 2.15rem;
  height: auto;
  object-fit: contain;
  filter: invert(1);
}
.brand-type {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.brand-type b {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  white-space: nowrap;
}
.brand-type small {
  font-size: .4rem;
  letter-spacing: .28em;
  white-space: nowrap;
}
.brand-lockup-intro {
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  animation: introMark 1.1s var(--ease) both;
}
.brand-lockup-intro img { width: clamp(4.8rem, 8vw, 7rem); height: auto; }
.brand-lockup-intro .brand-type { align-items: center; gap: .42rem; }
.brand-lockup-intro .brand-type b { font-size: clamp(.95rem, 1.6vw, 1.35rem); letter-spacing: .2em; }
.brand-lockup-intro .brand-type small { font-size: clamp(.48rem, .7vw, .62rem); letter-spacing: .34em; }
.intro-line {
  position: absolute;
  right: 8vw;
  bottom: 9vh;
  left: 8vw;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.intro-line i {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: var(--brass);
  animation: introProgress 1.15s var(--ease) both;
}
@keyframes introMark {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes introProgress { to { transform: translateX(0); } }

.scroll-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--brass);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem var(--pad);
  transition: color .4s ease, background .4s ease, transform .4s var(--ease);
  mix-blend-mode: difference;
}
.site-header.is-hidden { transform: translateY(-110%); }
.wordmark {
  flex: 0 0 auto;
}
.desktop-nav { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 3rem); }
.desktop-nav a { position: relative; font-size: .8rem; }
.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -.35rem;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: currentColor;
  transition: transform .45s var(--ease);
}
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 1.6rem;
  height: 1px;
  margin: .38rem auto;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(.2rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-.2rem) rotate(-45deg); }

.nav-panel {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  visibility: hidden;
  padding: 7rem var(--pad) 2rem;
  opacity: 0;
  background: var(--green);
  transition: visibility 0s linear .6s, opacity .5s ease;
}
.nav-panel.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.nav-panel nav { display: flex; flex-direction: column; }
.nav-panel nav a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: .25rem 0;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 15vw, 7rem);
  line-height: .95;
}
.nav-panel nav a span { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; }
.nav-panel-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
  font-size: .75rem;
}

.hero { position: relative; min-height: 100svh; overflow: hidden; background: #24271f; }
.hero-media, .hero-shade { position: absolute; inset: 0; }
.hero-media { transform: scale(1.04); will-change: transform; }
.hero-media img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 49%;
  filter: saturate(.78) contrast(1.04);
  animation: heroZoom 18s ease-out both;
}
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(8,10,7,.72) 0%, rgba(8,10,7,.16) 68%),
    linear-gradient(0deg, rgba(8,10,7,.58) 0%, transparent 50%);
}
.hero-kicker {
  position: absolute;
  z-index: 2;
  top: 9.5rem;
  left: var(--pad);
  display: flex;
  gap: 1.5rem;
  font-size: .67rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-kicker span { position: relative; }
.hero-kicker span + span::before {
  position: absolute;
  top: 50%;
  left: -.82rem;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  content: "";
  background: var(--brass);
}
.hero h1 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--pad);
  width: min(92vw, 78rem);
  margin: 0;
  transform: translateY(-48%);
  font-family: var(--serif);
  font-size: clamp(5rem, 13.5vw, 12.8rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .72;
}
.hero-line { display: block; overflow: hidden; }
.hero-line i {
  display: block;
  font-style: normal;
  transform: translateY(110%);
  animation: heroLine 1.25s var(--ease) 1.15s forwards;
}
.hero-line:nth-child(2) i { animation-delay: 1.28s; }
@keyframes heroLine { to { transform: translateY(0); } }
.hero-line-indent { padding-left: 14vw; font-style: italic; }
.hero-line-indent i { font-style: italic; }
.hero-bottom {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: 2.2rem;
  left: var(--pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.35);
}
.hero-bottom p { max-width: 32rem; margin: 0; font-size: clamp(.95rem, 1.45vw, 1.2rem); }
.hero-locations { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.section-pad { padding: clamp(6rem, 12vw, 11rem) var(--pad); }
.section-label {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-label span { color: var(--brass); }
.section-label p { margin: 0; }
.section-label::after { width: 3.4rem; height: 1px; content: ""; background: currentColor; opacity: .35; }

.philosophy {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 4rem;
  background: var(--ink);
}
.philosophy-copy { display: grid; grid-template-columns: 2.5fr 1fr; gap: clamp(2rem, 5vw, 6rem); }
.eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 1rem;
  color: var(--brass);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.philosophy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 7.2vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .9;
}
.philosophy h2 em { color: var(--brass); font-weight: 400; }
.philosophy-note { align-self: end; }
.philosophy-note p { margin: 0; color: rgba(239,237,230,.7); font-size: clamp(1rem, 1.25vw, 1.15rem); }
.disciplines {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 7rem;
  border-top: 1px solid var(--line-dark);
}
.disciplines span {
  min-height: 5.2rem;
  padding: 1.2rem 1rem 0 0;
  border-right: 1px solid var(--line-dark);
  font-size: .78rem;
}
.disciplines span:not(:first-child) { padding-left: 1rem; }
.disciplines span:last-child { border-right: 0; }

.work { background: var(--paper); color: var(--ink); }
.work-head {
  display: grid;
  grid-template-columns: 1fr 3fr 1.3fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(4rem, 9vw, 9rem);
}
.work-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 11vw, 10rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .72;
}
.work-intro { margin: 0; color: rgba(17,19,15,.67); font-size: .92rem; }
.project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(4.5rem, 8vw, 9rem) clamp(1.2rem, 3vw, 3rem);
  align-items: start;
}
.project-card {
  grid-column: span 6;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.project-card.span-5 { grid-column: span 5; }
.project-card.span-6 { grid-column: span 6; }
.project-card.span-7 { grid-column: span 7; }
.project-card.span-8 { grid-column: span 8; }
.project-card.project-center { grid-column: 3 / span 8; }
.project-shift { margin-top: clamp(2.5rem, 6vw, 7rem); }
.project-visual {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--paper-deep);
}
.project-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,12,9,.66));
  transition: opacity .55s ease;
}
.project-visual img {
  height: auto;
  transform: scale(1.02) translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform 1.1s var(--ease), filter .6s ease;
  will-change: transform;
}
.project-open {
  position: absolute;
  z-index: 2;
  right: 1.2rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  opacity: 0;
  color: var(--paper);
  font-size: .72rem;
  transform: translateY(.7rem);
  transition: opacity .45s ease, transform .45s var(--ease);
}
.project-open i { font-size: 1rem; font-style: normal; }
.project-card:hover .project-visual::after, .project-card:focus-visible .project-visual::after { opacity: 1; }
.project-card:hover .project-visual img, .project-card:focus-visible .project-visual img {
  transform: scale(1.07) translate3d(var(--mx, 0), var(--my, 0), 0);
}
.project-card:hover .project-open, .project-card:focus-visible .project-open {
  opacity: 1;
  transform: translateY(0);
}
.project-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-light);
}
.project-info > span { display: flex; flex-direction: column; }
.project-info b {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -.025em;
}
.project-info small, .project-info em {
  font-size: .68rem;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-info small { margin-top: .25rem; color: rgba(17,19,15,.6); }

.principles { overflow: hidden; padding: 3rem 0 3.5rem; background: var(--brass); color: var(--ink); }
.principles-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2rem;
  animation: marquee 35s linear infinite;
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .9;
  white-space: nowrap;
}
.principles-track i { font-style: normal; opacity: .55; }
@keyframes marquee { to { transform: translateX(-50%); } }

.heritage {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 100svh;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  background: var(--green);
}
.heritage-image { position: relative; }
.heritage-image img { height: auto; object-fit: contain; }
.heritage-image > span, .studio-portrait > span {
  display: block;
  margin-top: .8rem;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.heritage-copy h2 {
  max-width: 12ch;
  margin: 3rem 0 2rem;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 6vw, 6.2rem);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .9;
}
.heritage-copy > p { max-width: 37rem; color: rgba(239,237,230,.7); }
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 4rem 0 3rem;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.metrics span { display: flex; flex-direction: column; padding: 1.1rem 0; border-right: 1px solid var(--line-dark); }
.metrics span:not(:first-child) { padding-left: 1rem; }
.metrics span:last-child { border-right: 0; }
.metrics b { font-family: var(--serif); font-size: clamp(2.3rem, 4vw, 4rem); font-weight: 400; line-height: 1; }
.metrics small {
  margin-top: .35rem;
  color: rgba(239,237,230,.58);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.text-link {
  position: relative;
  display: inline-flex;
  gap: .7rem;
  padding: 0 0 .35rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
}
.text-link i { font-style: normal; }

.studio {
  display: grid;
  grid-template-columns: minmax(17rem, .72fr) 1.28fr;
  gap: clamp(3rem, 9vw, 10rem);
  align-items: center;
  background: var(--paper);
  color: var(--ink);
}
.studio-portrait { max-width: 34rem; }
.studio-portrait img {
  aspect-ratio: .72 / 1;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(.8);
}
.studio-copy h2 {
  max-width: 11ch;
  margin: 3rem 0 2.5rem;
  font-family: var(--serif);
  font-size: clamp(3.7rem, 7.3vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .86;
}
.studio-copy h2 em { color: var(--brass); font-weight: 400; }
.studio-copy > p { max-width: 42rem; color: rgba(17,19,15,.7); }
.studio-copy .studio-lead {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  line-height: 1.2;
}
.studio-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-light);
  font-size: .8rem;
}
.studio-facts span { display: flex; flex-direction: column; }
.studio-facts small {
  margin-bottom: .45rem;
  color: var(--brass);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact {
  min-height: 93svh;
  padding: clamp(6rem, 10vw, 10rem) var(--pad) 2rem;
  background: var(--ink);
}
.contact-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.contact-top > p { max-width: 25rem; margin: 0; color: rgba(239,237,230,.62); font-size: .85rem; }
.contact h2 {
  margin: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 7vw, 7rem);
  font-family: var(--serif);
  font-size: clamp(4.1rem, 10.5vw, 11rem);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .78;
}
.contact h2 em { padding-left: 13vw; color: var(--brass); font-weight: 400; }
.contact-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  font-size: clamp(1.25rem, 3vw, 3rem);
  transition: color .3s ease;
}
.contact-email:hover { color: var(--brass); }
.contact-email i { font-style: normal; }
.contact-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--pad);
  border-top: 1px solid var(--line-dark);
  background: var(--ink);
  font-size: .68rem;
}
footer p { margin: 0; color: rgba(239,237,230,.56); }

.project-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: #fff;
  transform: translateY(100%);
  transition: transform .75s var(--ease), display .75s allow-discrete, overlay .75s allow-discrete;
}
.project-modal[open] { transform: translateY(0); }
@starting-style { .project-modal[open] { transform: translateY(100%); } }
.project-modal::backdrop { background: rgba(0,0,0,.72); }
.modal-close {
  position: fixed;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .9rem;
  border: 1px solid rgba(17,19,15,.25);
  border-radius: 99px;
  background: rgba(239,237,230,.88);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.modal-close span { font-size: 1.3rem; line-height: .8; }
.modal-scroll { min-height: 100%; padding: clamp(5rem, 9vw, 8rem) var(--pad) 6rem; }
.modal-head {
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.modal-head > span { color: var(--brass); font-size: .72rem; }
.modal-head p { margin: 0 0 .6rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.modal-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .82;
}
.modal-head h2.serab-title span { display: block; white-space: nowrap; }
.modal-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  background: #fff;
}
.modal-gallery figure { grid-column: 1; min-width: 0; width: 100%; margin: 0; }
.modal-gallery img { display: block; width: 100%; max-width: none; height: auto; max-height: none; aspect-ratio: auto; background: #fff; }
.modal-gallery .serab-masterplan img { filter: saturate(.48); }
.modal-gallery figcaption { margin-top: .65rem; font-size: .85rem; line-height: 1.5; color: var(--ink); opacity: .65; }
.modal-story {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 8vw, 10rem);
  max-width: 76rem;
  margin: clamp(4rem, 9vw, 9rem) auto 0;
}
.modal-story p { margin: 0; color: rgba(17,19,15,.67); }
.modal-story .modal-lead {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.02;
}

.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity .9s ease, transform 1.1s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .nav-toggle { display: block; }
  .philosophy, .philosophy-copy, .heritage, .studio { grid-template-columns: 1fr; }
  .philosophy-copy { margin-top: 4rem; }
  .disciplines { grid-column: 1; grid-template-columns: 1fr 1fr; }
  .work-head { grid-template-columns: 1fr 3fr; }
  .work-intro { grid-column: 2; }
  .heritage-image { order: 2; }
  .heritage-copy { order: 1; }
  .studio-portrait { order: 2; }
  .studio-copy { order: 1; }
}

@media (max-width: 700px) {
  .site-header { padding-top: 1rem; padding-bottom: 1rem; }
  .site-header .brand-lockup { gap: .32rem; }
  .hero-kicker { top: 7.5rem; gap: 1.2rem; }
  .hero h1 { top: 46%; font-size: clamp(4.5rem, 25vw, 7.6rem); line-height: .78; }
  .hero-line-indent { padding-left: 7vw; }
  .hero-bottom { flex-direction: column; align-items: flex-start; bottom: 1.4rem; gap: .85rem; }
  .hero-locations { font-size: .62rem; }
  .philosophy-copy { display: block; }
  .philosophy h2 { font-size: clamp(3.4rem, 16vw, 5.4rem); }
  .philosophy-note { margin-top: 3rem; max-width: 24rem; }
  .disciplines { margin-top: 4rem; }
  .disciplines span { border-bottom: 1px solid var(--line-dark); }
  .work-head { display: block; }
  .work-head h2 { margin: 3rem 0 2rem; font-size: clamp(5rem, 27vw, 8rem); }
  .work-intro { max-width: 23rem; }
  .project-grid { display: block; }
  .project-card,
  .project-card.span-5,
  .project-card.span-6,
  .project-card.span-7,
  .project-card.span-8,
  .project-center {
    margin: 0 0 5.5rem;
  }
  .project-shift { margin-top: 0; }
  .principles { padding: 2rem 0 2.5rem; }
  .heritage-image img { height: auto; }
  .heritage-copy h2, .studio-copy h2 { margin-top: 2.5rem; }
  .metrics { margin-top: 3rem; }
  .metrics span { padding-right: .6rem; }
  .metrics span:not(:first-child) { padding-left: .6rem; }
  .studio-portrait { margin-top: 2rem; }
  .studio-facts, .modal-story { grid-template-columns: 1fr; }
  .contact-top, .contact-foot { flex-direction: column; }
  .contact h2 { font-size: clamp(4rem, 21vw, 7rem); }
  .contact h2 em { padding-left: 5vw; }
  footer { flex-wrap: wrap; }
  footer p { order: 3; flex-basis: 100%; }
  .modal-head { display: block; }
  .modal-head > span { display: block; margin-bottom: 2rem; }
  .modal-head h2.serab-title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .modal-gallery { gap: 1.25rem; }
}

@media (min-width: 701px) {
  .modal-head {
    width: 70%;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .modal-gallery {
    width: 70%;
    margin-inline: auto;
  }
  .modal-story { width: 70%; }
}

/* Center the desktop portfolio in a canvas 20% wider than the original 820px. */
@media (min-width: 821px) {
  html { background: #000; }
  body { max-width: 984px; margin-inline: auto; }
  .site-header, .nav-panel, .scroll-progress {
    left: max(0px, calc((100vw - 984px) / 2));
    right: max(0px, calc((100vw - 984px) / 2));
  }
  .project-modal {
    width: min(100%, 984px);
    max-width: 984px;
    height: 100dvh;
    max-height: 100dvh;
    margin: auto;
  }
}

/* All tablet and desktop thumbnails share aligned rows and one image ratio. */
@media (min-width: 701px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem 1.5rem;
  }
  .project-grid > .project-card,
  .project-grid > .project-card.project-center {
    grid-column: auto;
    min-width: 0;
    margin: 0;
  }
  .project-grid > .project-card.tree-house-card {
    grid-column: 1 / -1;
    width: calc((100% - 1.5rem) / 2);
    justify-self: center;
  }
  .project-visual { aspect-ratio: 4 / 3; }
  .project-visual > img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }
  .project-info > span { min-width: 0; }
  .project-info b { font-size: clamp(1.45rem, 3vw, 1.85rem); line-height: 1.1; }
}

/* Large monitors use the tablet composition inside the centered page. */
@media (min-width: 901px) {
  :root { --pad: 2.25rem; }
  .desktop-nav { display: none; }
  .nav-toggle { display: block; }
  .section-pad { padding-block: 7rem; }
  .hero h1 {
    top: 46%;
    width: calc(100% - 2 * var(--pad));
    font-size: 7rem;
    line-height: .78;
  }
  .hero-line:first-child { padding-bottom: .12em; margin-bottom: -.12em; }
  .hero-line-indent { padding-left: 7.5rem; }
  .philosophy, .heritage, .studio { grid-template-columns: 1fr; }
  .philosophy-copy { grid-template-columns: 1fr; gap: 2rem; margin-top: 4rem; }
  .philosophy h2 { font-size: 5.4rem; }
  .philosophy-note { max-width: 34rem; }
  .disciplines {
    grid-column: 1;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 4rem;
  }
  .work-head { display: block; }
  .work-head h2 { margin: 3rem 0 2rem; font-size: 7rem; }
  .work-intro { max-width: 34rem; }
  .heritage { min-height: auto; gap: 3rem; }
  .heritage-image { order: 2; }
  .heritage-copy { order: 1; }
  .heritage-copy h2 { font-size: 5rem; }
  .studio-portrait { order: 2; }
  .studio-copy { order: 1; }
  .studio-copy h2 { font-size: 5.5rem; }
  .contact h2 { font-size: 6rem; }
  .contact h2 em { padding-left: 3rem; }
  .modal-head h2 { font-size: 6rem; }
  .modal-story { grid-template-columns: 1fr; }
}

/* Desktop refinements within the centered canvas. */
@media (min-width: 821px) {
  .site-header .brand-lockup { gap: 0; }
  .site-header .brand-type { margin-left: -.75rem; }
  .site-header .brand-type b { font-size: 1.05rem; }
  .site-header .brand-lockup img { width: 5.2rem; }
  .contact-email { font-size: clamp(1rem, 1.5vw, 1.5rem); }

  .principles { padding: 1.4rem 0; }
  .principles-track { font-size: clamp(2rem, 3.8vw, 3.5rem); }

  .studio {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: 2.25rem;
    align-items: start;
  }
  .studio-portrait, .studio-copy { min-width: 0; }
  .studio-portrait { order: 1; max-width: none; }
  .studio-copy { order: 2; }
  .studio-copy h2 {
    max-width: none;
    margin: 1.25rem 0 1.4rem;
    font-size: 3.25rem;
  }
  .studio-copy .studio-lead { font-size: 1.45rem; }
  .studio-facts { margin-top: 2rem; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .intro { display: none; }
  .reveal { opacity: 1; transform: none; }
}