/*
  Assumption: generated JPGs may arrive after this bundle, so the layout reserves
  their final dimensions while the renderer supplies existing photographic fallbacks.
  Direction: editorial luxury, full-bleed photography, asymmetric bento rhythm,
  brushed gold, and a restrained deep-jewel counterpoint.
*/
:root {
  --ink: #17242a;
  --ink-soft: #536168;
  --paper: #eee9df;
  --paper-2: #ded6c7;
  --surface: #f7f2e9;
  --surface-2: #d2c5af;
  --accent: #a98545;
  --accent-2: #7d8f84;
  --jewel: #1f4a45;
  --on-accent: #11120f;
  --line: rgba(23, 36, 42, .18);
  --light-text: #f1eadb;
  --display: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --shadow: 0 28px 80px rgba(9, 16, 18, .2);
}

body[data-theme="private"] {
  --ink: #271e17;
  --ink-soft: #67584d;
  --paper: #eee5d7;
  --paper-2: #d9c9b3;
  --surface: #f7efe3;
  --surface-2: #c9b08f;
  --accent: #8e6b42;
  --accent-2: #9b8c75;
  --jewel: #49382c;
  --line: rgba(39, 30, 23, .2);
}

body[data-theme="field"] {
  --ink: #1e2322;
  --ink-soft: #535e5b;
  --paper: #eeece4;
  --paper-2: #dad8ce;
  --surface: #f5f2e9;
  --surface-2: #cac7bc;
  --accent: #783a35;
  --accent-2: #8b9278;
  --jewel: #2d4a45;
  --line: rgba(30, 35, 34, .22);
  --display: "Avenir Next Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --sans: "Iowan Old Style", Georgia, serif;
}

body[data-theme="gold"] {
  color-scheme: dark;
  --ink: #efe5d1;
  --ink-soft: #c2b49e;
  --paper: #17130f;
  --paper-2: #241d16;
  --surface: #2d241a;
  --surface-2: #3b3023;
  --accent: #c5a15d;
  --accent-2: #829d8b;
  --jewel: #21463f;
  --on-accent: #14110d;
  --line: rgba(197, 161, 93, .27);
  --light-text: #f1e7d4;
  --display: "Baskerville", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --shadow: 0 32px 96px rgba(0, 0, 0, .54);
}

body[data-theme="onyx"] {
  color-scheme: dark;
  --ink: #f0e8d7;
  --ink-soft: #bdb29f;
  --paper: #060706;
  --paper-2: #0f110e;
  --surface: #171814;
  --surface-2: #22221c;
  --accent: #c9a962;
  --accent-2: #dbc896;
  --jewel: #192a24;
  --on-accent: #090a08;
  --line: rgba(201, 169, 98, .25);
  --light-text: #f2ead9;
  --display: "Didot", "Bodoni 72", "Baskerville", "Iowan Old Style", Georgia, serif;
  --shadow: 0 38px 110px rgba(0, 0, 0, .72);
}

body[data-theme="graphite"] {
  color-scheme: dark;
  --ink: #eee5d4;
  --ink-soft: #c7baaa;
  --paper: #292724;
  --paper-2: #34312d;
  --surface: #403a34;
  --surface-2: #4a4038;
  --accent: #d0ad69;
  --accent-2: #87a99a;
  --jewel: #183d38;
  --on-accent: #171512;
  --line: rgba(208, 173, 105, .25);
  --light-text: #f0e7d7;
  --display: "Baskerville", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --shadow: 0 30px 90px rgba(12, 13, 12, .48);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #0b0b09;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea { font: inherit; }

a,
button { color: inherit; }

img { max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  transform: translateY(-180%);
  padding: 12px 16px;
  background: var(--accent);
  color: var(--on-accent);
}

.skip-link:focus { transform: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 92px;
  padding: 14px clamp(20px, 4.5vw, 76px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(20px);
}

body[data-theme="gold"] .site-header,
body[data-theme="onyx"] .site-header,
body[data-theme="graphite"] .site-header {
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 270px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  height: 52px;
  place-items: center;
}

.brand-mark img {
  display: block;
  width: auto;
  height: 52px;
  object-fit: contain;
}

.brand-copy {
  display: grid;
  line-height: 1;
}

.brand-copy strong {
  font: 600 19px/1 var(--display);
  letter-spacing: -.01em;
}

.brand-copy small {
  margin-top: 7px;
  color: var(--ink-soft);
  font: 800 8px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 28px);
}

.site-nav a {
  position: relative;
  padding: 15px 0;
  text-decoration: none;
  font: 800 8px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
  transition: transform .26s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-button {
  display: none;
  min-width: 52px;
  min-height: 48px;
  border: 1px solid var(--line);
  background: transparent;
  font: 800 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.button,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font: 900 9px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
}

.button:hover { transform: translateY(-3px); }

.button-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--jewel) 74%, transparent);
}

.button-primary:hover { box-shadow: 4px 4px 0 color-mix(in srgb, var(--jewel) 82%, transparent); }

.button-dark {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.button-light {
  border-color: var(--light-text);
  background: var(--light-text);
  color: var(--on-accent);
}

.text-link {
  min-height: auto;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
}

.spa-view {
  display: none;
  min-height: 50vh;
}

.spa-view.is-active {
  display: block;
  animation: pageIn .55s cubic-bezier(.2, .8, .2, 1) both;
}

.hero {
  position: relative;
  min-height: 930px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  color: var(--light-text);
  isolation: isolate;
}

.hero-media,
.hero-media::after {
  position: absolute;
  inset: 0;
}

.hero-media { z-index: -2; }

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: imageReveal 1.25s cubic-bezier(.2, .8, .2, 1) both;
}

