/* ---- page: services ----
   Support for Growing Minds. Linen hero w/ flanking interior photos, Coral
   Gables street band, "What Dr. Wald Treats" 9-item icon grid, serif statement
   band, How She Helps, warm-space photo split, age cards, sage CTA. */

/* 1. HERO: centered editorial hero (option 2). Serif headline over centered
   copy + one CTA, wide rounded office photo with backing shapes, four-item
   highlight strip, faint botanical line art. Scoped .services-hero, site tokens. */
.services-hero {
  position: relative;
  overflow: hidden;
  min-height: 880px;
  padding: clamp(54px, 6vw, 96px) clamp(20px, 5vw, 80px) 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.74), transparent 33rem),
    linear-gradient(180deg, #fbf8f0 0%, #f7f2e8 68%, #efe5d4 100%);
  isolation: isolate;
}
.services-hero::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -150px;
  z-index: -2;
  height: 330px;
  border-radius: 50% 50% 0 0 / 48% 48% 0 0;
  background: #ece2d0;
}
.services-hero__content {
  position: relative;
  z-index: 4;
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
}
.services-hero__eyebrow {
  margin: 0 0 24px;
  color: var(--sage-deep);
  font-family: var(--sans);
  font-size: clamp(.72rem, .9vw, .88rem);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}
.services-hero__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(3.6rem, 6vw, 6.4rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .9;
  text-wrap: balance;
}
.services-hero__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(420px, 60vw);
  margin: 26px auto 20px;
  color: var(--sage);
}
.services-hero__divider span { flex: 1; height: 1px; background: rgba(102,127,91,.28); }
.services-hero__divider svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.services-hero__description {
  max-width: 810px;
  margin: 0 auto;
  color: var(--body);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.65;
  text-wrap: balance;
}
.services-hero__content .btn { margin-top: 24px; }

