/* heritage.css: the finishing layer (Loop 07). One file, loaded after clinical.css when present. Nothing here changes copy or layout order.
   1 motion foundation for the signature scenes (motion/hsig): timing, easing, keyframes, and the gate
   2 scene frames: hub hero (where the vector plate was) and the booking, contact and online heroes
   3 the doctor card with the clinic's own photograph
   4 heritage treatment for the five priority hubs (Men, Piles, Digestion, Sehat, Women): paper ground, brass thread, hand-ruled dividers
   5 the "earned, not bought" trust block (proposed copy, marked in the page)
   6 small coherence fixes found in the anti-slop pass */

/* ---------- 1 motion foundation ---------- */
:root { --hs-ease: cubic-bezier(.45, 0, .55, 1); --brass: #b0821f; --brass-soft: rgb(176 130 31 / .38); --brass-faint: rgb(176 130 31 / .16); }
.hsig, .hsig * { animation-play-state: paused; }
.hsig.is-live, .hsig.is-live * { animation-play-state: running; }
html.motion-off .hsig *, html.read .hsig * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hsig * { animation: none !important; } }
/* resting state for the one-time scenes when nothing moves */
@media (prefers-reduced-motion: reduce) { .hsig--piles .knot { opacity: 0; } .hsig--piles .easy { stroke-dashoffset: 0; } }
html.motion-off .hsig--piles .knot, html.read .hsig--piles .knot { opacity: 0; }
html.motion-off .hsig--piles .easy, html.read .hsig--piles .easy { stroke-dashoffset: 0; }

