/* ==========================================================================
   Shweta Deepak — Healing. Transformation. You
   Global stylesheet
   ========================================================================== */

:root {
  /* Palette */
  --ink: #2e2358;            /* deep indigo — headings */
  --purple: #7b52ac;         /* accent — links, icons, active nav */
  --purple-soft: #9b7fc4;
  --purple-band: #8f79bd;    /* pre-footer CTA band */
  --purple-deep: #4b3579;    /* footer */
  --purple-deeper: #3f2c67;  /* footer bottom bar */
  --gold: #c9891f;
  --gold-light: #d89a2b;
  --gold-dark: #b87715;
  --gold-pale: #e9b458;
  --lav: #f4eef9;            /* light lavender section bg */
  --lav-2: #ece3f4;          /* hero band */
  --grey-band: #f4f2f6;      /* soft grey-lavender band */
  --text: #6a6480;           /* body text — soft slate violet */
  --text-light: #7b7590;
  --line: #ebe4f2;           /* card borders */
  --white: #ffffff;
  --bg: #faf7f2;             /* warm off-white page background */

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Poppins', 'Segoe UI', Arial, sans-serif;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(90, 66, 140, 0.07);
  --shadow-lift: 0 16px 38px rgba(90, 66, 140, 0.12);
  --photo-glow: 0 18px 44px rgba(123, 82, 172, 0.16);
  --container: 100%;          /* full-bleed: no empty side gaps on any screen */
}

/* ---------- Reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; transition: color .25s ease; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: #d9c8ee; color: var(--ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 2.5vw, 40px);
}

/* ---------- Typography helpers ---------- */
h1, h2, h3, .serif { font-family: var(--serif); color: var(--ink); font-weight: 600; }

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-title {
  font-size: 26px;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 48px;
}

/* small gold lotus ornament above centered section titles */
.section-title::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9891f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-2 3-2 6 0 9 2-3 2-6 0-9z'/%3E%3Cpath d='M12 13c-1-3.5-4-5.5-7-6 .7 3.5 3.5 6 7 6z'/%3E%3Cpath d='M12 13c1-3.5 4-5.5 7-6-.7 3.5-3.5 6-7 6z'/%3E%3Cpath d='M12 14c-2.5 1.5-6 1.5-8.5-.5 2 3.5 5.5 5 8.5 3.5 3 1.5 6.5 0 8.5-3.5-2.5 2-6 2-8.5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .9;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-dark) 100%);
  color: #fff;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(184, 119, 21, 0.22);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 30px rgba(184, 119, 21, 0.32), 0 0 0 5px rgba(216, 154, 43, 0.12);
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* WhatsApp brand mark used in place of a stroked glyph inside buttons */
.btn .wa-glyph { width: 17px; height: 17px; flex-shrink: 0; object-fit: contain; }

/* Text link with arrow — LEARN MORE / READ ARTICLE */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple);
}

.link-more svg { width: 16px; height: 16px; transition: transform .25s ease; }
.link-more:hover svg { transform: translateX(5px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: linear-gradient(180deg, #f7f1fb 0%, #f0e8f7 100%);
  border-radius: 24px;
  box-shadow: 0 6px 26px rgba(123, 82, 172, .13);
  position: sticky;
  top: 10px;
  margin: 10px 14px 0;
  z-index: 100;
}

/* page-colored backing frame — stops content peeking around the pill while scrolling */
.site-header::before {
  content: '';
  position: absolute;
  inset: -10px -14px 0;
  background: var(--bg);
  z-index: -1;
  pointer-events: none;
}

/* one row: logo | brand text | nav (pushed right) | book button */
.header-inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-rows: auto;
  column-gap: 12px;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
}

.brand { display: contents; }

.brand-logo-wrap {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  width: 80px;
  height: 80px;
  margin-left: -18px;
}

.brand-logo { width: 100%; height: 100%; }

/* glitter on the logo: twinkling gold stars + a breathing glow */
.brand-logo-wrap::before,
.brand-logo-wrap::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23d89a2b' d='M5 0 6.1 3.9 10 5 6.1 6.1 5 10 3.9 6.1 0 5 3.9 3.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.brand-logo-wrap::before { top: 2px; right: 2px; }
.brand-logo-wrap::after { bottom: 8px; left: -2px; width: 9px; height: 9px; }

@media (prefers-reduced-motion: no-preference) {
  .brand-logo {
    animation: logoGlow 3.5s ease-in-out infinite alternate;
  }

  .brand-logo-wrap::before { animation: starTwinkle 2.6s ease-in-out infinite; }
  .brand-logo-wrap::after { animation: starTwinkle 2.6s ease-in-out 1.3s infinite; }

  @keyframes logoGlow {
    from { filter: drop-shadow(0 0 2px rgba(216, 154, 43, .2)); }
    to   { filter: drop-shadow(0 0 9px rgba(216, 154, 43, .65)); }
  }

  @keyframes starTwinkle {
    0%, 100% { opacity: .15; transform: scale(.5) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.15) rotate(25deg); }
  }
}

/* sits beside the logo, vertically centred against it */
.brand-text { grid-column: 2; grid-row: 1; align-self: center; line-height: 1.2; }

.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #a8742a;
}

.brand-tagline {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 1px;
}

.main-nav { grid-column: 3; grid-row: 1; justify-self: end; margin-right: 18px; }

.nav-book { display: none; }

.main-nav ul { display: flex; gap: 26px; }

.main-nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  position: relative;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--purple);
  transition: width .3s ease;
}

.main-nav a:hover { color: var(--purple); }
.main-nav a:hover::after { width: 100%; }

.main-nav a.active { color: var(--purple); }
.main-nav a.active::after { width: 100%; }

.header-cta { grid-column: 4; grid-row: 1; align-self: center; }

.header-cta .btn { padding: 10px 18px; font-size: 11.5px; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 42px; height: 42px;
  border-radius: 8px;
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Page hero band (shared by all pages)
   ========================================================================== */
.page-hero {
  position: relative;
  background: linear-gradient(100deg, #f7f2fa 0%, #f0e8f7 45%, #e7dbf2 100%);
  overflow: hidden;
}

.page-hero .container {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  align-items: center;
  gap: 40px;
  min-height: 470px;
  padding-top: 48px;
  padding-bottom: 48px;
}

/* copy is capped and pulled toward the middle of the band, so it never strands
   itself against the far-left edge on wide screens */
.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: clamp(0px, 4vw, 80px);
}

.hero-copy h1 {
  font-size: 42px;
  line-height: 1.24;
  margin-bottom: 22px;
}

.hero-divider {
  width: 54px; height: 2px;
  background: var(--gold);
  border: none;
  margin: 0 0 22px;
}

.hero-copy p {
  max-width: 100%;
  margin-bottom: 30px;
}

/* Hero image bleeds to the top/right/bottom edges of the band, like the mockups.
   The left edge is feathered into the band background so no hard seam shows. */
.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%; /* keep her full head in frame while showing her sitting */
}

/* full-band hero artwork (client images include the empty left area for text) */
.page-hero.hero-bg {
  background-color: #ece3f4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg-services     { background-image: url('../images/15th.jpeg'); }
.hero-bg-testimonials { background-image: url('../images/1st.jpeg'); }
.hero-bg-contact      { background-image: url('../images/4th.jpeg'); }


/* ==========================================================================
   Pre-footer CTA band (shared)
   ========================================================================== */
.cta-band {
  position: relative;
  background: linear-gradient(100deg, #9d88c8 0%, var(--purple-band) 55%, #7f68af 100%);
  overflow: hidden;
}

/* text + artwork travel together as one centred group, equal space either side */
.cta-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 170px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.cta-band h2 {
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  flex: 0 1 auto;
}

.cta-band .cta-art {
  width: 260px;
  flex-shrink: 0;
  margin: -20px 0;
  pointer-events: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--purple-deep); color: #cfc4e4; }

/* 4 columns for the 4 blocks — brand, Quick Links, Get In Touch, newsletter.
   Newsletter sits flush against the right edge; the middle two share equal gaps. */
.footer-main {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(260px, 1.3fr) 1fr minmax(280px, 1.1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  padding-top: 26px;
  padding-bottom: 20px;
}

.footer-brand .f-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.footer-brand .f-logo-row svg,
.footer-brand .f-logo-row img { width: 36px; height: 36px; }

.footer-brand .f-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-pale);
}

.footer-brand p { font-size: 12.5px; line-height: 1.6; margin-bottom: 8px; }

.footer-col h4 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

.footer-col ul li { margin-bottom: 5px; }

/* ten quick links in one column made the footer twice as tall as it needed to
   be — flow them down two columns of five instead */
.footer-links ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  column-gap: 26px;
}