.hero-media::after {
  content: "";
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, .95) 0 41%, rgba(16, 13, 10, .68) 62%, rgba(13, 11, 9, .24) 100%),
    linear-gradient(0deg, rgba(15, 12, 9, .7), transparent 46%);
}

body[data-theme="gold"] .hero-media::after {
  background:
    radial-gradient(circle at 84% 18%, rgba(130, 157, 139, .2), transparent 34%),
    linear-gradient(90deg, rgba(20, 15, 10, .96) 0 42%, rgba(37, 26, 16, .72) 64%, rgba(25, 19, 14, .22)),
    linear-gradient(0deg, rgba(31, 24, 17, .82), transparent 48%);
}

body[data-theme="onyx"] .hero-media::after {
  background:
    linear-gradient(90deg, rgba(2, 3, 2, .985) 0 48%, rgba(4, 5, 4, .72) 68%, rgba(2, 3, 2, .28)),
    linear-gradient(0deg, rgba(4, 5, 4, .84), transparent 52%);
}

body[data-theme="graphite"] .hero-media::after {
  background:
    radial-gradient(circle at 82% 28%, rgba(24, 61, 56, .42), transparent 38%),
    linear-gradient(90deg, rgba(37, 33, 29, .97) 0 43%, rgba(42, 40, 35, .72) 64%, rgba(24, 61, 56, .25)),
    linear-gradient(0deg, rgba(28, 46, 42, .82), transparent 50%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 930px;
  max-width: 1260px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(130px, 13vw, 160px) clamp(26px, 6vw, 96px) 86px;
}

body[data-theme="onyx"] .hero-copy {
  max-width: 1380px;
  padding-left: clamp(34px, 8vw, 132px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--accent);
  font: 900 9px/1.3 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 46px;
  height: 2px;
  background: currentColor;
  animation: lineGrow 1s both;
}

.hero-narrative {
  margin: 0 0 20px;
  color: var(--accent-2);
  font: 800 clamp(11px, 1.1vw, 14px)/1.3 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero h1,
.subhero h1 {
  max-width: 1080px;
  margin: 0;
  font: 500 clamp(58px, 7vw, 108px)/.9 var(--display);
  letter-spacing: -.052em;
  text-wrap: balance;
}

body[data-theme="onyx"] .hero h1 {
  max-width: 1180px;
  font-size: clamp(64px, 7.6vw, 120px);
  line-height: .88;
}

.hero h1 em,
.subhero h1 em {
  color: var(--accent);
  font-weight: inherit;
}

.hero-lede {
  max-width: 700px;
  margin: 30px 0 0;
  color: color-mix(in srgb, var(--light-text) 76%, transparent);
  font-size: clamp(17px, 1.55vw, 22px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 38px;
}

.hero-pillar-list {
  display: grid;
  width: min(880px, 100%);
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 68px;
  border-top: 1px solid rgba(239, 229, 209, .28);
  border-bottom: 1px solid rgba(239, 229, 209, .28);
  background: rgba(12, 10, 8, .22);
  backdrop-filter: blur(9px);
}

.hero-pillar-list a {
  display: grid;
  min-height: 108px;
  align-content: center;
  gap: 9px;
  padding: 18px;
  border-right: 1px solid rgba(239, 229, 209, .2);
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

.hero-pillar-list a:last-child { border-right: 0; }

.hero-pillar-list a:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.hero-pillar-list b {
  color: var(--accent);
  font: 700 10px/1 var(--mono);
}

.hero-pillar-list a:hover b { color: currentColor; }

.hero-pillar-list span {
  font: 600 17px/1.1 var(--display);
}

.signal-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--jewel);
  color: var(--light-text);
}

body[data-theme="onyx"] .signal-strip { background: #0a0b09; }

body[data-theme="graphite"] .signal-strip {
  background: linear-gradient(90deg, #183d38, #2b4d46);
}

.signal {
  min-height: 142px;
  padding: 30px clamp(22px, 3.5vw, 52px);
  border-right: 1px solid rgba(240, 232, 215, .17);
}

.signal:last-child { border-right: 0; }

.signal b {
  display: block;
  color: var(--accent);
  font: 500 36px/1 var(--display);
}

.signal span {
  display: block;
  margin-top: 10px;
  color: rgba(240, 232, 215, .72);
  font: 800 8px/1.5 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.section {
  padding: clamp(100px, 11vw, 160px) clamp(24px, 5.5vw, 90px);
}

body[data-theme="onyx"] .section {
  padding-top: clamp(120px, 13vw, 190px);
  padding-bottom: clamp(120px, 13vw, 190px);
}

.section-dark {
  background: var(--jewel);
  color: var(--light-text);
}

body[data-theme="gold"] .section-dark {
  background:
    linear-gradient(125deg, rgba(197, 161, 93, .08), transparent 42%),
    var(--jewel);
}

body[data-theme="onyx"] .section-dark {
  background:
    linear-gradient(125deg, rgba(201, 169, 98, .07), transparent 38%),
    #0b0c0a;
}

body[data-theme="graphite"] .section-dark {
  background:
    linear-gradient(140deg, #173a35 0%, #234942 55%, #30322e 100%);
}

.section-head {
  display: grid;
  grid-template-columns: .45fr 1.55fr;
  gap: clamp(34px, 6.5vw, 110px);
  align-items: start;
  margin-bottom: 60px;
}

.section-kicker {
  color: var(--accent);
  font: 900 9px/1.5 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.section-kicker b {
  display: block;
  margin-bottom: 18px;
  color: currentColor;
  font: 500 44px/1 var(--display);
}

.section h2 {
  max-width: 1080px;
  margin: 0;
  font: 500 clamp(44px, 5.8vw, 84px)/.95 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.section-intro {
  max-width: 820px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
}

.section-dark .section-intro,
.memberships-section .section-intro {
  color: color-mix(in srgb, var(--light-text) 72%, transparent);
}

.mini-label {
  display: inline-flex;
  color: var(--accent);
  font: 900 8px/1.35 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.practice-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, minmax(220px, auto));
  gap: 14px;
}

.practice-feature {
  position: relative;
  grid-column: span 8;
  grid-row: span 2;
  min-height: 620px;
  overflow: hidden;
  color: var(--light-text);
}

.practice-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 10, 8, .94), rgba(12, 10, 8, .08) 74%);
}

.practice-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.practice-feature:hover .practice-feature-image { transform: scale(1.035); }

.practice-feature-copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(34px, 5vw, 70px);
}

.practice-feature-copy h3 {
  max-width: 680px;
  margin: 18px 0;
  font: 500 clamp(42px, 5vw, 72px)/.92 var(--display);
  letter-spacing: -.04em;
}

.practice-feature-copy p {
  max-width: 620px;
  color: rgba(240, 232, 215, .76);
  font-size: 17px;
}

.practice-bento > .plain-card {
  grid-column: span 4;
}

.plain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.plain-card {
  padding: clamp(30px, 4vw, 48px);
  border-top: 3px solid var(--accent);
  background: var(--surface);
}

.plain-card:nth-child(even) { background: var(--surface-2); }

.plain-card h3 {
  margin: 20px 0 12px;
  font: 500 31px/1.03 var(--display);
  letter-spacing: -.025em;
}

.plain-card p {
  margin: 0;
  color: var(--ink-soft);
}

.hook-strip {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  min-height: 540px;
  background: var(--accent);
  color: var(--on-accent);
}

.hook-intro {
  display: grid;
  align-content: center;
  padding: clamp(54px, 7vw, 110px);
}

.hook-intro span {
  font: 900 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hook-intro h2 {
  margin: 28px 0 0;
  font: 500 clamp(52px, 6vw, 84px)/.9 var(--display);
  letter-spacing: -.05em;
}

.hook-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--jewel);
  color: var(--light-text);
}

body[data-theme="onyx"] .hook-grid { background: #0e100d; }

.hook-grid p {
  display: grid;
  min-height: 270px;
  align-content: end;
  margin: 0;
  padding: clamp(30px, 5vw, 72px);
  border-right: 1px solid rgba(240, 232, 215, .17);
  border-bottom: 1px solid rgba(240, 232, 215, .17);
  font: 500 clamp(28px, 3.1vw, 46px)/1.02 var(--display);
  letter-spacing: -.03em;
  transition: background .3s ease, color .3s ease;
}

.hook-grid p:hover {
  background: var(--surface);
  color: var(--ink);
}

.pillar-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(350px, auto);
  gap: 14px;
}

.pillar-card {
  position: relative;
  display: flex;
  grid-column: span 5;
  min-height: 470px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(240, 232, 215, .18);
  color: var(--light-text);
  text-decoration: none;
  animation: cardRise .7s both;
  animation-timeline: view();
  animation-range: entry 5% cover 30%;
}

.pillar-card:nth-child(2) { grid-column: span 7; }

.pillar-card:nth-child(3) {
  grid-column: span 8;
  min-height: 550px;
}

.pillar-card:nth-child(4) {
  grid-column: span 4;
  min-height: 550px;
}

.pillar-card-image,
.card-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pillar-card-image {
  object-fit: cover;
  transition: transform .75s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

.card-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(9, 10, 8, .08), rgba(9, 10, 8, .92) 82%),
    linear-gradient(90deg, rgba(33, 70, 63, .18), transparent 60%);
}

.pillar-card:nth-child(2) .card-shade {
  background: linear-gradient(180deg, rgba(18, 52, 47, .1), rgba(18, 52, 47, .93) 84%);
}

.pillar-card.is-featured .card-shade {
  background:
    linear-gradient(180deg, rgba(45, 31, 15, .08), rgba(33, 24, 13, .94) 84%),
    linear-gradient(90deg, rgba(197, 161, 93, .2), transparent 64%);
}

.pillar-card:hover .pillar-card-image { transform: scale(1.04); }

.pillar-card .card-no,
.pillar-card .card-copy {
  position: relative;
  z-index: 2;
}

.pillar-card .card-no {
  align-self: flex-start;
  margin: clamp(28px, 4vw, 54px);
  padding: 10px 12px;
  border: 1px solid rgba(240, 232, 215, .42);
  background: rgba(8, 9, 7, .42);
  color: var(--accent);
  font: 900 9px/1 var(--mono);
  letter-spacing: .15em;
}

.pillar-card .card-copy {
  display: grid;
  align-content: end;
  height: 100%;
  margin-top: auto;
  padding: clamp(30px, 5vw, 68px);
}

.pillar-card h3 {
  max-width: 720px;
  margin: 0 0 18px;
  font: 500 clamp(36px, 4.6vw, 70px)/.92 var(--display);
  letter-spacing: -.04em;
}

.pillar-card p {
  max-width: 650px;
  margin: 0;
  color: rgba(240, 232, 215, .78);
  font-size: 16px;
}

.pillar-card .arrow {
  margin-top: 32px;
  font: 900 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pillar-card:hover .arrow { animation: arrowNudge .7s infinite alternate; }

.section-treatments {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 40%),
    var(--paper-2);
}

.treatment-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
}

