/* Self-hosted fonts (SIL Open Font License; see /fonts/OFL-*.txt). Latin subset, only the weights the site uses. */
@font-face{font-family:"Petrona";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/petrona-400.woff") format("woff")}
@font-face{font-family:"Petrona";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/petrona-500.woff") format("woff")}
@font-face{font-family:"Petrona";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/petrona-300-italic.woff") format("woff")}
@font-face{font-family:"Petrona";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/petrona-500-italic.woff") format("woff")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/atkinson-400.woff") format("woff")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/atkinson-700.woff") format("woff")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/atkinson-400-italic.woff") format("woff")}

/* ---------- Night palette (locked in the tuner) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-page:#153232; --surface-band:#323B26; --surface-input:#153736;
    --surface-feature:#E0CFB8; --text-on-feature:#153232;
    --text-body:#E2D8C4; --text-secondary:#ADA087;
    --action-fill:#EEC057; --action-pressed:#E2AE3A; --action-arrow:#153232; --action-label:#153232;
    --link-underline:#D8C6A6; --line-border:#8A8069; --line-divider:#414936;
    --select-fill:#859BA6; --select-text:#153232; --state-error:#F5939E; --state-success:#8FB985; --surface-sessions:#153232; --feature-btn-fill:#73520F; --feature-btn-label:#FBF7F0; --feature-btn-pressed:#62450C; --feature-btn-arrow:#FBF7F0; --tagline-doing:#73520F; --quote-ground:#153232;
    --accent-olive:#AEB673; --accent-ochre:#EEC057; --accent-coral:#C76E4F; --art-shape-a:#E9DAC4; --art-shape-c:#ADA087; --line-frame:rgba(233,218,196,.4);
    --brand-mark:#EEC057; --brand-title:#E9DAC4; --brand-logo:#E9DAC4;
  }
}
:root[data-theme="dark"]{
  --surface-page:#153232; --surface-band:#323B26; --surface-input:#153736;
  --surface-feature:#E0CFB8; --text-on-feature:#153232;
  --text-body:#E2D8C4; --text-secondary:#ADA087;
  --action-fill:#EEC057; --action-pressed:#E2AE3A; --action-arrow:#153232; --action-label:#153232;
  --link-underline:#D8C6A6; --line-border:#8A8069; --line-divider:#414936;
  --select-fill:#859BA6; --select-text:#153232; --state-error:#F5939E; --state-success:#8FB985; --surface-sessions:#153232; --feature-btn-fill:#73520F; --feature-btn-label:#FBF7F0; --feature-btn-pressed:#62450C; --feature-btn-arrow:#FBF7F0; --tagline-doing:#73520F; --quote-ground:#153232;
  --accent-olive:#AEB673; --accent-ochre:#EEC057; --accent-coral:#C76E4F; --art-shape-a:#E9DAC4; --art-shape-c:#ADA087; --line-frame:rgba(233,218,196,.4);
  --brand-mark:#EEC057; --brand-title:#E9DAC4; --brand-logo:#E9DAC4;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{position:relative;margin:0;background:var(--surface-page);color:var(--text-body);font:400 var(--t-body)/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
::selection{background:var(--select-fill);color:var(--select-text)}
img{max-width:100%;display:block}
picture{display:contents}  /* the <picture> wrapper only picks the file; the img inside keeps every layout rule */
a{color:inherit;text-decoration:underline;text-decoration-color:var(--link-underline);text-decoration-thickness:1.5px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:2px solid var(--link-underline);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--display-weight);margin:0;text-wrap:balance}
p{margin:0 0 1em;max-width:var(--measure)}
.wrap{width:min(1180px,100% - 2*clamp(20px,5vw,56px));margin-inline:auto}
/* ---------- header ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--surface-page);border-bottom:1px solid var(--line-divider)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
/* Lockup proportions from the logo style sheet: name 0.468 x mark height (capitals 0.30), gap 0.15, name baseline through the big disc. */
.wordmark{--mk:42px;color:var(--brand-logo);display:inline-flex;align-items:flex-start;gap:calc(var(--mk)*.15);font:500 calc(var(--mk)*.468)/1 var(--font-display);text-decoration:none;letter-spacing:0;white-space:nowrap}
.wordmark .mark{height:var(--mk);width:auto;color:var(--brand-logo);flex:none}
.wordmark .wm-name{padding-top:calc(var(--mk)*.181)}
.site-foot .wordmark{--mk:40px}
/* phones: full lockup on arrival, icon only once the visitor has scrolled. Header height and the Menu button never move. */
.wm-name{display:inline-block;overflow:hidden;white-space:nowrap;max-width:14em}
@media (max-width:640px){
  .site-head .wordmark{--mk:36px}
  .site-head.compact .wm-name{max-width:0;opacity:0}
  @media (prefers-reduced-motion: no-preference){
    .wm-name{transition:max-width .45s cubic-bezier(.2,.6,.2,1),opacity .3s}
  }
}
.nav{display:flex;gap:clamp(16px,2.4vw,30px);align-items:center;font-size:.95rem}
.nav a{text-decoration:none;padding:6px 0}
.nav a:hover{text-decoration:underline;text-decoration-color:var(--link-underline)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--link-underline);text-decoration-thickness:2px}
.menu-btn{display:none;background:none;border:1px solid var(--line-border);color:var(--text-body);border-radius:999px;padding:8px 16px;font:700 .9rem var(--font-body);cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;
       background:var(--surface-page);border-bottom:1px solid var(--line-divider);padding:8px clamp(20px,5vw,56px) 20px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;font-size:1.05rem}
}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--action-fill);color:var(--action-label);
  font:700 1rem/1 var(--font-body);text-decoration:none;padding:16px 22px 16px 26px;border-radius:999px;transition:background .2s}
.btn:hover{background:var(--action-pressed);text-decoration:none}
.btn:active{background:var(--action-pressed)}
.btn svg{width:18px;height:18px;flex:none}
.btn svg path{stroke:var(--action-arrow)}
/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;align-items:center}
/* gallery label: sits beside the work, low, like a museum wall label */
.art-label{grid-column:2;grid-row:2;align-self:end;margin:0;padding:0 clamp(24px,6vw,88px) clamp(20px,2.4vw,32px);
  font-size:.95rem;line-height:1.5;color:var(--text-secondary)}
.art-label b{font-weight:700;color:var(--text-body)}
.art-label i{font-style:italic}
.art-label .sep{display:none}
.hero-art{grid-row:1 / span 2;position:relative;overflow:hidden;line-height:0}
/* the painting hangs as a square, the same by day and night: the file is already cut square, face centred and eyes
   just above the middle (from Denise's close photo, Oct 14). Never taller than the screen below the header. */
