/* Fallback faces sized to match the web fonts, so text does not jump when they arrive. */
@font-face { font-family: "Cormorant Fallback"; font-style: normal; src: local("Iowan Old Style"), local("Iowan Old Style Roman"), local("Georgia"); size-adjust: 88%; }
@font-face { font-family: "Cormorant Fallback"; font-style: italic; src: local("Iowan Old Style Italic"), local("Georgia Italic"); size-adjust: 88%; }
@font-face { font-family: "Jost Fallback"; src: local("Avenir Next"), local("Avenir Next Regular"), local("Arial"); size-adjust: 94%; }

:root {
  --paper: #f6f0e3;
  --card: #fbf7ee;
  --ink: #1a2740;
  --ink-deep: #111b2e;
  --red: #9a3b2e;
  --brass: #a8843f;        /* ornaments only: rules, quote marks, underlines */
  --brass-text: #80632b;   /* brass for small text: 4.95:1 on paper, 5.26:1 on card */
  --brass-soft: #d8c08c;
  --rule: #d9d1bf;
  --mute: #5f6775;
  --on-dark: #cfd5df;
  --serif: "Cormorant Garamond", "Cormorant Fallback", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Jost Fallback", "Avenir Next", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; }
body { margin: 0; font: 400 1.0625rem/1.7 var(--sans); color: var(--ink); background: var(--paper); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
img { max-width: 100%; height: auto; display: block; }
/* The build wraps images in <picture> to offer AVIF and WebP. Taking the wrapper
   out of the layout means the image sits in the page exactly as it did before.
   <source> is not hidden by the browser's own stylesheet, so it has to be hidden
   here: with display:contents above, an unhidden <source> becomes a real grid or
   flex item of the container and pushes the image out of its column. */
picture { display: contents; }
picture > source { display: none; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.003em; }
h1 { font-size: clamp(2.7rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); }
h3 { font-size: 1.65rem; font-weight: 500; line-height: 1.15; }
h2, h3, .page-head h1, .asks li { text-wrap: balance; }
p { margin: 0 0 1em; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.section.dark :focus-visible, .cta-band :focus-visible, .site-foot :focus-visible, .post-card-cta:focus-visible { outline-color: var(--brass-soft); }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; }
.caps, .eyebrow { font: 500 .75rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.eyebrow { color: var(--brass-text); margin: 0 0 1.1rem; }
.lede { font-size: 1.15rem; color: var(--mute); max-width: 62ch; }
.m-only { display: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 1.35em 2.4em; font: 500 .75rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); color: var(--ink); background: transparent; transition: background .2s, color .2s, border-color .2s; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn-gold { background: var(--brass-soft); border-color: var(--brass-soft); color: var(--ink-deep); }
.btn-gold:hover { background: var(--paper); border-color: var(--paper); color: var(--ink-deep); }
.btn-light { border-color: rgba(246, 240, 227, .7); color: var(--paper); }
.btn-light:hover { background: var(--paper); color: var(--ink-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.5rem 0; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(246, 240, 227, .96); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-head.scrolled { border-bottom-color: var(--rule); }
.site-head .wrap { width: min(1300px, 100% - 48px); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; }
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink); font: 400 1.5rem/1 var(--serif); letter-spacing: .01em; white-space: nowrap; }
.brand small { display: block; font: 500 .68rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; margin-bottom: .45rem; color: var(--ink); opacity: .8; }
.brand img { width: 54px; height: auto; }
.nav { display: flex; align-items: center; gap: 2.1rem; white-space: nowrap; }
.nav > a:not(.btn), .has-sub > button { font: 500 .75rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: .6rem 0; background: none; border: 0; cursor: pointer; border-bottom: 1px solid transparent; }
.nav > a:not(.btn):hover, .has-sub > button:hover, .nav > a[aria-current], .has-sub > button.is-current { color: var(--red); border-bottom-color: var(--red); }
.has-sub { position: relative; }
.has-sub > button::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .6em; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-3px) rotate(45deg); }
.sub { display: none; position: absolute; top: 100%; left: -1.4rem; min-width: 300px; background: var(--card); border: 1px solid var(--ink); padding: .6rem 0; }
/* The menu opens from the button (click, Enter or Space; main.js keeps aria-expanded in step).
   Hover is an extra for mouse users on the desktop header only. */
.has-sub.open .sub { display: block; }
@media (hover: hover) and (min-width: 1001px) { .has-sub:hover:not(.dismissed) .sub { display: block; } }
.sub a { display: block; padding: .7rem 1.4rem; text-decoration: none; font: 400 1.2rem/1.2 var(--serif); color: var(--ink); }
.sub a:hover, .sub a[aria-current] { color: var(--red); background: var(--paper); }
.sub a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nav-cta { padding: 1.1em 1.8em; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span:not(.sr) { display: block; width: 26px; height: 1.5px; background: var(--ink); margin: 6px 0; transition: .2s; }

/* Hero */
/* The hero is sized to fit the window. --u is 1% of the 1440 design width, scaled with the hero height,
   so the type keeps its place relative to the drawing on wide, short windows as well as tall ones. */
.hero { --hero-h: clamp(540px, min(62.5vw, 100svh - 86px), 1100px); --u: calc(var(--hero-h) / 62.5); position: relative; overflow: hidden; height: var(--hero-h); margin-top: -1px; }
.hero picture { display: contents; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero-copy { position: relative; z-index: 1; padding-top: calc(var(--u) * 5.4); margin-left: max(40px, calc((100% - 1300px) / 2 + 3.4rem)); max-width: calc(var(--u) * 50); }
.est { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: calc(var(--u) * 1.9); white-space: nowrap; }
.est::before, .est::after { content: ""; width: 54px; height: 1px; background: var(--red); }
.hero h1 { font-size: calc(var(--u) * 6.4); line-height: 1; margin: 0; }
.hero h1 em { font-style: italic; color: var(--red); display: block; }
.hero-copy p { font-size: clamp(1rem, calc(var(--u) * 1.32), 1.4rem); line-height: 1.6; max-width: 27em; margin: calc(var(--u) * 1.8) 0 calc(var(--u) * 2.4); }
.hero .btn { padding: clamp(1em, calc(var(--u) * 1.3), 1.6em) clamp(1.6em, calc(var(--u) * 2.3), 2.8em); }
.hero .btn:not(.btn-primary) { background: rgba(246, 240, 227, .85); }
.hero .btn:not(.btn-primary):hover { background: var(--ink); }
.hero-foot { position: absolute; left: clamp(1.5rem, 4.8vw, 4.4rem); right: clamp(1.5rem, 4.8vw, 4.4rem); bottom: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; }

/* Credentials strip */
.creds { border-block: 1px solid var(--rule); }
.creds ul { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.creds li { padding: 2.7rem 1.8rem; text-align: center; border-left: 1px solid var(--rule); font-size: .92rem; line-height: 1.5; color: var(--mute); }
.creds li:last-child { border-right: 1px solid var(--rule); }
.creds strong { display: block; font: 400 1.9rem/1.1 var(--serif); color: var(--ink); margin-bottom: .5rem; }

/* Sections */
.section { padding-block: clamp(4rem, 8vw, 6.8rem); }
.section.alt { background: var(--card); border-block: 1px solid var(--rule); }
.section.dark { background: var(--ink); color: var(--on-dark); }
.section.dark h2, .section.dark h3, .section.dark strong { color: var(--paper); }
.section.dark .eyebrow { color: var(--brass-soft); }
.section.dark a:not(.btn) { color: var(--brass-soft); }
.section-head { max-width: 800px; margin: 0 auto 3.4rem; text-align: center; }
.section-head p:not(.eyebrow) { color: var(--mute); font-size: 1.08rem; max-width: 40em; margin-inline: auto; }
.section-head.left { text-align: left; margin-inline: 0; }
.section-head.left p:not(.eyebrow) { margin-inline: 0; }
.center { text-align: center; margin-top: 2.8rem; }

/* Ruled grid of cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); counter-reset: card; }
.card { display: flex; flex-direction: column; padding: 2.5rem 2.2rem 2.6rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); text-decoration: none; color: var(--ink); transition: background .25s; counter-increment: card; }
.card::before { content: counter(card, lower-roman) "."; content: counter(card, lower-roman) "." / ""; font: italic 400 1.35rem var(--serif); color: var(--brass-text); margin-bottom: .5rem; }
.cards.plain .card::before { content: none; }
a.card:hover { background: #fff; color: var(--ink); }
.card .icon { display: none; }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--mute); font-size: .97rem; line-height: 1.6; margin-bottom: 1.4rem; }
.card .more { margin-top: auto; font: 500 .7rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.card .more::after { content: "  →"; content: "  →" / ""; white-space: pre; }
a.card:hover .more { color: var(--red); }
.cards.plain .card p:last-of-type { margin-bottom: 1.2rem; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.steps li::before { content: "No. " counter(step); display: block; font: italic 400 1.2rem var(--serif); color: var(--red); margin-bottom: .8rem; }
.steps p { color: var(--mute); font-size: .98rem; }

/* Framed photographs. The image is inset by the width of its frame, so the outer
   hairline, not the picture, lines up with the text column. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.split > *, .visit > * { min-width: 0; }
.split img, .framed { width: calc(100% - 24px); margin: 12px; object-fit: cover; outline: 1px solid var(--rule); outline-offset: 12px; }
.section.dark .split img { outline-color: rgba(216, 192, 140, .5); }
.checks { list-style: none; padding: 0; margin: 1.4rem 0 2rem; }
.checks li { padding: .75rem 0 .75rem 1.9rem; position: relative; border-bottom: 1px solid var(--rule); }
.checks li::before { content: ""; position: absolute; left: .2rem; top: 1.6em; width: .7rem; height: 1px; background: var(--red); }
.section.dark .checks li { border-bottom-color: rgba(255, 255, 255, .14); }
.section.dark .checks li::before { background: var(--brass-soft); }

.price-mini { border-top: 1px solid var(--ink); }
.price-mini div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--rule); }
.price-mini span:last-child { font: 500 1.45rem/1 var(--serif); white-space: nowrap; }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.quote { margin: 0; padding: 2.4rem 2.2rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; }
.quote::before { content: "\201C"; content: "\201C" / ""; font: 400 4rem/0.6 var(--serif); color: var(--brass); display: block; margin-bottom: .4rem; }
.quote p { font: 400 1.28rem/1.45 var(--serif); }
.quote footer { margin-top: auto; font: 500 .72rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.quotes.masonry { display: block; columns: 3 320px; column-gap: 0; border: 0; margin-top: 0; }
.quotes.masonry .quote { break-inside: avoid; border: 1px solid var(--rule); margin: 0 -1px -1px 0; }

.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.5rem; }
.person { display: grid; grid-template-columns: 170px 1fr; gap: 1.8rem; align-items: start; }
.person img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 12%; width: calc(100% - 16px); margin: 8px; filter: grayscale(.55) sepia(.1) brightness(1.08) contrast(.96); transition: filter .5s; outline: 1px solid var(--rule); outline-offset: 8px; }
.person:hover img { filter: none; }
.person h3 { margin: 0 0 .3rem; }
.person .role { font: 500 .7rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); margin-bottom: .9rem; }
.person p { color: var(--mute); font-size: .98rem; }

.np-note { max-width: 62ch; margin: 2.6rem auto 0; text-align: center; color: var(--mute); }
/* People and photographs */
.photo { margin: 0; }
.photo img { width: calc(100% - 24px); margin: 12px; object-fit: cover; outline: 1px solid var(--rule); outline-offset: 12px; filter: saturate(.86) sepia(.07); }
.photo figcaption { margin-top: 1.1rem; color: var(--mute); font-size: .68rem; line-height: 1.5; }
.section.dark .photo img { outline-color: rgba(216, 192, 140, .5); }
.section.dark .photo figcaption { color: var(--on-dark); }
.founder { align-items: center; margin-bottom: clamp(4rem, 7vw, 6rem); }
.founder .photo img { aspect-ratio: 4 / 3.2; }
.asks { list-style: none; padding: 0; margin: 1.6rem 0 2rem; border-top: 1px solid var(--rule); }
.asks li { font: italic 400 clamp(1.2rem, 1.7vw, 1.4rem)/1.3 var(--serif); padding: .85rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.6rem); align-items: start; }
.portrait img { width: calc(100% - 20px); margin: 10px 10px calc(2rem + 10px); aspect-ratio: 4 / 5; object-fit: cover; object-position: center 12%; filter: grayscale(.55) sepia(.1) brightness(1.08) contrast(.96); outline: 1px solid var(--rule); outline-offset: 10px; transition: filter .5s; }
.portrait:hover img { filter: none; }
.portrait h3 { margin: 0 0 .3rem; font-size: 1.75rem; }
.portrait .role { font: 500 .68rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); margin-bottom: .8rem; min-height: 1.5em; }
.portrait p { color: var(--mute); font-size: .97rem; margin: 0; }
/* On touch screens a tap leaves :hover stuck, so the colour reveal is for pointers only. */
@media (hover: none) { .portrait:hover img, .person:hover img { filter: grayscale(.55) sepia(.1) brightness(1.08) contrast(.96); } }
/* Both office photographs are 16:9, so equal 16:9 frames show them whole: the wall lettering and the masks. */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 4vw, 3.6rem); margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.photo-pair img { aspect-ratio: 16 / 9; }
.fine { font-size: .92rem; margin-top: 1.4rem; opacity: .85; }
.section.dark .price-mini { border-top-color: rgba(246, 240, 227, .6); margin-top: 1.6rem; }
.section.dark .price-mini div { border-bottom-color: rgba(255, 255, 255, .16); }
.section.dark .price-mini span:last-child { color: var(--paper); }
.narrow { max-width: 880px; }

/* Founder's note */
.founder-note { margin: 0; padding: clamp(2.2rem, 4vw, 3.2rem) 0; text-align: center; border-block: 1px solid var(--rule); }
.founder-note p { font: italic 400 clamp(1.55rem, 2.6vw, 2.2rem)/1.35 var(--serif); color: var(--ink); margin: 0 0 1.6rem; text-wrap: balance; }
.founder-note footer { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.founder-note .sig { font: italic 500 1.5rem/1.2 var(--serif); color: var(--red); }
.founder-note .caps { font-size: .68rem; color: var(--mute); }

/* Contact */
.visit { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.visit-info { border: 1px solid var(--rule); background: var(--card); padding: 2.4rem; }
.visit-info h2 { font-size: 2rem; }
.visit-info dl { margin: 0 0 1.6rem; }
.visit-info dt { font: 500 .7rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); margin-top: 1.3rem; }
.visit-info dd { margin: .3rem 0 0; }
.visit-info dd small { display: block; color: var(--mute); font-size: .85rem; line-height: 1.5; margin-top: .3rem; }
.visit-media { display: grid; gap: 2.6rem; align-content: start; }
.visit-media .photo img { aspect-ratio: 16 / 9; }
.map { border: 1px solid var(--rule); width: 100%; height: 100%; min-height: 400px; filter: grayscale(.6) sepia(.12); }
.visit-media .map { height: 340px; min-height: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1.3rem 3rem 1.3rem 0; position: relative; font: 500 1.45rem/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; position: absolute; right: .3rem; top: 50%; transform: translateY(-52%); font: 300 1.8rem var(--sans); color: var(--red); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-52%) rotate(45deg); }
.faq summary:hover { color: var(--red); }
.faq summary h3 { display: inline; font: inherit; margin: 0; color: inherit; }
.faq details > div { padding-bottom: 1.3rem; color: #3a4558; }

/* Inner pages */
/* The skyline sits on the rule under the page title, tied to the text column so it
   stays with the heading on very wide windows. Its cut left edge is faded out. */
.page-head { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); padding-top: clamp(2.6rem, 5vw, 4.2rem); }
.page-head .wrap { position: relative; padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-head .wrap > * { position: relative; z-index: 1; }
.page-head .wrap::after { content: ""; position: absolute; z-index: 0; right: -70px; bottom: -8px; width: 612px; height: 170px; background: url(/assets/img/skyline-strip.svg?v=d4f68fe7) right bottom / auto 170px no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%); mask-image: linear-gradient(90deg, transparent, #000 26%); pointer-events: none; }
@media (min-width: 1101px) { .page-head .wrap { padding-bottom: 7.5rem; } .page-head .lede { max-width: 30em; } }
.page-head h1 { max-width: 16em; }
.page-head .lede { max-width: 34em; }
.crumbs { font: 500 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-bottom: 2rem; }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.crumbs span[aria-hidden] { margin: 0 .5em; }
.prose-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(2.5rem, 6vw, 5.5rem); padding-block: clamp(3rem, 6vw, 5rem); align-items: start; }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 1.7em; padding-top: 1em; border-top: 1px solid var(--rule); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border: 0; }
.prose .faq + h2 { border-top: 0; padding-top: 0; margin-top: 1.5em; }
.prose h2 + .faq, .prose h2 + .team { margin-top: 1.4rem; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--red); }
.prose ul.cols { columns: 2; column-gap: 3rem; }
.prose ul.cols li { break-inside: avoid; }
.prose img { margin: 2rem 0 2.4rem 10px; outline: 1px solid var(--rule); outline-offset: 10px; max-width: calc(100% - 20px); }
/* A bare image in running text keeps its proportions but never fills the whole screen.
   The <picture> in the middle is the AVIF and WebP wrapper the build adds. */
