/* ==========================================================================
   DHARMIKAM — SECTIONS
   Navbar, hero, quote band, section shell, about, cards, wellness,
   testimonials, CTA, footer, back-to-top, and per-section decor.
   ========================================================================== */

/* ==========================================================================
   5. NAVBAR
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:1040;
  transition:background-color .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s var(--ease),padding .4s var(--ease);
  padding:.55rem 0;background:transparent;
  interpolate-size:allow-keywords; /* lets the logo animate from its natural height */
}
.site-header .logo img{transition:height .4s var(--ease)}
.site-header .nav-shell{transition:min-height .4s var(--ease)}
.site-header.is-scrolled{
  background:rgba(251,247,239,.88);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 var(--line),0 16px 38px -30px rgba(15,46,30,.55);
  padding:.3rem 0;
}
/* Compact bar once scrolled: ~60px logo, tighter spacing, everything centred */
.site-header.is-scrolled .nav-shell{min-height:60px}
.site-header.is-scrolled .brand,
.site-header.is-scrolled .logo{display:flex;align-items:center}
.site-header.is-scrolled .logo img{height:60px;width:auto}

.navbar{padding:0}
.nav-shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--nav-h)}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:.78rem;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  border-radius:15px 6px 15px 6px;
  background:linear-gradient(140deg,var(--deep),var(--herb));
  box-shadow:0 8px 20px -10px rgba(15,46,30,.8);
  color:var(--gold-soft);
  position:relative;overflow:hidden;
  transition:transform .55s var(--ease-out),border-radius .55s var(--ease-out);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);border-radius:6px 15px 6px 15px}
.brand-mark svg{width:25px;height:25px;position:relative;z-index:1}
.brand-mark::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 28% 22%,rgba(226,200,138,.4),transparent 62%);
}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--font-display);font-size:1.34rem;font-weight:600;letter-spacing:.03em;color:var(--ink)}
.brand-sub{font-size:.585rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:.32rem;font-weight:500}

/* Links */
.navbar-nav{gap:.1rem;align-items:center}
.nav-link{
  position:relative;
  font-size:14px;font-weight:500;letter-spacing:.05em;
  color:var(--ink)!important;opacity:.82;
  padding:.55rem .9rem!important;
  transition:opacity .3s var(--ease),color .3s var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.24rem;height:1.5px;
  background:linear-gradient(90deg,var(--gold),var(--herb));
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-out);
}
.nav-link:hover,.nav-link:focus-visible{opacity:1}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{opacity:1;color:var(--deep)!important;font-weight:600}

/* Toggler */
.nav-toggler{
  width:48px;height:44px;border:1.5px solid rgba(15,46,30,.2);
  border-radius:14px;background:rgba(255,255,255,.55);
  display:grid;place-items:center;padding:0;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.nav-toggler:focus{box-shadow:none}
.nav-toggler i{font-size:1.4rem;color:var(--deep);line-height:1}
.nav-toggler:hover{background:#fff;border-color:rgba(15,46,30,.4)}

/* Mobile panel */
@media (max-width:1199.98px){
  .navbar-collapse{
    margin-top:.85rem;
    background:rgba(251,247,239,.98);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid var(--line);border-radius:var(--r-md);
    padding:1.1rem 1.15rem 1.4rem;box-shadow:var(--sh-md);
  }
  .navbar-nav{gap:0;align-items:stretch}
  .nav-link{padding:.78rem .55rem!important;font-size:.98rem;border-bottom:1px solid var(--line)}
  .nav-link::after{left:.55rem;right:auto;width:34px;bottom:.42rem}
  .navbar-nav .nav-item:last-child .nav-link{border-bottom:0}
  .nav-cta-wrap{width:100%;margin-top:.95rem}
  .nav-cta-wrap .btn-ayur{width:100%}
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  padding-top:calc(var(--nav-h) + clamp(38px,6vw,74px));
  padding-bottom:clamp(70px,8vw,110px);
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  overflow:hidden;
  background:
    radial-gradient(1100px 640px at 88% 6%,rgba(169,201,182,.5),transparent 62%),
    radial-gradient(820px 620px at 4% 92%,rgba(226,200,138,.32),transparent 64%),
    linear-gradient(168deg,#FDFBF6 0%,var(--cream) 42%,#F3EFE3 100%);
}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__bg .blob-a{
  width:min(56vw,720px);aspect-ratio:1;top:-16%;right:-12%;
  background:radial-gradient(circle,rgba(45,106,79,.44),transparent 68%);
  animation:driftA 26s ease-in-out infinite;
}
.hero__bg .blob-b{
  width:min(46vw,560px);aspect-ratio:1;bottom:-20%;left:-14%;
  background:radial-gradient(circle,rgba(192,153,63,.34),transparent 68%);
  animation:driftB 32s ease-in-out infinite;
}
.hero__bg .blob-c{
  width:min(34vw,420px);aspect-ratio:1;top:38%;left:32%;
  background:radial-gradient(circle,rgba(116,169,141,.3),transparent 68%);
  animation:pulseGlow 14s ease-in-out infinite;
}
/* Large soft organic sweep behind the visual */
.hero__sweep{
  position:absolute;z-index:-1;top:-8%;right:-16%;
  width:min(74vw,900px);aspect-ratio:1/1.06;
  background:linear-gradient(150deg,rgba(219,233,225,.9),rgba(242,233,216,.75));
  border-radius:58% 42% 47% 53%/44% 40% 60% 56%;
  animation:morph 24s var(--ease) infinite;
}

.hero__copy{position:relative;z-index:3}
.hero h1{margin-bottom:1.35rem}

/* Hand-drawn underline under the accent word */
.underline-swash{position:relative;display:inline-block}
.underline-swash svg{
  position:absolute;left:0;bottom:-.27em;width:100%;height:.34em;overflow:visible;
}
.underline-swash path{
  fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;
  animation:drawSwash 1.5s var(--ease-out) 1.05s forwards;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}

/* Hero stat strip */
.hero__stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3vw,2.9rem);
  margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:1.7rem;border-top:1px solid var(--line);
}
.stat__value{
  font-family:var(--font-display);font-size:clamp(1.55rem,2.3vw,2.1rem);
  font-weight:600;color:var(--deep);line-height:1;letter-spacing:-.02em;
}
.stat__label{
  font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin-top:.55rem;font-weight:500;
}

/* --- Hero visual composition --- */
.hero__visual{position:relative;z-index:2;min-height:clamp(400px,52vw,660px)}

.hero__frame{
  position:relative;z-index:2;width:min(100%,470px);margin-inline:auto;
  aspect-ratio:4/5;overflow:hidden;
  border-radius:58% 42% 47% 53%/44% 40% 60% 56%;
  box-shadow:var(--sh-lg),0 0 0 10px rgba(255,255,255,.55);
  animation:morph 18s var(--ease) infinite,floatSlow 8s ease-in-out infinite;
}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.hero__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(15,46,30,.06),rgba(192,153,63,.14));
}

