/* Style B, "Soft": rounded and friendly, pastel blocks, one modern font (DM Sans), no outlines. */
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dmsans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #22302f; --muted: #5c6766; --cream: #fbf8f4; --paper: #ffffff; --line: #ece6de;
  --teal-900: #1f3b3d; --teal-700: #127074; --teal-50: #eaf5f3;
  --pink-100: #fcecef;
  --coral: #c4532f; --coral-dark: #a2421f;
  --radius: 24px; --shadow: 0 2px 10px rgba(34, 48, 47, .05);
  --heading: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 7vw, 3.3rem); line-height: 1.08; }
.eyebrow { text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--coral-dark); }

.hero { background: var(--cream); }
.page-head { background: var(--cream); }
.hero-photo img { box-shadow: none; border-radius: 32px; }
.section.tint { background: var(--teal-50); }
#centers + .section.tint { background: var(--pink-100); }

.card, .facts, .tour-form { border: 0; box-shadow: var(--shadow); }
/* Phones: the five strengths are one compact white list. Wider screens: soft tiles, two across. */
.strengths { gap: 0; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 4px 0; }
.strengths li { border: 0; border-radius: 0; background: none; align-items: center; gap: 12px; padding: 8px 14px; }
.strengths li + li { border-top: 1px solid var(--line); }
.strengths b { font-size: 1rem; }
.strengths li > span:last-child { font-size: .88rem; line-height: 1.35; }
@media (min-width: 640px) {
  .strengths { grid-template-columns: 1fr 1fr; gap: 10px; background: none; box-shadow: none; padding: 0; }
  .strengths li { background: var(--paper); border-radius: 18px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; box-shadow: var(--shadow); }
  .strengths li + li { border-top: 0; }
  .strengths li > span:last-child { font-size: .9rem; }
  .strengths li:last-child { grid-column: 1 / -1; flex-direction: row; }
}
.ico { flex-basis: 36px; width: 36px; height: 36px; background-size: 20px; }

.btn { font-weight: 700; }
.btn-ghost { border-color: transparent; background: var(--teal-50); color: var(--teal-900); box-shadow: none; }
.menu-btn { border-color: transparent; background: var(--teal-50); }
.site-header { box-shadow: none; background: var(--cream); }

.avatar { font: 700 1.2rem var(--body); }
.step-num { font: 700 1.1rem var(--body); }
thead th { background: var(--teal-50); color: var(--teal-900); }
input, select, textarea, .field .check { border: 0; background: #f3efe9; border-radius: 14px; }

.site-footer { background: var(--teal-900); }
.footer-logo { border-radius: 16px; }
.mobile-bar { background: rgba(251, 248, 244, .97); box-shadow: 0 -2px 12px rgba(0,0,0,.06); }