:root {
  --bg: #f2f1ec;
  --surface: #e5e3db;
  --text: #242621;
  --muted: #62645c;
  --border: #b9bcb1;
  --accent: #566147;
  --font-sans: Arial, Helvetica, sans-serif;
  --font-display: Arial, Helvetica, sans-serif;
  --container: 1800px;
  --grid-gap: clamp(24px, 4vw, 72px);
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  --space-2xl: clamp(96px, 11vw, 180px)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font-sans)
}

body.locked {
  overflow: hidden
}

::selection {
  background: var(--accent);
  color: white
}

button,
a {
  -webkit-tap-highlight-color: transparent
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer
}

button,
a {
  touch-action: manipulation
}

button:disabled {
  cursor: default
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px
}

button:hover,
a:hover {
  color: var(--accent)
}

h1,
h2,
h3,
p {
  margin: 0
}

h1,
h2,
h3 {
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.055em
}

h2 {
  font-size: clamp(42px, 6.2vw, 104px)
}

h3 {
  font-size: clamp(28px, 3vw, 48px)
}

.eyebrow,
.caption,
.hero-top,
.hero-bottom,
.plate-top,
.plate-bottom,
.plate-label>span,
.header,
.button,
.hero-links,
.text-link,
.project-meta,
.project-open,
.workflow,
.code-label,
.bim-controls,
.contact-top,
.contact-details>div>span,
footer,
.dialog-bar,
.case-meta,
.case-label {
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase
}

.caption {
  color: var(--muted);
  line-height: 1.6;
  margin: 12px 0 24px
}

.header {
  height: 78px;
  padding: 0 3.3vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border)
}

.brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.03em;
  white-space: nowrap
}

.brand-mark {
  display: none
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 42px)
}

nav a {
  position: relative
}

nav a:after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--text);
  transition: width .25s
}

nav a.active:after,
nav a:hover:after {
  width: 100%
}

.nav-end {
  display: flex;
  gap: 20px;
  align-items: center
}

.languages {
  display: flex;
  gap: 8px
}

.languages button {
  min-height: 44px
}

.languages button[aria-pressed=false] {
  color: var(--muted)
}

.languages button[aria-pressed=true] {
  text-decoration: underline;
  text-underline-offset: 5px
}

.menu-toggle {
  display: none
}

.hero,
.section,
footer {
  max-width: var(--container);
  margin: auto;
  padding-left: 3.3vw;
  padding-right: 3.3vw
}

.hero {
  padding-top: 105px;
  min-height: 100svh;
  display: flex;
  flex-direction: column
}

.hero-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px
}

.hero h1 {
  font-size: clamp(66px, 13.85vw, 250px);
  line-height: .86;
  letter-spacing: -.065em
}

.hero h1>span {
  font-size: clamp(16px, 2.5vw, 40px);
  display: block;
  letter-spacing: -.025em;
  margin: 18px 0 28px
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: var(--grid-gap);
  flex: 1
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0
}

.hero-copy .eyebrow {
  font-size: 12px;
  margin-bottom: 28px
}

.hero-copy h2 {
  font-size: clamp(38px, 4.2vw, 68px)
}

.hero-copy p:not(.eyebrow) {
  margin: 24px 0;
  font-size: 17px;
  color: var(--muted)
}

.button {
  border: 1px solid var(--text);
  padding: 16px 24px;
  display: inline-flex;
  min-height: 48px;
  align-items: center
}

.solid {
  background: var(--text);
  color: var(--bg)
}

.solid:hover {
  background: var(--accent);
  color: white
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px
}

.hero-links a,
.hero-links button {
  min-height: 30px
}

.hero-plate {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  background: #d8dbce;
  border: 1px solid #adb3a1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px
}

.plate-top,
.plate-bottom {
  display: flex;
  justify-content: space-between;
  z-index: 1;
  font-size: 12px
}

.plate-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#43513817 1px, transparent 1px), linear-gradient(90deg, #43513817 1px, transparent 1px);
  background-size: 36px 36px
}

.plate-circle {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border: 1px solid #586548;
  left: 36%;
  top: -10%;
  border-radius: 50%
}

.plate-circle:after {
  content: '';
  position: absolute;
  inset: 15%;
  border: 1px solid #586548;
  border-radius: 50%
}

.plate-square {
  position: absolute;
  inset: 20% 10% 10% 50%;
  border: 1px solid #586548;
  transform: rotate(-25deg);
  background: repeating-linear-gradient(90deg, transparent 0 12px, #58654835 12px 13px)
}

.plate-cross {
  position: absolute;
  font-size: 22px;
  color: var(--accent)
}

.cross-one {
  left: 25%;
  top: 20%
}

.cross-two {
  right: 12%;
  bottom: 15%
}

.plate-label {
  position: relative;
  padding: 30px 0
}

.plate-label strong {
  display: block;
  font-weight: 400;
  font-size: clamp(50px, 6vw, 100px);
  letter-spacing: -.065em;
  line-height: .95;
  margin-top: 14px
}

.plate-label>span {
  font-size: 12px
}

.hero-bottom {
  margin: 28px 0 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px
}

.hero-bottom>div {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.hero-bottom .roles {
  max-width: 330px;
  font-size: 12px;
  color: var(--muted)
}

.section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-lg)
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--grid-gap);
  align-items: start;
  margin-bottom: 64px
}

.eyebrow {
  display: flex;
  gap: 24px;
  line-height: 1.5
}

.section-heading>p {
  padding-top: 8px;
  color: var(--muted)
}