.hero-art img{width:min(44vw,calc(100vh - var(--head-h)));height:auto;aspect-ratio:1/1;max-width:none;object-fit:cover;object-position:50% 50%}
.hero-copy{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,96px) clamp(24px,6vw,88px)}
.hero h1{font-weight:500;color:var(--brand-title);font-style:italic;font-size:var(--t-display);line-height:1.06;letter-spacing:-.005em;max-width:15ch;margin-bottom:.5em}
.hero .lede{font-size:1.3rem;color:var(--text-secondary);max-width:34ch;margin-bottom:2em}
@media (max-width:860px){
  .hero-copy{padding:40px 28px}
  .hero h1{font-size:clamp(2.2rem,5vw,2.9rem)}
}
@media (max-width:640px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto}
  .hero-art,.hero-copy,.art-label{grid-column:1;grid-row:auto}
  .art-label{padding:8px clamp(24px,6vw,88px) 0;font-size:.9rem}
  .art-label .lb1{display:none}
  .art-label .sep{display:inline}
  .hero-art img{width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-position:50% 45%}
  .hero-copy{padding:28px clamp(24px,6vw,88px) 40px}
  .hero h1{max-width:16ch}
  .hero .lede{margin-bottom:1.3em}
}
/* the one orchestrated moment: the painting settles, the words follow */
@media (prefers-reduced-motion: no-preference){
  .hero-art img{animation:settle 1.6s cubic-bezier(.2,.6,.2,1) both}
  .hero-copy > *{animation:rise .7s cubic-bezier(.2,.6,.2,1) both}
  .hero-copy > :nth-child(1){animation-delay:.15s}
  .hero-copy > :nth-child(2){animation-delay:.3s}
  .hero-copy > :nth-child(3){animation-delay:.45s}
}
@keyframes settle{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- testimonial ---------- */
.band{background:var(--surface-band)}
.quote{background:var(--quote-ground,var(--surface-band));padding:clamp(64px,9vw,120px) 0 var(--quote-pad-end,clamp(64px,9vw,120px))}
.quote blockquote{margin:0 auto;max-width:40ch;text-align:center}
.quote blockquote p{font:400 var(--t-quote)/1.35 var(--font-display);max-width:none;margin:0 0 .6em;text-wrap:balance}
/* the whole quote in one voice (Petrona, same size); the name on its own line, like the other testimonials */
.quote cite{display:block;margin-top:.9em;font:700 var(--t-small)/1.4 var(--font-body);font-style:normal;color:var(--text-secondary)}
/* ---------- sessions + mobile ---------- */
.sessions{background:var(--surface-sessions,var(--surface-page));padding:clamp(72px,10vw,136px) 0}
.sessions .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.sessions h2{font-weight:var(--display-weight-large);font-size:var(--t-h2-home);line-height:1.15;margin-bottom:1.1em;max-width:16ch}
.qualities{list-style:none;margin:0 0 2.2em;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.qualities h3{font-size:var(--t-h3);line-height:1.2;margin-bottom:.3em}
/* The four qualities link to their sections on Working together. A thin underline (like the homepage pairs) shows they
   are links on every device; as the section comes into view each line draws in from the left, one after another. */
.qualities h3 a{text-decoration:none;padding-bottom:.08em;background:linear-gradient(var(--link-underline),var(--link-underline)) 0 100%/100% 1.5px no-repeat}
.qualities h3 a:hover,.qualities h3 a:focus-visible{background-size:100% 2.5px}
@media (prefers-reduced-motion: no-preference){
  .js .qualities h3 a{background-size:0% 1.5px;transition:background-size 1.6s cubic-bezier(.37,0,.63,1)}
  .js .qualities.in h3 a{background-size:100% 1.5px}
  .js .qualities.in h3 a:hover,.js .qualities.in h3 a:focus-visible{background-size:100% 2.5px;transition-duration:.2s;transition-delay:0s}
  .js .qualities li:nth-child(1) h3 a{transition-delay:.3s}
  .js .qualities li:nth-child(2) h3 a{transition-delay:.7s}
  .js .qualities li:nth-child(3) h3 a{transition-delay:1.1s}
  .js .qualities li:nth-child(4) h3 a{transition-delay:1.5s}
}
.qualities p{margin:0;color:var(--text-secondary);font-size:1.25rem;line-height:1.55}
.art{aspect-ratio:640/370;width:100%;overflow:visible}
.home-art{margin:0;min-width:0}
.home-art .art{display:block}
.home-art figcaption{text-align:center}
@media (max-width:860px){
  .sessions .grid{grid-template-columns:1fr}
  .art{aspect-ratio:570/480;max-width:480px;margin-inline:auto;order:-1}
  .home-art{order:-1;width:100%;max-width:480px;margin-inline:auto}
}
@media (max-width:480px){
  .qualities{grid-template-columns:1fr}
}
/* ---------- feature field ---------- */
.feature{background:var(--surface-feature);color:var(--text-on-feature);padding:clamp(72px,10vw,128px) 0}
.feature h2{color:var(--text-on-feature);font-weight:var(--display-weight-large);font-size:var(--t-closing);line-height:1.08;max-width:17ch;margin:0;letter-spacing:0}
.close{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
/* inverted button: the usual fill nearly vanishes on the feature field, so it flips */
.btn-on-feature{background:var(--feature-btn-fill);color:var(--feature-btn-label)}
.btn-on-feature:hover,.btn-on-feature:active{background:var(--feature-btn-pressed)}
.btn-on-feature svg path{stroke:var(--feature-btn-arrow)}
@media (max-width:760px){
  .close{grid-template-columns:1fr;align-items:start}
}
/* Footer: the page moves from day into dusk. Always uses the night palette, in both modes. */
.site-foot{
  --surface-page:#153232; --surface-band:#323B26;
  --text-body:#E2D8C4; --text-heading:#E2D8C4; --text-secondary:#ADA087;
  --link-underline:#D8C6A6; --line-border:#8A8069; --line-divider:#414936;
  --select-fill:#859BA6; --select-text:#153232; --brand-mark:#EEC057; --brand-logo:#E9DAC4;
  background:var(--surface-page);color:var(--text-body);
  padding:56px 0 40px;font-size:1.05rem}
.site-foot .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;margin-bottom:36px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:12px 26px}
.site-foot nav a{text-decoration:none}
.site-foot nav a:hover{text-decoration:underline}
.disclaimer{font-size:.9375rem;line-height:1.5;color:var(--text-secondary);max-width:80ch;border-top:1px solid var(--line-divider);padding-top:24px}
.legal{font-size:.9375rem;color:var(--text-secondary);margin:0}
/* Footer disclaimer reads as legal small print (Oct 20, D): same size as the copyright line, 1.5 line spacing, "Please note" as a small label like "What the research shows" */
.disclaimer .dl-label{font:700 .875rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;margin-right:.5em}
/* ================= page: virtual sessions ================= */
.page-services h1{font-weight:var(--display-weight-hero);font-style:italic;font-size:var(--t-display);line-height:1.06;letter-spacing:-.005em;max-width:15ch;margin:0 0 .5em}
.page-services h2{font-weight:var(--display-weight-large);font-size:var(--t-h2);line-height:1.15;max-width:14ch}
.page-services .lede{font-size:var(--t-lede);line-height:1.55}
.page-services p{font-size:var(--t-body-lg)}
.vs-intro{padding:clamp(48px,8vw,112px) 0 clamp(40px,6vw,80px)}
.vs-intro-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.vs-detail{margin:0}
.vs-detail img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.vs-detail figcaption{font-size:var(--t-caption);color:var(--text-secondary);margin-top:10px}
.vs-detail figcaption b{color:var(--text-body)}
.vs-two,.vs-adv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(24px,5vw,80px);align-items:start}
.vs-advantages{padding:0 0 clamp(72px,9vw,120px)}
.vs-adv{padding:clamp(36px,5vw,60px) 0;border-top:1px solid var(--line-divider)}
.vs-adv-body p:last-child{margin-bottom:0}
.page-services .vs-story{position:relative;font:400 var(--t-pull)/1.45 var(--font-display);margin-top:1.6em;padding-left:34px;max-width:34ch}
.vs-story::before{content:"";position:absolute;left:0;top:.5em;width:16px;height:16px;border-radius:50%;background:var(--accent-olive)}
.warm-run{padding:clamp(64px,8vw,104px) 0}
.vs-prep{background:var(--surface-band)}
.vs-list-head{font:700 var(--t-body-lg)/1.4 var(--font-body);margin:1.6em 0 .7em}
.vs-checklist{list-style:none;margin:0 0 2em;padding:0}
.vs-checklist li{position:relative;padding:.35em 0 .35em 30px;font-size:var(--t-body-lg);line-height:1.5}
.vs-checklist li::before{content:"";position:absolute;left:2px;top:.85em;width:11px;height:11px;border-radius:50%;background:var(--accent-olive)}
.page-services .vs-privacy{background:var(--surface-raised);border-radius:12px;padding:clamp(20px,3vw,28px) clamp(22px,3vw,32px);margin:0;
  font:400 var(--t-pull)/1.5 var(--font-display);max-width:none}
.vs-steplist{list-style:none;counter-reset:step;margin:0 0 1.8em;padding:0}
/* Step numbers sit on the first line of their step, sharing its baseline (a hanging indent), and are sized
   from the step text (1.25x), not from the heading above */
.vs-steplist li{counter-increment:step;padding:0 0 1.3em 2.4em;text-indent:-2.4em;font-size:var(--t-body-lg);line-height:1.55}
.vs-steplist li::before{content:counter(step);display:inline-block;width:1.92em;text-indent:0;font:400 1.25em/1 var(--font-display);color:var(--text-secondary)}
@media (max-width:860px){
  .vs-intro-grid{grid-template-columns:1fr}
  .vs-detail{max-width:none}
  .vs-detail img{aspect-ratio:4/3;object-position:50% 30%}
  .vs-two,.vs-adv{grid-template-columns:1fr;gap:14px}
}
/* night: the practical, cozy part of the page sits in the warm olive, entered through the blend */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .warm-run{background:#323B26}
  :root:not([data-theme="light"]) .page-services .vs-privacy{background:#153232}
}
:root[data-theme="dark"] .warm-run{background:#323B26}
:root[data-theme="dark"] .page-services .vs-privacy{background:#153232}
/* ================= page: about (content-page family, shares the virtual sessions layout) ================= */
.ab-warm{background:var(--surface-band)}
.vs-adv[id]{scroll-margin-top:96px}
.ab-sub{font-weight:var(--display-weight);font-size:var(--t-h3);line-height:1.2;margin:0 0 .7em}
.ab-stat{display:flex;align-items:baseline;gap:20px;margin-top:1.4em;padding-top:1.2em;border-top:1px solid var(--line-divider)}
.ab-stat-num{font:400 clamp(2.6rem,5vw,3.6rem)/1 var(--font-display);color:var(--text-heading);flex:none}
.page-about .ab-stat p{margin:0;max-width:30ch}
/* ================= page: Denise Carreau ================= */
.dn-quote{margin:0 auto clamp(48px,6vw,80px);max-width:30ch;text-align:center}
.dn-quote p{font:400 var(--t-quote)/1.35 var(--font-display);margin:0 0 .6em;max-width:none}
.dn-quote cite{font-style:normal;font-weight:700;color:var(--text-secondary)}
/* portrait hung like a matted picture: the mat gives the viewer a little more distance from a tightly framed photo */
.dn-portrait{justify-self:end;width:min(100%,400px);background:var(--surface-band);padding:clamp(22px,3vw,36px);border-radius:2px}
.dn-portrait img{aspect-ratio:3/4;object-fit:cover;object-position:50% 40%;width:100%;display:block}
@media (max-width:860px){
  .dn-portrait{justify-self:start;width:min(100%,360px)}
}
.dn-facts{margin:1.4em 0 0}
.dn-facts li{font-weight:400}
.dn-pronouns{font-size:var(--t-body-lg);color:var(--text-secondary);margin:0;margin-bottom:1.6em}
.page-denise .dn-lede{max-width:40ch;margin-bottom:1.2em}
.page-denise .dn-cred{font-size:var(--t-small);color:var(--text-secondary);max-width:44ch;margin-bottom:2em}
/* ================= page: contact (task page — focused, no closing band) ================= */
.ct-intro{padding:clamp(48px,7vw,96px) 0 clamp(24px,3vw,40px)}
.ct-intro .lede{color:var(--text-secondary)}
.ct-book{padding:0 0 clamp(48px,6vw,80px)}
.ct-cal{background:var(--surface-raised);border:1px solid var(--line-divider);border-radius:12px;overflow:hidden;min-height:640px}
.cal-inline{width:100%;min-height:640px;overflow:auto}
.cal-status{margin:0;padding:14px 20px;font-size:var(--t-small);color:var(--text-secondary);border-bottom:1px solid var(--line-divider)}
.cal-status.loaded .cal-wait{display:none}
.cal-placeholder{min-height:640px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;color:var(--text-secondary)}
.cal-placeholder p{max-width:44ch}
.cal-placeholder b{color:var(--text-body)}
.ct-more{background:var(--surface-band);padding:clamp(56px,7vw,96px) 0}
.ct-block[id]{scroll-margin-top:96px}
.page-contact .ct-block h2{font-size:var(--t-h3);max-width:none;margin-bottom:.6em}
/* ================= page: hypnosis works ================= */
.page-works .vs-adv h2{max-width:12ch}
.hw-story{max-width:760px;margin:0 auto clamp(48px,6vw,80px);text-align:center}
.hw-quote{max-width:34ch}
/* ================= homepage: from → to pairs (the moment between) ================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.between{padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line-divider)}
/* Always a grid, never a wrapping row: 4 across, 2×2, or 1 column, so a pair can never be orphaned */
.between-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,max-content);justify-content:space-between;gap:18px 32px}
.between-list li{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:baseline;gap:.35em .5em;font:400 clamp(1.25rem,1.75vw,1.55rem)/1.25 var(--font-display)}
.between-list .from{color:var(--text-secondary)}
.between-list .arr{font-family:var(--font-display);font-size:.85em}
.between-list .to{color:var(--text-heading)}
/* breakpoints in em so they move with the visitor's text-size setting */
@media (max-width:72em){
  .between-list{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:18px 48px}
}
@media (max-width:40em){
  .between-list{grid-template-columns:1fr;gap:12px}
}
/* a quiet transition: as the row comes into view, each "to" word arrives just after its "from" */
@media (prefers-reduced-motion: no-preference){
  /* slow, even easing (in and out, like a swing) so the words drift in the way the mobile and the feather move */
  .js .between .between-list .arr,.js .between .between-list .to{opacity:0;transform:translateX(-6px);transition:opacity 1.6s cubic-bezier(.37,0,.63,1),transform 1.6s cubic-bezier(.37,0,.63,1)}
  .js .between.in .arr,.js .between.in .to{opacity:1;transform:none}
  .js .between .between-list li:nth-child(1) .arr{transition-delay:.3s}
  .js .between .between-list li:nth-child(1) .to{transition-delay:.6s}
  .js .between .between-list li:nth-child(2) .arr{transition-delay:.7s}
  .js .between .between-list li:nth-child(2) .to{transition-delay:1s}
  .js .between .between-list li:nth-child(3) .arr{transition-delay:1.1s}
  .js .between .between-list li:nth-child(3) .to{transition-delay:1.4s}
  .js .between .between-list li:nth-child(4) .arr{transition-delay:1.5s}
  .js .between .between-list li:nth-child(4) .to{transition-delay:1.8s}
}
/* ================= page: referring professionals ================= */
.rf-intro .lede{max-width:58ch}
.rf-intro h1{max-width:16ch}
.rf-list-row{border-top:1px solid var(--line-divider)}
.rf-list li{padding-top:.6em;padding-bottom:.6em}
.rf-list li b{font-weight:700}
.page-services .feature h2{font-size:var(--t-closing);font-weight:var(--display-weight-large);line-height:1.08;max-width:17ch}
/* homepage pairs as links: whole pair is the target; the destination word is always underlined so the link shows on touch screens too.
   Pairs whose page is still a draft render as plain text in the real site and gain the underline automatically when the page launches. */
.between-list a.pair .to{text-decoration:underline;text-decoration-color:var(--link-underline);text-decoration-thickness:1.5px;text-underline-offset:.22em;transition:text-decoration-thickness .2s}
.between-list a.pair:hover .to,.between-list a.pair:focus-visible .to{text-decoration-thickness:2.5px}
/* desktop: a small button at the right end of the header */
.head-cta{padding:10px 18px;font-size:.95rem;margin-left:clamp(8px,1.5vw,20px);white-space:nowrap}
.head-cta:hover{text-decoration:none}
@media (max-width:1100px){
  .nav{gap:18px;font-size:.9rem}
}
@media (max-width:999px){
  .head-cta{display:none}
}
/* touch screens: floating button bottom-right, in the right thumb's natural reach */
.float-cta{display:none}
@media (max-width:999px){
  .float-cta{display:inline-flex;position:fixed;z-index:20;right:max(16px,env(safe-area-inset-right,0px));
    bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:14px 18px 14px 20px;font-size:.95rem;
    box-shadow:0 6px 20px rgba(21,50,50,.22);opacity:0;transform:translateY(12px);pointer-events:none}
  .float-cta.show{opacity:1;transform:none;pointer-events:auto}
  .float-cta:hover{text-decoration:none}
  @media (prefers-reduced-motion: no-preference){
    .float-cta{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.6,.2,1)}
  }
}
/* ---------- navigation: utility row (desktop) + main row ---------- */
:root{--surface-page:#FBF7F0;--surface-band:#F1EADD;--surface-input:#FEFBF4;--surface-raised:var(--surface-input);--surface-feature:#464C2A;--text-body:#2E3C40;--text-heading:var(--text-body);--text-secondary:#59655E;--text-on-feature:var(--surface-page);--action-fill:#17697E;--action-pressed:#0D4F63;--action-arrow:#F6C3A4;--action-label:var(--surface-page);--link-underline:var(--action-fill);--line-border:#8E8576;--line-divider:#E3D9C9;--select-fill:#B9D3DC;--select-text:var(--text-body);--state-error:#78240F;--state-success:#3F6140;--accent-olive:#6E7530;--accent-ochre:#C69630;--accent-coral:#D77F60;--accent-olive-light:#868C46;--art-shape-a:var(--accent-olive);--art-shape-b:var(--accent-ochre);--art-shape-c:var(--accent-olive-light);--art-wire:var(--text-body);--brand-mark:#17697E;--brand-title:var(--brand-mark);--brand-logo:var(--brand-mark);--feature-btn-fill:#EEC057;--feature-btn-label:#2E3C40;--feature-btn-pressed:#E2AE3A;--feature-btn-arrow:#2E3C40;--tagline-doing:#EEC057;--font-display:"Petrona", Georgia, "Times New Roman", serif;--font-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;--display-weight-hero:300;--display-weight:500;--display-weight-large:400;--measure:62ch;--t-display:clamp(2.6rem,5vw,4.6rem);--t-closing:clamp(2.3rem,5vw,4rem);--t-h2:clamp(2rem,3.1vw,2.75rem);--t-h2-home:var(--t-h2);--t-h3:clamp(1.5rem,2vw,1.8rem);--t-quote:clamp(1.5rem,2.6vw,2.05rem);--t-pull:clamp(1.3rem,2vw,1.55rem);--t-lede:1.3rem;--t-body-lg:1.3rem;--t-body:1.2rem;--t-small:1rem;--t-caption:.9375rem;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--head-h:69px}
.util-row{border-bottom:1px solid var(--line-divider)}
.util-row .wrap{display:flex;justify-content:flex-end;min-height:30px;align-items:center}
.util{display:flex;gap:22px;font-size:.9rem}
.util a{text-decoration:none;color:var(--text-secondary)}
.util a:hover,.util a[aria-current="page"]{color:var(--text-body);text-decoration:underline;text-decoration-color:var(--link-underline)}
.nav-extra,.nav-extra-sep{display:none}
@media (min-width:861px){
  :root{--head-h:100px}
}
@media (max-width:860px){
  .util-row{display:none}
  .nav-extra{display:block}
  .nav-extra-sep{display:block;width:100%;height:1px;background:var(--line-divider);margin:8px 0}
  .nav .nav-extra{font-size:.98rem;color:var(--text-secondary)}
}
.vs-adv[id],.ct-block[id]{scroll-margin-top:calc(var(--head-h) + 28px)}
.page-about h2#Fast{scroll-margin-top:calc(var(--head-h) + 28px + clamp(36px,5vw,60px))}   /* old #Fast links land exactly where #Custom does */
.page-about .wm-six{font-size:var(--t-body-lg);line-height:1.6;max-width:52ch;margin-top:1em}
.page-about h2.wt-approach{font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.1;max-width:none;padding-top:clamp(40px,5vw,64px);margin:0 0 clamp(8px,1vw,16px);border-top:1px solid var(--line-divider)}
.page-about h2.wt-approach + .vs-adv{border-top:0}
/* ---------- Denise's photographs: hung in a mat, credited ---------- */
.photo-mat{background:var(--surface-band);padding:clamp(14px,2vw,22px);margin:0;border-radius:2px}
.photo-mat img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0}
.photo-mat.landscape img{aspect-ratio:4/3}
.photo-mat figcaption{font-size:var(--t-caption);color:var(--text-secondary);margin-top:10px}
.warm-run .photo-mat,.ab-warm .photo-mat{background:var(--surface-page)}
/* Night: no mat. A thin warm-bone line, set a little off the photo, keeps the hung-picture feel without green on green */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .photo-mat,:root:not([data-theme="light"]) .warm-run .photo-mat,:root:not([data-theme="light"]) .ab-warm .photo-mat,:root:not([data-theme="light"]) .dn-portrait{background:none;padding:12px;border:1px solid var(--line-frame)}
}
:root[data-theme="dark"] .photo-mat,:root[data-theme="dark"] .warm-run .photo-mat,:root[data-theme="dark"] .ab-warm .photo-mat,:root[data-theme="dark"] .dn-portrait{background:none;padding:12px;border:1px solid var(--line-frame)}
.sl-photo img{aspect-ratio:4/5}
.hw-story-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,88px);align-items:center;margin-bottom:clamp(48px,6vw,80px)}
.hw-story-row .hw-story{text-align:left;margin:0}
.hw-story-row .hw-story-intro{margin-left:0}
.hw-story-row .hw-quote{margin:0;text-align:left}
@media (max-width:860px){
  .hw-story-row{grid-template-columns:1fr}
  .hw-photo{max-width:420px}
}
.photo-mat.ct-photo img{aspect-ratio:5/4}
@media (min-width:861px){
  .ct-photo{justify-self:end}
}
@media (max-width:640px){
  .ct-photo{display:none}
}
/* ---------- four focus areas ---------- */
.between-list a.pair,.between-list span.pair{gap:.35em .5em;text-decoration:none;color:inherit;display:inline-grid;grid-template-columns:auto auto auto;column-gap:.5em;align-items:baseline}
.between-list .pl{grid-column:1 / -1;font:700 .875rem/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.35em}
.between-list .current{opacity:.55}
.focus-strip{padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line-divider)}
.focus-label{font:700 .95rem/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 .6em}
.nav .nav-gap{margin-left:clamp(6px,1.2vw,18px)}
@media (max-width:1200px){
  .nav{gap:16px;font-size:.88rem}
}
@media (max-width:860px){
  .nav .nav-gap{margin-left:0}
}
/* focus pages: the search phrase is the true heading; the pair is the visual title */
.page-focus h1.focus-label{font:700 .95rem/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 .6em;max-width:none}
.page-focus p.focus-title{font-family:var(--font-display);font-weight:var(--display-weight-hero);font-style:italic;font-size:var(--t-display);line-height:1.06;letter-spacing:-.005em;color:var(--text-heading);margin:0;max-width:22ch}
.page-focus p.focus-title .arr{font-style:normal}
/* The arrows in the pairs and focus-page titles are drawn as a fine line (Oct 15): about a quarter lighter than the font's arrow and
   a little lower, nearer the middle of the lowercase letters. The typed → stays in the page, invisible, to hold the space. */