/* Rings around the frame */
.hero__visual .ring-1{
  inset:-6% -4% -6% -4%;border-color:rgba(45,106,79,.24);
}
.hero__visual .ring-2{
  inset:4% 8% 4% 8%;border-color:rgba(192,153,63,.3);
  animation-duration:60s;
}

/* Floating info cards */
.float-card{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1.15rem;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.float-card:hover{transform:translateY(-5px) scale(1.03);box-shadow:var(--sh-lg)}
.float-card__icon{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(140deg,var(--deep),var(--herb));color:var(--gold-soft);font-size:1.15rem;
}
.float-card__icon svg{width:21px;height:21px}
.float-card__title{font-family:var(--font-display);font-size:.97rem;font-weight:600;color:var(--ink);line-height:1.2}
.float-card__meta{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}

.fc-1{top:6%;left:-2%;animation:floatY 7s ease-in-out infinite}
.fc-2{bottom:9%;right:-4%;animation:floatY 9s ease-in-out .9s infinite}
.fc-3{bottom:34%;left:-8%;animation:floatY 8s ease-in-out .4s infinite}

.stars-mini{color:var(--gold);font-size:.72rem;letter-spacing:.08em;line-height:1}

/* Floating botanical icons */
.float-ico{
  position:absolute;z-index:3;display:grid;place-items:center;
  width:var(--s,54px);height:var(--s,54px);border-radius:50%;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 28px -16px rgba(15,46,30,.55);
  color:var(--herb);font-size:calc(var(--s,54px) * .42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.float-ico svg{width:calc(var(--s,54px) * .46);height:calc(var(--s,54px) * .46)}
.fi-1{--s:58px;top:-2%;right:16%;color:var(--herb);animation:floatY 6.5s ease-in-out infinite}
.fi-2{--s:46px;top:30%;right:-5%;color:var(--gold);animation:floatX 9s ease-in-out infinite}
.fi-3{--s:52px;bottom:-1%;left:22%;color:var(--sage);animation:floatY 7.5s ease-in-out 1.2s infinite}
.fi-4{--s:42px;top:56%;left:-6%;color:var(--earth);animation:spinFloat 16s linear infinite}

/* Hero particles */
.hero .particle:nth-child(1){width:9px;height:9px;top:16%;left:12%;animation:driftUp 13s linear infinite}
.hero .particle:nth-child(2){width:6px;height:6px;top:64%;left:26%;animation:driftUp 17s linear 2s infinite}
.hero .particle:nth-child(3){width:11px;height:11px;top:34%;right:20%;animation:driftUp 15s linear 1s infinite}
.hero .particle:nth-child(4){width:7px;height:7px;bottom:14%;right:34%;animation:driftUp 19s linear 3.4s infinite}
.hero .particle:nth-child(5){width:5px;height:5px;top:48%;left:52%;animation:driftUp 21s linear 5s infinite}
.hero .particle:nth-child(6){width:8px;height:8px;top:8%;left:44%;animation:driftUp 16s linear 6.5s infinite}

/* Scroll cue */
.scroll-cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:5;display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;
  font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.scroll-cue span{writing-mode:vertical-rl}
.scroll-cue i{font-size:1.05rem;color:var(--herb);animation:bobDown 2.1s ease-in-out infinite}

/* ==========================================================================
   7. SANSKRIT QUOTE BAND
   ========================================================================== */
.quote-band{
  position:relative;overflow:hidden;
  padding:clamp(56px,7vw,92px) 0;
  background:linear-gradient(180deg,#F3EFE3,var(--cream));
  text-align:center;
}
.quote-band .sanskrit{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,3vw,2.15rem);
  color:var(--deep);line-height:1.5;margin-bottom:.6rem;
}
.quote-band .translit{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.02rem,1.6vw,1.28rem);color:var(--herb);margin-bottom:1.15rem;
}
.quote-band .attrib{
  font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}
.quote-band .om{
  font-family:var(--font-display);font-size:5.6rem;color:var(--gold);
  line-height:1;margin-bottom:1rem;display:inline-block;
  animation:pulseSoft 5.5s ease-in-out infinite;
}

/* ==========================================================================
   8. SECTION SHELL
   ========================================================================== */
.section{position:relative;padding:var(--pad-section) 0;overflow:hidden; background: linear-gradient(180deg, #f9dfa9, #F4F1E7); }
.section--tint{background:linear-gradient(180deg, #f9dfa9, #F4F1E7)}
.section--mist{background:linear-gradient(180deg,#EEF4EF,#F7F4EB)}
.section--dark{background:var(--deep);color:rgba(236,244,239,.8)}
.section--dark h2,.section--dark h3{color:var(--cream)}

.section-head{max-width:1320px}
.section-head.is-centered{margin-inline:auto;text-align:center}

/* ==========================================================================
   9. ABOUT
   ========================================================================== */
.about__media{position:relative;z-index:2}
.about__img-main{
  position:relative;overflow:hidden;
  aspect-ratio:4/4.6;
  border-radius:56% 44% 52% 48%/40% 46% 54% 60%;
  box-shadow:var(--sh-lg);
  animation:morph2 22s var(--ease) infinite;
}
.about__img-main img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.about__media:hover .about__img-main img{transform:scale(1.06)}


 .about__img-sub01{
  position:absolute;z-index:3;right:-4%;bottom:1%;
  width:clamp(140px,32%,220px);aspect-ratio:1;
  overflow:hidden;border-radius:var(--r-lg);
  border:7px solid var(--cream);box-shadow:var(--sh-md);
  animation:floatY 9s ease-in-out infinite;
}
 .about__img-sub01 img{width:100%;height:100%;object-fit:cover}



.about__img-sub{
  position:absolute;z-index:3;right:-4%;bottom:6%;
  width:clamp(140px,32%,220px);aspect-ratio:1;
  overflow:hidden;border-radius:var(--r-lg);
  border:7px solid var(--cream);box-shadow:var(--sh-md);
  animation:floatY 9s ease-in-out infinite;
}
.about__img-sub img{width:100%;height:100%;object-fit:cover}

.about__badge{
  position:absolute;z-index:4;left:-3%;top:7%;
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 1.25rem;border-radius:var(--r-md);
  background:var(--deep);color:var(--cream);box-shadow:var(--sh-md);
  animation:floatY 7.5s ease-in-out .6s infinite;
}
.about__badge .num{font-family:var(--font-display);font-size:1.6rem;font-weight:600;color:var(--gold-soft);line-height:1}
.about__badge .lab{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.82;line-height:1.4}

.about__ring{inset:-7% -5% 2% -5%;z-index:1}

/* Checklist */
.check-list{list-style:none;margin:1.9rem 0 2.2rem;padding:0;display:grid;gap:.85rem}
.check-list li{display:flex;align-items:flex-start;gap:.85rem;font-size:.97rem;color:var(--ink);font-weight:500}
.check-list i{
  flex:none;margin-top:.18rem;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;
  background:var(--mist);color:var(--herb);
  transition:transform .45s var(--ease-out),background-color .35s var(--ease),color .35s var(--ease);
}
.check-list li:hover i{transform:rotate(-12deg) scale(1.14);background:var(--deep);color:var(--gold-soft)}

/* ==========================================================================
   9b. COME TO … (three photo cards)
   Three reasons to arrive, each on its own compact card: the photograph
   softened under a deep-green scrim, a frosted icon tile, then the copy,
   left-aligned. The band opens in the cream the section above finishes in
   and settles into the green the band below opens with, so the cards sit
   across the join and belong to both neighbours.
   ========================================================================== */
.come-to{
  position:relative;
  padding:clamp(48px,6vw,84px) 0 clamp(52px,6.4vw,92px);
  /* background:linear-gradient(180deg,#F4F1E7 0%,#F4F1E7 46%,#1E4433 82%,var(--deep) 100%); */
  overflow:hidden;
}

/* --- the heading across the top ------------------------------------------ */
.come-to__head{
  margin:0 auto clamp(1.6rem,2.8vw,2.4rem);
  text-align:center;
}
.come-to__head .eyebrow{margin-bottom:.8rem}
.come-to__title{
  margin:0 auto;text-wrap:balance;
  font-size:clamp(1.75rem,3vw,2.6rem);
}

/* --- the three cards ----------------------------------------------------- */
.come-to__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.6rem);
}

.come-to .come-to__col{   /* compound, so it keeps its own transition over the reveal shorthand */
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:clamp(270px,24vw,330px);
  padding:clamp(1.5rem,2.6vw,2.4rem);
  border-radius:var(--r-md);
  border:1px solid rgba(236,244,239,.14);
  /* painted first, so the card never flashes white while its photograph loads */
  background:var(--deep);
  box-shadow:var(--sh-md);
  color:rgba(236,244,239,.82);
  text-align:left;
  transition:opacity .95s var(--ease-out),transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}

.come-to__photo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.come-to__photo img{
  width:100%;height:100%;                     /* the sheet sizes every img */
  object-fit:cover;object-position:center;
  filter:saturate(.8) brightness(.82);
  transition:transform 1.1s var(--ease-out);
}
/* the scrim: lighter at the top so the picture shows, deep behind the copy */
.come-to__col::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,46,30,.42) 0%,rgba(15,46,30,.7) 42%,rgba(9,29,19,.9) 100%),
    radial-gradient(120% 80% at 0% 0%,rgba(192,153,63,.14),transparent 60%);
}

/* frosted icon tile */
.come-to__icon{
  display:grid;place-items:center;flex:none;
  width:clamp(52px,4.4vw,60px);aspect-ratio:1;
  margin-bottom:auto;                         /* holds the copy to the card's foot */
  padding:clamp(13px,1.1vw,15px);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--cream);
  transition:transform .6s var(--ease-out),color .4s var(--ease),background-color .4s var(--ease);
}
.come-to__icon svg{width:100%;height:100%;display:block}

.come-to__kicker{
  margin:clamp(1.4rem,2.4vw,2rem) 0 .3rem;
  font-family:var(--font-body);
  font-size:.7rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-soft);
}

.come-to__word{
  margin:0;
  font-size:clamp(1.45rem,2vw,1.85rem);
  line-height:1.12;letter-spacing:-.015em;
  color:var(--cream);
}

/* short gold hairline, the eyebrow's own */
.come-to__rule{
  display:block;
  width:clamp(40px,4vw,54px);height:1.5px;
  margin:.85rem 0 .9rem;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width .6s var(--ease-out);
}

/* the items read as one line of copy, parted by small gold dots. Every item
   carries a dot; the list is pulled left by one dot-and-gap and that strip is
   clipped away, so the dot opening each wrapped line never shows. */
.come-to__list{
  --dot-gap:.55rem;
  list-style:none;padding:0;
  margin:0 0 0 calc(-1 * (4px + var(--dot-gap)));
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.2rem var(--dot-gap);
  clip-path:inset(0 0 0 calc(4px + var(--dot-gap)));
}
.come-to__list li{
  display:inline-flex;align-items:center;gap:var(--dot-gap);
  font-size:clamp(.9rem,.2vw + .86rem,.98rem);
  line-height:1.6;
  color:rgba(236,244,239,.86);
}
.come-to__list li::before{
  content:"";width:4px;height:4px;border-radius:50%;flex:none;
  background:var(--gold);opacity:.85;
}

/* --- hover: the same small lift the cards elsewhere answer with ----------- */
@media (hover:hover){
  .come-to .come-to__col.is-revealed:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
  .come-to__col:hover .come-to__photo img{transform:scale(1.06)}
  .come-to__col:hover .come-to__icon{transform:rotate(-8deg) scale(1.06);background-color:rgba(255,255,255,.18);color:var(--gold-soft)}
  .come-to__col:hover .come-to__rule{width:clamp(62px,6vw,80px)}
}

/* --- tablet: three columns still, on tighter padding --------------------- */
@media (max-width:991.98px){
  .come-to .come-to__col{min-height:260px;padding:1.35rem 1.25rem 1.5rem}
  .come-to__kicker{letter-spacing:.22em}
}

/* --- phone: the cards stack, each one short -------------------------------- */
@media (max-width:767.98px){
  .come-to{
    padding:clamp(40px,9vw,60px) 0 clamp(44px,10vw,64px);
    background:linear-gradient(180deg,#F4F1E7 0%,#F4F1E7 22%,#1E4433 70%,var(--deep) 100%);
  }
  .come-to__grid{grid-template-columns:1fr;gap:.9rem}
  .come-to .come-to__col{min-height:0;padding:1.3rem 1.3rem 1.4rem}
  /* the icon tile moves to the top-right corner, so it costs the card no height */
  .come-to__icon{position:absolute;top:1.1rem;right:1.1rem;width:44px;padding:11px;margin:0;border-radius:var(--r-xs)}
  .come-to__kicker{margin-top:0}
  .come-to__word,.come-to__list{padding-right:3.4rem}
}

@media (prefers-reduced-motion:reduce){
  .come-to__col,.come-to__photo img,.come-to__icon,.come-to__rule{transition:none}
}
}

/* ==========================================================================
   10. SERVICE CARDS (icon)
   ========================================================================== */
.svc-grid{--gap:clamp(1.1rem,1.8vw,1.6rem)}

.svc-card{
  position:relative;height:100%;isolation:isolate;overflow:hidden;
  padding:clamp(1.8rem,2.4vw,2.4rem);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),
             border-color .45s var(--ease),background-color .45s var(--ease);
}
/* gradient wash that fades in on hover */
.svc-card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(158deg,rgba(45,106,79,.09),rgba(192,153,63,.11));
  transition:opacity .5s var(--ease);
}
/* thin gradient top border */
.svc-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--herb),var(--gold),var(--sage));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.svc-card:hover,.svc-card:focus-within{
  transform:translateY(-10px);
  box-shadow:var(--sh-md);
  border-color:rgba(45,106,79,.24);
  background:rgba(255,255,255,.94);
}
.svc-card:hover::before,.svc-card:focus-within::before{opacity:1}
.svc-card:hover::after,.svc-card:focus-within::after{transform:scaleX(1)}

