/* ============================================================================
   Service pages in the light design (October 2026 preview): Remote Spiritual Clearing &
   Protection, Personal Energy & Aura Cleansing and the Remote Reiki Session.

   Loaded after site.css on those pages only and scoped to body.svx. The owner's wording and the
   page structure are unchanged; this file gives each page the Home & Space page's composition:
   the reason-to-book section as a heading column beside an ivory card, a deep-teal signature band
   for "What I do" with the approved artwork, step cards, an image-and-text afterwards section and
   a warm, signed closing invitation with his photograph.
   ========================================================================== */

.svx main p, .svx main li { max-width: none; }

/* ---------------------------------------------------------------- who this is for */

.svx #who-for { padding-block: clamp(3.25rem, 6vw, 5rem); background: linear-gradient(180deg, #fffaf1, var(--bg)); }
.svx #who-for .grid-2 { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.svx #who-for h2 { font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.6rem); }
.svx #who-for .grid-2 > div:first-child::after {
  content: ""; display: block; width: 4rem; height: 2px; margin-top: 1.25rem;
  background: linear-gradient(90deg, var(--gold), rgba(184, 137, 47, 0));
}
.svx #who-for .stack {
  background: var(--ivory); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.svx #who-for .stack p { color: var(--ink-soft); line-height: 1.7; }

/* ---------------------------------------------------------------- what I do: the signature band */

.svx #what-i-do {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background:
    radial-gradient(ellipse 55% 70% at 18% 40%, rgba(230, 196, 124, .16), rgba(230, 196, 124, 0) 70%),
    radial-gradient(ellipse 70% 90% at 90% 10%, #16505a, rgba(22, 80, 90, 0) 70%),
    var(--teal);
  color: #dce6e5;
  overflow: hidden;  /* the glow behind the artwork is wider than a phone */
}
.svx #what-i-do .eyebrow { color: var(--gold-bright); }
.svx #what-i-do h2 { color: #f3dca5; font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.75rem); }
.svx #what-i-do p, .svx #what-i-do .lede { color: #d7e2e0; }
.svx #what-i-do .grid-2 { align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.svx #what-i-do .stack p { font-size: 1.04rem; line-height: 1.7; }
.svx #what-i-do .stack p + p { padding-top: 1.1rem; border-top: 1px solid rgba(230, 196, 124, .22); }
.svx-art { margin: 0 0 1.75rem; position: relative; isolation: isolate; max-width: 26rem; }
.svx-art::before { content: ""; position: absolute; inset: -10%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(246, 220, 156, .32), rgba(246, 220, 156, 0) 68%); }
.svx-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 24px; box-shadow: 0 0 0 1px rgba(230, 196, 124, .35), 0 28px 56px -24px rgba(0, 0, 0, .55); }
@media (max-width: 51.999rem) { .svx-art { max-width: 20rem; margin-inline: auto; } }

/* The Remote Reiki page's "What happens in your session" is one centred column with three
   short benefits: a wide glowing-lotus banner above, and the benefits as soft cards on the band. */
.svx #what-i-do > .wrap:not(.grid-2) > .svx-art { max-width: 46rem; margin: 0 auto 2rem; }
.svx #what-i-do > .wrap:not(.grid-2) > .svx-art img { aspect-ratio: 5 / 2; border-radius: 22px; }
.svx #what-i-do > .wrap:not(.grid-2) { text-align: center; }
.svx #what-i-do > .wrap:not(.grid-2) > .lede { max-width: 44rem; margin-inline: auto; }
.svx #what-i-do .benefits { text-align: left; }
.svx #what-i-do .benefits li {
  border-top: 0; padding: 1.4rem 1.35rem; border-radius: 16px;
  background: rgba(255, 253, 248, .06); border: 1px solid rgba(230, 196, 124, .28);
}
.svx #what-i-do .benefits h3 { color: #f3dca5; }
.svx #what-i-do .benefits p { color: #d7e2e0; max-width: none; }
.svx #what-i-do .aside-note { color: #c9d6d4; margin-top: 1.75rem; }

/* ---------------------------------------------------------------- the steps as cards */