.between-list .arr,.page-focus p.focus-title .arr{position:relative;color:transparent}
.between-list .arr::after,.page-focus p.focus-title .arr::after{content:"";position:absolute;left:50%;top:calc(47% + .05em);width:.64em;height:.48em;transform:translate(-50%,-50%);background:var(--brand-mark);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2048%22%3E%3Cpath%20d%3D%22M4%2024H59M43%209%2059%2024%2043%2039%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2048%22%3E%3Cpath%20d%3D%22M4%2024H59M43%209%2059%2024%2043%2039%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat}
/* closing tagline on inner pages: a held beat, then "and doing" arrives (not on the homepage) */
@media (prefers-reduced-motion: no-preference){
  .js main .feature .tg-k{transition:color 1.6s cubic-bezier(.37,0,.63,1)}
  .js main .feature .tg-d{display:inline-block;opacity:0;transform:translateX(-10px);transition:opacity 1.6s cubic-bezier(.37,0,.63,1) .15s,transform 1.6s cubic-bezier(.37,0,.63,1) .15s}   /* the same slow swing as the pairs; starts 0.15 s after the band arrives (was 0.6 s, Oct 16) */
  .js main .feature.tg-in .tg-d{opacity:1;transform:none}
}
/* Skip link: hidden until focused with the keyboard */
.skip-link{position:absolute;left:12px;top:-100px;z-index:1000;background:var(--surface-page);color:var(--text-body);padding:10px 16px;border:2px solid var(--brand-mark);border-radius:8px;font:700 1rem var(--font-body);text-decoration:none}
.skip-link:focus{top:12px}
main:focus{outline:none}
/* Research note: opens the four focus pages. Set apart from body text: Petrona, teal rule, small label and source line. */
.research-note{margin:1.8em 0 0;padding:.15em 0 .15em 1.15em;border-left:2px solid var(--brand-mark);max-width:46ch}
.research-note .rn-label{font:700 .875rem/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 .7em}
.research-note p{font-family:var(--font-display);font-size:1.3rem;line-height:1.55;margin:0 0 .8em}
.research-note .rn-src{font:400 var(--t-small)/1.45 var(--font-body);color:var(--text-secondary);margin:0}
/* Research entries on Hypnosis works: topic, summary, then a quiet citation */
.research-topic{font:400 var(--t-h3,1.35rem)/1.3 var(--font-display);margin:0 0 .5em}
.research-cite + .research-topic,.research-more + .research-topic{margin-top:2.2em}
.research-cite{font-size:var(--t-small);line-height:1.5;color:var(--text-secondary)}
.research-cite cite{font-style:italic}
/* Focus pages share one opening: label, title, research note, booking button */
.page-focus .vs-intro{padding-top:clamp(32px,4.5vw,64px)}
.page-focus .research-note{margin-top:1.4em}
@media (max-width:640px){
  .page-focus .research-note p{font-size:1.2rem;line-height:1.5}
}
/* Page titles take the brand colour, like the homepage headline and the wordmark. Section headings stay in ink. */
.page-services .vs-intro h1:not(.focus-label),.page-services .ct-intro h1,.page-focus p.focus-title{color:var(--brand-title)}
/* Landscape hero photos get a wider column so they carry the same visual weight as the portrait ones */
@media (min-width:861px){
  .vs-intro-grid:has(> .photo-mat.landscape){grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
}
/* Working together: Denise's portrait beside the returning-clients figure and the booking invitation */
.ab-meet{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.ab-portrait{margin:0}
.ab-portrait img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 40%}
.ab-meet-body p{max-width:58ch}
.ab-stat.ab-stat-band{margin:0 0 1.4em;padding:0;border-top:0}
@media (max-width:640px){
  .ab-meet{grid-template-columns:1fr}
  .ab-portrait{max-width:220px}
}
/* Working together: the privacy quote sits under "Private" as a side note, so the four points read as one series */
.ab-side-note{font:400 1.05rem/1.55 var(--font-display);color:var(--text-secondary);margin:1em 0 0;max-width:28ch}
/* on phones the note follows the explanation instead of preceding it */
@media (max-width:860px){
  .vs-adv-head{display:contents}
  .ab-side-note{order:3;max-width:44ch;margin:.2em 0 0}
}
.ab-begin{font:400 var(--t-h2,2rem)/1.2 var(--font-display);margin:0 0 .8em}
.ab-steps{margin-bottom:1.4em}
.ab-steps li{font-size:var(--t-body)}
.ab-warm .dn-quote{margin-bottom:clamp(36px,5vw,64px)}
.ab-meet-body .ab-steps{margin-bottom:0}
/* Main menu: links never wrap onto two lines. Between tablet and full desktop widths the header shows the mark without the name, so all seven links fit on one row */
.nav a{white-space:nowrap}
/* Header uses the two-line lockup (logo style sheet): "Change / One Moment", line spacing equal to the type size. The footer keeps the one-line lockup. */
.site-head .wm-name .wm-l1{display:block}
.site-head .wm-name{line-height:1}
@media (min-width:861px) and (max-width:1180px){
  .nav{gap:clamp(12px,1.6vw,18px)}
}
/* tablets in landscape: not quite room for the name and seven links, so the mark stands alone */
@media (min-width:861px) and (max-width:1060px){
  .site-head .wm-name{display:none}
}
/* Closing band: tagline, a contained "where" line, then the paragraph, invitation and button */
.close-where{display:inline-block;margin:1.2em 0 0;padding:.5em 0;border-top:1px solid color-mix(in srgb,var(--text-on-feature) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text-on-feature) 35%,transparent);font-size:.98rem;letter-spacing:.01em;opacity:.92}
.close-act p{line-height:1.55;margin:0 0 1.4em;max-width:36ch;font-size:1.25rem}
.close-act .close-invite{margin-bottom:1.2em}
.close{align-items:start}
/* Footer: the welcome statement leads; legal line below */
.site-foot .foot-welcome{font:400 clamp(1.45rem,2.4vw,1.9rem)/1.3 var(--font-display);color:var(--text-body);max-width:32ch;margin:0 0 36px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:24px}
/* Privacy policy */
.page-privacy .pv-date{font-size:var(--t-small);color:var(--text-secondary);margin:0 0 1em}
.pv-sections .vs-adv h2{font-size:var(--t-h3)}
/* Page not found */
.nf-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:var(--t-body-lg)}
.nf-more{padding-top:clamp(24px,4vw,48px)}
/* Focus pages: quote beside the image; below, the opening text, the research note and the booking button */
.focus-quote{margin:1.3em 0 0;max-width:26ch}
.focus-quote p{font:400 var(--t-quote)/1.35 var(--font-display);color:var(--text-body);margin:0 0 .6em;max-width:none}
.focus-quote cite{display:block;font:400 var(--t-small)/1.45 var(--font-body);font-style:normal;color:var(--text-secondary)}
.focus-quote cite i{font-style:italic}
/* Change page: habits vs intentions bar */
.stat-bar{margin:2.2em 0 0;max-width:40rem}
.sb-title{font:400 1.2rem/1.35 var(--font-display);color:var(--text-body);margin:0 0 .8em}
.sb-bar{display:flex;height:22px;border-radius:3px;overflow:hidden;gap:3px}
.sb-a{background:var(--accent-olive)}
.sb-b{background:var(--accent-coral)}
.sb-legend{display:grid;grid-template-columns:73fr 27fr;gap:3px;margin-top:.7em}
.sb-item{display:flex;flex-direction:column;gap:.15em;font-size:var(--t-small);line-height:1.4;color:var(--text-secondary);padding-right:12px}
.sb-num{font:400 clamp(1.6rem,3vw,2.1rem)/1.1 var(--font-display);color:var(--text-body)}
main .stat-bar p.sb-src{font-size:var(--t-small);color:var(--text-secondary);margin:.9em 0 0}
@media (max-width:640px){
  .sb-legend{grid-template-columns:1fr;gap:.9em}
  .sb-item{flex-direction:row;align-items:baseline;gap:.6em}
  .sb-item::before{content:"";flex:none;width:12px;height:12px;border-radius:2px;align-self:center}
  .sb-item-a::before{background:var(--accent-olive)}
  .sb-item-b::before{background:var(--accent-coral)}
}
.sb-quote{margin-top:2em;max-width:34ch}
.sb-quote p{font-size:var(--t-pull)}
/* three-part version: all everyday actions, with the habit share bracketed */
.sb3 .sb-legend{grid-template-columns:46fr 19fr 35fr}
.sb-c{background:color-mix(in srgb,var(--text-secondary) 28%,transparent)}
.sb-brace{width:65%;border:1.5px solid var(--text-secondary);border-bottom:0;height:9px;margin:0 0 6px;position:relative}
.sb-brace span{position:absolute;left:0;bottom:12px;font-size:var(--t-small);color:var(--text-secondary);white-space:nowrap}
.sb3 .sb-brace{margin-top:2.2em}
@media (max-width:640px){
  .sb3 .sb-legend{grid-template-columns:1fr}
  .sb-item-c::before{background:color-mix(in srgb,var(--text-secondary) 28%,transparent)}
}
/* Change page: the habits chart and quote as a pop-out panel */
.sb-panel{background:var(--surface-band);border-radius:4px;padding:clamp(22px,3.4vw,40px);margin:2.4em 0 .4em}
.sb-panel .stat-bar{margin-top:0}
.sb-panel .sb3 .sb-brace{margin-top:1.8em}
.sb-panel .sb-quote{margin-bottom:0}
/* Hypnosis works: a quoted line within a research entry */
.research-pull{font:400 var(--t-pull)/1.45 var(--font-display);color:var(--text-body);border-left:2px solid var(--brand-mark);padding-left:1em}
.research-pull cite{font-style:italic}
/* Change page: the panel opens the section, so it needs no top margin; the opening-text slot follows it */
/* Focus pages: explanation, then "Want to learn more?", then the research, then the closing band */
.learn-more{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:2em 0 0}
.learn-more .lm-q{font:400 var(--t-pull)/1.3 var(--font-display);margin:0}
.learn-more .btn{margin:0}
/* Client quote just above "Want to learn more?" on the outcome pages. Set apart from the historical
   epigraph at the top (.focus-quote): a gold rule, and the client's name in bold like the other testimonials. */