.section-heading.compact {
  grid-template-columns: 1fr 3fr
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 80px var(--grid-gap)
}

.project {
  grid-column: span 6;
  min-width: 0
}

.project:nth-child(1) {
  grid-column: span 8
}

.project:nth-child(2) {
  grid-column: span 4;
  margin-top: 130px
}

.project:nth-child(3) {
  grid-column: span 5
}

.project:nth-child(4) {
  grid-column: 7/span 6;
  margin-top: 100px
}

.project:nth-child(5) {
  grid-column: span 8
}

.project:nth-child(6) {
  grid-column: span 4;
  margin-top: 80px
}

.project-visual {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: left
}

.placeholder {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid #bbbdb2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  color: #44483c;
  transition: transform .6s
}

.placeholder:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent calc(50% - .5px), #57614c35 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), #57614c35 50%, transparent calc(50% + .5px));
  pointer-events: none
}

.placeholder:after {
  content: '';
  position: absolute;
  inset: 19% 22%;
  border: 1px solid #66705c66;
  pointer-events: none
}

.placeholder .ph-top,
.placeholder .ph-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  letter-spacing: .035em;
  text-transform: uppercase;
  z-index: 1
}

.placeholder .ph-number {
  align-self: center;
  font-weight: 400;
  font-size: clamp(80px, 14vw, 230px);
  line-height: .8;
  letter-spacing: -.08em;
  opacity: .7;
  z-index: 1
}

.tone-1 {
  background: #d8d8c9
}

.tone-2 {
  background: #d7d0c8
}

.tone-3 {
  background: #c9d0c1
}

.tone-4 {
  background: #d4d5d2
}

.tone-5 {
  background: #c7c9bf
}

.tone-6 {
  background: #333a32;
  color: #d6dccc;
  border-color: #5b6558
}

.tone-6:after {
  border-color: #b4bca477
}

.project:nth-child(2) .placeholder,
.project:nth-child(6) .placeholder {
  aspect-ratio: 4/5
}

.project:nth-child(3) .placeholder {
  aspect-ratio: 1
}

.project-visual:hover .placeholder {
  transform: scale(1.025)
}

.project-visual img,
.gallery-button img,
.lightbox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.project-title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 18px 0 10px
}

.project-title>span {
  font-size: 12px
}

.project-title h3 {
  font-size: clamp(25px, 2.5vw, 40px);
  letter-spacing: -.04em
}

.project-meta {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px
}

.project-desc {
  margin: 16px 0 8px;
  font-size: 15px;
  max-width: 550px;
  color: var(--muted)
}

.project-tools {
  font-size: 12px;
  margin: 8px 0;
  color: var(--muted)
}

.software-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.software-badges li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: #fff9;
  border: 1px solid #ffffffa6;
  border-radius: 18px;
  box-shadow: 0 2px 5px #20251f04, 0 8px 24px #20251f08;
  transition: transform .2s, box-shadow .2s;
}

.software-badges li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px #20251f14;
}

.software-badges img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.project .software-badges {
  gap: 8px;
  margin: 14px 0;
}

.project .software-badges li {
  width: 48px;
  height: 48px;
  border-radius: 13px;
}

.project .software-badges img {
  width: 44px;
  height: 44px;
}

.project-open,
.text-link {
  display: inline-block;
  padding: 9px 0;
  border-bottom: 1px solid var(--text);
  min-height: 40px;
  font-size: 12px
}

.profile {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--grid-gap);
  border-top: 1px solid var(--border);
  margin-top: 70px
}

.profile h2 {
  font-size: clamp(36px, 4.8vw, 80px)
}

.large-copy {
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.4;
  letter-spacing: -.025em;
  max-width: 1000px;
  margin: 44px 0
}

.profile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px
}

.expertise-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.4fr;
  gap: var(--grid-gap);
  padding: 36px 0;
  border-top: 1px solid var(--border)
}

.expertise-row>span {
  font-size: 14px
}

.expertise-row h3 {
  font-size: clamp(28px, 3.7vw, 60px)
}

.expertise-row p {
  color: var(--muted);
  line-height: 1.9
}

.computation {
  background: #252a24;
  color: #eeefe8;
  max-width: none;
  margin-top: 60px;
  padding-bottom: 100px
}

.computation>.section-heading,
.computation>.workflow,
.computation>.compute-grid,
.computation>.bim-section {
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto
}

.computation .section-heading>p,
.computation .caption {
  color: #b9c0b2
}

.computation button:hover {
  color: #c4d4b0
}

.computation .text-link {
  border-color: #a6b19b
}

.workflow {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  border-top: 1px solid #62685c;
  border-bottom: 1px solid #62685c;
  padding: 20px 0;
  gap: 24px
}

.compute-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  padding-top: 50px
}

.mini-heading {
  display: flex;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 30px
}

.mini-heading>span {
  font-size: 12px
}

.mini-heading h3 {
  font-size: 30px
}

.nodes {
  min-height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 25px), repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 25px);
  padding: 20px
}

.nodes>span {
  padding: 12px;
  border: 1px solid #939f85;
  font-size: 14px;
  background: #252a24
}

.nodes small {
  display: block;
  color: #b7c4a8;
  font-size: 12px
}

.nodes i {
  width: 30px;
  min-width: 8px;
  height: 1px;
  background: #939f85
}

.workflow-details {
  margin: 30px 0
}

.workflow-details>div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  border-top: 1px solid #515b49;
  padding: 12px 0;
  font-size: 14px
}

.workflow-details dt {
  color: #b9c0b2
}

.workflow-details dd {
  margin: 0
}