.footer-col ul a { font-size: 12.5px; color: #cfc4e4; }
.footer-col ul a:hover { color: #fff; }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12.5px;
  word-break: break-word;
}

.footer-contact .f-ico {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact .f-ico svg { width: 100%; height: 100%; stroke: #cfc4e4; }

.footer-contact a:hover { color: #fff; }

.footer-contact .wa-link { color: var(--gold-pale); font-weight: 600; }
.footer-contact .wa-link:hover { color: #f2cd85; }
.footer-contact .wa-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* newsletter block hugs the right edge of the footer */
.footer-news { width: 100%; max-width: 380px; justify-self: end; }

.footer-news p { font-size: 12.5px; margin-bottom: 12px; }

.footer-news input {
  width: 100%;
  padding: 10px 13px;
  border-radius: 7px;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  outline: none;
  margin-bottom: 10px;
}

.footer-news input::placeholder { color: #9d94b5; }

.footer-news .btn { width: 100%; justify-content: center; padding: 10px 20px; font-size: 12px; }

.footer-bottom { background: var(--purple-deeper); }

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 12px;
}

.footer-legal { display: flex; align-items: center; gap: 14px; }

.footer-legal a:hover { color: #fff; }

.footer-legal .sep { opacity: .4; }

/* studio credit in the copyright line */
.credit-link {
  color: #e9b458;
  font-weight: 600;
  transition: color .25s ease;
}

.credit-link:hover { color: #fff; }


/* ==========================================================================
   HOME — The Journey Behind the Healing
   ========================================================================== */
.journey-behind { padding: 84px 0; background: var(--white); }

/* photo left, copy right. The container is capped so the pair stays close to
   the page edges on wide screens instead of floating in the middle, and the
   photo stretches to the height of the copy so no blank column is left below it */
.journey-behind .container,
.about-welcome .container {
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 4vw, 56px);
  align-items: stretch;
}

.journey-photo, .aw-photo { width: 100%; max-width: none; justify-self: stretch; min-height: 420px; }
.journey-copy, .aw-copy { width: 100%; justify-self: start; align-self: center; }

/* portrait of Shweta fills its frame (cropped to the column height) */
.journey-photo img, .aw-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.journey-copy h2 { font-size: 24px; line-height: 1.3; margin-bottom: 16px; }

.journey-copy p { font-size: 14.5px; line-height: 1.8; margin-bottom: 14px; }

.journey-quote {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.journey-quote .qmark {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
}

.journey-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gold);
  margin: 0;
}

/* ==========================================================================
   HOME — My Philosophy
   ========================================================================== */
.philosophy { padding: 64px 0 72px; background: var(--grey-band); }

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.phil-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}

.phil-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

.icon-circle {
  width: 60px; height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #f7f3fb;
  border: 1px solid #e3d8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle svg { width: 30px; height: 30px; stroke: var(--purple); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.phil-card h3 { font-size: 19px; margin-bottom: 10px; }

.phil-card p { font-size: 14px; max-width: 230px; margin: 0 auto; }

/* ==========================================================================
   ABOUT — variants
   ========================================================================== */
.philosophy-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin: 0 auto;
}

.philosophy-grid.cols-2 .phil-card p { max-width: 300px; }

.values-band { background: #efeaf4; }

.cert-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #e2bd77;
  border-radius: 12px;
  padding: 16px 22px;
  margin-top: 28px;
  max-width: 440px;
}

.cert-strip svg {
  width: 34px; height: 34px;
  flex-shrink: 0;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cert-strip p { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.5; }

.cert-strip span { display: block; font-size: 12px; font-weight: 400; color: var(--text); margin-top: 2px; }

/* ==========================================================================
   HOME — My Journey timeline
   ========================================================================== */
.timeline-section { padding: 8px 0 84px; background: var(--grey-band); }

.timeline-section.standalone { padding: 72px 0 84px; }

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 39px;
  left: 0;
  right: 0;
  border-top: 2px dashed #d8b26a;
}

.tl-item { position: relative; text-align: center; }

/* gold connector dots between items */
.tl-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 34px;
  right: -17px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--white);
  border: 2.5px solid var(--gold);
}

.tl-icon {
  position: relative;
  z-index: 1;
  width: 80px; height: 80px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid #e3d8f0;
  box-shadow: 0 4px 14px rgba(75, 53, 121, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tl-icon svg { width: 38px; height: 38px; stroke: var(--purple); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.tl-year { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

.tl-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }

.tl-item p { font-size: 13.5px; max-width: 230px; margin: 0 auto; }

/* ==========================================================================
   Why Work With Me (shared: Home + Services)
   ========================================================================== */
.why-section { padding: 72px 0 80px; background: #efeaf4; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.why-item { text-align: center; }

.why-item .icon-circle {
  width: 64px; height: 64px;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(75, 53, 121, 0.08);
}

.why-item h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 10px;
}

.why-item p { font-size: 13.5px; max-width: 190px; margin: 0 auto; }

/* ==========================================================================
   SERVICES — numbered service cards
   ========================================================================== */
.services-list { padding: 72px 0 40px; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.svc-card {
  position: relative;
  overflow: hidden;
  background: #fefbfa;
  border: 1px solid #ece2e6;
  border-radius: var(--radius);
  padding: 30px 32px 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.svc-card-wide { grid-column: span 3; }
.svc-card-third { grid-column: span 2; }
.svc-card-full { grid-column: span 6; }

.svc-num {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}

.svc-card h3 { font-size: 21px; margin-bottom: 12px; }

.svc-card p {
  font-size: 13.5px;
  max-width: 250px;
  margin-bottom: 22px;
}

.svc-card .link-more { position: relative; z-index: 2; }

/* decorative art inside cards */
.svc-art {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.svc-card-wide .svc-art {
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  width: 185px;
}

/* pendulum art hangs from the top edge of the card, like the mockup */
.svc-card-wide .svc-art.svc-art-img {
  top: 0;
  right: 46px;
  transform: none;
  width: 140px;
}

.svc-card-third .svc-art {
  right: 14px;
  bottom: 10px;
  width: 96px;
  opacity: .9;
}

.svc-art .glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(186, 148, 222, .45) 0%, rgba(186, 148, 222, 0) 70%);
  border-radius: 50%;
}

.svc-art svg { position: relative; stroke: var(--purple); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; width: 100%; }

.svc-art img { position: relative; width: 100%; display: block; }

/* feathers rectangular mockup crops into the band/card behind them */
.art-blend {
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 55%, transparent 100%);
}

/* "View All Services" button under the featured cards on the home page */
.services-more { text-align: center; margin-top: 40px; }

/* full-width card 06 with photo right */
.svc-card-full { display: grid; grid-template-columns: 1fr 45%; padding: 0; }

.svc-card-full .svc-body { padding: 34px 32px; }

.svc-card-full .svc-photo { position: relative; }

.svc-card-full .svc-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* ==========================================================================
   SERVICES — Healing That Meets You Where You Are
   ========================================================================== */
.healing-meets { padding: 48px 0 80px; }

.healing-meets .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 72px);
  align-items: center;
}

.hm-photo { width: 100%; max-width: 520px; justify-self: end; }
.hm-copy { width: 100%; max-width: 520px; justify-self: start; }

.hm-photo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hm-copy h2 { font-size: 28px; line-height: 1.35; margin-bottom: 24px; }

.hm-list { margin-bottom: 28px; }

.hm-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 14px;
  margin-bottom: 13px;
}

.hm-list .check {
  width: 18px; height: 18px;
  flex-shrink: 0;
}

.hm-list .check svg { stroke: var(--gold); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }


/* ==========================================================================
   TESTIMONIALS — featured quote
   ========================================================================== */
.testi-feature { padding: 56px 0 6px; }

.tf-card {
  display: flex;
  align-items: center;
  gap: 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 48px;
}

.tf-body { max-width: 720px; }

.tf-mark {
  font-family: var(--serif);
  font-size: 58px;
  line-height: .6;
  color: var(--gold);
  display: block;
  margin-bottom: 18px;
}

.tf-text { font-size: 15px; line-height: 1.85; margin-bottom: 20px; }

.testi-sign {
  display: flex;
  align-items: center;
  gap: 18px;
}

.testi-sign .t-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.stars { display: inline-flex; gap: 5px; }

.stars svg { width: 17px; height: 17px; fill: #d89a2b; }

.tf-photo {
  margin-left: auto;
  flex-shrink: 0;
}

.tf-photo img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* filter bar variant — outline active (testimonials) */
.filter-bar.alt { padding: 34px 0 4px; }

.filter-bar.alt .pill { padding: 10px 32px; }

.filter-bar.alt .pill.active {
  background: #fff;
  border-color: var(--purple);
  color: var(--purple);
}

/* ==========================================================================
   TESTIMONIALS — cards grid
   ========================================================================== */
.testi-grid-section { padding: 30px 0 72px; }

.testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.t-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 30px 22px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.t-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.t-card-top {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
}

.t-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.t-card p { font-size: 14px; }

.t-card[hidden] { display: none; }

/* inverted purple card */
.t-card.invert {
  background: #a58bc9;
  border-color: #a58bc9;
}

.t-card.invert p,
.t-card.invert .t-name { color: #fff; }

.t-card.invert .stars svg { fill: #f2cd85; }

/* ==========================================================================
   TESTIMONIALS — home page sliding carousel
   ========================================================================== */
.home-testi { padding: 80px 0 84px; background: var(--lav); }

.tcar { --per: 3; --gap: 24px; }

/* a little padding so card shadows aren't sliced off by overflow:hidden */
.tcar-viewport { overflow: hidden; padding: 6px 4px 22px; margin: -6px -4px -22px; }

.tcar-track {
  position: relative;
  display: flex;
  gap: var(--gap);
  transition: transform .65s cubic-bezier(.22, .7, .3, 1);
  will-change: transform;
}

.tcar-card {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 30px 28px 24px;
}

.tcar-mark {
  font-family: var(--serif);
  font-size: 52px;
  line-height: .6;
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
}

.tcar-card p { font-size: 14px; line-height: 1.8; margin-bottom: 20px; }

.tcar-card .testi-sign { margin-top: auto; flex-wrap: wrap; row-gap: 6px; }

.tcar-card.invert { background: #a58bc9; border-color: #a58bc9; }
.tcar-card.invert .tcar-mark { color: #f2cd85; }
.tcar-card.invert p,
.tcar-card.invert .t-name { color: #fff; }
.tcar-card.invert .stars svg { fill: #f2cd85; }

.tcar-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 38px;
}

.tcar-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: #fff;
  color: var(--gold-dark);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.tcar-btn svg { width: 18px; height: 18px; }

.tcar-btn:hover,
.tcar-btn:focus-visible {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-dark) 100%);
  border-color: transparent;
  color: #fff;
}

.tcar-dots { display: flex; align-items: center; gap: 9px; }

.tcar-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d9cce9;
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}

.tcar-dot:hover { background: var(--purple-soft); }
.tcar-dot.active { width: 26px; background: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .tcar-track { transition: none; }
}

/* cards per view — the script reads --per, so CSS stays the only source of truth */
@media (max-width: 920px) {
  .tcar { --per: 2; }
}

@media (max-width: 640px) {
  .tcar { --per: 1; --gap: 16px; }
  .home-testi { padding: 50px 0 54px; }
  .tcar-card { padding: 26px 22px 22px; }
  .tcar-controls { margin-top: 30px; gap: 16px; }
}

/* ==========================================================================
   TESTIMONIALS — stacked CTA band
   ========================================================================== */
.cta-band.cta-stack .container {
  min-height: 230px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.cta-stack .cta-copy { flex: 0 1 auto; }

.cta-stack .cta-copy h2 { font-size: 30px; margin-bottom: 26px; }

.cta-stack .cta-art { width: 300px; margin: -40px 0; }

/* ==========================================================================
   CONTACT — info + form
   ========================================================================== */
.contact-section { padding: 64px 0 72px; }

.contact-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 72px);
  align-items: start;
}

.contact-info { width: 100%; max-width: 420px; justify-self: end; }
.contact-form-card { width: 100%; max-width: 620px; justify-self: start; }

.lc-title { font-size: 26px; margin-bottom: 28px; }

.lc-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

.lc-ico { width: 30px; height: 30px; flex-shrink: 0; margin-top: 3px; }

.lc-ico svg { width: 100%; height: 100%; stroke: var(--purple); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.lc-ico.wa img { width: 100%; height: 100%; object-fit: contain; display: block; }

.lc-item h4 {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.lc-item p, .lc-item a { font-size: 13.5px; color: var(--text); }

.lc-item a:hover { color: var(--purple); }

.lc-item a.wa-link { color: var(--gold); font-weight: 600; }
.lc-item a.wa-link:hover { color: var(--gold-dark); }

.lc-quote {
  position: relative;
  border: 1px solid #e2bd77;
  border-radius: 12px;
  padding: 28px 26px 34px;
  margin-top: 34px;
}

.lc-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 240px;
}

.lc-quote svg {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* form card */
.contact-form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #ddd3ea;
  border-radius: 8px;
  background: #fff;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  margin-bottom: 16px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--purple-soft);
  box-shadow: 0 0 0 3px rgba(123, 82, 172, .1);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #9d94b5; }

.form-label {
  display: block;
  font-size: 13.5px;
  color: var(--text);
  margin: 2px 0 8px;
}

.select-wrap { position: relative; }

.select-wrap select {
  -webkit-appearance: none;
  appearance: none;
  color: #9d94b5;
  cursor: pointer;
}

.select-wrap select.filled { color: var(--ink); }

.select-wrap svg {
  position: absolute;
  right: 15px;
  top: 19px;
  width: 14px; height: 14px;
  stroke: var(--purple);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.contact-form textarea { height: 160px; resize: vertical; }

.contact-form .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* ==========================================================================
   CONTACT — FAQ accordion
   ========================================================================== */
.faq-section { padding: 56px 0 72px; background: var(--grey-band); }

.faq-section h2 { font-size: 24px; margin-bottom: 26px; }

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}

.faq-q .fplus {
  font-size: 21px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  transition: transform .3s ease, color .3s ease;
}

.faq-item.open .fplus { transform: rotate(45deg); color: var(--gold); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.faq-a p { padding: 0 22px 18px; font-size: 13.5px; max-width: 640px; }

/* ==========================================================================
   CONTACT — closing band
   ========================================================================== */
.closing-band {
  background: linear-gradient(100deg, #efe7f7 0%, #e6d8f1 55%, #dccbeb 100%);
  overflow: hidden;
}

.closing-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 220px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.closing-band h2 {
  font-size: 26px;
  line-height: 1.55;
  font-weight: 600;
  flex: 0 1 auto;
  max-width: 520px;
}

.closing-band .cta-art { width: 280px; flex-shrink: 0; margin: -10px 0; pointer-events: none; }

/* ==========================================================================
   HOVER GLOW BORDERS — cards light up with a flowing gold-purple ring
   ========================================================================== */
.phil-card, .svc-card, .post-card, .t-card, .tf-card,
.faq-item, .contact-form-card, .lc-quote, .cert-strip { position: relative; }

.phil-card::before, .svc-card::before, .post-card::before,
.t-card::before, .tf-card::before, .faq-item::before,
.contact-form-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: linear-gradient(120deg, #d89a2b, #9b7fc4, #e9b458, #7b52ac, #d89a2b);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 2;
}

.phil-card:hover::before, .svc-card:hover::before, .post-card:hover::before,
.t-card:hover::before, .tf-card:hover::before, .faq-item:hover::before,
.contact-form-card:hover::before {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .phil-card:hover::before, .svc-card:hover::before, .post-card:hover::before,
  .t-card:hover::before, .tf-card:hover::before, .faq-item:hover::before,
  .contact-form-card:hover::before {
    animation: borderFlow 3s linear infinite;
  }

  @keyframes borderFlow {
    to { background-position: 300% 0; }
  }
}

/* ==========================================================================
   HEADER — hide on scroll down, reveal on scroll up
   ========================================================================== */
.site-header {
  transition: transform .4s ease, box-shadow .3s ease;
  will-change: transform;
}

.site-header.header-hidden { transform: translateY(calc(-100% - 14px)); }

/* ==========================================================================
   ARTICLE & LEGAL PAGES
   ========================================================================== */
.article-hero {
  background: linear-gradient(105deg, #f2ebf8 0%, #ece2f4 45%, #e2d2ee 100%);
  text-align: center;
  padding: 60px 0 52px;
  position: relative;
  overflow: hidden;
}

.article-hero h1 {
  font-size: 36px;
  line-height: 1.25;
  max-width: 720px;
  margin: 0 auto 16px;
}

.article-meta { font-size: 13px; color: var(--text); }
.article-meta .dot { margin: 0 10px; opacity: .5; }

.article-wrap { max-width: 790px; margin: 0 auto; padding: 56px 32px 72px; }

.article-img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--photo-glow);
  margin-bottom: 40px;
}

.article-body h2 {
  font-size: 22px;
  margin: 36px 0 14px;
}

.article-body p { margin-bottom: 18px; font-size: 15px; }

.article-body em { color: var(--gold); font-family: var(--serif); font-size: 16px; }

.article-back { margin-top: 44px; }

/* legal pages */
.legal-wrap { max-width: 790px; margin: 0 auto; padding: 52px 32px 72px; }
.legal-wrap h2 { font-size: 19px; margin: 30px 0 10px; }
.legal-wrap p, .legal-wrap li { font-size: 14px; margin-bottom: 12px; }
.legal-wrap ul { padding-left: 20px; list-style: disc; }

/* ==========================================================================
   ATMOSPHERE LAYER — soft light, breathing room, sacred accents
   ========================================================================== */

/* gentle aura washes on light sections — barely-there gold & lavender light */
.journey-behind,
.services-list,
.healing-meets,
.testi-feature,
.testi-grid-section,
.post-grid-section,
.featured-post,
.contact-section {
  background-image:
    radial-gradient(640px 340px at 92% 8%, rgba(233, 180, 88, 0.14), transparent 70%),
    radial-gradient(560px 320px at 4% 92%, rgba(155, 127, 196, 0.16), transparent 70%);
}

.philosophy,
.timeline-section,
.why-section,
.faq-section {
  background-image:
    radial-gradient(600px 300px at 8% 10%, rgba(255, 255, 255, 0.65), transparent 70%),
    radial-gradient(640px 340px at 94% 90%, rgba(155, 127, 196, 0.15), transparent 70%);
}

/* more breathing room between sections */
.journey-behind { padding: 60px 0; }
.philosophy { padding: 72px 0 80px; }
.timeline-section { padding-bottom: 92px; }
.timeline-section.standalone { padding-top: 80px; }
.why-section { padding: 80px 0 88px; }
.services-list { padding: 80px 0 44px; }
.healing-meets { padding: 52px 0 92px; }
.contact-section { padding: 76px 0 84px; }
.faq-section { padding: 68px 0 80px; }
.post-grid-section { padding: 44px 0 84px; }
.testi-grid-section { padding: 34px 0 84px; }

/* photos carry a soft lavender glow instead of a hard shadow */
.journey-photo img,
.hm-photo img,
.featured-img img,
.tf-photo img {
  box-shadow: var(--photo-glow);
}

/* philosophy / value cards get their air back */
.phil-card { padding: 38px 30px; }

/* floating light particles (injected by JS into hero & purple bands) */
.amb-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe3a3 0%, rgba(255, 227, 163, 0) 70%);
  box-shadow: 0 0 12px 2px rgba(255, 220, 150, 0.35);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.closing-band { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .amb-spark { animation: twinkleFloat var(--dur, 9s) ease-in-out var(--delay, 0s) infinite; }

  @keyframes twinkleFloat {
    0%   { opacity: 0; transform: translateY(8px) scale(.6); }
    30%  { opacity: .85; }
    60%  { opacity: .35; }
    100% { opacity: 0; transform: translateY(-30px) scale(1.1); }
  }
}

/* ==========================================================================
   TRUST STRIP (home)
   ========================================================================== */
.trust-strip {
  background: var(--bg);
  border-top: 1px solid #f1eae0;
  padding: 30px 0;
}

.trust-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 64px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.trust-item svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-item .stars svg { width: 15px; height: 15px; stroke: none; fill: #d89a2b; }

/* ==========================================================================
   MOTION LAYER — scroll reveals, cursor, clicks, ambient float
   (everything here is skipped for users who prefer reduced motion)
   ========================================================================== */
.site-header { transition: transform .55s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 4px 18px rgba(75, 53, 121, .10); }

.post-thumb img { transition: transform .5s ease; }
.post-card:hover .post-thumb img { transform: scale(1.05); }

@media (prefers-reduced-motion: no-preference) {

  /* ----- scroll reveal (class added by JS only) ----- */
  .js-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, .7, .3, 1);
    transition-delay: var(--rd, 0s);
    will-change: opacity, transform;
  }

  .js-reveal.revealed { opacity: 1; transform: none; }

  /* ----- hero entrance on page load ----- */
  .hero-copy > * { animation: heroIn .8s cubic-bezier(.22, .7, .3, 1) both; }
  .hero-copy > *:nth-child(1) { animation-delay: .05s; }
  .hero-copy > *:nth-child(2) { animation-delay: .16s; }
  .hero-copy > *:nth-child(3) { animation-delay: .27s; }
  .hero-copy > *:nth-child(4) { animation-delay: .38s; }
  .hero-copy > *:nth-child(5) { animation-delay: .49s; }

  .hero-media { animation: heroFade 1.2s ease both .25s; }

  @keyframes heroIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes heroFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ----- ambient floating art ----- */
  .cta-art, .news-art { animation: floaty 6.5s ease-in-out infinite alternate; }

  .hero-media img { animation: breathe 9s ease-in-out infinite alternate; }

  @keyframes floaty {
    from { translate: 0 6px; }
    to   { translate: 0 -8px; }
  }

  @keyframes breathe {
    from { transform: scale(1); }
    to   { transform: scale(1.025); }
  }

  /* ----- click / press feedback ----- */
  .btn { position: relative; overflow: hidden; }
  .btn:active { transform: translateY(0) scale(.97); }
  .pill { position: relative; overflow: hidden; }
  .pill:active { transform: scale(.95); }

  .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 250, 240, .5);
    transform: scale(0);
    animation: rippleGo .55s ease-out forwards;
    pointer-events: none;
  }

  .pill .ripple { background: rgba(155, 127, 196, .3); }

  @keyframes rippleGo {
    to { transform: scale(2.8); opacity: 0; }
  }

  /* icon lift on card hover */
  .icon-circle { transition: transform .35s ease; }
  .phil-card:hover .icon-circle,
  .why-item:hover .icon-circle { transform: translateY(-4px) scale(1.07); }

}

/* ==========================================================================
   ABOUT PAGE (mockup) — welcome, values, approach, certifications, soft CTA
   ========================================================================== */
.about-welcome { padding: 84px 0; }

.about-welcome h2 { font-size: 27px; line-height: 1.4; margin-bottom: 20px; }

.about-welcome p { margin-bottom: 16px; }

.about-welcome .aw-photo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--photo-glow);
}

/* Divine Energy Healing intro — shared by the home Journey section and About */
.de-copy p { font-size: 14.5px; line-height: 1.85; margin-bottom: 14px; }

.de-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.de-block h3 { font-size: 17px; line-height: 1.35; margin-bottom: 10px; }
.de-block p:last-child { margin-bottom: 0; }

.de-copy .de-values { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.de-values span {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--lav);
  border-radius: 999px;
  padding: 6px 14px;
}

.de-quote {
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--gold);
}

