/* ============================================================
   TrueBalance — homepage components
   No bordered panel pairs. No spec-table rows. No label/value
   grids. Hierarchy comes from scale, bleed and whitespace.
   ============================================================ */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: var(--r-sm);
}
.skip:focus { left: var(--gutter); top: var(--gutter); }

/* ---------- two ways to be seen (asymmetric diptych) ----- */
/* Deliberately unequal: 55/45. One side is a photograph you
   could walk into, the other is quiet white space that reaches
   out. The contrast IS the message. */

.paths {
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  align-items: stretch;
  border-block: 1px solid var(--line);
}

.path { position: relative; display: flex; }

/* left — the room */
.path--place { min-height: clamp(460px, 62vh, 700px); align-items: flex-end; overflow: hidden; }
.path__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
}
.path--place::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(12,12,13,.72) 0%, rgba(12,12,13,.34) 42%, rgba(12,12,13,0) 76%);
}
.path--place .path__copy { position: relative; z-index: 1; color: #fff; }
.path--place .path__title { color: #fff; }
.path--place p { color: rgba(255,255,255,.86); }
.path--place .path__where { color: rgba(255,255,255,.62); }
.path--place .path__go { color: #fff; }
.path--place .path__go::after { background: rgba(255,255,255,.6); }
.path--place .path__go:hover::after { background: #fff; }

/* right — the reach */
.path--reach {
  flex-direction: column; justify-content: center;
  border-left: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.path__ghost {
  position: absolute; right: -.06em; bottom: -.28em;
  font-family: var(--font-display);
  font-size: clamp(9rem, 17vw, 17rem); line-height: .74;
  font-weight: 500; letter-spacing: -0.05em;
  color: var(--ag-100); z-index: 0; pointer-events: none; user-select: none;
}
.path--reach .path__copy { position: relative; z-index: 1; }

.path__copy { padding: clamp(1.75rem, 3.6vw, 3.25rem); max-width: 46ch; }
.path__title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.12;
  letter-spacing: var(--tr-head); margin-bottom: var(--sp-4);
}
.path__copy p { font-size: var(--fs-body); }
.path__where { font-size: var(--fs-sm); color: var(--tx-faint); margin-bottom: var(--sp-5); }
.path__go {
  font-size: var(--fs-sm); color: var(--tx-hi);
  display: inline-flex; align-items: center; gap: .55em; width: fit-content;
}
.path__go::after {
  content: ""; width: 20px; height: 1px; background: var(--ag-700);
  transition: width var(--t) var(--ease-out), background var(--t) var(--ease);
}
.path__go:hover::after { width: 40px; background: var(--ink); }

@media (max-width: 860px) {
  .paths { grid-template-columns: 1fr; }
  .path--reach { border-left: 0; border-top: 1px solid var(--line); }
  .path--reach { min-height: 340px; justify-content: flex-end; }
}

/* ---------- section heads ------------------------------- */

.sec-head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); max-width: 54ch; }
.sec-head h2 { margin-bottom: var(--sp-4); }

/* ---------- treatment index (editorial + imagery) -------- */
/* A standing image plate beside the list. Hovering a service
   swaps the plate — the index stays typographic and calm, but
   the page is never without a picture. Not a card grid. */

.tindex-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.tindex { list-style: none; margin: 0; padding: 0; }

.tindex__group {
  font-size: var(--fs-sm); color: var(--tx-faint);
  padding: var(--sp-6) 0 var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.tindex__group:first-child { padding-top: 0; }

.tindex__item { border-bottom: 1px solid var(--line); position: relative; }
.tindex__item > a {
  display: block; padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  transition: padding-inline-start var(--t-slow) var(--ease-out);
}
.tindex__item::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--ink); transition: width var(--t-slow) var(--ease-out);
}
.tindex__item:hover::after { width: 100%; }
.tindex__item:hover > a { padding-inline-start: clamp(.75rem, 1.6vw, 1.5rem); }

.tindex__name {
  display: block; font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wd-display);
  font-size: clamp(1.55rem, 3.2vw, 2.5rem);
  font-weight: 450; line-height: 1.08;
  letter-spacing: var(--tr-display); color: var(--tx-hi);
}
.tindex__meta {
  display: block; margin-top: var(--sp-2);
  font-size: var(--fs-body); color: var(--tx-lo); max-width: 46ch;
}

/* the standing plate */
.plate {
  position: sticky; top: 8rem;
  aspect-ratio: 4/5; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-sunk);
  box-shadow: var(--lift-3);
}
.plate__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity var(--t-slow) var(--ease-out), transform 1.2s var(--ease-out);
}
.plate__img.is-on { opacity: 1; transform: none; }
/* the plate breathes as you move down the list */
.tindex__item:hover ~ .plate .plate__img.is-on { transform: scale(1.02); }