.code-label {
  background: #343c31;
  padding: 12px 20px;
  color: #d9dfd2
}

pre {
  font-size: 12px;
  line-height: 1.75;
  overflow: auto;
  margin: 0;
  padding: 20px;
  background: #1f241e;
  tab-size: 4
}

.syntax-key {
  color: #c5d1ae
}

.syntax-string {
  color: #d4bb97
}

.script-flow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  color: #c0c8b8
}

.bim-section {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--grid-gap);
  border-top: 1px solid #62685c;
  margin-top: 75px !important;
  padding-top: 60px
}

.bim-section h3 {
  font-size: clamp(34px, 4vw, 60px);
  margin: 24px 0
}

.bim-section p {
  max-width: 450px;
  color: #bcc4b4
}

.bim-links {
  display: flex;
  gap: 30px;
  margin: 24px 0
}

.bim-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.bim-controls button {
  border: 1px solid #8d9980;
  padding: 10px 16px;
  min-height: 44px
}

.bim-controls button[aria-pressed=true] {
  background: #d9e0d1;
  color: #262d20
}

.bim-controls button:before {
  content: '−';
  margin-right: 8px
}

.bim-controls button[aria-pressed=true]:before {
  content: '+'
}

.bim-view {
  position: relative;
  height: 300px;
  margin-top: 20px;
  overflow: hidden;
  background: #30372b
}

.bim-layer {
  position: absolute;
  inset: 20% 20%;
  transform: skewY(-12deg);
  transition: opacity .3s
}

.bim-layer.hidden {
  opacity: 0
}

.arch i {
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid #c7d3bb;
  height: 24%
}

.arch i:nth-child(1) {
  top: 0
}

.arch i:nth-child(2) {
  top: 25%
}

.arch i:nth-child(3) {
  top: 50%
}

.arch i:nth-child(4) {
  top: 75%
}

.structure {
  inset: 12% 25%
}

.structure i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #a19c89
}

.structure i:nth-child(1) {
  left: 0
}

.structure i:nth-child(2) {
  left: 33%
}

.structure i:nth-child(3) {
  left: 66%
}

.structure i:nth-child(4) {
  left: 100%
}

.mep {
  inset: 22% 15%
}

.mep i {
  position: absolute;
  left: 0;
  right: 0;
  height: 15%;
  border: 2px dashed #88a17a
}

.mep i:nth-child(1) {
  top: 10%
}

.mep i:nth-child(2) {
  top: 43%
}

.mep i:nth-child(3) {
  top: 76%
}

.bim-caption {
  position: absolute;
  bottom: 15px;
  left: 20px;
  font-size: 12px;
  color: #bfc9b5
}

.index-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px
}

.index-table th {
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 12px;
  border-bottom: 1px solid var(--text)
}

.index-table td {
  padding: 24px 12px;
  border-bottom: 1px solid var(--border)
}

.index-table th:first-child,
.index-table td:first-child {
  padding-left: 0
}

.index-table button {
  text-align: left;
  font-size: 18px;
  letter-spacing: -.03em;
  min-height: 44px
}

.index-table td:last-child {
  font-size: 12px
}

.experience {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--grid-gap)
}

.experience h2 {
  font-size: 36px;
  margin-bottom: 28px
}

.experience-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--border)
}

.experience-row>span {
  font-size: 13px
}

.experience-row h3 {
  font-size: 23px;
  letter-spacing: -.02em;
  margin-bottom: 8px
}

.experience-row p {
  color: var(--muted);
  font-size: 14px
}

.experience-row small {
  display: block;
  color: var(--muted);
  margin-top: 14px
}

.education-title {
  margin-top: 60px
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  border-top: 1px solid var(--border);
  padding-top: 28px
}

.tools-grid h3 {
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px
}

.tools-grid p {
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.6;
  letter-spacing: -.03em
}

.contact {
  margin-top: 80px;
  background: #dadfd1;
  padding-top: 50px;
  padding-bottom: 64px
}

.contact-top {
  display: flex;
  justify-content: space-between;
  gap: 24px
}

.contact h2 {
  font-size: clamp(65px, 12.5vw, 205px);
  margin: 65px 0 30px
}

.contact>p {
  font-size: 20px;
  max-width: 510px
}

.contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: 64px;
  border-top: 1px solid #abb49d;
  padding-top: 30px
}

.contact-details>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.contact-details strong {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: -.03em;
  margin: 12px 0
}

.contact-details button {
  font-size: 12px;
  text-transform: uppercase;
  min-height: 44px;
  border-bottom: 1px solid
}

.contact-details button:disabled {
  opacity: .55;
  border-bottom-color: transparent
}

footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: 12px
}

footer>div {
  font-size: 16px;
  letter-spacing: -.025em
}

footer>div>span {
  display: block;
  font-size: 12px;
  letter-spacing: .02em;
  margin-top: 8px
}

footer>span {
  color: var(--muted)
}

.skip {
  position: fixed;
  left: 20px;
  top: -100px;
  z-index: 100;
  background: var(--bg);
  padding: 12px
}

.skip:focus {
  top: 10px
}

dialog {
  color: var(--text);
  background: var(--bg);
  border: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none
}

dialog::backdrop {
  background: #151912df
}

.project-dialog {
  width: 100%;
  height: 100%;
  overflow: auto
}

.project-dialog[data-project="la-cuadra"] {
  --project-accent: #eab6cc;
}

.project-dialog[data-project="museum"] {
  --project-accent: #c9d0c1;
}

.project-dialog[data-project="environmental"] {
  --project-accent: #c9d0c1;
}

