/* Echo Ink Books — About + Contact */
.page-hero {
  padding:78px 0 84px;
  background:
    radial-gradient(circle at 88% 18%, rgba(246,196,79,.30), transparent 22%),
    radial-gradient(circle at 10% 88%, rgba(220,239,252,.86), transparent 28%),
    var(--cream);
}
.page-hero-grid {
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:48px;
  align-items:center;
}
.page-hero p,
.story-copy p,
.contact-copy p,
.contact-card p,
.mission-card p,
.echo-about p,
.audience-card p {
  color:var(--muted);
}
.hero-card,
.contact-card,
.mission-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  padding:32px;
  box-shadow:var(--shadow-sm);
}
.hero-card .echo-line {
  display:block;
  margin-top:10px;
  padding:12px 15px;
  border-radius:999px;
  background:var(--cream);
  font-weight:800;
}

/* About */
.about-story {
  padding:82px 0;
  background:#fff;
}
.about-story-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:48px;
  align-items:start;
}
.story-copy {
  display:grid;
  gap:16px;
}
.mission-section {
  padding:82px 0;
  background:var(--sky);
}
.mission-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.mission-card:nth-child(2) { background:var(--cream); }
.mission-card:nth-child(3) { background:#fff2c9; }
.mission-card .number {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-weight:800;
  margin-bottom:18px;
}
.echo-about {
  padding:82px 0;
  background:var(--cream);
}
.echo-about-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:46px;
  align-items:center;
}
.echo-principles {
  display:grid;
  gap:12px;
}
.echo-principle {
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px 20px;
  font-weight:800;
}
.who-we-serve {
  padding:82px 0;
  background:#fff;
}
.audience-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.audience-card {
  border:1px solid var(--border);
  border-radius:24px;
  padding:24px;
  background:var(--cream);
}
.about-cta {
  padding:68px 0;
  background:var(--ink);
  color:var(--cream);
}
.about-cta p { opacity:.9; }
.about-cta-box {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

/* Contact */
.contact-section {
  padding:82px 0 92px;
  background:#fff;
}
.contact-layout {
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:46px;
  align-items:start;
}
.contact-sidebar {
  display:grid;
  gap:18px;
}
.contact-card a {
  font-weight:800;
}
.contact-form {
  display:grid;
  gap:20px;
  padding:34px;
  border:1px solid var(--border);
  border-radius:30px;
  background:var(--cream);
}
.contact-form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.form-field {
  display:grid;
  gap:7px;
}
.form-field.full {
  grid-column:1/-1;
}
.form-field label {
  font-weight:800;
}
.form-field input,
.form-field select,
.form-field textarea {
  width:100%;
  min-height:52px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font:inherit;
}
.form-field textarea {
  min-height:160px;
  resize:vertical;
}
.form-note {
  color:var(--muted);
  font-size:.9rem;
}
.form-message {
  border-radius:18px;
  padding:16px 18px;
  font-weight:700;
}
.form-message.success {
  background:#edf7eb;
  border:1px solid #a8cfa2;
}
.form-message.error {
  background:#fff0ed;
  border:1px solid #e9785b;
}
.contact-paths {
  padding:72px 0;
  background:var(--sky);
}
.contact-path-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.contact-path {
  padding:27px;
  border-radius:26px;
  background:#fff;
  border:1px solid var(--border);
}
.contact-path p {
  color:var(--muted);
}
.contact-path a {
  font-weight:800;
}
@media(max-width:980px){
  .page-hero-grid,
  .about-story-grid,
  .echo-about-grid,
  .contact-layout {
    grid-template-columns:1fr;
  }
  .mission-grid,
  .contact-path-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .audience-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:680px){
  .mission-grid,
  .contact-path-grid,
  .audience-grid,
  .contact-form-grid {
    grid-template-columns:1fr;
  }
  .form-field.full { grid-column:auto; }
}