/* inline thumb — the plate is desktop-only, so on narrow screens
   each service carries its own image instead */
.tindex__thumb { display: none; }

@media (max-width: 900px) {
  .tindex-wrap { grid-template-columns: 1fr; }
  .plate { display: none; }
  .tindex__thumb {
    display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
    margin-top: var(--sp-4); border-radius: var(--r-lg);
    box-shadow: var(--lift-2);
  }
}

/* ---------- provider ------------------------------------ */
/* Portrait bleeds instead of sitting in a rounded card, and
   credentials read as a sentence rather than a spec sheet. */

.provider__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
  align-items: end;
}
@media (max-width: 860px) { .provider__grid { grid-template-columns: 1fr; align-items: start; } }

.provider__portrait { margin: 0; }
.provider__portrait img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--t-slow) var(--ease);
}
.provider__portrait:hover img { filter: grayscale(0) contrast(1); }

.provider__cred {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--tx-lo); max-width: 52ch;
}

/* ---------- closing CTA --------------------------------- */

.cta { text-align: left; }
.cta .hero__actions { margin-top: var(--sp-6); }

/* ---------- footer -------------------------------------- */

.footer__cols {
  display: flex; flex-wrap: wrap; gap: var(--sp-7) var(--sp-9);
  padding-bottom: var(--sp-6);
}
.footer__h { color: var(--tx-hi); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.footer__link { display: block; font-size: var(--fs-sm); color: var(--tx-lo); padding-block: .28rem; }
.footer__link:hover { color: var(--tx-hi); }
.footer__fine { padding-block: var(--sp-5); border-top: 1px solid var(--line); }
.footer__fine p { font-size: var(--fs-xs); margin: 0; max-width: none; }


/* ---------- the first visit ----------------------------- */
/* Full-bleed photograph against a typographic column. Steps
   are marked with a silver dash, never a numeral. */

.visit {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-block: 1px solid var(--line);
}
.visit__image { position: relative; min-height: clamp(420px, 66vh, 720px); }
.visit__image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.visit__body {
  padding: clamp(2.5rem, 5.5vw, 5.5rem);
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--line);
}
.visit__body > h2 { margin-bottom: clamp(2rem, 4vw, 3rem); }

.visit__step { position: relative; padding-left: var(--sp-7); margin-bottom: var(--sp-6); }
.visit__step::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 26px; height: 1px; background: var(--ag-600);
  transition: width var(--t) var(--ease-out), background var(--t) var(--ease);
}
.visit__step:hover::before { width: 40px; background: var(--ink); }
.visit__step h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.visit__step p { color: var(--tx-lo); max-width: 44ch; margin: 0; font-size: var(--fs-body); }

.visit__result {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--tx-faint); max-width: 48ch;
}

@media (max-width: 900px) {
  .visit { grid-template-columns: 1fr; }
  .visit__image { min-height: 320px; }
  .visit__body { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- inverted closing band ----------------------- */
/* The page's single contrast moment, after trust is built. */

.cta[data-surface="ink"] {
  background: var(--paper);        /* remapped to ink by the token block */
  color: var(--tx);
}
.cta[data-surface="ink"] .btn--primary { background: #fff; color: var(--ink); }
.cta[data-surface="ink"] .btn--primary:hover { background: var(--ag-100); }
.cta[data-surface="ink"] .btn--ghost { background: transparent; color: #fff; }

/* ---------- the people ---------------------------------- */
/* Mariann leads at full width; Dr. Saleh sits beneath at a
   deliberately smaller scale. Ownership first, clinical
   authority second — the layout says it before the copy does. */

.role {
  font-size: var(--fs-sm); color: var(--tx-faint);
  display: flex; align-items: center; gap: .75rem; margin-bottom: var(--sp-3);
}
.role::before { content: ""; width: 26px; height: 1px; background: var(--ag-600); flex: none; }

.owner {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  align-items: center;
}
.owner__portrait { margin: 0; }
.owner__portrait img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--lift-3);
}
.owner__body h2 { margin-bottom: var(--sp-5); }
.owner__body .lead { margin-bottom: var(--sp-4); }

.pull {
  margin: var(--sp-6) 0 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wd-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.28;
  letter-spacing: var(--tr-head); color: var(--tx-hi); max-width: 30ch;
}
.pull::before { content: "\201C"; }
.pull::after  { content: "\201D"; }

.director {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(150px, .38fr) minmax(0, 1fr);
  align-items: center;
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.director__portrait { margin: 0; max-width: 320px; }
.director__portrait img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--lift-2);
}
.director__body h3 { margin-bottom: var(--sp-4); }
.director__body p { font-size: var(--fs-body); color: var(--tx-lo); }

@media (max-width: 860px) {
  .owner, .director { grid-template-columns: 1fr; }
  .director__portrait { max-width: 220px; }
}