.cta-quote{margin:2em 0 0;max-width:34rem;padding-left:1.1em;border-left:3px solid var(--accent-ochre)}
.cta-quote p{font:400 var(--t-pull)/1.4 var(--font-display);color:var(--text-body);margin:0 0 .5em;max-width:none;text-wrap:balance}
.cta-quote cite{font-style:normal;font-weight:700;font-size:var(--t-small);color:var(--text-secondary)}
.cta-quote + .learn-more{margin-top:1.4em}
/* Focus pages: who this is for. A short lead line and the common experiences, right under the title */
.page-focus .focus-common{font-size:var(--t-body-lg);line-height:1.55;margin:1.2em 0 .4em;max-width:40ch}
.focus-list{margin:0 0 .4em}
.focus-list li{padding:.2em 0 .2em 28px}
.focus-list li::before{top:.75em}
/* epigraph after the experiences list: softer ink so it reads as an aside, and a wider measure so it sits on fewer lines */
/* Homepage: returning-clients figure under the four qualities */
.home-stat{margin-top:0}
.home-stat p{margin:0;max-width:30ch;font-size:1.25rem;line-height:1.5;color:var(--text-secondary)}
/* Homepage: Meet Denise and What to expect, short versions of their full pages, each linking out */
.home-meet{padding:clamp(64px,8vw,112px) 0}
.home-meet .ab-meet{align-items:start}
.home-meet h2{font-weight:var(--display-weight-large);font-size:var(--t-h2);line-height:1.15;margin:0 0 .6em}
.home-meet .ab-meet-body p{font-size:var(--t-body-lg)}
.home-meet p.hm-cred{font-size:var(--t-small);color:var(--text-secondary);max-width:44ch}
.home-meet p.hm-link{margin:0}
.home-meet h2.hm-expect{margin-top:clamp(40px,5vw,64px)}
.home-meet .vs-steplist{margin-bottom:.2em;max-width:44rem}
/* Kinetic mobile colours (Oct 16): set here, not read by mobile.js at start-up, which came back empty on an iPhone (black discs, no wires). Follows day and night automatically. */
.kinetic-mobile .km-wire{stroke:var(--art-wire)}
.kinetic-mobile .km-s0{fill:var(--art-shape-a)}
.kinetic-mobile .km-s1{fill:var(--art-shape-b)}
.kinetic-mobile .km-s2{fill:var(--art-shape-c)}
/* Hypnosis works: the kinetic mobile, large and centered, hung like an artwork with a gallery label */
.hw-hero{padding:clamp(40px,6vw,88px) 0 clamp(32px,5vw,72px);text-align:center}
.hw-hero h1{font-weight:var(--display-weight-hero);font-style:italic;font-size:var(--t-display);line-height:1.06;letter-spacing:-.005em;color:var(--brand-title);margin:0 auto}
.hw-mobile{margin:clamp(8px,2vw,24px) auto 0;max-width:820px}
.hw-mobile .art{display:block;width:100%;max-width:none;margin:0 auto}
.hw-label{margin:clamp(12px,2vw,20px) auto 0;font-size:.9rem;line-height:1.55;color:var(--text-secondary)}
.hw-label b{font-weight:700;color:var(--text-body)}
@media (max-width:860px){
  .hw-mobile .art{max-width:520px}
}
@media (prefers-reduced-motion: reduce){
  .hw-touch{display:none}
}
.motion-paused .hw-touch{display:none}   /* paused: touching does nothing, so the invitation steps away */
/* Hypnosis works: Bergson beneath the mobile, in the softer epigraph style, centered */
.hw-epigraph{margin:clamp(32px,4vw,52px) auto 0;max-width:36rem}
.hw-epigraph p{font:400 var(--t-quote)/1.4 var(--font-display);color:var(--text-secondary);margin:0 0 .6em;max-width:none;text-wrap:balance}
.hw-epigraph cite{display:block;font:400 var(--t-small)/1.45 var(--font-body);font-style:normal;color:var(--text-secondary)}
.hw-epigraph cite i{font-style:italic}
/* Hypnosis works: opening statement, then the universities as a call-out. Each university hangs from a small disc in the mobile's colours */
.hw-intro{padding:clamp(8px,2vw,24px) 0 clamp(40px,5vw,64px)}
.hw-intro-text{max-width:44rem;margin:0 auto;font-size:var(--t-lede);line-height:1.6}
.hw-unis{padding:0 0 clamp(56px,7vw,96px)}
.unis-box{background:var(--surface-band);border-radius:4px;padding:clamp(28px,4vw,56px) clamp(22px,4vw,56px)}
.unis-box h2{font-weight:var(--display-weight-large);font-size:var(--t-h2);line-height:1.15;margin:0 0 clamp(24px,3vw,40px);max-width:none}
.unis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(24px,3vw,44px)}
.uni{position:relative}
.uni-dot{position:absolute;left:0;top:.3em;width:16px;height:16px;border-radius:50%;background:var(--accent-olive)}
.uni:nth-child(3n+2) .uni-dot{background:var(--accent-ochre);width:13px;height:13px;left:1.5px}
.uni:nth-child(3n) .uni-dot{background:var(--accent-olive-light);width:14px;height:14px;left:1px}
.uni p{max-width:none}
.uni-topics{font-size:1rem;line-height:1.5;color:var(--text-secondary);margin:0}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .unis-box{background:#1C3430}
}
:root[data-theme="dark"] .unis-box{background:#1C3430}
@media (max-width:1000px){
  .unis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .unis{grid-template-columns:1fr}
}
/* University call-out, refined: names lead, places recede, one simple green oval each (no wires) */
.uni{padding-left:34px}
.uni::before{position:absolute;left:7.5px;top:-14px;height:calc(.3em + 14px);border-left:1px solid var(--art-wire);opacity:.55;content:none}
.uni .uni-dot,.uni:nth-child(3n+2) .uni-dot,.uni:nth-child(3n) .uni-dot{left:0;top:.42em;width:20px;height:13px;border-radius:50%;background:var(--accent-olive)}
.uni-name{font:500 1.38rem/1.25 var(--font-display);color:var(--text-heading);margin:0 0 .15em}
.uni-place{font:400 .85rem/1.4 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-secondary);margin:0 0 .55em}
/* Virtual sessions: L.L.'s zip-lining story, from a virtual session, answers "Does hypnosis work online?" */
.vs-online-story{margin-top:clamp(48px,6vw,80px)}
/* Background zones, simplified (Oct 11): no blended fade. A tinted zone starts with one crisp edge, in day and night alike.
   Virtual sessions: the three practical sections form one continuous zone, separated by thin rules instead of alternating stripes. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .warm-start{background:#323B26;padding-top:clamp(64px,8vw,104px)}
}
:root[data-theme="dark"] .warm-start{background:#323B26;padding-top:clamp(64px,8vw,104px)}
.vs-steps{background:var(--surface-band);padding-top:0}
.vs-steps > .wrap{border-top:1px solid var(--line-divider);padding-top:clamp(48px,6vw,80px)}
/* Virtual sessions: "Does hypnosis work online?" now follows the intro, on the plain background, ruled like the sections below it.
   L.L.'s story lines up with the text column above it. */
