/* Cute Clinic — about page styles.
 * Scoped under .ab-page so nothing leaks into other pages.
 */

body { background: #f8f3ea; }

/* --------------------------------------------------
   .ab-page, scoped about-page redesign
   -------------------------------------------------- */
.ab-page {
  --green:       #1e4d37;
  --green-soft:  #2a6648;
  --green-deep:  #163829;
  --cream:       #f3ecdc;
  --cream-soft:  #fafaf7;
  --cream-warm:  #f8f3ea;
  --ink:         #1a1a1a;
  --ink-muted:   #555;
  --ink-soft:    #888;
  --rule:        #e3ddcc;

  font-family: "Karla", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream-soft);
  line-height: 1.6;
}

.ab-page * { box-sizing: border-box; }
.ab-page img { max-width: 100%; height: auto; display: block; }
.ab-page a { color: inherit; text-decoration: none; border-bottom: 0; }

.ab-container {
  max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
}
.ab-container--narrow { max-width: 760px; }

.ab-section { padding-block: clamp(56px, 8vw, 104px); }
.ab-section--tight { padding-block: clamp(40px, 5vw, 64px); }
.ab-section--tall  {
  padding-block: clamp(120px, 15vw, 200px);
  min-height: 75vh;
  display: flex; align-items: center;
}
.ab-section--tall > .ab-container { width: 100%; }
.ab-section--green {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green);
  color: var(--cream);
}
/* Match the footer's ambient gradient so both greens read as the same colour */
.ab-section--green::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 50% at 10% 0%, rgba(243, 236, 220, 0.06), transparent 60%),
    radial-gradient(60% 40% at 90% 100%, rgba(0, 0, 0, 0.22), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.ab-section--cream { background: var(--cream-warm); }

.ab-eyebrow {
  display: inline-block;
  font-family: "Karla", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green);
  margin: 0 0 24px;
}
.ab-section--green .ab-eyebrow { color: var(--cream); opacity: 0.7; }

.ab-h1 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 200;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 24px;
}
.ab-h1 em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400;
  color: var(--green);
}
.ab-h2 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 200;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 24px;
}
.ab-h2 em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400;
  color: var(--green);
}
.ab-section--green .ab-h1,
.ab-section--green .ab-h2 { color: var(--cream); }
.ab-section--green .ab-h1 em,
.ab-section--green .ab-h2 em { color: var(--cream); opacity: 0.85; }

.ab-lead {
  font-family: "Spectral", Georgia, serif;
  font-weight: 200;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 32px;
  max-width: 56ch;
}

.ab-body {
  font-family: "Spectral", Georgia, serif;
  font-weight: 200;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.ab-body p { margin: 0 0 20px; }
.ab-body p:last-child { margin-bottom: 0; }
.ab-body a {
  border-bottom: 1px solid var(--green);
  color: var(--green);
}
.ab-body a:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* ------- Buttons ------- (matches existing site: Spectral 200, light weight) */
.ab-page .ab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 10px 22px;
  font-family: "Spectral", Georgia, serif;
  font-size: 0.9rem; font-weight: 200;
  letter-spacing: 0;
  background: var(--green); color: var(--cream);
  border: 1px solid var(--green);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.ab-page .ab-btn:hover { background: var(--green-soft); border-color: var(--green-soft); color: var(--cream); }
.ab-page .ab-btn--ghost { background: transparent; color: var(--green); }
.ab-page .ab-btn--ghost:hover { background: var(--green); color: var(--cream); }
.ab-page .ab-section--green .ab-btn {
  background: var(--cream); color: var(--green); border-color: var(--cream);
}
.ab-page .ab-section--green .ab-btn:hover { background: #fff; border-color: #fff; color: var(--green); }
.ab-page .ab-section--green .ab-btn--ghost {
  background: transparent; color: var(--cream); border-color: var(--cream);
}
.ab-page .ab-section--green .ab-btn--ghost:hover { background: var(--cream); color: var(--green); }

/* ============================================================
   1) HERO
   Two-column: text left, portrait right, credential pills below text.
   ============================================================ */
.ab-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.ab-hero__text { max-width: 540px; }
.ab-hero__image {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-warm);
}
.ab-hero__image img {
  width: 100%; height: 100%; object-fit: cover;
}
.ab-hero__image::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 60px rgba(30, 77, 55, 0.08);
  pointer-events: none;
}
.ab-creds {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 32px 0;
}
.ab-cred-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 999px;
  font-family: "Karla", sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.ab-cred-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
}

@media (max-width: 880px) {
  .ab-hero { grid-template-columns: 1fr; }
  .ab-hero__image { aspect-ratio: 4 / 4; max-height: 60vh; }
}