@keyframes hs-flicker { 0%, 30%, 100% { transform: none; } 6% { transform: scaleY(.86) skewX(-6deg); } 11% { transform: scaleY(1.08) skewX(4deg); } 16% { transform: scaleY(.95) skewX(-2deg); } 22% { transform: scaleY(1.02); } }
@keyframes hs-breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes hs-breathe-o { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hs-unknot { 0% { stroke-dashoffset: 0; opacity: 1; } 70% { opacity: .5; } 100% { stroke-dashoffset: -2400; opacity: 0; } }
@keyframes hs-draw { to { stroke-dashoffset: 0; } }
@keyframes hs-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hs-ripple { 0% { transform: scale(.35); opacity: .7; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes hs-turn { to { transform: rotate(360deg); } }
@keyframes hs-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes hs-drop { 0% { transform: scale(.15); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 40% { transform: translateY(0); } 58% { transform: translateY(232px) scaleY(1.15); opacity: 1; } 61%, 100% { transform: translateY(240px); opacity: 0; } }
@keyframes hs-warm { 0%, 55%, 100% { transform: scale(.85); opacity: .35; } 66% { transform: scale(1.12); opacity: .8; } }
@keyframes hs-steady { 0%, 100% { transform: none; } 58% { transform: none; } 61% { transform: rotate(.5deg); } 64% { transform: rotate(-.3deg); } 68% { transform: none; } }
@keyframes hs-strand { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
@keyframes hs-rise { 0%, 100% { transform: scaleY(.35); opacity: 0; } 30% { opacity: .9; } 60% { transform: scaleY(1); opacity: .9; } 85% { opacity: 0; } }
@keyframes hs-bend { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(2.2deg); } 55% { transform: rotate(-.7deg); } 70% { transform: rotate(.3deg); } }
@keyframes hs-breath { 0%, 100% { transform: scale(.82); opacity: .25; } 40% { transform: scale(1.08); opacity: .62; } }
@keyframes hs-quiet { 0%, 100% { opacity: .85; } 50% { opacity: .3; } }
@keyframes hs-bead { 0%, 32%, 100% { opacity: 0; } 8%, 20% { opacity: 1; } }
@keyframes hs-travel { to { stroke-dashoffset: -914; } }
@keyframes hs-lamp { 0%, 62%, 100% { transform: scale(.5); opacity: .3; } 10%, 40% { transform: scale(1); opacity: 1; } }
@keyframes hs-lampglow { 0%, 62%, 100% { opacity: .1; } 10%, 40% { opacity: .85; } }

/* ---------- 2 scene frames ---------- */
.plate--hsig { margin: .3rem 0 1rem; height: 9.5rem; border-radius: 18px; overflow: hidden; -webkit-mask: none; mask: none; isolation: isolate;
  box-shadow: 0 0 0 1px var(--brass-soft), 0 22px 40px -32px rgb(40 30 15 / .55); }
.plate--hsig .hsig__svg, .hsig--page .hsig__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plate--hsig::after, .hsig--page::after { content: ""; position: absolute; inset: 6px; border-radius: 13px; border: 1px solid rgb(255 250 235 / .5); pointer-events: none; }
@media (min-width: 64rem) {
  .hero .plate--hsig { top: 2rem; right: max(1.5rem, calc((100vw - var(--w-page, 76rem)) / 2 + 1.5rem)); width: min(36vw, 34rem); height: auto; aspect-ratio: 5 / 4;
    border-radius: 30px; -webkit-mask: none; mask: none; }
  .hero .plate--hsig::after { inset: 10px; border-radius: 22px; }
}
.bhero__art { margin: 1.1rem 0 0; }
.hsig--page { position: relative; height: 10.5rem; border-radius: 18px; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--brass-soft), 0 22px 40px -32px rgb(40 30 15 / .55); }
@media (min-width: 64rem) {
  .bhero:has(.bhero__art) { display: grid; grid-template-columns: minmax(0, 1fr) min(30vw, 26rem); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .bhero:has(.bhero__art) > :not(.bhero__art) { grid-column: 1; }
  .bhero__art { grid-column: 2; grid-row: 1 / span 6; margin: .4rem 0 0; }
  .hsig--page { height: auto; aspect-ratio: 5 / 4; border-radius: 26px; }
  .hsig--page::after { inset: 9px; border-radius: 18px; }
}

/* ---------- 3 the doctor card with the clinic's own photograph ---------- */
.slot--photo { padding: 0; overflow: hidden; background: none; border-radius: 14px;
  box-shadow: 0 0 0 1px var(--brass-soft), 0 0 0 5px rgb(255 250 235 / .6), 0 0 0 6px var(--brass-faint), 0 22px 36px -24px rgb(40 30 15 / .55); }
.slot--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.doctor:has(.slot--photo) .doctor__role { font-weight: 600; }

/* ---------- 4 heritage treatment: Men, Piles, Digestion, Sehat, Women ---------- */
/* the brass thread under the H1 gains a small knot, the hub's one ornament */
.page--hub:has(.hsig--men, .hsig--piles, .hsig--sehat, .hsig--women, #dg) .thread {
  position: relative; background: linear-gradient(90deg, var(--brass), rgb(176 130 31 / .15)); height: 2px; }
.page--hub:has(.hsig--men, .hsig--piles, .hsig--sehat, .hsig--women, #dg) .thread::after {
  content: ""; position: absolute; left: -2px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f6e2a4, var(--brass) 60%, #7a5418); box-shadow: 0 0 0 3px rgb(176 130 31 / .14); }
/* hand-ruled dividers: a double hairline with a centred brass lozenge between sections */
.page--hub:has(.hsig--men, .hsig--piles, .hsig--sehat, .hsig--women, #dg) main > .sec + .sec::before,
.page--hub:has(.hsig--men, .hsig--piles, .hsig--sehat, .hsig--women, #dg) .sec + .sec::before {
  content: ""; display: block; height: 9px; margin: 0 auto 2.2rem; max-width: 18rem;
  background:
    linear-gradient(var(--brass-soft), var(--brass-soft)) left 50% top 2px / calc(50% - 14px) 1px no-repeat,
    linear-gradient(var(--brass-soft), var(--brass-soft)) right 50% top 2px / calc(50% - 14px) 1px no-repeat,
    linear-gradient(var(--brass-faint), var(--brass-faint)) left 50% top 6px / calc(50% - 14px) 1px no-repeat,
    linear-gradient(var(--brass-faint), var(--brass-faint)) right 50% top 6px / calc(50% - 14px) 1px no-repeat,
    conic-gradient(from 45deg at 50% 50%, var(--brass) 0 25%, transparent 0 50%, var(--brass) 0 75%, transparent 0) center / 8px 8px no-repeat;
  background-position: left top 2px, right top 2px, left top 6px, right top 6px, center; }
/* concern cards: a quiet brass hairline instead of a second shadow; the arrow moves, the card does not jump */
.page--hub:has(.hsig--men, .hsig--piles, .hsig--sehat, .hsig--women, #dg) li.route { box-shadow: inset 0 0 0 1px rgb(176 130 31 / .22); transition: box-shadow .35s var(--hs-ease); }
.page--hub:has(.hsig--men, .hsig--piles, .hsig--sehat, .hsig--women, #dg) li.route:hover { box-shadow: inset 0 0 0 1px rgb(176 130 31 / .6); }
.page--hub li.route .route__go { transition: transform .35s var(--hs-ease); }
.page--hub li.route:hover .route__go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .page--hub li.route .route__go { transition: none; } }

/* doctor strip (BOOK, ONLINE, CONTACT) and the DOC hero portrait */
.hl-doc { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 .4rem; padding: .7rem 1rem .7rem .7rem; max-width: 30rem; border-radius: 18px;
  background: rgb(255 252 244 / .7); box-shadow: inset 0 0 0 1px var(--brass-soft); }
:root[data-theme="dark"] .hl-doc { background: rgb(40 34 24 / .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl-doc { background: rgb(40 34 24 / .5); } }   /* system dark too (was 1.1–1.8:1) */
.hl-doc img { flex: none; width: 4.4rem; height: 5.5rem; object-fit: cover; object-position: 50% 25%; border-radius: 12px; box-shadow: 0 0 0 1px var(--brass-soft), 0 10px 22px -16px rgb(40 30 15 / .6); }
.hl-doc p { margin: 0; } .hl-doc__k { font: 700 .7rem/1.3 var(--f-ui, system-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.hl-doc__n { font: 500 1.35rem/1.2 var(--f-display, Georgia); color: var(--heading, inherit); } .hl-doc__l { margin-top: .2rem !important; font: 600 .9rem/1.4 var(--f-ui, system-ui); }
/* narrow phones: the page's opening answer must stay on the first screen (glass suite check), so the decorative page scene steps aside
   and the doctor strip is compact. Patient pathway first; the scene returns from 600px up. */
@media (max-width: 37.49rem) {
  .bhero__art:has(.hsig--page) { display: none; }
  .hl-doc { gap: .75rem; margin: .8rem 0 .1rem; padding: .45rem .8rem .45rem .45rem; border-radius: 14px; }
  .hl-doc img { width: 3rem; height: 3.75rem; border-radius: 9px; }
  .hl-doc__k { font-size: .7rem; } .hl-doc__n { font-size: 1.12rem; } .hl-doc__l { font-size: .82rem; }
}
/* desktop: a portrait large enough to recognise a face before the form (research matrix H-T3, about 150 px) */
@media (min-width: 64rem) {
  .bhero .hl-doc { margin-top: 1.6rem; gap: 1.25rem; padding: .8rem 1.4rem .8rem .8rem; }
  .bhero .hl-doc img { width: 7.5rem; height: 9.375rem; border-radius: 14px; }
  .bhero .hl-doc__n { font-size: 1.6rem; }
}
.hl-portrait { margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px var(--brass-soft), 0 0 0 7px rgb(255 250 235 / .6), 0 0 0 8px var(--brass-faint), 0 36px 60px -40px rgb(40 30 15 / .65); }
.hl-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 63.99rem) { .hl-portrait { max-width: 20rem; margin: 1.2rem auto 0; } }

/* ---------- 5 earned, not bought (proposed copy) ---------- */
.hl-trust { position: relative; margin: 2.5rem 0; padding: 1.6rem 1.4rem 1.4rem; border-radius: 22px; max-width: var(--w-read, 44rem);
  background: linear-gradient(180deg, rgb(255 250 238 / .85), rgb(250 243 226 / .7)); box-shadow: inset 0 0 0 1px var(--brass-soft), 0 28px 50px -40px rgb(40 30 15 / .6); color: var(--ink, #1d2a22); }
:root[data-theme="dark"] .hl-trust { background: linear-gradient(180deg, rgb(40 34 24 / .7), rgb(28 24 18 / .7)); color: var(--ink, #ece6d8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl-trust { background: linear-gradient(180deg, rgb(40 34 24 / .7), rgb(28 24 18 / .7)); color: var(--ink, #ece6d8); } }
.hl-trust__eyebrow { margin: 0 0 .5rem; padding-right: 3.6rem; font: 700 .72rem/1.3 var(--f-ui, system-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.hl-trust h2 { margin: 0 0 .7rem; padding-right: 3.6rem; font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.15 var(--f-display, Georgia); color: var(--heading, inherit); }
.hl-trust p { margin: 0 0 .8rem; font: 400 1.0625rem/1.6 var(--f-read, Georgia); }
.hl-trust ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .55rem; }
/* display:block, not list-item: the body list's dash marker (.flow ul:not(.routes) > li::marker) would double the brass lozenge */
.hl-trust li { display: block; position: relative; padding-left: 1.4rem; font: 400 1rem/1.5 var(--f-read, Georgia); }
.hl-trust li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--brass); }
.hl-trust__seal { position: absolute; right: 1.2rem; top: 1.2rem; width: 3.2rem; height: 3.2rem; opacity: .9; }
.hl-trust__note { display: inline-block; margin-top: 1rem; padding: .1rem .6rem; border-radius: 999px; font: 600 .72rem/1.6 var(--f-ui, system-ui);
  color: var(--note-ink, #6b4a10); background: var(--note-bg, #fbefd4); border: 1px dashed var(--note-rule, #c9a24a); }

/* ---------- 6 coherence fixes from the anti-slop pass ---------- */
/* one radius family for cards on the glass pages: 14 (small), 18 (card), 26-30 (hero frames) */
.page--hub .curio, .page--hub .fee, .page--book .offer { border-radius: 18px; }
/* heading rhythm: H2s in hub bodies sit on the same baseline gap */
.page--hub .sec > h2 { margin-top: 0; letter-spacing: -.005em; }

/* ---------- 7 green glass hero: every condition page (.chero) and the eight hubs ----------
   From the live site's hub hero (owner, 8 Nov: "replicate the green hero, brighter in day, darker in night, glassy, white lettered").
   The band runs edge to edge with border-image outset (paints outside the box without creating sideways scroll); the solid
   background-color is what contrast checks read. Copy, order and the urgent line are untouched. */
.chero, .page--hub .hero {
  --gh-1: #2B7A5B; --gh-2: #22654B; --gh-3: #1B533E; --gh-glow: rgb(178 232 198 / .34);
  --gh-ink: #FBF8F0; --gh-ink-2: rgb(251 248 240 / .88); --gh-gold: #F3DFA6; --gh-safety-ink: #261F19;
  --ink: var(--gh-ink); --ink-2: var(--gh-ink-2); --ink-3: rgb(251 248 240 / .78); --heading: var(--gh-ink);
  --gold-ink: var(--gh-gold); --accent: var(--gh-gold); --focus: #FBF3DC; --focus-halo: rgb(243 223 166 / .45);
  position: relative; isolation: isolate; color: var(--gh-ink); background-color: var(--gh-2);
  border-image: linear-gradient(180deg, var(--gh-1), var(--gh-2) 55%, var(--gh-3)) fill 0 / 0 / 7rem 100vmax .6rem; }
/* desktop has room for a deeper band; on a phone the band adds no height, so the urgent sentence stays where it was */
@media (min-width: 64rem) { .chero, .page--hub .hero { padding-bottom: 1.8rem; } }
:root[data-theme="dark"] :is(.chero, .page--hub .hero) {
  --gh-1: #143A2C; --gh-2: #0F2C22; --gh-3: #0A2019; --gh-glow: rgb(120 196 150 / .14); --gh-safety-ink: #F6F0E4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.chero, .page--hub .hero) {
  --gh-1: #143A2C; --gh-2: #0F2C22; --gh-3: #0A2019; --gh-glow: rgb(120 196 150 / .14); --gh-safety-ink: #F6F0E4; } }
/* light from the upper right, and the orbit of the live hero, held still: no motion before the clinical information, and nothing runs off screen */
.chero::before, .page--hub .hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -7rem; right: -10vw; width: 70vw; height: calc(100% + 7rem);
  max-width: 60rem; max-height: 44rem; background: radial-gradient(closest-side, var(--gh-glow), transparent); }
.chero::after, .page--hub .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -3.5rem; right: -3rem; width: 15rem; aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Ccircle cx='200' cy='200' r='190' stroke='%23F1D99A' stroke-opacity='.55' stroke-width='3' stroke-dasharray='2 13' stroke-linecap='round'/%3E%3Ccircle cx='200' cy='200' r='150' stroke='%23FBF8F0' stroke-opacity='.22' stroke-width='1.6'/%3E%3Ccircle cx='200' cy='200' r='96' stroke='%23FBF8F0' stroke-opacity='.18' stroke-width='1.2' stroke-dasharray='1.5 9'/%3E%3Ccircle cx='59' cy='94' r='7' fill='%23A8E0BF' fill-opacity='.75'/%3E%3Ccircle cx='334' cy='66' r='6' fill='%23F1D99A' fill-opacity='.8'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .5; }
@media (min-width: 64rem) { .chero::after, .page--hub .hero::after { width: 27rem; top: -4rem; right: 1rem; opacity: .7; } }
/* white lettering */
:is(.chero, .page--hub .hero) h1, :is(.chero, .page--hub .hero) h2 { color: var(--gh-ink); text-shadow: 0 1px 24px rgb(0 0 0 / .18); }
:is(.chero, .page--hub .hero) p { color: var(--gh-ink-2); }
:is(.chero, .page--hub .hero) .crumbs, :is(.chero, .page--hub .hero) .crumbs a, :is(.chero, .page--hub .hero) .crumbs li { color: var(--gh-ink-2); }
:is(.chero, .page--hub .hero) .crumbs [aria-current] { color: var(--gh-ink); }
:is(.chero, .page--hub .hero) p a, :is(.chero, .page--hub .hero) sup.cite a { color: var(--gh-gold); }
:is(.chero, .page--hub .hero) .thread { background: linear-gradient(90deg, var(--gh-gold), rgb(243 223 166 / .1)); }
/* glass: chips, the art frames, the condition line */
:is(.chero, .page--hub .hero) .chips a { background-color: rgb(255 255 255 / .1); color: var(--gh-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28), 0 8px 20px -14px rgb(0 0 0 / .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
:is(.chero, .page--hub .hero) .chips a:hover { background-color: rgb(255 255 255 / .18); color: var(--gh-ink); box-shadow: inset 0 0 0 1.5px var(--gh-gold); }
:is(.chero, .page--hub .hero) .chips__h a { color: var(--gh-ink); }
.chero .cplate__art { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), 0 0 0 6px rgb(255 255 255 / .05), 0 30px 60px -30px rgb(0 0 0 / .55); }
.chero .cplate__line { color: var(--gh-ink-2); }
@media (min-width: 64rem) { .chero .cplate__line { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
.page--hub .hero .plate--hsig { box-shadow: 0 0 0 1px rgb(243 223 166 / .45), 0 0 0 7px rgb(255 255 255 / .06), 0 40px 70px -40px rgb(0 0 0 / .6); }
/* the urgent line keeps its own light (day) or deep (night) box and its dark text */
:is(.chero, .page--hub .hero) .safety a, :is(.chero, .page--hub .hero) .safety sup.cite a { color: var(--alert); }
:is(.chero, .page--hub .hero) .safety { --ink: var(--gh-safety-ink); box-shadow: inset 3px 0 0 var(--alert-rule), 0 12px 30px -20px rgb(0 0 0 / .5); }
/* the glow and the orbit reach past the content column: clip sideways (overflow-x: clip makes no scroll container, so sticky parts keep working) */
.page--condition, .page--hub { overflow-x: clip; }

/* review-marker chips inside the green hero (private preview only): the theme's own dark text by day and light text by night, so they stay readable on their chip */
:is(.chero, .page--hub .hero) .rv { color: var(--gh-safety-ink); }

/* ---------- 8 a hue per care area (owner, 8 Nov: "pink/maroon for women, blue for men, green for digestion"): the same glass hero,
   tinted per hub, brighter by day and deeper by night. White lettering stays at or above 4.5:1 on the lightest stop. ---------- */
.hub--mens      { --hub-1: #2F5D8C; --hub-2: #264E78; --hub-3: #1D3E61; --hub-n1: #172B44; --hub-n2: #122339; --hub-n3: #0C192B; --hub-glow: rgb(170 205 245 / .08); --hub-tint: 47 93 140; }
.hub--piles     { --hub-1: #7B3A57; --hub-2: #6A3149; --hub-3: #57283C; --hub-n1: #3C1A29; --hub-n2: #301521; --hub-n3: #241018; --hub-glow: rgb(240 190 214 / .08); --hub-tint: 123 58 87; }
.hub--digestion { --hub-1: #246B50; --hub-2: #1F5E46; --hub-3: #1A503C; --hub-n1: #143A2C; --hub-n2: #0F2C22; --hub-n3: #0A2019; --hub-glow: rgb(178 232 198 / .08); --hub-tint: 43 122 91; }
.hub--women     { --hub-1: #8E3A5A; --hub-2: #863553; --hub-3: #6F2B44; --hub-n1: #44192C; --hub-n2: #371424; --hub-n3: #2A0F1B; --hub-glow: rgb(255 196 216 / .08); --hub-tint: 155 64 98; }
.hub--sehat     { --hub-1: #6E4E16; --hub-2: #684914; --hub-3: #553B10; --hub-n1: #3A2A0E; --hub-n2: #2E210B; --hub-n3: #221808; --hub-glow: rgb(250 222 156 / .08); --hub-tint: 122 87 25; }
.hub--skin      { --hub-1: #2E5F54; --hub-2: #2B594F; --hub-3: #234A41; --hub-n1: #17302A; --hub-n2: #122621; --hub-n3: #0D1C18; --hub-glow: rgb(184 228 212 / .08); --hub-tint: 51 105 93; }
.hub--bones     { --hub-1: #744A2E; --hub-2: #6A432A; --hub-3: #573722; --hub-n1: #3A2516; --hub-n2: #2E1D11; --hub-n3: #22150C; --hub-glow: rgb(245 206 172 / .08); --hub-tint: 124 79 49; }
.hub--stress    { --hub-1: #4A5490; --hub-2: #3E477C; --hub-3: #333A67; --hub-n1: #1C2040; --hub-n2: #161A34; --hub-n3: #101328; --hub-glow: rgb(192 198 250 / .08); --hub-tint: 74 84 144; }
:is(.chero, .page--hub .hero)[class*="hub--"] { --gh-1: var(--hub-1); --gh-2: var(--hub-2); --gh-3: var(--hub-3); --gh-glow: var(--hub-glow);
  /* by day the lettering is full strength and links are ivory, not pale gold: the measured worst case (text crossing the glow) stays at or above 4.9:1 */
  --gh-ink-2: rgb(251 248 240 / .96); --gold-ink: var(--gh-ink); --accent: var(--gh-ink); }
:is(.chero, .page--hub .hero)[class*="hub--"] :is(p a, sup.cite a) { color: var(--gh-ink); text-decoration-color: rgb(251 248 240 / .6); }
:is(.chero, .page--hub .hero)[class*="hub--"] .chips a { background-color: rgb(0 0 0 / .16); }
:root[data-theme="dark"] :is(.chero, .page--hub .hero)[class*="hub--"] { --gold-ink: var(--gh-gold); --accent: var(--gh-gold); }
:root[data-theme="dark"] :is(.chero, .page--hub .hero)[class*="hub--"] :is(p a, sup.cite a) { color: var(--gh-gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.chero, .page--hub .hero)[class*="hub--"] { --gold-ink: var(--gh-gold); --accent: var(--gh-gold); }
  :root:not([data-theme="light"]) :is(.chero, .page--hub .hero)[class*="hub--"] :is(p a, sup.cite a) { color: var(--gh-gold); } }
:root[data-theme="dark"] :is(.chero, .page--hub .hero)[class*="hub--"] { --gh-1: var(--hub-n1); --gh-2: var(--hub-n2); --gh-3: var(--hub-n3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.chero, .page--hub .hero)[class*="hub--"] { --gh-1: var(--hub-n1); --gh-2: var(--hub-n2); --gh-3: var(--hub-n3); } }

/* ---------- 9 the interlude: the picture met on scrolling. Full-bleed on a phone, fading into the page at both edges so it sits in the
   background rather than on it; a framed wide band on desktop. Tinted lightly with the care area's hue. One caption line, in the
   reading face. Below the first section only, so the urgent line and the short answer never move. Hidden in reading mode and print. ---------- */
.interlude { position: relative; isolation: isolate; margin: 2.4rem calc(50% - 50vw) 2.6rem; }
.interlude__frame { position: relative; overflow: hidden; background: var(--bg);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 13%, #000 66%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 13%, #000 66%, transparent 100%); }
.interlude__frame picture { display: contents; }
.interlude__frame img { display: block; width: 100%; height: auto; max-height: 80svh; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }   /* a phone on its side: never taller than the screen */
.interlude__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgb(var(--hub-tint, 43 122 91) / .08), rgb(var(--hub-tint, 43 122 91) / .5)); mix-blend-mode: color; opacity: .55; }
.interlude__cap { position: relative; z-index: 1; margin: -1.4rem auto 0; padding: 0 var(--gut); max-width: calc(var(--w-read) + 2 * var(--gut));
  font: italic 400 clamp(1.3rem, 5vw, 1.8rem)/1.3 var(--f-read); letter-spacing: -.005em; color: var(--heading); text-wrap: balance; }
.interlude__rule { display: block; width: 2.6rem; height: 2px; margin: 0 0 .65rem; border-radius: 2px; background: rgb(var(--hub-tint, 43 122 91)); }
:root[data-theme="dark"] .interlude__frame::after { opacity: .7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .interlude__frame::after { opacity: .7; } }
:root[data-theme="dark"] .interlude__rule { background: rgb(var(--hub-tint) / 1); filter: brightness(1.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .interlude__rule { filter: brightness(1.7); } }
@media (min-width: 64rem) {
  .interlude { margin: 3rem 0; }
  .interlude--phone { display: none; }
  .interlude__frame { aspect-ratio: 21 / 9; border-radius: 30px; box-shadow: 0 40px 80px -50px rgb(var(--shadow-rgb) / .55);
    -webkit-mask: radial-gradient(130% 120% at 50% 45%, #000 60%, transparent 100%); mask: radial-gradient(130% 120% at 50% 45%, #000 60%, transparent 100%); }
  .interlude__frame img { height: 100%; }
  .interlude__cap { margin: 1rem 0 0; padding: 0; max-width: 40rem; font-size: 1.65rem; }
}
/* the reveal: the picture settles and the caption rises as it scrolls in; never when motion is off or reduced, never without script */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-off) .interlude[data-reveal] img { transform: scale(1.07); filter: saturate(.8) brightness(.96); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), filter 1.4s ease; }
  html.js:not(.motion-off) .interlude[data-reveal] .interlude__cap { opacity: 0; transform: translateY(12px); transition: opacity .9s ease .25s, transform .9s cubic-bezier(.2, .7, .2, 1) .25s; }
  html.js:not(.motion-off) .interlude[data-reveal].is-in img { transform: none; filter: none; }
  html.js:not(.motion-off) .interlude[data-reveal].is-in .interlude__cap { opacity: 1; transform: none; }
}
html.read .interlude { display: none !important; }
@media print { .interlude { display: none !important; } }
/* the route button inside a hero: its paper fill made the ivory hero lettering unreadable (1.96:1 on the rose hub). A dark glass fill instead. */
:is(.chero, .page--hub .hero) .btn--route { background: rgb(0 0 0 / .2); color: var(--gh-ink); border-color: rgb(255 255 255 / .38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:is(.chero, .page--hub .hero) .btn--route:hover { color: var(--gh-ink); background: rgb(0 0 0 / .28); border-color: var(--gh-gold); }
:is(.chero, .page--hub .hero) .btn--route .i { color: var(--gh-ink); }
/* the urgent line keeps its own box and link colour inside every hub hue (the ivory hero links must not reach it) */
:is(.chero, .page--hub .hero)[class*="hub--"] .safety :is(a, sup.cite a) { color: var(--alert); }
/* light surfaces inside a glass hero take the hero's light-box ink (dark by day, ivory by night), never the hero's ivory lettering:
   the doctor card on the /go/ pages (1.01:1 by day) and the digestion hub's open detail panel (1.01:1 by day) */
:is(.chero, .page--hub .hero) :is(.doctor, .dg-body, .factline, .answer, .dg-play) { --ink: var(--gh-safety-ink); --ink-2: var(--gh-safety-ink); --ink-3: var(--gh-safety-ink);
  --heading: var(--gh-safety-ink); --gold-ink: var(--gh-safety-ink); color: var(--gh-safety-ink); }
:is(.chero, .page--hub .hero) :is(.doctor, .dg-body, .factline, .answer, .dg-play) :is(p, li, b, strong, span:not(.rv), h2, h3, .eyebrow) { color: var(--gh-safety-ink); }
/* links on those light surfaces: dark and underlined (they must beat the hero's own link colours, hence the weight) */
:is(.chero, .page--hub .hero) :is(.doctor, .dg-body, .factline, .answer) a:not(.btn) { color: var(--gh-safety-ink) !important; text-decoration: underline; text-decoration-color: currentColor; }
/* the primary button in a hero keeps its own pairing (the hero's link colour gave pale gold on the pale-gold button by night: 1.06:1) */
:is(.chero, .page--hub .hero) :is(p, div, span) a.btn.btn--primary { color: var(--on-green); }
/* "You will speak with" label: 10–11 px uppercase needs 4.5:1; brass gave 3.05:1 */
.hl-doc .hl-doc__k { color: var(--ink-2); }

/* the two service pages that belong to a care area (sexologist: men; piles specialist: piles) wear its hue in the page light and accents;
   their light header stays light, so no lettering changes */
.page--service[class*="hub--"] { --tint: var(--hub-tint); }
/* the primary button keeps its own text colour in every hero and hue, day and night (it must win over every hero link rule) */
:is(.chero, .page--hub .hero) a.btn.btn--primary { color: var(--on-green) !important; }

/* ---------- 10 service and branch heroes (owner, 8 Nov 2026; supervisor spec SERVICE-BRANCH-SEO-LINKS-HERO-SPEC.md). The same glass hero as
   the hubs: the sexologist page in the Men's blue, the piles page in the Piles mulberry, the branches on the brand green. Frozen H1 and text
   unchanged; the components come from integration/service_branch.py. No picture of a branch until a real one is supplied. ---------- */
.page--service:has(.chero) { overflow-x: clip; }   /* the hero glow and orbit reach past the column, as on the hubs */
.chero.svh, .chero.brh { grid-template-columns: minmax(0, 1fr); align-items: start; padding-left: var(--gut); padding-right: var(--gut); padding-bottom: 1.6rem; column-gap: 2.5rem; }
.chero.svh > :not(.svh__art):not(dialog), .chero.brh > :not(.brh__map) { grid-column: 1; }
.svh__art { display: none; margin: 0; }
.brh__map { display: none; }
@media (min-width: 48rem) {
  .chero.svh { grid-template-columns: minmax(0, 1fr) 16rem; }
  .svh__art { display: block; grid-column: 2; grid-row: 1 / span 5; align-self: center; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
    box-shadow: 0 0 0 1px rgb(243 223 166 / .45), 0 0 0 7px rgb(255 255 255 / .06), 0 40px 70px -40px rgb(0 0 0 / .6); }
  .svh__art img { width: 100%; height: 100%; object-fit: cover; }
  .chero.brh { grid-template-columns: minmax(0, 1fr) 13rem; }
  .brh__map { display: block; grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; height: auto; color: var(--gh-ink); opacity: .9; }
}
@media (min-width: 64rem) { .chero.svh { grid-template-columns: minmax(0, 1fr) 20rem; } .chero.brh { grid-template-columns: minmax(0, 1fr) 16rem; } }
.svh__lead { margin: .8rem 0 0 !important; font: italic 400 1.2rem/1.45 var(--f-read) !important; color: var(--gh-ink) !important; max-width: 34rem; }
.svh__facts { margin: .7rem 0 0 !important; }
.svh__ck, .brh__k { margin: 1.1rem 0 .45rem !important; font: 700 .72rem/1.3 var(--f-ui, system-ui) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--gh-gold) !important; }
.chero.svh .chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chero.svh .chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem; border-radius: 999px; text-decoration: none; font: 600 .95rem/1.2 var(--f-ui, system-ui); }
.chero.svh .chips a.chip-urgent { background: var(--alert-bg); color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert-rule, currentColor); }
.svh__sheetbtn { margin-top: .5rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--gh-ink); font: 600 .95rem/1.2 var(--f-ui, system-ui);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.svh__sheetbtn:focus-visible { outline: 2px solid var(--gh-gold); outline-offset: 3px; }
.svh__acts, .brh__acts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0 !important; }
.chero :is(.svh__alt, .brh__alt) { background: rgb(255 255 255 / .12); color: var(--gh-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.chero :is(.svh__alt, .brh__alt):hover { background: rgb(255 255 255 / .2); color: var(--gh-ink); }
.brh__off { cursor: default; opacity: .8; }
.brh__urg { margin: .9rem 0 0 !important; } .brh__urg .chip-urgent { min-height: 44px; }
.chero.svh .hl-doc { margin-top: 1.2rem; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .26); }
.chero.svh .hl-doc__k { font: 700 .7rem/1.3 var(--f-ui, system-ui) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--gh-gold) !important; }
.chero.svh .hl-doc__n { font: 500 1.3rem/1.2 var(--f-display, Georgia) !important; color: var(--gh-ink) !important; }
.chero.svh .hl-doc__l { font: 600 .9rem/1.4 var(--f-ui, system-ui) !important; } .chero.svh .hl-doc__l a { color: var(--gh-ink); }
/* phones: the urgent line must stay near the first screen, so the doctor card (also linked in the menu and the page) shows from 48rem */
@media (max-width: 47.99rem) { .chero.svh .hl-doc { display: none; } .chero.svh .svh__acts { margin-top: .9rem !important; } }
.brh__card { margin: 1.2rem 0 0; padding: 1rem 1.1rem 1.1rem; max-width: 40rem; border-radius: 18px; background: rgb(255 255 255 / .1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.brh__card .brh__k { margin-top: 0 !important; }
.brh__card p { margin: 0 0 .2rem !important; }
/* the concern sheet: opened only by its button (never automatically), a native modal dialog (focus stays inside, Esc closes) */
.bcsheet { border: 0; padding: 0; margin: auto auto 0; width: min(100%, 34rem); max-height: 82vh; border-radius: 22px 22px 0 0;
  --ink: #1d2a22; --rule-strong: rgb(29 42 34 / .22); color: #1d2a22; background: #FBF7EE; box-shadow: 0 -20px 50px rgb(0 0 0 / .3); }
:root[data-theme="dark"] .bcsheet { --ink: #F6F0E4; --rule-strong: rgb(246 240 228 / .24); color: #F6F0E4; background: #12291F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bcsheet { --ink: #F6F0E4; --rule-strong: rgb(246 240 228 / .24); color: #F6F0E4; background: #12291F; } }
@media (min-width: 48rem) { .bcsheet { margin: auto; border-radius: 22px; } }
.bcsheet::backdrop { background: rgb(0 0 0 / .45); }
.bcsheet p { color: inherit !important; }
.bcsheet__in { padding: 1rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom, 0px)); }
.bcsheet__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 .7rem !important; font: 600 1.05rem/1.3 var(--f-ui, system-ui) !important; }
.bcsheet__x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(127 127 127 / .14); color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.bcsheet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.bcsheet__list a { display: flex; align-items: center; min-height: 48px; padding: 0 1rem; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule-strong);
  color: inherit; text-decoration: none; font: 600 1rem/1.25 var(--f-ui, system-ui); }
.bcsheet__list a.chip-urgent { box-shadow: none; }
.bcsheet__book { margin: 1rem 0 0 !important; } .bcsheet__book .btn { width: 100%; justify-content: center; }
html.read .svh__art, html.read .brh__map { display: none; }
/* contrast pass (supervisor rerun on a80fd93): the hero's own link colours (pale gold, ivory) reached the urgent chip and the glass buttons inside
   <p>; each control now keeps its own pairing, and the glass behind the branch card, the alternate buttons and the chips is darker. */
.chero :is(.brh__urg, .svh__chips) a.chip-urgent { color: var(--alert) !important; background: var(--alert-bg); text-decoration: none; box-shadow: inset 0 0 0 1px var(--alert-rule, currentColor); }
.chero :is(.svh__alt, .brh__alt), .chero :is(.svh__alt, .brh__alt):hover { color: var(--gh-ink) !important; background: rgb(0 0 0 / .26); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); text-decoration: none; }
.chero .brh__card { background: rgb(0 0 0 / .24); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.chero .brh__card p, .chero .brh__card .brh__l { color: var(--gh-ink) !important; }
.chero.svh .chips a:not(.chip-urgent) { background-color: rgb(0 0 0 / .28); color: var(--gh-ink); }
.chero .brh__card a.brh__tel { color: var(--gh-ink) !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.brh__addr { max-width: 34rem; }