@media (max-width: 640px) {
  .de-cols { grid-template-columns: 1fr; }
}

/* 4-up value / certification cards */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.value-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}

.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.value-card .icon-circle { width: 56px; height: 56px; margin-bottom: 14px; }

.value-card .icon-circle svg { width: 28px; height: 28px; }

.value-card h3 {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 8px;
}

.value-card p { font-size: 12.5px; max-width: 170px; margin: 0 auto; }

.about-values { padding: 0 0 84px; }

/* hover ring on value cards too */
.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: linear-gradient(120deg, #d89a2b, #9b7fc4, #e9b458, #7b52ac, #d89a2b);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 2;
}

.value-card:hover::before { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .value-card:hover::before { animation: borderFlow 3s linear infinite; }
}

/* My Approach */
.approach-section { padding: 0 0 84px; }

.approach-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 72px);
  align-items: center;
}

.approach-copy { width: 100%; max-width: 520px; justify-self: end; }
.approach-photo { width: 100%; max-width: 460px; justify-self: start; }

.approach-section h2 { font-size: 26px; margin-bottom: 8px; }

.approach-section .hero-divider { margin: 0 0 30px; }

.approach-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

.approach-item .a-ico {
  width: 38px; height: 38px;
  flex-shrink: 0;
  margin-top: 2px;
}

