/* ===== HealSpa — shared styles ===== */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:'Vazirmatn',sans-serif;
  background:#efe8db;
  color:#2c3a30;
  overflow-x:hidden;
}
img { display:block; }
a { color:inherit; }

/* ===== INLINE ICONS ===== */
.hs-ic { width:1.15em; height:1.15em; display:inline-block; vertical-align:-.18em; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hs-ic--fill { fill:currentColor; stroke:none; }

/* ===== NAV ===== */
/* row-reverse: logo is first in the DOM but renders on the LEFT,
   menu + burger on the RIGHT (client brief). */
.nav {
  position:relative; display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between;
  gap:18px; padding:16px 26px; border-radius:24px;
  /* glass (default, over hero images) */
  background:rgba(255,253,248,.14);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:none;
  backdrop-filter:blur(10px);
}
.nav--light {
  background:#fffdf8;
  border:1px solid #ece4d6;
  box-shadow:0 6px 22px rgba(44,58,48,.07);
  backdrop-filter:none;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
/* Brand wordmark next to the logo mark; inherits the nav variant's colour. */
.nav-logo-text { font-size:19px; font-weight:700; white-space:nowrap; color:#fff; }
.nav--light .nav-logo-text { color:#2c4233; }
/* The logo is an <img>, so page CSS can't recolour its paths. The glass nav
   sits on dark photos, so force the mark to white there with a filter —
   this keeps working for whatever file is dropped in at assets/logo.png?v=f60698a5. */
.nav-logo-img { width:52px; height:52px; display:block; }
.nav:not(.nav--light) .nav-logo-img { filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.45)); }

.nav-menu { display:flex; align-items:center; gap:26px; }
.nav-menu a { font-size:15px; font-weight:500; text-decoration:none; padding-bottom:3px; white-space:nowrap;
  color:rgba(255,255,255,.92); border-bottom:2px solid transparent; }
.nav--light .nav-menu a { color:#4a5448; }
.nav-menu a.active { font-weight:700; color:#fff; border-bottom-color:#fff; }
.nav--light .nav-menu a.active { color:#2c4233; border-bottom-color:#3a5443; }

.nav-burger { display:none; cursor:pointer; width:44px; height:44px; border-radius:14px;
  background:transparent; border:1px solid rgba(255,255,255,.2);
  align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.nav--light .nav-burger { border-color:#ece4d6; }
.nav-burger span { width:18px; height:2px; border-radius:2px; display:block; background:#fff; }
.nav--light .nav-burger span { background:#2c4233; }

.nav-mobile { display:none; position:absolute; top:calc(100% + 10px); right:0; left:0; z-index:50;
  background:#fffdf8; border:1px solid #e8e0d2; border-radius:20px;
  box-shadow:0 18px 40px rgba(44,58,48,.16); padding:14px; flex-direction:column; gap:4px; }
.nav-mobile.open { display:flex; }
.nav-mobile a { font-size:16px; font-weight:500; text-decoration:none; color:#4a5448;
  padding:13px 16px; border-radius:12px; }
.nav-mobile a.active { font-weight:700; color:#2c4233; background:#eef2e9; }

/* ===== FOOTER ===== */
.footer { background:#2c4233; color:#e7ede6; border-radius:36px 36px 0 0; padding:64px 7vw 30px; margin-top:10px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; max-width:1280px; margin:0 auto; }
.footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:10px; text-decoration:none; }
.footer-logo-img { width:44px; height:44px; display:block; filter:brightness(0) invert(1); }
.footer-logo-text { display:flex; flex-direction:column; font-size:21px; font-weight:700; color:#fff; line-height:1.3; }
.footer-logo-fa { font-size:15px; font-weight:500; color:#aebfb1; }
.footer-domain { display:inline-block; font-size:14px; color:#9fc0a6; text-decoration:none; margin-bottom:16px; }
.footer-about { font-size:15px; line-height:2; color:#aebfb1; margin:0; max-width:300px; }

.footer-sub { font-size:13px; font-weight:700; color:#8fa894; letter-spacing:.03em; }
.footer-socials { display:flex; flex-direction:column; gap:12px; }
.footer-social { display:flex; align-items:center; gap:11px; text-decoration:none; color:#c3d1c6; }
.footer-social:hover { color:#fff; }
.footer-social-ic { width:38px; height:38px; flex-shrink:0; border-radius:12px; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; font-size:17px; }
.footer-social:hover .footer-social-ic { background:rgba(255,255,255,.18); }
.footer-social-label { display:block; font-size:14.5px; font-weight:700; color:#fff; }
/* dir="ltr" in the markup keeps "@handle" from rendering as "handle@" in RTL */
.footer-social-handle { display:block; font-size:13px; color:#94a797; text-align:right; }
.footer-h { font-size:14px; font-weight:700; color:#fff; letter-spacing:.04em; margin-bottom:20px; }
.footer-col { display:flex; flex-direction:column; gap:13px; font-size:15px; }
.footer-col a { color:#c3d1c6; text-decoration:none; }
.footer-col a:hover { color:#fff; }
.footer-contact { display:flex; flex-direction:column; gap:6px; font-size:15px; color:#c3d1c6; }
.footer-contact .footer-sub { margin-top:10px; }
.footer-contact .footer-sub:first-child { margin-top:0; }
.footer-phone { display:inline-flex; align-items:center; gap:8px; color:#fff !important;
  text-decoration:none; font-weight:700; font-size:17px; margin-top:2px; }
.footer-bottom { max-width:1280px; margin:44px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; font-size:13.5px; color:#94a797; }
.footer-bottom a { color:#94a797; text-decoration:none; }

/* ===== STICKY CALL — the only persistent booking CTA on the site =====
   Compact pill on desktop, full-width bar on mobile (see 880px block). */
.hs-sticky-call { display:inline-flex; position:fixed; bottom:22px; left:22px; right:auto; z-index:200;
  align-items:center; justify-content:center; gap:9px; background:#3a5443; color:#fff; padding:14px 26px;
  border-radius:30px; font-size:16px; font-weight:700; text-decoration:none; box-shadow:0 10px 30px rgba(28,40,32,.35); }

/* ===== ARTICLE (post page) ===== */
.hs-article p { font-size:17px; line-height:2.15; color:#3f4a3c; margin:0 0 22px; }
.hs-article h2 { font-size:26px; font-weight:700; color:#2c4233; margin:40px 0 16px; }
.hs-article ul { padding:0 22px 0 0; margin:0 0 22px; }
.hs-article li { font-size:17px; line-height:2.1; color:#3f4a3c; margin-bottom:10px; }

/* ===== BLOG category filter ===== */
.hs-cat { cursor:pointer; font-family:'Vazirmatn',sans-serif; font-size:14.5px; font-weight:700;
  padding:11px 22px; border-radius:24px; border:1px solid #dcd3c2; background:#fffdf8; color:#43503f; }
.hs-cat.active { border-color:#3a5443; background:#3a5443; color:#fff; }

/* ===== FAQ / details (service page) ===== */
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }

/* ===== HOME · quiz cards ===== */
.hs-quiz-card { cursor:pointer; font-family:'Vazirmatn',sans-serif; text-align:right;
  display:flex; flex-direction:column; gap:8px; padding:26px 28px; border-radius:24px;
  border:1px solid #e2dbcb; background:#fffdf8; box-shadow:0 6px 22px rgba(44,58,48,.06);
  transition:border-color .18s, transform .18s, box-shadow .18s; }
.hs-quiz-card:hover { border-color:#3a5443; transform:translateY(-3px); box-shadow:0 12px 28px rgba(44,58,48,.12); }
.hs-quiz-card.is-picked { border-color:#3a5443; background:#eef2e9; }
.hs-quiz-num { font-size:13px; font-weight:700; color:#8a8064; }
.hs-quiz-title { font-size:19px; font-weight:700; color:#2c4233; line-height:1.6; }
.hs-quiz-sub { font-size:14.5px; line-height:1.95; color:#6b7d6f; }
/* Inset (not full-bleed) so the .is-picked background still frames the photo. */
/* Photos are portrait 1024×1280 (4:5); keep that ratio instead of a fixed height.
   No max-height: capping it would re-crop the photo on wide columns. */
.hs-quiz-img { width:100%; aspect-ratio:4/5; height:auto;
  border-radius:16px; object-fit:cover; object-position:center; margin-bottom:4px; }
/* Visual CTA only — the whole card is the <button>, so this stays a <span>. */
/* margin-top:auto pins it to the card floor so CTAs line up across a row
   whose titles/subs differ in height. */
.hs-quiz-cta { align-self:flex-start; margin-top:auto; padding:9px 18px; border-radius:22px;
  background:#eef2e9; color:#3a5443; font-size:13.5px; font-weight:700; line-height:1;
  transition:background .18s, color .18s; }
.hs-quiz-card:hover .hs-quiz-cta,
.hs-quiz-card.is-picked .hs-quiz-cta { background:#3a5443; color:#fff; }

/* ===== HOME · three lenses ===== */
.hs-lens-img { width:100%; height:160px; border-radius:20px; object-fit:cover; }

/* ===== HOME · wide section band (journey, team) ===== */
.hs-band { width:100%; height:280px; object-fit:cover; border-radius:28px; margin-bottom:36px; }
.hs-band--short { height:220px; }

/* ===== HOME · journey steps ===== */
.hs-step { position:relative; overflow:hidden; background:#fffdf8; border-radius:24px; padding:32px;
  box-shadow:0 6px 22px rgba(44,58,48,.06); }
.hs-step-num { position:absolute; top:6px; left:18px; font-size:74px; font-weight:800;
  line-height:1; color:#3a5443; opacity:.09; pointer-events:none; }
.hs-step-h { position:relative; font-size:20px; font-weight:700; color:#2c4233; margin:0 0 10px; }
.hs-step-p { position:relative; font-size:15px; line-height:2; color:#6b7d6f; margin:0; }

/* ===== HOME · health path cards ===== */
/* fixed 3×2 grid (6 cards); drops to 2 cols at 880px and 1 col at 560px */
/* The padding lives on .hs-path-body, not the card, so the photo header can
   bleed to the edges — same structure as the service cards on services.html. */
.hs-path { display:flex; flex-direction:column; text-decoration:none; background:#fffdf8; border-radius:24px;
  padding:0; overflow:hidden; border:1px solid transparent; box-shadow:0 6px 22px rgba(44,58,48,.06);
  transition:border-color .18s, transform .18s, box-shadow .18s; }
.hs-path:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(44,58,48,.12); }
.hs-path.is-match { border-color:#3a5443; box-shadow:0 12px 30px rgba(58,84,67,.2); }
.hs-path-media { position:relative; display:block; }
.hs-path-media img { width:100%; height:190px; object-fit:cover; }
.hs-path-media::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(28,40,32,.72)); }
.hs-path-body { padding:32px; display:flex; flex-direction:column; flex:1; }
/* inset-inline-start keeps the badge on the right in RTL */
.hs-path-ic { position:absolute; z-index:1; bottom:16px; inset-inline-start:20px;
  width:60px; height:60px; border-radius:20px; background:rgba(255,253,248,.92); color:#3a5443;
  display:flex; align-items:center; justify-content:center; }
.hs-path-ic .hs-ic { width:28px; height:28px; }
.hs-path-h { font-size:21px; font-weight:700; color:#2c4233; margin:0 0 12px; }
.hs-path-p { font-size:15px; line-height:2; color:#6b7d6f; margin:0 0 24px; flex:1; }
.hs-path-cta { align-self:flex-start; color:#3a5443; font-weight:700; font-size:15px;
  border-bottom:2px solid #3a5443; padding-bottom:3px; }

/* ===== HOME · FAQ accordion ===== */
.hs-faq { background:#fffdf8; border-radius:20px; box-shadow:0 6px 22px rgba(44,58,48,.06); }
.hs-faq > summary { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; font-size:17px; font-weight:700; color:#2c4233; line-height:1.7; }
.hs-faq > p { font-size:15.5px; line-height:2.1; color:#6b7d6f; margin:0; padding:0 26px 24px; }
.hs-faq-sign { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:#eef2e9; color:#3a5443;
  display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700; }
/* the "+" glyph lives in the markup; rotating it 45° turns it into "×" when open */
.hs-faq-sign { transition:transform .18s, background .18s, color .18s; }
.hs-faq[open] > summary .hs-faq-sign { background:#3a5443; color:#fff; transform:rotate(45deg); }
/* side photo column — sticks inside its (taller) grid cell while the
   accordion scrolls past. Hidden under 880px, where .hs-split goes 1fr. */
.hs-faq-media { position:sticky; top:24px; width:100%; height:480px;
  object-fit:cover; border-radius:28px; }

/* ===== HOME · experiences slider =====
   Cards are title-less portrait video thumbnails — the whole card is the
   click/tap target (data-video-src), no caption below it. */
.hs-exp-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 6vw 24px; -webkit-overflow-scrolling:touch; }
.hs-exp-card { position:relative; flex:0 0 240px; scroll-snap-align:start;
  border-radius:22px; overflow:hidden; cursor:pointer; box-shadow:0 6px 22px rgba(44,58,48,.06); }
.hs-exp-card img { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; }
.hs-exp-play { position:absolute; inset-block-end:14px; inset-inline-end:14px;
  width:42px; height:42px; border-radius:50%; background:#3a5443; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; }
.hs-exp-card--closing { flex:0 0 300px; background:#2c4233; display:flex;
  align-items:center; justify-content:center; padding:28px; cursor:default; }
.hs-exp-card--closing p { font-size:17px; line-height:2.1; font-weight:700; color:#fff; margin:0; }

/* ===== Video modal (Plyr) ===== */
.hs-video-modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:5vh 4vw; }
.hs-video-modal.is-open { display:flex; }
.hs-video-modal-backdrop { position:absolute; inset:0; background:rgba(20,26,22,.82); }
.hs-video-modal-box { position:relative; width:100%; max-width:520px; }
.hs-video-modal-video { width:100%; border-radius:16px; display:block; }
.hs-video-modal-close { position:absolute; top:-40px; inset-inline-end:0; width:34px; height:34px;
  border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:20px; line-height:1;
  cursor:pointer; }

/* ===== HOME · gallery tiles ===== */
.hs-gallery-tile { border-radius:20px; overflow:hidden; }
.hs-gallery-tile img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.hs-gallery-tile:hover img { transform:scale(1.08); }

/* ===== HOME · contact & booking cards (on dark panel) ===== */
.hs-contact-card { display:flex; flex-direction:column; text-decoration:none; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:24px; padding:30px; transition:background .18s, transform .18s; }
.hs-contact-card:hover { background:rgba(255,255,255,.13); transform:translateY(-3px); }
.hs-contact-ic { width:54px; height:54px; border-radius:18px; background:rgba(255,255,255,.13);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.hs-contact-ic .hs-ic { width:26px; height:26px; }
.hs-contact-card h3 { font-size:19px; font-weight:700; margin:0 0 10px; }
.hs-contact-card p { font-size:14.5px; line-height:1.95; color:#c3d1c6; margin:0 0 22px; flex:1; }
.hs-contact-cta { font-size:14.5px; font-weight:700; color:#fff;
  border-bottom:2px solid rgba(255,255,255,.6); padding-bottom:3px; align-self:flex-start; }

/* ===== SCROLL REVEAL =====
   .hs-rv is added by main.js and removed again once the element has faded in,
   so a page without JS (or with prefers-reduced-motion) renders untouched and
   the per-card hover transitions are never left overridden. */
.hs-rv { opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.hs-rv.is-in { opacity:1; transform:none; }

/* ===== SCROLL CUE =====
   Small bouncing chevron closing each home section and linking to the next.
   It is an <a href="#next">, so it still works without JS. */
.hs-scroll-cue { display:flex; justify-content:center; padding:34px 0 0; }
.hs-scroll-cue > a { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; color:#6f8a72;
  border:1px solid rgba(111,138,114,.34); background:rgba(255,253,248,.6);
  animation:hs-cue-bob 2.4s ease-in-out infinite;
  transition:color .18s, border-color .18s, background .18s; }
.hs-scroll-cue > a:hover { color:#2c4233; border-color:#3a5443; background:#fffdf8; }
.hs-scroll-cue .hs-ic { width:20px; height:20px; }
/* on the dark hero and the dark contact panel the light chrome would vanish */
.hs-scroll-cue--light > a { color:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); }
.hs-scroll-cue--light > a:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.22); }
@keyframes hs-cue-bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .hs-scroll-cue > a { animation:none; } }

/* ===== RESPONSIVE ===== */
@media (max-width: 880px){
  .nav-menu { display:none; }
  .nav-burger { display:flex; }
  .hs-sticky-call { display:flex; left:16px; right:16px; bottom:16px; padding:16px; border-radius:18px; font-size:17px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .hs-hero-h1 { font-size:30px !important; line-height:1.7 !important; }
  .hs-exp-card { flex-basis:270px; }
  .hs-exp-card--closing { flex-basis:290px; }
  .hs-page-h1 { font-size:34px !important; }
  .hs-post-h1 { font-size:30px !important; }
  .hs-split { grid-template-columns:1fr !important; }
  .hs-feat { grid-template-columns:1fr !important; }
  .hs-detail-grid { grid-template-columns:1fr !important; }
  .hs-paths-grid { grid-template-columns:1fr 1fr !important; }
  /* auto-fit minmax(330px) overflows narrow phones below 560px — cap it here too. */
  .hs-step-grid { grid-template-columns:1fr 1fr !important; }
  /* auto-fit minmax(330px) would collapse to one column here — force two. */
  .hs-quiz-grid { grid-template-columns:1fr 1fr !important; gap:14px !important; }
  .hs-phone-num { font-size:42px !important; }
  .hs-band { height:200px; }
  .hs-band--short { height:170px; }
  .hs-faq-media { display:none; }
}
@media (max-width: 560px){
  .footer-grid { grid-template-columns:1fr; }
  .hs-quiz-card, .hs-step, .hs-contact-card { padding:24px; }
  /* two columns stay, but the card has to shrink to fit them */
  .hs-quiz-grid { gap:10px !important; }
  .hs-quiz-card { padding:14px 14px 18px; gap:6px; border-radius:18px; }
  .hs-quiz-img { border-radius:12px; }
  .hs-quiz-title { font-size:16px; }
  .hs-quiz-sub { font-size:13px; line-height:1.85; }
  .hs-quiz-cta { padding:8px 14px; font-size:12.5px; }
  .hs-path-body { padding:24px; }
  .hs-paths-grid { grid-template-columns:1fr !important; }
  .hs-step-grid { grid-template-columns:1fr !important; }
  .hs-step-num { font-size:58px; }
  .hs-faq > summary { padding:18px 20px; font-size:16px; }
  .hs-faq > p { padding:0 20px 20px; }
  .hs-exp-card { flex-basis:calc(100vw - 22vw); }
  .hs-exp-card--closing { flex-basis:calc(100vw - 22vw); }
}