/* ============================================================
   2) STORY, single-column narrative with an inset pull quote
   ============================================================ */
.ab-story {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.ab-quote {
  border-left: 2px solid var(--green);
  margin: 40px 0;
  padding: 8px 0 8px 28px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  color: var(--green);
  max-width: 28em;
}
.ab-story__sig {
  display: flex; align-items: center; gap: 20px;
  margin-top: 40px;
}
.ab-story__sig img { width: 140px; height: auto; }
.ab-story__sig-line {
  font-family: "Karla", sans-serif;
  font-size: 13px; color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* ============================================================
   3) APPROACH, areas-we-support card grid
   ============================================================ */
.ab-approach__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 64px;
  align-items: end;
}
.ab-approach__intro p {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-size: 1.06rem; line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}
@media (max-width: 880px) {
  .ab-approach__head { grid-template-columns: 1fr; gap: 24px; }
}

.ab-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.ab-card {
  background: var(--cream-soft);
  padding: 36px 32px 36px;
  display: flex; flex-direction: column;
  gap: 12px;
  transition: background-color .25s ease;
}
.ab-card:hover { background: #fff; }
.ab-card__num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--green);
  opacity: 0.55;
  line-height: 1;
}
.ab-card__title {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.ab-card__body {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}
@media (max-width: 880px) { .ab-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ab-cards { grid-template-columns: 1fr; } }

/* ============================================================
   4) CREDENTIALS + CTA, one green section that flows into footer
   ============================================================ */
.ab-creds-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.ab-quals { list-style: none; padding: 0; margin: 0; }
.ab-quals li {
  padding: 22px 0;
  border-bottom: 1px solid rgba(243, 236, 220, 0.22);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px; align-items: baseline;
}
.ab-quals li:first-child { padding-top: 0; }
.ab-quals li:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-qual__abbr {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.7rem;
  color: var(--cream);
  letter-spacing: 0.01em;
  line-height: 1;
}
.ab-qual__name {
  font-family: "Spectral", serif;
  font-weight: 300; font-size: 1.08rem;
  color: var(--cream); margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.ab-qual__body {
  font-family: "Spectral", serif;
  font-weight: 200; font-size: 0.95rem;
  color: rgba(243, 236, 220, 0.72);
  margin: 0; line-height: 1.55;
}
.ab-quals a {
  color: var(--cream);
  border-bottom: 1px solid rgba(243, 236, 220, 0.4);
  transition: border-color .2s ease;
}
.ab-quals a:hover { border-bottom-color: var(--cream); }
.ab-quals strong { color: var(--cream); font-weight: 400; }
.ab-creds-image {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-warm);
  /* soft cream frame so the photo separates cleanly from the green */
  box-shadow: 0 0 0 1px rgba(243, 236, 220, 0.18);
}
.ab-creds-image img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 880px) {
  .ab-creds-grid { grid-template-columns: 1fr; }
  .ab-creds-image { order: -1; max-height: 50vh; }
  .ab-quals li { grid-template-columns: 90px 1fr; }
}

/* CTA strip at the bottom of the green credentials section, small divider, cream text */
.ab-section--green .ab-cta-inline {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid rgba(243, 236, 220, 0.22);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.ab-section--green .ab-cta-inline__text {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  margin: 0;
  max-width: 22ch;
  color: var(--cream);
}
.ab-section--green .ab-cta-inline__text em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400;
  color: var(--cream);
  opacity: 0.85;
}
.ab-cta-inline__buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   5) CTA, substantial section, two-column
   ============================================================ */
.ab-cta-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.ab-cta__heading {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 24px;
  max-width: 16ch;
  letter-spacing: -0.01em;
}
.ab-cta__heading em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400;
  color: var(--green);
}
.ab-cta__lede {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 0 24px;
  max-width: 48ch;
}
.ab-cta__buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.ab-expect {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(28px, 3.5vw, 44px);
}
.ab-expect__title {
  font-family: "Karla", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green);
  margin: 0 0 20px;
}
.ab-expect__list { list-style: none; padding: 0; margin: 0; }
.ab-expect__list li {
  display: grid; grid-template-columns: 32px 1fr; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.ab-expect__list li:first-child { padding-top: 0; }
.ab-expect__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-expect__num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--green);
  line-height: 1;
}
.ab-expect__copy {
  font-family: "Spectral", serif;
  font-weight: 200;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.ab-expect__copy strong {
  font-weight: 400; color: var(--ink);
  font-family: "Spectral", serif;
}
@media (max-width: 880px) { .ab-cta-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Subtle entrance fades on scroll
   ============================================================ */
.ab-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.ab-fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ab-fade { opacity: 1; transform: none; transition: none; }
}