.prose > img, .prose > p > img,
.prose > picture > img, .prose > p > picture > img { width: auto; max-height: 480px; }
.prose .photo { margin: 2.2rem 0 2.6rem; }
.prose .photo img { width: calc(100% - 20px); max-width: none; margin: 10px; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 20%; }
.prose .photo figcaption { margin: 1rem 0 0; }
.prose h2 + .photo { margin-top: 1.5rem; }
.prose .note { border: 1px solid var(--rule); border-left: 3px solid var(--brass); background: var(--card); padding: 1.2rem 1.5rem; margin: 1.8rem 0; }
.prose .note p:last-child { margin: 0; }
.prose > .note:first-child { margin-top: 0; }
.prose .answer { font: 400 1.5rem/1.45 var(--serif); }

/* About: clinical team and press list */
.prose .team { grid-template-columns: 1fr; gap: 0; margin: 1.4rem 0 1rem; border-bottom: 1px solid var(--rule); }
.prose .person { grid-template-columns: 200px 1fr; gap: 2.2rem; padding: 2.4rem 0; border-top: 1px solid var(--rule); }
.prose .person:first-child { border-top: 0; padding-top: .6rem; }
.prose .person img { margin: 8px; max-width: none; outline-offset: 8px; }
.prose .person h3 { margin-top: 0; }
.prose .person p:not(.role) { color: var(--ink); font-size: 1rem; }
.prose .press { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.prose .press li { padding: .9rem 0; margin: 0; border-bottom: 1px solid var(--rule); }
.prose .press em { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--brass-text); margin-right: .6rem; }

