/* =========================================================
   Tracey Halliday — Clinical Hypnotherapy
   Palette + type lifted from the printed flyer:
   soft cream, sage green, botanical line art.
   ========================================================= */

:root{
  --cream:        #F8F5EE;
  --cream-warm:   #F2EDE2;
  --cream-deep:   #E9E3D5;
  --paper:        #FFFDF8;

  --sage:         #8B9A79;
  --sage-mid:     #758566;
  --sage-deep:    #5E6D4F;
  --sage-tint:    #DDE3D4;
  --sage-wash:    #EEF1E8;

  --ink:          #3C4736;
  --ink-soft:     #5A6753;
  --ink-mute:     #7C8776;

  --line:         rgba(94,109,79,.16);
  --shadow-sm:    0 2px 10px rgba(70,84,60,.06);
  --shadow-md:    0 14px 40px -18px rgba(70,84,60,.28);
  --shadow-lg:    0 40px 80px -40px rgba(70,84,60,.38);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --script:  "Parisienne", "Segoe Script", cursive;

  --ease:    cubic-bezier(.22,.61,.36,1);
  --gutter:  clamp(1.25rem, 5vw, 2.5rem);
  --radius:  22px;
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; line-height:1.12; letter-spacing:.005em; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:3px; border-radius:6px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sage-deep); color:var(--paper);
  padding:.75rem 1.25rem; border-radius:0 0 10px 0; font-size:.9rem;
}
.skip-link:focus{ left:0; }

/* ---------- layout ---------- */
.wrap{ width:min(1160px,100% - var(--gutter)*2); margin-inline:auto; }
.wrap--narrow{ width:min(760px,100% - var(--gutter)*2); }

.section{ position:relative; padding:clamp(4.5rem,10vw,8rem) 0; }
.section--tinted{ background:var(--cream-warm); }

.section-head{ max-width:44rem; margin:0 auto clamp(2.75rem,5vw,4rem); text-align:center; }
.section-head h2{ font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem); }
.section-sub{ margin-top:1.1rem; color:var(--ink-soft); }

.eyebrow{
  margin:0 0 .9rem;
  font-size:.7rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--sage-mid);
}

