.realizations-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr); align-items: end; gap: 4rem; padding: clamp(4rem, 8vw, 8rem) max(1.5rem, calc((100vw - 82rem) / 2)); }
.realizations-intro h1 { max-width: 12ch; }
.realizations-intro > div:last-child { padding-bottom: .5rem; }
.realizations-intro > div:last-child p { color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.realizations-filters { position: sticky; z-index: 10; top: 4.75rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; border-block: 1px solid var(--line); padding: .8rem; background: rgb(252 249 243 / 92%); backdrop-filter: blur(12px); }
.realizations-filters button { border: 1px solid var(--line); border-radius: 99rem; padding: .65rem 1rem; color: var(--ink); background: transparent; cursor: pointer; }
.realizations-filters button.is-active { color: #fff; background: var(--ink); }
.realizations-grid { columns: 3 22rem; column-gap: .35rem; padding: .35rem; background: #fff; }
.realization-tile { position: relative; break-inside: avoid; margin-bottom: .35rem; overflow: hidden; }
.realization-tile[hidden] { display: none; }
.realization-open { display: block; width: 100%; border: 0; padding: 0; color: inherit; background: transparent; text-align: left; cursor: zoom-in; }
.realization-tile img { width: 100%; height: auto; }
.realization-placeholder { position: relative; display: flex; min-height: 24rem; align-items: flex-end; overflow: hidden; padding: 1rem; color: rgb(255 255 255 / 72%); background: linear-gradient(145deg, #b79c76, #6e6356 54%, #343630); }
.realization-placeholder::before { position: absolute; inset: 0; content: ''; opacity: .32; background: repeating-linear-gradient(90deg, transparent 0 16%, rgb(255 255 255 / 20%) 16% 16.5%); }
.realization-placeholder span { position: relative; z-index: 1; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.shape-square { min-height: 22rem; }.shape-portrait { min-height: 30rem; }.shape-tall { min-height: 38rem; }.shape-landscape { min-height: 18rem; }
.tone-charcoal { background: linear-gradient(145deg, #77746b, #292b29); }.tone-sand { background: linear-gradient(145deg, #d1bea1, #837565); }.tone-stone { background: linear-gradient(145deg, #c5c0b5, #65655f); }.tone-walnut { background: linear-gradient(145deg, #966e4f, #402f28); }.tone-oak-dark { background: linear-gradient(145deg, #ad855a, #5b402b); }.tone-cream { background: linear-gradient(145deg, #e0d5c0, #908473); }.tone-sage { background: linear-gradient(145deg, #a4aa91, #4d574c); }.tone-clay { background: linear-gradient(145deg, #bd8267, #65473c); }
.realization-overlay { position: absolute; inset: auto 0 0; padding: 4rem 1.5rem 1.5rem; color: #fff; opacity: 0; background: linear-gradient(transparent, rgb(20 20 18 / 88%)); transition: opacity .2s ease; }
.realization-tile:hover .realization-overlay, .realization-tile:focus-within .realization-overlay { opacity: 1; }
.realization-overlay p, .realization-overlay h2 { margin: 0 0 .35rem; }.realization-overlay h2 { font-size: 1.8rem; }.realization-overlay span { font-size: .78rem; }
.has-open-modal { overflow: hidden; }
.realization-modal { width: min(92vw, 78rem); max-width: none; max-height: 90vh; border: 0; padding: 0; color: var(--ink); background: var(--cream); box-shadow: 0 2rem 6rem rgb(0 0 0 / 35%); }
.realization-modal::backdrop { background: rgb(25 23 20 / 78%); backdrop-filter: blur(5px); }
.realization-modal[open] { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .5fr); }
.realization-modal__close { position: absolute; z-index: 2; top: .8rem; right: .8rem; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgb(25 23 20 / 75%); font-size: 1.6rem; cursor: pointer; }
.realization-modal__media { display: flex; min-height: 34rem; max-height: 84vh; align-items: center; justify-content: center; overflow: hidden; background: transparent; }
.realization-modal__media img { width: auto; height: auto; max-width: 100%; max-height: 84vh; margin: auto; object-fit: contain; }
.realization-modal__media .realization-placeholder { width: 100%; height: 100%; min-height: 38rem; }
.realization-modal [hidden] { display: none !important; }
.realization-modal__copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.realization-modal__copy p { color: var(--muted); font-size: .8rem; }
.realization-modal__copy h2 { margin: 0; font-size: clamp(2rem, 3vw, 3.5rem); }
@media (max-width: 800px) {
  .realizations-intro { grid-template-columns: 1fr; gap: 1rem; }
  .realizations-grid { columns: 2 12rem; }
  .realization-overlay { position: relative; padding: .8rem; color: var(--ink); opacity: 1; background: #fff; }
  .realization-overlay p, .realization-overlay span { color: var(--muted); }
  .realization-overlay h2 { font-size: 1.15rem; }
  .realization-modal[open] { grid-template-columns: 1fr; }
  .realization-modal__media { min-height: 20rem; max-height: 65vh; }
  .realization-modal__media img { max-height: 65vh; }
  .realization-modal__copy { padding: 1.25rem; }
  .shape-square { min-height: 14rem; }.shape-portrait { min-height: 19rem; }.shape-tall { min-height: 24rem; }.shape-landscape { min-height: 11rem; }
}
@media (prefers-reduced-motion: reduce) { .realization-overlay { transition: none; } }