/* ---------- the three services as tabs (homepage) ----------
   Each tab carries the logo's scalloped hem along its top edge,
   so the signature device is doing the navigating. */

.svc{margin-top:clamp(2.2rem,4.5vw,3.4rem)}

.svc input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}

.svc-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.5rem,1.2vw,.9rem);
  align-items:stretch;
}

.svc-tab{
  --tab-bg:var(--blush);
  position:relative;
  display:block;
  margin-top:var(--sc);
  padding:.85rem clamp(.7rem,1.6vw,1.4rem) clamp(.95rem,1.8vw,1.25rem);
  font-family:var(--font-display);
  font-size:clamp(.95rem,1.45vw,1.2rem);
  line-height:1.22;
  color:var(--ink-soft);
  background:var(--tab-bg);
  cursor:pointer;
  transition:color .18s ease,background-color .18s ease;
  text-wrap:balance;
}

/* the scalloped top edge, painted rather than masked */
.svc-tab::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:var(--sc);
  background-image:radial-gradient(circle var(--sc) at var(--sc) 100%,var(--tab-bg) 99%,transparent 100%);
  background-size:calc(var(--sc) * 2) var(--sc);
  background-repeat:repeat-x;
}

.svc-tab:hover{--tab-bg:var(--rose-soft);color:var(--paper)}

#t-sleep:checked ~ .svc-strip .svc-tab[for="t-sleep"],
#t-doula:checked ~ .svc-strip .svc-tab[for="t-doula"],
#t-lact:checked ~ .svc-strip .svc-tab[for="t-lact"]{
  --tab-bg:var(--rose-deep);
  color:var(--paper);
  cursor:default;
}

#t-sleep:focus-visible ~ .svc-strip .svc-tab[for="t-sleep"],
#t-doula:focus-visible ~ .svc-strip .svc-tab[for="t-doula"],
#t-lact:focus-visible ~ .svc-strip .svc-tab[for="t-lact"]{
  outline:2px solid var(--rose-deep);
  outline-offset:3px;
}

.svc-panel{
  display:none;
  background:var(--paper);
  padding:clamp(1.5rem,3.2vw,2.6rem);
}

#t-sleep:checked ~ .p-sleep,
#t-doula:checked ~ .p-doula,
#t-lact:checked ~ .p-lact{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1rem,3.5vw,3rem);
  align-items:start;
}

.svc-when{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.25rem,2.3vw,1.75rem);
  line-height:1.2;
  color:var(--ink);
  max-width:20ch;
}

.svc-what{margin:0;color:var(--ink-soft);font-size:1rem;max-width:56ch}

.svc-more{
  display:inline-block;
  margin-top:1.15rem;
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--rose-deep);
  text-decoration:none;
  border-bottom:1px solid var(--rose-soft);
  padding-bottom:.3rem;
  transition:border-color .18s ease;
}
.svc-more:hover{border-bottom-color:var(--rose-deep)}

@media (max-width:700px){
  .svc-strip{grid-template-columns:1fr;gap:0;align-items:stretch}
  .svc-tab{padding:.75rem 1.1rem .85rem;font-size:1.02rem}
  .svc-tab + .svc-tab{margin-top:calc(var(--sc) + .55rem)}
  #t-sleep:checked ~ .p-sleep,
  #t-doula:checked ~ .p-doula,
  #t-lact:checked ~ .p-lact{grid-template-columns:1fr;gap:.8rem}
}