/* M.O.B Clinic — components.css
   Every part of the site, taken from the approved specimen (explore/system.html, all twelve blocks approved 28 September 2026).
   Pages carry content only; the parts live here. Edit here, never in a page. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; } * { margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--plaster-100); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--emerald-800); outline-offset: 3px; box-shadow: 0 0 0 5px var(--plaster-50); }
.dark :focus-visible { outline-color: var(--gold-300); box-shadow: none; }
.wrap { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 30; background: var(--plaster-50); color: var(--emerald-800); padding: .7rem 1rem; border-radius: 3px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; font-variation-settings: "opsz" 96; letter-spacing: -.025em; color: var(--emerald-800); text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 5vw, 4.8rem); line-height: 1; }
h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.05; }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.15; }
h4 { font-size: 1.1rem; line-height: 1.2; }
h1 em, h2 em { font-style: normal; color: var(--gold-700); }
.eyebrow { font-family: var(--font-caps); font-size: .74rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-800); display: flex; align-items: center; gap: .9rem; }
.eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--gold-700); flex: 0 0 auto; }
.tag { font-family: var(--font-caps); font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-800); }
.lede { font-size: 1.12rem; font-weight: 600; line-height: 1.55; }   /* all sub text is semi-bold, for reading on the scene */
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
/* links: the same colour as the text around them; the underline is the only marker, and it turns brass on hover */
.link { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: currentColor; text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--gold-700); text-decoration-thickness: 2px; }
.dark .link:hover { text-decoration-color: var(--gold-300); }
p a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p a:not([class]):hover { text-decoration-color: var(--gold-700); text-decoration-thickness: 2px; }

/* ---------- the header: transparent, with pills; fades out once the footer reaches it ---------- */
.masthead { position: fixed; inset: 0 0 auto 0; z-index: 5; color: var(--emerald-800); transition: opacity .45s ease, visibility 0s linear 0s; }
.is-footer .masthead { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 88px; }
.pill { background: rgba(251,246,238,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.5); border-radius: 999px; box-shadow: 0 10px 24px -14px rgba(7,19,14,.45), inset 0 1px 0 rgba(255,255,255,.7); }
/* the wordmark, locked 28 Sept: the open stack. M.O.B in Bricolage Grotesque 800 with the two full stops in brass and smaller
   than the letters, a brass hairline, CLINIC small and wide beneath. Everything scales from the font-size on .wordmark. */
.wordmark { display: inline-grid; justify-items: center; gap: .2em; text-decoration: none; line-height: 1; font-size: 1.25rem; padding: .5rem .95rem .55rem; border-radius: 14px; color: inherit; }
.wordmark__name { font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 100; letter-spacing: -.03em; white-space: nowrap; }
.wordmark__name i { font-style: normal; color: var(--gold-500); font-size: .87em; margin: 0 .02em; }   /* the full stops at 87% of the letters (founder, 1 Oct) */
.wordmark__rule { height: max(1px, .045em); width: 100%; background: var(--gold-700); }
.wordmark__clinic { font-family: var(--font-body); font-weight: 700; font-size: .29em; letter-spacing: .56em; text-transform: uppercase; padding-left: .56em; color: var(--gold-800); white-space: nowrap; }
/* the header ink never changes: the pills keep it readable over the sky, the sea, the plaster and the sunset alike */
.nav { display: flex; gap: .5rem; align-items: center; font-weight: 500; font-size: .95rem; }
.nav a { text-decoration: none; padding: .55rem 1rem; }
.nav .btn { margin-left: .6rem; }
.nav [aria-current="page"] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-700); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.menu { font: inherit; font-weight: 600; font-size: .95rem; color: inherit; padding: .55rem 1rem; cursor: pointer; display: none; }
.btn__short { display: none; }
@media (max-width: 980px) { .nav .nav__link { display: none; } .menu { display: inline-block; } }
@media (max-width: 560px) { .masthead__inner { gap: .5rem; } .nav { gap: .4rem; } .nav .btn { margin-left: 0; } .btn__long { display: none; } .btn__short { display: inline; } .wordmark { padding: .5rem .8rem .45rem; } }
/* the phone menu: a full-screen sheet. A marble banner carries the gold wordmark and Close; the links sit on plaster in the
   display face with a brass hairline between them; Book is a full-width button; the contact lines close it.
   (Founder, 5 Oct: more premium, with the logo and the green marble.) */