.project-dialog[data-project="la-cuadra"] .dialog-bar,
.project-dialog[data-project="environmental"] .dialog-bar,
.project-dialog[data-project="museum"] .dialog-bar {
  background: var(--project-accent);
}

.project-dialog[data-project="la-cuadra"] .case-head,
.project-dialog[data-project="environmental"] .case-head,
.project-dialog[data-project="museum"] .case-head {
  background: var(--project-accent);
  max-width: none;
  margin-bottom: 40px;
  padding-left: max(4vw, calc((100% - 1500px) / 2 + 4vw));
  padding-right: max(4vw, calc((100% - 1500px) / 2 + 4vw));
}

.case-meta:has(>div:only-child) {
  grid-template-columns: minmax(0, 700px);
}

.case-meta-documented:has(>div:nth-child(3)) {
  grid-template-columns: 2fr 1fr 1.5fr;
}

@media (max-width: 800px) {
  .case-meta-documented:has(>div:nth-child(3)) {
    grid-template-columns: 1fr 1fr;
  }
  .case-meta-documented:has(>div:nth-child(3)) >div:first-child {
    grid-column: 1 / -1;
  }
}

.dialog-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  padding: 18px 4vw;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border)
}

.dialog-bar button,
.lightbox-top button {
  min-height: 44px;
  min-width: 60px
}

.case-head,
.case-body {
  max-width: 1500px;
  margin: auto;
  padding: 50px 4vw
}

.case-head h2 {
  font-size: clamp(42px, 8vw, 120px);
  max-width: 1100px;
  margin: 20px 0 35px
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px
}

.case-meta dt {
  color: var(--muted);
  margin-bottom: 8px
}

.case-meta dd {
  margin: 0
}

.case-hero {
  margin: 0 4vw
}

.case-hero .placeholder {
  aspect-ratio: 21/8
}

.case-body {
  padding-top: 70px
}

.case-block {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--grid-gap);
  padding: 36px 0;
  border-top: 1px solid var(--border)
}

.case-block h3 {
  font-size: 24px;
  letter-spacing: -.02em
}

.case-block p {
  font-size: 18px;
  max-width: 850px
}

.diagram-carousel {
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
}

.case-block.case-block-diagrams,
.case-block.case-block-images {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 48px 0;
}
.case-block-diagrams h3,
.case-block-images h3 { font-size: clamp(26px, 3vw, 42px); }
.case-block-images h3 { margin-bottom: 28px; }
.case-block-diagrams .diagram-hint {
  max-width: none;
  margin: 12px 0 24px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.diagram-hint >span { font-size: 22px; }

.case-block >div { min-width: 0; }

.diagram-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  position: relative;
  gap: clamp(20px, 3vw, 48px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.diagram-track::-webkit-scrollbar { display: none; }
.diagram-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.diagram-slide {
  flex: 0 0 82%;
  min-width: 0;
  background: var(--bg);
  opacity: 1;
}
.diagram-slide.is-current { opacity: 1; }
.diagram-slide .gallery-button { cursor: inherit; }
.diagram-slide img {
  width: 100%;
  height: min(64vh, 640px);
  object-fit: contain;
  padding: 24px 0;
  mix-blend-mode: multiply;
}
.diagram-slide .gallery-button .caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 14px 0 20px;
  font-size: 12px;
}
.diagram-slide .caption >span:last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
@media(max-width:540px) {
  .case-block-diagrams { gap: 0; padding: 32px 0; }
  .diagram-slide img { height: 48vh; padding: 16px 0; }
  .diagram-slide { flex-basis: 90%; }
}

.lightbox.diagram-viewer { background: var(--bg); color: var(--text); }
.diagram-viewer #lightbox-visual img { mix-blend-mode: multiply; }
.diagram-viewer .zoom-controls { border-color: var(--border); background: #20251f04; }
.diagram-viewer .zoom-controls button[data-zoom-reset] { border-color: var(--border); }
.diagram-viewer .zoom-controls button:hover { background: #20251f0a; }
.diagram-viewer button:hover { color: var(--muted); }
.case-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
}

.case-gallery .placeholder {
  padding: 16px
}

.case-gallery .ph-number {
  font-size: 100px
}

.gallery-button {
  width: 100%;
  display: block;
  text-align: left
}

.gallery-button .caption {
  display: block
}

.case-end {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  gap: 24px
}

.lightbox {
  background: #20251f;
  color: var(--bg);
  width: 100%;
  height: 100%;
  padding: 20px 4vw;
  flex-direction: column
}

.lightbox[open] {
  display: flex
}

.lightbox-top,
.lightbox-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px
}

.lightbox-top {
  font-size: 14px
}

.lightbox-bottom {
  padding: 20px 0;
  font-size: 14px
}

.lightbox-bottom>div {
  text-align: center
}

.lightbox-bottom>div>span {
  display: block
}

.lightbox-bottom button {
  min-width: 70px;
  min-height: 44px
}

.lightbox button:hover {
  color: #cbd7bd
}

#lightbox-visual {
  min-height: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: zoom-in;
  margin: 16px 0;
}

#lightbox-visual .placeholder {
  width: min(100%, 1200px);
  max-height: 100%;
  aspect-ratio: 16/10
}

#lightbox-visual img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform-origin: center;
}

#lightbox-visual.is-zoomed { cursor: grab; }
#lightbox-visual.is-zoomed.is-dragging { cursor: grabbing; }

.zoom-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 5px;
  border: 1px solid #ffffff30;
  border-radius: 100px;
  background: #ffffff0a;
}

.zoom-controls button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 100px;
  font-size: 22px;
}