.svc-card__icon{
  position:relative;width:66px;height:66px;margin-bottom:1.5rem;
  display:grid;place-items:center;font-size:1.6rem;
  border-radius:22px 8px 22px 8px;
  background:linear-gradient(145deg,var(--mist),#F0EADC);
  color:var(--herb);
  transition:transform .6s var(--ease-out),border-radius .6s var(--ease-out),
             background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);
}
.svc-card__icon svg{width:30px;height:30px}
.svc-card:hover .svc-card__icon,.svc-card:focus-within .svc-card__icon{
  transform:rotate(-9deg) scale(1.1);
  border-radius:8px 22px 8px 22px;
  background:linear-gradient(145deg,var(--deep),var(--herb));
  color:var(--gold-soft);
  box-shadow:0 16px 30px -14px rgba(15,46,30,.75);
}
/* soft glow ring behind icon */
.svc-card__icon::after{
  content:"";position:absolute;inset:-10px;border-radius:inherit;
  background:radial-gradient(circle,rgba(192,153,63,.32),transparent 68%);
  opacity:0;transition:opacity .5s var(--ease);
}
.svc-card:hover .svc-card__icon::after{opacity:1}

.svc-card h3{margin-bottom:.7rem}
.svc-card p{font-size:.95rem;margin-bottom:1.4rem;color:var(--body)}