.sheet { position: fixed; inset: 0; z-index: 6; background: var(--plaster-50); overflow: auto; display: grid; grid-template-rows: auto 1fr auto; }
.sheet__top { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 1rem; min-height: 9.5rem; padding: 1.6rem 1.5rem 1.7rem; background-color: var(--emerald-950); background-image: linear-gradient(rgba(7,19,14,.5), rgba(7,19,14,.5)), url("../img/marble-emerald.jpg"); background-size: cover; background-position: center; border-bottom: 1px solid var(--gold-700); }
.sheet__top .wordmark { font-size: 2rem; }
.sheet__close { font: inherit; font-weight: 600; font-size: .9rem; color: var(--cream); background: rgba(7,19,14,.4); border: 1px solid rgba(225,205,150,.55); border-radius: 999px; padding: .6rem 1.25rem; min-height: 44px; cursor: pointer; }
.sheet__close:hover { border-color: var(--gold-300); }
.sheet__nav { display: grid; align-content: start; padding: .8rem 1.5rem 0; }
.sheet__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; font-family: var(--font-display); font-weight: 700; font-variation-settings: "opsz" 96; font-size: 1.6rem; letter-spacing: -.02em; text-decoration: none; color: var(--emerald-800); border-bottom: 1px solid rgba(140,98,24,.24); }
.sheet__link::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: .35rem; border-top: 1.5px solid var(--gold-700); border-right: 1.5px solid var(--gold-700); transform: rotate(45deg); }
.sheet__link[aria-current="page"] { color: var(--gold-800); }
.sheet__link[aria-current="page"]::after { border: 0; border-radius: 50%; background: var(--gold-500); transform: none; }
.sheet__foot { padding: 1.6rem 1.5rem 2rem; }
.sheet__foot .btn { width: 100%; }
.sheet__meta { margin-top: 1.4rem; color: var(--ink-soft); font-weight: 600; font-size: .95rem; line-height: 1.7; }
.sheet__meta .tag { display: block; margin-bottom: .3rem; }
.sheet__meta a { text-decoration: none; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 600; font-size: .95rem; text-decoration: none; padding: .95rem 1.7rem; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; font-family: var(--font-body); min-height: 48px; transition: transform .25s cubic-bezier(.16,.84,.24,1), background-color .25s linear, border-color .25s linear; }
.btn:hover { transform: translate3d(0,-2px,0); }
.btn--emerald { background: var(--emerald-800); color: var(--plaster-50); }
.btn--emerald:hover { background: var(--emerald-700); }
.btn--line { border-color: rgba(16,41,31,.6); color: var(--emerald-800); background: rgba(251,246,238,.55); }
.btn--line:hover { border-color: var(--emerald-800); }
.btn--gold { background: var(--gold-500); color: var(--emerald-950); }
.btn--gold:hover { background: var(--gold-300); }
.btn--sm { padding: .7rem 1.25rem; font-size: .86rem; min-height: 40px; }
.btn[disabled] { background: var(--plaster-200); color: var(--ink-faint); border-color: transparent; cursor: not-allowed; transform: none; }
.btn--text { background: none; border: 0; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; padding: .5rem 0; }
.btn--text:hover { text-decoration-color: var(--gold-700); text-decoration-thickness: 2px; }

