/* ==========================================================
   Services & Pricing page (services.html)
   Builds on site.css tokens: --navy, --gold, --gold-h, --ink,
   --mute, --line, --serif, --sans, --ease, --ease-out, --sec
   ========================================================== */

/* nav state: "Services" is a mega trigger button, not a link */
.topbar nav button[aria-current="page"]{color:var(--gold-sm)}
.mnav button[aria-current="page"]{color:var(--gold-tx)}
footer .ft-top a[aria-current="page"]{color:var(--gold)}

/* ---------- shared section head ---------- */
.sp-head{display:grid;grid-template-columns:1fr;gap:18px;padding-bottom:clamp(30px,3.6vw,52px)}
.sp-head h2{width:fit-content;font-size:clamp(26px,2.6vw,38px);font-weight:500;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02}
.sp-head p{max-width:420px;color:var(--mute);font-size:14px}

/* ---------- intro ---------- */
.sp-intro{padding-block:var(--sec)}
.sp-intro-line{max-width:1000px;font-size:clamp(26px,3vw,44px);line-height:1.18;letter-spacing:-.015em}
.sp-intro-line em{color:var(--gold-tx)}

/* ---------- pricing ---------- */
.sp-pricing{padding-bottom:var(--sec)}
.pr-tabs{display:none}
.pr-table{width:100%;border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}
.pr-table thead th{padding:0 0 18px;text-align:left;vertical-align:bottom;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--navy)}
.pr-table thead th small{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;color:var(--gold-sm)}
.pr-table .pr-len-h{width:50%}
.pr-table .c-std,.pr-table .c-int{width:25%;text-align:right}
.pr-table tbody th,.pr-table tbody td{padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--line);font-weight:400;text-align:left;transition:background .45s var(--ease)}
.pr-table tbody td{text-align:right;font-family:var(--serif);font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:-.01em}
.pr-table tbody td.c-int{color:var(--gold-tx)}
.pr-len{display:inline-flex;align-items:baseline;gap:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);min-width:9.5em}
.pr-len b{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:1;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.pr-bar{display:inline-block;vertical-align:middle;width:calc(var(--m) * clamp(80px,14vw,220px));height:1px;margin-left:clamp(14px,2vw,28px);background:var(--gold);transform-origin:left}
@media (hover:hover){.pr-table tbody tr:hover th{background:linear-gradient(90deg,rgba(201,164,108,.09),rgba(201,164,108,0))}}

.pr-notes{display:grid;grid-template-columns:1fr 1fr auto;gap:clamp(20px,3vw,48px);align-items:start;padding-top:clamp(24px,2.6vw,36px)}
.pr-notes p{max-width:380px;color:var(--mute);font-size:14px}
.pr-k{display:block;margin-bottom:8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--gold-sm)}

/* ---------- treatment areas (navy) ---------- */
.sp-areas{padding:var(--sec) 0}
.sp-areas-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,7vw,120px)}
.sp-areas-side h2{font-size:clamp(34px,4.2vw,64px);line-height:1.04}
.sp-areas-side h2 em{color:var(--gold)}
.sp-areas-side p{margin-top:26px;max-width:450px;color:rgba(255,255,255,.66);font-size:15px}
.sp-areas-side p.sp-areas-note{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:rgba(255,255,255,.88)}
.sp-areas-pics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px);margin-top:clamp(36px,4vw,60px);align-items:start}
.sp-areas-pics .ph{overflow:hidden;aspect-ratio:.8;background:rgba(255,255,255,.06)}
.sp-areas-pics .ph.b{margin-top:clamp(40px,5vw,80px)}
.sp-areas-pics img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.sp-areas-grid>div:last-child{position:sticky;top:110px;align-self:start}
.sp-area-list{margin:0;padding:0;list-style:none}
.sp-area-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:clamp(14px,1.5vw,20px) 0;border-bottom:1px solid var(--line)}
.sp-area-list li:first-child{border-top:1px solid var(--line)}
.sp-area-list .nm{font-family:var(--serif);font-size:clamp(28px,3.2vw,48px);line-height:1.08;letter-spacing:-.01em;transition:transform .7s var(--ease-out)}
.sp-area-list .nm em{font-style:italic;color:var(--gold)}
.sp-area-list .rt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--mute);white-space:nowrap}
.sp-area-list li.int .rt{color:var(--gold);padding:5px 10px;border:1px solid rgba(201,164,108,.5);border-radius:999px}
@media (hover:hover){.sp-area-list li:hover .nm{transform:translateX(clamp(8px,1.2vw,18px))}}
.sp-area-foot{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13px;color:var(--mute)}
.sp-area-foot i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* ---------- complimentary consultations ---------- */
.sp-consult{padding-block:var(--sec)}
.sp-consult-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px);align-items:center}
.sp-consult-img{aspect-ratio:.86;overflow:hidden;background:var(--soft)}
.sp-consult-img img{width:100%;height:100%;object-fit:cover}
.sp-consult-copy h2{font-size:clamp(34px,4.2vw,64px);line-height:1.04}
.sp-consult-copy h2 em{color:var(--gold-tx)}
.sp-cs-items{margin-top:clamp(28px,3vw,44px)}
.sp-cs{display:block;padding:22px 0;border-top:1px solid var(--line)}
.sp-cs:last-child{border-bottom:1px solid var(--line)}
.sp-cs h3{font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.sp-cs p{margin-top:8px;color:var(--mute);font-size:14.5px;max-width:520px}
.sp-cs-note{margin:24px 0 30px;padding-left:18px;border-left:1px solid var(--gold);font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.3vw,19px);line-height:1.5;max-width:520px}

