/* ==================================================================
   Guided — ethics & values  (LOCAL PREVIEW ONLY)
   ================================================================== */

.gs-values {
  background: #FFFFFF;
  padding: 150px 24px;
  display: flex;
  justify-content: center;
}

.gs-values-inner {
  width: 100%;
  max-width: 900px;
  display: grid;
  justify-items: center;
}

.gs-values-eyebrow {
  font-size: 17px;
  font-weight: 600;
  color: #0071E3;
  text-align: center;
}

.gs-values-head {
  margin: 12px 0 0;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: #1D1D1F;
  text-align: center;
  max-width: 16ch;
}

.gs-values-stand {
  margin: 24px auto 0;
  font-size: 24px;
  line-height: 1.45;
  font-weight: 400;
  color: #6E6E73;
  text-align: center;
}

@media (max-width: 1024px) {
  .gs-values { padding: 90px 22px; }
  .gs-values-stand { font-size: 19px; }
}

/* ---- the evidence ------------------------------------------------
   A child's own reasoning. No caption: the page has already said the
   three words, and the answer says the rest.
   ------------------------------------------------------------------ */
.gs-values-shot {
  width: 100%;
  max-width: 760px;
  margin: 44px auto 0;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  background: #F5F5F7 center / cover no-repeat;
}

@media (max-width: 1024px) {
  /* At ~340px wide the full 2:1 frame renders the answer too small to
     read, which defeats the point of showing it. Go taller and let
     `cover` crop in on the words. */
  .gs-values-shot {
    margin-top: 28px;
    border-radius: 12px;
  }
}