/* In-page contents list (shown under 1101px, where the sidebar list is hidden) */
.toc { border-block: 1px solid var(--rule); padding: 1.2rem 0; margin: 2rem 0; }
.toc .caps { color: var(--brass-text); margin: 0 0 .4rem; }
.toc ol { list-style: lower-roman; margin: 0; padding-left: 1.4rem; }
.toc li { margin: 0; }
.toc a { display: inline-block; padding: .45rem 0; font: 400 1.2rem/1.3 var(--serif); }
@media (min-width: 1101px) { .prose .toc { display: none; } }

/* Sidebar */
.side { position: sticky; top: 110px; }
@media (max-height: 880px) { .side:has(.side-toc) { position: static; } }
.side-card { border: 1px solid var(--ink); padding: 2rem 1.8rem; background: var(--card); }
.side-card h2 { font-size: clamp(1.5rem, 2vw, 1.8rem); }
.side-card p { color: var(--mute); font-size: .95rem; }
.side-card .btn { width: 100%; margin-bottom: .7rem; padding-inline: 1em; }
.side-facts { list-style: none; padding: 1.2rem 0 0; margin: .8rem 0 0; border-top: 1px solid var(--rule); font-size: .93rem; color: var(--mute); }
.side-facts li { margin-bottom: .8rem; }
.side-facts strong { display: block; font: 500 .68rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); }
.side-toc { margin-top: 1.6rem; border-top: 1px solid var(--ink); padding-top: 1.2rem; }
.side-toc h2 { font: 500 .68rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); margin: 0 0 .8rem; }
.side-toc ol { list-style: lower-roman; padding-left: 1.4rem; margin: 0; font: 400 1.15rem/1.35 var(--serif); }
.side-toc li { margin-bottom: .5rem; }
.side-toc li::marker { color: var(--brass-text); font-style: italic; }
.side-toc a { text-decoration: none; }
.side-toc a:hover { text-decoration: underline; }