.vs-online-first{padding:0 0 clamp(36px,5vw,60px)}
.vs-online-first > .wrap:first-child{border-top:1px solid var(--line-divider);padding-top:clamp(36px,5vw,60px)}
.vs-online-story .hw-story-row{margin-bottom:0;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(24px,5vw,80px)}
.vs-online-story .hw-photo{max-width:340px}
@media (max-width:860px){
  .vs-online-story .hw-story-row{grid-template-columns:1fr}
}
.vs-online-first + .vs-advantages .vs-adv:first-child{border-top:1px solid var(--line-divider)}
/* Virtual sessions, rebalanced: one centered reading column (heading above text), a consistent lead-in for each section,
   and one size for all pulled-out text (story, swan, privacy card) */
.page-vs .vs-two,.page-vs .vs-adv{grid-template-columns:minmax(0,1fr);gap:.8em}
.page-vs .vs-advantages .wrap,.page-vs .vs-prep > .wrap,.page-vs .vs-steps > .wrap,.page-vs .vs-online-first > .wrap{max-width:46rem}
.page-vs .vs-online-first > .wrap.vs-online-story{max-width:46rem}
.page-vs .vs-adv h2,.page-vs .vs-two h2{max-width:none}
.page-vs p.vs-lead{font:400 var(--t-pull)/1.45 var(--font-display);color:var(--text-body);margin:0 0 .8em}
.page-vs .vs-online-story .hw-story-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(24px,4vw,48px);align-items:start}
.page-vs .hw-story-intro{font-size:var(--t-body-lg);color:var(--text-secondary)}
.page-vs .hw-quote p{font-size:var(--t-pull);line-height:1.45}
@media (max-width:640px){
  .page-vs .vs-online-story .hw-story-row{grid-template-columns:1fr}
}
.page-vs .vs-online-story{margin-top:clamp(28px,3.5vw,44px)}
/* Working together and Referring professionals: same single centered column as Virtual sessions.
   Headings sit above their text; empty left-column placeholders are dropped; the Private side note follows its section. */
