/* ============================================================================
   page.css — about / team / contact / treatments shells / legal / 404.
   Small layouts shared by the non-home, non-gallery pages.
   ============================================================================ */

.page-head{
  padding-top:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(2rem,5vw,3.5rem);
  background:var(--paper-2);
}
.page-head .lede{ margin-top:1.25rem; }
.crumbs{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-family:var(--font-ui); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:var(--track-ui);
  color:var(--muted); margin-bottom:1.25rem;
}
.crumbs a{ display:inline-block; padding-block:.3125rem; }
.crumbs a:hover{ color:var(--ink); }
.crumbs span[aria-hidden]{ opacity:.5; }

/* --- treatment detail ---------------------------------------------------- */
.tx-grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .tx-grid{ grid-template-columns:1.15fr .85fr; } }
.tx-media img{
  width:100%; border-radius:var(--r);
  /* Several treatment photos are tall portraits — uncapped they render taller
     than the viewport. Cap and cover; faces sit in the upper part of frame. */
  max-height:min(72vh, 38rem);
  object-fit:cover; object-position:50% 22%;
}
.tx-media .media-fallback{ aspect-ratio:4/3; border-radius:var(--r); }

/* Treatment page. Hero split, then optional scan / video / tabs / callout /
   FAQ / closing blocks — each renders only where the clinic supplied content. */
.tx-hero{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .tx-hero{ grid-template-columns:1fr 1fr; } }
.tx-intro .lede + .lede{ margin-top:1rem; }

/* --- badge row + quick-fact cards ---------------------------------------- */
.tx-scan{ display:grid; gap:clamp(2rem,5vw,3rem); }
.tx-pills{ display:flex; flex-wrap:wrap; gap:.625rem; }
.tx-pills li{
  padding:.5rem 1rem; border:1px solid var(--line-strong); border-radius:999px;
  font-family:var(--font-ui); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:var(--track-ui);
}
.tx-cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
.tx-card{
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
}
.tx-card dt{ font-family:var(--font-display); font-size:var(--fs-h3); line-height:1.2; }
.tx-card dd{ margin:.5rem 0 0; color:var(--muted); font-size:var(--fs-sm); }

.tx-more{ margin-top:clamp(1.5rem,3vw,2.25rem); }

/* --- meet your treatment -------------------------------------------------- */
/* aspect-ratio is on the BASE rule, not just the pending one: a <video> with
   preload="none" has no intrinsic size until the poster decodes, so without it
   the block is 0px tall on load and shoves the page down when the poster
   arrives. Both states now reserve the same box. */
.tx-video{ width:100%; max-width:60rem; margin-inline:auto; display:block; aspect-ratio:16/9; border-radius:var(--r); background:var(--white); }
.tx-video--pending{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem; text-align:center;
  padding:1.5rem; background:var(--white);
  border:1px dashed var(--line-strong); color:var(--muted);
}
.tx-video-mark{ font-size:2rem; line-height:1; color:var(--teal-ink); }

/* --- tabs ----------------------------------------------------------------- */
/* The tab bar is hidden until treatment-tabs.js enhances the group, because
   without the script the buttons do nothing and every panel is already shown. */
.tx-tablist{ display:none; }
.tx-tabs.is-enhanced .tx-tablist{
  display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.tx-tabs.is-enhanced .tx-tablist::-webkit-scrollbar{ display:none; }
.tx-tab{
  flex:0 0 auto; min-height:48px; padding:.875rem 1.25rem;
  background:none; border:0; border-bottom:2px solid transparent;
  cursor:pointer; white-space:nowrap; color:var(--muted);
  font-family:var(--font-ui); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:var(--track-ui);
}
.tx-tab:hover{ color:var(--ink); }
.tx-tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--mint); }

.tx-panel:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:6px; }
.tx-panel + .tx-panel{ margin-top:clamp(2.5rem,5vw,4rem); }
.tx-tabs.is-enhanced .tx-panel + .tx-panel{ margin-top:0; }
.tx-panel-label{ margin-bottom:clamp(1.5rem,3vw,2rem); }
/* Once the tab bar carries the label, the panel heading is visual noise — but
   it stays in the accessibility tree so the heading outline is still complete. */
.tx-tabs.is-enhanced .tx-panel-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.tx-block + .tx-block{ margin-top:clamp(2rem,4vw,3rem); }
.tx-block h3{ font-family:var(--font-display); font-size:var(--fs-h3); line-height:1.25; margin-bottom:.875rem; }
.tx-block p{ color:var(--muted); max-width:var(--maxw-prose); }
.tx-block p + p{ margin-top:1rem; }
.tx-bullets{ margin-top:1rem; display:grid; gap:.75rem; max-width:var(--maxw-prose); }
.tx-bullets li{ position:relative; padding-left:1.5rem; color:var(--muted); }
.tx-bullets li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:.5rem; height:.5rem; border-radius:50%; background:var(--mint);
}
.tx-bullets strong{ color:var(--ink); font-weight:500; }

/* --- brand callout. Mint is a FILL here, never text — ink on mint is ~11:1. */
.tx-callout{
  max-width:60rem;
  background:var(--mint); color:var(--ink);
  border-radius:clamp(1rem,2vw,1.5rem);
  padding:clamp(2rem,5vw,3.5rem);
}
.tx-callout h2{ font-family:var(--font-display); line-height:1.15; margin-bottom:1rem; }
.tx-callout p{ font-size:var(--fs-sm); max-width:var(--maxw-prose); }

