/* ============================================================
   /recovery/ — Recovery & Rejuvenation modalities
   Loaded only by that page. Written to feel like a wellness studio rather
   than a spec sheet: cream grounds, serif display type, arched photo frames
   and a lot of air. Every colour and radius comes from the tokens in
   styles.css, so it stays on brand when those change.
   ============================================================ */
.rv-hero { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); padding: clamp(44px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.rv-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .rv-hero-grid { grid-template-columns: 1fr; } }
.rv-kicker { font-family: var(--sans); font-weight: 800; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay-600); margin: 0 0 18px; }
.rv-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 22px; }
.rv-hero h1 em { font-style: italic; color: var(--clay-600); }
.rv-lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 46ch; margin: 0 0 30px; }

/* height:auto on every photo below is load-bearing. The <img> tags carry
   width/height attributes so the page doesn't jump while images load, and an
   HTML height attribute beats CSS aspect-ratio -- without height:auto each
   photo renders at its full pixel height and gets stretched tall. */
/* Arched frame — the one decorative gesture on the page. */
.rv-arch { position: relative; margin: 0; }
.rv-arch img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg); }
.rv-arch figcaption { position: absolute; left: -18px; bottom: 34px; background: var(--surface); border-radius: 100px; padding: 10px 18px; font-size: 0.86rem; font-weight: 700; box-shadow: var(--shadow-md); color: var(--ink); }
@media (max-width: 900px) { .rv-arch { max-width: 440px; margin: 0 auto; } .rv-arch figcaption { left: 12px; } }

/* Jump links to each modality */
.rv-index { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.rv-index .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding-top: 22px; padding-bottom: 22px; }
.rv-index a { font-weight: 700; font-size: 0.92rem; color: var(--ink); text-decoration: none; padding: 9px 16px; border: 1px solid var(--line); border-radius: 100px; transition: background .2s, color .2s, border-color .2s; }
.rv-index a:hover, .rv-index a:focus-visible { background: var(--green); color: var(--clay); border-color: var(--green); }

/* Intro: how a visit flows, and which memberships include what */
.rv-intro { padding: clamp(56px, 8vw, 100px) 0 clamp(8px, 2vw, 20px); text-align: center; }
.rv-intro h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4vw, 2.9rem); max-width: 22ch; margin: 0 auto 18px; }
.rv-intro-lede { color: var(--ink-soft); max-width: 62ch; margin: 0 auto; }
.rv-ritual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; text-align: left; }
@media (max-width: 760px) { .rv-ritual { grid-template-columns: 1fr; } }
.rv-step { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); }
.rv-step-k { font-family: var(--serif); font-style: italic; color: var(--clay-600); font-size: 1.05rem; }
.rv-step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 4px 0 8px; }
.rv-step p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }
.rv-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 920px; margin: 26px auto 0; }
@media (max-width: 760px) { .rv-tiers { grid-template-columns: 1fr 1fr; } }
.rv-tier { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 12px; }
.rv-tier b { display: block; font-family: var(--serif); font-size: 1.24rem; font-weight: 600; color: var(--ink); }
.rv-tier span { display: block; font-size: 0.86rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.rv-tier.is-hi { background: var(--green); }
.rv-tier.is-hi b { color: var(--clay); }
.rv-tier.is-hi span { color: #cfccc4; }

/* One modality = one editorial spread */
.rv-mod { padding: clamp(60px, 8vw, 108px) 0; scroll-margin-top: 90px; }
.rv-mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.rv-mod.flip .rv-media { order: 2; }
@media (max-width: 900px) { .rv-mod-grid { grid-template-columns: 1fr; gap: 56px; } .rv-mod.flip .rv-media { order: 0; } }
.rv-media { position: relative; margin: 0; }
.rv-media > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--surface); }
.rv-media.ar-native > img { aspect-ratio: auto; }
.rv-media.is-arch > img { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); }
/* Small "at our studio" photo tucked over the corner of the main image */
.rv-inset { position: absolute; right: -22px; bottom: -30px; width: 44%; margin: 0; background: var(--surface); padding: 8px 8px 4px; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.rv-mod.flip .rv-inset { right: auto; left: -22px; }
.rv-inset img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - 6px); }
.rv-inset figcaption { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding: 7px 4px 4px; }
/* Keep the inset inside the frame on small screens — it must never widen the page */
@media (max-width: 900px) { .rv-inset, .rv-mod.flip .rv-inset { left: auto; right: 12px; bottom: -28px; width: 46%; } }

.rv-num { display: block; font-family: var(--serif); font-size: 1rem; color: var(--clay-600); letter-spacing: 0.08em; margin-bottom: 10px; }
.rv-copy h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.06; margin: 0 0 8px; }
.rv-tagline { font-family: var(--serif); font-style: italic; font-size: 1.22rem; color: var(--ink-soft); margin: 0 0 22px; }
.rv-copy > p { color: var(--ink-soft); }
.rv-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 24px; padding: 0; list-style: none; }
.rv-meta li { font-size: 0.82rem; font-weight: 700; padding: 7px 13px; border-radius: 100px; background: var(--green-100); color: var(--ink-soft); }
.rv-meta li.is-tier { background: var(--clay-100); color: var(--clay-600); }
.rv-benefits { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--line-soft); }
.rv-benefits li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line-soft); font-size: 1rem; color: var(--ink); line-height: 1.5; }
.rv-benefits li::before { content: ""; position: absolute; left: 3px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
.rv-cite { color: var(--clay-600); text-decoration: none; font-weight: 700; font-size: 0.72em; vertical-align: super; margin-left: 2px; }
.rv-cite:hover { text-decoration: underline; }
.rv-know { max-width: none; border-top: 1px solid var(--line-soft); }
.rv-know .acc-q { font-size: 1rem; }
.rv-know .acc-a-inner { font-size: 0.95rem; }
.rv-know .acc-a-inner ul { margin: 0 0 10px; padding-left: 20px; }

/* Dark pause between spreads */
.rv-band { background: var(--green); padding: clamp(56px, 8vw, 96px) 0; text-align: center; }
.rv-band blockquote { margin: 0 auto; max-width: 32ch; font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.25; color: #fff; }
.rv-band cite { display: block; margin-top: 18px; font-style: normal; font-family: var(--sans); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }

/* Research — visible rather than in a modal, so citations are linkable and crawlable */
.rv-refs { padding: clamp(56px, 8vw, 96px) 0; }
.rv-ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; margin-top: 30px; }
@media (max-width: 980px) { .rv-ref-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .rv-ref-grid { grid-template-columns: 1fr; } }
.rv-ref-grid h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0 0 10px; }
.rv-ref-grid ol { margin: 0; padding-left: 26px; }
.rv-ref-grid li { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 8px; overflow-wrap: anywhere; scroll-margin-top: 110px; }
.rv-ref-grid li a { color: var(--clay-600); }
.rv-ref-grid li:target { background: var(--clay-100); border-radius: 6px; outline: 6px solid var(--clay-100); }
.rv-disclaimer { max-width: 820px; margin: 40px auto 0; font-size: 0.86rem; color: var(--ink-faint); text-align: center; }