.approach-item .a-ico svg { width: 100%; height: 100%; stroke: var(--purple); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.approach-item h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.approach-item p { font-size: 13.5px; }

.approach-photo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--photo-glow);
}

/* Certifications */
.cert-section { padding: 0 0 84px; }
.cert-section .cards-4 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; }

.section-sub {
  text-align: center;
  font-size: 14px;
  max-width: 480px;
  margin: -36px auto 42px;
}

.cert-card .icon-circle { background: #fff; border: 1px solid #e3d8f0; }

/* Soft rounded CTA band (light purple, inside container) */
.soft-cta { padding: 0 0 84px; }

.soft-cta-box {
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(115deg, #d3bdec 0%, #c3a8e2 100%);
  border-radius: 18px;
  overflow: hidden;
  min-height: 230px;
}

.soft-cta-copy { padding: 40px 12px 40px 48px; }

.soft-cta-copy h2 { font-size: 25px; margin-bottom: 12px; }

.soft-cta-copy p { color: #43356b; font-size: 13.5px; max-width: 380px; margin-bottom: 22px; }

.soft-cta-img { height: 100%; min-height: 230px; }

.soft-cta-img img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }

/* ==========================================================================
   HEALING JOURNEY PAGE (mockup) — numbered steps, experience band, pace, quote
   ========================================================================== */
.hj-steps { padding: 76px 0 70px; }

.hj-steps .section-sub { margin-top: -38px; }

.steps { max-width: 780px; margin: 0 auto; position: relative; }

.steps::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 24px;
  bottom: 40px;
  border-left: 2px dashed #cbb7e4;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 26px;
  align-items: center;
  margin-bottom: 22px;
}

.step-num {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #5d4791;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px var(--bg);
}

.step-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 30px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.step-card .icon-circle {
  width: 72px; height: 72px;
  margin: 0;
  flex-shrink: 0;
  background: #faf7fd;
}

.step-card .icon-circle svg { width: 36px; height: 36px; }

.step-card h3 { font-size: 17px; margin-bottom: 5px; }

.step-card p { font-size: 13px; max-width: 420px; }

/* What You Will Experience — rounded lavender band */
.exp-section { padding: 10px 0 76px; }

.exp-box {
  background: linear-gradient(115deg, #e3d6f3 0%, #d7c5ec 100%);
  border-radius: 18px;
  padding: 46px 44px 50px;
}

.exp-box .section-title { margin-bottom: 40px; }

.exp-box .cards-4 { gap: 20px; }

.exp-box .value-card { border-color: transparent; }

/* Your Journey, Your Pace */
.pace-section { padding: 0 0 70px; }

.pace-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 72px);
  align-items: center;
}

.pace-copy { width: 100%; max-width: 520px; justify-self: end; }
.pace-img { width: 100%; max-width: 460px; justify-self: start; }

.pace-section h2 { font-size: 26px; margin-bottom: 14px; }

.pace-section p { margin-bottom: 24px; }

.pace-img img { width: 100%; }

/* Healing Journeys, Real Transformations — purple quote band */
.hj-quote { padding: 0 0 84px; }

.hj-quote-box {
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 50px;
  align-items: center;
  background: linear-gradient(115deg, #9d88c8 0%, #82699f 100%);
  border-radius: 18px;
  padding: 44px 52px;
  max-width: 1100px;
  margin: 0 auto;
}

.hj-quote-box h2 { color: #fff; font-size: 24px; margin-bottom: 16px; }

.hj-quote-box blockquote {
  color: #f0eaf9;
  font-size: 14px;
  line-height: 1.85;
  max-width: 520px;
  margin-bottom: 14px;
}

.hj-quote-box .t-name { color: #fff; }

.hj-quote-box .stars svg { fill: #f2cd85; }

.hj-quote-photo img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .55);
}

/* ==========================================================================
   SOFT & SHINE — rounder photos, sheen sweep, glitter, gentler shapes
   ========================================================================== */
.pill { border-radius: 12px; }
.faq-item { border-radius: 14px; }
.post-card, .t-card { border-radius: 14px; }

/* photo frames: radius + glow live on the container so sheen can clip cleanly */
.journey-photo, .aw-photo, .approach-photo, .hm-photo, .featured-img {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--photo-glow);
}

.journey-photo img, .aw-photo img, .approach-photo img,
.hm-photo img, .featured-img img {
  border-radius: 0;
  box-shadow: none;
  display: block;
  transition: transform .8s ease;
}

.journey-photo:hover img, .aw-photo:hover img, .approach-photo:hover img,
.hm-photo:hover img, .featured-img:hover img { transform: scale(1.04); }

/* light sweep (sheen) across photos on hover */
.journey-photo::before, .aw-photo::before, .approach-photo::before,
.hm-photo::before, .featured-img::before, .post-thumb::before,
.svc-photo::before, .soft-cta-img::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -85%;
  width: 55%;
  height: 120%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .9s ease;
  pointer-events: none;
  z-index: 2;
}

.journey-photo:hover::before, .aw-photo:hover::before, .approach-photo:hover::before,
.hm-photo:hover::before, .featured-img:hover::before, .post-card:hover .post-thumb::before,
.svc-card:hover .svc-photo::before, .soft-cta-box:hover .soft-cta-img::before {
  left: 130%;
}

.post-thumb, .svc-photo, .soft-cta-img { position: relative; overflow: hidden; }

/* particle hosts need positioning context */
.pace-img, .soft-cta-box, .hj-quote-box, .exp-box { position: relative; }

/* gentle pulse on the gold lotus ornaments */
@media (prefers-reduced-motion: no-preference) {
  .section-title::before { animation: ornamentBreathe 4s ease-in-out infinite alternate; }

  @keyframes ornamentBreathe {
    from { transform: scale(1); opacity: .75; }
    to   { transform: scale(1.12); opacity: 1; }
  }
}

/* ==========================================================================
   SLIM BANDS & FOOTER — every banner strip compact, not square
   ========================================================================== */
.cta-band .container { min-height: 110px; padding-top: 14px; padding-bottom: 14px; }
.cta-band h2 { font-size: 23px; }
.cta-band .cta-art { width: 190px; margin: -14px 0; }

.cta-band.cta-stack .container { min-height: 150px; padding-top: 26px; padding-bottom: 26px; }
.cta-stack .cta-copy h2 { font-size: 25px; margin-bottom: 18px; }
.cta-stack .cta-art { width: 210px; margin: -26px 0; }

.news-band .container { padding-top: 26px; padding-bottom: 26px; }
.news-copy h2 { font-size: 23px; }
.news-copy p { margin-bottom: 14px; }
.news-art { width: 185px; margin: -26px -32px -26px 0; }

.closing-band .container { min-height: 140px; padding-top: 18px; padding-bottom: 18px; }
.closing-band h2 { font-size: 22px; }
.closing-band .cta-art { width: 200px; margin: -18px 0; }

.soft-cta-box { min-height: 170px; }
.soft-cta-copy { padding: 26px 12px 26px 40px; }
.soft-cta-copy h2 { font-size: 22px; margin-bottom: 8px; }
.soft-cta-copy p { margin-bottom: 16px; }
.soft-cta-img { min-height: 170px; }

.hj-quote-box { padding: 30px 44px; gap: 40px; grid-template-columns: 1fr 140px; }
.hj-quote-box h2 { font-size: 22px; margin-bottom: 10px; }
.hj-quote-photo img { width: 140px; height: 140px; }

.exp-box { padding: 34px 36px 38px; }
.exp-box .section-title { margin-bottom: 32px; }

/* footer slimmer */
.footer-main { padding-top: 20px; padding-bottom: 14px; }
.footer-col h4 { margin-bottom: 9px; }
.footer-col ul li { margin-bottom: 4.5px; }
.footer-contact li { margin-bottom: 7px; }
.footer-brand .f-logo-row { margin-bottom: 6px; }
.footer-brand .f-logo-row svg, .footer-brand .f-logo-row img { width: 30px; height: 30px; }
.footer-brand p { margin-bottom: 5px; }
.footer-news p { margin-bottom: 10px; }
.footer-news input { padding: 9px 12px; margin-bottom: 8px; }
.footer-news .btn { padding: 10px 16px; }
.footer-bottom .container { padding-top: 8px; padding-bottom: 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .main-nav ul { gap: 20px; }
  .main-nav { margin-right: 10px; }
  .footer-main { grid-template-columns: 1.2fr 1fr 1fr minmax(220px, 1fr); gap: 28px; }
  .footer-news { max-width: 300px; }
  /* the column is too narrow to split the links in two without them wrapping */
  .footer-links ul { grid-auto-flow: row; grid-template-rows: none; }
  .why-grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .timeline::before { display: none; }
  .tl-item:not(:last-child)::after { display: none; }
}

/* single-row header gets tight between the hamburger breakpoint and 1000px */
@media (max-width: 1000px) {
  .main-nav ul { gap: 14px; }
  .main-nav a { font-size: 11px; letter-spacing: .7px; }
  .main-nav { margin-right: 6px; }
  .brand-logo-wrap { width: 66px; height: 66px; margin-left: -12px; }
}

