.hires-page {
  --hires-mint: #58edc2;
  --hires-blue: #61c8ff;
}

.hires-hero {
  padding: clamp(3rem, 7vw, 7rem) 0 clamp(4.5rem, 8vw, 8rem);
}

.hires-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.hires-hero h1 {
  max-width: 820px;
  margin: 1.1rem 0 1.4rem;
  font-size: clamp(3rem, 5.8vw, 6.1rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.hires-hero__lead {
  color: #eef7ff;
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
}

.hires-hero__copy p { max-width: 720px; }

.hires-hero__link {
  display: inline-flex;
  gap: .5rem;
  margin-top: 1rem;
  color: var(--hires-mint);
  font-weight: 800;
}

.hires-hero__compare {
  aspect-ratio: 3 / 2;
}

.hires-hero__compare img {
  object-fit: contain;
  object-position: center;
  background: #07131f;
}

.hires-hero__visual .comparison-card__meta { flex-wrap: wrap; }

.hires-dimension-map {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.25fr;
  gap: 1rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.hires-dimension-map div {
  display: grid;
  min-height: 145px;
  align-content: center;
  gap: .35rem;
  padding: 1rem;
  border: 1px solid rgba(180, 204, 226, .15);
  border-radius: 1rem;
  background: rgba(7, 19, 31, .72);
  text-align: center;
}

.hires-dimension-map__review { border-color: rgba(88, 237, 194, .42) !important; }
.hires-dimension-map span, .hires-dimension-map i { color: var(--hires-mint); font-weight: 900; }
.hires-dimension-map i { font-style: normal; }
.hires-dimension-map small { color: #8fa4b7; }

.hires-product-shot,
.hires-final-visual {
  overflow: hidden;
  max-width: 1160px;
  margin: 0 auto 2.5rem;
}

.hires-product-shot img,
.hires-final-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: #07131f;
}

.hires-product-shot figcaption,
.hires-final-visual figcaption,
.hires-model-gallery figcaption {
  display: grid;
  gap: .25rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(180, 204, 226, .13);
  color: #91a6b9;
}

.hires-product-shot figcaption strong,
.hires-model-gallery figcaption strong { color: #eef7ff; }

.hires-model-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content;
  gap: 1rem;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto 2.5rem;
}

.hires-model-card {
  display: grid;
  grid-template-rows: auto auto;
  align-self: start;
  min-height: 0;
  height: auto;
  overflow: hidden;
  margin: 0;
}

.hires-model-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #07131f;
}

.hires-model-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hires-review-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto 2.5rem;
  padding: 1rem;
}

.hires-review-strip span {
  padding: .6rem .85rem;
  border: 1px solid rgba(88, 237, 194, .22);
  border-radius: 999px;
  color: #dce8f3;
  background: rgba(88, 237, 194, .06);
}

.hires-table-note {
  max-width: 900px;
  margin: 1.25rem auto 2rem;
  text-align: center;
}

.hires-final-visual figcaption { text-align: center; color: #dce8f3; }

@media (max-width: 1100px) {
  .hires-hero__grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .hires-dimension-map,
  .hires-model-gallery { grid-template-columns: 1fr; }
  .hires-dimension-map i { rotate: 90deg; text-align: center; }
}

@media (max-width: 620px) {
  .hires-hero { padding-top: 2rem; }
  .hires-hero h1 { font-size: clamp(2.35rem, 12.5vw, 4rem); }
  .hires-hero__compare { aspect-ratio: 4 / 3; }
}