.zoom-controls button[data-zoom-reset] {
  padding: 0 16px;
  font-size: 12px;
  border-left: 1px solid #ffffff30;
  border-radius: 0 100px 100px 0;
}

.zoom-controls button:hover { background: #ffffff12; }
.zoom-controls button:disabled { opacity: .35; cursor: default; }
#zoom-level { min-width: 55px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--text);
  color: var(--bg);
  padding: 16px 24px;
  font-size: 14px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  max-width: 90vw;
  transition: opacity .2s, transform .2s
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

#cursor {
  display: none;
  pointer-events: none;
  position: fixed;
  z-index: 90;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-transform: uppercase;
  transform: translate(-50%, -50%)
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s, transform .7s
}

.reveal.visible {
  opacity: 1;
  transform: none
}

.no-script {
  padding: 30px;
  background: var(--surface)
}

::-webkit-scrollbar {
  width: 8px
}

::-webkit-scrollbar-thumb {
  background: #909782
}

::-webkit-scrollbar-track {
  background: var(--bg)
}

@media(min-width:1800px) {
  .header {
    padding-left: max(3.3vw, calc((100vw - 1680px)/2));
    padding-right: max(3.3vw, calc((100vw - 1680px)/2))
  }
}

@media(max-width:1100px) {
  nav {
    gap: 18px
  }

  .hero-grid {
    grid-template-columns: 1fr 1.35fr
  }

  .hero-bottom .roles {
    display: none
  }

  .section-heading {
    grid-template-columns: 1fr 2fr
  }

  .section-heading>p {
    grid-column: 2
  }

  .project-grid {
    gap: 60px 28px
  }

  .profile,
  .experience {
    grid-template-columns: 1fr 2.5fr
  }

  .expertise-row {
    grid-template-columns: .35fr 1.4fr 1fr
  }

  .case-meta {
    grid-template-columns: repeat(3, 1fr)
  }

  .nodes {
    padding: 12px
  }

  .nodes>span {
    font-size: 12px;
    padding: 9px
  }

  .workflow {
    font-size: 12px
  }

  .bim-section {
    grid-template-columns: 1fr 1.3fr
  }

  .index-table td,
  .index-table th {
    padding-left: 8px;
    padding-right: 8px
  }

  .index-table td:last-child {
    max-width: 160px
  }
}