.script-accent{
  font-family:var(--script);
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  color:var(--sage-mid);
  line-height:1.4;
  margin:.2em 0 .8em;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(248,245,238,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px -12px rgba(70,84,60,.35);
}
.header-inner{
  display:flex; align-items:center; gap:1.5rem;
  min-height:74px; padding-block:.65rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.brand-fallback{ display:flex; align-items:center; gap:.7rem; }

/* The logo only appears once script.js confirms a file loaded; until then the
   type lockup stands in, so the header never renders empty. */
/* The logo is visible from the first paint and the type lockup is hidden,
   which is the other way round from before. Showing the lockup and swapping
   it in JS meant it painted for a frame or two first — that was the "old logo
   flashing up". The lockup now only appears if the image genuinely fails.
   The asset is a real transparent PNG, so it needs no blend mode — that would
   only tint her brand green against the cream. */
.brand-logo{ display:block; width:auto; height:52px; }
.brand-fallback{ display:none; }
.brand.no-logo .brand-logo{ display:none; }
.brand.no-logo .brand-fallback{ display:flex; }
@media (max-width:520px){ .brand-logo{ height:42px; } }
@media (max-width:380px){ .brand-logo{ height:36px; } }

/* The footer is dark green, where her sage ink would all but disappear, so
   the logo is rendered as a light silhouette. brightness(0) flattens it to
   black, invert(1) lifts it to white; the alpha channel is preserved, so the
   fine dragonfly linework survives. */
.footer-logo{
  display:block; width:auto; height:74px; margin:0 auto;
  filter:brightness(0) invert(1); opacity:.9;
}
.footer-fallback{ display:none; }
.footer-brand.no-logo .footer-logo{ display:none; }
.footer-brand.no-logo .footer-fallback{ display:block; }
@media (max-width:520px){ .footer-logo{ height:58px; } }
.brand-mark{ display:block; color:var(--sage-mid); flex:none; }
.dragonfly{ display:block; width:100%; height:100%; }
.dragonfly--sm{ width:30px; height:30px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  font-family:var(--display); font-size:1.12rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap;
}
.brand-sub{
  font-size:.55rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:.25rem;
}

.site-nav{ display:flex; gap:2rem; }
.site-nav a{
  position:relative; text-decoration:none; font-size:.87rem;
  letter-spacing:.06em; color:var(--ink-soft); padding-block:.35rem;
  white-space:nowrap;
  transition:color .35s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--sage); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* five nav items plus the full CTA stop fitting well before 900px */
@media (max-width:1120px){
  .site-nav{ gap:1.35rem; }
  .site-nav a{ font-size:.82rem; }
}
@media (max-width:1000px){
  .site-nav{ display:none; }
}
@media (max-width:400px){
  /* the wordmark and the CTA together exceed 320px at the default size */
  .header-inner{ gap:.75rem; }
  .brand{ gap:.5rem; }
  .brand-name{ font-size:.85rem; letter-spacing:.08em; }
  .brand-sub{ font-size:.5rem; letter-spacing:.2em; }
  .btn--sm{ padding:.65rem 1rem; }
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--sage-deep); --btn-fg:var(--paper);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; text-decoration:none; cursor:pointer;
  padding:.95rem 1.85rem; border-radius:999px; border:1px solid transparent;
  font-size:.83rem; font-weight:400; letter-spacing:.13em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn .ico{ width:17px; height:17px; flex:none; }
.btn--solid{ background:var(--btn-bg); color:var(--btn-fg); box-shadow:var(--shadow-sm); }
.btn--solid:hover{ background:var(--sage-mid); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost{ background:transparent; color:var(--sage-deep); border-color:var(--sage); }
.btn--ghost:hover{ background:var(--sage-wash); transform:translateY(-2px); }
.btn--sm{ padding:.7rem 1.3rem; font-size:.72rem; }
.btn--lg{ padding:1.15rem 2.4rem; font-size:.86rem; }
.btn:active{ transform:translateY(0); }

.header-cta{ flex:none; }
/* .btn is a flex container with gap:.6rem for its icon, but this button's two
   words are also flex items, so that gap was opening a wide space mid-label */
.header-cta{ gap:.3em; }
/* Keep a booking button in the header at every width — the label just shortens
   to "Book" once the full text would wrap into the wordmark. */
@media (max-width:760px){ .cta-more{ display:none; } }

.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* "Book Initial Consultation" is wider than a 320px screen with nowrap on,
   and a grid item won't shrink past its min-content width — so the whole
   hero column was pushing the page sideways. Let long labels wrap down here. */
@media (max-width:430px){
  .btn{ white-space:normal; padding-inline:1.35rem; line-height:1.35; }
}

/* ---------- botanical decoration ----------
   Three layers of motion, all very small: the whole sprig drifts, the stem
   sways, and the lighter tip sways faster on a different phase. Nothing
   moves more than a couple of degrees — you notice it only if you look. */
.has-leaves{ position:relative; overflow:hidden; }

.leaf{
  position:absolute; color:var(--sage); opacity:.22;
  pointer-events:none; z-index:0;
}
.leaf svg{
  width:100%; height:100%; display:block;
  transform-origin:0% 100%;
  animation:sprig-drift var(--dur,19s) ease-in-out var(--delay,0s) infinite;
}

@keyframes sprig-drift{
  0%,100%{ transform:rotate(-.75deg) translateY(0); }
  50%    { transform:rotate(.75deg)  translateY(-5px); }
}

/* These live inside <defs>; the computed styles are cloned into every
   <use> instance, so one rule animates all of them. */
#botanical .bot-stem{
  transform-origin:12px 190px;
  animation:sway-stem 13s ease-in-out infinite;
}
#botanical .bot-tip{
  transform-origin:78px 88px;
  animation:sway-tip 8.5s ease-in-out infinite;
}
@keyframes sway-stem{
  0%,100%{ transform:rotate(-1.1deg); }
  50%    { transform:rotate(1.1deg); }
}
@keyframes sway-tip{
  0%,100%{ transform:rotate(1.7deg); }
  50%    { transform:rotate(-1.7deg); }
}

.leaf--tl{ top:-2rem; left:-3rem; width:clamp(150px,22vw,300px); aspect-ratio:1; --dur:19s; }
.leaf--br{ bottom:-2rem; right:-3rem; width:clamp(150px,22vw,300px); aspect-ratio:1; transform:scaleX(-1) rotate(8deg); --dur:23s; --delay:-6s; }
.leaf--book-l{ top:8%; left:-4rem; width:clamp(130px,16vw,230px); aspect-ratio:1; opacity:.16; --dur:21s; --delay:-3s; }
.leaf--book-r{ bottom:6%; right:-4rem; width:clamp(130px,16vw,230px); aspect-ratio:1; opacity:.16; transform:scaleX(-1); --dur:17s; --delay:-9s; }
.leaf--help-r{ top:14%; right:-4.5rem; width:clamp(120px,15vw,215px); aspect-ratio:1; opacity:.15; transform:scaleX(-1) rotate(-6deg); --dur:25s; --delay:-11s; }
.leaf--how-l{ bottom:8%; left:-4.5rem; width:clamp(120px,15vw,215px); aspect-ratio:1; opacity:.15; --dur:18s; --delay:-5s; }
.leaf--faq-r{ top:20%; right:-5rem; width:clamp(110px,13vw,195px); aspect-ratio:1; opacity:.13; transform:scaleX(-1); --dur:22s; --delay:-14s; }

@media (max-width:760px){
  .leaf--br,.leaf--book-r,.leaf--help-r,.leaf--faq-r{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,7vw,5.5rem);
  background:
    radial-gradient(120% 90% at 15% 0%, var(--paper) 0%, transparent 60%),
    radial-gradient(90% 70% at 100% 100%, var(--sage-wash) 0%, transparent 62%),
    var(--cream);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
/* grid items default to min-width:auto, so a wide child can force the column
   wider than the container */
.hero-grid > *{ min-width:0; }
/* The programme is the thing being sold, so it leads; her name and
   qualification sit under it as the credibility line. Uppercase serif with
   wide tracking reads as an established practice rather than a flourish. */
.hero-brand{
  margin:0 0 1.6rem; padding-bottom:1.3rem;
  border-bottom:1px solid var(--line);
  max-width:26rem;
}
.hero-brand-name{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.55rem,1.2rem + 1.5vw,2.2rem);
  font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  line-height:1.15; color:var(--sage-deep);
}
.hero-brand-by{
  display:block; margin-top:.65rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute);
}
@media (max-width:900px){ .hero-brand{ margin-inline:auto; } }