/* --------------------------------------------------------------------------
   10b. PHOTO SERVICE CARDS
   Same card shell as above, with a full-bleed photograph behind a dark
   botanical scrim. The photo lives on .svc-card__bg so it can zoom
   independently of the overlay, which cross-fades on top of it.

   Layer order inside the card (all below the copy):
     -2  .svc-card__bg          the photograph
     -2  .svc-card__bg::before  resting scrim
     -2  .svc-card__bg::after   hover scrim, faded in over the resting one
     -1  .svc-card::before      the existing warm wash, inherited unchanged
   -------------------------------------------------------------------------- */
.svc-card--photo{
  background:var(--deep);
  border-color:rgba(226,200,138,.2);
  box-shadow:0 18px 40px -26px rgba(9,29,19,.6);
}
.svc-card--photo:hover,.svc-card--photo:focus-within{
  background:var(--deep);
  border-color:rgba(226,200,138,.46);
  box-shadow:0 30px 60px -24px rgba(9,29,19,.72);
}

.svc-card__bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  /* a hair over 1 so the edges never show during the zoom-out */
  transform:scale(1.04);
  transition:transform 1.15s var(--ease-out);
}
.svc-card:hover .svc-card__bg,.svc-card:focus-within .svc-card__bg{
  transform:scale(1.13);
}