/* ---------- page shells ---------- */
.page { position: relative; z-index: 1; }
.page--quiet { padding: 8.5rem 0 6rem; }
.page--quiet .page__col { max-width: 40rem; }
.page--quiet h1 { margin: .9rem 0 1rem; font-size: clamp(2.4rem, 4vw, 3.8rem); }
.page--quiet .lede { max-width: 36rem; }
.page__col > h2 { margin: 2.6rem 0 .8rem; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.page__col > p + p { margin-top: .8rem; }
.cta { margin-top: 3.5rem; padding-top: 2.4rem; border-top: 1px solid rgba(140,98,24,.35); }
.cta h2 { margin: 0 0 .6rem; }
.cta .btns { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* ---------- blocks, lists, pills, the six icons ---------- */
.block { max-width: 32rem; }
.block > p { color: var(--ink); font-size: 1.12rem; font-weight: 600; line-height: 1.55; }
.list { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.list li { padding: .85rem 0; }   /* no rules between items: on the scene they read as a line across the picture */
.list li + li { margin-top: .35rem; }
.list h3 { font-size: 1.2rem; margin: .25rem 0; }
.list p { font-size: 1rem; font-weight: 600; }
.list .no { font-family: var(--font-caps); font-weight: 700; font-size: .76rem; letter-spacing: .22em; color: var(--gold-800); }
.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.pills .tag { background: rgba(251,246,238,.8); border: 1px solid rgba(140,98,24,.35); border-radius: 999px; padding: .45rem .8rem; font-size: .66rem; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.6rem; margin-top: 1.2rem; }
.item { display: flex; align-items: center; gap: .8rem; }
.item svg { width: 34px; height: 34px; flex: 0 0 34px; stroke: var(--gold-700); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.item span { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--emerald-800); }

/* ---------- notices ---------- */
.notice { display: grid; grid-template-columns: 3px 1fr; gap: 1rem; padding: 1rem 1.2rem 1rem 0; border-radius: 4px; }
.notice::before { content: ""; border-radius: 2px; }
.notice--info { background: var(--sea-100); } .notice--info::before { background: var(--sea-300); } .notice--info h4 { color: var(--sea-700); }
.notice--urgent { background: var(--plaster-50); } .notice--urgent::before { background: var(--clay-700); } .notice--urgent h4 { color: var(--clay-700); }
.notice p { font-size: .98rem; margin-top: .3rem; }
.notice a { color: inherit; font-weight: 600; }

/* ---------- the FAQ fold-out ---------- */
details { border-top: 1px solid rgba(140,98,24,.45); }
details:last-of-type { border-bottom: 1px solid rgba(140,98,24,.45); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-size: 1.1rem; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; color: var(--emerald-800); transition: transform .3s ease; }
details[open] summary::after { transform: rotate(45deg); }
details[open] { background: var(--plaster-50); margin: 0 -1rem; padding: 0 1rem; }
details p { padding: 0 0 1.1rem; max-width: 60ch; color: var(--ink); }

/* ---------- the fee table ---------- */
.fees { width: 100%; border-collapse: collapse; }
.fees th { font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: .6rem 0; border-bottom: 1px solid var(--gold-700); }
.fees td { padding: 1rem 0; border-bottom: 1px solid var(--plaster-300); vertical-align: top; }
.fees td.fee { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--emerald-800); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.fees td .small { display: block; }
.fees td:nth-child(2) { white-space: nowrap; padding-left: 1rem; padding-right: 1rem; }
@media (max-width: 640px) { .fees thead { display: none; } .fees tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--plaster-300); } .fees td { border: 0; padding: 0; } .fees td:nth-child(1) { grid-column: 1; grid-row: 1; } .fees td:nth-child(2) { grid-column: 1; grid-row: 2; padding: 0; font-size: .92rem; color: var(--ink-soft); } .fees td.fee { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }

/* ---------- form fields ---------- */
.field { display: grid; gap: .35rem; margin-bottom: 1.2rem; max-width: 30rem; }
.field label { font-weight: 500; }
.field .hint { font-size: .9rem; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--plaster-50); border: 1px solid var(--line-strong); border-radius: 3px; min-height: 48px; padding: .6rem .8rem; width: 100%; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--emerald-800); outline: 2px solid var(--emerald-800); outline-offset: 2px; }
.field--error input, .field--error textarea { border: 2px solid var(--clay-700); background: var(--clay-100); }
.field .error, .error { color: var(--clay-700); font-weight: 500; font-size: .95rem; }
.field input[disabled] { background: var(--plaster-200); color: var(--ink-faint); }
.summary-error { border-left: 3px solid var(--clay-700); padding: .6rem 1rem; background: var(--plaster-50); margin-bottom: 1.5rem; max-width: 30rem; }
.summary-error a { color: var(--clay-700); }
.summary-error ul { padding-left: 1.2rem; margin-top: .3rem; }