.hero h1{ font-size:clamp(2.35rem,1.5rem + 2.9vw,3.7rem); margin-bottom:.15em; text-wrap:balance; }
.hero-copy .lede{ max-width:34rem; color:var(--ink-soft); font-size:1.06em; }

.dragonfly-wrap{ display:block; color:var(--sage-mid); margin-bottom:1.4rem; }
.dragonfly--lg{ width:clamp(52px,6vw,68px); height:auto; }
.dragonfly-wrap .dragonfly{ animation:hover-float 7s var(--ease) infinite; }
.dragonfly-wrap--still{ margin:0 auto 1.2rem; width:56px; }
.dragonfly-wrap--still .dragonfly{ width:56px; height:auto; }

@keyframes hover-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-9px) rotate(-1.5deg); }
}

.hero-note{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-top:2.2rem; margin-bottom:0;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-mid);
}
.pip{
  width:8px; height:8px; border-radius:50%; background:var(--sage);
  position:relative; flex:none;
}
.pip::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--sage); animation:pip-pulse 3.2s var(--ease) infinite;
}
@keyframes pip-pulse{
  0%   { transform:scale(1); opacity:.7; }
  70%,100%{ transform:scale(2.6); opacity:0; }
}

.script-footer{
  position:relative; z-index:1;
  margin:clamp(2.5rem,5vw,4rem) 0 0; text-align:center;
  font-family:var(--script);
  font-size:clamp(1.25rem,1rem + .9vw,1.7rem);
  color:var(--sage-mid);
}


/* ---------- hero emblem ----------
   Her photograph has moved down to the About section; the hero now carries
   the mark itself with the dragonfly line beneath it. */
.emblem{
  position:relative; margin:0;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
  padding:clamp(2.5rem,5vw,3.75rem) clamp(1.75rem,4vw,3rem);
  background:linear-gradient(168deg,var(--sage-wash),var(--cream-warm));
  border:1px solid var(--sage-tint);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.emblem-glow{
  position:absolute; inset:8% 10% 34%;
  border-radius:50%;
  background:radial-gradient(58% 60% at 50% 45%, rgba(139,154,121,.22), transparent 70%);
  filter:blur(26px); pointer-events:none;
  animation:glow-breathe 11s ease-in-out infinite;
}
.emblem-logo{
  position:relative; width:min(100%,340px); height:auto;
}
.emblem-quote{
  position:relative;
  max-width:26rem; text-align:center;
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  line-height:1.6; color:var(--sage-deep);
}
.emblem-quote::before{
  content:""; display:block; width:38px; height:1px;
  background:var(--sage); opacity:.55; margin:0 auto 1.4rem;
}
@media (max-width:900px){
  .emblem{ max-width:460px; margin-inline:auto; }
}

/* ---------- portrait ----------
   The arch is a shape behind her, not a frame around her: she's a cut-out
   standing in front of it, head breaking above the curve and shoulders just
   past its sides. --arch-w and --figure-h control that relationship. */
.hero-media{ position:relative; }
.portrait-frame{
  position:relative;
  aspect-ratio:4/5;
  --arch-w:78%;      /* arch width, as a share of the frame */
  --figure-h:104%;   /* her height, as a share of the frame */
  animation:portrait-float 14s ease-in-out infinite;
}
@keyframes portrait-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}

