/* =========================================================
   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-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);
}
.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;
  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; }

@media (max-width:900px){
  .site-nav{ display:none; }
}

/* ---------- 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; }
@media (max-width:560px){ .header-cta{ display:none; } }

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

/* ---------- 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;
}
.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);
}

/* ---------- 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 keeps the older contained treatment — a second cut-out
   floating free would compete with the hero rather than support it. */
.portrait-frame--soft{ aspect-ratio:auto; animation-duration:17s; animation-delay:-4s; }
.portrait-frame--soft .portrait{
  position:relative; inset:auto;
  aspect-ratio:4/5; overflow:hidden;
  border-radius:24px 24px 200px 200px;
  background:linear-gradient(160deg,var(--sage-tint),var(--cream-deep));
  box-shadow:var(--shadow-md);
}
.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 ---------- */
.symptoms{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1rem; margin-bottom:clamp(3rem,6vw,4.5rem);
}
.symptoms li{
  display:flex; align-items:flex-start; gap:1rem;
  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:1.8rem; color:var(--sage-deep);
}
/* 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; }

/* ---------- 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; }

/* ---------- 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{
  margin:1rem 0 .3rem; font-family:var(--display); font-size:1.5rem;
  letter-spacing:.24em; text-transform:uppercase;
}
.footer-sub{
  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 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-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:.55; }

/* ---------- 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; }
}