/* Resting scrim. Weighted to where the copy actually sits: the crown of the
   card stays open so the photograph reads, then it banks down hard from the
   heading to the base, where the paragraph and link need the contrast. */
.svc-card__bg::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(8,26,17,.30) 0%,
      rgba(8,26,17,.46) 24%,
      rgba(7,23,15,.74) 52%,
      rgba(5,18,12,.92) 100%),
    linear-gradient(112deg,rgba(15,46,30,.42),rgba(15,46,30,.06) 60%,rgba(45,106,79,.26));
}
/* Hover scrim — opens the crown a little further, deepens the base under the
   copy, and lays a gold sheen across the frame. Cross-fades over the resting
   layer, since background-image itself cannot be transitioned. */
.svc-card__bg::after{
  content:"";position:absolute;inset:0;opacity:0;
  background:
    linear-gradient(180deg,
      rgba(8,26,17,.20) 0%,
      rgba(8,26,17,.38) 24%,
      rgba(7,23,15,.72) 52%,
      rgba(4,16,10,.95) 100%),
    linear-gradient(112deg,rgba(192,153,63,.2),transparent 58%);
  transition:opacity .65s var(--ease);
}
.svc-card--photo:hover .svc-card__bg::after,
.svc-card--photo:focus-within .svc-card__bg::after{opacity:1}

/* copy sits in white throughout — body text a touch softer so the heading
   still leads, but far above the contrast floor against the scrim */
