/* ═══════════════════════════════════════════════════════════════
   SYNC VALUATIONS — PAGE SHELL
   One container, one hero, one headline scale, one section rhythm,
   and the approved background treatments. Loaded AFTER each page's
   own <style> block, so it corrects without touching page CSS.

     <link rel="stylesheet" href="/assets/site-page.css">
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. One container, aligned with the header and footer ─────── */
.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .container { padding: 0 24px; } }

/* Prose keeps its 800px reading measure, left-aligned to the logo.
   Grids, cards and matrices are free to use the full width. */
.page-hero p,
.page-hero-intro,
.content-section > .container > p,
.content-section > .container > h2,
.content-section > .container > h3,
.content-section > .container > ul,
.content-section > .container > ol,
.content-section > .container > blockquote,
.case-study > .container > p,
.case-study > .container > h2,
.case-study > .container > h3 {
  max-width: 800px;
  margin-left: 0;
  margin-right: 0;
}

/* ── 2. One hero ──────────────────────────────────────────────── */
.page-hero { padding: 150px 0 64px; }
.page-hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -1px;
  line-height: 1.02;
}
@media (max-width: 600px) { .page-hero { padding: 120px 0 48px; } }

/* ── 3. One section rhythm ────────────────────────────────────── */
.content-section { padding: 96px 0; }
.case-study { padding: 96px 0; }
@media (max-width: 768px) {
  .content-section, .case-study { padding: 64px 0; }
}

/* ── 4. Approved background treatments ────────────────────────── */

/* Cards lift off the page instead of sitting flat on it */
.factor-item,
.score-card {
  background: #FAF7EF;
  border: 1px solid #D4D0C8;
  border-left: 3px solid #B5A878;
}

/* Data and methodology sections get the subtle grid */
.content-section--data,
.content-section:has(.score-explainer),
.content-section:has(.factor-grid) {
  background-image:
    linear-gradient(rgba(27,44,60,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,44,60,0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Every page closes on the navy block, like the homepage does */
.page-cta {
  background: #1B2C3C;
  padding: 96px 0;
  text-align: left;
}
.page-cta h2 { color: #F5F0E3 !important; }
.page-cta p {
  color: rgba(245,240,227,0.72) !important;
  max-width: 640px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-cta .btn-primary {
  background: #F5F0E3;
  color: #1B2C3C !important;
  border-color: #F5F0E3;
}
.page-cta .btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; }
.page-cta .btn-secondary {
  color: #F5F0E3 !important;
  border-color: rgba(245,240,227,0.4);
}
.page-cta .btn-secondary:hover { border-color: #F5F0E3; }

/* ── 5. Related links block (internal linking) ────────────────── */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.related a {
  display: block;
  background: #FAF7EF;
  border: 1px solid #D4D0C8;
  border-top: 3px solid #1B2C3C;
  padding: 24px 26px;
  text-decoration: none;
  transition: box-shadow .15s ease;
}
.related a:hover { box-shadow: 0 6px 24px rgba(27,44,60,.10); }
.related-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A59F8E;
  margin-bottom: 8px;
}
.related-title {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: #1B2C3C;
  line-height: 1.1;
  margin-bottom: 8px;
}
.related-dek {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #5A5650;
}

/* ── 6. Section labels ────────────────────────────────────────── */
/* The 8px khaki square read as a stray dot next to short labels.
   The mono label carries enough weight on its own. */
.section-label::before { display: none !important; }
.section-label { gap: 0 !important; letter-spacing: .22em; }

/* ── 7. One H2 scale ──────────────────────────────────────────── */
/* Content pages ran 22px, 28px and 36px for the same level of heading. */
.content-section h2,
.case-study h2,
.page-cta h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.content-section h3,
.case-study h3 { font-size: 20px; }

/* ── 8. Button hovers stay in the blue family ─────────────────── */
/* Every page hovered navy → charcoal #343434, a neutral grey-black
   that visibly leaves the brand palette. Darkened navy instead. */
.btn-primary:hover,
.modal-btn:hover,
.nav-cta:hover {
  background: #122130 !important;
  border-color: #122130 !important;
}