/* Destination pages */
.dest-bandwrap { border-bottom: 1px solid var(--rule); background: var(--paper); }
.dest-band { width: 100%; max-width: 1760px; margin-inline: auto; height: clamp(190px, 24vw, 340px); object-fit: cover; display: block; }
.page-head.no-strip .wrap::after { content: none; }
@media (min-width: 1101px) { .page-head.no-strip .wrap { padding-bottom: 3.4rem; } }
.dest-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.dest-card-link { display: block; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); text-decoration: none; color: var(--ink); transition: background .2s; }
.dest-card-link:hover { background: #fff; color: var(--ink); }
.dest-card-link img { width: 100%; height: 150px; object-fit: cover; }
.dest-card-link .t { padding: 1.2rem 1.4rem 1.5rem; }
.dest-card-link h2 { font-size: 1.5rem; margin: 0 0 .35rem; }
.dest-card-link p { color: var(--mute); font-size: .92rem; margin: 0; }
/* Ten cards in a three wide grid leave the last one alone on its row, so it runs
   the full width and turns on its side instead of sitting in an empty row. */
@media (min-width: 1101px) {
  .dest-list .dest-card-link:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .dest-list .dest-card-link:last-child:nth-child(3n+1) img { height: 100%; min-height: 200px; }
  .dest-list .dest-card-link:last-child:nth-child(3n+1) .t { align-self: center; padding: 1.6rem 2.2rem; }
  .dest-list .dest-card-link:last-child:nth-child(3n+1) h2 { font-size: 1.9rem; }
  .dest-list .dest-card-link:last-child:nth-child(3n+1) p { font-size: 1rem; }
}
/* The destination index runs its grid the full width but keeps its prose readable. */
.wrap-narrow { max-width: 70ch; margin-block: clamp(3rem, 6vw, 5rem); }

/* Price table */
.filter { width: 100%; padding: 1rem 1.2rem; border: 1px solid var(--ink); font: inherit; background: var(--card); margin-bottom: 1.2rem; border-radius: 0; color: var(--ink); }
.filter { text-overflow: ellipsis; }
.filter::placeholder { color: var(--mute); opacity: 1; }
.filter-status { color: var(--mute); font-size: .9rem; min-height: 1.5em; margin: -.6rem 0 .8rem; }
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; border-top: 1px solid var(--ink); }
.price-table caption { text-align: left; color: var(--mute); font-size: .9rem; padding-bottom: .8rem; }
.price-table th, .price-table td { text-align: left; padding: 1rem .4rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.price-table th:first-child, .price-table td:first-child { padding-left: 0; }
.price-table th:last-child, .price-table td:last-child { padding-right: 0; }
.price-table thead th { font: 500 .7rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); }
.price-table td:nth-child(2) { font: 500 1.4rem/1.2 var(--serif); white-space: nowrap; text-align: right; }
.price-table thead th:nth-child(2) { text-align: right; }
.price-table td small { display: block; color: var(--mute); font: 400 .85rem/1.4 var(--sans); white-space: normal; }
.price-table tbody th { font: inherit; font-weight: 400; text-align: left; }
.price-table tbody th a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.price-table tbody th a:hover { color: var(--red); }