.page-col .vs-adv{grid-template-columns:minmax(0,1fr);gap:.8em}
.page-col .vs-advantages > .wrap{max-width:46rem}
.page-col .vs-adv h2{max-width:none}
.page-col .vs-adv > span:empty{display:none}
.page-col .vs-adv-head{display:contents}
.page-col .ab-side-note{order:3;max-width:44ch;margin:.2em 0 0}
.page-col.page-about h2.wt-approach{font-size:var(--t-h2)}
.research-more{font-size:var(--t-small);margin:-.4em 0 0}
/* Hypnosis works: an entry that summarizes several studies, one short finding and its citation each */
.research-list{list-style:none;margin:0 0 1.4em;padding:0}
.research-list li{position:relative;padding:0 0 0 26px;margin:0 0 1.1em}
.research-list li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--accent-olive)}
.research-list li p{margin:0 0 .35em}
.research-list li p.research-cite{margin:0}
.research-list + .research-more{margin-top:-.2em}
.research-list + .research-topic{margin-top:2.2em}
/* Outcome pages: "A personal plan, with support", a quiet signpost between the description and the plan */
.page-focus h2.plan-head{font:var(--display-weight) var(--t-h3)/1.2 var(--font-display);color:var(--text-heading);margin:1.6em 0 .55em;max-width:none}
/* Homepage: a quiet line under the four pairs for goals not named there */
.between-more{margin:clamp(24px,3vw,36px) 0 0;max-width:46rem;font-size:var(--t-body-lg);line-height:1.6;color:var(--text-secondary)}
/* Homepage: "More than visualization", between Rob's quote and the four qualities; shares the qualities' ground so the night blend continues */
.home-mtv{background:var(--surface-sessions,var(--surface-page));padding:clamp(56px,7vw,96px) 0 0}
.mtv-body{max-width:44rem}
.home-mtv h2{font-weight:var(--display-weight-large);font-size:var(--t-h2-home);line-height:1.15;margin:0 0 .6em}
.home-mtv p{font-size:var(--t-body-lg);line-height:1.6}
.home-mtv p.intro-more{font:400 var(--t-small)/1.45 var(--font-body);color:var(--text-secondary);margin:-.3em 0 1.2em}
.home-mtv + .sessions{padding-top:clamp(48px,6vw,80px)}
.home-mtv{display:flow-root}
/* Contact: time-zone note above the calendar; specific needs, steps and the referring pointer below it */
.ct-tz{margin:0 0 .7em;font-size:var(--t-small);color:var(--text-secondary)}
.ct-more .ct-block{max-width:46rem;margin:0 0 clamp(36px,5vw,56px)}
.ct-more .ct-steps{margin-bottom:0}
.ct-more .ct-steps li{font-size:var(--t-body-lg)}
/* Sleep on phones: one image only (the painting detail at the top); the winter photo shows on wider screens */
@media (max-width:640px){.page-sleep .sl-photo{display:none}}
/* Outcome pages, new flow (mocked on Sleep): the reader's problem on the left; the image with its epigraph on the right.
   Research sits between the description and the plan. */