/* soft halo so the arch sits in light rather than on a flat background */
.portrait-glow{
  position:absolute; inset:2% -6% -4%; z-index:0;
  border-radius:50%;
  background:radial-gradient(58% 55% at 50% 45%, rgba(139,154,121,.32), transparent 70%);
  filter:blur(28px);
  pointer-events:none;
  animation:glow-breathe 11s ease-in-out infinite;
}
@keyframes glow-breathe{
  0%,100%{ opacity:.75; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.04); }
}

.arch{
  position:absolute; z-index:1;
  left:50%; translate:-50% 0;
  top:10%; bottom:0; width:var(--arch-w);
  border-radius:50% 50% 22px 22px / 32% 32% 2% 2%;
  background:linear-gradient(168deg,var(--sage-tint),var(--cream-deep));
  box-shadow:var(--shadow-lg);
}

.breath-ring{
  position:absolute; z-index:2;
  left:50%; translate:-50% 0;
  top:6%; bottom:-3.5%; width:calc(var(--arch-w) + 9%);
  border-radius:50% 50% 26px 26px / 32% 32% 2% 2%;
  border:1px solid var(--sage); opacity:.26;
  pointer-events:none;
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ scale:1;     opacity:.26; }
  50%    { scale:1.025; opacity:.13; }
}

/* she overflows the top of the frame, so nothing here may clip */
.portrait{ position:absolute; inset:0; z-index:3; }

/* Absolutely positioned, not a grid item: as a grid item in an auto-sized row
   the percentage height is cyclic, and Chrome resolves it against the image's
   own intrinsic height instead of the frame. Anchored to the bottom so she
   grows upward out of the arch. */