.svc-card--photo h3{color:#fff}
.svc-card--photo p{color:rgba(255,255,255,.88)}
.svc-card--photo .link-more{color:#fff}
.svc-card--photo .link-more:hover{color:var(--gold-soft)}

/* icon chip becomes frosted glass so the photograph reads through it */
.svc-card--photo .svc-card__icon{
  background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.svc-card--photo:hover .svc-card__icon,
.svc-card--photo:focus-within .svc-card__icon{
  background:linear-gradient(145deg,rgba(226,200,138,.36),rgba(192,153,63,.16));
  border-color:rgba(226,200,138,.62);
  color:#fff;
  box-shadow:0 16px 30px -14px rgba(6,20,13,.85);
}

/* one photograph per card */
.svc-card--kalari   .svc-card__bg{background-image:url("../images/service-kalari.jpg")}
.svc-card--healing  .svc-card__bg{background-image:url("../images/service-healing-centre.jpg")}
.svc-card--ashram   .svc-card__bg{background-image:url("../images/service-ashram-stay.jpg")}
.svc-card--yoga     .svc-card__bg{background-image:url("../images/service-yoga-meditation.jpg")}
.svc-card--pharmacy .svc-card__bg{background-image:url("../images/service-herbal-pharmacy.jpg")}
.svc-card--gallery  .svc-card__bg{background-image:url("../images/service-gallery-films.jpg")}

/* ==========================================================================
   11. WHY CHOOSE
   ========================================================================== */
.why-card{
  position:relative;height:100%;
  padding:clamp(1.7rem,2.2vw,2.2rem) clamp(1.5rem,2vw,2rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(226,200,138,.2);
  transition:transform .55s var(--ease-out),background-color .45s var(--ease),border-color .45s var(--ease);
  overflow:hidden;
}
.why-card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.09);
  border-color:rgba(226,200,138,.46);
}
.why-card__num{
  position:absolute;top:.6rem;right:1.2rem;
  font-family:var(--font-display);font-size:4.2rem;font-weight:600;
  color:rgba(226,200,138,.11);line-height:1;pointer-events:none;
  transition:color .5s var(--ease);
}
.why-card:hover .why-card__num{color:rgba(226,200,138,.2)}
.why-card__icon{
  width:62px;height:62px;display:grid;place-items:center;margin-bottom:1.35rem;
  border-radius:50%;font-size:1.5rem;
  background:rgba(226,200,138,.12);
  border:1px solid rgba(226,200,138,.3);
  color:var(--gold-soft);
  transition:transform .6s var(--ease-out),background-color .5s var(--ease),box-shadow .5s var(--ease);
}
.why-card__icon svg{width:28px;height:28px}
.why-card:hover .why-card__icon{
  transform:rotate(10deg) scale(1.12);
  background:rgba(226,200,138,.22);
  box-shadow:0 0 30px -6px rgba(226,200,138,.45);
}
.why-card h3{font-size:1.24rem;margin-bottom:.6rem;color:var(--cream)}
.why-card p{font-size:.94rem;color:rgba(236,244,239,.72);margin:0}

/* ==========================================================================
   12. TREATMENT CARDS (image)
   ========================================================================== */
.trt-card{
  position:relative;height:100%;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-xs);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.trt-card:hover,.trt-card:focus-within{transform:translateY(-10px);box-shadow:var(--sh-md)}

.trt-card__media{position:relative;overflow:hidden;aspect-ratio:16/11;flex:none}
.trt-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out),filter .6s var(--ease);
}
.trt-card:hover .trt-card__media img,.trt-card:focus-within .trt-card__media img{transform:scale(1.09)}
.trt-card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,46,30,.55),transparent 52%);
}
.trt-card__num{
  position:absolute;top:1rem;left:1rem;z-index:2;
  font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.1em;
  padding:.36rem .78rem;border-radius:var(--r-pill);
  background:rgba(251,247,239,.9);color:var(--deep);
}
.trt-card__ico{
  position:absolute;right:1rem;bottom:9px;z-index:3;
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  background:var(--cream);color:var(--herb);font-size:1.3rem;
  box-shadow:var(--sh-sm);
  transition:transform .6s var(--ease-out),background-color .5s var(--ease),color .5s var(--ease);
}
.trt-card__ico svg{width:24px;height:24px}
.trt-card:hover .trt-card__ico,.trt-card:focus-within .trt-card__ico{
  transform:rotate(-14deg) scale(1.12);
  background:var(--deep);color:var(--gold-soft);
}
.trt-card__body{padding:2rem clamp(1.4rem,2vw,1.8rem) clamp(1.5rem,2vw,1.9rem);display:flex;flex-direction:column;flex:1 1 auto}
.trt-card__body h3{margin-bottom:.65rem}
.trt-card__body p{font-size:.94rem;margin-bottom:1.35rem}
.trt-card__body .link-more{margin-top:auto;align-self:flex-start}

/* ==========================================================================
   13. WELLNESS / NATURE BAND
   ========================================================================== */
.wellness{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(110px,15vw,190px) 0;
  color:var(--cream);text-align:center;
}
.wellness__bg{position:absolute;inset:0;z-index:-2}
.wellness__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.wellness::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(15,46,30,.8),rgba(15,46,30,.5) 46%,rgba(15,46,30,.86)),
    radial-gradient(760px 480px at 50% 42%,rgba(192,153,63,.16),transparent 70%);
}
.wellness h2{color:var(--cream);max-width:19ch;margin-inline:auto}
.wellness .lead-text{color:rgba(236,244,239,.8);max-width:62ch;margin-inline:auto}
.wellness__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.3rem}

/* Floating botanicals over the band */
.wellness .float-ico{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
  color:var(--gold-soft);
  box-shadow:none;
}
.wellness .fi-1{top:14%;left:8%;right:auto;--s:64px}
.wellness .fi-2{top:24%;right:10%;--s:52px}
.wellness .fi-3{bottom:16%;left:16%;--s:48px}
.wellness .fi-4{bottom:22%;right:14%;left:auto;--s:58px}
.wellness .particle{background:radial-gradient(circle at 32% 32%,#fff,var(--gold-soft))}
.wellness .particle:nth-of-type(1){width:8px;height:8px;top:30%;left:30%;animation:driftUp 16s linear infinite}
.wellness .particle:nth-of-type(2){width:6px;height:6px;bottom:26%;right:32%;animation:driftUp 20s linear 3s infinite}
.wellness .particle:nth-of-type(3){width:10px;height:10px;top:56%;left:70%;animation:driftUp 18s linear 6s infinite}

/* ==========================================================================
   14. TESTIMONIALS
   ========================================================================== */
.tst-card{
  position:relative;height:100%;display:flex;flex-direction:column;
  padding:clamp(1.9rem,2.6vw,2.5rem);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.tst-card:hover{transform:translateY(-7px);box-shadow:var(--sh-md)}
.tst-card__quote{
  font-family:var(--font-display);font-size:2.6rem;line-height:1;
  color:var(--gold);opacity:.34;margin-bottom:.7rem;
}
.tst-card__stars{color:var(--gold);font-size:.82rem;letter-spacing:.14em;margin-bottom:1rem}
.tst-card blockquote{
  margin:0 0 1.6rem;font-size:1rem;line-height:1.8;color:var(--ink);
  font-weight:400;flex:1 1 auto;
}
.tst-card__person{display:flex;align-items:center;gap:.9rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.avatar{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.18rem;font-weight:600;letter-spacing:.02em;
  color:var(--cream);
  background:linear-gradient(140deg,var(--deep),var(--herb));
  box-shadow:0 8px 18px -10px rgba(15,46,30,.75);
}
.avatar--gold{background:linear-gradient(140deg,var(--earth),var(--gold))}
.avatar--sage{background:linear-gradient(140deg,var(--herb),var(--sage))}
.tst-card__name{font-family:var(--font-display);font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.25}
.tst-card__place{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}

/* Carousel chrome */
#testimonialCarousel .carousel-item{padding:.6rem .3rem 1.2rem}
.tst-controls{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.4rem}
.tst-btn{
  position:static;width:52px;height:52px;flex:none;opacity:1;
  display:grid;place-items:center;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--deep);font-size:1.05rem;
  box-shadow:var(--sh-xs);
  transition:background-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease-out),border-color .4s var(--ease);
}
.tst-btn:hover{background:var(--deep);color:var(--cream);border-color:var(--deep);transform:translateY(-3px)}
.tst-dots{display:flex;gap:.45rem;margin:0 .5rem}
.tst-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;border:0;
  background:rgba(15,46,30,.2);text-indent:-9999px;overflow:hidden;
  transition:width .45s var(--ease-out),background-color .4s var(--ease);
}
.tst-dots button.active{width:30px;border-radius:var(--r-pill);background:var(--herb)}

/* ==========================================================================
   15. FINAL CTA
   ========================================================================== */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(74px,9vw,120px) 0;
}
.cta__inner{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:clamp(var(--r-lg),4vw,var(--r-xl));
  padding:clamp(2.8rem,6vw,5.2rem) clamp(1.5rem,5vw,4.5rem);
  text-align:center;color:var(--cream);
  background:
    radial-gradient(900px 460px at 12% 8%,rgba(45,106,79,.85),transparent 62%),
    radial-gradient(760px 480px at 88% 96%,rgba(192,153,63,.42),transparent 62%),
    linear-gradient(140deg,var(--deep) 0%,#12351F 48%,var(--forest) 100%);
  box-shadow:var(--sh-lg);
}
.cta__inner h2{color:var(--cream);max-width:18ch;margin-inline:auto}
.cta__inner p{color:rgba(236,244,239,.8);max-width:62ch;margin-inline:auto}
.cta__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.3rem}