@media (max-width: 920px) {
  .page-hero .container { grid-template-columns: 1fr; min-height: 0; padding-top: 56px; }
  .hero-copy { max-width: 100%; margin-left: 0; margin-right: 0; }
  .hero-media { display: none; }
  .page-hero.hero-bg { background-image: linear-gradient(105deg, #f2ebf8 0%, #ece2f4 45%, #e2d2ee 100%); }
  .hero-copy h1 { font-size: 36px; }

  .journey-behind .container { grid-template-columns: 1fr; gap: 40px; }
  .journey-photo, .aw-photo { max-width: 300px; min-height: 0; aspect-ratio: 4 / 5; justify-self: center; }
  .journey-copy { max-width: 100%; justify-self: stretch; }

  .svc-card-wide, .svc-card-third { grid-column: span 6; }
  .svc-card-full { grid-template-columns: 1fr; }
  .svc-card-full .svc-photo { min-height: 220px; }
  .healing-meets .container { grid-template-columns: 1fr; gap: 40px; }
  .hm-photo { max-width: 460px; justify-self: center; }
  .hm-copy { max-width: 100%; justify-self: stretch; }

  .contact-section .container { grid-template-columns: 1fr; gap: 40px; }
  .contact-info, .contact-form-card { max-width: 100%; justify-self: stretch; }

  .about-welcome .container,
  .approach-section .container,
  .pace-section .container { grid-template-columns: 1fr; gap: 40px; }
  .approach-photo, .pace-img { max-width: 430px; justify-self: center; }
  .aw-copy, .approach-copy, .pace-copy { max-width: 100%; justify-self: stretch; }
  .cards-4 { grid-template-columns: 1fr 1fr; }
  .cert-section .cards-4 { grid-template-columns: 1fr 1fr; max-width: none; }
  .soft-cta-box { grid-template-columns: 1fr; }
  .soft-cta-img { min-height: 200px; }
  .soft-cta-copy { padding: 36px 28px; }
  .hj-quote-box { grid-template-columns: 1fr; padding: 36px 30px; }
  .hj-quote-photo { justify-self: center; }
  .closing-band .container { flex-direction: column; text-align: center; padding-top: 40px; }
  .closing-band .cta-art { margin: 0; }

  .tf-card { flex-direction: column-reverse; text-align: left; align-items: flex-start; padding: 30px 28px; }
  .tf-photo { margin-left: 0; }
  .testi-grid { grid-template-columns: 1fr; }
  .cta-stack .cta-art { display: none; }

  .featured-post .container { grid-template-columns: 1fr; gap: 28px; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .news-band .container { flex-direction: column; align-items: flex-start; gap: 24px; }
  .news-form { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
  .news-input { max-width: 420px; width: 100%; }
  .news-art { display: none; }

  .philosophy-grid, .philosophy-grid.cols-2 { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .cta-band .container { flex-direction: column; text-align: center; gap: 24px; padding-top: 44px; padding-bottom: 0; }
  .cta-band h2 { font-size: 24px; }
  .cta-band .cta-art { margin: 0; }
}

@media (max-width: 860px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
  }

  .brand-logo-wrap { grid-row: 1; width: 52px; height: 52px; margin-left: 0; }
  .brand-name { font-size: 18px; letter-spacing: 1.6px; }
  .brand-tagline { font-size: 10px; }

  .nav-toggle { display: inline-flex; }

  .header-cta { display: none; }

  .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    margin-right: 0;
    display: none;
    margin-top: 14px;
  }

  .main-nav.open { display: block; }

  .main-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--line); }

  .main-nav li { border-bottom: 1px solid var(--line); }

  .main-nav a { display: block; padding: 13px 4px; }
  .main-nav a::after { display: none; }

  .main-nav .nav-book { display: block; border-bottom: none; padding: 12px 4px 6px; }
  .main-nav .nav-book .btn { width: 100%; justify-content: center; padding: 13px 20px; }

}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .hero-copy h1 { font-size: 30px; }
  .hero-copy h1 br { display: none; }
  .section-title { font-size: 26px; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .featured-copy h2 { font-size: 25px; }
  .cards-4 { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .cert-section .cards-4 { grid-template-columns: 1fr; max-width: 340px; }
  .step { grid-template-columns: 36px 1fr; gap: 16px; }
  .step-num { width: 36px; height: 36px; font-size: 13px; }
  .steps::before { left: 17px; }
  .step-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 22px; }
  .footer-main { grid-template-columns: 1fr; gap: 26px; }
  .footer-news { justify-self: start; max-width: 100%; }
  .footer-bottom .container { flex-direction: column; gap: 8px; text-align: center; }
}

/* ==========================================================================
   MOBILE POLISH — dedicated pass for a clean, app-like phone experience
   ========================================================================== */
@media (max-width: 920px) {
  /* bring hero imagery back as a rounded banner below the text */
  .hero-media {
    display: block;
    position: static;
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 4px;
    box-shadow: var(--photo-glow);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 2%; }

  .page-hero .container { padding-bottom: 34px; }

  /* trust strip: even 2x2 cells instead of a ragged wrapped row */
  .trust-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: start;
    gap: 18px 30px;
    max-width: 640px;
  }
}

@media (max-width: 640px) {
  /* --- header pill --- */
  .site-header { margin: 8px 8px 0; top: 8px; border-radius: 16px; }
  .site-header::before { inset: -8px -8px 0; }
  .site-header.header-hidden { transform: translateY(calc(-100% - 10px)); }
  .header-inner { padding-top: 8px; padding-bottom: 8px; }
  .brand-name { font-size: 16.5px; letter-spacing: 1.4px; }
  .brand-tagline { font-size: 8.5px; letter-spacing: 1.1px; white-space: nowrap; }

  /* --- open menu as a soft card --- */
  .main-nav.open {
    background: #fbf8fd;
    border: 1px solid #eadff5;
    border-radius: 14px;
    margin: 10px 2px 4px;
    padding: 2px 14px 10px;
  }

  .main-nav li { border-color: #f0e7f8; }
  .main-nav a { font-size: 12.5px; padding: 12px 2px; }

  /* --- hero --- */
  .page-hero .container { padding-top: 34px; gap: 24px; }
  .hero-copy h1 { font-size: 27px; }
  .hero-copy p { margin-bottom: 22px; }
  .hero-copy .btn { width: 100%; justify-content: center; }
  .hero-media { height: 250px; }

  /* --- tighter section rhythm --- */
  .journey-behind { padding: 50px 0; }
  .philosophy { padding: 42px 0 50px; }
  .timeline-section { padding-bottom: 54px; }
  .timeline-section.standalone { padding-top: 46px; }
  .why-section { padding: 46px 0 54px; }
  .services-list { padding: 46px 0 22px; }
  .healing-meets { padding: 26px 0 54px; }
  .contact-section { padding: 42px 0 50px; }
  .faq-section { padding: 42px 0 50px; }
  .post-grid-section { padding: 26px 0 50px; }
  .testi-grid-section { padding: 18px 0 50px; }
  .featured-post { padding: 22px 0 6px; }
  .about-welcome { padding: 46px 0; }
  .about-values { padding-bottom: 50px; }
  .approach-section { padding-bottom: 50px; }
  .cert-section { padding-bottom: 50px; }
  .soft-cta { padding-bottom: 50px; }
  .hj-steps { padding: 42px 0 36px; }
  .exp-section { padding-bottom: 46px; }
  .pace-section { padding-bottom: 42px; }
  .hj-quote { padding-bottom: 50px; }

  .section-title { font-size: 22px; margin-bottom: 30px; }
  .section-sub { margin: -22px auto 28px; font-size: 13px; }

  /* --- home timeline becomes icon-left rows --- */
  .timeline { gap: 14px; }

  .tl-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 16px;
    text-align: left;
    align-items: start;
  }

  .tl-icon { grid-row: 1 / 4; width: 56px; height: 56px; margin: 0; }
  .tl-icon svg { width: 27px; height: 27px; }
  .tl-year { margin-bottom: 0; }
  .tl-title { margin-bottom: 4px; }
  .tl-item p { max-width: none; margin: 0; }

  /* --- cards & grids --- */
  .phil-card { padding: 28px 22px; }
  .why-grid { gap: 14px; }
  .why-item .icon-circle { width: 56px; height: 56px; }
  .filter-bar { gap: 8px; }
  .pill { padding: 8px 16px; font-size: 12px; }
  .tf-card { padding: 26px 22px; }
  .exp-box { padding: 24px 18px 28px; }
  .soft-cta-copy { padding: 26px 22px; }

  .hj-quote-box { grid-template-columns: 1fr; text-align: center; padding: 28px 22px; gap: 22px; }
  .hj-quote-box .testi-sign { justify-content: center; }
  .hj-quote-photo { margin: 0 auto; }

  /* --- bands --- */
  .cta-band .btn, .cta-stack .btn, .soft-cta-copy .btn { width: 100%; justify-content: center; }
  .cta-band .cta-art { width: 150px; }
  .closing-band .cta-art { width: 170px; }

  /* --- trust strip: 2x2 grid, icon stacked over centred text so every cell
         lines up instead of wrapping into a ragged row --- */
  .trust-strip { padding: 22px 0; }

  .trust-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    justify-items: stretch;
    gap: 20px 10px;
  }

  .trust-item {
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.5;
  }

  .trust-item svg { width: 24px; height: 24px; }
  .trust-item .stars { gap: 3px; height: 24px; align-items: center; }
  .trust-item .stars svg { width: 13px; height: 13px; }

  /* --- article & legal --- */
  .article-hero { padding: 38px 0 34px; }
  .article-hero h1 { font-size: 25px; }
  .article-wrap { padding: 34px 20px 50px; }
  .legal-wrap { padding: 34px 20px 50px; }

  /* --- footer: 2-column links, centered brand --- */
  .footer-main { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding-top: 22px; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand .f-logo-row { justify-content: center; }
  .footer-main > .footer-col:nth-last-child(2) { grid-column: 1 / -1; }
  .footer-news { grid-column: 1 / -1; }
}

/* ==========================================================================
   FLUID TYPE — smooth scaling between phone and desktop (overrides fixed sizes)
   ========================================================================== */
.hero-copy h1 { font-size: clamp(27px, 2.2vw + 18px, 42px); }
.section-title { font-size: clamp(22px, 1.2vw + 12px, 26px); }
.about-welcome h2, .hm-copy h2,
.approach-section h2, .pace-section h2, .lc-title { font-size: clamp(22px, 1.4vw + 11px, 27px); }
.journey-copy h2 { font-size: clamp(20px, 1vw + 11px, 24px); }
.featured-copy h2 { font-size: clamp(24px, 1.5vw + 12px, 30px); }
.cta-band h2 { font-size: clamp(19px, 1.1vw + 10px, 23px); }
.cta-stack .cta-copy h2 { font-size: clamp(21px, 1.2vw + 11px, 25px); }
.news-copy h2 { font-size: clamp(19px, 1.1vw + 10px, 23px); }
.closing-band h2 { font-size: clamp(18px, 1vw + 10px, 22px); }
.article-hero h1 { font-size: clamp(25px, 2vw + 12px, 36px); }
.soft-cta-copy h2, .hj-quote-box h2 { font-size: clamp(19px, 1.1vw + 10px, 22px); }

