/* ── PAGE HERO: PAPER w/ INK accent ── */
.page-hero { background: var(--paper); border-bottom: var(--b); padding: clamp(4rem,10vw,8rem) clamp(1rem,5vw,3rem); }
.page-hero-eyebrow { font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 20px; }
.page-hero-title { font-size: clamp(44px,7vw,80px); color: var(--ink); max-width: 800px; }
.page-hero-title em { font-style: normal; color: var(--red); }

/* ── STORY SECTIONS ── */
.s-story-1 { background: var(--green); border-bottom: var(--b); }
.s-story-1 .sec-title { color: var(--paper); }
.s-story-1 .sec-body { color: rgba(242,232,213,.82); }

.s-story-2 { background: var(--paper); border-bottom: var(--b); }
.story-2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.story-illo { border: var(--b); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--paper); }
.story-illo svg { width: 65%; height: 65%; }

/* ── VALUES ── */
.s-values { background: var(--yellow); border-bottom: var(--b); }
.s-values .label { color: rgba(34,28,20,.5); }
.s-values .sec-title { color: var(--ink); }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
.value-card { border: var(--b); background: var(--paper); padding: 36px 28px; }
.value-number { font-family: 'Paytone One', sans-serif; font-size: 48px; color: var(--red); line-height: 1; margin-bottom: 16px; }
.value-title { font-family: 'Paytone One', sans-serif; font-size: 20px; color: var(--ink); margin-bottom: 12px; }
.value-body { font-size: 14px; color: var(--green); line-height: 1.7; }

/* ── QUOTE ── */
.s-quote { background: var(--ink); border-bottom: var(--b); text-align: center; }
.big-quote { font-size: clamp(24px,4vw,44px); color: var(--paper); max-width: 720px; margin: 0 auto 20px; line-height: 1.3; }
.quote-deco { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; }
.quote-deco span { display: block; width: 32px; height: 3px; background: var(--yellow); }

/* ── CTA ── */
.s-cta { background: var(--red); border-top: var(--b); text-align: center; }
.s-cta .sec-title { color: var(--paper); }
.s-cta .label { color: rgba(242,232,213,.5); }

@media (max-width: 768px) {
  .story-2-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}