.cta__contacts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
  margin-top:2.8rem;padding-top:2.1rem;border-top:1px solid rgba(255,255,255,.14);
}
.contact-chip{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.6rem 1.15rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:rgba(236,244,239,.9);font-size:.86rem;
  transition:background-color .4s var(--ease),transform .4s var(--ease-out),border-color .4s var(--ease);
}
.contact-chip i{color:var(--gold-soft);font-size:.95rem}
.contact-chip:hover{background:rgba(255,255,255,.14);border-color:rgba(226,200,138,.4);color:#fff;transform:translateY(-2px)}

/* CTA decorations */
.cta__inner .float-ico{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  color:var(--gold-soft);box-shadow:none;
}
.cta__inner .fi-1{top:12%;left:6%;right:auto;--s:60px}
.cta__inner .fi-2{top:20%;right:7%;--s:46px}
.cta__inner .fi-3{bottom:14%;left:11%;--s:50px}
.cta__inner .fi-4{bottom:20%;right:9%;left:auto;--s:54px}
.cta__inner .ring{
  width:min(60vw,520px);aspect-ratio:1;top:50%;left:50%;
  transform:translate(-50%,-50%);border-color:rgba(226,200,138,.16);
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer{background:#101B14;color:rgba(236,244,239,.66);padding:clamp(60px,7vw,96px) 0 0;position:relative;overflow:hidden}
.footer-col-title{
  font-family:var(--font-body);font-size:.78rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream);margin-bottom:1.4rem;
}
.site-footer .brand-name{color:var(--cream)}
.site-footer .brand-sub{color:rgba(236,244,239,.45)}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.footer-list a{color:rgba(236,244,239,.66);font-size:.94rem;display:inline-flex;align-items:center;gap:.5rem;transition:color .3s var(--ease),transform .3s var(--ease-out)}
.footer-list a::before{
  content:"";width:0;height:1px;background:var(--gold);
  transition:width .35s var(--ease-out);
}
.footer-list a:hover{color:var(--gold-soft);transform:translateX(3px)}
.footer-list a:hover::before{width:12px}

.footer-contact{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.footer-contact li{display:flex;align-items:flex-start;gap:.7rem;font-size:.94rem}
.footer-contact i{color:var(--gold-soft);margin-top:.25rem;font-size:.95rem;flex:none}
.footer-contact a{color:rgba(236,244,239,.66)}
.footer-contact a:hover{color:var(--gold-soft)}

/* Newsletter */
.newsletter{
  margin-top:clamp(2.6rem,5vw,4rem);padding:clamp(1.7rem,3vw,2.5rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.newsletter h3{font-size:clamp(1.35rem,2.2vw,1.85rem);color:var(--cream);margin-bottom:.45rem}
.newsletter p{font-size:.9rem;color:rgba(236,244,239,.6);margin:0}
.newsletter .form-control{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:var(--cream);border-radius:var(--r-pill);padding:.95rem 1.35rem;
  font-family:var(--font-body);font-size:.94rem;box-shadow:none;
}
.newsletter .form-control::placeholder{color:rgba(236,244,239,.42)}
.newsletter .form-control:focus{
  background:rgba(255,255,255,.1);border-color:rgba(226,200,138,.5);
  color:var(--cream);box-shadow:0 0 0 3px rgba(226,200,138,.14);
}
.newsletter__note{font-size:.82rem;color:var(--gold-soft);margin-top:.85rem;min-height:1.3em}

.footer-bottom{
  margin-top:clamp(2.6rem,5vw,4rem);
  /* extra bottom room so the fixed back-to-top button never covers the social links */
  padding:1.7rem 0 5rem;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;justify-content:space-between;
  font-size:.86rem;
}
.social-row{display:flex;gap:.6rem}
.social-row a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);color:rgba(236,244,239,.7);font-size:1rem;
  transition:transform .45s var(--ease-out),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.social-row a:hover{
  transform:translateY(-4px) rotate(-6deg);
  background:var(--gold);border-color:var(--gold);color:#231705;
}

/* ==========================================================================
   17. BACK TO TOP
   ========================================================================== */
.to-top{
  position:fixed;right:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);
  z-index:1030;width:50px;height:50px;border:0;border-radius:50%;
  display:grid;place-items:center;font-size:1.1rem;
  background:var(--deep);color:var(--gold-soft);
  box-shadow:var(--sh-md);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);
  transition:opacity .45s var(--ease),transform .45s var(--ease-out),visibility .45s,background-color .35s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--herb)}

/* ==========================================================================
   18. PER-SECTION DECOR
   Geometry for the soft colour fields and rings that sit behind individual
   sections. Extracted from inline style attributes; declared after the
   .blob / .ring primitives in base.css so these values win.
   ========================================================================== */

/* Quote band inner measure */
.quote-band__inner{max-width:100%;}

/* Hero lead paragraph measure */
.hero__lead{max-width:52ch}

/* About */
.blob--about{
  width:520px;height:520px;top:-8%;left:-14%;
  background:radial-gradient(circle,rgba(116,169,141,.3),transparent 68%);
}

/* Services */
.blob--services{
  width:600px;height:600px;top:10%;right:-18%;
  background:radial-gradient(circle,rgba(226,200,138,.32),transparent 68%);
}

/* Why choose Ayurveda (dark band) */
.blob--why-a{
  width:640px;height:640px;top:-14%;left:-10%;
  background:radial-gradient(circle,rgba(45,106,79,.75),transparent 66%);
  opacity:.7;
}
.blob--why-b{
  width:520px;height:520px;bottom:-16%;right:-8%;
  background:radial-gradient(circle,rgba(192,153,63,.4),transparent 66%);
  opacity:.6;
}
.ring--why{
  width:min(70vw,620px);aspect-ratio:1;
  top:50%;left:50%;transform:translate(-50%,-50%);
  border-color:rgba(226,200,138,.12);
}

/* Treatments */
.blob--treatments{
  width:560px;height:560px;top:6%;left:-16%;
  background:radial-gradient(circle,rgba(169,201,182,.42),transparent 68%);
}

/* Footer intro copy */
.footer__intro{font-size:.94rem;max-width:38ch}


section#services {
    padding: 60px 0 130px 0;
}

