/* ============================================================================
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:#A8834A; /* champagne gold — accent only */
--gold-deep:#8C6B39; /* hover gold / text-safe large gold */
--gold-hi:#E9D2A2; /* brushed-gold highlight */
--head:#1E1A16; /* deep taupe — headings */
--ink:#221E19; /* warm charcoal — body */
--mute:#776E64; /* 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:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
--sans:"Inter","Avenir Next",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--r-card:3px; --r-btn:2px; --r-input:2px; --r-img:3px;
--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}
/* Shorter rhythm for text-only sections that were reading as too much air. */
section.tight{padding:clamp(58px,6.5vw,100px) 0}
section.tight .quotes{margin-top:28px}
.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)}
/* The gold hairline before every eyebrow was pure template. An eyebrow does
not need a jewel on it; the tracking and the size already say what it is. */
.kicker::before{display: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. */
/* The padding shorthand here used to be `24px 0`, which wiped out the 24px
side gutter .wrap supplies, so the wordmark sat hard against the edge of
the screen. Set the two axes separately and it lines up with the page. */
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:36px;padding-top:24px;padding-bottom:24px}
.mark{font-family:var(--serif);font-size:23px;letter-spacing:.03em;color:var(--head);
text-decoration:none;line-height:1.05;white-space:nowrap}
/* The wordmark is artwork now, not type. Height is what has to stay constant
across the header, so width follows it. */
.mark img{display:block;height:clamp(30px,3.4vw,44px);width:auto}
.mark.foot img{height:clamp(26px,2.8vw,34px);margin-bottom:10px}
/* On the checkout, confirmation, terms and recruitment footers the wordmark
stands alone with no columns above it, so it has to supply its own room. */
.mark.foot.solo{text-align:center;padding:40px 0 26px}
.mark.foot.solo img{height:clamp(30px,3vw,38px);margin:0 auto}
.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)}
/* The icon is the phone on a narrow screen; the words are the phone on a wide
one. Only ever one of the two is shown. */
.telicon{display:none}
@media(max-width:1180px){
.bar{grid-template-columns:auto auto;gap:20px}
nav.main{justify-self:end}
.bar .tel{display:none}
}
/* ---------------------------------------------------------------------------
MOBILE NAV. This was a horizontally scrolling strip with scrollbar-width:none,
so on a phone you saw the last two links and nothing told you the other three
were off to the right. Now it is a menu you tap open.
The button is injected by js/nav.js, which also sets .has-navtoggle. Without
that script the links simply stack, visible — never hidden behind JS.
--------------------------------------------------------------------------- */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;padding:0 11px;margin-left:auto;cursor:pointer;
background:none;border:0;border-radius:var(--r-btn)}
.navtoggle span{display:block;height:1.5px;width:100%;background:var(--head);
border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.navtoggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.navtoggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:1080px){
/* Three things on the top row now: logo, call icon, menu button. The logo
takes the slack so the two controls sit together on the right. */
.bar{grid-template-columns:1fr auto auto;gap:16px}
.navtoggle{display:flex;order:2}
/* A phone number matters most on a phone, where it was previously hidden.
Icon only - the digits will not fit beside the logo - with the number in
the aria-label so it is not silent to a screen reader. */
.bar .tel{display:flex!important;order:1;align-items:center;justify-content:center;
width:44px;height:44px;padding:0;margin:0}
.bar .tel span,.bar .tel b{display:none}
.telicon{display:block;width:22px;height:22px;fill:none;stroke:var(--gold-deep);
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bar .tel:active .telicon{stroke:var(--head)}
nav.main{order:3;grid-column:1/-1;width:100%;flex-direction:column;gap:0;
overflow:visible;justify-self:stretch;
border-top:1px solid var(--border);margin-top:4px}
nav.main a{padding:15px 2px;font-size:12px;letter-spacing:.14em;
border-bottom:1px solid var(--border)}
nav.main a::after{display:none}
/* only hide it once the button exists to bring it back */
.has-navtoggle nav.main{display:none}
.has-navtoggle nav.main.open{display:flex}
.bar .tel{display:none}
}
@media(min-width:1081px){.navtoggle{display:none!important}}
/* ---------------- 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 */
/* Was: italic, gold, a second colour in the middle of a sentence. That one
device is most of why the page read as generated. The line break alone does
the work now; the drama comes from scale, not from a change of hue. */
h1 .goldline,h2 .goldline{display:block;color:inherit;font-style:normal;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 var(--head);cursor:pointer;font-family:var(--sans);
font-size:14px;font-weight:500;letter-spacing:.01em;text-transform:none;
color:#FAF8F3;background:var(--head);
border-radius:var(--r-btn);min-height:56px;padding:0 42px;text-align:center;
text-decoration:none;transition:var(--ease-slow);
box-shadow:none}
.btn::after{display:none;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:none;background:#000;box-shadow:none}
.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}
/* Every card carried a gold gradient bar across its top. Removed: the card
is already a card, and the repetition was doing the opposite of luxury. */
.card::before{display:none}
.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;object-position:50% 30%;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){
/* display:block, not flex. The image is absolutely positioned on desktop so
the panel is the only flex item; the moment the image joins the flow here
it became a second one and shoved the panel off the right of the screen,
leaving a 700px void where the text should have been. */
.imageband{display:block;min-height:0;padding:0}
.imageband > img{position:relative;display:block;width:100%;height:56vw;
min-height:260px;object-fit:cover;object-position:50% 30%}
.imageband .panel{max-width:none;margin:-52px 0 0;border-radius:var(--r-card)}
.imageband.right .panel{margin-left:0}
}
/* ---------------------------------------------------------------------------
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: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(30,26,22,.10);
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}
/* Was a square. Now carries the entrance photograph, which is 2:3, so the
frame follows the picture rather than cropping the doorway out of it. */
.circlephoto{position:absolute;left:0;bottom:0;width:36%;aspect-ratio:2/3;
border-radius:var(--r-img);overflow:hidden;border:8px 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}
/* Statutory company details: required on the site, kept deliberately quiet so
the footer does not read as a block of small print. */
footer.site .base .regd{display:block;font-size:11px;line-height:1.6;
color:var(--mute);opacity:.72;margin-bottom:16px;max-width:78ch}
/* ---------------------------------------------------------------------------
COOKIE BAR. Reject and Accept carry the same visual weight on purpose:
a reject option that is quieter than accept is not a free choice, and the
ICO has said so repeatedly.
--------------------------------------------------------------------------- */
.ckbar{position:fixed;left:0;right:0;bottom:0;z-index:9999;
background:var(--white);border-top:1px solid var(--border);
box-shadow:0 -10px 34px rgba(80,65,50,.13)}
.ckwrap{max-width:1240px;margin:0 auto;padding:18px 24px;
display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cktext{margin:0;flex:1 1 320px;font-family:var(--sans);font-size:13.5px;
line-height:1.6;color:var(--ink)}
.cktext a{color:var(--gold-deep);text-underline-offset:3px}
.ckbtns{display:flex;gap:10px;flex:0 0 auto}
.ckbtn{cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:500;
padding:11px 22px;border-radius:var(--r-btn);border:1px solid var(--head);
background:var(--white);color:var(--head);transition:background .14s ease,color .14s ease}
.ckbtn:hover{background:var(--cream)}
.ckbtn.ckyes{background:var(--head);color:#FAF8F3}
.ckbtn.ckyes:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.ckbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:560px){
.ckwrap{padding:16px 18px;gap:14px}
.ckbtns{width:100%}
.ckbtn{flex:1 1 0}
}
.iglink{display:inline-flex;align-items:center;gap:7px}
.iglink svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ===========================================================================
THE WAITING LIST — pre-launch capture (3 Aug 2026)
One shared