/*
Theme Name: Rohit Sujanani
Theme URI: https://rohitsujanani.com
Author: Anirudha Talmale
Description: Bespoke single-page theme for Rohit Sujanani, hypnotherapy, psychotherapy and coaching. No page builder, no external requests, fonts served locally.
Version: 3.3.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: rohitsujanani
*/

/* ── Self-hosted fonts. Nothing is fetched from Google, by design:
      a request to fonts.gstatic.com hands the visitor's IP to a third
      country before they have consented to anything. ───────────── */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:300 600;
  font-display:swap;
  src:url('assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:300 600;
  font-display:swap;
  src:url('assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/karla-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('assets/fonts/karla-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:italic;
  font-weight:300 600;
  font-display:swap;
  src:url('assets/fonts/karla-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:italic;
  font-weight:300 600;
  font-display:swap;
  src:url('assets/fonts/karla-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Design system ─────────────────────────────── */
:root{
  --paper:#FAF6F0;
  --paper-2:#F2EBE1;
  --ink:#211F1C;
  --ink-soft:#4A463F;
  --ink-mute:#7C766C;
  --clay:#B25E42;
  --clay-deep:#8E462F;
  --sage:#5E6F5E;
  --line:#DED4C6;
  --shadow:0 1px 2px rgba(33,31,28,.04), 0 12px 32px -12px rgba(33,31,28,.13);
  --r:2px;
  --maxw:1180px;
  --serif:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:'Karla', 'Helvetica Neue', Helvetica, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* paper grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; line-height:1.08; letter-spacing:-.018em; font-variation-settings:"SOFT" 30,"WONK" 1}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.narrow{max-width:760px}

/* ── shared bits ───────────────────────────── */
.eyebrow{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--clay); display:flex; align-items:center; gap:12px;
}
/* Decorative rule removed at the client's request, 13 Sep. */
.sec-num{
  font-family:var(--serif); font-size:12px; letter-spacing:.16em; color:var(--ink-mute);
  font-feature-settings:"tnum"; text-transform:uppercase;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:.02em;
  padding:15px 30px; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:.28s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.btn-primary{background:var(--clay); color:#FFF9F3; box-shadow:0 8px 20px -10px rgba(142,70,47,.7)}
.btn-primary:hover{background:var(--clay-deep); transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(142,70,47,.75)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink); background:rgba(33,31,28,.03)}
.btn-sm{padding:11px 22px; font-size:13.5px}
.btn .short{display:none}

.ph-tag{
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--sans); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:#fff; background:rgba(33,31,28,.62); padding:5px 9px; border-radius:2px;
  backdrop-filter:blur(4px);
}
.imgph{
  position:relative; overflow:hidden; background:
    radial-gradient(120% 90% at 20% 12%, #D9C7B4 0%, transparent 60%),
    radial-gradient(100% 100% at 85% 90%, #9FAE9C 0%, transparent 58%),
    linear-gradient(160deg,#E6D9C8,#C9B9A6);
}
.imgph::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── demo bar ──────────────────────────────── */
.demobar{background:var(--ink); color:#C3BBAF; position:relative; z-index:901}
.demobar-in{display:flex; align-items:center; gap:14px; padding-top:10px; padding-bottom:10px}
.db-pill{
  flex:none; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:#211F1C; background:#E09B7F; padding:5px 10px; border-radius:2px;
}
.db-txt{font-size:12.5px; line-height:1.5}
.db-txt b{color:#FBF6EF; font-weight:600}
@media(max-width:640px){
  .demobar-in{align-items:flex-start; flex-direction:column; gap:8px}
  .db-txt{font-size:11.5px}
}

/* ── header ────────────────────────────────── */
header{
  position:sticky; top:0; z-index:900; background:rgba(250,246,240,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
header.stuck{border-bottom-color:var(--line); box-shadow:0 6px 22px -18px rgba(33,31,28,.5)}
.hd{display:flex; align-items:center; justify-content:space-between; gap:28px; padding-top:17px; padding-bottom:17px}
.mark{display:flex; flex-direction:column; line-height:1; text-decoration:none}
.mark b{font-family:var(--serif); font-size:25px; font-weight:600; letter-spacing:-.015em}
.mark span{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute); margin-top:6px}
nav{display:flex; gap:32px; align-items:center}
nav a{font-size:14.5px; text-decoration:none; color:var(--ink-soft); position:relative; padding:4px 0; transition:color .2s}
nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--clay); transition:width .3s}
nav a:hover{color:var(--ink)} nav a:hover::after{width:100%}
.hd-cta{display:flex; align-items:center; gap:18px}
.burger{display:none; background:none; border:0; padding:6px; cursor:pointer}
.burger i{display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0}

/* ── hero ──────────────────────────────────── */
.hero{position:relative; padding:96px 0 84px; overflow:hidden}
.hero::before{
  content:""; position:absolute; top:-360px; right:-260px; width:820px; height:820px; border-radius:50%;
  background:radial-gradient(circle, rgba(178,94,66,.10) 0%, rgba(178,94,66,0) 66%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:76px; align-items:center}
.hero h1{font-size:clamp(46px,5.6vw,74px); margin:26px 0 0; font-weight:300}
.hero h1 em{font-style:italic; color:var(--clay); font-weight:400}
.hero .lede{margin-top:26px; font-size:19px; line-height:1.72; color:var(--ink-soft); max-width:33em}
.hero-cta{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap}
.hero-note{margin-top:22px; font-size:13.5px; color:var(--ink-mute); display:flex; align-items:center; gap:8px}
.hero-note svg{flex:none}
.portrait{position:relative}
.portrait .imgph{aspect-ratio:4/5; border-radius:200px 200px var(--r) var(--r)}
.portrait .ph-tag{top:76px; left:50%; transform:translateX(-50%); white-space:nowrap}
.portrait-card{
  position:absolute; left:0; bottom:28px; background:var(--paper); border:1px solid var(--ink-mute);
  padding:17px 22px; box-shadow:var(--shadow); border-radius:var(--r); max-width:238px;
}
.portrait-card strong{display:block; font-family:var(--serif); font-size:16.5px; font-weight:500}
.portrait-card span{display:block; font-size:12.5px; color:var(--ink-mute); margin-top:5px; line-height:1.5}

/* ── trust bar ─────────────────────────────── */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2)}
.trust-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; flex-wrap:wrap}
.trust-item{display:flex; align-items:center; gap:11px; font-size:13px; color:var(--ink-soft); letter-spacing:.03em}
.trust-item b{font-weight:600; color:var(--ink)}
.dotsep{width:4px; height:4px; border-radius:50%; background:var(--clay); opacity:.5; flex:none}

/* ── sections ──────────────────────────────── */
section{position:relative}
.pad{padding:104px 0}
.sec-head{display:flex; gap:64px; align-items:flex-start; margin-bottom:56px}
.sec-head .sec-num{padding-top:14px; flex:none; width:132px; white-space:nowrap}
.sec-head h2{font-size:clamp(32px,3.5vw,45px); font-weight:300; max-width:16em}
.sec-head .sub{margin-top:18px; color:var(--ink-soft); max-width:36em; font-size:17px}

/* pain cards */
.pains{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.pain{background:var(--paper); padding:38px 36px; transition:background .3s}
.pain:hover{background:var(--paper-2)}
.pain h3{font-size:21px; font-weight:400; margin-bottom:11px}
.pain p{font-size:15.5px; color:var(--ink-soft); line-height:1.7}
.pain .pn{font-family:var(--serif); font-size:12px; color:var(--clay); letter-spacing:.1em; display:block; margin-bottom:16px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:46px; counter-reset:s}
.steps-4{grid-template-columns:repeat(4,1fr); gap:34px}
.step{position:relative; padding-top:34px; border-top:1px solid var(--line)}
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; top:-15px; left:0; background:var(--paper); padding-right:14px;
  font-family:var(--serif); font-size:26px; color:var(--clay); font-weight:300; line-height:1;
}
.step h3{font-size:22px; font-weight:400; margin-bottom:12px}
.step p{font-size:15.5px; color:var(--ink-soft)}

/* services */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.svc-card{
  border:1px solid var(--line); background:var(--paper); padding:34px 32px 32px;
  display:flex; flex-direction:column; transition:.3s; border-radius:var(--r);
}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#CBBCA8}
.svc-card.feature{background:var(--ink); color:#F3EDE4; border-color:var(--ink)}
.svc-card.feature .price,.svc-card.feature h3{color:#FBF6EF}
.svc-card.feature p,.svc-card.feature li{color:#C3BBAF}
.svc-card.feature .btn-ghost{border-color:rgba(255,255,255,.28); color:#FBF6EF}
.svc-tag{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--clay); font-weight:700; margin-bottom:18px}
.svc-card.feature .svc-tag{color:#E09B7F}
.svc-card h3{font-size:25px; font-weight:400; margin-bottom:10px}
.svc-card>p{font-size:15px; color:var(--ink-soft); margin-bottom:22px}
.price{font-family:var(--serif); font-size:19px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.svc-card.feature .price{border-bottom-color:rgba(255,255,255,.16)}
.price small{font-family:var(--sans); font-size:13px; color:var(--ink-mute); font-weight:400}
.svc-card.feature .price small{color:#A79E92}
.svc ul{list-style:none; padding:0; margin:0 0 28px; flex:1}
.svc li{font-size:14.5px; color:var(--ink-soft); padding-left:24px; position:relative; margin-bottom:11px; line-height:1.55}
.svc li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:1.5px; background:var(--clay)}

/* about */
.about{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:74px; align-items:center}
.about .imgph{aspect-ratio:1/1.14; border-radius:var(--r)}
.about h2{font-size:clamp(30px,3.2vw,42px); font-weight:300; margin:22px 0 24px}
.about p{color:var(--ink-soft); margin-bottom:17px; font-size:16.5px}
.creds{list-style:none; padding:22px 0 0; margin:26px 0 0; border-top:1px solid var(--line)}
.creds li{font-size:14.5px; color:var(--ink-soft); padding-left:26px; position:relative; margin-bottom:10px}
.creds li::before{content:"✓"; position:absolute; left:0; color:var(--sage); font-size:13px}

/* testimonials */
.tst{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.tst blockquote{
  margin:0; background:var(--paper); border:1px solid var(--line); padding:34px 32px;
  position:relative; border-radius:var(--r); display:flex; flex-direction:column;
}
.tst blockquote::before{
  content:"”"; position:absolute; top:8px; right:22px; font-family:var(--serif);
  font-size:78px; color:var(--clay); opacity:.16; line-height:1;
}
.stars{color:var(--clay); font-size:13px; letter-spacing:3px; margin-bottom:18px}
.tst p{font-family:var(--serif); font-size:18.5px; line-height:1.6; font-weight:300; flex:1; font-style:italic}
.tst cite{display:block; margin-top:24px; font-style:normal; font-size:13px; color:var(--ink-mute); letter-spacing:.04em}
.tst cite b{display:block; color:var(--ink); font-weight:600; font-style:normal; margin-bottom:3px; letter-spacing:0; font-size:14px}

/* booking + form */
.book{background:var(--ink); color:#EFE8DE; border-radius:var(--r)}
.book-grid{display:grid; grid-template-columns:1fr 1.06fr}
.book-left{padding:66px 58px}
.book-left .eyebrow{color:#E09B7F} .book-left .eyebrow::before{background:#E09B7F}
.book-left h2{font-size:clamp(30px,3.2vw,42px); color:#FBF6EF; font-weight:300; margin:22px 0 20px}
.book-left>p{color:#B8B0A4; font-size:16.5px; margin-bottom:30px}
.bk-list{list-style:none; padding:0; margin:0}
.bk-list li{font-size:14.5px; color:#C3BBAF; padding-left:26px; position:relative; margin-bottom:13px}
.bk-list li::before{content:""; position:absolute; left:0; top:10px; width:11px; height:1.5px; background:#E09B7F}
.cal{
  background:#FBF7F1; margin:14px; border-radius:var(--r); padding:34px 34px 30px;
  position:relative; color:var(--ink); border:1px dashed #C9B9A6;
}
.cal-hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px}
.cal-hd strong{font-family:var(--serif); font-size:19px; font-weight:500}
.cal-hd span{font-size:12px; color:var(--ink-mute)}
.cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px}
.cal-days span{text-align:center; font-size:10px; letter-spacing:.1em; color:var(--ink-mute); text-transform:uppercase}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-grid i{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-style:normal;
  font-size:13.5px; border-radius:2px; color:var(--ink-mute); border:1px solid transparent;
}
.cal-grid i.avail{background:#fff; border-color:var(--line); color:var(--ink); font-weight:600; cursor:pointer; transition:.2s}
.cal-grid i.avail:hover{background:var(--clay); color:#fff; border-color:var(--clay)}
.cal-grid i.on{background:var(--clay); border-color:var(--clay); color:#fff; font-weight:600}
.slots{display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.slots b{width:100%; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; margin-bottom:4px}
.slot{border:1px solid var(--line); background:#fff; padding:9px 15px; font-size:13.5px; border-radius:2px; font-family:var(--sans); cursor:pointer; transition:.2s}
.slot:hover{border-color:var(--clay); color:var(--clay)}
.slot.on{background:var(--clay); color:#fff; border-color:var(--clay)}

/* enquiry form */
.form-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:74px; align-items:start}
.frm{display:grid; gap:19px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:19px}
.fld label{display:block; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; margin-bottom:9px}
.fld input,.fld select,.fld textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; transition:.24s; outline:none;
}
.fld textarea{min-height:118px; resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--clay); background:#fff; box-shadow:0 0 0 3px rgba(178,94,66,.1)}
.consent{
  display:flex; gap:14px; align-items:flex-start; background:var(--paper-2);
  border:1px solid var(--line); border-left:3px solid var(--sage); padding:18px 20px; border-radius:var(--r);
}
.consent input{margin:3px 0 0; width:17px; height:17px; accent-color:var(--sage); flex:none}
.consent label{font-size:13.5px; line-height:1.6; color:var(--ink-soft)}
.consent a{color:var(--clay); text-underline-offset:3px}
.frm-note{font-size:12.5px; color:var(--ink-mute); line-height:1.6; display:flex; gap:9px; align-items:flex-start}
.frm-note svg{flex:none; margin-top:2px}

.gdpr-panel{border:1px solid var(--line); background:var(--paper-2); padding:34px 32px; border-radius:var(--r)}
.gdpr-panel h3{font-size:22px; font-weight:400; margin-bottom:16px}
.gdpr-panel ul{list-style:none; padding:0; margin:0}
.gdpr-panel li{font-size:14.5px; color:var(--ink-soft); padding-left:28px; position:relative; margin-bottom:14px; line-height:1.6}
.gdpr-panel li::before{
  content:""; position:absolute; left:3px; top:9px; width:7px; height:7px;
  background:var(--sage); transform:rotate(45deg);
}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:26px 40px 26px 0; position:relative;
  font-family:var(--serif); font-size:21px; font-weight:400; transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:24px; color:var(--clay); font-family:var(--sans); font-weight:300; transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--clay)}
.faq .ans{padding:0 60px 28px 0; color:var(--ink-soft); font-size:16px}

/* footer */
footer{background:var(--ink); color:#A79E92; padding:74px 0 30px; font-size:14px}
.ft-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.11)}
.ft-grid h4{color:#FBF6EF; font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin-bottom:20px}
.ft-grid a{display:block; color:#A79E92; text-decoration:none; margin-bottom:11px; transition:color .2s}
.ft-grid a:hover{color:#E09B7F}
.ft-mark>b{font-family:var(--serif); font-size:22px; color:#FBF6EF; font-weight:500; display:block}
.ft-mark>span{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; margin-top:8px; display:block}
.ft-mark>p{margin-top:20px; line-height:1.7; max-width:27em; font-size:13.5px}
.ft-legal{padding-top:26px; font-size:12px; line-height:1.7; color:#8C8478; border-top:1px solid rgba(255,255,255,.11)}
.ft-btm{display:flex; justify-content:space-between; gap:24px; padding-top:26px; font-size:12.5px; flex-wrap:wrap}
.ft-btm a{color:#A79E92; text-decoration:none; margin-left:22px}
.ft-btm a:hover{color:#E09B7F}
.crisis{
  background:rgba(224,155,127,.09); border:1px solid rgba(224,155,127,.28); border-radius:var(--r);
  padding:16px 20px; margin-top:22px; font-size:13px; color:#D8CFC3; line-height:1.6;
}
.crisis b{color:#E09B7F; font-family:var(--sans); font-size:13px; font-weight:700; display:inline}

/* cookie banner */
.cookie{
  position:fixed; left:24px; bottom:24px; z-index:9999; max-width:420px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 20px 50px -18px rgba(33,31,28,.42); padding:26px 26px 22px;
}
.cookie h4{font-size:19px; font-weight:400; margin-bottom:10px}
.cookie p{font-size:13.5px; color:var(--ink-soft); line-height:1.62; margin-bottom:18px}
.cookie p a{color:var(--clay); text-underline-offset:3px}
.ck-btns{display:flex; gap:9px; flex-wrap:wrap}
.ck-btns .btn{flex:1; min-width:112px; padding:12px 14px; font-size:13.5px}
.ck-pref{
  display:block; width:100%; margin-top:12px; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; color:var(--ink-mute); text-decoration:underline;
  text-underline-offset:3px; padding:4px;
}

/* reveal */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1; transform:none}

@media(max-width:1000px){
  .hero-grid,.about-grid,.form-wrap,.book-grid{grid-template-columns:1fr; gap:46px}
  .steps,.svc,.tst{grid-template-columns:1fr}
  .pains{grid-template-columns:1fr}
  .sec-head{flex-direction:column; gap:14px}
  .ft-grid{grid-template-columns:1fr 1fr; gap:36px}
  nav{display:none}
  .burger{display:block}
  .portrait-card{left:auto; right:16px; bottom:16px}
  .book-left{padding:44px 32px}
  .pad{padding:74px 0}
  .wrap{padding:0 22px}
  .cookie{left:12px; right:12px; bottom:12px; max-width:none}
}
@media(max-width:640px){
  .hd{padding-top:12px; padding-bottom:12px; gap:12px}
  .mark b{font-size:20px; white-space:nowrap}
  .mark span{display:none}
  .hd-cta{gap:8px}
  .hd-cta .btn-sm{padding:10px 14px; font-size:12.5px}
  .hd-cta .btn-sm .full{display:none}
  .hd-cta .btn-sm .short{display:inline}
  .hero{padding:52px 0 60px}
  .hero h1{font-size:clamp(38px,10.4vw,50px)}
  .hero .lede{font-size:17px; margin-top:20px}
  .hero-cta{margin-top:30px}
  .hero-cta .btn{width:100%}
  /* Hidden on phones: it overlapped the photo, and the trust bar
     directly below already states the years and the NLP licence. */
  .portrait-card{display:none}
  .trust-in{gap:10px 22px; padding:20px 0}
  .pain{padding:30px 26px}
  .book-left{padding:38px 26px}
  .cal{padding:24px 20px}
  .row2{grid-template-columns:1fr}
  .faq summary{font-size:19px; padding-right:34px}
  .faq .ans{padding-right:18px}
  .ft-grid{grid-template-columns:1fr}
}

/* ── Theme additions beyond the static mockup ───────────────── */

/* Accessibility: skip link, visible only on keyboard focus. */
.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; top:12px; left:12px; z-index:10000; width:auto; height:auto;
  clip:auto; margin:0; padding:12px 20px; background:var(--ink); color:#FBF6EF;
  font-family:var(--sans); font-size:14px; font-weight:600; border-radius:var(--r);
  text-decoration:none;
}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px}

/* Honeypot. Hidden from people, left in the DOM for bots to fall into.
   Not display:none - some bots skip those. */
.rs-hp{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0}

/* Form result banners */
.rs-notice{
  grid-column:1 / -1; padding:20px 24px; border-radius:var(--r);
  font-size:15.5px; line-height:1.65; margin-bottom:8px;
}
.rs-notice-ok{background:#EDF1EC; border:1px solid var(--sage); color:#33402F}
.rs-notice-ok b{display:block; margin-bottom:6px; font-size:16.5px}
.rs-notice-bad{background:#F8EDE9; border:1px solid var(--clay); color:#7A3A26}

/* Mobile navigation */
.mobile-nav{display:none}
.burger.is-open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.burger i{transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s}

@media(max-width:1000px){
  .mobile-nav{
    display:block; border-top:1px solid var(--line); background:var(--paper);
    padding:8px 22px 18px;
  }
  .mobile-nav[hidden]{display:none}
  .mobile-nav a{
    display:block; padding:14px 0; font-size:16px; text-decoration:none;
    color:var(--ink-soft); border-bottom:1px solid var(--line);
  }
  .mobile-nav a:last-child{border-bottom:0}
}

/* The 4-up EAER grid needs to stack sensibly on the way down */
@media(max-width:1000px) and (min-width:641px){
  .steps-4{grid-template-columns:repeat(2,1fr); gap:40px}
}
@media(max-width:640px){
  .steps-4{grid-template-columns:1fr; gap:38px}
}

/* Entry content for the fallback templates */
.entry p{margin-bottom:18px; color:var(--ink-soft)}
.entry h2,.entry h3{margin:34px 0 14px}
.entry a{color:var(--clay)}

/* ── Real portrait replaces the placeholder block ───────────── */
.portrait-img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  border-radius:200px 200px var(--r) var(--r); display:block;
}
.about-img{
  width:100%; height:auto; aspect-ratio:1/1.14; object-fit:cover; object-position:50% 20%;
  border-radius:var(--r); display:block;
}

/* Four pricing cards instead of three */
.svc-4{grid-template-columns:repeat(4,1fr); gap:20px}
.svc-4 .svc-card{padding:30px 26px 28px; min-width:0}
.svc-4>*{min-width:0}
.svc-4 .price{overflow-wrap:anywhere}
.svc-4 .svc-card h3{font-size:22px}
.svc-4 .price{font-size:17px}
.svc-4 .price small{display:block; margin-top:6px; font-size:12.5px; line-height:1.5}
@media(max-width:1180px) and (min-width:1001px){
  .svc-4{grid-template-columns:repeat(2,1fr); gap:24px}
}
@media(max-width:1000px){
  .svc-4{grid-template-columns:1fr}
}

/* Bold lead-ins inside the focus cards and steps */
.pain p b,.step p b{color:var(--ink); font-weight:600; display:block; margin-bottom:6px}

/* Lists inside FAQ answers */
.ans p{margin-bottom:14px}
.ans-list{list-style:none; padding:0; margin:0}
.ans-list li{position:relative; padding-left:22px; margin-bottom:12px; line-height:1.65}
.ans-list li::before{
  content:""; position:absolute; left:0; top:11px; width:9px; height:1.5px; background:var(--clay);
}
.ans-list b{color:var(--ink); font-weight:600}
.ans a{color:var(--clay)}

/* The booking feature list carries bold lead-ins now */
.bk-list b{color:#FBF6EF; font-weight:600}

/* Credentials list: his wording runs long, so give it room */
.creds li{padding-left:26px; margin-bottom:13px; line-height:1.6}
.creds b{color:var(--ink); font-weight:600}
.creds em{color:var(--ink-mute); font-style:italic}

/* His headline runs longer than the placeholder did, so ease the top end
   of the clamp - otherwise it takes three lines and pushes the CTA under
   the fold on a laptop. */
.hero h1{font-size:clamp(40px,4.6vw,60px)}
@media(max-width:640px){ .hero h1{font-size:clamp(32px,8.6vw,42px)} }

/* ── Testimonials ───────────────────────────────────────────
   One real quote should read as deliberate, not as two missing.
   Centre it and give it room rather than leaving empty columns. */
.tst-single{grid-template-columns:minmax(0,760px); justify-content:center}
.tst-single blockquote{padding:44px 48px; text-align:center}
.tst-single blockquote::before{left:50%; right:auto; transform:translateX(-50%); top:2px}
.tst-single p{font-size:21px}
.tst-single cite{margin-top:28px}
@media(max-width:640px){
  .tst-single blockquote{padding:32px 26px}
  .tst-single p{font-size:18.5px}
}
/* No star row any more - a rating nobody gave is a rating we don't show. */

/* ── Cards accepted. Text marks, not logo images: a logo hosted anywhere
   else is a third-party request on a page that must not make any, and
   real card-brand artwork carries its own usage rules. Switched on by the
   rs_payments_live option once Stripe is actually connected. ─────────── */
.ft-cards{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.11); font-size:12.5px;
}
.ft-cards>span{color:#A79E92}
.ft-cards ul{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.ft-cards li{
  border:1px solid rgba(255,255,255,.2); border-radius:3px; padding:5px 10px;
  font-size:11px; letter-spacing:.06em; color:#D8CFC3; white-space:nowrap;
}
.ft-cards + .ft-legal{border-top:0; padding-top:20px}

/* ── Client feedback, 12 Sep ─────────────────────────────────────

   The short rule before an eyebrow is vertically centred by the flex
   container. When the eyebrow wraps to two lines it therefore lands
   beside the SECOND line, which reads as a stray dash next to
   "Bicester". Pin it to the first line, and tighten the hero eyebrow
   so it fits on one line at desktop width in the first place.        */
.eyebrow{align-items:flex-start}
.eyebrow::before{margin-top:.62em}

.hero .eyebrow{
  font-size:10.5px; letter-spacing:.165em; white-space:nowrap;
}
@media(max-width:1100px){
  .hero .eyebrow{white-space:normal; font-size:10px; letter-spacing:.14em}
}

/* About: the portrait should run the full height of the text beside it,
   rather than sitting as a fixed-ratio block with dead space under it. */
.about-grid{align-items:stretch}
.about-grid>.rv:first-child{display:flex}
.about-img{
  width:100%; height:100%; aspect-ratio:auto; min-height:420px;
  object-fit:cover; object-position:50% 18%;
}
@media(max-width:1000px){
  .about-grid>.rv:first-child{display:block}
  .about-img{height:auto; aspect-ratio:4/5; min-height:0}
}

/* ── Hero eyebrow, 13 Sep ─────────────────────────────────────────
   Client didn't want the small decorative rule, and wants the break
   controlled rather than left to the viewport: line one is what he
   does, line two is where. Two block spans, no separator character,
   no leading rule. The rule stays on the section eyebrows further
   down the page, where it reads as a label rather than stray
   punctuation.                                                      */
.eyebrow-hero::before{display:none}
.eyebrow-hero{display:block; white-space:normal}
.hero .eyebrow-hero{font-size:11px; letter-spacing:.19em; line-height:1.85}
.eyebrow-hero span{display:block}
.eyebrow-hero span + span{color:var(--ink-mute)}


/* ── Star rating input ───────────────────────────────────────────
   Radios in reverse DOM order so plain CSS can light up the hovered
   star and everything before it, with no JavaScript. Keyboard and
   screen readers still get real radio inputs.                      */
.rs-stars{display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px}
.rs-stars input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.rs-stars label{
  font-size:30px; line-height:1; color:var(--line); cursor:pointer;
  transition:color .15s; margin:0; padding:0 2px;
}
.rs-stars label:hover,
.rs-stars label:hover ~ label,
.rs-stars input:checked ~ label{color:var(--clay)}
.rs-stars input:focus-visible + label{outline:2px solid var(--clay); outline-offset:3px}

.fld-hint{margin-top:8px; font-size:13px; color:var(--ink-mute); line-height:1.55}
.fld input[type=file]{
  padding:12px 14px; background:var(--paper); border:1px dashed var(--line);
  font-size:14.5px; width:100%; border-radius:var(--r);
}

/* Published testimonials: show a rating only when one was actually given,
   and a photo only when one was actually supplied. */
.tst .stars{color:var(--clay); font-size:14px; letter-spacing:3px; margin-bottom:16px}
.tst-photo{
  width:58px; height:58px; border-radius:50%; object-fit:cover;
  margin:0 auto 14px; display:block;
}

/* ── Booking: consent-gated Cal.com embed ────────────────────────
   Nothing from Cal.com loads until the visitor presses the button,
   so the panel has to stand on its own while it waits.            */
.cal-gate{background:#FBF7F1; margin:14px; border-radius:var(--r); color:var(--ink); border:1px dashed #C9B9A6}
.cal-intro{padding:34px 32px 30px}
.cal-intro strong{display:block; font-family:var(--serif); font-size:21px; font-weight:500; margin-bottom:10px}
.cal-intro>p{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:22px}

.cal-choose{display:grid; gap:10px; margin-bottom:22px}
.cal-pick{
  text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; cursor:pointer; font-family:var(--sans); transition:.2s; width:100%;
}
.cal-pick b{display:block; font-size:15.5px; font-weight:600; color:var(--ink)}
.cal-pick span{display:block; font-size:13px; color:var(--ink-mute); margin-top:3px}
.cal-pick:hover{border-color:#CBBCA8}
.cal-pick.on{border-color:var(--clay); box-shadow:0 0 0 3px rgba(178,94,66,.12)}
.cal-pick.on b{color:var(--clay-deep)}

.cal-load{width:100%; justify-content:center}
.cal-load:disabled{opacity:.6; cursor:default; transform:none}
.cal-alt{margin-top:16px; font-size:13px; color:var(--ink-mute); text-align:center}
.cal-alt a{color:var(--clay); text-underline-offset:3px}

.cal-mount{min-height:520px; padding:8px}
.cal-mount[hidden]{display:none}

@media(max-width:640px){
  .cal-intro{padding:26px 22px 24px}
  .cal-mount{min-height:460px; padding:4px}
}

/* ── Feedback from the client and a reviewer, 17 Sep ─────────────

   1. TRUST BAR ON MOBILE. The bar is a flex row with space-between.
      Once it wraps, a leftover item gets flung to the right-hand end
      of its row, which is the ragged look the reviewer photographed
      on an iPhone. At 360px it happened to stack cleanly, which is
      why measuring overflow alone did not catch it. Below the desktop
      breakpoint it is now a plain stacked list.

   2. TYPE SIZE. Client found the text too small. Raised the base and
      everything that keys off it, rather than nudging one element.  */

@media(max-width:1000px){
  .trust-in{
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:flex-start; gap:11px; padding-top:22px; padding-bottom:22px;
  }
  .trust-item{width:100%; font-size:14.5px}
}

/* Larger, more comfortable reading size throughout */
body{font-size:18px}
.trust-item{font-size:14px}
.sec-head .sub{font-size:18px}
.pain p,.step p{font-size:16.5px}
.pain h3{font-size:22px}
.svc-card>p{font-size:15.5px}
.svc li{font-size:15.5px}
.svc-4 .price small{font-size:13.5px}
.about p{font-size:17.5px}
.creds li{font-size:15.5px}
.gdpr-panel li{font-size:15.5px}
.faq summary{font-size:22px}
.faq .ans,.ans-list li{font-size:17px}
.hero .lede{font-size:20px}
.hero-note{font-size:14.5px}
.portrait-card strong{font-size:17.5px}
.portrait-card span{font-size:13.5px}
.cal-intro>p{font-size:15.5px}
.cal-pick b{font-size:16.5px}
.cal-pick span{font-size:13.5px}
.bk-list li{font-size:15.5px}
.tst p{font-size:19.5px}
.frm-note span{font-size:13.5px}
.consent label{font-size:14.5px}
footer{font-size:15px}
.ft-grid a{font-size:15px}
.crisis{font-size:13.5px}
.ft-legal{font-size:12.5px}

@media(max-width:640px){
  body{font-size:17px}
  .hero .lede{font-size:18px}
  .faq summary{font-size:20px}
}

/* Lead line sitting above the section headline, at the client's request. */
.sec-head .sub-lead{margin-top:0; margin-bottom:14px; color:var(--ink-soft)}
.sec-head .sub-lead + h2{margin-top:0}

/* ══ Mobile restructure, from the UX review and client feedback, 19 Sep ══

   Two independent reviewers said the same thing: on a phone the page
   leads with the problem and the price list before anyone knows who is
   guiding them, and it is a long scroll. In therapy people decide they
   trust the practitioner before they consider the package.

   So on mobile only, About is lifted directly under the hero. Desktop
   order is unchanged, because there the portrait is already beside the
   headline and the reasoning does not apply.                            */

@media(max-width:1000px){
  main{display:flex; flex-direction:column}
  .sec-hero     {order:1}
  .sec-trust    {order:2}
  .sec-about    {order:3}   /* who you are, straight after the hook */
  .sec-focus    {order:4}
  .sec-process  {order:5}
  .sec-sessions {order:6}
  /* everything else keeps document order after these */
  main > *:not([class*="sec-"]){order:7}

  /* The about section is tall on mobile; trim it so lifting it up does
     not simply move the wall of text higher. */
  .sec-about .about-img{aspect-ratio:4/3; object-position:50% 22%}
}

/* ── EAER steps as cards on mobile ──────────────────────────────
   The review said the numbers and titles blend into the body text when
   scanning vertically. Give each step an enclosed container and put the
   number back, in the accent colour.                                  */
@media(max-width:1000px){
  .steps-4{gap:14px; counter-reset:s}
  .steps-4 .step{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
    padding:24px 22px 22px; margin:0; border-top:1px solid var(--line);
  }
  .steps-4 .step::before{
    position:static; display:block; padding:0; margin-bottom:10px;
    font-size:14px; letter-spacing:.14em; color:var(--clay); font-family:var(--sans);
    font-weight:700; background:none;
  }
  .steps-4 .step h3{font-size:24px; margin-bottom:10px}
  .sec-process .steps-4 .step{background:#FBF7F1}
}

/* ── Long card copy: show the lead line, reveal the rest on tap ──
   Directly addresses "you have to scroll a lot for information". The
   bold opening sentence always shows, so nothing is hidden that carries
   the meaning. Uses <details>, so it works without JavaScript and is
   readable by screen readers either way.                              */
.more{display:inline}
@media(max-width:1000px){
  .more[data-collapsible]{display:block}
  .more-toggle{
    display:inline-block; margin-top:10px; background:none; border:0; padding:0;
    font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--clay);
    cursor:pointer; text-underline-offset:3px; text-decoration:underline;
  }
  .more-body{display:none}
  .more-body.open{display:block; margin-top:8px}
}


/* ── Very narrow phones, 359px and under ─────────────────────────
   iPhone SE 1st gen and similar. Buttons are nowrap everywhere else so
   labels never break mid-phrase, but "Book a free 20-minute consultation"
   has a 315px min-content width, which forced the hero grid column wider
   than the viewport and made the whole page scroll sideways. Below 360px
   the label is allowed to wrap onto two lines instead. */
@media(max-width:359px){
  .btn{white-space:normal; padding-left:18px; padding-right:18px}
  .wrap{padding:0 16px}
  .hero h1{font-size:34px}
}

/* ── Fee block: duration first, then one figure per line ─────────
   Client's own layout, sent 23 Sep. A stacked list reads faster on a
   phone than figures separated by middots, and it leaves room for the
   second duration on the couples card without a wall of text. */
.price-dur{
  display:block; font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:6px;
}
.price-dur-2{margin-top:16px}
.price-line{display:block; line-height:1.25}
.price small{display:block; margin-top:12px}

/* ── Testimonials scroll sideways instead of wrapping ────────────
   Four of them in a three-column grid wrapped onto a second row and ate
   most of a phone screen. One row that scrolls keeps the section the same
   height however many he collects, which is the point: he is expecting
   more. Native overflow scrolling, so keyboard and screen readers get it
   free, no carousel library and no JavaScript. */
.tst{
  display:flex; gap:26px;
  grid-template-columns:none;
  /* Cards size to their own text. Without this, flex stretches every card
     to match the longest testimonial and a two-line quote becomes a card
     with 600px of empty cream in it. */
  align-items:flex-start;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding-bottom:16px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
/* The quote no longer needs to grow to push the attribution to the bottom,
   because there is no longer a fixed height to fill. */
.tst p{flex:none}
/* A very long testimonial should not set the height of the whole section.
   Clamped, with the full text still in the HTML for search and assistive
   tech, and the card itself scrolls if someone wants the rest. */
.tst blockquote{max-height:min(74vh, 560px); overflow-y:auto}
.tst::-webkit-scrollbar{height:6px}
.tst::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}
.tst::-webkit-scrollbar-track{background:transparent}
.tst blockquote{
  flex:0 0 clamp(270px, 30%, 400px);
  scroll-snap-align:start;
}
/* A single testimonial should not look like a stranded card in a scroller. */
.tst-single{display:block; overflow:visible}
.tst-single blockquote{flex:none}
@media(max-width:1000px){
  /* Just enough of the next card visible to say "there is more this way". */
  .tst blockquote{flex:0 0 84%}
}

/* Fade only on the cards that actually overflow, flagged from JS. */
.tst blockquote.is-clipped{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
}
.tst blockquote.is-clipped.is-scrolled-end{
  -webkit-mask-image:none; mask-image:none;
}

/* ── WhatsApp button ─────────────────────────────────────────────
   Deliberately not WhatsApp green. On a cream and clay page a bright
   green blob reads as a third-party widget bolted on; the glyph alone is
   recognisable enough. Sits clear of the cookie panel, and steps aside
   when the panel is open so it can never cover the Reject button. */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:870;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 16px; border-radius:999px;
  background:var(--ink); color:var(--paper); text-decoration:none;
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.01em;
  box-shadow:0 10px 28px -12px rgba(33,31,28,.7);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa:hover{transform:translateY(-2px); box-shadow:0 14px 32px -12px rgba(33,31,28,.8)}
.wa:focus-visible{outline:2px solid var(--clay); outline-offset:3px}
.wa svg{flex:none}
/* While the cookie panel is up, the button gets out of its way. */
body:has(.cookie:not([hidden])) .wa{bottom:auto; top:auto; opacity:0; pointer-events:none}
@media(max-width:1000px){
  .wa{right:14px; bottom:14px; padding:12px; }
  .wa-label{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}
@media print{ .wa{display:none} }

/* Out of the way when it would sit on one of the page's own buttons. */
.wa.wa-yield{opacity:0; pointer-events:none; transform:translateY(8px)}
.wa{transition:transform .2s ease, box-shadow .2s ease, opacity .18s ease}

/* The in-person booking note sits above the session cards. */
.svc-note{
  max-width:74ch; margin:0 0 34px;
  padding:20px 24px; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--clay);
}
.svc-note b{color:var(--ink)}
.svc-note a{color:var(--clay)}
@media(max-width:1000px){ .svc-note{padding:18px 20px; margin-bottom:26px} }