/* ---------- the question cards for Before you book ---------- */
fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; max-width: 34rem; min-width: 0; }
legend { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem); line-height: 1.35; margin-bottom: .8rem; padding: 0; }
.choice { display: flex; align-items: center; gap: .9rem; min-height: 56px; padding: .8rem 1rem; margin-bottom: .6rem; background: var(--plaster-50); border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; }
.choice:hover { border-color: var(--emerald-800); }
.choice input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid var(--line-strong); border-radius: 50%; margin: 0; display: grid; place-items: center; background: #fff; }
.choice input[type="checkbox"] { border-radius: 4px; }
.choice input:checked { border-color: var(--emerald-800); }
.choice input:checked::before { content: ""; width: 12px; height: 12px; background: var(--emerald-800); border-radius: inherit; }
.choice input:focus-visible { outline: 2px solid var(--emerald-800); outline-offset: 3px; }
.choice:has(input:checked) { border: 2px solid var(--emerald-800); padding: calc(.8rem - 1px) calc(1rem - 1px); }
fieldset.is-error .choice { border-color: var(--clay-700); }
/* the three agreements run to several lines: the words (and any link in them) flow as one block, the box sits level with the first line */
.agree .choice { align-items: flex-start; padding-top: 1rem; padding-bottom: 1rem; }
.agree .choice:has(input:checked) { padding-top: calc(1rem - 1px); padding-bottom: calc(1rem - 1px); }
.agree .choice input { margin-top: .15rem; }
.agree .choice span { flex: 1; min-width: 0; line-height: 1.5; }
.agree .choice a { white-space: nowrap; }
.agree legend { margin-bottom: 1rem; }
.stop { border-left: 3px solid var(--clay-700); background: var(--plaster-50); padding: .9rem 1.1rem; margin: .6rem 0 1.2rem; max-width: 34rem; }
.stop h4 { color: var(--emerald-800); margin-bottom: .3rem; }
.stop .btns { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.checks .lead { font-weight: 600; margin: 1.8rem 0 1.2rem; }
.ready { max-width: 34rem; margin: .5rem 0 2rem; }
.ready h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.ready ul { padding-left: 1.2rem; } .ready li { margin: .35rem 0; }
.next { max-width: 34rem; }
.next:focus, .summary-error:focus { outline: none; box-shadow: none; }   /* focus is moved here for screen readers; a ring on a block of text would only confuse */
.next h2 { margin-bottom: .8rem; }
.next .btn { margin: 1.2rem 0 .8rem; }

/* ---------- the marble page head, on the quiet pages (founder, 5 Oct: some of the green marble on the inner pages) ---------- */
.page--head { padding-top: 0; }
.tier-quiet .pill, .tier-silent .pill { background: rgba(251,246,238,.94); }   /* over the marble a see-through pill turns grey; on the quiet and legal pages it stays plaster */
.tier-quiet .masthead .btn--emerald, .tier-silent .masthead .btn--emerald { box-shadow: 0 0 0 1px rgba(225,205,150,.5); }   /* a brass edge, so the button keeps its shape over the marble */
.pagehead__no { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 800; font-size: clamp(5rem, 15vw, 9rem); line-height: .85; letter-spacing: -.04em; margin-bottom: 1.4rem; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-300); }
.legal h2 { font-size: clamp(1.4rem, 2vw, 1.7rem); margin: 2.4rem 0 .6rem; }
.legal .dashes { margin: .5rem 0 .2rem; }
.legal .dashes + p { margin-top: .8rem; }
.pagehead { color: var(--cream); padding: 10.5rem 0 3.4rem; background-color: var(--emerald-950); background-image: linear-gradient(rgba(7,19,14,.5), rgba(7,19,14,.5)), url("../img/marble-emerald.jpg"); background-size: cover; background-position: center; border-bottom: 1px solid var(--gold-700); }
.pagehead h1 { color: var(--cream); }
.pagehead h1 em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-300); }
.pagehead .eyebrow { color: var(--gold-300); } .pagehead .eyebrow::before { background: var(--gold-300); }
.pagehead .lede { color: rgba(244,236,216,.92); }
.pagehead .small { color: rgba(244,236,216,.7); margin-top: .8rem; max-width: 36rem; }
.pagehead + .wrap { padding-top: 3.4rem; }
.page--quiet .page__col--wide { max-width: 46rem; }
@media (max-width: 560px) { .pagehead { padding: 9.5rem 0 2.6rem; } }