.services-hero__media-wrap {
  position: relative;
  z-index: 3;
  width: min(1040px, 78vw);
  margin: 28px auto 0;
}
.services-hero__media {
  position: relative;
  z-index: 3;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 5.6;
  border: 1px solid rgba(52, 74, 59, .08);
  border-radius: 26px;
  background: #d8d0bf;
  box-shadow: 0 24px 60px rgba(52, 59, 45, .14);
}
.services-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.services-hero__backdrop { position: absolute; z-index: 1; bottom: -20px; height: 74%; border-radius: 26px; }
.services-hero__backdrop--left { left: -56px; width: 42%; background: #e8ddc8; }
.services-hero__backdrop--right { right: -56px; width: 42%; background: #d8ded0; }

.services-hero__features {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1080px, calc(100% - 40px));
  margin: -4px auto 0;
  padding: 30px 24px 34px;
  list-style: none;
  border: 1px solid rgba(62,78,66,.08);
  border-radius: 24px 24px 0 0;
  background: rgba(251, 248, 241, .94);
  box-shadow: 0 18px 38px rgba(59,63,48,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.services-hero__features li { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; padding: 0 20px; }
.services-hero__features li + li { border-left: 1px solid var(--line); }
.services-hero__features strong { display: block; color: #546b4e; font-family: var(--sans); font-size: .96rem; font-weight: 600; line-height: 1.25; }
.services-hero__features small { display: block; margin-top: 4px; color: #758077; font-family: var(--sans); font-size: .74rem; line-height: 1.35; }
.services-hero__icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: #f6f3eb; color: var(--sage); }
.services-hero__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.services-hero__botanical { position: absolute; z-index: 0; width: clamp(160px, 22vw, 330px); color: rgba(183,166,130,.22); pointer-events: none; }
.services-hero__botanical--left { left: -46px; top: 178px; transform: rotate(-10deg); }
.services-hero__botanical--right { right: -48px; top: 112px; transform: scaleX(-1) rotate(-8deg); }

@media (max-width: 1180px) {
  .services-hero { min-height: 820px; }
  .services-hero__media-wrap { width: min(960px, 84vw); }
}
@media (max-width: 860px) {
  .services-hero { min-height: auto; padding: 58px 16px 0; }
  .services-hero__content { max-width: 690px; }
  .services-hero__title { font-size: clamp(3.2rem, 12vw, 5rem); }
  .services-hero__description { font-size: 1rem; }
  .services-hero__media-wrap { width: calc(100% - 16px); margin-top: 30px; }
  .services-hero__media { aspect-ratio: 16/8; border-radius: 20px; }
  .services-hero__backdrop { display: none; }
  .services-hero__features { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 16px); padding: 18px 12px 24px; border-radius: 18px 18px 0 0; }
  .services-hero__features li { justify-content: flex-start; padding: 16px 18px; }
  .services-hero__features li + li { border-left: 0; }
  .services-hero__features li:nth-child(even) { border-left: 1px solid var(--line); }
  .services-hero__features li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .services-hero__botanical { opacity: .55; }
}
@media (max-width: 560px) {
  .services-hero { padding-top: 46px; }
  .services-hero__eyebrow { margin-bottom: 18px; font-size: .66rem; letter-spacing: .16em; }
  .services-hero__title { font-size: clamp(2.9rem, 15vw, 4rem); line-height: .92; }
  .services-hero__divider { width: 70vw; margin-block: 20px 16px; }
  .services-hero__description { line-height: 1.55; }
  .services-hero__content .btn { width: 100%; max-width: 360px; }
  .services-hero__media { aspect-ratio: 4/3; }
  .services-hero__media img { object-position: 54% center; }
  .services-hero__features { grid-template-columns: 1fr; }
  .services-hero__features li { padding: 14px 16px; }
  .services-hero__features li:nth-child(even) { border-left: 0; }
  .services-hero__features li:nth-child(n+2) { border-top: 1px solid var(--line); }
  .services-hero__botanical { display: none; }
}

/* 2. Coral Gables street band */
.street-band img { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; }

/* 3. What Dr. Wald Treats: centered line-icon columns split by vertical
   hairlines, the same treatment as "How She Helps" below and the icon band on
   the home page. 9 items, 3 per row on desktop (.grid.grid-3 in the markup). */
.treat { text-align: center; }
.treat-ic { display: block; width: 40px; height: 40px; margin: 0 auto 18px; }
.treat-ic svg { width: 100%; height: 100%; stroke: var(--sage-deep); stroke-width: 1.4; fill: none; }
.treat h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); margin-bottom: 12px; line-height: 1.12; }
.treat p { font-size: .95rem; color: var(--body); max-width: 34ch; margin-inline: auto; }
.treat a.treat-link { display: block; color: inherit; }
.treat a.treat-link h3 { transition: color .2s var(--ease); }
.treat a.treat-link:hover h3 { color: var(--sage-deep); }
.treats-more { text-align: center; margin-top: clamp(36px, 4.5vw, 52px); }
/* Desktop: three per row, split by vertical hairlines. Each card hands its
   icon / title / copy to grid rows it shares with the two cards beside it, so a
   two line title no longer pushes its own copy out of line with its neighbours
   (same technique as the credentials grid on the about page). The row gap
   becomes a fourth track between bands, which grid-auto-rows cycles. */
@media (min-width: 861px) {
  .treats-cols { gap: 0; grid-auto-rows: auto auto auto clamp(40px, 4.5vw, 60px); }
  .treats-cols .treat {
    display: grid; grid-template-rows: subgrid;
    padding-inline: clamp(24px, 3vw, 44px);
  }
  .treats-cols .treat > div { display: contents; }
  .treats-cols .treat:nth-child(-n + 3) { grid-row: 1 / span 3; }
  .treats-cols .treat:nth-child(n + 4):nth-child(-n + 6) { grid-row: 5 / span 3; }
  .treats-cols .treat:nth-child(n + 7) { grid-row: 9 / span 3; }
  .treats-cols .treat + .treat { border-left: 1px solid var(--line); }
  .treats-cols .treat:nth-child(3n + 1) { grid-column: 1; border-left: 0; }
  .treats-cols .treat:nth-child(3n + 2) { grid-column: 2; }
  .treats-cols .treat:nth-child(3n + 3) { grid-column: 3; }
}

/* 4. Big serif statement band */
.statement-band { background: var(--ivory); text-align: center; }
.statement-band h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.15;
  max-width: 22ch;
  margin-inline: auto;
}
.statement-band .btn { margin-top: clamp(28px, 3.5vw, 40px); }
@media (max-width: 480px) { .statement-band .btn { width: 100%; max-width: 360px; } }

/* 5. How She Helps (3 line-icon columns) */
.helps-head { text-align: center; margin-bottom: clamp(36px, 4.5vw, 56px); }
.help-col { text-align: center; }
.help-ic { width: 40px; height: 40px; margin: 0 auto 18px; }
.help-ic svg { width: 100%; height: 100%; stroke: var(--sage-deep); stroke-width: 1.4; fill: none; }
.help-col h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); margin-bottom: 12px; }
.help-col p { font-size: .95rem; max-width: 34ch; margin-inline: auto; }
@media (min-width: 861px) {
  .helps-cols { gap: 0; }
  .helps-cols .help-col { padding-inline: clamp(24px, 3vw, 44px); }
  .helps-cols .help-col + .help-col { border-left: 1px solid var(--line); }
}