.intro-art{min-width:0}
.intro-art .vs-detail{margin:0}
.vs-adv-body .research-note{margin:1.8em 0 .4em;max-width:none}
/* Outcome pages, flow v2 (mocked on Sleep): left sidebar = photo with the epigraph, then the mid-page invitation (client quote + booking);
   right = description, research, plan. Phones: epigraph, then the reading, then the invitation. */
.flow-adv{align-items:start}
.flow-side1{grid-area:s1}
.side-quote{margin:clamp(18px,2.4vw,28px) 0 0;max-width:none}
.side-quote p{font:400 var(--t-pull)/1.4 var(--font-display);color:var(--text-secondary);margin:0 0 .5em;max-width:none;text-wrap:balance}
.side-quote cite{display:block;font:400 var(--t-small)/1.45 var(--font-body);font-style:normal;color:var(--text-secondary)}
.side-quote cite i{font-style:italic}
.flow-side2 .cta-quote{margin-top:0}
.flow-side2 .learn-more{margin-top:1.2em}
.flow-side1 .sl-photo img{aspect-ratio:4/3;object-position:50% 55%}
.flow-side2 > .learn-more:first-child,.flow-side2 > .learn-more:first-of-type{margin-top:0}
/* Book page: client quote just below the calendar */
.ct-book .cta-quote{margin-top:clamp(28px,3vw,40px)}
/* Contact page: short, single column */
.page-reach .ct-intro{padding-bottom:clamp(64px,8vw,112px)}
.page-reach .ct-intro .wrap > *{max-width:46rem}
.page-reach .ct-intro p:not(.lede){font-size:var(--t-body-lg)}
/* Book page: specific need and caution, just above the calendar */
.ct-need{max-width:46rem;margin:0 0 clamp(28px,3.5vw,44px)}
.ct-need p{font-size:var(--t-body-lg)}
/* Book page v3: centered intro, calendar high on the page, photo below it */
.ct-center .wrap{max-width:46rem;text-align:center}
.ct-center h1{margin-inline:auto}
.ct-center .lede{margin-inline:auto}
.page-book .ct-intro{padding-bottom:clamp(20px,2.5vw,32px)}
.page-book .ct-tz{text-align:center}
.ct-after{display:grid;grid-template-columns:1fr minmax(0,26rem);gap:clamp(28px,4vw,56px);align-items:center;margin-top:clamp(28px,3vw,40px)}
.ct-after .ct-photo{justify-self:end;margin:0}
@media (max-width:860px){.ct-after{grid-template-columns:1fr}}
.page-book .ct-tz{margin-inline:auto;max-width:none}
/* Book page: specific need now sits directly under the calendar, centered */
.ct-need-after{max-width:46rem;margin:clamp(32px,4vw,48px) auto 0;text-align:center}
.ct-need-after h2{font-size:var(--t-h3);max-width:none;margin:0 0 .4em}
.ct-need-after p{font-size:var(--t-body);margin-inline:auto}
.page-book .ct-after{margin-top:clamp(40px,5vw,64px)}
.ct-after .cta-quote{margin-top:0}
/* Change: the chart sits in the narrower text column, so its legend stacks with color keys (as on phones) */
.flow-adv .sb3 .sb-legend{grid-template-columns:1fr;gap:.6em;margin-top:1em}
.flow-adv .sb-item{flex-direction:row;align-items:baseline;gap:.6em}
.flow-adv .sb-item::before{content:"";flex:none;width:12px;height:12px;border-radius:2px;align-self:center}
.flow-adv .sb-item-a::before{background:var(--accent-olive)}
.flow-adv .sb-item-b::before{background:var(--accent-coral)}
.flow-adv .sb-item-c::before{background:color-mix(in srgb,var(--text-secondary) 28%,transparent)}
/* Outcome pages, flow v3: two paths. Left (skimmers): epigraph beside the research, then the booking invitation beside the plan.
   Right (deep divers): description, research, plan. Phones read top to bottom in source order. */
