/* ---------- Treatments by Concern (BRIEF 5.6, 6, 7) ---------- */
#services{position:relative;isolation:isolate}
/* soft entry: the band colour above feathers into the section (eased stops avoid a visible edge) */
#services::before{content:"";position:absolute;inset:0 0 auto;height:var(--svc-feather-h,0);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--svc-feather),1) 0%,rgba(var(--svc-feather),.74) 19%,rgba(var(--svc-feather),.54) 34%,rgba(var(--svc-feather),.38) 47%,
    rgba(var(--svc-feather),.26) 56%,rgba(var(--svc-feather),.17) 65%,rgba(var(--svc-feather),.1) 73%,rgba(var(--svc-feather),.05) 81%,rgba(var(--svc-feather),.02) 89%,rgba(var(--svc-feather),0) 100%)}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;margin-bottom:2.4rem}
.filter{font:600 .8125rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cream);background:none;border:0;
  padding:.7rem 0;cursor:pointer;position:relative;transition:color .35s var(--ease)}
.filter::after{content:"";position:absolute;left:50%;right:50%;bottom:.15rem;height:2px;background:var(--gold-display);transition:all .4s var(--ease)}
.filter:hover,.filter[aria-pressed="true"]{color:var(--gold-ink)}
.filter:hover::after,.filter[aria-pressed="true"]::after{left:0;right:0}
.filter:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.filter::before{content:"";position:absolute;inset:-.33rem -.6rem} /* touch target ~44px without changing the layout */
.concern-intro{max-width:62ch;margin:0 auto 3rem;text-align:center;color:var(--muted);font-size:1rem;line-height:1.6;min-height:3.2em;transition:opacity .3s}
.concern-intro.swap{opacity:0}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.svc{position:relative;display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:4px;
  padding:3rem 2.5rem 2.6rem;overflow:hidden;transition:transform .5s var(--ease),border-color .5s}
.svc[hidden]{display:none}
.svc:hover,.svc:focus-within{transform:translateY(-4px);border-color:var(--gold-rich)}
.svc-icon{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;margin-bottom:1.4rem;transition:.5s}
.svc-icon svg{width:22px;height:22px;stroke:var(--gold-rich);transition:.5s}
.svc:hover .svc-icon,.svc:focus-within .svc-icon{background:var(--gold-rich);border-color:var(--gold-rich)}
.svc:hover .svc-icon svg,.svc:focus-within .svc-icon svg{stroke:var(--on-gold)}
.svc .tag{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.svc h3{font-size:1.8rem;color:var(--cream);margin-bottom:.6rem}
.svc p{color:var(--muted);font-size:.9375rem;flex:1;margin-bottom:1.4rem}
.svc .price{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--rule);padding-top:1.1rem}
.svc .price .from{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-mist)}
.svc .price .amt{font-family:var(--serif);font-weight:500;font-size:1.6rem;line-height:1;letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;color:var(--gold-display);white-space:nowrap}
/* the whole card is one button, stretched over the card */
.svc-open{font:400 .8125rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);background:none;border:0;
  padding:0;margin-top:1.1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;transition:gap .3s,color .3s}
.svc-open::before{content:"";position:absolute;inset:0;z-index:1}
.svc-open:focus-visible{outline:none}
.svc:has(.svc-open:focus-visible){outline:1px solid var(--gold);outline-offset:3px}
.svc:hover .svc-open{color:var(--gold-display);gap:.8rem}

.svc-cta{text-align:center;margin-top:3.4rem}
.svc-cta p{color:var(--cream-dim);font-size:.8125rem;margin-top:1rem;letter-spacing:.06em}

@media(max-width:960px){ .svc-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem} .svc{padding:2.4rem 2rem 2.2rem} }
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .filters{gap:.6rem 1.4rem}
  .filter{font-size:.75rem;letter-spacing:.14em}
  .svc h3{font-size:1.6rem}
}

/* ---------- Treatment detail dialog ---------- */
.tmodal{border:0;padding:1.5rem;background:transparent;max-width:none;max-height:none;width:100%;height:100%;
  display:none;align-items:center;justify-content:center;color:var(--cream)}
.tmodal[open]{display:flex}
.tmodal::backdrop{background:var(--overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tmodal-panel{position:relative;width:min(620px,100%);max-height:calc(100svh - 3rem);overflow-y:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:3rem 2.8rem;box-shadow:0 50px 120px -40px rgba(0,0,0,.7);animation:tmpop .5s var(--ease)}
@keyframes tmpop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.tmodal-close{position:absolute;top:.6rem;right:.8rem;width:48px;height:48px;background:none;border:0;color:var(--cream);font:300 2.1rem/1 var(--serif);cursor:pointer}
.tmodal-tag{font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.tmodal-title{font-size:2.3rem;color:var(--cream);margin:.5rem 0 1rem;padding-right:2rem}
.tmodal-desc{color:var(--muted);line-height:1.75;margin-bottom:1.9rem}
.tmodal-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden;margin-bottom:1.9rem}
.tstat{background:var(--tile-bg);padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.4rem}
.tstat dt{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-mist)}
.tstat dd{font-family:var(--serif);font-size:1.2rem;color:var(--cream);line-height:1.25}
.tmodal-note{margin-bottom:2rem}
.tmodal-note span{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.4rem}
.tmodal-note p{color:var(--cream-dim);font-size:.9375rem;line-height:1.65}
.tmodal-actions{display:flex;flex-direction:column;gap:.9rem}
.tmodal-actions .btn{width:100%;justify-content:center}
.tmodal-fine{font-size:.75rem;color:var(--muted);letter-spacing:.04em;text-align:center}
body.modal-open{overflow:hidden}
@media(max-width:520px){
  .tmodal{padding:.8rem}
  .tmodal-panel{padding:2.4rem 1.5rem 2rem}
  .tmodal-title{font-size:1.9rem}
  .tmodal-stats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.tmodal-panel{animation:none}}
.svc .price-note{flex:none;margin:.6rem 0 0;font-size:.75rem;letter-spacing:.06em;color:var(--cream-dim)}
@media(max-width:820px),(pointer:coarse){ .svc .tag,.svc .price .from{font-size:.75rem} } /* ~11px floor on phones and tablets */
/* Tablet two-column grid: an odd last card (e.g. 9 treatments, or a filtered set of 3) sits centred rather than alone on the left */
@media(min-width:641px) and (max-width:960px){
  .svc-grid>.svc:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])){grid-column:1/-1;justify-self:center;width:calc(50% - .7rem)}
}

/* Homepage concern blocks (draft, 6 Nov 2026): four cards, each linking to its treatments and to the concern */
.hc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.svc.hc{padding:2.4rem 1.9rem 2.1rem}
.svc.hc:hover{transform:none}
.svc.hc h3{font-size:1.5rem;margin-bottom:.7rem}
.svc.hc p{flex:none;margin-bottom:1.2rem}
.hc-names{list-style:none;display:grid;gap:.45rem;margin-bottom:1.6rem;flex:1;align-content:start}
.hc-names a{font-size:.9375rem;color:var(--cream-dim);border-bottom:1px solid var(--rule);transition:color .3s,border-color .3s}
.hc-names a:hover{color:var(--gold-display);border-color:var(--gold-rich)}
.hc-more{border-top:1px solid var(--rule);padding-top:1.1rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);line-height:1.5;transition:color .3s}
.hc-more:hover{color:var(--gold-display)}
@media(max-width:1100px){.hc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hc-grid{grid-template-columns:1fr}}