.portrait img{
  position:absolute; bottom:0; left:50%; translate:-50% 0;
  width:auto; height:var(--figure-h); max-width:none;
  filter:drop-shadow(0 20px 30px rgba(70,84,60,.24));
  /* the cut-out ends in a hard horizontal line where the original photo was
     cropped; dissolve the last few percent so she settles into the arch */
  -webkit-mask-image:linear-gradient(to bottom, #000 92%, transparent 99.5%);
          mask-image:linear-gradient(to bottom, #000 92%, transparent 99.5%);
  animation:photo-settle 1.4s var(--ease) both;
}
@keyframes photo-settle{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* shown until script.js finds a photo — keeps the page from ever looking broken */
.portrait.is-empty img{ display:none; }
.portrait.is-empty::after{
  content:"Add your photo — see README";
  position:absolute; inset:auto 0 3rem; text-align:center;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-mid);
}

/* The About portrait is a contained crop — a cut-out floating free would
   compete with the hero rather than support it. Its shape is set by the
   modifier class on the div in index.html, so it can be changed in one word:

     .portrait--oval    an ellipse (current)
     .portrait--square  a soft-cornered square
     .portrait--arch    the arch this started as

   She is cropped to exactly the oval's 4:5, so `object-position` has nothing
   to do; switching to the square makes it 1:1 and the crop starts to bite,
   which is what --photo-pos is for. */
.portrait-frame--soft{ aspect-ratio:auto; animation-duration:17s; animation-delay:-4s; }
.portrait-frame--soft .portrait{
  position:relative; inset:auto;
  aspect-ratio:var(--portrait-ratio,4/5); overflow:hidden;
  border-radius:var(--portrait-shape,50%);
  background:linear-gradient(160deg,var(--sage-tint),var(--cream-deep));
  box-shadow:var(--shadow-md);
}
.portrait--oval  { --portrait-shape:50%; }
.portrait--square{ --portrait-shape:22px; --portrait-ratio:1; --photo-pos:center 6%; }
.portrait--arch  { --portrait-shape:24px 24px 200px 200px; }
.portrait-frame--soft .portrait img{
  position:static; translate:none;
  -webkit-mask-image:none; mask-image:none;
  width:100%; height:100%; object-fit:cover;
  /* square top edge, so keep more headroom than the arch needs */
  object-position:var(--photo-pos,center 0%);
  filter:none;
}

.badge{
  position:absolute; z-index:4; left:0; bottom:7%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:clamp(130px,15vw,168px); aspect-ratio:1; border-radius:50%;
  background:var(--sage); color:var(--paper); text-align:center;
  box-shadow:var(--shadow-md);
  padding:1rem; line-height:1.3;
  animation:hover-float 9s var(--ease) infinite;
}
.badge-heart{ font-size:.9rem; opacity:.85; margin-bottom:.15rem; }
.badge-line{
  font-family:var(--display); font-size:clamp(.82rem,.75rem + .3vw,1rem);
  letter-spacing:.14em; text-transform:uppercase;
}
.badge-line--sm{ font-size:.66rem; letter-spacing:.18em; opacity:.92; }
.badge-script{
  font-family:var(--script); text-transform:none; letter-spacing:0;
  font-size:clamp(1rem,.9rem + .4vw,1.25rem);
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  /* Copy leads on small screens — a full-height portrait would push the
     headline and the booking button below the fold.
     width + justify-self rather than auto margins: auto margins turn off the
     grid stretch, which collapses the frame to zero when a photo is missing */
  .hero-media{ width:100%; max-width:340px; justify-self:center; margin-top:1rem; }
  /* To lead with the photo on mobile instead, uncomment this — but it pushes
     the booking button off the first screen:
     .hero-media{ order:-1; } */
  .badge{ left:auto; right:-.75rem; bottom:1rem; }
  .hero-copy{ text-align:center; }
  .hero-copy .lede{ margin-inline:auto; }
  .cta-row{ justify-content:center; }
  .dragonfly-wrap{ margin-inline:auto; width:max-content; }
}

/* ---------- trust strip ---------- */
.strip{ background:var(--sage-deep); color:var(--cream); }
.strip-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.9rem 1.6rem; padding:1.15rem 0;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
}
.strip-item{ display:inline-flex; align-items:center; gap:.6rem; }
.strip-ico{ width:17px; height:17px; flex:none; opacity:.8; }
.strip .dot{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; }
@media (max-width:700px){ .strip .dot{ display:none; } }

/* ---------- symptoms ---------- */
/* four statements, so 2x2 — auto-fit fitted three across and orphaned the
   fourth on its own row */
.symptoms{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1rem; margin-bottom:0;
}
@media (max-width:720px){ .symptoms{ grid-template-columns:1fr; } }
.symptoms li{
  display:flex; align-items:flex-start; gap:1rem; line-height:1.6;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.5rem 1.6rem;
  color:var(--ink-soft); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.symptoms li:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--sage-tint); }

.sym-ico{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--sage-wash); color:var(--sage-deep);
  display:grid; place-items:center;
  transition:background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.sym-ico svg{ width:22px; height:22px; }
.symptoms li:hover .sym-ico{ background:var(--sage); color:var(--paper); transform:scale(1.05); }

