/* Focused post-launch fixes and the interactive portfolio explorer. */
.service-card > div { min-width: 0; }
.service-card h3 {
  min-width: 0;
  font-size: clamp(30px, 2.65vw, 44px);
}
.service-card p { color: #bac1c4; }

@media (max-width: 1180px) and (min-width: 901px) {
  .service-card > div {
    grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr);
    gap: 18px 34px;
  }
  .service-card > div > p:last-child { grid-column: 2; }
}

.project-explorer {
  color: #111c23;
  background: #e8e4dc;
  padding: 86px clamp(28px, 6vw, 96px) 150px;
}
.project-explorer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 34px;
}
.project-explorer-head h2 {
  max-width: 820px;
  font-size: clamp(40px, 5vw, 74px);
}
.project-count {
  color: #7a654e;
  margin: 0 0 8px;
  font-family: Etazhy, sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.project-filters {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 4px 0 20px;
  scrollbar-width: thin;
}
.project-filter {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid #111c2340;
  border-radius: 999px;
  padding: 0 18px;
  color: #344149;
  background: transparent;
  font-family: Etazhy, sans-serif;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.project-filter:hover { border-color: #986e48; transform: translateY(-1px); }
.project-filter.is-active,
.project-filter[aria-pressed="true"] {
  color: #f7f7f3;
  background: #0a151e;
  border-color: #0a151e;
}
.project-map {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  min-height: 430px;
  margin: 40px 0 84px;
  color: #f7f7f3;
  background: #0a151e;
  overflow: hidden;
}
.project-map-copy { padding: clamp(34px, 4.5vw, 68px); }
.project-map-copy .eyebrow { margin-bottom: 24px; }
.project-map-copy h3 {
  max-width: 640px;
  margin: 0;
  font-size: clamp(34px, 4.2vw, 68px);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}
.project-map-copy > p:last-child {
  max-width: 540px;
  margin-top: 24px;
  color: #b5bdc0;
  font-size: 14px;
}
.project-map-canvas {
  position: relative;
  min-height: 430px;
  border-left: 1px solid #ffffff24;
  background:
    linear-gradient(#cfaa7418 1px, transparent 1px),
    linear-gradient(90deg, #cfaa7418 1px, transparent 1px),
    radial-gradient(circle at 48% 54%, #cfaa741f, transparent 36%);
  background-size: 52px 52px, 52px 52px, auto;
}
.project-map-canvas::before,
.project-map-canvas::after {
  content: "";
  position: absolute;
  border: 1px solid #cfaa7447;
  border-radius: 52% 48% 58% 42% / 38% 55% 45% 62%;
  transform: rotate(-12deg);
}
.project-map-canvas::before { inset: 15% 9% 17% 12%; }
.project-map-canvas::after { inset: 31% 27% 28% 5%; opacity: .45; }
.map-pin {
  position: absolute;
  z-index: 2;
  width: 18px;
  min-height: 18px;
  padding: 0;
  border: 3px solid #0a151e;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 0 1px var(--gold-2), 0 0 24px #cfaa7466;
}
.map-pin::after {
  content: attr(data-label);
  position: absolute;
  left: 20px;
  top: -2px;
  width: max-content;
  color: #e7e3da;
  font-family: Etazhy, sans-serif;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.map-pin.is-active,
.map-pin[aria-pressed="true"] { background: #fff; transform: scale(1.2); }
.pin-moscow { left: 43%; top: 58%; }
.pin-spb { left: 34%; top: 35%; }
.pin-kaliningrad { left: 17%; top: 48%; }
.pin-regions { right: 35%; top: 44%; }
.pin-monaco { left: 8%; bottom: 16%; }
.pin-all { right: 8%; bottom: 10%; }
.pin-all::after { left: auto; right: 20px; }

.project-explorer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 22px;
}
.project-explorer-card { min-width: 0; }
.project-explorer-card.is-hidden { display: none; }
.project-explorer-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d8d3ca;
}
.project-explorer-card:nth-child(2n) { transform: translateY(54px); }
.project-explorer-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.03);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.project-explorer-card:hover img { transform: scale(1.025); filter: saturate(.96) contrast(1.05); }
.project-explorer-meta {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 16px;
  border-top: 1px solid #111c234d;
  margin-top: 17px;
  padding-top: 17px;
}
.project-explorer-meta > span { color: #7b7f7d; font-size: 9px; }
.project-explorer-meta h3 {
  margin: 0 0 7px;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 400;
  text-transform: uppercase;
}
.project-explorer-meta p { margin: 0; color: #5f696f; font-size: 12px; }
.project-type {
  align-self: start;
  color: #8c633f;
  font-family: Etazhy, sans-serif;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.project-details { margin: 22px 0 0 46px; border-top: 1px solid #111c232e; }
.project-details summary {
  width: max-content;
  padding: 14px 0 8px;
  color: #725033;
  font-family: Etazhy, sans-serif;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.project-details summary::-webkit-details-marker { display: none; }
.project-details summary::after { content: " +"; color: #986e48; }
.project-details[open] summary::after { content: " −"; }
.project-details div { max-width: 650px; padding: 8px 0 5px; }
.project-details p { margin: 0 0 14px; color: #4f5b62; font-size: 14px; line-height: 1.7; }
.project-details a { color: #704d2f; border-bottom: 1px solid currentColor; }

@media (max-width: 900px) {
  .project-explorer-head { grid-template-columns: 1fr; gap: 16px; }
  .project-map { grid-template-columns: 1fr; }
  .project-map-canvas { border-left: 0; border-top: 1px solid #ffffff24; }
}
@media (max-width: 640px) {
  .project-explorer { padding: 66px 20px 100px; }
  .project-filters { margin-right: -20px; padding-right: 20px; }
  .project-map { margin: 24px 0 58px; }
  .project-map-copy { padding: 34px 24px; }
  .project-map-canvas { min-height: 330px; }
  .project-explorer-grid { grid-template-columns: 1fr; gap: 52px; }
  .project-explorer-card:nth-child(2n) { transform: none; }
  .project-explorer-meta { grid-template-columns: 24px minmax(0, 1fr); }
  .project-type { grid-column: 2; }
  .project-details { margin-left: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-filter,
  .project-explorer-media img { transition: none; }
  .project-explorer-card:hover img { transform: none; }
}