@media(max-width:800px) {
  .header {
    height: 68px;
    padding: 0 24px
  }

  .menu-toggle {
    display: block;
    min-height: 44px
  }

  .header nav {
    display: none;
    position: fixed;
    inset: 68px 0 0;
    background: var(--bg);
    padding: 35px 24px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px
  }

  .header.menu-open nav {
    display: flex
  }

  .header nav a,
  .header nav>button {
    font-size: clamp(28px, 6vw, 48px);
    line-height: 1.2;
    text-transform: none;
    letter-spacing: -.045em
  }

  .hero,
  .section,
  footer {
    padding-left: 24px;
    padding-right: 24px
  }

  .hero {
    padding-top: 90px
  }

  .hero h1 {
    font-size: 13.4vw
  }

  .hero h1>span {
    margin-top: 14px
  }

  .hero-grid {
    gap: 24px;
    grid-template-columns: 1fr 1.25fr
  }

  .hero-copy h2 {
    font-size: 36px
  }

  .hero-copy .eyebrow {
    font-size: 12px
  }

  .hero-plate {
    min-height: 360px;
    padding: 16px
  }

  .plate-top,
  .plate-bottom {
    font-size: 12px
  }

  .hero-copy p:not(.eyebrow) {
    font-size: 16px
  }

  .hero-links {
    gap: 16px
  }

  .hero-bottom {
    font-size: 12px
  }

  .section {
    padding-top: 95px
  }

  .section-heading,
  .section-heading.compact {
    grid-template-columns: 1fr 2.5fr;
    gap: 24px;
    margin-bottom: 40px
  }

  .section-heading .eyebrow {
    gap: 12px
  }

  .section-heading h2 {
    font-size: 46px
  }

  .project:nth-child(1),
  .project:nth-child(5) {
    grid-column: span 7
  }

  .project:nth-child(2),
  .project:nth-child(6) {
    grid-column: span 5;
    margin-top: 70px
  }

  .project:nth-child(3) {
    grid-column: span 6
  }

  .project:nth-child(4) {
    grid-column: span 6;
    margin-top: 70px
  }

  .placeholder {
    padding: 16px
  }

  .placeholder .ph-top,
  .placeholder .ph-bottom {
    font-size: 12px
  }

  .project-title {
    gap: 10px
  }

  .project-title h3 {
    font-size: 26px
  }

  .project-meta {
    font-size: 12px;
    gap: 6px 12px
  }

  .profile,
  .experience {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .profile h2 {
    font-size: 42px
  }

  .expertise-row {
    grid-template-columns: 40px 1fr
  }

  .expertise-row p {
    grid-column: 2
  }

  .compute-grid,
  .bim-section {
    grid-template-columns: 1fr;
    gap: 50px
  }

  .computation .section-heading>p {
    grid-column: 2
  }

  .nodes {
    min-height: 200px
  }

  .nodes>span {
    padding: 16px;
    font-size: 14px
  }

  .workflow {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .tools-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px
  }

  .tools-grid p {
    font-size: 27px
  }

  .index-table thead {
    display: none
  }

  .index-table,
  .index-table tbody {
    display: block
  }

  .index-table tr {
    display: grid;
    grid-template-columns: 35px 1fr 1fr;
    gap: 8px 16px;
    border-top: 1px solid var(--border);
    padding: 20px 0
  }

  .index-table td {
    display: block;
    border: 0;
    padding: 0 !important;
    font-size: 12px
  }

  .index-table td:first-child {
    grid-column: 1;
    grid-row: 1
  }

  .index-table td:nth-child(2) {
    grid-column: 2/4
  }

  .index-table td:nth-child(3) {
    grid-column: 2/4
  }

  .index-table td:nth-child(4) {
    grid-column: 2
  }

  .index-table td:nth-child(6) {
    grid-column: 2/4;
    max-width: none
  }

  .index-table button {
    font-size: 22px;
    min-height: 30px
  }

  .contact-top {
    font-size: 12px
  }

  .contact h2 {
    font-size: 12.5vw
  }

  .contact-details {
    gap: 24px
  }

  .contact-details strong {
    font-size: 17px
  }

  footer {
    flex-wrap: wrap
  }

  footer>span {
    font-size: 12px
  }

  .case-block {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .case-gallery .ph-number {
    font-size: 80px
  }

  .case-head,
  .case-body {
    padding-left: 24px;
    padding-right: 24px
  }

  .case-hero {
    margin: 0 24px
  }

  .case-hero .placeholder {
    aspect-ratio: 16/10
  }
}

@media(max-width:540px) {
  .header {
    padding: 0 20px;
    gap: 12px
  }

  .brand {
    font-size: 13px
  }

  .nav-end {
    gap: 18px
  }

  .languages {
    font-size: 12px
  }

  .hero,
  .section,
  footer {
    padding-left: 20px;
    padding-right: 20px
  }

  .hero-top {
    font-size: 12px
  }

  .hero h1 {
    font-size: 13.1vw
  }

  .hero h1>span {
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 24px
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .hero-copy {
    padding: 0
  }

  .hero-copy .eyebrow {
    margin-bottom: 20px
  }

  .hero-copy h2 {
    font-size: 43px
  }

  .hero-copy p:not(.eyebrow) {
    margin: 20px 0
  }

  .hero-copy .button {
    font-size: 12px;
    padding: 14px 20px
  }

  .hero-links {
    font-size: 12px;
    margin-top: 12px
  }

  .hero-plate {
    min-height: 300px
  }

  .plate-label strong {
    font-size: 62px
  }

  .hero-bottom {
    align-items: start;
    font-size: 12px;
    gap: 16px;
    margin-top: 20px
  }

  .hero-bottom>div {
    max-width: 200px
  }

  .hero-bottom>a {
    max-width: 75px
  }

  .section-heading,
  .section-heading.compact {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .section-heading h2 {
    font-size: 50px
  }

  .section-heading>p,
  .computation .section-heading>p {
    grid-column: 1
  }

  .section-heading>p {
    font-size: 16px
  }

  .project-grid {
    display: block
  }

  .project {
    margin: 0 0 50px !important
  }

  .project .placeholder {
    aspect-ratio: 16/12 !important
  }

  .project .ph-number {
    font-size: 125px
  }

  .project-title h3 {
    font-size: 30px
  }

  .project-meta {
    font-size: 12px
  }

  .project-desc {
    font-size: 16px
  }

  .profile {
    margin-top: 0
  }

  .profile h2 {
    font-size: 38px
  }

  .large-copy {
    font-size: 23px;
    margin: 30px 0
  }

  .expertise-row {
    grid-template-columns: 24px 1fr;
    gap: 16px
  }

  .expertise-row h3 {
    font-size: 34px
  }

  .expertise-row p {
    font-size: 16px
  }

  .computation {
    margin-top: 10px
  }

  .mini-heading {
    gap: 16px
  }

  .mini-heading h3 {
    font-size: 26px
  }

  .nodes {
    padding: 12px 6px
  }

  .nodes>span {
    font-size: 12px;
    padding: 10px 8px
  }

  .nodes i {
    width: 15px
  }

  .nodes small {
    font-size: 12px
  }

  .workflow-details>div {
    grid-template-columns: 90px 1fr;
    font-size: 13px;
    gap: 12px
  }

  pre {
    padding: 16px 10px;
    font-size: 12px
  }

  .script-flow {
    flex-direction: column;
    gap: 8px
  }

  .bim-links {
    gap: 20px
  }

  .bim-view {
    height: 250px
  }

  .bim-controls {
    gap: 8px
  }

  .bim-controls button {
    font-size: 12px;
    padding: 10px 12px
  }

  .experience-row {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .tools-grid {
    gap: 32px 20px
  }

  .tools-grid p {
    font-size: 23px
  }

  .contact {
    margin-top: 40px
  }

  .contact-top {
    flex-direction: column;
    gap: 20px
  }

  .contact h2 {
    font-size: 16vw;
    margin: 42px 0 24px
  }

  .contact>p {
    font-size: 18px
  }

  .contact-details {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 38px
  }

  .contact-details strong {
    font-size: 23px
  }

  .contact-details>div {
    border-bottom: 1px solid #b7c0ac;
    padding-bottom: 20px
  }

  footer {
    gap: 30px
  }

  footer>span {
    order: 3;
    width: 100%;
    font-size: 12px
  }

  footer>a {
    font-size: 12px
  }

  .case-head h2 {
    font-size: 45px
  }

  .case-meta {
    grid-template-columns: 1fr 1fr
  }

  .case-gallery {
    grid-template-columns: 1fr
  }

  .case-head,
  .case-body {
    padding-left: 20px;
    padding-right: 20px
  }

  .case-hero {
    margin: 0 20px
  }

  .case-meta {
    font-size: 12px
  }

  .case-end {
    flex-direction: column
  }

  .lightbox-top {
    font-size: 12px
  }

  .lightbox-bottom {
    gap: 12px;
    font-size: 12px
  }

  .lightbox-bottom button {
    min-width: 55px
  }

  .lightbox .ph-number {
    font-size: 120px
  }

  .lightbox .placeholder {
    padding: 14px
  }

  .lightbox .ph-bottom {
    font-size: 12px
  }

  .plate-top,
  .plate-bottom,
  .placeholder .ph-top,
  .placeholder .ph-bottom {
    font-size: 12px
  }

  .ph-bottom span:first-child {
    max-width: 75%
  }
}

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

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }

  #cursor {
    display: none !important
  }
}

/* Stable image frames when real project assets replace placeholders. */
.project-visual {
  aspect-ratio: 16 / 10;
}

.project:nth-child(2) .project-visual,
.project:nth-child(6) .project-visual {
  aspect-ratio: 4 / 5;
}

.project:nth-child(3) .project-visual {
  aspect-ratio: 1;
}

.project-visual>.placeholder {
  height: 100%;
  aspect-ratio: auto;
}

.case-gallery .gallery-button>img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.case-hero img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.case-gallery .gallery-button>img.is-portrait,
.case-hero img.is-portrait {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(80vh, 900px);
  max-height: min(80svh, 900px);
  margin: 0 auto;
  object-fit: contain;
}

.case-gallery .gallery-button.gallery-axon>img {
  width: auto;
  max-width: 100%;
  max-height: min(76vh, 820px);
  max-height: min(76svh, 820px);
  margin: 0 auto;
}

.case-gallery .gallery-plan>img,
.case-gallery .gallery-section>img,
.case-gallery .gallery-concept>img,
.case-gallery .gallery-structure>img,
.case-gallery .gallery-phase>img,
.case-gallery .gallery-axon>img {
  object-fit: contain;
  background: #fff;
}

@media (max-width: 540px) {
  .project .project-visual {
    aspect-ratio: 16 / 12;
  }
}

/* La Cuadra: combine portrait and landscape photographs at matching heights. */
.cuadra-photo-gallery { gap: clamp(28px, 4vw, 56px); }
.composed-gallery { gap: clamp(28px, 4vw, 56px); }
.coordination-head { padding-top: 24px; padding-bottom: 24px; }
.header #navigation>a,
.header #navigation>button,
.header .languages button,
.header .menu-toggle {
  font-family: var(--font, Arial, sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}
.header #navigation { gap: clamp(8px, 1.5vw, 24px); }
.header #navigation>button::after { content:''; position:absolute; left:4px; right:4px; bottom:1px; height:2px; background:var(--text); transform:scaleX(0); transition:transform .25s; }
.header #navigation>button:hover::after,
.header #navigation>button[aria-expanded="true"]::after { transform:scaleX(1); }
.header #navigation>a::after { bottom:1px; }
@media(min-width:801px){.header .menu-toggle{display:none}}
.index-drawer { margin: 0 0 0 auto; width: min(100%,1000px); max-width: 100%; height: 100svh; max-height: 100svh; padding: clamp(24px,4vw,56px); border: 0; background: var(--bg); color: var(--ink); overflow: auto; }
.index-drawer::backdrop { background: #1f282766; backdrop-filter: blur(5px); }
.index-drawer[open] { animation: index-arrive .25s ease-out; }
.index-drawer-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:28px; border-bottom:1px solid #c8cdc1; margin-bottom:32px; }
.index-drawer-top button { background:transparent; border:1px solid #a8b49f; padding:10px 18px; color:inherit; cursor:pointer; }
.index-drawer h2 { font-size:clamp(36px,5vw,64px); }
.index-drawer #project-index { overflow-x:auto; padding-bottom:20px; }
@keyframes index-arrive { from { transform:translateX(30px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@media(prefers-reduced-motion:reduce){.index-drawer[open]{animation:none}}
.coordination-head h2 { font-size: clamp(42px, 6vw, 76px); margin-top: 12px; margin-bottom: 0; }
.coordination-entry { background: #dce2d6; padding: clamp(28px,5vw,64px); min-height: 280px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; }
.coordination-cover { width: 100%; aspect-ratio: 16 / 10; background: #dce2d6; color: #53634b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; }
.coordination-cover svg { width: 35%; max-height: 180px; }
.coordination-cover strong { font-size: 14px; font-weight: 500; }
.coordination-frame { display: block; width: 100%; height: 78svh; min-height: 580px; border: 0; background: #efeee9; }
@media(max-width:700px) { .coordination-frame { height: 85svh; min-height: 680px; } }
.composed-gallery-row {
  display: grid;
  gap: clamp(12px, 1.6vw, 24px);
  align-items: start;
}
.composed-gallery-row .gallery-button { min-width: 0; }
.composed-gallery-stack { display: grid; gap: clamp(18px, 2vw, 28px); min-width: 0; }
.case-gallery .composed-gallery-row .gallery-button>img,
.case-gallery .composed-gallery-row .gallery-button>img.is-portrait,
.case-gallery .composed-gallery-row .gallery-button.gallery-axon>img {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: var(--image-ratio);
  object-fit: contain;
  margin: 0;
}
.composed-gallery-row .caption { font-size: 12px; margin: 12px 0 0; }
[data-project="museum"] .composed-gallery-row:first-child {
  width: min(100%, calc(76svh * 1.202));
  justify-self: center;
}
@media (max-width: 700px) {
  [data-project="museum"] .composed-gallery-row:first-child {
    width: 100%;
    grid-template-columns: 2.87fr 1fr !important;
  }
  .composed-gallery-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .composed-gallery-row .gallery-button:nth-child(3) { grid-column: 1 / -1; }
  .case-gallery .composed-gallery-row .gallery-button.gallery-axon>img {
    width: auto; max-width: 100%; max-height: 60svh; margin: 0 auto;
  }
  .composed-gallery-row.is-single,
  .composed-gallery-row:has(.composed-gallery-stack) { grid-template-columns: minmax(0,1fr) !important; }
}
.cuadra-photo-row {
  display: grid;
  gap: clamp(12px, 1.6vw, 24px);
  align-items: start;
}
.cuadra-photo-row .gallery-button { min-width: 0; }
.case-gallery .cuadra-photo-row .gallery-button>img,
.case-gallery .cuadra-photo-row .gallery-button>img.is-portrait {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: var(--image-ratio);
  object-fit: contain;
  margin: 0;
}
.cuadra-photo-row .caption {
  font-size: 12px;
  margin: 12px 0 0;
}
@media(max-width:700px) {
  .cuadra-photo-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .cuadra-photo-row .gallery-button:nth-child(3),
  .cuadra-photo-row .gallery-button:only-child { grid-column: 1 / -1; }
  .cuadra-photo-row:first-child { grid-template-columns: minmax(0,1fr) !important; }
}

/* Compact image controls with consistent icon strokes and touch targets. */
.lightbox .zoom-controls{gap:0;padding:2px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff24}
.lightbox .zoom-controls button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:9px;font-size:14px}
.lightbox .zoom-controls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lightbox .zoom-controls button[data-zoom-reset]{padding:0;border-radius:0 9px 9px 0;border-left:1px solid #ffffff24;margin-left:6px}
.lightbox #zoom-level{min-width:52px;font-size:11px;letter-spacing:.04em}
.lightbox.diagram-viewer .zoom-controls{background:#20251f04;border-color:var(--border)}
.lightbox.diagram-viewer .zoom-controls button[data-zoom-reset]{border-color:var(--border)}


/* White canvas for every enlarged image. */
.lightbox,.lightbox.diagram-viewer{background:#fff;color:#20251f;border:0;box-shadow:none}
.lightbox::backdrop{background:#fff}
.lightbox #lightbox-visual{background:#fff;border:0;box-shadow:none}
.lightbox #lightbox-visual img{mix-blend-mode:normal;border:0;box-shadow:none}
.lightbox .zoom-controls,.lightbox.diagram-viewer .zoom-controls{background:#fff;border-color:#20251f26}
.lightbox .zoom-controls button[data-zoom-reset]{border-color:#20251f26}
.lightbox button:hover{color:#52624a}
.lightbox .zoom-controls button:hover{background:#20251f08}


.lightbox-top{padding:0 4px;min-height:44px}
#lightbox-title{text-transform:uppercase;letter-spacing:.07em;font-size:12px;line-height:1.5;max-width:80%}
.lightbox #lightbox-visual{margin:12px 42px}
.lightbox .image-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:52px;display:grid;place-items:center;border-radius:12px;background:#fff;z-index:2}
.lightbox .image-arrow-prev{left:12px}.lightbox .image-arrow-next{right:12px}
.image-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lightbox .lightbox-bottom{justify-content:center;position:relative;gap:24px;padding:8px 0}
.lightbox-bottom>div:first-child{font-size:10px;text-transform:uppercase;letter-spacing:.06em;text-align:left}
.lightbox .lightbox-bottom .zoom-controls{flex-shrink:0}
@media(max-width:650px){.lightbox .lightbox-bottom{flex-direction:column;gap:8px}.lightbox-bottom>div:first-child{text-align:center}.lightbox #lightbox-visual{margin:8px 20px}.lightbox .image-arrow{width:36px;height:48px}.lightbox .image-arrow-prev{left:0}.lightbox .image-arrow-next{right:0}#lightbox-title{font-size:11px}}

#computational-projects{margin-bottom:64px}

#bim-projects{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
#bim-projects>.project{grid-column:auto;margin-top:0}
#bim-projects .project-visual{aspect-ratio:16/10}
#bim-projects .coordination-cover{height:100%;aspect-ratio:auto}
@media(max-width:650px){#bim-projects{grid-template-columns:1fr}}





#selected-projects{row-gap:40px}
#selected-projects>.project:nth-child(2){margin-top:48px}
@media(max-width:800px){#selected-projects>.project:nth-child(2){margin-top:0}}


.automation-film{margin:0 0 64px;width:100%}
.automation-film video{display:block;width:100%;aspect-ratio:1918/1030;object-fit:contain;background:#f2f1ec;border:0}
.automation-film figcaption{padding-top:14px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
#project-content .automation-film{margin-top:32px}

.project-visual[data-project='hospital'] img { object-fit: contain; background: #fff; }

/* Three clearly separated portfolio categories. */
.hero-grid{grid-template-columns:1fr;min-height:0}
.hero-copy{max-width:850px}
.project-visual[data-project="hotel"] img{object-fit:contain;background:#fff}
/* Architecture cards match the three-column reference. */
#selected-projects{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:start}
#selected-projects>.project:nth-child(n){grid-column:auto;grid-row:auto;margin-top:0;min-width:0}
#selected-projects .project-visual{width:100%;aspect-ratio:16/10}
#selected-projects .project-visual img{object-fit:cover}
@media(max-width:700px){#selected-projects{grid-template-columns:1fr;row-gap:40px}}