/* ---------- benefits ---------- */
.benefits{
  background:var(--sage-wash); border:1px solid var(--sage-tint);
  border-radius:var(--radius); padding:clamp(2rem,4vw,3.25rem);
  text-align:center;
}
.benefits h3{
  font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem); margin-bottom:.6rem; color:var(--sage-deep);
}
.benefits-intro{
  max-width:34rem; margin:0 auto 2rem; color:var(--ink-soft); font-size:.97em;
}
/* flex rather than grid so the odd item on the last row sits centred */
.checklist{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1.1rem 2.5rem; text-align:left; max-width:56rem; margin-inline:auto;
}
.checklist li{
  display:flex; align-items:center; gap:.85rem; color:var(--ink);
  flex:0 1 15rem;
}
.tick{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--sage); color:var(--paper);
  display:grid; place-items:center;
}
.tick svg{ width:15px; height:15px; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.step{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.75rem,3vw,2.5rem);
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.step:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.step-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.1rem;
}
.step-ico{
  flex:none; width:48px; height:48px; border-radius:50%;
  background:var(--sage-wash); color:var(--sage-deep);
  display:grid; place-items:center;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
.step-ico svg{ width:24px; height:24px; }
.step:hover .step-ico{ background:var(--sage); color:var(--paper); }
.step-num{
  font-family:var(--display); font-size:2.4rem;
  color:var(--sage); opacity:.4; line-height:1;
}
.step h3{ font-size:1.45rem; margin-bottom:.65rem; }
.step p{ margin:0; color:var(--ink-soft); font-size:.97em; }

/* ---------- investment ---------- */
.pricing{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem; align-items:stretch;
}
.price-card{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.9rem,3.5vw,2.75rem);
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.price-card--feature{ background:var(--sage-wash); border-color:var(--sage-tint); }
.price-card h3{
  font-family:var(--display); font-size:1.45rem; margin-bottom:.4rem; color:var(--sage-deep);
}
.price{
  margin:0 0 1rem; font-family:var(--display); font-size:clamp(2.6rem,2rem + 2vw,3.4rem);
  font-weight:500; line-height:1; color:var(--ink);
}
.price-cur{ font-size:.46em; vertical-align:.6em; margin-right:.06em; color:var(--sage-mid); }
.price-body{ color:var(--ink-soft); font-size:.97em; }
.price-list{ display:grid; gap:.85rem; margin:0 0 2rem; font-size:.95em; }
.price-list li{ display:flex; align-items:flex-start; gap:.8rem; color:var(--ink); }
.price-list .tick{ margin-top:.1rem; }
.price-card .btn{ margin-top:auto; }

/* The consumer-rights footnote under the cards — quiet, but where someone is
   actually deciding rather than buried three screens down. */
.price-note{
  margin:2rem auto 0; max-width:56ch; text-align:center;
  font-size:.88rem; line-height:1.65; color:var(--ink-soft);
}
.price-note a{ color:var(--sage-deep); text-decoration:underline; text-underline-offset:3px; }

/* ---------- reviews ---------- */

/* Gold reads warm rather than acid against the cream, and still says
   "five stars" at a glance. */
:root{ --gold:#E3A21C; }

.stars{ display:block; width:106px; height:21.2px; color:var(--gold); flex:none; }

/* Google attribution under the section heading */
.google-badge{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  width:max-content; max-width:100%;
  margin:-1.5rem auto clamp(2.5rem,5vw,3.5rem);
  padding:.9rem 1.6rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:999px; box-shadow:var(--shadow-sm);
}
.google-g{ width:26px; height:26px; flex:none; }
.google-g--sm{ width:15px; height:15px; }
.google-badge-body{ display:flex; flex-direction:column; gap:.35rem; }
.google-badge-txt{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
  line-height:1;
}
@media (max-width:420px){
  .google-badge{ padding:.8rem 1.15rem; gap:.75rem; }
}

/* align-items:start rather than the default stretch — these reviews differ a
   lot in length, and forcing equal heights left a large empty gap under the
   shortest one. Natural heights read as considered; the void didn't. */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
@media (max-width:960px){ .reviews{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .reviews{ grid-template-columns:1fr; } }
.review{ display:flex; }
.review figure{
  margin:0; width:100%;
  display:flex; flex-direction:column; gap:1.2rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem 1.9rem; box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.review:hover figure{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--sage-tint); }
.review blockquote{ margin:0; }
.review blockquote p{ margin:0; color:var(--ink-soft); font-size:.94em; line-height:1.75; }

.review figcaption{
  padding-top:.3rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.review-name{ font-family:var(--display); font-size:1.15rem; color:var(--ink); line-height:1.2; }
.review-src{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ---------- about ---------- */
.about-grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.about-copy h2{ font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem); margin-bottom:1rem; }
.about-copy p{ color:var(--ink-soft); }
.script-accent--left{ text-align:left; }
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
  .about-media{ width:100%; max-width:380px; justify-self:center; }
}

/* ---------- booking ---------- */
.section--book{ position:relative; overflow:hidden; background:var(--paper); }
.book-actions{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
  position:relative; z-index:1;
}
.contact-card{
  position:relative; z-index:1;
  margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:44rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.25rem 2rem;
  background:var(--cream-warm); border:1px solid var(--sage-tint);
  border-radius:999px; padding:1.25rem clamp(1.5rem,4vw,2.5rem);
}
.contact-item{
  display:flex; align-items:center; gap:.9rem; text-decoration:none;
  transition:color .35s var(--ease);
}
a.contact-item:hover{ color:var(--sage-deep); }
.contact-ico{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--sage-deep); color:var(--paper); display:grid; place-items:center;
}
.contact-ico svg{ width:19px; height:19px; }
.contact-label{
  display:block; font-size:.63rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mute);
}
.contact-value{ display:block; font-size:1rem; line-height:1.4; }
.contact-divider{ width:1px; align-self:stretch; background:var(--sage-tint); }
@media (max-width:700px){
  .contact-card{ border-radius:var(--radius); flex-direction:column; align-items:flex-start; }
  .contact-divider{ display:none; }
}

.calendar-embed{
  margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:56rem;
  border:1px solid var(--sage-tint); border-radius:var(--radius);
  overflow:hidden; background:var(--paper); box-shadow:var(--shadow-md);
}
.calendar-embed iframe{ display:block; width:100%; min-height:720px; border:0; }

/* ---------- faq ---------- */
.faq{ display:grid; gap:.85rem; }
.faq-item{
  background:var(--paper); border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.faq-item[open]{ border-color:var(--sage-tint); box-shadow:var(--shadow-sm); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  cursor:pointer; list-style:none;
  padding:1.25rem 1.5rem;
  font-family:var(--display); font-size:1.25rem; color:var(--ink);
  transition:color .35s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--sage-deep); }
.chev{
  flex:none; width:11px; height:11px; border-right:1.5px solid var(--sage);
  border-bottom:1.5px solid var(--sage); transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .45s var(--ease);
}
.faq-item[open] .chev{ transform:rotate(225deg) translate(-2px,-2px); }
.faq-body{ padding:0 1.5rem 1.4rem; }
.faq-body p{ margin:0; color:var(--ink-soft); font-size:.97em; }
.faq-item[open] .faq-body{ animation:fade-in .5s var(--ease) both; }
@keyframes fade-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.faq-cta{ margin-top:2.5rem; text-align:center; color:var(--ink-soft); }
.faq-cta a{ color:var(--sage-deep); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }

/* ---------- accreditation ----------
   Green, not cream. Two of the five marks — the DBS check and the insurance
   crest — set their wording in white, which is why the artwork was supplied on
   a green ground in the first place; drop them onto the cream and half of each
   logo vanishes. The band sits a shade lighter than the footer beneath it, so
   the page closes on two steps of green rather than one flat slab.

   If the single combined strip is used rather than five separate files,
   script.js samples its background colour and paints this band to match, so
   the image doesn't read as a rectangle pasted onto a not-quite-the-same
   green. --creds-bg is where that lands. */
.creds-band{
  background:var(--creds-bg, var(--sage-mid));
  color:var(--cream-warm);
  padding:clamp(2.75rem,6vw,4rem) 0;
  text-align:center;
  transition:background-color .4s var(--ease);
}
.creds-title{
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.75rem);
  margin:0 0 clamp(1.75rem,4vw,2.4rem);
}
.creds{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(1.5rem,4.5vw,3.25rem);
  margin-inline:auto;
}
.creds img{
  height:clamp(46px,3rem + 2.5vw,72px); width:auto;
  object-fit:contain;
}
/* Five is an awkward number to wrap. Left alone the row breaks 4 + 1 and the
   last mark reads as an afterthought, so the row — not the marks — is capped
   to make it break 3 + 2 on a tablet, and flex centres each line as it goes. */