/* Blog */
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin-block: clamp(3rem, 6vw, 5rem); }
.post-card { padding: 2.2rem 2rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); text-decoration: none; color: var(--ink); transition: background .2s; }
.post-card:hover { background: #fff; color: var(--ink); }
.post-card time { font: 500 .68rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); }
.post-card h2 { font-size: 1.6rem; font-weight: 500; margin: .7rem 0; }
.post-card p { color: var(--mute); font-size: .95rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .kicker { font: 500 .68rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-soft); }
.post-card-cta, .post-card-cta:hover { background: var(--ink); color: var(--paper); }
.post-card-cta h2, .post-card-cta p { color: var(--paper); }
.post-card-cta:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-next { margin-top: 3rem; }
.post-back { margin-top: 1.6rem; font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.post-back a { text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: .2em; }
.reviewed { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font: 500 .72rem/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }

/* CTA band and footer */
.cta-band { background: var(--ink); color: var(--on-dark); padding-block: 4.5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem 4rem; }
.cta-band h2 { color: var(--paper); margin-bottom: .3em; font-size: clamp(1.9rem, 3.2vw, 2.8rem); max-width: 17em; }
.cta-band p { margin: 0; max-width: 52ch; }
.cta-actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.site-foot { background: var(--ink-deep); color: #aeb6c4; font-size: .95rem; padding-top: 4.5rem; }
.site-foot a { color: #e8e3d6; text-decoration: none; }
.site-foot a:hover { color: var(--brass-soft); }
.site-foot h3 { font: 500 .7rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 1.2rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: .55rem; }
.brand-foot { color: var(--paper) !important; margin-bottom: 1.3rem; }
.brand-foot small { color: var(--on-dark); }
.brand-foot img { background: var(--paper); border-radius: 50%; padding: 3px; }
.social a { margin-right: 1.2rem; }
.foot-base { display: flex; justify-content: space-between; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 3.5rem; padding-block: 1.6rem; font-size: .84rem; }
.foot-base p { margin: 0; }
.mobile-bar { display: none; }

/* Responsive */
@media (max-width: 1320px) and (min-width: 1001px) {
  .site-head .wrap { width: calc(100% - 40px); gap: 1rem; }
  .brand { font-size: 1.22rem; gap: .65rem; }
  .brand small { font-size: .56rem; letter-spacing: .2em; margin-bottom: .35rem; }
  .brand img { width: 44px; }
  .nav { gap: clamp(.85rem, 1.7vw, 1.8rem); }
  .nav > a:not(.btn), .has-sub > button { font-size: .66rem; letter-spacing: .16em; }
  .nav-cta { font-size: .66rem; letter-spacing: .16em; padding: 1em 1.2em; }
}
@media (max-width: 1000px) {
  body.nav-open { overflow: hidden; }
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-block: 1px solid var(--rule); flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 24px 1.8rem; max-height: calc(100vh - 86px); max-height: calc(100dvh - 86px); overflow: auto; overscroll-behavior: contain; white-space: normal; }
  .nav.open { display: flex; }
  .nav .m-only { display: block; }
  .nav > a:not(.btn), .has-sub > button { padding: 1.15rem 0; text-align: left; width: 100%; border-bottom: 1px solid var(--rule); }
  .has-sub > button.is-current { border-bottom-color: var(--rule); }
  .sub { position: static; display: none; border: 0; background: transparent; padding: .4rem 0 .8rem 1rem; min-width: 0; }
  .has-sub.open .sub { display: block; border-bottom: 1px solid var(--rule); }
  .has-sub.open > button { border-bottom-color: transparent; }
  .has-sub.open > button::after { transform: translateY(1px) rotate(-135deg); }
  .sub a { padding: .75rem 0; }
  .nav-cta { margin-top: 1.4rem; }
  .nav-note { margin: 1.4rem 0 0; font-size: .95rem; color: var(--mute); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}
@media (max-width: 1100px) {
  .hero { --u: 1vw; height: auto; display: flex; flex-direction: column; }
  .hero-copy { padding: 3.2rem 24px 1rem; margin-left: 0; max-width: 46rem; }
  .hero h1 { font-size: clamp(3rem, 8vw, 5rem); }
  .hero-copy p { font-size: 1.08rem; margin: 1.4rem 0 1.8rem; }
  .est { margin-bottom: 1.4rem; white-space: normal; }
  .hero .btn { padding: 1.3em 2em; }
  .hero-art { position: static; order: 2; height: auto; aspect-ratio: 1440 / 740; max-width: none; margin-top: -9vw; }
  .hero-foot { position: static; order: 3; padding: 0 24px 1.6rem; }
  .prose-wrap { grid-template-columns: 1fr; }
  .side { position: static; }
  /* The side card already closes the page here, so the identical band below it is dropped. */
  main:has(.side) + .cta-band { display: none; }
  .cards, .quotes, .post-list, .dest-list { grid-template-columns: repeat(2, 1fr); }
  .people { gap: 2rem; }
  .creds ul { grid-template-columns: repeat(2, 1fr); }
  .creds li { border-bottom: 1px solid var(--rule); }
  .creds li:nth-child(n+3) { border-bottom: 0; }
  .creds li:nth-child(2) { border-right: 1px solid var(--rule); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: 1fr; }
  .side-toc { display: none; }
  .page-head .wrap { padding-bottom: 9rem; }
  .page-head .wrap::after { right: -40px; bottom: -6px; width: 432px; height: 120px; background-size: auto 120px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* No orphan cell in a two-column ruled grid: the odd last box spans the row. */
  .quotes:not(.masonry) .quote:last-child:nth-child(odd), .cards .card:last-child:nth-child(odd), .post-list .post-card:last-child:nth-child(odd), .dest-list .dest-card-link:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .portrait h3 { min-height: 2.3em; }
  .side-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: start; }
  .side-card h2, .side-card > p, .side-card .btn { grid-column: 1; }
  .side-facts { grid-column: 2; grid-row: 1 / span 4; border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 0 2rem; margin: 0; }
}
@media (max-width: 900px) {
  .visit { grid-template-columns: 1fr; }
  .cta-band .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 96px; scroll-padding-bottom: 84px; }
  body { font-size: 1rem; }
  .brand { font-size: 1.12rem; gap: .7rem; }
  .brand small { font-size: .56rem; letter-spacing: .2em; }
  .brand img { width: 44px; }
  .nav { padding-bottom: calc(1.8rem + 70px); }
  .nav-cta { display: none; }
  .hero-art { aspect-ratio: 1 / 0.74; margin-top: 0; }
  .hero-foot { flex-direction: column; gap: .4rem; }
  .est { gap: .7rem; }
  .est::before, .est::after { width: 24px; }

  /* Long button labels wrap instead of pushing the page sideways. The hero keeps its own sizing. */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .section .btn, .cta-band .btn, .prose .btn, .side-card .btn, .visit-info .btn { line-height: 1.5; padding: 1.05em 1.6em; }
  .prose .btn-row .btn, .cta-actions .btn, .visit-info .btn-row .btn { flex: 1 1 100%; }

  .split, .people, .photo-pair { grid-template-columns: 1fr; }
  .photo figcaption { font-size: .7rem; }
  .cards, .quotes, .post-list, .dest-list, .steps { grid-template-columns: 1fr; }
  .card { padding: 1.7rem 1.4rem 1.8rem; }
  .quote { padding: 1.8rem 1.4rem; }
  .post-card { padding: 1.7rem 1.4rem; }
  .steps { gap: 2rem; }
  .creds li { padding: 1.8rem 1rem; }
  .creds strong { font-size: 1.5rem; }
  .quote p { font-size: 1.15rem; }
  .founder-note p { font-size: 1.4rem; }

  /* Home: the three clinicians become compact rows. The photo sits beside the name and
     role, and the short biography runs at the full measure underneath. */
  .people { gap: 0; border-top: 1px solid var(--rule); }
  .portrait { display: grid; grid-template-columns: 124px 1fr; grid-template-rows: auto 1fr; column-gap: 1.4rem; align-items: start; padding: 1.8rem 0; border-bottom: 1px solid var(--rule); }
  .portrait img { grid-column: 1; grid-row: 1 / span 2; width: 108px; margin: 8px 8px 1.3rem; outline-offset: 8px; }
  .portrait h3, .portrait .role { grid-column: 2; }
  .portrait h3 { font-size: 1.55rem; align-self: end; padding-top: 1.2rem; }
  .portrait .role { min-height: 0; margin: 0; }
  .portrait p:not(.role) { grid-column: 1 / -1; }

  /* About: the photo floats so the biography runs at the full measure below it. */
  .person { grid-template-columns: 110px 1fr; gap: 1.2rem; }
  .prose .person { display: block; padding: 2rem 0; }
  .prose .person::after { content: ""; display: block; clear: both; }
  .prose .person img { float: left; width: 104px; margin: 8px 1.4rem .8rem 8px; }
  .prose .person h3 { font-size: 1.5rem; padding-top: .35rem; }
  .prose .answer { font-size: 1.3rem; }
  .prose ul.cols { columns: 1; }

  .page-head .wrap { padding-bottom: 2.6rem; }
  .page-head .wrap::after { display: none; }
  .page-head h1 { font-size: clamp(2.2rem, 9.5vw, 2.7rem); }
  .crumbs { margin-bottom: 1.4rem; }
  .crumbs a { display: inline-block; padding: .6rem 0; }

  .price-table th:first-child, .price-table td:first-child { width: 58%; }
  .price-table td small { font-size: .8rem; }
  .filter { padding-inline: .9rem; }
  .filter::placeholder { font-size: .86rem; }

  .visit-info { padding: 1.7rem 1.4rem; }
  .visit-info h2 { font-size: 1.7rem; }
  .visit-info dd a { display: inline-block; padding: .3rem 0; }
  .map, .visit-media .map { height: 300px; min-height: 300px; }

  /* Comfortable tap targets for stacked links */
  .prose li > a:only-child { display: inline-block; padding: .35rem 0; }
  .side-facts a, .prose .note a { display: inline-block; padding: .3rem 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .foot-base { flex-direction: column; gap: .8rem; }
  .site-foot li { margin-bottom: 0; }
  .site-foot li a, .site-foot address a, .site-foot p a { display: inline-block; padding: .55rem 0; }
  .social a { margin-right: 1.6rem; }

  /* Fixed Call and Book bar. The footer, not the body, makes room for it, so the navy
     runs behind the bar and the last footer line is never covered. */
  .site-foot { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1.6fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--ink); padding: 8px calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); gap: 8px; }
  .mobile-bar a { text-align: center; padding: 1rem .5rem; font: 500 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); color: var(--ink); white-space: nowrap; }
  .mobile-bar a.primary { background: var(--ink); color: var(--paper); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  @page { margin: 18mm 16mm; }
  html { scroll-padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; padding: 0; }
  .skip, .nav-toggle, .nav, .cta-band, .mobile-bar, .side, .hero-art, .hero .btn-row, .map, .filter, .filter-status, .social, .foot-grid > div:last-child, .toc, .post-back, .crumbs, .btn { display: none !important; }
  .site-head { position: static; background: none; border-bottom: 1px solid #000; }
  .site-head .wrap { padding-block: 0 8pt; }
  .hero { height: auto; }
  .hero-copy { padding: 16pt 0; margin: 0; max-width: none; }
  .hero h1, .page-head h1 { font-size: 26pt; }
  .hero-foot { position: static; padding: 0; }
  .page-head { border-bottom: 1px solid #000; padding-top: 14pt; }
  .page-head .wrap { padding-bottom: 12pt; }
  .page-head .wrap::after { display: none; }
  .wrap, .site-head .wrap, .prose, .narrow { width: 100%; max-width: none; }
  .prose-wrap, .split, .visit, .photo-pair { display: block; padding-block: 12pt; }
  .section, .section.alt, .section.dark { padding-block: 14pt; background: none; border: 0; color: #000; }
  .section.dark h2, .section.dark h3, .section.dark strong, .section.dark a:not(.btn), .section.dark .price-mini span:last-child, .section.dark .eyebrow, .section.dark .photo figcaption { color: #000; }
  .eyebrow, .lede, .card p, .steps p, .portrait p, .person p, .quote footer, .price-table caption, .price-table td small, .photo figcaption, .creds li { color: #222; }
  h1, h2, h3, .creds strong { color: #000; break-after: avoid; }
  .card, .quote, .post-card, .visit-info, .side-card, .prose .note { background: none; }
  .photo img, .split img, .prose img, .portrait img, .person img { filter: none; max-height: 70mm; width: auto; max-width: 100%; }
  .photo, .quote, .card, .person, .portrait, .price-table tr, .faq details, .steps li { break-inside: avoid; }
  .faq summary::after { display: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .site-foot { background: none; color: #000; padding: 12pt 0 0; border-top: 1px solid #000; font-size: 9.5pt; }
  .site-foot a, .site-foot h3, .brand-foot, .brand-foot small { color: #000 !important; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: 14pt; }
  .foot-base { margin-top: 10pt; padding-block: 8pt; border-top-color: #999; }
}