:root {
  --plaza-cream: #f3efea;
  --plaza-ink: #1f1f1f;
  --plaza-purple: #480ca9;
  --plaza-blue: #007cf3;
  --plaza-layout: 1140px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-100: 100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.plaza-page { margin: 0; overflow-x: hidden; background: var(--plaza-cream); color: var(--plaza-ink); font-family: "Montserrat", Arial, sans-serif; }

.plaza-layout { width: min(var(--plaza-layout), calc(100% - 48px)); margin-inline: auto; }
.plaza-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: flex-start; padding-top: clamp(2.25rem, 7.1vh, 5.5rem); }
.plaza-header a { display: inline-block; }.plaza-header img { display: block; width: 205px; height: auto; }
.plaza-intro { padding-top: var(--space-100); }
.plaza-hero { display: block; width: 100%; border-radius: 24px; }

.plaza-summary { max-width: 760px; margin-top: var(--space-32); }
.plaza-back { color: var(--plaza-blue); font-size: 16px; font-weight: 700; text-decoration: none; }
.plaza-back:hover, .plaza-back:focus-visible { text-decoration: underline; }
.plaza-client { margin: var(--space-32) 0 var(--space-24); color: var(--plaza-purple); font-size: 17px; font-weight: 800; }
.plaza-summary h1 { max-width: 770px; margin: 0; font-size: 28px; font-weight: 800; line-height: 1.12; letter-spacing: -.045em; }
.plaza-description { max-width: 720px; margin: var(--space-24) 0 0; font-size: 15px; line-height: 1.3; letter-spacing: -.025em; }
.plaza-site { margin: var(--space-24) 0 0; font-size: 15px; font-weight: 700; }.plaza-site a { color: var(--plaza-blue); text-decoration: none; }.plaza-site a:hover, .plaza-site a:focus-visible { text-decoration: underline; }
.plaza-tags { display: flex; flex-wrap: wrap; gap: var(--space-16); margin: var(--space-24) 0 0; padding: 0; list-style: none; }
.plaza-tags li { min-width: 142px; padding: 8px 19px; border: 2px solid var(--plaza-purple); border-radius: 999px; color: var(--plaza-purple); font-size: 14px; font-weight: 700; line-height: 1; text-align: center; }

.plaza-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-100); }
.plaza-gallery img, .plaza-space-gallery img { display: block; width: 100%; height: auto; border-radius: 24px; }.plaza-gallery-wide { grid-column: 1 / -1; }

.plaza-solution { padding: var(--space-100) 0; }
.plaza-solution h2 { display: flex; align-items: center; gap: var(--space-16); margin: 0; font-size: 27px; line-height: 1.12; letter-spacing: -.045em; }.plaza-solution h2 img { width: 48px; height: 48px; }
.plaza-solution > p { max-width: 710px; margin: var(--space-32) 0 0; font-size: 25px; line-height: 1.12; letter-spacing: -.05em; }
.plaza-space-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); margin-top: var(--space-100); }

.plaza-footer { border-top: 3px solid var(--plaza-ink); padding: var(--space-100) 0 var(--space-32); }.plaza-footer img { display: block; width: 100%; height: auto; }

@media (max-width: 760px) {
  .plaza-layout { width: min(var(--plaza-layout), calc(100% - 32px)); }
  .plaza-header { padding-top: 1.5rem; }.plaza-header img { width: 138px; }
  .plaza-intro { padding-top: var(--space-32); }.plaza-hero { border-radius: 14px; }
  .plaza-summary { margin-top: var(--space-24); }.plaza-back, .plaza-client { font-size: 14px; }.plaza-client { margin: var(--space-24) 0 var(--space-16); }
  .plaza-summary h1 { font-size: 23px; }.plaza-description, .plaza-site { font-size: 14px; }
  .plaza-tags { gap: 8px; }.plaza-tags li { min-width: auto; padding: 8px 13px; font-size: 12px; }
  .plaza-gallery { grid-template-columns: 1fr; gap: var(--space-16); margin-top: var(--space-32); }.plaza-gallery-wide { grid-column: auto; }.plaza-gallery img, .plaza-space-gallery img { border-radius: 16px; }
  .plaza-solution { padding: var(--space-100) 0; }.plaza-solution h2 { align-items: flex-start; font-size: 23px; }.plaza-solution h2 img { width: 36px; height: 36px; }.plaza-solution > p { margin-top: var(--space-32); font-size: 21px; }
  .plaza-space-gallery { grid-template-columns: 1fr; gap: var(--space-16); margin-top: var(--space-32); }
  .plaza-footer { padding: var(--space-100) 0 var(--space-32); }
}