@media (max-width:900px){ .creds{ max-width:34rem; } }

/* On a phone the answer isn't a narrower row of the same five small marks —
   it's fewer, larger ones. Two columns, and the odd one out spans both so it
   sits centred underneath rather than stranded to one side. Height comes off
   the marks here: whichever of the column width or the height cap bites first
   wins, so a wide wordmark and a tall crest both stay inside their cell. */
@media (max-width:560px){
  .creds{
    display:grid; grid-template-columns:repeat(2,1fr);
    justify-items:center; gap:1.75rem 1.25rem;
    max-width:22rem;
  }
  .creds li:last-child:nth-child(odd){ grid-column:1 / -1; }
  .creds img{ height:auto; width:auto; max-width:100%; max-height:76px; }
}
.creds-strip{
  max-width:min(100%,56rem); height:auto; margin-inline:auto;
  border-radius:14px;
}
/* Set by script.js once the strip has loaded. It brings its own margin with
   it, so the band gives back some of its own rather than stacking the two. */
.creds-band.has-strip{ padding-block:clamp(1.5rem,3vw,2.25rem); }
.creds-band.has-strip .creds-title{ margin-bottom:clamp(.5rem,1.5vw,1rem); }
.creds-band.has-strip .creds-note{ margin-top:clamp(.5rem,1.5vw,1rem); }
/* [hidden] is a UA rule and loses to the class selectors above, so the two
   candidates need saying again — otherwise both would show at once. */