/* --- add-on card: smaller and quieter than the callout ---------------------- */
.tx-addon{
  max-width:44rem; border:1px solid var(--line-strong);
  border-radius:clamp(1rem,2vw,1.5rem); padding:clamp(1.5rem,4vw,2.25rem);
}
.tx-addon h2{ font-family:var(--font-display); font-size:var(--fs-h3); line-height:1.2; margin:.4rem 0 .75rem; }
.tx-addon p{ font-size:var(--fs-sm); max-width:var(--maxw-prose); margin-bottom:1.25rem; }

/* --- comparison table. Scrolls inside its own box on phones, never the page. */
.tx-compare{ overflow-x:auto; max-width:60rem; }
.tx-compare table{ width:100%; min-width:36rem; border-collapse:collapse; font-size:var(--fs-sm); }
.tx-compare th,.tx-compare td{ text-align:left; vertical-align:top; padding:.9rem 1rem; border-bottom:1px solid var(--line); }
.tx-compare thead th{ font-family:var(--font-display); font-weight:400; border-bottom:1px solid var(--line-strong); }
.tx-compare thead th:nth-child(2),.tx-compare tbody td:first-of-type{ background:var(--mint-tint); }
.tx-compare tbody th{ font-weight:600; }
.tx-compare + p{ max-width:var(--maxw-prose); margin-top:1.25rem; color:var(--muted); }

/* --- FAQ accordion. Native <details>, so it works with JS disabled. -------- */
.tx-faqs{ border-top:1px solid var(--line); max-width:var(--maxw-prose); }
.tx-faq{ border-bottom:1px solid var(--line); }
.tx-faq summary{
  position:relative; cursor:pointer; list-style:none;
  padding:1.25rem 2.5rem 1.25rem 0;
  font-family:var(--font-display); font-size:var(--fs-h3); line-height:1.3;
}
.tx-faq summary::-webkit-details-marker{ display:none; }
.tx-faq summary:hover{ color:var(--teal-ink); }
.tx-faq summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--font-ui); font-size:1.5rem; line-height:1; color:var(--teal-ink);
}
.tx-faq[open] summary::after{ content:"\2212"; }
.tx-faq-a{ padding:0 2.5rem 1.5rem 0; }
.tx-faq-a p{ color:var(--muted); }

/* --- closing CTA ---------------------------------------------------------- */
.tx-final{ text-align:center; }
.tx-final .lede{ margin:1.25rem auto 0; }
.tx-final .tx-cta{ justify-content:center; }
.tx-pending{
  padding:1.25rem; background:var(--paper-2); border-radius:var(--r);
  font-size:var(--fs-sm); color:var(--muted); margin-top:1.5rem;
}

.tx-cta{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.tx-aside{ position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.tx-aside-card{ padding:clamp(1.5rem,3vw,2rem); background:var(--paper-2); border-radius:var(--r); }
/* h2 for heading order (was h3 and skipped a level); held at h3 SIZE so the
   sidebar still reads as a sub-heading, not a section title. */
.tx-aside-card h2{ font-size:var(--fs-h3); line-height:1.25; margin-bottom:1rem; }

.related-rail{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); }

/* --- team ---------------------------------------------------------------- */
/* Full-width editorial split per practitioner, alternating sides down the
   page. Deliberately NOT cards — photography and typography carry this page. */
.team-profiles{ display:grid; gap:clamp(4rem,10vw,8rem); }
.team-profile{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){
  .team-profile{ grid-template-columns:1fr 1fr; }
  /* Even profiles flip to copy-left / portrait-right. Done with `order` so the
     DOM stays portrait-then-bio and the reading order never follows the flip. */
  .team-profile:nth-child(even) .team-portrait{ order:2; }
  /* The founder's profile carries slightly more weight without breaking rhythm. */
  .team-profile--lead{ grid-template-columns:1.08fr .92fr; }
}
.team-portrait img,
.team-portrait .media-fallback{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r); }
.team-bio h2{ font-size:var(--fs-h2); line-height:1.15; }
.team-profile--lead .team-bio h2{ font-size:var(--fs-h1); }
.team-bio p{ color:var(--muted); }
.team-bio p + p{ margin-top:1rem; }
.team-role{ font-family:var(--font-ui); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--track-ui); color:var(--muted); margin-top:.5rem; margin-bottom:1.5rem; }

/* --- contact ------------------------------------------------------------- */
.contact-grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.field{ display:block; margin-bottom:1.25rem; }
.field span{ display:block; font-family:var(--font-ui); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--track-ui); margin-bottom:.5rem; }
.field input,.field textarea,.field select{
  width:100%; padding:.875rem 1rem; min-height:48px;
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--white);
}
.field textarea{ min-height:8rem; resize:vertical; }
.form-status{ margin-top:1rem; font-size:var(--fs-sm); color:var(--muted); min-height:1.5em; }
.form-status.is-error{ color:#B42318; }

/* --- legal / prose pages -------------------------------------------------- */
.legal h2{ font-size:var(--fs-h3); margin-top:2.5rem; margin-bottom:.75rem; }
.legal p,.legal li{ color:var(--muted); font-size:var(--fs-sm); }
.legal ul{ list-style:disc; padding-left:1.25rem; margin-top:.5rem; }
.legal li{ margin-bottom:.375rem; }

/* --- 404 ----------------------------------------------------------------- */
.nf{ text-align:center; padding-block:clamp(5rem,14vw,10rem); }
.nf-actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* Treatment name list inside a category card on /treatments.html */
.tx-list{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.tx-list li{ padding:0; }
/* Same reasoning as .footer-list — these were 17px tall and they are the
   primary way into every treatment page. */
.tx-list a{ font-size:var(--fs-sm); color:var(--muted); display:inline-block; padding-block:.4375rem; }
.tx-list a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }