/* Dellatorre Health & Wellness site: components used ONLY by the three
   next-step pages (/services/, /about/, /contact/). Loaded after dhw.css and
   never by index.html, so the home page Dora reviews on 2026-09-21 cannot be
   moved by anything in this file.

   Every value below is a token from
   Clients/Dellatorre Health & Wellness/Assets/Brand/DESIGN.md §2c, or a radius
   from its §4. ⛔ No new color is introduced. The skeleton for the pill index
   and the numbered rhythm comes from the design library's `organic` spec
   ("Vary each card's border-radius slightly for a handmade feel"), skin from
   DESIGN.md only, per the library precedence table. ---- */

/* ---- at-a-glance service index: one card, five pills ---- */
.svc-index{background:var(--cream);border:1px solid var(--deep);border-radius:24px 8px 24px 8px;padding:1.5rem 1.7rem;box-shadow:var(--shadow);margin-bottom:2.2rem;max-width:72ch}
@media (prefers-reduced-motion:reduce){.pill-row a:hover{transform:none!important}}
.svc-index h2{font-size:1.2rem;margin-bottom:.9rem}
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.pill-row a{display:inline-block;font-size:.88rem;font-weight:500;color:var(--sage-deep);background:var(--sage-soft);border-radius:100px;padding:.42rem 1rem;transition:background-color .2s,color .2s,transform .2s,box-shadow .2s}
.pill-row a:hover,.pill-row a:focus-visible{background:var(--sage);color:var(--cream);transform:translateY(-2px);box-shadow:0 0 0 3px var(--sage-soft)}

/* ---- service cards carry a second paragraph on these pages ---- */
.card p+p{margin-top:.7rem}
.card .what{font-size:.92rem;color:var(--muted)}
.card .what b{color:var(--ink);font-weight:500}

/* ---- About: the philosophy pull quote gets its own band ---- */
.quote-band{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.quote-big{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:300;line-height:1.45;max-width:26ch;border-left:3px solid var(--navy);padding-left:1.4rem}

/* ---- service area town chips ---- */
.local{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.1rem 0 0;padding:0}
.local li{font-size:.88rem;color:var(--ink);background:var(--tan);border:1px solid var(--deep);border-radius:100px;padding:.34rem .9rem}

/* ---- .split / .split-top moved to dhw.css 2026-09-21: the home page's
   #request now shares the same two-up pattern. ---- */

/* ---- About: bio beside the portrait, credentials full width beneath, so
   neither column ends in a hole the way a .9fr/1.1fr split did. ---- */
.about.about-page .wrap{display:block}
.creds-4{grid-template-columns:1fr 1fr;margin-top:2.4rem}

/* ---- About: the portrait is a 920x966 upright, not the 880x460 landscape
   dhw.css .about-photo was built for, so the fixed 230px strip is overridden
   here and the frame follows the file's own ratio. ---- */
.about-page .about-photo{margin:0}
/* Capped at the chosen headshot's native 360px so it never renders upscaled
   and soft; centered in its column. */
.about-page .about-photo img{height:auto;aspect-ratio:360/378;max-width:360px;margin-inline:auto}

/* ---- About: the rest of the bio sits in the quote band's second column, so
   neither the quote nor the text column ends in a hole. ---- */
.quote-band .bio{margin-top:1rem;max-width:56ch}
.quote-band div>.bio:first-child{margin-top:0}
.quote-band .bio strong{font-weight:500;color:var(--sage)}

/* ---- the page head ran two columns only to seat the review note beside the
   heading. With the note gone the heading takes the full measure, so the
   right half is no longer left empty. ---- */

@media (max-width:880px){
  .quote-band{grid-template-columns:1fr;gap:2rem}
  .creds-4{grid-template-columns:1fr;margin-top:1.8rem}
  .svc-index{padding:1.3rem 1.3rem}
}