/* Layout only: production-motion owns the sticky stage and circular reveal. */
.spaces-catalogue {
  padding: 110px 0 80px;
  color: var(--ink);
  background: var(--paper);
  background-image: linear-gradient(#f3f0e8c9, #f3f0e8c9), var(--reference-light);
  background-size: 500px;
}
.spaces-shell { width: 100%; }
.spaces-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  padding: 0 5vw 30px;
}
.spaces-heading h2 {
  margin: 0;
  font: 550 clamp(28px, 3.9vw, 64px)/1.02 'Reference Lausanne', Arial, sans-serif;
  letter-spacing: -.055em;
  text-wrap: initial;
}
.spaces-heading > p {
  flex: 0 0 235px;
  max-width: 235px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.spaces-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 28px;
  padding-inline: 5vw;
}
.spaces-card { min-width: 0; margin: 0; }
.spaces-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.5;
  object-fit: cover;
  border-radius: 7px;
  background: var(--sage);
  filter: brightness(var(--photo-exposure, 1)) contrast(var(--photo-contrast, .97)) saturate(.94);
}
/* Match the gallery's white point and soften exposure changes between rooms. */
.spaces-card img[src*="library-balanced"] { --photo-exposure: .98; }
.spaces-card img[src*="office-administration"] { --photo-exposure: 1.14; --photo-contrast: .91; }
.spaces-card img[src*="mfc-service-hall-balanced"] { --photo-exposure: .95; }
.spaces-card img[src*="meeting-room"] { --photo-exposure: .94; }
.spaces-card img[src*="career-center-balanced"] { --photo-exposure: .96; }
.spaces-card img[src*="coworking"] { --photo-exposure: 1.03; }
.spaces-card-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 25px;
  padding-top: 16px;
}
.spaces-card-caption h3 {
  margin: 0;
  font: 350 clamp(24px, 2.8vw, 44px)/1.1 'Reference Lausanne', Arial, sans-serif;
  letter-spacing: -.045em;
}
.spaces-card-caption p {
  max-width: 350px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.spaces-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 5vw 0;
  font-size: 12px;
}
.spaces-counter, .spaces-arrows { display: none; }
.spaces-project-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-left: auto;
  padding: 13px 18px;
  border-radius: 4px;
  background: var(--green);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.spaces-controls :focus-visible { outline: 3px solid var(--pine); outline-offset: 4px; }
.spaces-catalogue.is-horizontal { height: 100svh; padding: 104px 0 24px; overflow: hidden; }
.is-horizontal .spaces-shell { height: 100%; display: flex; flex-direction: column; }
.is-horizontal .spaces-heading { flex-shrink: 0; padding-bottom: 22px; }
.is-horizontal .spaces-window {
  flex: 1; min-height: 0; overflow: hidden;
  /* Sideways touch navigation is disabled pending an iPhone fix. */
  touch-action: auto;
}
.is-horizontal .spaces-gallery {
  display: flex;
  width: max-content;
  height: 100%;
  gap: 28px;
  padding: 0 5vw;
  will-change: transform;
}
.is-horizontal .spaces-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 68vw;
  max-width: 1050px;
  height: 100%;
}
.is-horizontal .spaces-card img { flex: 1; min-height: 0; height: 0; aspect-ratio: auto; }
.is-horizontal .spaces-card-caption { flex-shrink: 0; }
.is-horizontal .spaces-controls {
  flex-shrink: 0;
  width: 100%;
  padding-top: 18px;
}
.is-horizontal .spaces-counter { display: block; min-width: 180px; }
.is-horizontal .spaces-arrows { display: flex; gap: 8px; }
.spaces-arrows button {
  width: 44px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.spaces-arrows button:hover:not(:disabled) { border-color: var(--ink); }
.spaces-arrows button:disabled { opacity: .3; cursor: default; }
@media (max-width: 1000px) {
  .spaces-heading > p { flex-basis: 190px; max-width: 190px; }
  .spaces-card-caption { display: block; }
  .spaces-card-caption p { margin-top: 8px; }
}
@media (max-width: 700px) {
  .spaces-catalogue { padding: 100px 0 60px; }
  .spaces-heading { display: block; padding: 0 20px 26px; }
  .spaces-heading h2 { font-size: clamp(28px, 7.4vw, 42px); line-height: 1.04; }
  .spaces-heading > p { max-width: 290px; margin-top: 14px; font-size: 12px; }
  .spaces-gallery { grid-template-columns: 1fr; padding-inline: 20px; gap: 36px; }
  .spaces-card-caption { padding-top: 12px; }
  .spaces-card-caption h3 { font-size: 26px; }
  .spaces-card-caption p { font-size: 12px; }
  .spaces-controls { padding: 24px 20px 0; }
  .spaces-project-cta { font-size: 11px; gap: 12px; padding: 12px 14px; }
  .spaces-catalogue.is-horizontal { padding: 100px 0 20px; }
  .is-horizontal .spaces-heading { padding-bottom: 18px; }
  .is-horizontal .spaces-gallery { gap: 16px; padding-inline: 20px; }
  .is-horizontal .spaces-card { width: 82vw; }
  .is-horizontal .spaces-controls { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 14px; }
  .is-horizontal .spaces-counter { flex-basis: 100%; min-width: 0; font-size: 11px; }
  .is-horizontal .spaces-project-cta { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .spaces-gallery { will-change: auto; }
}