.flow-adv{grid-template-areas:"s1 a" "q b" "s2 c";grid-template-rows:auto auto auto;row-gap:0}
.flow-a{grid-area:a}
.flow-q{grid-area:q;align-self:center;padding-top:1.8em}
.flow-b{grid-area:b}
.flow-c{grid-area:c}
.flow-side2{grid-area:s2;align-self:start;padding-top:1.6em}
.flow-q .side-quote{margin:0}
.flow-q .side-quote p{font-size:var(--t-pull);color:var(--text-body)}   /* focus-page epigraphs: the small quote size */
.flow-adv .flow-c > p:last-child,.flow-adv .flow-a > p:last-child{margin-bottom:0}
@media (max-width:860px){
  .flow-adv{grid-template-areas:"s1" "a" "q" "b" "c" "s2";grid-template-rows:auto}
  .flow-side1{margin-bottom:1.6em}
  .flow-q{padding-top:2em}
  .flow-side2{padding-top:1.8em}
}
/* Visual pass, Oct 13 */
/* 1. Single-column pages: the reading column starts at the same left edge as the intro above it */
.page-col .vs-advantages > .wrap,.page-vs .vs-advantages .wrap,.page-vs .vs-prep > .wrap,.page-vs .vs-steps > .wrap,.page-vs .vs-online-first > .wrap,.page-vs .vs-online-first > .wrap.vs-online-story{
  max-width:none;width:min(46rem,100% - 2*clamp(20px,5vw,56px));margin-left:max(clamp(20px,5vw,56px),(100% - 1180px)/2);margin-right:auto}
/* 2. Contact: photo beside the text, like the other pages */
.page-reach .ct-intro .wrap > *{max-width:none}
.page-reach .ct-intro .vs-intro-grid > div > *{max-width:46rem}
.page-reach .photo-mat.ct-photo img{aspect-ratio:1/1}
/* 3. Hypnosis works: topic links, and a quiet rule between studies */
.research-jump{display:flex;flex-wrap:wrap;gap:.5em .6em;margin:0 0 2.2em}
.research-jump a{font:400 var(--t-small)/1 var(--font-body);color:var(--text-body);text-decoration:none;padding:.55em .95em;border:1px solid var(--line-border);border-radius:999px}
.research-jump a:hover,.research-jump a:focus-visible{border-color:var(--action-fill);color:var(--action-fill)}
.page-works .research-topic[id]{scroll-margin-top:calc(var(--head-h) + 28px)}
.page-works .research-topic:not(:first-of-type){padding-top:1.6em;border-top:1px solid var(--line-divider)}
/* 4. Homepage pairs: four equal columns */
@media (min-width:72.01em){.between-list{grid-template-columns:repeat(4,minmax(max-content,1fr));justify-content:stretch}}
/* 5. Working together: a wider quote, portrait aligned to the top of its column */
.ab-warm .dn-quote{max-width:44ch}
.page-about .ab-meet{align-items:start}
/* 6. Referring: a shorter photo so the list comes up sooner, and normal spacing before the closing band */
.page-referring .rf-intro .photo-mat img{aspect-ratio:1/1;object-position:50% 30%}
.page-referring .rf-intro .vs-intro-grid{align-items:center}
.page-referring .vs-advantages{padding-bottom:clamp(40px,5vw,64px)}
.page-referring .vs-advantages .vs-adv:last-child{padding-bottom:0}

/* Common questions page: questions read as headings, one step below section size; book page carries two of them */
.page-questions .qa-intro{padding-bottom:0}
.page-questions .vs-adv h2{font-size:var(--t-h3);line-height:1.25;max-width:none}
.page-questions .qa-list .vs-adv:first-child{border-top:0}
.ct-qa h3{font-size:var(--t-body-lg);font-family:var(--font-display);font-weight:500;margin:1.2em 0 .4em}
.ct-qa .ct-qa-more{margin-top:1em}

/* Common questions: a feather arrives and comes to rest, within five seconds: on the olive band on wide screens (as the band
   comes into view), beside the heading on narrower ones (src/feather.js moves it). Drawn in the mobile's language; shape made by tools/feather_shape.py. 280px desktop (Oct 17), 150px phones. */
.page-questions{position:relative;overflow-x:clip}
.qa-feather{position:absolute;left:0;top:0;width:280px;pointer-events:none;z-index:2;opacity:0;will-change:transform}
.qa-sway{transform-origin:46.0% 61.9%}
.feather{display:block;width:100%;height:auto;overflow:visible}
/* Feather (Oct 17): one flat shape in the mobile's own ochre, day and night; the breaks and the shaft are cut out of it.
   Balanced so it rests on its curve: its lowest point sits under its centre of mass. Shape: tools/feather_shape.py + feather_balance.py */
.fv-fill{fill:var(--art-shape-b)}
.fv-stub{fill:none;stroke:var(--art-shape-b)}
html:not(.js) .qa-feather{opacity:1;left:auto;right:4vw;top:120px}
@media (max-width:1199px){
  .qa-feather{width:150px}
  .page-questions .qa-intro h1{max-width:9ch}
}
/* Day/night switch: words and icon in the top row on desktop, an icon beside Menu on phones and tablets.
   It shows where it will take you (moon by day, sun at night); the swap is pure CSS so it is right before scripts run. */
.theme-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--text-secondary);font:400 .9rem var(--font-body);cursor:pointer}
.theme-btn svg{width:15px;height:15px;flex:none}
.theme-btn:hover{color:var(--text-body)}
.theme-btn .i-sun,.theme-btn .tb-to-day{display:none}
.theme-btn-text{margin-left:22px;padding-left:22px;border-left:1px solid var(--line-divider);min-height:24px}
.theme-btn-icon{display:none}
@media (max-width:860px){
  .theme-btn-icon{display:inline-flex;justify-content:center;margin-left:auto;margin-right:10px;width:40px;height:40px;flex-shrink:0;border:1px solid var(--line-border);border-radius:50%;color:var(--text-body)}
  .theme-btn-icon svg{width:18px;height:18px}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .i-moon,:root:not([data-theme="light"]) .theme-btn .tb-to-night{display:none}
  :root:not([data-theme="light"]) .theme-btn .i-sun,:root:not([data-theme="light"]) .theme-btn .tb-to-day{display:inline}
}
:root[data-theme="dark"] .theme-btn .i-moon,:root[data-theme="dark"] .theme-btn .tb-to-night{display:none}
:root[data-theme="dark"] .theme-btn .i-sun,:root[data-theme="dark"] .theme-btn .tb-to-day{display:inline}
/* Body text, Oct 14: one step larger. Phones get a smaller step, because their lines are already short (about 36 characters) */
@media (max-width:640px){
  :root{--t-body-lg:1.25rem;--t-body:1.15rem}
}
/* Homepage: the sentence after What to expect lines up with the step text, not the numbers */
.home-meet p.hm-link-steps{padding-left:calc(var(--t-body-lg)*2.4)}
/* Closing band: "and doing" in gold, a little heavier to make up for the lower contrast of a colour, and a matching gold
   button, so the eye moves from the doing to the booking. The one place an accent colour carries text (see the colour notes). */
main .feature .tg-d{color:var(--tagline-doing);font-weight:500}
/* Type plan (Oct 14): large headings get a hair of tighter spacing */
h2{letter-spacing:-.005em}
/* Working together: "The Change One Moment approach" is a label, so Simple, Private, Custom and Effective lead as the headings */
.page-about h2.wt-approach,.page-col.page-about h2.wt-approach{font:700 .95rem/1.3 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:0}
.page-about h2.wt-approach + .vs-adv{padding-top:.6em}
/* You’re booked: the way back home, a full button so it can’t be missed (Oct 16, D) */
.page-booked .bk-home{margin-top:clamp(24px,3vw,36px)}
/* Very narrow phones (320–340px): tighter header so the day/night button stays a full circle (Oct 20 accessibility pass) */
@media (max-width:340px){.head-main{gap:12px}.theme-btn-icon{margin-right:0;width:36px;height:36px}.menu-btn{padding:8px 12px}}
/* "Pause motion" (Oct 20, D): a quiet text control under the mobile and the Common questions heading; same size and colour as captions */
.motion-btn{display:inline-flex;align-items:center;gap:.45em;min-height:24px;margin-top:.5em;padding:2px 0;background:none;border:0;cursor:pointer;font:400 .9rem/1.4 var(--font-body);color:var(--text-secondary);transition:color .2s,opacity .45s}
.motion-btn svg{width:.75em;height:.75em;flex:none}
.motion-btn .mb-play,.motion-btn.is-paused .mb-pause{display:none}
.motion-btn.is-paused .mb-play{display:block}
.motion-btn:hover .mb-text,.motion-btn:focus-visible .mb-text{text-decoration:underline;text-underline-offset:.2em}
.motion-btn:hover{color:var(--text-body)}
.motion-btn.mb-done{opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
html:not(.js) .motion-btn{display:none}
@media (prefers-reduced-motion:reduce){.motion-btn{display:none}}