/* ============================================================================
PROFINITY WELLNESS — site-wide stylesheet · elevation pass 2 (2 Aug 2026)
Canonical spec: ../Brand_Style_Guide_Website_2026-08-02.md
Elevation notes (Tim, 2 Aug): base lightened from #F7F4EF to a more luminous
near-white cream; depth via white cards + layered daylight washes; brushed-
gold buttons with a slow sheen; fine gold ornament details; gentle reveal
motion (700–900ms, reduced-motion safe). Still quiet luxury: gold stays
jewellery, shadows stay soft, nothing fast, nothing theatrical.
============================================================================ */
:root{
/* colour system — spec §2, base lightened per Tim's request */
--cream:#FBF9F5; /* principal background (luminous) */
--cream-deep:#F7F4EF; /* spec cream — alternating quiet bands */
--ivory:#F4EEE4; /* warm ivory panels */
--beige:#EAE0CF; /* secondary surfaces, hovers */
--taupe:#D8C7B1; /* borders, dividers, selected states */
--stone:#E9E4DC; /* neutral UI, separation */
--white:#FFFFFF; /* cards — depth against cream */
--gold:#D8B77A; /* champagne gold — accent only */
--gold-deep:#C6A360; /* hover gold / text-safe large gold */
--gold-hi:#E9D2A2; /* brushed-gold highlight */
--head:#6F5C4A; /* deep taupe — headings */
--ink:#2F2A26; /* warm charcoal — body */
--mute:#8A7D71; /* muted taupe grey — supporting */
--border:rgba(111,92,74,.16);
--shadow:0 10px 35px rgba(80,65,50,.06);
--shadow-lift:0 24px 70px rgba(80,65,50,.10);
--ok:#6B7F5E;
--serif:"Playfair Display","Iowan Old Style",Palatino,Georgia,serif;
--sans:"Montserrat","Avenir Next",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--r-card:16px; --r-btn:6px; --r-input:6px; --r-img:22px;
--ease:all 250ms ease;
--ease-slow:all 450ms cubic-bezier(.25,.46,.45,.94);
/* aliases for legacy inline styles in the HTML */
--ink-2:var(--ink); --ink-3:var(--mute); --sand:var(--beige);
--gold-dp:var(--gold-deep); --r:var(--r-img);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--cream)}
/* ---------------------------------------------------------------------------
THE GROUND — one continuous lit plaster surface behind the whole site.
Four fixed layers: limewash grain (§17 "smooth plaster"), a daylight source
top-left, a champagne pool right, and warm floor light. Because it is
fixed, content scrolls OVER a stable light source — that parallax-without-
motion is what reads as physical depth rather than a painted hex value.
Section bands below are translucent, so they filter this ground instead of
covering it.
--------------------------------------------------------------------------- */
body{margin:0;color:var(--ink);font-family:var(--sans);
font-weight:400;font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;
background-color:var(--cream);
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(58% 48% at 14% 6%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 62%),
radial-gradient(52% 44% at 94% 30%, rgba(233,210,162,.15) 0%, rgba(233,210,162,0) 66%),
radial-gradient(60% 42% at 46% 104%, rgba(216,183,122,.10) 0%, rgba(216,183,122,0) 70%);
background-repeat:repeat,no-repeat,no-repeat,no-repeat;
background-size:160px 160px,cover,cover,cover;
background-attachment:fixed,fixed,fixed,fixed;
background-blend-mode:multiply,normal,normal,normal}
/* the grain tile is deliberately faint — it should be felt, never seen */
@supports(background-blend-mode:multiply){
body{background-color:color-mix(in srgb,var(--cream) 97%,#fff)}
}
/* fixed attachment janks on iOS scroll — pin to scroll on small screens */
@media(max-width:820px){
body{background-attachment:scroll,scroll,scroll,scroll}
}
img{max-width:100%;display:block}
a{color:inherit;transition:var(--ease)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.narrow{max-width:700px}
/* Large serif needs NEGATIVE tracking and tighter leading to look set rather
than typed — this is most of the difference between a luxury brand and a
template. Optical sizing and old-style figures where the font offers them. */
h1,h2{font-family:var(--serif);font-weight:400;color:var(--head);
line-height:1.07;letter-spacing:-.018em;margin:0;
font-variant-ligatures:common-ligatures discretionary-ligatures;
text-wrap:balance}
h1{font-size:clamp(44px,6.8vw,88px)}
h2{font-size:clamp(30px,4.3vw,54px);line-height:1.1;letter-spacing:-.015em}
/* the italic gold line is a display cut — it can afford to be looser */
h1 .goldline,h2 .goldline{letter-spacing:-.008em}
h3{font-family:var(--sans);font-weight:500;font-size:19px;color:var(--head);
letter-spacing:.01em;margin:0}
p{margin:0 0 1.2em}
.lede{font-size:clamp(18px,2vw,20px);color:var(--ink);font-weight:400;line-height:1.7}
section{padding:clamp(84px,10vw,156px) 0;position:relative}
.rule{height:1px;background:var(--border);border:0;margin:0}
.center{text-align:center}
/* eyebrow — now carries a fine gold jewel-line */
.kicker{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.kicker.gold{color:var(--gold-deep)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important}
html{scroll-behavior:auto}
.reveal{opacity:1!important;transform:none!important}
}
/* accessibility: skip link + a visible focus ring everywhere (WCAG 2.2 AA) */
.skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);
color:#2F2A26;padding:14px 24px;font-size:13px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
border-radius:0 0 var(--r-btn) 0}
.skiplink:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
/* build note — delete before publishing */
.buildnote{background:#4A3410;color:#FFEFD2;font-size:13.5px;line-height:1.6;padding:12px 24px}
.buildnote b{color:#FFC759}
.buildnote a{color:#FFC759}
/* ---------------- reveal-on-scroll (js/reveal.js adds .reveal, then .in) ---- */
.reveal{opacity:0;transform:translateY(26px);
transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.24s}
.reveal[data-d="3"]{transition-delay:.36s}
/* ---------------- header ---------------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(251,249,245,.92);
backdrop-filter:blur(12px);border-bottom:1px solid transparent;
transition:var(--ease)}
header.site.scrolled{border-bottom-color:var(--border);
box-shadow:0 12px 40px rgba(80,65,50,.06)}
/* three-column lockup: wordmark left, nav truly centred, contact right.
Nothing in this bar is permitted to wrap — a wrapping nav is the single
loudest "cheap website" signal there is. */
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:36px;padding:24px 0}
.mark{font-family:var(--serif);font-size:23px;letter-spacing:.03em;color:var(--head);
text-decoration:none;line-height:1.05;white-space:nowrap}
.mark i{font-style:italic;color:var(--gold-deep)}
.mark span{display:block;font-family:var(--sans);font-size:8.5px;font-weight:500;
letter-spacing:.34em;text-transform:uppercase;color:var(--mute);
margin-top:6px;white-space:nowrap}
nav.main{display:flex;justify-self:center;gap:clamp(11px,1.6vw,24px)}
nav.main a{position:relative;font-size:11px;font-weight:500;letter-spacing:.13em;
text-transform:uppercase;color:var(--head);text-decoration:none;
padding:8px 0;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
background:var(--gold);transition:right .35s cubic-bezier(.22,.61,.36,1)}
nav.main a:hover{color:var(--gold-deep)}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{right:0}
nav.main a[aria-current="page"]{color:var(--gold-deep)}
/* contact sits in its own quiet column, hairline-separated from the nav */
.bar .tel{font-size:12px;letter-spacing:.06em;color:var(--mute);text-decoration:none;
white-space:nowrap;text-align:right;line-height:1.5}
.bar .tel span{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
color:var(--mute);margin-bottom:3px}
.bar .tel b{display:block;font-family:var(--serif);font-size:17px;font-weight:400;
letter-spacing:.01em;color:var(--head)}
.bar .tel:hover b{color:var(--gold-deep)}
@media(max-width:1180px){
.bar{grid-template-columns:auto auto;gap:20px}
nav.main{justify-self:end}
.bar .tel{display:none}
}
@media(max-width:1080px){
.bar{flex-wrap:wrap}
nav.main{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
.bar .tel{display:none}
}
/* ---------------- hero: layered daylight, not flat fill -------------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);
background:transparent}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(75% 90% at 78% 6%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 55%),
radial-gradient(60% 70% at 8% 100%, rgba(216,183,122,.14) 0%, rgba(216,183,122,0) 60%),
linear-gradient(180deg,rgba(244,238,228,.85) 0%,rgba(251,249,245,0) 78%)}
.hero::after{content:"";position:absolute;width:56vw;height:56vw;right:-18vw;top:-28vw;
border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side, rgba(233,210,162,.22), rgba(233,210,162,0) 72%);
animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-6vw,4vw,0)}}
.herogrid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:44px}}
.hero{padding-top:clamp(64px,8vw,116px)}
.hero h1{margin:24px 0 30px}
.hero h1 em{font-style:italic;color:var(--gold-deep)}
/* an over-long measure reads as a blog; hold the lede to editorial width */
.hero .lede{max-width:44ch}
/* the home hero's own top padding (was an inline style on the section) */
.hero.homehero{padding-top:clamp(46px,6vw,80px)}
.herocta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* ---------------------------------------------------------------------------
SHORT-VIEWPORT HERO — on a 1366x768 laptop, still the commonest screen, the
primary CTA sat 72px BELOW the fold. On a site whose only job is capturing a
waiting list, the button was invisible without scrolling.
§4 says not to compress in order to fit more above the fold, and that stands:
tall screens keep the full spacing. This only tightens where the alternative
is a hidden call to action, which is not whitespace, it is a dead page.
--------------------------------------------------------------------------- */
@media(min-width:900px) and (max-height:820px){
.hero.homehero{padding-top:28px}
.hero h1{margin:12px 0 18px}
.hero .lede{margin-bottom:16px}
.herocta{margin-top:18px}
}
/* credentials as a hairline-ruled row, not bulleted text */
.trustrow{display:flex;flex-wrap:wrap;margin-top:44px;padding-top:22px;
border-top:1px solid var(--border);
font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.trustrow span{display:flex;align-items:center;padding:2px 22px 2px 0;margin-right:22px;
border-right:1px solid var(--border)}
.trustrow span:last-child{border-right:0;margin-right:0;padding-right:0}
.trustrow i{display:none}
@media(max-width:560px){
.trustrow span{border-right:0;margin-right:0;padding:3px 0;flex:0 0 100%}
}
/* ---------------------------------------------------------------------------
EDITORIAL COLOUR GRADE — applied ONLY to the legacy clinic photography
(mustard sofa, honey oak slats), which sits outside the brand's warm-neutral
range. The commissioned interior set is already on-palette and must NOT be
graded — it would only wash it out. Tag legacy shots with .legacy-photo.
--------------------------------------------------------------------------- */
.legacy-photo{filter:saturate(.52) sepia(.17) contrast(1.03) brightness(1.04)}
/* ---------------------------------------------------------------------------
ASPECT-RATIO GUARD — read this before adding any photograph.
Every carries width/height ATTRIBUTES at its natural pixel size, which
is correct: the browser reserves the right box before the file arrives and
the page does not jump. But an attribute height is a real CSS height. The
moment a rule or a grid column narrows the width, the height stays pinned at
the attribute, and the default object-fit:fill stretches the picture to suit.
That is exactly what happened: the conference photograph was squashed 34%
horizontally and Dr Tim's portrait 62%, on the live site, for a day. Only the
REAL photographs were affected — the shaped frames below set their own height
and were fine — so the pictures that were actually true were the ones that
looked wrong.
height:auto restores the ratio. Applied to the plain photographic contexts
only; .arch, .circlephoto and .imageband deliberately fill a shaped box with
object-fit:cover and must keep height:100%.
--------------------------------------------------------------------------- */
img{max-width:100%}
.proof img,.people img,.wrap.people img{width:100%;height:auto}
/* two-tone display headline */
h1 .goldline,h2 .goldline{display:block;color:var(--gold-deep);font-style:italic;font-weight:400}
/* ---------------- buttons: brushed gold with a slow sheen ------------------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(150,118,62,.35);cursor:pointer;font-family:var(--sans);
font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
color:#3A2E1C;background:linear-gradient(158deg,var(--gold-hi) 0%,var(--gold) 46%,var(--gold-deep) 100%);
border-radius:var(--r-btn);min-height:56px;padding:0 42px;text-align:center;
text-decoration:none;transition:var(--ease-slow);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);
transform:skewX(-18deg);transition:left .7s cubic-bezier(.22,.61,.36,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(166,132,72,.28)}
.btn:hover::after{left:130%}
.btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--head);border-color:rgba(111,92,74,.32);
box-shadow:none}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:var(--white);border-color:var(--gold);
box-shadow:0 10px 26px rgba(80,65,50,.08)}
.hero .btn{min-height:58px}
.btn.wide{width:100%}
/* ---------------- cards & panels: white on cream = depth ------------------- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
box-shadow:var(--shadow-lift);padding:clamp(28px,3.4vw,44px);position:relative}
.card::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;
background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);
border-radius:0 0 2px 2px}
.card h3{margin-bottom:4px}
.card .sub{font-size:13.5px;color:var(--mute);margin-bottom:20px;line-height:1.6}
/* Bands are translucent and fade in/out at their seams, so they read as light
falling across one continuous surface rather than stacked colour blocks. */
.soft{background:linear-gradient(180deg,
rgba(247,244,239,0) 0%, rgba(247,244,239,.88) 11%,
rgba(247,244,239,.88) 89%, rgba(247,244,239,0) 100%)}
.sandband{background:linear-gradient(180deg,
rgba(244,238,228,0) 0%, rgba(244,238,228,.92) 13%,
rgba(244,238,228,.92) 87%, rgba(244,238,228,0) 100%)}
/* faint arch motif behind the quiet bands — the architecture of the room,
echoing the curved openings in the brand photography (§5) */
.sandband::before{content:"";position:absolute;left:50%;top:50%;
width:min(560px,78vw);aspect-ratio:1/1.35;transform:translate(-50%,-50%);
border:1px solid var(--gold);opacity:.13;pointer-events:none;
border-radius:999px 999px 18px 18px}
.dark{background:
radial-gradient(70% 60% at 22% 0%, rgba(255,246,230,.16) 0%, rgba(255,246,230,0) 60%),
linear-gradient(165deg,#77634F 0%,var(--head) 55%,#64523F 100%);
color:#F3EDE4}
.dark h2{color:#FCF8F1}
.dark .lede{color:#E7DCCD}
.dark .kicker{color:var(--gold-hi)}
.dark .kicker::before{background:var(--gold-hi)}
.dark strong{color:#FCF8F1}
.shelf{background:var(--white);border:1px solid var(--border);
border-radius:var(--r-card);padding:34px 36px 30px;box-shadow:var(--shadow)}
/* keep content above the decorative arch motif */
.sandband > .wrap{position:relative;z-index:1}
/* ---------------------------------------------------------------------------
IMAGE BAND — full-bleed photograph with a frosted panel floating over it.
Spec §8.5: the section that shows what visiting actually feels like. No dark
gradient across the image (§8.2) — the panel carries the legibility instead.
--------------------------------------------------------------------------- */
.imageband{padding:0;position:relative;display:flex;align-items:center;
min-height:min(76vh,700px);overflow:hidden}
.imageband > img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;z-index:0}
.imageband .wrap{position:relative;z-index:1;width:100%}
.imageband .panel{background:rgba(251,249,245,.90);backdrop-filter:blur(10px) saturate(105%);
border:1px solid rgba(255,255,255,.6);border-radius:var(--r-card);
padding:clamp(34px,4vw,58px);max-width:520px;
box-shadow:0 40px 90px -50px rgba(80,65,50,.5)}
.imageband .panel h2{margin:16px 0 18px}
.imageband .panel p:last-of-type{margin-bottom:0}
.imageband.right .panel{margin-left:auto}
@media(max-width:700px){
.imageband{min-height:0;padding:0}
.imageband > img{position:relative;height:56vw;min-height:260px}
.imageband .panel{max-width:none;margin:-52px 0 0;border-radius:var(--r-card)}
}
/* ---------------------------------------------------------------------------
SHADOW PLATE — the real botanical shadow photograph, multiplied over a pale
band. §17 "soft shadows": depth without darkening the experience.
--------------------------------------------------------------------------- */
.shadowplate{position:relative;isolation:isolate}
.shadowplate::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:url("../img/shadow-botanical.jpg") center/cover no-repeat;
mix-blend-mode:multiply;opacity:.38}
.shadowplate > *{position:relative;z-index:1}
/* ---------------- forms ---------------- */
label{display:block;font-size:11.5px;font-weight:500;letter-spacing:.1em;
text-transform:uppercase;color:var(--head);margin:0 0 7px}
input,select,textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
background:var(--cream);border:1px solid var(--border);border-radius:var(--r-input);
padding:14px 16px;transition:var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
box-shadow:0 0 0 3px rgba(216,183,122,.18);background:#fff}
.field{margin-bottom:18px}
.finePrint{font-size:12px;color:var(--mute);margin:13px 0 0;line-height:1.55}
.ok{display:none;text-align:center;padding:30px 8px}
.ok .tick{width:46px;height:46px;border-radius:50%;background:var(--ok);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 16px}
/* ---------------- quotes ---------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:40px}
.q{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
padding:24px 26px;font-family:var(--serif);font-style:italic;
font-size:18.5px;line-height:1.55;color:var(--head);box-shadow:var(--shadow)}
.q::before{content:"“";display:block;font-size:34px;line-height:.6;color:var(--gold);margin-bottom:10px}
/* ---------------- steps ---------------- */
.steps{counter-reset:s;margin-top:44px;display:grid;gap:2px}
.step{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
padding:32px 0;border-top:1px solid var(--border)}
.step:last-child{border-bottom:1px solid var(--border)}
.step .n{counter-increment:s;font-family:var(--serif);font-size:20px;color:var(--gold-deep);
width:52px;height:52px;border:1px solid var(--gold);border-radius:50%;
display:flex;align-items:center;justify-content:center;flex:none;
background:radial-gradient(closest-side,rgba(233,210,162,.25),transparent)}
.step .n::before{content:counter(s)}
.step h3{margin-bottom:8px}
.step p{margin:0;color:var(--ink)}
.dark .step{border-color:rgba(243,237,228,.22)}
.dark .step h3{color:#FCF8F1}
.dark .step p{color:#E7DCCD}
.dark .step .n{border-color:rgba(233,210,162,.6);color:var(--gold-hi);background:none}
/* ---------------- the eight ---------------- */
.eight{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
background:var(--border);border:1px solid var(--border);
border-radius:var(--r-card);overflow:hidden;margin-top:36px;box-shadow:var(--shadow)}
.e{background:var(--white);padding:20px 20px;transition:var(--ease)}
.e:hover{background:var(--cream)}
.e b{display:block;font-family:var(--serif);font-weight:500;font-size:16px;
color:var(--head);margin-bottom:3px}
.e span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.e.paid{background:var(--ivory)}
.e.paid b{color:var(--gold-deep)}
/* ===========================================================================
THE PROFINITY SPIRAL - interactive diagram (v2, 3 Aug 2026)
A true Archimedean spiral: the eight domains sit along a line that grows
outward from the centre, because that is the actual claim - free
foundations first, clinic work as the accelerator once they compound.
The four solid coloured runs are the four couples; the thin dashed runs
between them are the hand-offs.
COLOUR: a deliberate extension of the style guide (which specifies gold as
the only accent). Eight muted earth tones, all low-saturation and warm, so
each domain is identifiable without the page becoming loud.
Progressive enhancement: the markup is a readable list; JS upgrades it.
=========================================================================== */
:root{
--d-food:#7F8B5E; --d-supplements:#C2993F;
--d-connection:#C4826F; --d-recovery:#88A093;
--d-movement:#B36B4A; --d-sleep:#77708C;
--d-clinic:#A9793C; --d-home:#96805F;
}
.spiral{margin-top:44px}
.spiral-list{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
background:var(--border);border:1px solid var(--border);
border-radius:var(--r-card);overflow:hidden}
.spiral-list li{background:var(--white);padding:22px 24px}
.spiral-list h3{font-family:var(--serif);font-weight:500;font-size:19px;margin-bottom:4px}
.spiral-list p{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink)}
.spiral-list .cost{font-size:10.5px;font-weight:500;letter-spacing:.18em;
text-transform:uppercase;color:var(--mute)}
.spiral.is-live .spiral-list{display:none}
.spiral-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(26px,3.5vw,52px);align-items:center}
@media(max-width:940px){.spiral-stage{grid-template-columns:1fr;justify-items:center}}
.spiral-wheel{display:block;width:100%;max-width:660px;height:auto;
overflow:visible;touch-action:manipulation}
.sp-run{fill:none;stroke-linecap:round;transition:stroke-width .4s ease,opacity .4s ease}
.sp-run.pair{stroke-width:7;opacity:.9}
.sp-run.hop{stroke:var(--taupe);stroke-width:2;stroke-dasharray:1 7;opacity:.85}
.sp-tail{fill:none;stroke:var(--taupe);stroke-width:2;stroke-dasharray:1 7;opacity:.6;stroke-linecap:round}
.sp-node{cursor:pointer}
.sp-node .halo{fill:var(--c);opacity:0;transition:opacity .4s ease}
.sp-node .disc{fill:var(--white);stroke:var(--c);stroke-width:2;
transition:fill .4s ease,stroke-width .4s ease}
.sp-node .ico{fill:none;stroke:var(--c);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s ease}
.sp-node .lbl{font-family:var(--sans);font-size:13.5px;font-weight:600;
letter-spacing:.05em;text-transform:uppercase;fill:var(--head);
text-anchor:middle;transition:fill .4s ease;
paint-order:stroke;stroke:var(--cream);stroke-width:4px;stroke-linejoin:round}
.dark .sp-node .lbl{stroke:#6F5C4A}
/* On a phone the wheel can only be ~330px wide, which shrinks the labels to
about 9px. Scale the type up in viewBox units so they stay legible; measured
at 375px to confirm the labels still do not collide. */
@media(max-width:620px){
.sp-node .lbl{font-size:17.5px;letter-spacing:.02em;stroke-width:5px}
}
.sp-node:hover .halo{opacity:.16}
.sp-node[aria-selected="true"] .halo{opacity:.24}
.sp-node[aria-selected="true"] .disc{fill:var(--c);stroke-width:3}
.sp-node[aria-selected="true"] .ico{stroke:#fff}
.sp-node[aria-selected="true"] .lbl{fill:var(--c)}
.sp-node:focus{outline:none}
.sp-node:focus-visible .disc{stroke:var(--ink);stroke-width:3.5}
.sp-panel{width:100%;background:var(--white);border:1px solid var(--border);
border-top:4px solid var(--c,var(--gold));border-radius:var(--r-card);
padding:clamp(26px,3vw,38px);box-shadow:var(--shadow);min-height:340px}
.sp-panel .ptop{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.sp-panel .pico{width:44px;height:44px;flex:none;fill:none;stroke:var(--c);
stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sp-panel .cost{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:#fff;background:var(--c);border-radius:999px;padding:5px 13px}
.sp-panel .stage{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--mute);margin-left:10px}
.sp-panel h3{font-family:var(--serif);font-weight:500;font-size:clamp(25px,3vw,32px);margin:14px 0 12px}
.sp-panel p{margin:0 0 14px;color:var(--ink);font-size:15.5px;line-height:1.72}
.sp-panel .why{margin:0;padding:14px 16px;background:var(--cream);border-radius:10px;
font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.sp-panel .why b{color:var(--head);font-weight:600}
.sp-panel .pairnote{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);
font-size:13px;color:var(--mute)}
.sp-panel .pairnote b{color:var(--head);font-weight:600}
.sp-fade{animation:spfade .5s cubic-bezier(.22,.61,.36,1)}
@keyframes spfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dark .spiral-list li{background:#6A5947}
.dark .spiral-list{background:rgba(243,237,228,.2);border-color:rgba(243,237,228,.2)}
.dark .spiral-list h3{color:#FCF8F1}
.dark .spiral-list p{color:#E7DCCD}
.dark .sp-node .disc{fill:#5E4E3E}
.dark .sp-node .lbl{fill:#F3EDE4}
.dark .sp-node[aria-selected="true"] .lbl{fill:#FCF8F1}
.dark .sp-run.hop,.dark .sp-tail{stroke:rgba(216,183,122,.5)}
.dark .sp-panel{background:rgba(47,42,38,.24);border-color:rgba(233,210,162,.28);box-shadow:none}
.dark .sp-panel h3{color:#FCF8F1}
.dark .sp-panel p{color:#E7DCCD}
.dark .sp-panel .why{background:rgba(47,42,38,.35);color:#E7DCCD}
.dark .sp-panel .why b{color:#FCF8F1}
.dark .sp-panel .pairnote{border-color:rgba(243,237,228,.2);color:#C9BBA9}
.dark .sp-panel .pairnote b{color:#FCF8F1}
.dark .sp-panel .stage{color:#C9BBA9}
.sp-split{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:center;
margin-top:26px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sp-split span{display:flex;align-items:center;gap:9px}
.sp-split i{width:12px;height:12px;border-radius:50%;border:2px solid var(--d-food);
background:transparent;flex:none}
.sp-split i.paid{border-color:var(--d-clinic);background:var(--d-clinic)}
.dark .sp-split{color:#C9BBA9}
/* ---------------- the four couples ---------------- */
.loops{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:44px}
.loop{position:relative;background:var(--white);border:1px solid var(--border);
border-radius:var(--r-card);padding:30px 26px 26px;box-shadow:var(--shadow);
transition:var(--ease-slow)}
.loop:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.loop::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c);
border-radius:var(--r-card) var(--r-card) 0 0}
.loop .stagenum{font-family:var(--serif);font-size:13px;color:var(--c);letter-spacing:.2em}
.loop h3{font-family:var(--serif);font-weight:500;font-size:23px;margin:8px 0 4px;color:var(--head)}
.loop .pairing{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--c);margin-bottom:12px}
.loop p{margin:0;font-size:14.5px;line-height:1.68;color:var(--ink)}
.loop .infinity{width:54px;height:30px;margin-bottom:12px;fill:none;stroke:var(--c);
stroke-width:1.6;stroke-linecap:round}
/* ---------------- one engine, many goals ---------------- */
.weights{margin-top:40px}
.goalbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.goalbar button{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--head);background:var(--white);
border:1px solid var(--taupe);border-radius:999px;padding:13px 24px;cursor:pointer;
transition:var(--ease);min-height:44px}
.goalbar button:hover{border-color:var(--gold);background:var(--ivory)}
.goalbar button[aria-pressed="true"]{background:var(--head);color:var(--cream);border-color:var(--head)}
.wrow{display:grid;grid-template-columns:132px 1fr 52px;gap:16px;align-items:center;
padding:11px 0;border-bottom:1px solid var(--border)}
.wrow:last-of-type{border-bottom:0}
.wrow .wname{font-size:13.5px;font-weight:600;color:var(--head);display:flex;align-items:center;gap:9px}
.wrow .wname i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.wtrack{height:9px;background:var(--stone);border-radius:999px;overflow:hidden}
.wfill{height:100%;background:var(--c);border-radius:999px;width:0;
transition:width .85s cubic-bezier(.22,.61,.36,1)}
.wval{font-size:12px;color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}
.wnote{margin-top:26px;font-size:15px;color:var(--ink);line-height:1.72}
@media(max-width:620px){.wrow{grid-template-columns:104px 1fr 42px;gap:11px}
.wrow .wname{font-size:12.5px}}
/* ===========================================================================
THE WORKED EXAMPLE — ease x impact ranking + the twelve-month sequence
=========================================================================== */
.wex-start{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
padding:clamp(26px,3vw,38px);box-shadow:var(--shadow);margin-top:38px}
.wex-start h3{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:16px}
.wex-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-top:6px}
.wex-cols .lab{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--mute);margin-bottom:10px}
.wex-cols ul{margin:0;padding-left:18px}
.wex-cols li{font-size:14.5px;line-height:1.7;color:var(--ink);margin-bottom:5px}
.wex-quote{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.55;
color:var(--head);border-left:3px solid var(--gold);padding-left:18px;margin:0}
/* ranked top wins */
.wins{margin-top:40px;border:1px solid var(--border);border-radius:var(--r-card);
overflow:hidden;background:var(--border);display:grid;gap:1px}
.winhead,.win{display:grid;grid-template-columns:26px 1fr 92px 132px 62px;gap:16px;
align-items:center;background:var(--white);padding:15px 22px}
.winhead{background:var(--ivory);font-size:10px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--mute)}
.win .rank{font-family:var(--serif);font-size:17px;color:var(--mute)}
.win .what{font-size:15px;color:var(--ink);line-height:1.5}
.win .what b{display:block;color:var(--head);font-weight:600;font-size:15.5px}
.win .what i{font-style:normal;font-size:12.5px;color:var(--mute)}
.win .dom{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.win .dom em{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.win .scorebar{height:8px;background:var(--stone);border-radius:999px;overflow:hidden}
.win .scorebar span{display:block;height:100%;background:var(--c);border-radius:999px}
.win .score{font-size:13px;color:var(--head);font-weight:600;text-align:right;
font-variant-numeric:tabular-nums}
.win.free .score::after{content:" · free";font-weight:400;color:var(--mute);font-size:11px}
@media(max-width:820px){
.winhead{display:none}
.win{grid-template-columns:24px 1fr 58px;gap:12px;padding:15px 18px}
.win .dom,.win .scorebar{display:none}
}
/* the twelve-month sequence */
.phases{margin-top:44px;display:grid;gap:20px}
.phase{position:relative;display:grid;grid-template-columns:170px 1fr;gap:clamp(18px,3vw,38px);
background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
padding:28px clamp(22px,3vw,34px);box-shadow:var(--shadow);overflow:hidden}
.phase::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.phase .when{font-family:var(--serif);font-size:20px;color:var(--head);line-height:1.25}
.phase .when span{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-top:7px}
.phase h3{font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:9px;color:var(--head)}
.phase p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--ink)}
.phase p:last-child{margin-bottom:0}
.phase .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.phase .tags b{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--head);background:var(--ivory);border:1px solid var(--border);
border-radius:999px;padding:5px 12px}
.phase .cost{font-size:12px;color:var(--mute);margin-top:14px;display:block}
@media(max-width:760px){.phase{grid-template-columns:1fr;gap:14px}}
/* the refusals */
.wontdo{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.wont{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
padding:26px 24px;box-shadow:var(--shadow)}
.wont b{display:block;color:var(--head);font-size:15.5px;margin-bottom:7px}
.wont p{margin:0;font-size:14.5px;line-height:1.68;color:var(--ink)}
.wont .x{color:var(--gold-deep);font-weight:600;margin-right:6px}
/* ---------------- evidence grading ---------------- */
.grades{display:grid;gap:2px;margin-top:36px;border:1px solid var(--border);
border-radius:var(--r-card);overflow:hidden;background:var(--border)}
.grade{display:grid;grid-template-columns:84px 1fr;gap:20px;background:var(--white);
padding:20px 24px;align-items:start}
.grade .gtag{font-family:var(--serif);font-size:15px;color:#fff;background:var(--c);
border-radius:8px;padding:8px 0;text-align:center;letter-spacing:.05em}
.grade b{display:block;color:var(--head);font-size:15px;margin-bottom:3px}
.grade span{font-size:14px;color:var(--ink);line-height:1.6}
/* ---------------- refusal list ---------------- */
.refuse{margin-top:34px;display:grid;gap:18px}
.refuse div{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
font-size:16px;color:var(--ink)}
.refuse .x{color:var(--gold-deep);font-weight:500;font-size:17px;line-height:1.5}
.refuse b{color:var(--head);font-weight:600}
/* ---------------- treatment cards ---------------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:44px}
.tcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
padding:36px 32px;display:flex;flex-direction:column;gap:12px;
box-shadow:var(--shadow);transition:var(--ease-slow);position:relative;overflow:hidden}
.tcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:0;transition:var(--ease-slow)}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--taupe)}
.tcard:hover::before{opacity:1}
.tcard h3{font-family:var(--serif);font-weight:500;font-size:24px}
/* card illustration — same icon family as the Spiral */
.tcard .tico{width:34px;height:34px;fill:none;stroke:var(--gold-deep);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;margin:4px 0 2px;
transition:var(--ease-slow)}
.tcard:hover .tico{stroke:var(--head);transform:translateY(-2px)}
.tcard p{margin:0;color:var(--ink);font-size:15px;line-height:1.7;flex:1}
.tcard .tag{align-self:flex-start;font-size:10.5px;font-weight:500;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold-deep)}
.tcard a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:var(--head);text-decoration:none;border-bottom:1px solid var(--gold);
align-self:flex-start;padding-bottom:2px}
.tcard a:hover{color:var(--gold-deep)}
/* ---------------- arch photo frame + circle overlay ------------------------ */
.archwrap{position:relative}
/* only reserve the corner when an inset circle is actually present */
.archwrap:has(.circlephoto){padding-bottom:64px;padding-left:44px}
.arch{position:relative;border-radius:999px 999px var(--r-img) var(--r-img);
overflow:hidden;box-shadow:var(--shadow-lift);isolation:isolate}
.arch img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
object-position:50% 18%;
transition:transform 1.4s cubic-bezier(.22,.61,.36,1)}
.archwrap:hover .arch img{transform:scale(1.035)}
/* a hairline that follows the arch exactly, plus a whisper of warmth at the
base so the photograph settles into the page instead of being stuck on it */
.arch::after{content:"";position:absolute;inset:0;pointer-events:none;
border:1px solid rgba(216,183,122,.45);
border-radius:inherit;
box-shadow:inset 0 -70px 90px -60px rgba(111,92,74,.5)}
.archring{display:none}
.archcap{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:14.5px;
color:var(--mute);text-align:right;letter-spacing:.01em}
.circlephoto{position:absolute;left:0;bottom:0;width:42%;aspect-ratio:1;
border-radius:50%;overflow:hidden;border:6px solid var(--cream);
box-shadow:var(--shadow-lift)}
.circlephoto img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.archwrap{max-width:430px;margin:0 auto}
.archcap{text-align:center}}
/* ---------------------------------------------------------------------------
PROOF PHOTOGRAPH — documentary pictures of the summit we teach at.
These are the only images on the site that are not calm interiors: they are
reportage, they are darker, and they carry event branding. So they are framed
deliberately as evidence rather than atmosphere — held inside a cream mat with
a gold hairline, and always captioned, because the caption is what stops a
patient reading a conference hall as the clinic.
--------------------------------------------------------------------------- */
.proof{margin:40px 0 0}
.proof img{width:100%;border-radius:var(--r-img);display:block;
box-shadow:var(--shadow-lift)}
.proof .frame{position:relative;border-radius:var(--r-img);overflow:hidden;
background:var(--white);padding:0}
/* the same hairline the arch carries, so the reportage still reads as ours */
.proof .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
border:1px solid rgba(216,183,122,.45);border-radius:inherit}
.proof figcaption{margin-top:16px;font-family:var(--serif);font-style:italic;
font-size:14.5px;line-height:1.55;color:var(--mute);letter-spacing:.01em}
.proof figcaption b{font-style:normal;font-weight:500;color:var(--head)}
.dark .proof figcaption{color:#D2C8B8}
.dark .proof figcaption b{color:#FCF8F1}
/* Two documentary frames side by side — where it happened, and the room itself.
The pair is a portrait and a landscape, so they are centred against each other
at their own natural ratios rather than stretched to a common height: forcing
equal heights would crop the stage shot hard enough to clip the branding. */
.prooftwo{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(14px,2vw,26px);
align-items:center}
@media(max-width:760px){.prooftwo{grid-template-columns:1fr}}
/* ---------------- people ---------------- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.5vw,64px);align-items:center}
@media(max-width:820px){.people{grid-template-columns:1fr}}
.people img{border-radius:var(--r-img);box-shadow:var(--shadow-lift)}
/* ---------------- testimonial ---------------- */
.testi{text-align:center;max-width:820px;margin:0 auto}
.testi::before{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:0 auto 34px}
.testi blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(24px,3.4vw,36px);line-height:1.4;margin:0 0 22px;color:var(--head)}
.testi cite{font-style:normal;font-size:12px;letter-spacing:.18em;
text-transform:uppercase;color:var(--mute)}
/* ---------------- faq ---------------- */
details{border-top:1px solid var(--border);padding:22px 0}
details:last-of-type{border-bottom:1px solid var(--border)}
summary{cursor:pointer;font-weight:500;font-size:17px;color:var(--head);list-style:none;
display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold-deep);font-size:22px;font-weight:300;flex:none;
transition:var(--ease)}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;color:var(--ink)}
/* ---------------- price tables ---------------- */
table.price{width:100%;border-collapse:collapse;margin-top:28px;font-size:15.5px;
background:var(--white);border-radius:var(--r-card);overflow:hidden;
box-shadow:var(--shadow)}
table.price th{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:var(--mute);text-align:left;padding:16px;border-bottom:1px solid var(--taupe)}
table.price td{padding:18px 16px;border-bottom:1px solid var(--border);vertical-align:top}
table.price tr:last-child td{border-bottom:0}
table.price td.num{white-space:nowrap;font-family:var(--serif);font-size:18px;color:var(--head)}
table.price tr:hover td{background:var(--cream)}
table.price b{color:var(--head);font-weight:600}
.member{color:var(--gold-deep)}
/* ---------------- towns / find-us ---------------- */
.towns{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:34px}
.town{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
padding:18px 20px;font-size:14.5px;box-shadow:var(--shadow);transition:var(--ease)}
.town:hover{transform:translateY(-2px);border-color:var(--taupe)}
.town b{display:block;font-family:var(--serif);font-weight:500;font-size:16.5px;color:var(--head)}
.town span{color:var(--mute);font-size:12.5px;letter-spacing:.04em}
/* ---------------- footer ---------------- */
footer.site{background:linear-gradient(180deg,rgba(244,238,228,.55),rgba(244,238,228,.95));
border-top:1px solid var(--border);
font-size:14px;color:var(--mute);position:relative}
footer.site::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
width:180px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
gap:32px;padding:64px 0 44px}
footer.site b{color:var(--head);display:block;margin-bottom:10px;font-size:11px;
font-weight:500;letter-spacing:.18em;text-transform:uppercase}
footer.site a{color:var(--ink);text-decoration:none}
footer.site a:hover{color:var(--gold-deep)}
footer.site .base{border-top:1px solid var(--border);padding:20px 0 40px;font-size:12.5px}
/* ===========================================================================
THE WAITING LIST — pre-launch capture (3 Aug 2026)
One shared