.treatment-card {
  display: grid;
  grid-column: span 4;
  grid-template-rows: 260px 1fr;
  min-height: 500px;
  overflow: hidden;
  background: var(--surface);
}

.treatment-card:nth-child(1) {
  grid-column: span 8;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: none;
}

.treatment-card:nth-child(5) {
  grid-column: span 12;
  grid-template-columns: 1.35fr .65fr;
  grid-template-rows: none;
  min-height: 560px;
}

.treatment-card > img,
.treatment-card > .paired-media {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.treatment-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}

.paired-media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
}

.paired-media img { min-width: 0; }

.treatment-card:hover .treatment-card-image { transform: scale(1.035); }

.treatment-card-copy {
  display: grid;
  align-content: end;
  padding: clamp(28px, 4.5vw, 58px);
}

.treatment-card h3 {
  margin: 18px 0 14px;
  font: 500 clamp(31px, 3.6vw, 52px)/.96 var(--display);
  letter-spacing: -.035em;
}

.treatment-card p {
  margin: 0;
  color: var(--ink-soft);
}

.section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 42px;
}

.programs-section {
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30%),
    var(--paper);
}

.program-grid,
.membership-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.price-card {
  display: flex;
  grid-column: span 4;
  min-height: 470px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(34px, 4.5vw, 58px);
  border-top: 4px solid var(--accent);
  background: var(--surface);
}