/* ---------- bold sections for the quiet pages (founder, 5 Oct: Fees needed "more of a wow factor, bolder sections, a more
   premium finish"). Full-width slabs, fee plaques that straddle the marble head, a numbered trio, cards, and a gentle lift
   as each part comes into view. Built for the full width of a desktop screen, not a single narrow column. ---------- */
.pagehead h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.pagehead--tall { padding-bottom: 10.5rem; }
.slab { padding: 5.5rem 0; }
.slab h2 { margin: 1rem 0 0; }
.slab--tint { background: var(--plaster-200); border-top: 1px solid rgba(140,98,24,.3); }
.slab--dark { color: rgba(244,236,216,.88); background-color: var(--emerald-950); background-image: linear-gradient(rgba(7,19,14,.62), rgba(7,19,14,.62)), url("../img/marble-emerald.jpg"); background-size: cover; background-position: center 30%; border-top: 1px solid var(--gold-700); border-bottom: 1px solid var(--gold-700); }
.slab--dark h2, .slab--dark h3 { color: var(--cream); }
.slab--dark h2 em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-300); }
.slab--dark .eyebrow { color: var(--gold-300); } .slab--dark .eyebrow::before { background: var(--gold-300); }
.slab--center { text-align: center; }
.slab--center .eyebrow { justify-content: center; }
.slab--center .lede { margin: .9rem auto 0; max-width: 34rem; }
.slab--center .btns { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.9rem; }
/* the fee plaques */
.prices, .straddle { position: relative; margin-top: -7.5rem; }
.prices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
.prices__small { margin-top: 1.6rem; max-width: 46rem; }
.price, .plaque { display: flex; flex-direction: column; background: var(--plaster-50); border: 1px solid rgba(140,98,24,.3); border-top: 3px solid var(--gold-500); border-radius: 6px; padding: 2rem 1.9rem 2.1rem; box-shadow: 0 34px 60px -38px rgba(7,19,14,.65); }
/* a plaque that carries words instead of a figure (Contact) */
.plaque__main { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 800; font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.025em; color: var(--emerald-800); margin: 1.2rem 0 .8rem; }
.plaque__main--long { font-size: clamp(1.15rem, 1.45vw, 1.35rem); letter-spacing: -.01em; overflow-wrap: anywhere; }
.plaque__main a { text-decoration: none; }
.plaque__main a:hover { text-decoration: underline; text-decoration-color: var(--gold-700); text-underline-offset: 4px; }
.plaque__note { margin: 0 0 1.7rem; color: var(--ink-soft); font-size: .97rem; }
.plaque .btn { margin-top: auto; align-self: flex-start; }
.plaque > .plaque__note:last-child { margin-bottom: 0; }
.price__fig { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 800; font-size: clamp(4.4rem, 7.2vw, 6.4rem); line-height: .9; letter-spacing: -.045em; color: var(--emerald-800); margin: 1.2rem 0 1rem; font-variant-numeric: tabular-nums; }
.price__fig sup { font-size: .42em; vertical-align: top; position: relative; top: .16em; margin-right: .06em; color: var(--gold-700); letter-spacing: 0; }
.price__fig--word { font-size: clamp(2.3rem, 3.4vw, 3.1rem); line-height: 1; margin-top: 1.5rem; }
.price__len { font-weight: 600; color: var(--emerald-800); font-size: 1.1rem; }
.price__note { margin: .35rem 0 1.7rem; color: var(--ink-soft); font-size: .97rem; }
.price .btn { margin-top: auto; align-self: flex-start; }
.price--quiet { border-top-color: var(--clay-700); }
.price--quiet .price__note { margin-bottom: 0; }
.prices__after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem 2.2rem; align-items: start; margin-top: 2rem; }
@media (max-width: 960px) { .prices__grid { grid-template-columns: 1fr 1fr; } .prices__grid > :nth-child(3):last-child { grid-column: 1 / -1; } .prices__after { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .prices__grid { grid-template-columns: 1fr; } .prices, .straddle { margin-top: -6.5rem; } .slab { padding: 4rem 0; } }
.slab--dark p a:hover { text-decoration-color: var(--gold-300); }
.slab--dark .trio p a { color: var(--cream); }
/* a numbered trio */
.trio { list-style: none; padding: 0; margin: 2.8rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; }
.trio li { border-top: 1px solid rgba(225,205,150,.32); padding-top: 1.6rem; }
.trio b { display: block; font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 800; font-size: 3.4rem; line-height: .9; letter-spacing: -.04em; margin-bottom: 1.1rem; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-300); }
.trio h3 { margin-bottom: .5rem; }
.trio p { font-weight: 500; }
.slab__foot { margin-top: 3rem; max-width: 46rem; }
.slab__foot strong { color: var(--cream); }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; gap: 1.6rem; } }
/* cards, two across */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
.card { background: var(--plaster-50); border: 1px solid rgba(140,98,24,.28); border-radius: 6px; padding: 1.9rem 1.9rem 2rem; }
.card h3 { margin: .75rem 0 .6rem; font-size: clamp(1.35rem, 1.8vw, 1.65rem); }
.quad--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .quad--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .quad, .quad--three { grid-template-columns: 1fr; } }