/* ==========================================================================
   ACCESSIBILITY — visible focus, skip link, button legibility
   ========================================================================== */
:focus-visible {
  outline: 2.5px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn:focus-visible { outline-color: #5d4791; }

.btn { text-shadow: 0 1px 1px rgba(90, 55, 0, .25); }

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  font-size: 13px;
  transition: top .25s ease;
}

.skip-link:focus { top: 0; }

/* ==========================================================================
   MOBILE REDESIGN — app-style mobile UI (Design 2 blueprint)
   ========================================================================== */
.crumb { display: none; }

@media (max-width: 640px) {

  /* --- top bar: hamburger left, brand centered --- */
  .header-inner {
    grid-template-columns: 44px 1fr 44px;
    grid-template-rows: auto;
    align-items: center;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; border: none; }

  .brand-logo-wrap { display: none; }

  .brand-text {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
    padding-top: 0;
  }

  /* compact lotus mark beside the centered wordmark */
  .brand-text::before {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23c9891f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8c-5.5 9-5.5 19 0 28 5.5-9 5.5-19 0-28z'/%3E%3Cpath d='M32 36c-3-11-12-18-22-20 2 11 10 19.5 22 20z'/%3E%3Cpath d='M32 36c3-11 12-18 22-20-2 11-10 19.5-22 20z'/%3E%3Cpath d='M32 38.5c-8.5 4.5-19.5 4.5-28-2.5 6.5 11 18.5 15.5 28 11 9.5 4.5 21.5 0 28-11-8.5 7-19.5 7-28 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .brand-name { font-size: 16px; letter-spacing: 1.2px; white-space: nowrap; }
  .brand-tagline { display: none; }

  .main-nav { grid-column: 1 / 4; }

  /* --- breadcrumb under top bar --- */
  .crumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 0;
    font-size: 12px;
    color: var(--text-light);
  }

  .crumb a { color: var(--text-light); }
  .crumb a:active, .crumb a:hover { color: var(--purple); }
  .c-sep { opacity: .6; }

  /* --- page heroes: centered title blocks --- */
  .page-hero { background: transparent; }
  .page-hero.hero-bg { background-image: none; background-color: transparent; }

  .page-hero .container {
    padding-top: 20px;
    padding-bottom: 26px;
    gap: 18px;
  }

  .hero-copy { text-align: center; max-width: 100%; margin-left: 0; margin-right: 0; }
  .hero-copy .kicker { margin-bottom: 8px; }
  .hero-copy h1 { font-size: 26px; }
  .hero-copy .hero-divider { margin: 0 auto 16px; }
  .hero-copy p { max-width: 320px; margin-left: auto; margin-right: auto; }

  .page-hero .hero-media { display: none; }

  /* home keeps its image — image first, like the design */
  .home-hero .hero-media {
    display: block;
    order: -1;
    height: 300px;
    margin-top: 0;
    border-radius: 18px;
  }

  /* --- services: horizontal image-tile cards --- */
  .svc-grid { gap: 14px; }

  .svc-card, .svc-card-wide, .svc-card-third {
    display: grid;
    grid-template-columns: 98px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px;
  }

  .svc-num { display: none; }

  .svc-card .svc-art {
    position: static;
    transform: none;
    width: 98px;
    height: 98px;
    border-radius: 14px;
    overflow: hidden;
    order: -1;
    background: #f7f1e6;
  }

  .svc-card .svc-art img { width: 100%; height: 100%; object-fit: cover; mask-image: none; -webkit-mask-image: none; }

  /* keep all text in the right column; art spans the rows */
  .svc-card .svc-art, .svc-card-wide .svc-art.svc-art-img {
    grid-column: 1;
    grid-row: 1 / 5;
    position: static;
    transform: none;
    width: 98px;
    height: 98px;
  }
  .svc-card h3, .svc-card p, .svc-card .link-more { grid-column: 2; }
  .svc-card-full .svc-photo { grid-column: 1; grid-row: 1 / 5; }
  .svc-card-full .svc-body { grid-column: 2; }

  .svc-card h3 { font-size: 16.5px; margin-bottom: 5px; }
  .svc-card p { font-size: 12.5px; margin-bottom: 10px; max-width: none; }
  .svc-card .link-more { font-size: 11px; }

  .svc-card-full { grid-template-columns: 98px 1fr; padding: 14px; }
  .svc-card-full .svc-body { padding: 0; }
  .svc-card-full .svc-photo {
    order: -1;
    width: 98px;
    height: 98px;
    min-height: 0;
    border-radius: 14px;
    overflow: hidden;
  }

  .post-grid { gap: 14px; }

  /* --- testimonials: centered quote cards --- */
  .t-card { text-align: center; padding: 26px 22px 22px; }

  .t-card-top { flex-direction: column; align-items: center; gap: 14px; margin-bottom: 12px; }

  .t-avatar { width: 64px; height: 64px; }

  .t-card .testi-sign { justify-content: center; }

  .tf-card { align-items: center; text-align: center; }
  .tf-body .testi-sign { justify-content: center; }
  .tf-mark { margin-left: auto; margin-right: auto; }
  .tf-photo img { width: 110px; height: 110px; }

  /* --- centered section intros everywhere --- */
  .journey-copy h2, .about-welcome h2 { text-align: center; }
  .approach-section h2 { text-align: center; }
  .approach-section .hero-divider { margin: 0 auto 26px; }
}

/* ==========================================================================
   PICTURES EVERYWHERE — home photo strip + mobile hero banners
   ========================================================================== */
/* home "moments" strip */
.photo-strip { background: #efeaf4; padding: 0 0 84px; }

.photo-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ps-item {
  position: relative;
  height: 235px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--photo-glow);
}

.ps-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.ps-item:hover img { transform: scale(1.05); }

.ps-item::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -85%;
  width: 55%;
  height: 120%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .9s ease;
  pointer-events: none;
  z-index: 2;
}

.ps-item:hover::before { left: 130%; }

/* the m-banner hero image is a mobile-only element on band-background pages */
.hero-bg .hero-media.m-banner { display: none; }

@media (max-width: 640px) {
  /* subpage heroes get their imagery back as a rounded banner below the text */
  .page-hero .hero-media, .hero-bg .hero-media.m-banner {
    display: block;
    position: static;
    width: 100%;
    height: 240px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--photo-glow);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-bg .hero-media.m-banner img { object-position: right center; }

  /* about keeps its welcome photo instead — no double portrait */
  .no-m-media .hero-media { display: none; }

  /* home hero image stays first and taller */
  .home-hero .hero-media { order: -1; height: 300px; }

  /* photo strip becomes a swipeable row */
  .photo-strip { padding-bottom: 50px; }

  .photo-strip .container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .ps-item {
    flex: 0 0 76%;
    scroll-snap-align: center;
    height: 190px;
  }
}

/* ==========================================================================
   SERVICE DETAIL PAGES
   ========================================================================== */
.svc-detail-art {
  display: block;
  max-width: 420px;
  margin: 0 auto 38px;
  border-radius: 18px;
  box-shadow: var(--photo-glow);
}

.svc-tagline {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.7;
  color: var(--gold);
  max-width: 520px;
  margin: 40px auto 0;
}

.svc-tagline::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9891f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-2 3-2 6 0 9 2-3 2-6 0-9z'/%3E%3Cpath d='M12 13c-1-3.5-4-5.5-7-6 .7 3.5 3.5 6 7 6z'/%3E%3Cpath d='M12 13c1-3.5 4-5.5 7-6-.7 3.5-3.5 6-7 6z'/%3E%3Cpath d='M12 14c-2.5 1.5-6 1.5-8.5-.5 2 3.5 5.5 5 8.5 3.5 3 1.5 6.5 0 8.5-3.5-2.5 2-6 2-8.5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Aura vs Energy — the simple difference */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 30px 0 6px;
}

.diff-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}

.diff-card h3 { font-size: 16px; margin-bottom: 6px; }
.diff-card p { font-size: 13px; margin: 0; }

/* signature combination highlight */
.combo-box {
  background: linear-gradient(115deg, #ede2f8 0%, #e2d2f0 100%);
  border-radius: 16px;
  padding: 28px 30px;
  margin: 34px 0 6px;
}

.combo-box h2 { margin-top: 0 !important; }

.svc-detail-cta { text-align: center; margin-top: 42px; }

@media (max-width: 640px) {
  .diff-grid { grid-template-columns: 1fr; }
  .svc-detail-art { max-width: 100%; }
  .svc-tagline { font-size: 17px; }
}

/* ==========================================================================
   BOOKING — shared form, popup dialog, and the book.php fallback page
   ========================================================================== */

/* ---------- Hero (book.php only): copy left, crystal art bleeding right ---------- */
.book-hero {
  position: relative;
  background: linear-gradient(100deg, #fdfaf5 0%, #f9f1e8 55%, #f3e7dc 100%);
  overflow: hidden;
}

.book-hero .container {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  padding-top: 42px;
  padding-bottom: 42px;
}

/* same rule as .hero-copy — capped and nudged toward the middle of the band */
.bh-copy {
  position: relative;
  z-index: 2;
  width: 54%;
  max-width: 560px;
  margin-left: auto;
  margin-right: clamp(0px, 4vw, 80px);
}

.book-hero h1 {
  font-size: 42px;
  line-height: 1.12;
  margin: 0;
}

.book-hero h1 em {
  display: block;
  font-style: normal;
  color: var(--purple);
}

/* thin gold rule with a small star at its centre */
.bh-rule {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 230px;
  margin: 16px 0 18px;
}

.bh-rule::before,
.bh-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}

.bh-rule span {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9891f' d='M12 1.5l1.7 6.1 6.1-1.7-4.4 4.4 6.1 1.7-6.1 1.7 4.4 4.4-6.1-1.7L12 22.5l-1.7-6.1-6.1 1.7 4.4-4.4-6.1-1.7 6.1-1.7L4.2 5.9l6.1 1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.book-hero p {
  max-width: 330px;
  font-size: 13.5px;
  margin: 0;
}

.bh-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
}

.bh-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }

/* ---------- Page card ---------- */
.book-section { padding: 40px 0 84px; }

.book-card {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden; /* the image panel runs right up to the card edge */
}