/* Services lead: Read More / Read Less, phones only (toggled in js/main.js).
   Everywhere else the two parts run on as one paragraph and the toggle hides. */
.svc-lead__toggle{display:none}

@media (max-width:767.98px){
  .svc-lead.is-collapsible .svc-lead__gap{display:none}
  .svc-lead.is-collapsible .svc-lead__more{
    display:grid;grid-template-rows:0fr;opacity:0;
    transition:grid-template-rows .5s var(--ease-out),opacity .4s ease;
  }
  .svc-lead.is-collapsible .svc-lead__inner{display:block;overflow:hidden;min-height:0}
  .svc-lead.is-collapsible .svc-lead__text{display:block;padding-top:.75em}
  .svc-lead.is-collapsible.is-open .svc-lead__more{grid-template-rows:1fr;opacity:1}

  .svc-lead.is-collapsible .svc-lead__toggle{
    display:inline-flex;margin-top:.9rem;padding:0;
    background:none;border:0;cursor:pointer;
  }
  .svc-lead__toggle i,
  .svc-lead__toggle:hover i{transform:none}
  .svc-lead.is-open .svc-lead__toggle i{transform:rotate(180deg)}
  .svc-lead__toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
}

@media (max-width:767.98px) and (prefers-reduced-motion:reduce){
  .svc-lead.is-collapsible .svc-lead__more,
  .svc-lead__toggle i{transition:none}
}

/* About copy + Treatments intro: the same Read More / Read Less as the
   Services lead above, phones only (toggled in js/main.js). */
.read-more__toggle{display:none}

@media (max-width:767.98px){
  .read-more.is-collapsible .read-more__gap{display:none}
  .read-more.is-collapsible .read-more__more{
    display:grid;grid-template-rows:0fr;opacity:0;
    transition:grid-template-rows .5s var(--ease-out),opacity .4s ease;
  }
  .read-more.is-collapsible .read-more__inner{display:block;overflow:hidden;min-height:0}
  .read-more.is-collapsible .read-more__more--inline .read-more__text{display:block;padding-top:.75em}
  .read-more.is-collapsible.is-open .read-more__more{grid-template-rows:1fr;opacity:1}

  .read-more.is-collapsible .read-more__toggle{
    display:flex;width:fit-content;margin:.9rem auto 1.25rem;padding:0;
    background:none;border:0;cursor:pointer;
  }
  .read-more__toggle i,
  .read-more__toggle:hover i{transform:none}
  .read-more.is-open .read-more__toggle i{transform:rotate(180deg)}
  .read-more__toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
  /* Philosophy: the toggle is the last thing in the band, so no extra space below it */
  #philosophy .read-more__toggle{margin-bottom:0}
}

@media (max-width:767.98px) and (prefers-reduced-motion:reduce){
  .read-more.is-collapsible .read-more__more,
  .read-more__toggle i{transition:none}
}