/* ---------- the FAQ on a wide screen: a marble plaque listing the groups stays put on the left, the questions run beside it.
   The fold-outs are the specimen's, set bolder: display-face questions and a brass ring around the plus. ---------- */
.faq { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 4.5rem; align-items: start; }
.faq__nav { position: sticky; top: 8rem; display: grid; padding: 1.9rem 1.7rem 1.4rem; border-radius: 6px; color: var(--cream); background-color: var(--emerald-950); background-image: linear-gradient(rgba(7,19,14,.5), rgba(7,19,14,.5)), url("../img/marble-emerald.jpg"); background-size: cover; background-position: 30% 60%; box-shadow: inset 0 0 0 1px var(--gold-700), 0 34px 60px -38px rgba(7,19,14,.7); }
.faq__nav .tag { color: var(--gold-300); margin-bottom: 1rem; }
.faq__nav a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; padding: .8rem 0; text-decoration: none; color: var(--cream); font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; border-top: 1px solid rgba(225,205,150,.24); }
.faq__nav a b { font-family: var(--font-caps); font-weight: 700; font-size: .72rem; letter-spacing: .2em; color: var(--gold-300); }
.faq__nav a:hover { color: var(--gold-300); }
.faq__group { scroll-margin-top: 7.5rem; }
.faq__group + .faq__group { margin-top: 4.5rem; }
.faq__no { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 800; font-size: clamp(3rem, 4.6vw, 4rem); line-height: .85; letter-spacing: -.04em; color: var(--gold-700); }
.faq__group h2 { margin: .9rem 0 1.4rem; font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.faq summary { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.3rem); letter-spacing: -.01em; color: var(--emerald-800); padding: 1.3rem 0; }
.faq summary::after { flex: 0 0 2.3rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border: 1px solid rgba(140,98,24,.55); border-radius: 50%; font-size: 1.3rem; line-height: 1; color: var(--gold-800); transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.faq details[open] summary::after { background: var(--emerald-800); border-color: var(--emerald-800); color: var(--plaster-50); }
.faq details[open] { margin: 0 -1.5rem; padding: 0 1.5rem; border-radius: 6px; }
.faq details p { font-size: 1.05rem; padding-bottom: 1.2rem; }
.faq details p + p { margin-top: -.4rem; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 2.6rem; } .faq__nav { position: static; } .faq details[open] { margin: 0 -.8rem; padding: 0 .8rem; } }
/* the lift: site.js adds .lifts to the page and .in to each part as it comes into view; if site.js never runs, nothing is hidden */
.lifts .lift { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s var(--ease-drift); }
.lifts .lift.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lifts .lift { opacity: 1; transform: none; transition: none; } }

/* ---------- Before you book on a wide screen: the checks on the left, a marble plaque on the right that stays put and says
   what the first consultation costs and what this step involves. Under 1100 px the plaque is dropped (the head says it all). ---------- */