.svx #how, .svx #how-it-works { padding-block: clamp(3.25rem, 6vw, 4.75rem); background: var(--ivory); border-bottom: 1px solid var(--border); }
.svx #how > .wrap > .eyebrow, .svx #how > .wrap > h2,
.svx #how-it-works > .wrap > .eyebrow, .svx #how-it-works > .wrap > h2 { text-align: center; }
.svx .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.svx .steps li {
  max-width: none; padding: 3.75rem 1.4rem 1.5rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--ink-soft); line-height: 1.6;
}
.svx .steps li::before { left: 1.4rem; top: 1.3rem; }
.svx .steps li strong { color: var(--ink); font-family: var(--font-head); font-size: 1.15rem; margin-bottom: .4rem; }
@media (max-width: 51.999rem) { .svx .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- afterwards: image and text */

.svx #afterwards, .svx #maintenance { padding-block: clamp(3.25rem, 6.5vw, 5rem); background: linear-gradient(180deg, var(--bg), #f8efdf); }
.svx #afterwards .grid-2, .svx #maintenance .grid-2 { align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.svx-photo { margin: 0 0 1.5rem; }
.svx-photo img {
  display: block; width: 100%; height: auto; border-radius: 20px;  /* the artwork's own wide shape: never cropped up */
  box-shadow: 0 0 0 1px rgba(184, 137, 47, .35), 0 0 0 7px rgba(255, 253, 248, .85), 0 0 0 8px rgba(184, 137, 47, .2), 0 24px 48px -22px rgba(80, 60, 20, .35);
}
.svx #afterwards .stack p, .svx #maintenance .stack p { color: var(--ink-soft); line-height: 1.7; }

/* ---------------------------------------------------------------- meet Norbert (Remote Reiki) */

.svx #norbert { padding-block: clamp(3rem, 6vw, 4.5rem); }
.svx #norbert .stack {
  background: var(--ivory); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* ---------------------------------------------------------------- the closing invitation */

.svx #book { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: radial-gradient(ellipse 60% 80% at 50% 0%, #fff6e3, rgba(255, 246, 227, 0) 70%), linear-gradient(180deg, #f6ecd9, var(--bg-warm)); }
.svx #book .wrap-narrow {
  background: var(--ivory); border: 1px solid rgba(184, 137, 47, .45); border-radius: 26px;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 0 0 6px rgba(255, 253, 248, .7), 0 0 0 7px rgba(184, 137, 47, .18), 0 36px 70px -36px rgba(80, 60, 20, .45);
}
.svx-sign { margin: 0 auto 1.25rem; width: 6.5rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(184, 137, 47, .45), 0 0 0 5px rgba(255, 253, 248, .95), 0 0 0 6px rgba(184, 137, 47, .25); }
.svx-sign img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.svx #book h2 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem); }
.svx #book .lede { color: var(--ink-soft); }

/* ============================================================================
   Information pages (About, How It Works): the same composition, applied by section role.
   body.svx.svx-info; the signature section carries .svx-band (tools/style-service-pages.py).
   ========================================================================== */

