/* ============================================================================
Receive Reiki — design system
----------------------------------------------------------------------------
Calm, spacious, refined. One accent colour, generous whitespace, a strong
typographic hierarchy and very little else.
Typography note: this uses a system font stack rather than a webfont. It costs
zero network requests, has no licensing question, and renders instantly — which
matters more for a premium feel than any particular typeface. If a specific
face is chosen later it can be self-hosted and swapped at the two --font vars
without touching a single page.
Colour: light-only by design. `color-scheme: light` is declared so browsers do
not auto-invert; the palette is tuned around a warm off-white and a single
muted teal, and a machine-generated dark variant would undermine it.
========================================================================== */
:root {
color-scheme: light;
/* Palette */
--ink: #1d1b18;
--ink-soft: #4a453f;
--muted: #6b6560;
--accent: #2f5d50;
--accent-dk: #244a40;
--accent-tint:#eef3f1;
--bg: #ffffff;
--bg-soft: #faf9f7;
--bg-warm: #f4f1ec;
--border: #e3e0da;
--border-str: #cfcac1;
/* Type */
--font-head: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Rhythm */
--measure: 34rem;
--wrap: 68rem;
--wrap-narrow: 46rem;
--radius: 14px;
--radius-lg: 20px;
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
--step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
--step-2: clamp(1.4rem, 1.28rem + 0.6vw, 1.75rem);
--step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
--step-4: clamp(2.15rem, 1.7rem + 2.2vw, 3.4rem);
}
/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
/* Nothing may ever scroll the page sideways. */
overflow-x: hidden;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.012em;
margin: 0 0 .5em;
text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
p, li { max-width: var(--measure); }
p { margin: 0 0 1.1em; }
.lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; }
a { color: var(--accent-dk); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
hr { border: none; border-top: 1px solid var(--border); margin: 3rem 0; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 1rem; top: -4rem; z-index: 100;
background: var(--ink); color: #fff; padding: .75rem 1.1rem;
border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }
/* ---------------------------------------------------------------- layout */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 30rem) { .wrap, .wrap-narrow { width: min(100% - 1.75rem, var(--wrap)); } }
section { padding-block: clamp(3.25rem, 7vw, 6rem); }
section.tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.soft { background: var(--bg-soft); }
.warm { background: var(--bg-warm); }
.eyebrow {
font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
color: var(--muted); font-weight: 600; margin: 0 0 .9rem;
}
/* ---------------------------------------------------------------- header */
.strip {
background: var(--accent);
color: #fff;
font-size: .84rem;
text-align: center;
padding: .55rem 1rem;
line-height: 1.4;
/* The strip is a , so the global reading-measure cap would otherwise clip it to ~34rem and
leave the band ending part-way across the viewport. */
max-width: none;
margin: 0;
}
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(255,255,255,.92);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--border);
}
.site-header .bar {
display: flex; align-items: center; gap: 1.25rem;
padding-block: .9rem;
}
.brand {
font-family: var(--font-head); font-size: 1.18rem; font-weight: 600;
color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.brand span { color: var(--accent); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent-dk); text-decoration: underline; }
/* The nav link rule above is more specific than .btn-primary, so without this the header's Book
button rendered dark-grey text on the dark-green fill — 1.26:1, effectively unreadable. */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover,
.site-nav a.btn-primary[aria-current="page"] { color: #fff; text-decoration: none; }
.site-nav a.btn-ghost,
.site-nav a.btn-ghost:hover { color: var(--ink); text-decoration: none; }
.nav-toggle {
display: none; margin-left: auto; background: none; border: 1px solid var(--border);
border-radius: 10px; padding: .5rem .7rem; cursor: pointer; color: var(--ink);
}
@media (max-width: 56rem) {
.nav-toggle { display: inline-flex; }
.site-nav {
display: none; position: absolute; inset: 100% 0 auto 0;
background: var(--bg); border-bottom: 1px solid var(--border);
flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0 1rem;
}
.site-nav.open { display: flex; }
.site-nav a { padding: .8rem clamp(1.25rem, 5vw, 2rem); font-size: 1rem; }
.site-nav .btn { margin: .6rem clamp(1.25rem, 5vw, 2rem) 0; text-align: center; }
}
/* ---------------------------------------------------------------- breadcrumbs */
/* Present on every sub-page so the BreadcrumbList structured data describes something the visitor
can actually see — structured data must never mark up a path that is not rendered. */
.breadcrumb { padding-block: 1rem .25rem; }
.breadcrumb ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
font-size: .87rem; color: var(--muted);
}
.breadcrumb li { max-width: none; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--border-str); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-dk); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }
/* ---------------------------------------------------------------- buttons */
.btn {
display: inline-block; border: 1px solid transparent; border-radius: 999px;
padding: .85rem 1.6rem; font-size: .98rem; font-weight: 600;
text-decoration: none; cursor: pointer; font-family: inherit;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dk); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-str); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dk); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 1.75rem; }
/* ---------------------------------------------------------------- hero */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 5rem); }
/* MOBILE FIRST, AND THE ORDER IS THE POINT.
The hero's children are direct grid items in the order a phone should read them: eyebrow, H1,
portrait, lede, buttons, price. Previously the portrait was the last child of a two-child grid,
so a 390px screen showed the introduction, both buttons and the price line before any of
Norbert's face — he arrived at the very bottom of the first viewport, cropped at the forehead.
Source order now IS the mobile order, so no reordering property is needed to get it right. */
.hero-grid { display: grid; gap: 0; align-items: start; }
.hero-grid > * { margin-block: 0; }
.hero-grid > h1 { margin-bottom: .35em; }
.hero-grid > .portrait { margin-block: 1.25rem; }
.hero-grid > .lede { max-width: 32rem; }
/* THE PRICE AS ONE LINE, NOT A CARD.
/remote-reiki/ carried the tinted `.hero-offer` card between the credential and the button. On a
390px phone it was the largest object in that stack, and it held one number. The number now sits
on a single serif line: the first-session figure carries the weight, the regular rate follows
after a hairline dot in the caption colour, and nothing is boxed. Same words, same two prices,
a third of the height. `.hero-offer` is untouched for the pages that still use it. */
.hero-price {
margin-top: 1.25rem;
max-width: none;
font-family: var(--font-head);
font-size: 1.1rem;
line-height: 1.4;
color: var(--ink-soft);
letter-spacing: -0.01em;
}
.hero-price strong { font-weight: 600; font-size: 1.3em; color: var(--accent-dk); }
.hero-price .sep { margin-inline: .5em; color: var(--border-str); }
.hero-price .regular { color: var(--muted); font-size: .92em; }
/* The introductory offer, as ONE element on purpose.
It used to be two sibling
lines, and that failed differently at each
breakpoint. At 52rem and above BOTH were assigned `grid-area: price` below, which put two grid
items in a single cell and drew them on top of each other - a real overlap, measured, not a
tight gap. Below 52rem `.hero-grid > *` zeroes margin-bottom and the grid gap is 0, so the
second line's own 0.4rem top margin was the entire separation: 6.4px.
One element cannot collide with itself and needs no gap, so both faults go away by construction
rather than by tuning a margin.
`justify-self: start` keeps it hugging its text instead of stretching the full column. */
.hero-offer {
margin-top: 1.25rem;
justify-self: start;
max-width: 100%;
padding: .8rem 1.15rem;
border-radius: var(--radius);
background: var(--accent-tint);
}
.hero-offer p { margin: 0; max-width: none; }
.hero-offer .offer-headline {
font-family: var(--font-head);
font-size: 1.05rem;
line-height: 1.3;
color: var(--accent-dk);
letter-spacing: -0.01em;
}
.hero-offer .offer-headline strong { font-weight: 600; }
/* THE PAID LANDING PAGE PUTS THE ASK IN THE FIRST SCREEN.
/remote-reiki/ shares the homepage hero, and on the homepage the portrait deliberately sits
directly after the H1 so a phone shows Norbert before anything else. That is right for a brand
page and wrong for this one: measured at 390x844 it costs 400px and pushed the CTA to 878px and
the price to 1114px, both past a ~745px first screen.
On phones only, and only here, the portrait moves below the offer. Nothing is hidden and nothing
shrinks - Norbert is still the first thing after the price, and at 52rem and up the named grid
areas put him back in the right-hand column untouched. */
@media (max-width: 51.999rem) {
[data-page="remote-reiki"] .hero-grid > .portrait { order: 1; margin-block: 1.75rem 0; }
}
/* SMALL PHONES: recover vertical space above the CTA, without shrinking anything.
At 320x568 the primary CTA sat at 566px. The space above it is mostly fixed furniture - a strip
that wraps to three lines, a header, a breadcrumb and 48px of hero padding - so the only honest
levers are the gaps themselves. Every value below is padding or margin; no font-size is reduced,
no element is hidden, and nothing applies above 340px.
(The breadcrumb this once tightened no longer exists on the paid landing page.) */
@media (max-width: 21.25rem) {
[data-page="remote-reiki"] .hero { padding-block: 1.75rem 2rem; }
[data-page="remote-reiki"] .hero-grid > .eyebrow { margin-bottom: .5rem; }
[data-page="remote-reiki"] .hero-grid > .btn-row { margin-top: 1.25rem; }
[data-page="remote-reiki"] .hero-grid .btn-lg { padding: .85rem 1.5rem; }
[data-page="remote-reiki"] .hero-price { margin-top: 1rem; }
}
/* The same offer block, centred inside a `.center` section. `.center` centres text and auto-
margins its children, but `.hero-offer` is `justify-self: start` for the hero, which wins inside
a grid and would pin it left. This restores the centring without touching the hero rule. */
/* The offer card used OUTSIDE the hero grid - above a pricing ladder. `justify-self` is a grid
property and is ignored in a block container, so without a width constraint the card stretches
the whole 68rem wrap. */
.hero-offer.offer-inline { max-width: fit-content; margin-top: 1.5rem; }
/* THE LINE UNDER THE ASK.
A first-time visitor's hesitation on this page is not the price — the price is stated twice above
the fold. It is not knowing what pressing the button commits them to: whether somebody will call,
whether they have to be available, whether a card is about to be charged by a stranger. Three
short answers, immediately beneath the button, cost one line and remove all three questions.
Sized and coloured as a caption so it supports the CTA rather than competing with it, and given a
real top margin because `.hero-grid > *` zeroes the block margins of every hero child. */
.hero-grid > .btn-row { margin-top: 1.25rem; }
.cta-reassure {
margin-top: .7rem;
color: var(--muted);
font-size: .9rem;
line-height: 1.5;
max-width: none;
}
.hero-grid > .cta-reassure { margin-top: .7rem; }
.center .cta-reassure { margin-top: .8rem; }
/* WHO IS BEHIND THE BUTTON, READ IN THE SAME GLANCE AS THE BUTTON.
The credential used to sit under the H1, a screen away from the ask on a phone. It answers a
question a first-time visitor asks at the moment of pressing, not at the moment of arriving, so
it now sits immediately above the CTA. Caption weight: it supports the ask, it is not a heading. */
.hero-trust {
margin-top: 1.25rem;
color: var(--ink-soft);
font-size: .95rem;
line-height: 1.5;
max-width: none;
}
.hero-grid > .hero-trust { margin-top: 1.25rem; }
/* THE SECOND ACTION, DEMOTED ON PURPOSE.
`How a session works` was a `btn-ghost btn-lg` sitting beside the booking button: the same size,
the same shape, and on a phone the same full width - two equal choices where the page has one
job. Real visitors reached this page and none of them reached /book/. It stays reachable, as a
text link under the ask and again in the nav, the three-steps section and the closing lines. */
.cta-secondary {
margin-top: .9rem;
font-size: .92rem;
color: var(--muted);
max-width: none;
}
.hero-grid > .cta-secondary { margin-top: .9rem; }
.cta-secondary a { color: var(--ink-soft); }
.cta-secondary a:hover { color: var(--accent-dk); }
.hero-offer.offer-center {
justify-self: center;
margin-inline: auto;
text-align: left;
}
.hero-offer .offer-regular {
margin-top: .2rem;
font-size: .9rem;
line-height: 1.4;
color: var(--muted);
}
/* 52rem (832px) rather than 60rem (960px): at tablet-landscape and small-laptop widths the
portrait used to drop a full screen below the introduction. Both columns still clear their
minimum comfortable measure at this width.
Named areas rather than DOM order, so the desktop composition is unchanged by the mobile fix:
the text stack occupies the left column and the portrait spans the full height of the right. */
@media (min-width: 52rem) {
.hero-grid {
grid-template-columns: 1.15fr .85fr;
/* The offer sits ABOVE the button: a reader sees what the button costs before deciding to press
it, and the price is the last thing read before the ask rather than a footnote after it. */
grid-template-areas:
"eyebrow portrait"
"title portrait"
"lede portrait"
"trust portrait"
"price portrait"
"cta portrait"
"reassure portrait"
"secondary portrait";
column-gap: clamp(2rem, 5vw, 4rem);
align-items: center;
align-content: center;
}
.hero-grid > .eyebrow { grid-area: eyebrow; }
.hero-grid > h1 { grid-area: title; }
.hero-grid > .portrait { grid-area: portrait; margin-block: 0; align-self: center; }
.hero-grid > .lede { grid-area: lede; }
.hero-grid > .hero-trust { grid-area: trust; }
.hero-grid > .btn-row { grid-area: cta; }
/* Named rather than auto-placed. With every cell of the template occupied, an unassigned hero
child lands in an IMPLICIT row after the price - which put the line that explains the button
below the offer card on desktop while source order kept it under the button on a phone. Rows
whose area no child claims collapse to zero height, so the heroes that carry fewer of these
elements are unchanged. */
.hero-grid > .cta-reassure { grid-area: reassure; }
.hero-grid > .cta-secondary { grid-area: secondary; }
.hero-grid > .hero-price { grid-area: price; }
.hero-grid > .hero-offer { grid-area: price; }
}
.portrait {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-warm);
aspect-ratio: 2 / 3;
max-width: 26rem;
margin-inline: auto;
box-shadow: 0 1px 2px rgba(29,27,24,.05), 0 12px 32px -12px rgba(29,27,24,.16);
}
/* On a phone the portrait is wider and shorter, and framed on the face rather than centred on the
whole 2:3 plate. Only lower-body space is cropped: the same files, the same intrinsic
dimensions, the same alt text. `object-position` at 28% from the top keeps head and shoulders in
view without scaling the type down to make room. */
@media (max-width: 51.999rem) {
.hero-grid > .portrait { aspect-ratio: 4 / 5; max-width: 20rem; }
.hero-grid > .portrait img { object-position: 50% 28%; }
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption { display: none; }
/* THE PROVIDER BYLINE — a portrait small enough to sit inside a line of copy.
/animal-reiki/ is a paid landing page that identified its practitioner in words only. It cannot
carry the full hero portrait: that page's first screen has to reach the CTA and the price, and a
20rem plate would push both off it, which is the exact fault the /remote-reiki/ rules above were
written to fix. So the SAME figure, the SAME files and the SAME srcset are rendered at byline
size beside the name.
The box is 4:5 rather than the standalone 2:3 because a wide crop keeps the face large at this
width, and `--radius` rather than `--radius-lg` because a 20px corner on a 76px box reads as a
blob. The shadow is lightened for the same reason — the hero's 32px spread is drawn for a plate
ten times this size. */
.provider { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.provider .portrait {
flex: 0 0 auto;
width: 4.75rem;
aspect-ratio: 4 / 5;
max-width: none;
margin-inline: 0;
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(29,27,24,.06), 0 6px 16px -8px rgba(29,27,24,.22);
}
/* `.portrait img` is `height: 100%`, and inside that percentage has nothing definite to
resolve against, so the image keeps its own 2:3 height and the frame clips the bottom off it by
overflow alone. Giving the frame's height makes `object-fit: cover` and
`object-position` do the work instead, which is what holds the face in place in a box this
small. Top-anchored: a 4:5 window on a 2:3 plate has ~19px of vertical slack here, and spending
all of it upward is what puts the eyes highest in the frame. */
.provider .portrait picture { display: block; height: 100%; }
.provider .portrait img { object-position: 50% 0; }
.provider p { margin: 0; max-width: 26rem; }
.provider .provider-name { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: -0.01em; }
.provider .provider-note { color: var(--muted); font-size: .95rem; line-height: 1.45; }
@media (min-width: 52rem) { .provider .portrait { width: 5.5rem; } }
/* ---------------------------------------------------------------- trust facts */
.facts { display: grid; gap: 1px; background: var(--border); border-block: 1px solid var(--border); }
@media (min-width: 46rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--bg); padding: 1.5rem 1.4rem; }
.fact strong { display: block; font-family: var(--font-head); font-size: 1.2rem; margin-bottom: .2rem; }
.fact span { color: var(--muted); font-size: .9rem; line-height: 1.45; display: block; max-width: none; }
/* ---------------------------------------------------------------- content */
.grid-2 { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 46rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem);
}
.card h3 { font-size: var(--step-1); }
.card p:last-child { margin-bottom: 0; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem; }
.steps li { counter-increment: step; padding-left: 3.25rem; position: relative; max-width: var(--measure); }
.steps li::before {
content: counter(step); position: absolute; left: 0; top: -.1rem;
width: 2.25rem; height: 2.25rem; border-radius: 50%;
background: var(--accent-tint); color: var(--accent-dk);
display: grid; place-items: center; font-weight: 600; font-size: .95rem;
font-family: var(--font-body);
}
.steps li strong { display: block; margin-bottom: .15rem; }
.checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.checks li { padding-left: 1.9rem; position: relative; }
.checks li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: .7rem; height: .7rem; border-radius: 50%;
border: 2px solid var(--accent);
}
.plain-list { padding-left: 1.25rem; }
.plain-list li { margin-bottom: .5rem; }
/* ---------------------------------------------------------------- pricing */
.prices { display: grid; gap: 1.25rem; margin-top: 2rem; }
/* Eight lengths: two per row on a tablet, four on a wide screen. */
@media (min-width: 34rem) { .prices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .prices { grid-template-columns: repeat(4, 1fr); } }
.price {
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem; background: var(--bg); display: flex; flex-direction: column;
}
.price.lead { border-color: var(--accent); background: var(--accent-tint); }
.price .dur { font-family: var(--font-head); font-size: var(--step-2); margin: 0 0 .1rem; }
.price .amt { font-size: 1.6rem; font-weight: 600; color: var(--accent-dk); margin: 0 0 .5rem; }
.price .note { color: var(--muted); font-size: .9rem; margin: 0; }
/* The lead card leads with the first-session rate; the standing rate sits under it, smaller. */
.price .regular { color: var(--muted); font-size: .9rem; margin: -.3rem 0 .5rem; }
.price .tag {
display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--accent-dk); font-weight: 700; margin-bottom: .6rem;
}
/* ---------------------------------------------------------------- FAQ */
.faq { margin-top: 2rem; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
font-weight: 600; font-size: 1.05rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
font-size: 1.4rem; color: var(--accent); font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 0 1.35rem; }
.faq .answer p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------- disclaimer */
.disclaimer {
border: 1px solid var(--border); border-left: 3px solid var(--accent);
border-radius: var(--radius); padding: 1.35rem 1.5rem; background: var(--bg-soft);
}
.disclaimer p { font-size: .95rem; color: var(--ink-soft); margin-bottom: .6rem; }
.disclaimer p:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------- booking */
.booking-shell {
background: var(--bg-soft); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2rem);
}
noscript .booking-fallback { display: block; }
/* ---------------------------------------------------------------- prose (policies) */
.prose h2 { font-size: var(--step-2); margin-top: 2.75rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; font-family: var(--font-body); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose .updated { color: var(--muted); font-size: .9rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { color: var(--muted); font-weight: 600; }
.table-scroll { overflow-x: auto; }
/* ---------------------------------------------------------------- footer */
.site-footer {
border-top: 1px solid var(--border); background: var(--bg-soft);
padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; margin-top: 0;
}
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: 1rem; font-family: var(--font-body); margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.site-footer a:hover { color: var(--accent-dk); text-decoration: underline; }
/* The footer's brand link measured 93x21, the one control on the site under the 24x24 minimum in
WCAG 2.5.8 (AA). Everything else already cleared it. `inline-flex` plus the min-height gives it a
real box without moving anything around it. */
.site-footer .brand { display: inline-flex; align-items: center; min-height: 24px; }
.footer-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.footer-note p { font-size: .84rem; color: var(--muted); max-width: 46rem; }
/* ---------------------------------------------------------------- misc */
.center { text-align: center; }
.center p, .center h2, .center .lede { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 1.1rem; }
.pill-note {
display: inline-block; background: var(--accent-tint); color: var(--accent-dk);
border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; font-weight: 600;
}
/* ---------------------------------------------------------------- mobile booking bar */
/* THE ASK, KEPT WITHIN REACH ON THE ONE PAGE THAT IS PAID FOR.
Most of the traffic bought for /remote-reiki/ is on a phone, and a phone reader who scrolls past
the hero has no booking control on screen again until the closing section - most of the page with
nothing to press. The bar is a second instance of the SAME action at the SAME price. It adds no
new offer, no countdown, no interruption, and nothing that is not already stated above it.
PHONE ONLY, AND ONLY ON THIS PAGE. Above 51.999rem the hero button and the header button are
both still on screen, so there is nothing to restore and the bar would only cover copy.
IT CANNOT SHIFT THE LAYOUT, and that is by construction rather than by measurement. `position:
fixed` takes the bar out of flow, so nothing moves when it appears or goes. Nothing is reserved
for it either: site.js hides it whenever another booking button or the footer is on screen, so
it never covers the closing button, the policies links or the copyright line, and the footer
ends where its content ends. (It used to reserve 6rem on the footer against a bar that stayed up
through it. That bar and that blank strip are both gone.)
Z-INDEX BELOW THE HEADER's 40, so an open mobile menu is never covered by it.
It is display:none until `site.js` adds `.is-visible`. With JavaScript off it simply never
appears, which is the same progressive-enhancement bargain the rest of this site makes: the hero
button, the mid-page button and the closing button are all still there and all still work. */
.book-bar {
display: none;
position: fixed;
inset: auto 0 0 0;
z-index: 30;
padding: .7rem clamp(1rem, 5vw, 1.5rem);
padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.94);
backdrop-filter: saturate(140%) blur(8px);
border-top: 1px solid var(--border);
}
.book-bar .btn { display: block; width: 100%; text-align: center; }
@media (max-width: 51.999rem) {
body[data-page="remote-reiki"] .book-bar.is-visible { display: block; }
}
/* ---------------------------------------------------------------- landing page: benefits */
/* THREE SHORT PROMISES, NOT SIX CARDS. A hairline above each and nothing else: the copy is three
lines long and a box around three lines reads as packaging. Stacked on a phone, side by side from
tablet width, where the row is short enough to be read as one thought. */
.benefits { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem 2.5rem; }
/* Three equal columns from tablet width up, aligned to the same top hairline. `minmax(0, 1fr)`
rather than `1fr` so a long word in one column cannot widen it and push the others. */
@media (min-width: 46rem) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.benefits li { max-width: none; padding-top: 1.1rem; border-top: 1px solid var(--border-str); }
.benefits h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.benefits p { margin: 0; color: var(--ink-soft); max-width: 22rem; }
/* ---------------------------------------------------------------- landing page: client words */
/* Words clients supplied for publication, set as quotations and nothing more. Serif for the words
themselves so they read as speech rather than as marketing copy, a single quotation mark in the
accent colour as the only ornament, and the name set small beneath. No stars, no badges, no
counts - nothing that would imply a rating system this site does not have. */
.quotes { display: grid; gap: 1.25rem; margin-top: 2rem; }
/* Phones stack the cards. From tablet width the first three sit in one equal row and the last two
in a narrower centred pair, every card in a row the same height (grid stretch, and the
blockquote below is `flex: 1`, so the names sit on one baseline across the row). */
@media (min-width: 46rem) {
.quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.quotes.quotes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 54rem; margin-inline: auto; }
}
.quotes.quotes-2 { margin-top: 0; }
.quote {
margin: 0;
display: flex; flex-direction: column;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: clamp(1.4rem, 3vw, 1.9rem);
}
.quote::before {
content: "\201C";
display: block;
font-family: var(--font-head); font-size: 2.6rem; line-height: .6;
color: var(--accent); opacity: .55;
height: 1.1rem; margin-bottom: .6rem;
}
.quote blockquote { margin: 0; flex: 1; }
.quote blockquote p {
margin: 0; max-width: none;
font-family: var(--font-head); font-size: 1.08rem; line-height: 1.55; color: var(--ink);
}
.quote figcaption { margin-top: 1.1rem; font-size: .9rem; color: var(--muted); }
.quote figcaption strong { color: var(--ink-soft); font-weight: 600; }
/* A quiet line beneath a list - the one phone/video statement in the steps, the FAQ's pointer. */
.aside-note { margin-top: 1.5rem; color: var(--muted); font-size: .95rem; }
.center .aside-note { margin-inline: auto; }