/* ---------- what's included ---------- */
.sp-inc{padding-bottom:calc(var(--sec) + 20px)}
.sp-inc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);align-items:start}
.sp-card:nth-child(even){margin-top:clamp(40px,5vw,80px)}
.sp-card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.sp-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.sp-card:hover .ph img{transform:scale(1.06)}
.sp-card .meta{margin-top:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sp-card h3{font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.35}
.sp-card p{margin-top:14px;color:var(--mute);font-size:14px}

/* ---------- final CTA ---------- */
.sp-final-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .sp-areas-grid,.sp-consult-grid{grid-template-columns:1fr}
  .sp-areas-grid>div:last-child{position:static}
  .sp-consult-img{aspect-ratio:1.3}
  .sp-inc-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .sp-card:nth-child(even){margin-top:0}
  .pr-notes{grid-template-columns:1fr 1fr}
  .pr-notes>div{grid-column:1/-1}
}

@media (max-width:768px){
  .sp-intro-line{font-size:clamp(25px,7vw,32px)}

  /* pricing: rate tabs (with JS), one rate column at a time */
  html.js .pr-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:22px;border:1px solid var(--line);border-radius:999px;padding:3px}
  .pr-tabs button{position:relative;z-index:1;min-height:46px;border-radius:999px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--mute);transition:color .45s var(--ease)}
  .pr-tabs button[aria-pressed="true"]{color:var(--navy)}
  .pr-tabs-ind{position:absolute;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:999px;background:var(--gold);transition:transform .55s var(--ease-out)}
  .pr[data-rate="int"] .pr-tabs-ind{transform:translateX(100%)}
  html.js .pr[data-rate="std"] .c-int,html.js .pr[data-rate="int"] .c-std{display:none}
  html.js .pr-table .pr-len-h{width:58%}
  html.js .pr-table .c-std,html.js .pr-table .c-int{width:42%}
  .pr-table thead th{font-size:10px;letter-spacing:.12em}
  .pr-table thead th small{font-size:13px}
  .pr-table tbody th,.pr-table tbody td{padding:16px 0}
  .pr-table tbody td{font-size:30px}
  .pr-len{gap:8px;font-size:10px;letter-spacing:.12em;min-width:0}
  .pr-len b{font-size:32px}
  .pr-bar{display:none}
  /* no JS: keep all three columns, a little smaller */
  html:not(.js) .pr-table tbody td{font-size:22px}
  html:not(.js) .pr-len b{font-size:26px}

  .pr-notes{grid-template-columns:1fr;gap:20px}
  .pr-notes .btn{width:100%;justify-content:space-between}

  /* areas: text, list, then photos */
  .sp-areas-grid{gap:0}
  .sp-areas-side{display:contents}
  .sp-areas-side>*{order:0}
  .sp-areas-grid>div:last-child{order:1;margin-top:36px}
  .sp-areas-pics{order:2;margin-top:36px}
  .sp-area-list li{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .sp-area-list .nm{font-size:clamp(25px,7.2vw,30px)}
  .sp-area-list .rt{font-size:9.5px;letter-spacing:.1em}
  .sp-area-list li.int .rt{padding:4px 8px}

  /* consultation */
  .sp-consult-img{aspect-ratio:1.15}
  .sp-consult-copy .btn{width:100%;justify-content:space-between}

  /* included: swipe slider */
  .sp-inc-grid{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin:0 calc(var(--gut)*-1);padding:0 var(--gut);gap:12px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .sp-inc-grid::-webkit-scrollbar{display:none}
  .sp-card{flex:0 0 82%;min-width:0;scroll-snap-align:start}
  .sp-card .meta{margin-top:16px}
  .sp-inc{padding-bottom:var(--sec)}

  /* final: long labels wrap instead of overflowing */
  .sp-final-btns{flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto}
  .sp-final-btns .btn{white-space:normal;justify-content:space-between;text-align:left;padding:8px 6px 8px 22px;font-size:13px;letter-spacing:.06em}
  .sp-final-btns .btn .roll{height:auto;line-height:1.35;text-wrap:balance}
  .sp-final-btns .btn .roll span::after{display:none}
  .sp-final-btns .btn:hover .roll span{transform:none}
  .sp-final-btns .btn .ic{flex:none}
}
@media (min-width:560px) and (max-width:768px){
  .sp-card{flex-basis:calc(50% - 6px)}
}

/* hero: keep the practitioner in view on phones */
@media (max-width:768px){.page-hero .ph-img img{object-position:80% 20%!important}}

/* treatment areas are booking links with a starting price */
.sp-area-list li{display:block;padding:0}
.sp-area-list li a{display:grid;grid-template-columns:minmax(0,1fr) auto 36px;align-items:center;gap:16px;padding:clamp(14px,1.5vw,20px) 0;color:inherit}
.sp-area-list .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:15px;letter-spacing:0;text-transform:none;font-weight:500;color:#fff}
.sp-area-list .rt small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sp-area-list li.int .rt{color:var(--gold);padding:0;border:0;border-radius:0}
.sp-area-list .go{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .5s var(--ease-out)}
.sp-area-list .go svg{width:12px;height:12px}
.sp-area-list li a:hover .go,.sp-area-list li a:focus-visible .go{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:rotate(-45deg)}
.sp-area-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:30px}
.sp-area-prices{font-size:13px;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
@media (max-width:768px){
  .sp-area-list li a{grid-template-columns:minmax(0,1fr) auto 32px;gap:10px}
  .sp-area-list .go{width:32px;height:32px}
  .sp-area-list .rt{font-size:13px}
}