.book { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); gap: 4.5rem; align-items: start; }
.book .checks .lead { margin-top: 2.2rem; }
.book .next { margin-top: 2.6rem; }
.sideplaque { position: sticky; top: 8rem; justify-self: end; width: min(100%, 22rem); padding: 1.9rem 1.7rem 1.6rem; border-radius: 6px; color: var(--cream); background-color: var(--emerald-950); background-image: linear-gradient(rgba(7,19,14,.5), rgba(7,19,14,.5)), url("../img/marble-emerald.jpg"); background-size: cover; background-position: 60% 40%; box-shadow: inset 0 0 0 1px var(--gold-700), 0 34px 60px -38px rgba(7,19,14,.7); }
.sideplaque .tag { color: var(--gold-300); }
.sideplaque__fig { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 800; font-size: 4.6rem; line-height: .9; letter-spacing: -.045em; margin: 1.1rem 0 .9rem; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-300); }
.sideplaque__fig sup { font-size: .42em; vertical-align: top; position: relative; top: .16em; margin-right: .06em; letter-spacing: 0; }
.sideplaque > p { font-weight: 600; }
.sideplaque ol { list-style: none; padding: 0; margin: 1.5rem 0 1.1rem; border-top: 1px solid rgba(225,205,150,.24); }
.sideplaque li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; padding: .8rem 0; border-bottom: 1px solid rgba(225,205,150,.24); font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.sideplaque li b { font-family: var(--font-caps); font-weight: 700; font-size: .72rem; letter-spacing: .2em; color: var(--gold-300); }
.sideplaque .small a { color: var(--gold-300); }
@media (max-width: 1100px) { .book { grid-template-columns: 1fr; } .sideplaque { display: none; } }   /* below this the plaque would be squeezed thin beside the checks */

/* ---------- small parts for the quiet pages: a list with brass dashes, the contact details ---------- */
.dashes { list-style: none; padding: 0; margin: .6rem 0 0; }
.dashes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .9rem; padding: .4rem 0; }
.dashes li::before { content: ""; height: 1px; background: var(--gold-700); margin-top: .8em; }
.contact { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); margin: 0; border-top: 1px solid var(--gold-700); }
@media (max-width: 560px) { .contact { grid-template-columns: 1fr; } .contact dt { border-bottom: 0; padding-bottom: 0; } .contact dd { padding-top: .2rem; } }
.contact dt, .contact dd { margin: 0; padding: .95rem 0; border-bottom: 1px solid var(--plaster-300); }
.contact dt { font-family: var(--font-caps); font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-800); padding-top: 1.25rem; }
.contact dd { font-weight: 600; font-size: 1.08rem; color: var(--emerald-800); }
.contact dd a { text-decoration: none; } .contact dd a:hover { text-decoration: underline; text-decoration-color: var(--gold-700); text-underline-offset: 3px; }

/* ---------- the practitioners list: a square portrait beside each name (founder, 5 Oct: square, not arched). Until a real
   photograph goes in, the slot is a marble plaque with the monogram; an <img> placed inside .person__photo fills the square. ---------- */
/* each doctor is a card, three across on a wide screen: the square portrait on top with a brass rule under it, then the name,
   the title as the register shows it, a few words of their own, and the registration number at the foot */
