@font-face {
  font-family: "PRO Pods Board";
  src: url('/assets/fonts/pro-pods-franklin-medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.pro-pods-page {
  --pods-blue: #1fb6ea;
  --pods-red: #ec1c24;
  --pods-orange: #ef7d00;
}
.pro-pods-page .legacy-main .pro-pods-title {
  margin: 0;
  color: #000;
  font: 400 clamp(44px, 5vw, 72px)/1 "PRO Pods Board", Arial, sans-serif;
}
.pro-pods-page .pro-pods-subtitle {
  margin: 0;
  color: #000;
  font: 400 clamp(17px, 1.735vw, 25px)/1.2 "PRO Pods Board", Arial, sans-serif;
}
/* Use the smaller content gap directly below the project title. */
.pro-pods-page .legacy-main > #process {
  margin-top: calc(var(--project-gap) - var(--project-section-gap));
}
.pro-pods-page .pods-color-plan { color: var(--pods-blue); }
.pro-pods-page .pods-color-react { color: var(--pods-red); }
.pro-pods-page .pods-color-occupy { color: var(--pods-orange); }
.pro-pods-page .pro-pods-board img { height: auto; max-height: none; }
.pro-pods-page #process > .pro-pods-board {
  width: min(1360px, calc(100vw - 2 * var(--project-gap)));
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.pro-pods-process-study { max-width: 800px; margin-left: auto; margin-right: auto; }
/* Use the mobile screen width and remove only the montage's blank outer canvas. */
@media (max-width: 600px) {
  .pro-pods-page #process > .pro-pods-board { width: 100vw; }
  .pro-pods-page #process > .pro-pods-board > a {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2760 / 1793;
  }
  .pro-pods-page #process > .pro-pods-board img {
    position: absolute;
    width: calc(100% * 3200 / 2760);
    max-width: none;
    left: calc(-100% * 220 / 2760);
    top: calc(-100% * 240 / 1793);
  }
  .pro-pods-page #process > .pro-pods-board figcaption {
    padding-left: var(--project-gap);
    padding-right: var(--project-gap);
  }
}
.pro-pods-board figcaption a { color: #087b9f; text-underline-offset: .2em; }
.pro-pods-board figcaption a:hover { color: #ff007a; }
.pro-pods-board-link a { color: #087b9f; text-underline-offset: .2em; }
.pro-pods-board-link a:hover { color: #ff007a; }

/* Independent drawings and live text replace the original print-board layouts. */
.pro-pods-page .pods-section h3 {
  margin: 0 0 .5rem; color: #252525;
  font: 600 18px/1.45 Montserrat, sans-serif;
}
.pro-pods-page .pods-location { color: #626262; font-size: 14px; }
.pods-split, .pods-grid, .pods-goals { display: grid; gap: var(--project-gap); min-width: 0; }
.pods-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.pods-split--wide { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.pods-split--water { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.pods-details { display: grid; gap: var(--project-gap); min-width: 0; }
.pods-details p { font-size: 16px; }
.pods-figure { min-width: 0; }
.pods-figure img { width: 100%; height: auto; max-height: none; }
.pods-figure figcaption { color: #555; }
.pro-pods-page .pods-figure figcaption p { font-size: 14px; line-height: 1.6; }
.pro-pods-page .pods-figure figcaption h3 { font-size: 16px; }
.pods-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pods-grid--three, .pods-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pods-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pods-goals { padding: var(--project-gap) 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.pro-pods-page .pods-goals h3 { color: var(--pods-blue); font-size: 24px; }
.pro-pods-page .pods-goals > :nth-child(2) h3 { color: var(--pods-red); }
.pro-pods-page .pods-goals > :nth-child(3) h3 { color: var(--pods-orange); }
.pods-layouts .pods-figure > a, .pods-stages .pods-figure > a { display: flex; align-items: center; aspect-ratio: 2 / 1; }
.pods-layouts img, .pods-stages img { width: 100%; height: 100%; object-fit: contain; }
.pods-panels { padding-block: var(--project-gap); }
.pods-panels .pods-figure > a { display: flex; align-items: center; aspect-ratio: 4 / 3; }
.pods-panels img { width: 100%; height: 100%; object-fit: contain; }
.pods-connections .pods-figure > a { display: flex; align-items: center; aspect-ratio: 1 / 1; }
.pods-connections img { width: 100%; height: 100%; object-fit: contain; }
.pods-concept-drivers { text-align: center; align-items: start; }
.pods-concept-drivers .pods-figure > a { display: flex; justify-content: center; height: 150px; }
.pods-concept-drivers img { width: auto; max-width: 150px; height: 100%; object-fit: contain; }
.pro-pods-page .pods-concept-drivers figcaption p { max-width: 280px; margin: 0 auto; font-size: 16px; }
.pods-concept-monuments { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
.pods-concept-monuments .pods-figure > a { display: flex; align-items: end; height: 380px; }
.pods-concept-monuments img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
@media (max-width: 700px) {
  .pods-concept-monuments { grid-template-columns: minmax(0, 1fr); }
  .pods-concept-monuments .pods-figure > a { height: auto; max-width: 520px; margin: 0 auto; }
  .pods-concept-monuments img { height: auto; max-height: 360px; }
}
@media (max-width: 991px) {
  .pods-split--wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .pods-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pods-split, .pods-goals, .pods-grid--three { grid-template-columns: minmax(0, 1fr); }
  .pods-panels .pods-figure > a { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .pods-grid--two { grid-template-columns: minmax(0, 1fr); }
  .pro-pods-page .pods-stages figcaption h3 { font-size: 14px; }
}

/* Vertical expansion sequence: shared canvases keep the fixed frame aligned. */
.pro-pods-page .pods-stages { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-left: auto; margin-right: auto; }
.pro-pods-page .pods-stages .pods-figure > a { aspect-ratio: 2440 / 820; }
.pro-pods-page .pods-stages figcaption { text-align: center; }
/* Enlarge annotated assemblies and the panel row within shared page gutters. */
.pro-pods-page .pods-clinic-structure,
.pro-pods-page .pods-housing-closeup,
.pro-pods-page .pods-panels {
  width: min(1600px, calc(100vw - 2 * var(--project-gap)));
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}