/* ==========================================================================
   Booking form — image panel beside the fields (shared by page + popup)
   Side by side rather than stacked: the reassurance sits next to the form
   instead of pushing it down, which is what keeps it all on one screen.
   ========================================================================== */
.book-form-pane {
  display: grid;
  grid-template-columns: 288px 1fr;
  align-items: stretch;
}

/* .book-form-pane sets display:grid, which would otherwise beat the [hidden]
   default when the confirmation takes over */
.book-form-pane[hidden] { display: none; }

.book-main { min-width: 0; padding: 28px 30px 30px; }

/* ---------- Image panel ---------- */
.book-aside {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.ba-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* keeps the copy readable whatever part of the photo lands behind it */
.ba-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(46, 35, 88, .12) 0%, rgba(46, 35, 88, .6) 44%, rgba(46, 35, 88, .92) 100%),
    linear-gradient(90deg, rgba(75, 53, 121, .45) 0%, rgba(75, 53, 121, 0) 72%);
}

/* candle-warm glow that breathes behind the heading */
.ba-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 142, .4) 0%, rgba(255, 214, 142, 0) 68%);
  pointer-events: none;
}

.ba-copy { position: relative; padding: 26px 24px; }

.ba-orn {
  display: block;
  width: 34px;
  height: 25px;
  margin-bottom: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9b458' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-2 3-2 6 0 9 2-3 2-6 0-9z'/%3E%3Cpath d='M12 13c-1-3.5-4-5.5-7-6 .7 3.5 3.5 6 7 6z'/%3E%3Cpath d='M12 13c1-3.5 4-5.5 7-6-.7 3.5-3.5 6-7 6z'/%3E%3Cpath d='M12 14c-2.5 1.5-6 1.5-8.5-.5 2 3.5 5.5 5 8.5 3.5 3 1.5 6.5 0 8.5-3.5-2.5 2-6 2-8.5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ba-copy h3 {
  font-size: 25px;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 8px;
}

.ba-copy h3 em { font-style: normal; color: var(--gold-pale); }

.ba-lede {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 17px;
}

.ba-points { display: grid; gap: 9px; }

.ba-points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .93);
}

.ba-tick {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(233, 180, 88, .22);
  color: var(--gold-pale);
}

.ba-tick svg { width: 10px; height: 10px; stroke-width: 3; }

/* ---------- Card head (shared by page + popup) ---------- */
.book-card-head {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
}

.book-card-ico {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #f1e8fa 0%, #e6d8f5 100%);
  color: var(--purple);
}

.book-card-ico svg { width: 23px; height: 23px; }

.book-card-head h2 { font-size: 20px; margin-bottom: 2px; }
.book-card-head p { font-size: 12.5px; margin: 0; }
.book-card-head p strong { color: var(--purple); font-weight: 600; }

/* ---------- Fields: label sits inside the box, icon on the left ---------- */
.bf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 11px;
}

.bf-field { margin-bottom: 11px; }

.bf-box {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border: 1px solid #e6dcf0;
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.bf-box:focus-within {
  border-color: var(--purple-soft);
  box-shadow: 0 0 0 3px rgba(123, 82, 172, .1);
}

.bf-ico {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  color: var(--purple);
}

.bf-ico svg { width: 100%; height: 100%; }

.bf-inner { display: block; flex: 1; min-width: 0; }

.bf-inner label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--purple);
  cursor: pointer;
}

.bf-inner label .opt { color: var(--text-light); font-weight: 400; }

.bf-inner input,
.bf-inner select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 1px 0 0;
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.bf-inner input::placeholder { color: #a9a0bd; }

.bf-inner select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color: #a9a0bd;
}

.bf-inner select.filled { color: var(--ink); }

.bf-inner input[type="date"] { cursor: pointer; }
.bf-inner input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }

/* fixed +91 dial code */
.bf-phone-row { display: flex; align-items: center; gap: 7px; }

.bf-cc {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding-right: 7px;
  border-right: 1px solid #e7ddf2;
}

.bf-chev {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--purple);
  align-self: center;
  transition: transform .25s ease;
}

.bf-chev svg { width: 100%; height: 100%; }

/* ---------- Service picker (replaces the OS-drawn select list) ---------- */
.bf-pick {
  display: block;
  width: 100%;
  padding: 1px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  color: var(--ink);
}

.bf-pick-val.is-placeholder { color: #a9a0bd; }

/* the surrounding box already lights up via :focus-within, so a second ring
   drawn inside it would only look like a stray rectangle */
.bf-pick:focus-visible { outline: none; }

.bf-field-service.picking .bf-box {
  border-color: var(--purple-soft);
  box-shadow: 0 0 0 3px rgba(123, 82, 172, .1);
}

.bf-field-service.picking .bf-chev { transform: rotate(180deg); }

/* pinned to the viewport by main.js so no scroll box can clip it */
.bf-menu {
  position: fixed;
  z-index: 400;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #e9e0f3;
  border-radius: 15px;
  box-shadow: 0 20px 44px rgba(46, 35, 88, .18), 0 2px 6px rgba(46, 35, 88, .06);
}

.bf-menu::-webkit-scrollbar { width: 8px; }
.bf-menu::-webkit-scrollbar-track { background: transparent; }
.bf-menu::-webkit-scrollbar-thumb { background: #e0d3f0; border-radius: 4px; border: 2px solid #fff; }

.bf-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.bf-opt + .bf-opt { margin-top: 2px; }

.bf-opt-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(140deg, #f4ecfb 0%, #e9dcf6 100%);
  color: var(--purple);
  transition: background .18s ease, color .18s ease;
}

.bf-opt-ico svg { width: 15px; height: 15px; }

.bf-opt-txt { flex: 1; min-width: 0; }

.bf-opt-tick {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--gold);
  opacity: 0;
  transition: opacity .18s ease;
}

.bf-opt-tick svg { width: 100%; height: 100%; stroke-width: 2.6; }

.bf-opt.active { background: #f8f4fc; }

.bf-opt.chosen { background: #f3ebfa; color: var(--purple); font-weight: 600; }
.bf-opt.chosen .bf-opt-tick { opacity: 1; }

.bf-opt.chosen .bf-opt-ico {
  background: linear-gradient(140deg, var(--purple-soft) 0%, var(--purple) 100%);
  color: #fff;
}

/* "I'm not sure" sits apart, as a gentler way out */
.bf-opt-guide { position: relative; margin-top: 9px; }
.bf-opt-guide .bf-opt-txt { font-style: italic; }

.bf-opt-guide::before {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  top: -5px;
  height: 1px;
  background: #f0e8f7;
}

/* ---------- Date picker (built by main.js, replaces the native calendar) ----------
   Pinned to the viewport like .bf-menu so no scroll box can clip it, and small
   enough that an upward flip still clears the top of a phone screen. */
.bf-field-date.picking .bf-box {
  border-color: var(--purple-soft);
  box-shadow: 0 0 0 3px rgba(123, 82, 172, .1);
}

.bf-cal {
  position: fixed;
  z-index: 400;
  width: 258px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e9e0f3;
  border-radius: 15px;
  box-shadow: 0 20px 44px rgba(46, 35, 88, .18), 0 2px 6px rgba(46, 35, 88, .06);
  font-family: var(--sans);
}

.bf-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.bf-cal-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .2px;
}

.bf-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--purple);
  transition: background .2s ease, opacity .2s ease;
}

.bf-cal-nav svg { width: 15px; height: 15px; }
.bf-cal-nav:hover { background: #f3ebfa; }
.bf-cal-nav:disabled { opacity: .25; cursor: default; background: none; }

.bf-cal-dow,
.bf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.bf-cal-dow span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-light);
  padding-bottom: 3px;
}

.bf-cal-day {
  height: 30px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  transition: background .18s ease, color .18s ease;
}

.bf-cal-day:hover:not(:disabled) { background: #f3ebfa; color: var(--purple); }
.bf-cal-day.is-today { font-weight: 700; color: var(--purple); }

.bf-cal-day.is-off {
  color: #c6bfd4;
  cursor: default;
  text-decoration: line-through;
}

.bf-cal-day.is-on {
  background: var(--purple);
  color: #fff;
  font-weight: 600;
}

/* inline validation */
.bf-error {
  display: none;
  font-size: 11px;
  color: #c2554e;
  margin: 5px 0 0 4px;
}

.bf-field.invalid .bf-error { display: block; }
.bf-field.invalid .bf-box { border-color: #e0a49e; background: #fdf7f6; }
.bf-field.invalid .bf-ico { color: #c2554e; }

/* ---------- Submit + reassurance ---------- */
.bf-submit {
  position: relative;
  width: 100%;
  margin-top: 7px;
  justify-content: center;
  padding: 17px 24px;
  font-size: 13.5px;
  letter-spacing: 1.5px;
  border-radius: 13px;
}

.bf-submit svg { position: absolute; right: 22px; width: 18px; height: 18px; }

.bf-secure {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--text-light);
}

.bf-secure::before,
.bf-secure::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e8dccb;
}

.bf-secure svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--gold); }

/* ---------- Confirmation ---------- */
/* the panes sit edge to edge, so this one carries its own padding */
.book-done { text-align: center; padding: 38px 32px 34px; }

.bd-check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, #eaf7ee 0%, #d8f0e0 100%);
  color: #3f9d63;
  box-shadow: 0 0 0 8px rgba(63, 157, 99, .07);
}

.bd-check svg { width: 29px; height: 29px; }

.book-done h2 { font-size: 23px; line-height: 1.3; margin-bottom: 13px; }

.bd-lede { max-width: 450px; margin: 0 auto 24px; font-size: 13px; }
.bd-lede strong { color: var(--ink); font-weight: 600; }

.bd-summary {
  max-width: 450px;
  margin: 0 auto 20px;
  text-align: left;
  background: #fbf8fd;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px 18px;
}

.bd-summary li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 9px 0;
  font-size: 12.5px;
  border-bottom: 1px solid #f0e9f6;
}

.bd-summary li:last-child { border-bottom: none; }

.bd-k { color: var(--text-light); flex-shrink: 0; }
.bd-v { color: var(--ink); font-weight: 500; text-align: right; overflow-wrap: anywhere; }

.bd-hint { font-size: 12.5px; margin-bottom: 18px; }
.bd-hint a { color: var(--purple); font-weight: 600; text-decoration: underline; }

.bd-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 13px;
}

.btn-ghost {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--purple);
  padding: 13px 20px;
  border-radius: 9px;
  border: 1px solid #ddd0ee;
  background: #fff;
  transition: background .25s ease, border-color .25s ease;
}

.btn-ghost:hover { background: var(--lav); border-color: var(--purple-soft); }