.docs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
.doc { display: flex; flex-direction: column; overflow: hidden; background: var(--plaster-50); border: 1px solid rgba(140,98,24,.3); border-radius: 6px; box-shadow: 0 34px 60px -38px rgba(7,19,14,.65); }
.doc .person__photo { width: 100%; border-radius: 0; box-shadow: none; border-bottom: 3px solid var(--gold-500); background-size: 180% auto; }
.doc .person__photo::before { font-size: 4.4rem; }
.doc .person__photo span { font-size: .66rem; }
.doc__body { display: flex; flex-direction: column; flex: 1; padding: 1.7rem 1.8rem 1.8rem; }
.doc h2 { font-size: clamp(1.45rem, 1.9vw, 1.8rem); margin: 0 0 .35rem; }
.doc__body > p { font-weight: 500; }
.doc .person__reg { margin-top: auto; padding-top: 1.2rem; }
@media (max-width: 960px) { .docs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .docs { grid-template-columns: 1fr; } }
/* four doctors: four across on a wide screen, two by two below that, so the rows are always even (founder, 5 Oct) */
.docs--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.docs--four .doc__body { padding: 1.5rem 1.4rem 1.6rem; }
.docs--four .doc h2 { font-size: clamp(1.3rem, 1.5vw, 1.5rem); }
.docs--four .person__photo::before { font-size: 3.6rem; }
@media (max-width: 1100px) { .docs--four { grid-template-columns: 1fr 1fr; } .docs--four .doc__body { padding: 1.7rem 1.8rem 1.8rem; } .docs--four .doc h2 { font-size: clamp(1.45rem, 1.9vw, 1.8rem); } .docs--four .person__photo::before { font-size: 4.4rem; } }
@media (max-width: 600px) { .docs--four { grid-template-columns: 1fr; } }
.person__photo { position: relative; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 0 .8rem; text-align: center; background-color: var(--emerald-950); background-image: linear-gradient(rgba(7,19,14,.35), rgba(7,19,14,.35)), url("../img/marble-emerald.jpg"); background-size: 260% auto; background-position: var(--slab, 30% 40%); box-shadow: inset 0 0 0 1px var(--gold-700), 0 22px 34px -24px rgba(7,19,14,.75); }
.person__photo::before { content: "M."; font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 96; font-size: 2.6rem; line-height: 1; letter-spacing: -.03em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-500); }
.person__photo span { font-family: var(--font-caps); font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.person__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person__role { font-family: var(--font-caps); font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-800); margin-bottom: .7rem; }
.person__reg { margin-top: .7rem; font-size: .95rem; color: var(--ink-soft); }
.cta .lede { margin-top: .2rem; }

/* ---------- the footer: night, on the marble, filling the whole screen at the foot of every page ---------- */
.footer { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: space-between; gap: 3rem; color: rgba(244,236,216,.78); padding: 14vh 0 2.5rem; background-color: var(--emerald-950); background-image: linear-gradient(rgba(7,19,14,.6), rgba(7,19,14,.6)), url("../img/marble-emerald.jpg"); background-size: cover; background-position: center; }
/* the wordmark on any dark ground (the footer, the menu banner): the name in the gold gradient, the rule and CLINIC in pale brass */
.dark .wordmark { padding: 0; color: var(--plaster-50); }
.dark .wordmark__name { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-500); }
.dark .wordmark__rule { background: var(--gold-300); }
.dark .wordmark__clinic { color: var(--gold-300); }
.footer .wordmark { font-size: 2.2rem; }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2rem; align-items: start; }
.footer h4 { font-family: var(--font-caps); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; color: var(--gold-300); margin-bottom: .9rem; }
.footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin: .08rem 0; font-size: 1rem; } .footer li a { display: inline-block; padding: .32rem 0; text-decoration: none; color: var(--cream); }
.footer li:not(:has(a)) { padding: .32rem 0; }   /* same rhythm as before; the padding now belongs to the link, so a thumb has 38 px to land on instead of 19 (final pass, 5 Oct) */
.footer li a:hover { text-decoration: underline; text-decoration-color: var(--gold-300); text-underline-offset: 3px; }
.footer__legal { max-width: 40rem; font-size: .9rem; border-top: 1px solid rgba(225,205,150,.25); padding-top: 1.4rem; } .footer__legal strong { color: var(--cream); }
.footer__base { margin-top: 1.2rem; font-family: var(--font-caps); letter-spacing: .14em; font-size: .72rem; text-transform: uppercase; color: var(--gold-300); }
@media (max-width: 900px) { .footer__cols { grid-template-columns: 1fr 1fr; } .footer__cols > div:first-child { grid-column: 1 / -1; } }

/* ---------- the draft banner (stamped by the build while any error remains; never in a release) ---------- */
.draft { position: sticky; top: 0; z-index: 40; background: var(--clay-700); color: #fff; font-weight: 600; padding: .6rem 1rem; text-align: center; font-size: .9rem; }
.draft ~ .masthead { top: 2.6rem; }
.draft ~ .masthead .sheet__top { padding-top: 4.2rem; }
@media (max-width: 560px) { .draft ~ .masthead { top: 3.9rem; } .draft ~ .masthead .sheet__top { padding-top: 5.5rem; } }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, summary::after, .masthead { transition: none; } .btn:hover { transform: none; } }