/* 6. Warm supportive space photo split */
.space-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.space-split .space-photo { overflow: hidden; min-height: 320px; }
.space-split .space-photo img { width: 100%; height: 100%; object-fit: cover; }
.space-split .space-text {
  background: var(--linen);
  padding: clamp(44px, 5vw, 84px) clamp(28px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
}
.space-split .space-text h2 { margin-bottom: 0; }
.space-split .space-text .rule { margin: 22px 0 30px; }   /* left aligned, as on the home and parents splits */
.space-split .space-text .place {
  margin-top: 26px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--sage-deep);
}
@media (max-width: 860px) {
  .space-split { grid-template-columns: 1fr; }
  .space-split .space-photo { min-height: 260px; }
  /* stacked, the split heading stops being a split: centre it so it reads like
     every other section head on the page */
  .space-split .space-text { text-align: center; }
  .space-split .space-text .rule { margin-inline: auto; }
  .space-split .space-text p { max-width: 46ch; margin-inline: auto; }
}

/* 7. Age cards */
.age-head { text-align: center; margin-bottom: clamp(36px, 4.5vw, 56px); }
.age-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 44px); }
.age-card { text-align: center; }
.age-card .age-photo {
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ivory);
  margin-bottom: 20px;
}
.age-card .age-photo img { width: 100%; height: clamp(200px, 20vw, 240px); object-fit: cover; display: block; }
.age-card h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); margin-bottom: 10px; }
.age-card p { font-size: .95rem; max-width: 32ch; margin-inline: auto; }
@media (max-width: 860px) {
  .age-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* 8. Sage CTA band with palm-frond decoration */
.svc-cta { position: relative; background: var(--sage); color: var(--ivory); text-align: center; overflow: hidden; }
.svc-cta .cta-inner { position: relative; z-index: 2; }
.svc-cta h2 { color: var(--ivory); margin-bottom: 4px; }
.svc-cta p { color: rgba(251,248,241,.92); max-width: 46ch; margin: 18px auto 0; }
.svc-cta .rule { background: rgba(255,255,255,.55); }
/* the two phrases wrap as whole units, never mid-phrase; below 620px they
   stack on their own lines and the separator dot is dropped */
.svc-cta .cta-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 6px 14px; margin-top: 30px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: rgba(251,248,241,.85);
}
.svc-cta .cta-foot-item { white-space: nowrap; }
@media (max-width: 620px) {
  .svc-cta .cta-foot { gap: 8px 0; }
  .svc-cta .cta-foot-item { flex: 0 0 100%; }
  .svc-cta .cta-foot-sep { display: none; }
}
.svc-cta .palm { position: absolute; z-index: 1; pointer-events: none; opacity: .28; width: min(320px, 30vw); }
.svc-cta .palm-l { left: -40px; bottom: -30px; transform: scaleX(-1); }
.svc-cta .palm-r { right: -40px; top: -30px; }
@media (max-width: 620px) { .svc-cta .palm { width: 150px; opacity: .22; } }