/* page.css — layout/spacing for the home page. Builds on tokens.css + site.css. */

/* ---------- density tweak ---------- */
:root {
  --section-y: 96px;   /* comfortable */
  --section-y-tight: 64px;
  --hero-pad-top: 72px;
  --hero-gap-bottom: 96px;
}
:root[data-density="compact"] {
  --section-y: 64px;
  --section-y-tight: 44px;
  --hero-pad-top: 48px;
  --hero-gap-bottom: 64px;
}
.section { padding: var(--section-y) 0; }
.section-tight { padding: var(--section-y-tight) 0; }

/* ---------- hero grid ---------- */
.rpr-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: var(--hero-pad-top);
  padding-bottom: 0;
}
.rpr-hero-grid + div { /* contact band sits right under */ }
@media (max-width: 980px) {
  .rpr-hero-grid { grid-template-columns: 1fr; gap: 56px; padding-top: 32px; }
  .rpr-hero-caption { position: static !important; margin-top: -24px; max-width: 100% !important; }
}

/* ---------- audience routes grid ---------- */
.rpr-route-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.rpr-route:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--brand) !important;
}
.rpr-route.theme-green:hover {
  border-color: var(--rpr-forest-800) !important;
}
@media (max-width: 1100px) {
  .rpr-route-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rpr-route-grid { grid-template-columns: 1fr; }
}

/* ---------- approach grid ---------- */
@media (max-width: 980px) {
  .rpr-approach-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .rpr-approach-grid > div:last-child { grid-template-columns: 1fr !important; }
}

/* ---------- group structure / org chart ---------- */
.rpr-org { position: relative; }
.rpr-org-parent {
  background: var(--brand);
  color: var(--paper);
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  border: 1px solid var(--brand-deep);
  box-shadow: var(--shadow-2);
}
.rpr-org-trunk {
  width: 1px;
  height: 56px;
  background: var(--line);
  margin: 0 auto;
}
.rpr-org-children {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
}
.rpr-org-child {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 22px;
  position: relative;
}
.rpr-org-child-self {
  border-color: var(--brand);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.rpr-org-branch {
  position: absolute;
  top: -28px; left: 50%; width: 1px; height: 28px;
  background: var(--line);
}
@media (max-width: 880px) {
  .rpr-org-children { grid-template-columns: 1fr; gap: 28px; }
  .rpr-org-branch { display: none; }
  .rpr-org-trunk { display: none; }
  .rpr-org-parent { max-width: 100%; margin-bottom: 24px; }
}

/* ---------- compliance grid ---------- */
.rpr-compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.rpr-compliance-statements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) {
  .rpr-compliance-grid,
  .rpr-compliance-statements,
  .rpr-compliance-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ---------- CTA split ---------- */
.rpr-cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  margin: var(--section-y) 0;
  box-shadow: var(--shadow-2);
}
.rpr-cta-half {
  padding: 56px 48px;
}
.rpr-cta-blue { background: var(--brand); }
.rpr-cta-paper { background: var(--paper); }
@media (max-width: 880px) {
  .rpr-cta-split { grid-template-columns: 1fr; }
  .rpr-cta-half { padding: 44px 32px; }
}

/* ---------- footer grid ---------- */
.rpr-footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 8px;
}
@media (max-width: 980px) {
  .rpr-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .rpr-footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .rpr-footer-grid { grid-template-columns: 1fr; }
}

/* ---------- header responsive ---------- */
@media (max-width: 980px) {
  .rpr-nav-desktop { display: none !important; }
  .rpr-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ---------- assumptions banner ---------- */
.rpr-assumptions {
  position: relative;
  background: #FFF8E1;
  color: #5A4A1A;
  border-bottom: 1px solid #E8D27A;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  z-index: 60;
}
.rpr-assumptions-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex; align-items: flex-start; gap: 16px;
}
.rpr-assumptions[data-open="false"] .rpr-assumptions-body { display: none; }
.rpr-assumptions[data-open="false"] .rpr-assumptions-inner { padding: 8px 32px; }
.rpr-assumptions-pill {
  flex-shrink: 0;
  background: #C9A04E;
  color: #2B1A00;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 1px;
}
.rpr-assumptions-body { flex: 1; }
.rpr-assumptions-body summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.rpr-assumptions-body summary::-webkit-details-marker { display: none; }
.rpr-assumptions-body summary::after {
  content: '\25BE';
  font-size: 10px;
  transition: transform 200ms ease;
}
.rpr-assumptions-body[open] summary::after { transform: rotate(180deg); }
.rpr-assumptions-body ol {
  margin: 10px 0 4px;
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.rpr-assumptions-body code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* ---------- small misc ---------- */
section { scroll-margin-top: 100px; }
button, [role="button"] { font-family: var(--font-sans); }

/* link-clean override for absent border under arrow */
a.link-clean { border-bottom: 0; }
a.link-clean:hover { border-bottom: 1px solid currentColor; }

/* eyebrow inside theme-green container should pick up brand colour (forest) */
.theme-green .eyebrow {
  color: var(--secondary); /* crimson in green theme — gives ladder of audience tones */
}

/* focus styles — WCAG 2.2 AA */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}