/* ---------- Need help (book.php) ---------- */
.book-help {
  max-width: 700px;
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #f5effa 0%, #eee5f7 100%);
  border-radius: 16px;
  padding: 15px 20px;
}

.book-help img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  object-position: 50% 8%;
  flex-shrink: 0;
}

.bh-help-copy { flex: 1; }
.bh-help-copy h3 { font-size: 16px; margin-bottom: 1px; }
.bh-help-copy p { font-size: 12px; margin: 0; }

.btn-outline {
  background: #fff;
  color: var(--gold-dark);
  border: 1.5px solid var(--gold);
  box-shadow: none;
}

.btn-outline:hover {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-dark) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(184, 119, 21, .26);
}

/* ==========================================================================
   Booking popup
   ========================================================================== */
html.book-locked { overflow: hidden; }

.book-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 20px;
}

/* .book-modal sets display:flex, which would otherwise beat the [hidden] default */
.book-modal[hidden] { display: none; }

.bm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 35, 88, .55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.bm-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 812px;
  max-height: calc(100vh - 52px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(46, 35, 88, .38);
}

.bm-dialog:focus { outline: none; }

.bm-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f6f1fb;
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}

.bm-close svg { width: 16px; height: 16px; }
.bm-close:hover { background: var(--purple); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .book-modal:not([hidden]) .bm-backdrop { animation: bmFade .25s ease both; }
  .book-modal:not([hidden]) .bm-dialog { animation: bmRise .32s cubic-bezier(.22, .61, .36, 1) both; }

  @keyframes bmFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bmRise {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }

  /* the photo drifts slowly, like candlelight moving over the altar */
  .ba-photo { animation: baDrift 26s ease-in-out infinite alternate; }

  @keyframes baDrift {
    from { transform: scale(1); }
    to   { transform: scale(1.09) translateY(-6px); }
  }

  .ba-glow { animation: baBreathe 6.5s ease-in-out infinite alternate; }

  @keyframes baBreathe {
    from { opacity: .5;  transform: translate(-50%, -50%) scale(.88); }
    to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
  }

  /* panel copy and fields settle in one after another as the popup opens.
     Animating `translate` rather than `transform` leaves the buttons' own
     hover transforms free to work afterwards. */
  .book-modal:not([hidden]) .ba-copy,
  .book-modal:not([hidden]) .book-card-head,
  .book-modal:not([hidden]) .book-form > * {
    animation: bfLift .5s cubic-bezier(.22, .61, .36, 1) both;
  }

  .book-modal:not([hidden]) .ba-copy { animation-delay: .06s; }
  .book-modal:not([hidden]) .book-card-head { animation-delay: .1s; }
  .book-modal:not([hidden]) .book-form > *:nth-child(1) { animation-delay: .16s; }
  .book-modal:not([hidden]) .book-form > *:nth-child(2) { animation-delay: .22s; }
  .book-modal:not([hidden]) .book-form > *:nth-child(3) { animation-delay: .28s; }
  .book-modal:not([hidden]) .book-form > *:nth-child(4) { animation-delay: .34s; }
  .book-modal:not([hidden]) .book-form > *:nth-child(5) { animation-delay: .4s; }

  @keyframes bfLift {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
  }

  .bf-menu:not([hidden]),
  .bf-cal:not([hidden]) { animation: bfMenuIn .18s ease both; }
  .bf-menu.drop-up:not([hidden]),
  .bf-cal.drop-up:not([hidden]) { animation-name: bfMenuUp; }

  @keyframes bfMenuIn {
    from { opacity: 0; translate: 0 -7px; }
    to   { opacity: 1; translate: 0 0; }
  }

  @keyframes bfMenuUp {
    from { opacity: 0; translate: 0 7px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* ==========================================================================
   Floating WhatsApp button
   Sits under the popup's z-index so it slips away once the form is open.
   ========================================================================== */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 250;
  transition: opacity .25s ease, visibility .25s ease;
}

html.book-locked .wa-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* WhatsApp's own green, so the button reads as the real thing */
.wa-float-btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .38), 0 4px 14px rgba(46, 35, 88, .2);
  transition: transform .25s ease, box-shadow .25s ease;
}

.wa-float-btn img { display: block; width: 32px; height: 32px; }

.wa-float-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, .5), 0 6px 18px rgba(46, 35, 88, .24);
}

/* Greeting bubble — flashed once on arrival by main.js, and available on
   hover/focus afterwards. The tail points down at the icon. */
.wa-float-tip {
  position: absolute;
  right: 3px;
  bottom: calc(100% + 13px);
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(46, 35, 88, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
}

/* tail sits under the middle of the 56px button */
.wa-float-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 18px;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: var(--ink);
}

.wa-float.tip-on .wa-float-tip,
.wa-float:hover .wa-float-tip,
.wa-float-btn:focus-visible ~ .wa-float-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
   Booking — tablet & phone
   ========================================================================== */
@media (max-width: 860px) {
  /* keep the gold booking CTA reachable in the mobile header */
  .header-inner { grid-template-columns: auto 1fr auto auto; }

  .header-cta {
    display: block;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .nav-toggle { grid-column: 4; grid-row: 1; }

  .header-cta .btn {
    gap: 6px;
    padding: 9px 13px;
    font-size: 10px;
    letter-spacing: .6px;
    border-radius: 9px;
  }

  .header-cta .btn svg { width: 14px; height: 14px; }
}

@media (max-width: 720px) {
  .book-hero .container { min-height: 250px; padding-top: 30px; padding-bottom: 30px; }
  .bh-copy { width: 56%; margin-left: 0; margin-right: 0; }
  .book-hero h1 { font-size: 29px; }
  .book-hero p { font-size: 11.5px; max-width: 100%; }
  .bh-rule { max-width: 150px; margin: 12px 0 13px; }
  .bh-art { width: 50%; }

  .book-section { padding: 26px 0 60px; }
  .book-card { border-radius: 18px; }

  /* The image panel folds down into a slim banner and the inner card head goes
     away entirely — between them that is ~150px reclaimed, which is what lets
     every field and the button land on the first screen of a phone. */
  .book-form-pane { grid-template-columns: 1fr; }

  .book-aside { min-height: 88px; align-items: center; }
  .ba-photo { object-position: 50% 36%; }

  .ba-veil {
    background: linear-gradient(90deg, rgba(46, 35, 88, .9) 6%, rgba(46, 35, 88, .5) 100%);
  }

  .ba-glow { top: 50%; width: 150px; height: 150px; }
  .ba-copy { padding: 13px 17px; }
  .ba-orn { width: 25px; height: 18px; margin-bottom: 4px; }
  .ba-copy h3 { font-size: 18.5px; margin-bottom: 2px; }
  .ba-lede { font-size: 10.5px; line-height: 1.45; margin-bottom: 0; }
  .ba-points { display: none; }

  .book-main { padding: 15px 15px 17px; }
  .book-card-head { display: none; }

  /* tighter boxes so the paired rows still fit side by side on a phone */
  .bf-box { gap: 8px; padding: 8px 10px; border-radius: 12px; }
  .bf-ico { width: 18px; height: 18px; }
  .bf-inner label { font-size: 9.5px; }
  .bf-inner input, .bf-inner select { font-size: 12px; }
  .bf-cc { font-size: 12px; padding-right: 5px; }
  .bf-phone-row { gap: 5px; }
  .bf-row { gap: 0 8px; }
  .bf-field { margin-bottom: 9px; }

  .bf-submit { padding: 15px 18px; font-size: 12px; letter-spacing: 1.1px; }
  .bf-submit svg { right: 16px; width: 16px; height: 16px; }
  .bf-secure { font-size: 10px; gap: 7px; }

  /* popup becomes a bottom sheet */
  .book-modal { padding: 0; align-items: flex-end; }

  .bm-dialog {
    max-width: none;
    max-height: 93vh;
    border-radius: 22px 22px 0 0;
  }

  .bm-close { top: 12px; right: 12px; width: 30px; height: 30px; }

  .book-done { padding: 26px 18px 24px; }
  .book-done h2 { font-size: 19px; }
  .bd-lede { font-size: 12.5px; }
  .bd-summary { padding: 4px 15px; }
  .bd-summary li { flex-direction: column; gap: 2px; padding: 8px 0; }
  .bd-v { text-align: left; }
  .bd-actions { flex-direction: column; }
  .bd-actions .btn, .bd-actions .btn-ghost { width: 100%; justify-content: center; text-align: center; }

  .book-help { gap: 12px; padding: 13px 15px; }
  .book-help img { width: 46px; height: 46px; border-radius: 12px; }
  .bh-help-copy h3 { font-size: 14px; }
  .bh-help-copy p { font-size: 10.5px; line-height: 1.45; }
  .book-help .btn { padding: 10px 12px; font-size: 9.5px; letter-spacing: .6px; gap: 5px; }
  .book-help .btn svg { width: 13px; height: 13px; }

  .wa-float { right: 14px; bottom: 14px; }
  .wa-float-btn { width: 52px; height: 52px; }
  .wa-float-btn img { width: 31px; height: 31px; }
  .wa-float-tip { font-size: 11.5px; padding: 8px 12px; bottom: calc(100% + 11px); }
}

@media (max-width: 560px) {
  /* the tagline is the first thing to go when the header gets crowded */
  .brand-tagline { display: none; }
  .header-inner { column-gap: 8px; }
  .header-cta .btn { padding: 8px 11px; font-size: 9.5px; }
}

/* the header CTA label collapses to just "Book" on very narrow phones. Both
   labels are separate flex items, so only ever render one — a stray text node
   beside a span would pick up the button's flex gap and double the space. */
.cta-short { display: none; }

@media (max-width: 400px) {
  .cta-full { display: none; }
  .cta-short { display: inline; }
  .bf-row { grid-template-columns: 1fr; gap: 0; }
  .book-hero h1 { font-size: 25px; }
  .bh-copy { width: 60%; }
}

@media (max-width: 380px) {
  /* smallest phones: claw back the last few pixels so the header CTA,
     the brand and the menu toggle all still fit on one row */
  .header-inner { column-gap: 6px; }
  .brand-logo-wrap { width: 46px; height: 46px; }
  .nav-toggle { width: 38px; height: 38px; }
  .header-cta .btn { padding: 8px 9px; gap: 5px; }

  .book-help { flex-wrap: wrap; justify-content: center; text-align: center; }
  .bh-help-copy { flex: 1 1 100%; order: 2; }
  .book-help img { order: 1; }
  .book-help .btn { order: 3; width: 100%; justify-content: center; }
}

/* Below this the brand, CTA and toggle can no longer share a row, so the CTA
   steps aside — "Book a Session" is still in the menu and opens the popup. */
@media (max-width: 349px) {
  .header-cta { display: none; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav-toggle { grid-column: 3; }
}