.svx-info main > section:not(.hero):not(.svx-band) { padding-block: clamp(3rem, 6vw, 4.5rem); }
.svx-info main > section:not(.soft):not(.warm):not(.hero):not(.svx-band) { background: var(--bg); }
.svx-info main > section.soft { background: linear-gradient(180deg, #fffaf1, var(--bg-soft)); }
.svx-info main > section.warm:not(.center) { background: linear-gradient(180deg, #f6ecd9, var(--bg-warm)); }
.svx-info .grid-2 { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.svx-info section:not(.svx-band) .grid-2 > .stack,
.svx-info section:not(.svx-band) .wrap-narrow > .stack {
  background: var(--ivory); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.svx-info .grid-2 > div:first-child > h2::after {
  content: ""; display: block; width: 4rem; height: 2px; margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--gold), rgba(184, 137, 47, 0));
}
.svx-info .stack p { color: var(--ink-soft); line-height: 1.7; }

/* The trust facts float as one card under the opening section. */
.svx-info .facts { width: min(100% - 2.5rem, var(--wrap)); margin: -1.5rem auto 0; position: relative; z-index: 1; border-radius: 18px; border: 1px solid var(--border); }
.svx-info .fact { text-align: center; padding: 1.4rem 1.2rem; }
.svx-info .fact strong { font-size: 1.15rem; }

/* The signature band */
.svx-band {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background:
    radial-gradient(ellipse 55% 70% at 18% 40%, rgba(230, 196, 124, .16), rgba(230, 196, 124, 0) 70%),
    radial-gradient(ellipse 70% 90% at 90% 10%, #16505a, rgba(22, 80, 90, 0) 70%),
    var(--teal);
  color: #dce6e5; overflow: hidden;
}
.svx-band .eyebrow { color: var(--gold-bright); }
.svx-band h2 { color: #f3dca5; font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.75rem); }
.svx-band p { color: #d7e2e0; font-size: 1.04rem; line-height: 1.7; }
.svx-band .stack p + p { padding-top: 1.1rem; border-top: 1px solid rgba(230, 196, 124, .22); }

/* Checklists as quiet ivory rows */
.svx-info .checks li { background: var(--ivory); border: 1px solid var(--border); border-radius: 12px; padding: .75rem 1rem .75rem 2.6rem; }
.svx-info .checks li::before { left: 1rem; top: 1.2em; }

/* Six steps: three cards a row */
.svx-info .steps li { font-size: .98rem; }
.svx-info section.soft > .wrap > .eyebrow, .svx-info section.soft > .wrap > h2 { text-align: center; }
.svx-info section.soft > .wrap > .btn-row { justify-content: center; }

/* Email cards */
.svx-info .card { border-radius: 16px; }
.svx-info .card h3 { font-family: var(--font-head); }

/* The closing invitation, as on the service pages */
.svx-info main > section.warm.center { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: radial-gradient(ellipse 60% 80% at 50% 0%, #fff6e3, rgba(255, 246, 227, 0) 70%), linear-gradient(180deg, #f6ecd9, var(--bg-warm)); }
.svx-info main > section.warm.center .wrap-narrow {
  background: var(--ivory); border: 1px solid rgba(184, 137, 47, .45); border-radius: 26px;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 0 0 6px rgba(255, 253, 248, .7), 0 0 0 7px rgba(184, 137, 47, .18), 0 36px 70px -36px rgba(80, 60, 20, .45);
}
.svx-info main > section.warm.center h2 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem); }
.svx-info .svx-band .stack p { color: #d7e2e0; }

/* ---------------------------------------------------------------- the referral page */

/* "What your client receives": the artwork beside the three stages, on the band. */
.svx-band > .wrap:not(.grid-2) { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.svx-band > .wrap:not(.grid-2) > .svx-art { grid-column: 1; grid-row: 1 / span 5; margin: 0; }
.svx-band > .wrap:not(.grid-2) > :not(.svx-art) { grid-column: 2; }
.svx-band .stages { grid-template-columns: 1fr; gap: 0; margin-top: 1.25rem; }
.svx-band .stages li { border-top: 1px solid rgba(230, 196, 124, .28); padding: 1.1rem 0 1rem; }
.svx-band .stages h3 { color: #f3dca5; }
.svx-band .stages p { color: #d7e2e0; padding-left: 2.8rem; }
@media (max-width: 51.999rem) {
  .svx-band > .wrap:not(.grid-2) { grid-template-columns: 1fr; }
  .svx-band > .wrap:not(.grid-2) > .svx-art { grid-row: auto; margin-bottom: 1.75rem; }
  .svx-band > .wrap:not(.grid-2) > :not(.svx-art) { grid-column: 1; }
  .svx-band .stages p { padding-left: 0; }
}

/* The reward table as a refined card */
.svx-info #rewards .table-scroll { background: var(--ivory); border: 1px solid rgba(184, 137, 47, .4); border-radius: 18px; box-shadow: var(--shadow); padding: .5rem 1.25rem; margin-top: 1.5rem; }
.svx-info #rewards table { margin: 0; }
.svx-info #rewards th { color: var(--gold-text); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.svx-info #rewards td:not(:first-child) { font-family: var(--font-head); font-size: 1.15rem; color: var(--ink); }
.svx-info #rewards tbody tr:first-child td { font-weight: 600; }

/* Ready-made messages as quotation cards */
.svx-info #how-to-talk .card { border-left: 3px solid var(--gold); }
.svx-info #how-to-talk .card p:first-of-type { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.6; color: var(--ink); }

/* The rules list */
.svx-info #what-not-to-say .plain-list { background: var(--ivory); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 1.5rem 1.5rem 1.25rem 2.75rem; }

/* The join invitation, as the closing card */
.svx-info main > section#join { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: radial-gradient(ellipse 60% 80% at 50% 0%, #fff6e3, rgba(255, 246, 227, 0) 70%), linear-gradient(180deg, #f6ecd9, var(--bg-warm)); text-align: center; }
.svx-info main > section#join .wrap-narrow {
  background: var(--ivory); border: 1px solid rgba(184, 137, 47, .45); border-radius: 26px;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 0 0 6px rgba(255, 253, 248, .7), 0 0 0 7px rgba(184, 137, 47, .18), 0 36px 70px -36px rgba(80, 60, 20, .45);
}
.svx-info main > section#join .btn-row { justify-content: center; }
.svx-info main > section#join .lede { margin-inline: auto; }
/* Steps inside a text column (the referral page's four steps) stack, one card each. */
.svx .stack .steps { grid-template-columns: 1fr; gap: .8rem; }
.svx .stack .steps li { padding: 1.2rem 1.3rem 1.2rem 4rem; }
.svx .stack .steps li::before { left: 1.2rem; top: 1.15rem; }
.svx-info section .grid-2 > .stack:has(> .steps) { background: none; border: 0; box-shadow: none; padding: 0; }

/* ---------------------------------------------------------------- videos: click to play */

.rr-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.rr-video-card { margin: 0; background: var(--ivory); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.rr-video, .rr-video-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: var(--teal); }
.rr-video { position: relative; cursor: pointer; overflow: hidden; }
.rr-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, filter .4s ease; }
.rr-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 59, 67, 0) 60%, rgba(15, 59, 67, .35)); }
.rr-video-play {
  position: absolute; z-index: 1; left: 78%; top: 50%; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; border-radius: 50%;  /* over the artwork, clear of the title */
  background: radial-gradient(circle at 35% 30%, #f6dc9c, #c99a45 70%); box-shadow: 0 0 0 6px rgba(255, 253, 248, .45), 0 12px 30px rgba(15, 59, 67, .45);
  display: grid; place-items: center; transition: transform .2s ease;
}
.rr-video-play::before { content: ""; margin-left: .3rem; border-style: solid; border-width: .8rem 0 .8rem 1.25rem; border-color: transparent transparent transparent #fff; }
.rr-video-time { position: absolute; z-index: 1; right: .8rem; bottom: .7rem; font-size: .8rem; font-weight: 600; color: #fff; background: rgba(15, 59, 67, .75); border-radius: 999px; padding: .2rem .6rem; }
.rr-video:hover img, .rr-video:focus-visible img { transform: scale(1.03); filter: brightness(1.04); }
.rr-video:hover .rr-video-play, .rr-video:focus-visible .rr-video-play { transform: scale(1.06); }
.rr-video:focus-visible { outline: 3px solid var(--gold-text); outline-offset: -3px; }
.rr-video-card figcaption { padding: 1.1rem 1.25rem 1.3rem; }
.rr-video-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.rr-video-card p { margin: 0; font-size: .95rem; color: var(--muted); }
.rr-video-proposal { display: inline-block; margin-bottom: .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a4b0f; background: #fff1d6; border: 1px dashed #d9a54a; border-radius: 999px; padding: .25rem .75rem; }
@media (prefers-reduced-motion: reduce) { .rr-video img, .rr-video-play { transition: none; } }
@media (max-width: 51.999rem) { .rr-videos { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

/* ============================================================================
   REFINEMENT (October 2026, second pass): light everywhere, three distinct heroes.
   Owner: "My teachings may explain darkness, but my website must radiate light." The dark
   signature bands become radiant ivory-and-gold bands; deep teal stays a brand accent only.
   ========================================================================== */

/* ---- the "What I do" and signature bands, now light */
.svx #what-i-do, .svx-band {
  background:
    radial-gradient(ellipse 55% 75% at 18% 35%, rgba(255, 240, 200, .85), rgba(255, 240, 200, 0) 70%),
    radial-gradient(ellipse 60% 80% at 92% 0%, rgba(246, 220, 156, .35), rgba(246, 220, 156, 0) 70%),
    linear-gradient(180deg, #fffdf8, #fbf1dd);
  color: var(--ink-soft);
  border-block: 1px solid var(--border);
}
.svx #what-i-do .eyebrow, .svx-band .eyebrow { color: var(--gold-text); }
.svx #what-i-do h2, .svx-band h2 { color: var(--ink); }
.svx #what-i-do p, .svx #what-i-do .lede, .svx-band p, .svx-info .svx-band .stack p { color: var(--ink-soft); }
.svx #what-i-do .stack p + p, .svx-band .stack p + p { border-top-color: rgba(184, 137, 47, .28); }
.svx #what-i-do .benefits li { background: rgba(255, 253, 248, .85); border-color: var(--border); box-shadow: var(--shadow); }
.svx #what-i-do .benefits h3 { color: var(--ink); }
.svx #what-i-do .benefits p { color: var(--ink-soft); }
.svx #what-i-do .aside-note { color: var(--muted); }
.svx-band .stages h3 { color: var(--ink); }
.svx-band .stages p { color: var(--ink-soft); }
.svx-band .stages li { border-top-color: rgba(184, 137, 47, .3); }
.svx-art img { box-shadow: 0 0 0 1px rgba(184, 137, 47, .35), 0 0 0 8px rgba(255, 253, 248, .85), 0 0 0 9px rgba(184, 137, 47, .2), 0 26px 52px -24px rgba(80, 60, 20, .35); }
.svx-art::before { background: radial-gradient(circle, rgba(246, 220, 156, .45), rgba(246, 220, 156, 0) 68%); }

/* the light emblems */
.svx-emblem { margin: 0 0 1.5rem; width: min(17rem, 70%); }
.svx-emblem svg { display: block; width: 100%; height: auto; }
@media (max-width: 51.999rem) { .svx-emblem { width: 11rem; margin-inline: auto; } }

/* ---------------------------------------------------------------- A. Spiritual Clearing: "You are safe. Light is stronger."
   Composition: the owner's image fills the hero; the words sit in a FRAMED IVORY CARD on the left,
   over the open sky, and the lotus in its dome of light stays visible on the right. */

[data-page="spiritual-clearing"] .hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; min-height: clamp(38rem, 50vw, 46rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
  background: #fbf3e3;
}
.svx-scene { position: absolute; inset: 0; z-index: -1; margin: 0 auto; max-width: 104.5rem; }
.svx-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.svx-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 250, 238, .5) 0%, rgba(255, 250, 238, .2) 42%, rgba(255, 250, 238, 0) 62%); }
@media (min-width: 104.5rem) {
  /* wider than the image: it never stretches; its edges melt into the cream instead */
  .svx-scene { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
}
[data-page="spiritual-clearing"] .hero .hero-grid {
  display: block; position: relative; margin: 0;
  width: min(100% - 2.5rem, 37rem); margin-left: max(1.25rem, calc((100% - var(--wrap)) / 2));
  padding: clamp(1.9rem, 3.5vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.6rem);
  background: rgba(255, 253, 248, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(184, 137, 47, .45); border-radius: 26px;
  box-shadow: inset 0 0 0 6px rgba(255, 253, 248, .7), inset 0 0 0 7px rgba(184, 137, 47, .22), 0 40px 80px -40px rgba(120, 85, 20, .45);
}
[data-page="spiritual-clearing"] .hero h1 { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); margin-bottom: .45em; }
[data-page="spiritual-clearing"] .hero .hero-price { margin-top: 1.2rem; font-size: 1.4rem; }
[data-page="spiritual-clearing"] .hero .btn-row { margin-top: 1.1rem; }
@media (max-width: 51.999rem) {
  [data-page="spiritual-clearing"] .hero { display: block; min-height: 0; padding-block: 0 2.75rem; }
  .svx-scene { position: relative; z-index: auto; aspect-ratio: 4 / 3; }
  .svx-scene img { object-position: 74% 50%; }
  .svx-scene::after { background: linear-gradient(180deg, rgba(251, 243, 227, 0) 70%, #fbf3e3 100%); }
  [data-page="spiritual-clearing"] .hero .hero-grid { width: calc(100% - 1.75rem); margin: -3rem auto 0; }
}

/* ---------------------------------------------------------------- B. Aura Cleansing: "lighter, clearer, more like yourself again"
   Composition: a SPLIT hero. The words on the left; on the right the meditating figure and her
   flowing aura in an ARCHED window ringed with pearl light. */

[data-page="energy-cleansing"] .hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 42% 62% at 78% 48%, rgba(214, 198, 240, .5), rgba(214, 198, 240, 0) 70%),
    radial-gradient(ellipse 38% 52% at 70% 62%, rgba(159, 214, 207, .4), rgba(159, 214, 207, 0) 70%),
    radial-gradient(ellipse 60% 70% at 12% 18%, rgba(255, 244, 214, .9), rgba(255, 244, 214, 0) 70%),
    linear-gradient(180deg, #fffdf8, #f7f3f4);
}
.svx-arch { margin: 0 auto; width: 100%; max-width: 30rem; }
.svx-arch img {
  display: block; width: 100%; height: auto; aspect-ratio: 960 / 941; object-fit: cover;
  border-radius: 50% 50% 24px 24px / 36% 36% 24px 24px;
  box-shadow: 0 0 0 1px rgba(184, 137, 47, .4), 0 0 0 10px rgba(255, 253, 248, .75), 0 0 0 11px rgba(190, 170, 228, .55),
              0 0 70px 12px rgba(214, 198, 240, .45), 0 40px 70px -40px rgba(70, 60, 110, .4);
}
@media (min-width: 52rem) {
  [data-page="energy-cleansing"] .hero-grid > .svx-arch { grid-area: portrait; align-self: center; }
}
@media (max-width: 51.999rem) {
  [data-page="energy-cleansing"] .hero-grid > .svx-arch { order: 1; margin-top: 2.25rem; max-width: 20rem; }
}
/* the rest of the page carries the same pearl light, so it reads as its own place */
[data-page="energy-cleansing"] #what-i-do {
  background:
    radial-gradient(ellipse 50% 70% at 16% 35%, rgba(214, 198, 240, .35), rgba(214, 198, 240, 0) 70%),
    radial-gradient(ellipse 55% 75% at 90% 10%, rgba(159, 214, 207, .3), rgba(159, 214, 207, 0) 70%),
    linear-gradient(180deg, #fffdf8, #f6f2f4);
}
/* the three steps as one flowing line rather than three boxes */
[data-page="energy-cleansing"] .steps { gap: 2rem; }
[data-page="energy-cleansing"] .steps li {
  background: none; box-shadow: none; border: 0; border-radius: 0;
  border-top: 2px solid; border-image: linear-gradient(90deg, #c99a45, #9fd6cf, #c6b4ea) 1;
  padding: 3.6rem .2rem .5rem;
}
[data-page="energy-cleansing"] .steps li::before { left: 0; top: 1.15rem; }

/* ---------------------------------------------------------------- C. Remote Reiki: "relax and receive"
   Composition: a CENTRED welcome, then the glowing lotus on still water as a FULL-WIDTH BAND, edge
   to edge, with the approved heading resting on the water. */

[data-page="remote-reiki"] .hero {
  padding-block: clamp(3rem, 6vw, 4.75rem) 0;
  background: linear-gradient(180deg, #fffdf8, #fbf3e2);
}
[data-page="remote-reiki"] .hero .hero-grid { display: block; text-align: center; }
[data-page="remote-reiki"] .hero .hero-grid > * { max-width: 44rem; margin-inline: auto; }
[data-page="remote-reiki"] .hero h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); margin-bottom: .45em; }
[data-page="remote-reiki"] .hero .hero-trust, [data-page="remote-reiki"] .hero .hero-price { margin-top: .9rem; }
[data-page="remote-reiki"] .hero .btn-row { justify-content: center; margin-top: 1.3rem; }
.svx-band-photo { position: relative; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 104.5rem; }
.svx-band-photo img {
  display: block; width: 100%; height: clamp(22rem, 40vw, 36rem); object-fit: cover; object-position: 62% 58%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%);
}
@media (min-width: 104.5rem) {
  .svx-band-photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 14%), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
}
.svx-band-photo figcaption {
  position: absolute; left: 50%; bottom: clamp(1.25rem, 3.5vw, 2.5rem); transform: translateX(-50%); width: max-content; max-width: 92%;
  font-family: var(--font-head); font-size: clamp(1.1rem, .85rem + 1.2vw, 1.9rem); color: var(--ink); text-align: center;
  background: rgba(255, 253, 248, .84); border: 1px solid rgba(184, 137, 47, .35); border-radius: 999px; padding: .55rem 1.6rem;
}
@media (max-width: 39.999rem) {
  .svx-band-photo img { height: 20rem; object-position: 70% 55%; }
  .svx-band-photo figcaption { font-size: 1.05rem; padding: .5rem 1.1rem; }
}
/* the one portrait on the three service pages, in "Meet Norbert" */
.svx-meet { margin: 0 0 1.4rem; width: 12rem; }
.svx-meet img { display: block; width: 100%; height: auto; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(184, 137, 47, .35), 0 0 0 7px rgba(255, 253, 248, .9), 0 0 0 8px rgba(184, 137, 47, .2), 0 24px 48px -24px rgba(80, 60, 20, .35); }
@media (max-width: 51.999rem) { .svx-meet { width: 10rem; } }

/* Referral hero: two .cta-secondary lines shared one grid area on desktop and printed on top of each
   other (also on the live site). The rewards note now sits between the reward cards and the button,
   the same order a phone shows. */
@media (min-width: 52rem) {
  [data-page="referral-program"] .hero-grid > .hero-trust + .cta-secondary { grid-area: price; margin-top: .9rem; }
}