.price-card:nth-child(2) { background: var(--surface-2); }

.price-card h3 {
  min-height: 82px;
  margin: 22px 0;
  font: 500 clamp(32px, 3.5vw, 49px)/.96 var(--display);
  letter-spacing: -.035em;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 22px;
}

.price strong {
  font: 500 clamp(48px, 5.2vw, 76px)/.9 var(--display);
  letter-spacing: -.05em;
}

.price span {
  color: var(--ink-soft);
  font: 800 9px/1.4 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.price-card p {
  margin: 0 0 28px;
  color: var(--ink-soft);
}

.price-card .text-link { margin-top: auto; }

.program-card.is-featured {
  border-top-color: var(--accent-2);
  background: var(--jewel);
  color: var(--light-text);
}

.program-card.is-featured .mini-label,
.program-card.is-featured .price span { color: var(--accent); }

.program-card.is-featured p { color: rgba(240, 232, 215, .75); }

.memberships-section {
  background:
    radial-gradient(circle at 86% 8%, rgba(197, 161, 93, .16), transparent 30%),
    var(--jewel);
  color: var(--light-text);
}

body[data-theme="onyx"] .memberships-section { background: #10120f; }

body[data-theme="graphite"] .memberships-section {
  background:
    radial-gradient(circle at 86% 8%, rgba(208, 173, 105, .17), transparent 34%),
    #183d38;
}

.memberships-section .membership-card:not(.is-featured) {
  background: color-mix(in srgb, var(--surface) 88%, var(--jewel));
}

.membership-card.is-featured {
  border-top-color: var(--light-text);
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(-18px);
  box-shadow: var(--shadow);
}

.membership-card.is-featured .mini-label,
.membership-card.is-featured .price span,
.membership-card.is-featured p { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }

.format-line {
  width: 100%;
  margin: auto 0 26px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  font: 900 9px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.area-layout {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  min-height: 660px;
  background: var(--surface-2);
}

.area-copy {
  display: grid;
  align-content: center;
  padding: clamp(60px, 8vw, 120px);
  background:
    linear-gradient(145deg, rgba(197, 161, 93, .12), transparent 48%),
    var(--paper-2);
}

.area-copy h2 {
  margin: 22px 0;
  font: 500 clamp(52px, 6.4vw, 90px)/.9 var(--display);
  letter-spacing: -.05em;
}

.area-copy > p {
  max-width: 570px;
  color: var(--ink-soft);
  font-size: 18px;
}

.town-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 32px 0 0;
  padding: 25px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.town-list li {
  font: 800 9px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.town-list li:first-child { color: var(--accent); }

.area-map {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: var(--jewel);
}

.area-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.75) sepia(.2) contrast(1.08);
}

body[data-theme="onyx"] .area-map iframe { filter: grayscale(1) contrast(1.25) brightness(.72); }

body[data-theme="graphite"] .area-map iframe { filter: grayscale(.72) sepia(.18) hue-rotate(105deg) contrast(1.1); }

.area-map > span {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  padding: 13px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font: 900 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.faq-section { background: var(--paper); }

.faq-layout {
  display: grid;
  grid-template-columns: .6fr 1.4fr;
  gap: clamp(42px, 8vw, 126px);
}

.faq-layout h2 {
  font: 500 clamp(44px, 5.3vw, 76px)/.95 var(--display);
  letter-spacing: -.045em;
}

.faq-list details {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.faq-list details:last-child { border-bottom: 1px solid var(--line); }

.faq-list summary {
  cursor: pointer;
  list-style: none;
  font: 500 clamp(21px, 2vw, 27px)/1.18 var(--display);
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  float: right;
  margin-left: 18px;
  color: var(--accent);
}

.faq-list details[open] summary::after { content: "−"; }

.faq-list details p {
  max-width: 780px;
  color: var(--ink-soft);
}

.subhero {
  position: relative;
  display: grid;
  min-height: 590px;
  align-content: end;
  overflow: hidden;
  padding: clamp(130px, 14vw, 180px) clamp(24px, 6vw, 98px) clamp(78px, 8vw, 116px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 28%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 34%),
    var(--paper-2);
}

body[data-theme="onyx"] .subhero {
  min-height: 680px;
  background:
    linear-gradient(90deg, rgba(201, 169, 98, .08) 1px, transparent 1px),
    #0f110e;
  background-size: 12.5vw 100%;
}

body[data-theme="graphite"] .subhero {
  background:
    linear-gradient(90deg, var(--jewel) 0 12px, transparent 12px),
    radial-gradient(circle at 84% 18%, rgba(135, 169, 154, .22), transparent 36%),
    var(--paper-2);
}

.subhero::after {
  content: attr(data-index);
  position: absolute;
  right: -24px;
  bottom: -86px;
  color: color-mix(in srgb, var(--ink) 6%, transparent);
  font: 500 300px/1 var(--display);
  letter-spacing: -.13em;
}

.subhero h1 {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}

.subhero p {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 19px;
}

.subhero .eyebrow { margin-bottom: 24px; }

.service-overview {
  display: grid;
  grid-template-columns: .68fr 1.32fr;
  gap: clamp(44px, 6vw, 90px);
}

.service-menu {
  position: sticky;
  top: 126px;
  align-self: start;
  border-top: 2px solid var(--ink);
}

.service-menu a {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font: 900 9px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.service-menu a:hover { color: var(--accent); }

.service-detail {
  padding-bottom: 78px;
  margin-bottom: 78px;
  border-bottom: 1px solid var(--line);
}

.service-detail:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.service-detail-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  margin-bottom: 38px;
  object-fit: cover;
}

.service-detail .number {
  color: var(--accent);
  font: 900 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.service-detail h2 {
  margin: 18px 0 20px;
  font: 500 clamp(44px, 5vw, 72px)/.94 var(--display);
  letter-spacing: -.045em;
}

.service-detail p {
  max-width: 800px;
  color: var(--ink-soft);
  font-size: 18px;
}

.service-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.catalog-card {
  display: grid;
  min-height: 460px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 82%, var(--jewel));
}

.catalog-card:nth-child(1),
.catalog-card:nth-child(5) { grid-column: 1 / -1; }

.catalog-card:nth-child(odd) { background: color-mix(in srgb, var(--surface-2) 78%, var(--jewel)); }

.catalog-card > img,
.catalog-card > .paired-media {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

.catalog-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-card-copy {
  display: grid;
  align-content: center;
  padding: clamp(30px, 4vw, 56px);
}

.catalog-card h3 {
  margin: 18px 0 15px;
  font: 500 clamp(32px, 3.7vw, 54px)/.96 var(--display);
  letter-spacing: -.038em;
}

.catalog-card p { color: color-mix(in srgb, var(--light-text) 75%, transparent); }

.catalog-card dl {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  border-top: 1px solid rgba(240, 232, 215, .17);
}

.catalog-card dl div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(240, 232, 215, .17);
}

.catalog-card dt {
  font: 900 8px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.catalog-card dd {
  margin: 0;
  color: color-mix(in srgb, var(--light-text) 72%, transparent);
  font-size: 13px;
}

.service-depth { padding-top: 0; }

.depth-image {
  width: calc(100% + clamp(24px, 5.5vw, 90px) + clamp(24px, 5.5vw, 90px));
  height: min(56vw, 650px);
  margin-right: calc(0px - clamp(24px, 5.5vw, 90px));
  margin-bottom: clamp(70px, 9vw, 130px);
  margin-left: calc(0px - clamp(24px, 5.5vw, 90px));
  overflow: hidden;
}

.depth-image-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.depth-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(42px, 7vw, 116px);
}

.prose h2 {
  margin: 0 0 30px;
  font: 500 clamp(48px, 5.7vw, 80px)/.94 var(--display);
  letter-spacing: -.045em;
}

.prose p {
  color: var(--ink-soft);
  font-size: 18px;
}

.side-dossier {
  align-self: start;
  margin: 0;
  border-top: 2px solid var(--ink);
}

.dossier-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.dossier-row dt {
  font: 900 8px/1.45 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dossier-row dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.programs-page,
.memberships-page {
  background: var(--paper);
}

.program-grid-large .price-card,
.membership-grid-large .price-card { min-height: 540px; }

.program-ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.program-ledger > div {
  min-height: 210px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.program-ledger span {
  display: block;
  color: var(--accent);
  font: 900 8px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.program-ledger b {
  display: block;
  margin: 18px 0 12px;
  font: 500 29px/1 var(--display);
}

.program-ledger p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.membership-hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 620px;
  margin-bottom: 80px;
  background: var(--jewel);
  color: var(--light-text);
}

.membership-hero > div:first-child { overflow: hidden; }

.membership-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.membership-hero-copy {
  display: grid;
  align-content: center;
  padding: clamp(50px, 7vw, 100px);
}

.membership-hero-copy h2 {
  margin: 24px 0;
  font: 500 clamp(50px, 6vw, 84px)/.91 var(--display);
  letter-spacing: -.05em;
}

.membership-hero-copy p {
  color: rgba(240, 232, 215, .75);
  font-size: 18px;
}

.care-format-table {
  margin-top: 70px;
  border-top: 2px solid var(--ink);
}

.care-format-row {
  display: grid;
  grid-template-columns: .65fr 1.35fr .75fr;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.care-format-row b { font: 600 20px/1.1 var(--display); }

.care-format-row span {
  color: var(--ink-soft);
  font-size: 14px;
}

.care-format-head span {
  color: var(--accent);
  font: 900 8px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-layout {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 700px;
}

.about-photo { overflow: hidden; }

/* The homepage bio runs copy-only — the physician's portrait lives on the About
   page. Without the photo the two-column grid would leave an empty column and
   the 700px min-height would strand the copy in a half-empty band. */
.about-layout.home-bio {
  grid-template-columns: 1fr;
  min-height: 0;
}

.about-photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-copy {
  display: grid;
  align-content: center;
  padding: clamp(70px, 8vw, 126px);
  background: var(--jewel);
  color: var(--light-text);
}

.about-copy h2 {
  margin: 22px 0 30px;
  font: 500 clamp(52px, 6vw, 86px)/.9 var(--display);
  letter-spacing: -.05em;
}

.about-copy p {
  color: rgba(240, 232, 215, .74);
  font-size: 18px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.blog-card {
  display: grid;
  min-height: 580px;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.blog-card:nth-child(2),
.blog-card:nth-child(3) { background: var(--surface-2); }

.blog-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .75s cubic-bezier(.2, .8, .2, 1);
}

.blog-card:hover .blog-card-image { transform: scale(1.03); }

.blog-card-copy {
  display: grid;
  align-content: start;
  padding: clamp(32px, 4.5vw, 58px);
}

.blog-card h2 {
  margin: 34px 0 18px;
  font: 500 clamp(36px, 4vw, 58px)/.96 var(--display);
  letter-spacing: -.04em;
}

.blog-card p { color: var(--ink-soft); }

.blog-card .button {
  align-self: end;
  justify-self: start;
  margin-top: 30px;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 900 8px/1.4 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.closing-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 44px;
  overflow: hidden;
  padding: clamp(110px, 13vw, 190px) clamp(24px, 6vw, 98px);
  background:
    radial-gradient(circle at 86% 16%, rgba(240, 232, 215, .28), transparent 28%),
    var(--accent);
  color: var(--on-accent);
}

.closing-cta > div {
  position: relative;
  z-index: 2;
}

.closing-cta .mini-label { color: currentColor; }

.closing-cta h2 {
  max-width: 1050px;
  margin: 24px 0 0;
  font: 500 clamp(58px, 7.8vw, 114px)/.86 var(--display);
  letter-spacing: -.055em;
}

.closing-cta .button {
  position: relative;
  z-index: 2;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.3fr .75fr .75fr;
  gap: 44px;
  padding: 68px clamp(24px, 5vw, 84px) 38px;
  background: color-mix(in srgb, var(--paper) 76%, #050604);
  color: var(--ink-soft);
}

.site-footer h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font: 500 27px/1 var(--display);
}

.site-footer p {
  max-width: 540px;
  margin: 0;
}

.footer-links {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-links a,
.footer-links button {
  justify-self: start;
  min-height: auto;
  padding: 4px 0;
  border: 0;
  background: transparent;
  font: 800 9px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer-note {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 26px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font: 800 8px/1.5 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(5, 7, 6, .82);
  backdrop-filter: blur(7px);
}

.dialog-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.dialog-title {
  font: 900 9px/1.3 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.icon-button {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
}

.dialog-body { padding: clamp(30px, 5vw, 60px); }

.demo-flag {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 9px 11px;
  background: var(--accent);
  color: var(--on-accent);
  font: 900 8px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.booking-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 36px;
}

.booking-progress span {
  height: 4px;
  background: var(--line);
}

.booking-progress span.is-filled { background: var(--accent); }

.booking-step { display: none; }

.booking-step.is-active {
  display: block;
  animation: pageIn .35s both;
}

.booking-step h2 {
  margin: 0 0 14px;
  font: 500 clamp(40px, 5vw, 58px)/.94 var(--display);
  letter-spacing: -.04em;
}

.booking-step > p { color: var(--ink-soft); }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 30px 0;
}

.choice { position: relative; }

.choice input {
  position: absolute;
  opacity: 0;
}

.choice label {
  display: grid;
  min-height: 116px;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

.choice label strong { font: 500 21px/1.08 var(--display); }

.choice label span {
  color: var(--ink-soft);
  font-size: 12px;
}

.choice input:focus-visible + label { outline: 2px solid var(--accent-2); }

.choice input:checked + label {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 26px 0;
}

.field {
  display: grid;
  gap: 9px;
}

.field label {
  font: 900 8px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.field input,
.field select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.privacy-note {
  padding: 16px;
  border-left: 4px solid var(--accent);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-size: 12px;
}

.dialog-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 32px;
}

.confirmation {
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.confirmation strong {
  display: block;
  margin-bottom: 13px;
  font: 500 30px/1 var(--display);
}

.article-body {
  max-width: 700px;
  margin: 0 auto;
}

.article-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 38px;
  object-fit: cover;
}

.article-body h1 {
  margin: 18px 0 26px;
  font: 500 clamp(46px, 6vw, 72px)/.93 var(--display);
  letter-spacing: -.05em;
}

.article-body h2 {
  margin: 46px 0 16px;
  font: 500 32px/1.06 var(--display);
}

.article-body p,
.article-body li {
  color: var(--ink-soft);
  font-size: 17px;
}

.article-body .byline {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 800 8px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.chat-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 85;
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, var(--on-accent));
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
  font: 900 9px/1.1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: launcherFloat 3s ease-in-out infinite;
}

.chat-panel {
  position: fixed;
  right: 22px;
  bottom: 104px;
  z-index: 85;
  display: none;
  width: min(400px, calc(100vw - 28px));
  height: min(640px, calc(100vh - 132px));
  grid-template-rows: auto 1fr auto auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.chat-panel.is-open {
  display: grid;
  animation: chatPop .34s cubic-bezier(.2, .8, .2, 1) both;
}

.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 19px;
  background: var(--jewel);
  color: var(--light-text);
}

.chat-head strong {
  display: block;
  font: 500 20px/1 var(--display);
}

.chat-head span {
  display: block;
  margin-top: 6px;
  color: rgba(240, 232, 215, .64);
  font: 800 7px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.chat-head .icon-button {
  width: 40px;
  height: 40px;
  border-color: rgba(240, 232, 215, .26);
  color: var(--light-text);
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 19px;
}

.chat-message {
  max-width: 86%;
  padding: 14px 16px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

.chat-message.user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
}

.chat-message.typing {
  width: 76px;
  font-family: var(--mono);
  letter-spacing: .25em;
  animation: typingFade .8s ease-in-out infinite alternate;
}

.quick-replies {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
}

.quick-replies button {
  flex: 0 0 auto;
  min-height: 37px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font: 800 8px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.chat-form input {
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.chat-form button {
  min-width: 60px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font: 900 8px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-theme="field"] .brand-copy strong,
body[data-theme="field"] .hero h1,
body[data-theme="field"] .subhero h1,
body[data-theme="field"] .section h2,
body[data-theme="field"] .closing-cta h2 {
  text-transform: uppercase;
}

body[data-theme="onyx"] .plain-card,
body[data-theme="onyx"] .treatment-card,
body[data-theme="onyx"] .price-card,
body[data-theme="onyx"] .blog-card {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body[data-theme="graphite"] .practice-feature-copy,
body[data-theme="graphite"] .pillar-card .card-copy {
  background: linear-gradient(0deg, rgba(24, 61, 56, .28), transparent);
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes imageReveal {
  from { opacity: 0; transform: scale(1.08); filter: saturate(.6); }
  to { opacity: 1; transform: scale(1); filter: saturate(1); }
}

@keyframes lineGrow {
  from { width: 0; }
  to { width: 46px; }
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(38px); }
  to { opacity: 1; transform: none; }
}

@keyframes arrowNudge {
  to { transform: translateX(9px); }
}

@keyframes launcherFloat {
  50% { transform: translateY(-8px); }
}

@keyframes chatPop {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@keyframes typingFade {
  to { opacity: .38; }
}

@keyframes goldGlint {
  0%, 72%, 100% { background-position: 180% 0; }
  84% { background-position: -80% 0; }
}

@media (max-width: 1260px) {
  .site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 12px 28px 26px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open { display: flex; }

  .site-nav a {
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
  }

  .menu-button { display: block; }

  .header-actions .button { display: none; }
}

@media (max-width: 980px) {
  .hero-copy { padding-right: 34px; padding-left: 34px; }

  .hero-pillar-list { grid-template-columns: repeat(2, 1fr); }

  .hero-pillar-list a:nth-child(2) { border-right: 0; }

  .hero-pillar-list a:nth-child(-n+2) { border-bottom: 1px solid rgba(239, 229, 209, .2); }

  .signal-strip { grid-template-columns: repeat(2, 1fr); }

  .signal:nth-child(2) { border-right: 0; }

  .signal:nth-child(-n+2) { border-bottom: 1px solid rgba(240, 232, 215, .17); }

  .section-head,
  .faq-layout { grid-template-columns: 1fr; }

  .practice-feature {
    grid-column: 1 / -1;
    min-height: 580px;
  }

  .practice-bento > .plain-card { grid-column: span 6; }

  .hook-strip { grid-template-columns: 1fr; }

  .pillar-card,
  .pillar-card:nth-child(2),
  .pillar-card:nth-child(3),
  .pillar-card:nth-child(4) {
    grid-column: span 6;
    min-height: 500px;
  }

  .treatment-card,
  .treatment-card:nth-child(1) {
    grid-column: span 6;
    grid-template-columns: 1fr;
    grid-template-rows: 280px 1fr;
  }

  .treatment-card:nth-child(5) {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    grid-template-rows: 360px 1fr;
  }

  .price-card { grid-column: span 6; }

  .price-card:last-child { grid-column: 1 / -1; }

  .membership-card.is-featured { transform: none; }

  .area-layout,
  .service-overview,
  .membership-hero,
  .about-layout {
    grid-template-columns: 1fr;
  }

  .area-map { min-height: 520px; }

  .service-menu {
    position: static;
    margin-bottom: 30px;
  }

  .service-catalog { grid-template-columns: 1fr; }

  .catalog-card,
  .catalog-card:nth-child(1),
  .catalog-card:nth-child(5) {
    grid-column: auto;
  }

  .depth-grid { grid-template-columns: 1fr; }

  .program-ledger { grid-template-columns: repeat(2, 1fr); }

  .care-format-row { grid-template-columns: .7fr 1.3fr .8fr; }

  .plain-grid { grid-template-columns: 1fr 1fr; }

  .blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .site-header {
    min-height: 78px;
    padding: 12px 18px;
  }

  .brand { min-width: 0; }

  .brand-mark,
  .brand-mark img { height: 44px; }

  .brand-copy strong { font-size: 15px; }

  .brand-copy small { font-size: 7px; }

  .hero,
  .hero-copy { min-height: 860px; }

  .hero-copy {
    justify-content: flex-end;
    padding: 130px 22px 66px;
  }

  body[data-theme="onyx"] .hero-copy { padding-left: 22px; }

  .hero h1,
  .subhero h1,
  body[data-theme="onyx"] .hero h1 {
    font-size: clamp(48px, 14vw, 72px);
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button,
  .hero-actions .text-link { width: 100%; }

  .hero-pillar-list { margin-top: 48px; }

  .hero-pillar-list a {
    min-height: 96px;
    padding: 14px;
  }

  .hero-pillar-list span { font-size: 14px; }

  .signal-strip { grid-template-columns: 1fr; }

  .signal,
  .signal:nth-child(2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(240, 232, 215, .17);
  }

  .section,
  body[data-theme="onyx"] .section { padding: 92px 22px; }

  .section-head { gap: 30px; }

  .practice-bento {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .practice-feature,
  .practice-bento > .plain-card {
    grid-column: auto;
    grid-row: auto;
  }

  .practice-feature { min-height: 560px; }

  .hook-grid { grid-template-columns: 1fr; }

  .hook-grid p {
    min-height: 220px;
    border-right: 0;
  }

  .pillar-bento,
  .treatment-grid,
  .program-grid,
  .membership-grid {
    grid-template-columns: 1fr;
  }

  .pillar-card,
  .pillar-card:nth-child(2),
  .pillar-card:nth-child(3),
  .pillar-card:nth-child(4),
  .treatment-card,
  .treatment-card:nth-child(1),
  .treatment-card:nth-child(5),
  .price-card,
  .price-card:last-child {
    grid-column: auto;
  }

  .pillar-card,
  .pillar-card:nth-child(2),
  .pillar-card:nth-child(3),
  .pillar-card:nth-child(4) { min-height: 480px; }

  .treatment-card,
  .treatment-card:nth-child(1),
  .treatment-card:nth-child(5) {
    grid-template-columns: 1fr;
    grid-template-rows: 280px 1fr;
    min-height: 500px;
  }

  .paired-media { grid-template-columns: 1fr 1fr; }

  .section-actions { justify-content: stretch; }

  .section-actions .button,
  .section-actions .text-link { width: 100%; }

  .town-list { grid-template-columns: repeat(2, 1fr); }

  .area-map { min-height: 440px; }

  .subhero,
  body[data-theme="onyx"] .subhero {
    min-height: 550px;
    padding: 130px 22px 78px;
  }

  .catalog-card,
  .catalog-card:nth-child(1),
  .catalog-card:nth-child(5) {
    grid-template-columns: 1fr;
  }

  .catalog-card > img,
  .catalog-card > .paired-media { min-height: 300px; }

  .depth-image {
    /* The full-bleed width must stay in step with the negative margins. The base
       rule widens by 2 x clamp(24px, 5.5vw, 90px) but this breakpoint only pulls
       back 22px a side, so below ~800px the extra width had nowhere to go and
       every service sub-page scrolled sideways (11px at a 500px viewport). */
    width: calc(100% + 44px);
    height: 70vw;
    margin-right: -22px;
    margin-left: -22px;
  }

  .dossier-row { grid-template-columns: 110px 1fr; }

  .program-ledger { grid-template-columns: 1fr; }

  .membership-hero { min-height: 0; }

  .membership-hero > div:first-child { min-height: 420px; }

  .care-format-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .care-format-head { display: none; }

  .plain-grid { grid-template-columns: 1fr; }

  .closing-cta {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .closing-cta .button { width: 100%; }

  .site-footer { grid-template-columns: 1fr; }

  .footer-note {
    grid-column: auto;
    flex-direction: column;
  }

  .choice-grid,
  .form-grid { grid-template-columns: 1fr; }

  .dialog-actions { flex-direction: column-reverse; }

  .dialog-actions .button { width: 100%; }

  .chat-panel {
    right: 14px;
    bottom: 94px;
  }

  .chat-launcher {
    right: 14px;
    bottom: 14px;
  }
}

.dc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .58s ease-out, transform .58s ease-out;
  transition-delay: calc(var(--dc-i, 0) * 75ms);
}

.dc-revealed {
  opacity: 1;
  transform: none;
}

.spa-view.is-active .hero-copy .eyebrow {
  animation: dcFadeUp .55s ease-out both;
  animation-delay: .1s;
}

.spa-view.is-active .hero-copy .hero-narrative {
  animation: dcFadeUp .55s ease-out both;
  animation-delay: .2s;
}

.spa-view.is-active .hero-copy h1 {
  animation: dcFadeUp .68s ease-out both;
  animation-delay: .3s;
}

.spa-view.is-active .hero-copy .hero-lede {
  animation: dcFadeUp .55s ease-out both;
  animation-delay: .44s;
}

.spa-view.is-active .hero-copy .hero-actions {
  animation: dcFadeUp .5s ease-out both;
  animation-delay: .56s;
}

.spa-view.is-active .hero-copy .hero-pillar-list {
  animation: dcFadeUp .58s ease-out both;
  animation-delay: .68s;
}

.spa-view.is-active .subhero .eyebrow {
  animation: dcFadeUp .5s ease-out both;
  animation-delay: .16s;
}

.spa-view.is-active .subhero h1 {
  animation: dcFadeUp .62s ease-out both;
  animation-delay: .27s;
}

.spa-view.is-active .subhero > p:not(.eyebrow) {
  animation: dcFadeUp .52s ease-out both;
  animation-delay: .39s;
}

@keyframes dcFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- Restored: four-pillar grid (Section 01) + reviews section (David 07-16 feedback) --- */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: clamp(20px, 4vw, 40px); }
.pillar-grid .plain-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.pillar-grid .plain-card .arrow { margin-top: auto; }
/* Center the Go-deeper cards (Services / Programs / Peak Health) per David. */
.pillar-grid .plain-card { align-items: center; text-align: center; }
.pillar-grid .plain-card .arrow, .pillar-grid .plain-card .mini-label { align-self: center; }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; } }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card { position: relative; min-height: 300px; padding: 34px; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 92%, white); }
.review-card::before { content: "\201C"; color: var(--accent); font: 500 70px/.7 var(--display); }
.review-card blockquote { margin: 30px 0 26px; font: 500 24px/1.24 var(--display); }
.sample-label { display: inline-flex; padding: 7px 9px; background: var(--accent); color: #fff; font: 900 8px/1.2 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.review-card footer { color: var(--ink-soft); font: 800 8px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.review-disclaimer { margin-top: 22px; color: var(--ink-soft); font: 700 10px/1.5 var(--mono); }
body[data-theme="gold"] .review-card { background: #11110f; }
body[data-theme="gold"] .sample-label { background: var(--accent); color: #080808; }
@media (max-width: 820px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Marker shown only when the live assistant could not be reached and the
   built-in offline answer was used instead. */
.chat-note {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
}

/* Gold theme — centre the sub-page hero.
   The shared .subhero is left-aligned, which reads well when the heading fills
   the line. On the services / pillar pages the headings are short, so at desktop
   widths the copy hugged the left edge and left roughly half the band empty.
   Centring the block closes that gap. Scoped to this theme so the other
   directions keep their left-aligned editorial treatment. */
body[data-theme="gold"] .subhero {
  justify-items: center;
  text-align: center;
}

body[data-theme="gold"] .subhero h1,
body[data-theme="gold"] .subhero p {
  margin-left: auto;
  margin-right: auto;
}

body[data-theme="gold"] .subhero h1 { max-width: 15ch; }
body[data-theme="gold"] .subhero p  { max-width: 62ch; }

/* The oversized index numeral stays on the right shoulder. Centring it put it
   directly behind the heading, where it collided with the DC watermark and made
   the copy unreadable. */