.creds[hidden], .creds-strip[hidden]{ display:none; }
.creds-note{
  margin:clamp(1.6rem,3.5vw,2.2rem) auto 0; max-width:46rem;
  font-size:.68rem; line-height:2.1; letter-spacing:.14em; text-transform:uppercase;
  opacity:.78;
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--sage-deep); color:var(--cream-warm);
  padding:clamp(3.5rem,7vw,5rem) 0 clamp(2rem,4vw,3rem);
  text-align:center;
}
.brand-mark--footer{ color:var(--cream-warm); opacity:.85; margin-inline:auto; width:36px; }
.brand-mark--footer .dragonfly{ width:36px; height:auto; }
.footer-name{
  display:block; margin:1rem 0 .3rem; font-family:var(--display); font-size:1.5rem;
  letter-spacing:.24em; text-transform:uppercase;
}
.footer-sub{
  display:block; margin:0; font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; opacity:.75;
}
.footer-script{ color:var(--cream-warm); opacity:.9; margin-top:1.4rem; }

.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1.8rem; margin:1.5rem 0; }
.footer-nav a{
  text-decoration:none; font-size:.8rem; letter-spacing:.12em;
  opacity:.85; transition:opacity .35s var(--ease);
}
.footer-nav a:hover{ opacity:1; }

.footer-contact{ margin:0 0 1.2rem; font-size:.95rem; letter-spacing:.06em; }
.footer-contact a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px; cursor:pointer; }

.footer-social{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1.6rem; margin-bottom:2.2rem; }
.footer-social a{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.8; transition:opacity .35s var(--ease);
}
.footer-social a:hover{ opacity:1; }
.footer-social svg{ width:17px; height:17px; flex:none; }

/* ---------- legal drop-downs ---------- */
.legal{
  max-width:46rem; margin:0 auto 2rem; text-align:left;
  display:grid; gap:.5rem;
}
.legal-item{
  border:1px solid rgba(243,241,235,.18); border-radius:12px;
  background:rgba(255,255,255,.04);
  transition:border-color .35s var(--ease);
}
.legal-item[open]{ border-color:rgba(243,241,235,.32); }
.legal-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none;
  padding:.9rem 1.2rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  transition:color .3s var(--ease);
}
.legal-item summary::-webkit-details-marker{ display:none; }
.legal-item summary:hover{ color:#fff; }
.legal-item .chev{
  flex:none; width:9px; height:9px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); opacity:.75;
  transition:transform .4s var(--ease);
}
.legal-item[open] .chev{ transform:rotate(225deg) translate(-2px,-2px); }
.legal-body{ padding:0 1.2rem 1.3rem; }
.legal-body p{
  margin:0 0 .9em; font-size:.82rem; line-height:1.72; opacity:.78;
  letter-spacing:.01em; text-transform:none;
}
.legal-body p:last-child{ margin-bottom:0; }
.legal-body strong{ font-weight:400; opacity:1; color:#fff; }
.legal-body a{ color:inherit; border-bottom:1px solid rgba(255,255,255,.35); text-decoration:none; }
.legal-meta{ font-size:.72rem !important; opacity:.5 !important; }

/* ---------- build credit ---------- */
.built-by{ margin:1rem 0 0; font-size:.68rem; letter-spacing:.12em; }
.built-by a{
  text-decoration:none; opacity:.42; color:inherit;
  border-bottom:1px solid transparent;
  transition:opacity .35s var(--ease), border-color .35s var(--ease);
}
.built-by a:hover{ opacity:.8; border-bottom-color:rgba(255,255,255,.3); }

.footer-legal{
  max-width:44rem; margin:0 auto 1rem; font-size:.76rem; line-height:1.7; opacity:.68;
}
.footer-copy{
  margin:0; font-size:.72rem; letter-spacing:.1em; opacity:.6;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.4rem;
}
.footer-copy a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }
.footer-copy a:hover{ opacity:1; }

/* ---------- whatsapp floating button ---------- */
.whatsapp-fab{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:70;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.15rem; border-radius:999px;
  background:var(--sage-deep); color:var(--paper); text-decoration:none;
  box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(14px) scale(.94); pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease), background-color .35s var(--ease);
}
.whatsapp-fab.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.whatsapp-fab:hover{ background:var(--sage-mid); }
.whatsapp-fab svg{ width:22px; height:22px; flex:none; }
.whatsapp-fab-label{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:520px){ .whatsapp-fab-label{ display:none; } .whatsapp-fab{ padding:.9rem; } }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .whatsapp-fab{ opacity:1; transform:none; pointer-events:auto; }
}

/* ---------- print ---------- */
@media print{
  .site-header,.whatsapp-fab,.leaf,.breath-ring{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }
}