/* Conscious Calm Presence — site stylesheet */

:root{
  --cream:#F8F5EC;
  --cream-alt:#FBF9F3;
  --dark-green:#2F3B24;
  --olive:#3F4A2E;
  --olive-dark:#313A24;
  --rose:#A8637A;
  --sage:#8DA27E;
  --text-dark:#2c2c2c;
  --text-muted:#6b6b62;
  --nav-height:76px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Jost','Poppins',Arial,sans-serif;
  color:var(--text-dark);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.btn,.nav-links a{
  font-family:'Playfair Display',Georgia,serif;
}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- Sticky Nav ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-height);
  padding:0 clamp(16px,4vw,48px);
  background:rgba(248,245,236,0.98);
  box-shadow:0 1px 0 rgba(47,59,36,0.08);
  transition:box-shadow .2s ease;
}
.site-nav.scrolled{box-shadow:0 4px 18px rgba(47,59,36,0.12);}

.brand{
  display:flex;align-items:center;gap:10px;
  font-size:1.15rem;letter-spacing:.03em;
  color:var(--dark-green);font-weight:600;
  white-space:nowrap;
}
.brand svg{flex:0 0 auto;}
.brand-text{line-height:1.05;}
.brand-text small{
  display:block;font-family:'Jost',Arial,sans-serif;
  font-size:.55rem;letter-spacing:.28em;color:var(--sage);
  text-transform:uppercase;margin-top:2px;
}

.nav-links{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
  list-style:none;margin:0;padding:0;
}
.nav-links a{
  font-size:.98rem;color:var(--dark-green);
  padding:6px 2px;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--rose);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);}

.nav-cta{
  display:inline-block;margin-left:18px;padding:12px 34px;
  background:var(--olive);color:var(--cream)!important;
  border-radius:999px;font-size:.85rem;letter-spacing:.04em;
  white-space:nowrap;transition:background .2s ease,transform .2s ease;
}
.nav-cta:hover{background:var(--olive-dark);transform:translateY(-1px);}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
}
.nav-toggle span{
  display:block;width:26px;height:2px;background:var(--dark-green);
  margin:5px 0;transition:transform .25s ease,opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1080px){
  .nav-links{
    position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;
    background:var(--cream);flex-direction:column;justify-content:flex-start;
    padding:32px 24px;gap:22px;transform:translateX(100%);
    transition:transform .28s ease;overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:1.25rem;}
  .nav-cta{margin-left:0;align-self:flex-start;}
  .nav-toggle{display:block;}
}

/* ---------- Sections ---------- */
main{padding-top:var(--nav-height);}
section{position:relative;}

.section-media{
  width:100%;overflow:hidden;display:flex;justify-content:center;
}
.section-media img{width:100%;object-fit:cover;}

/* Poster-style sections: keep native crispness, center on wide screens */
.section-poster{background:var(--cream-alt);}
.section-poster .section-media{padding:0;}
.section-poster img{
  max-width:1024px;object-fit:contain;background:var(--cream-alt);
}

/* ---------- Yoga section — real HTML text + icon cards, no baked image ---------- */
.section-content{background:var(--cream-alt);padding:clamp(56px,8vw,88px) clamp(20px,6vw,40px) clamp(40px,6vw,64px);}
.yoga-wrap{max-width:1120px;margin:0 auto;}
.yoga-hero{text-align:center;}
.yoga-hero h2{
  margin:0;color:var(--dark-green);
  font:600 clamp(2.6rem,8vw,4.6rem)/.95 'Playfair Display',Georgia,serif;
}
.yoga-tag{
  color:var(--sage);margin:22px 0 10px;
  font:500 clamp(1.25rem,3vw,1.7rem)/1.2 'Playfair Display',Georgia,serif;
}
.yoga-rule{width:70px;height:3px;background:var(--rose);margin:18px auto;}
.yoga-intro{
  max-width:680px;margin:0 auto 34px;font-size:1.15rem;line-height:1.6;
  color:var(--text-dark);
}
.yoga-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px;
}
.yoga-card{
  background:rgba(255,255,255,.55);border-radius:14px;
  padding:clamp(26px,3.5vw,36px) clamp(20px,3vw,30px);text-align:center;
}
.yoga-card .yoga-icon{
  font-size:2.6rem;color:var(--sage);height:56px;line-height:56px;
}
.yoga-card:nth-child(even) .yoga-icon{color:var(--rose);}
.yoga-card h3{
  font:400 1.55rem 'Playfair Display',Georgia,serif;color:var(--dark-green);
  margin:6px 0 0;letter-spacing:.03em;
}
.yoga-card-rule{width:56px;height:2px;background:var(--rose);margin:16px auto;}
.yoga-card p{font-size:1.02rem;line-height:1.5;max-width:360px;margin:0 auto;color:var(--text-muted);}

.yoga-cta-wrap{text-align:center;margin:36px 0 8px;}
.yoga-cta{
  display:inline-flex;align-items:center;gap:16px;
  background:var(--sage);color:#fff!important;
  padding:16px 38px;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;
  border-radius:999px;transition:background .2s ease,transform .2s ease;
}
.yoga-cta:hover{background:var(--olive-dark);transform:translateY(-1px);}

.yoga-footer-line{
  text-align:center;margin-top:26px;color:var(--dark-green);
  font:italic 500 1.4rem 'Playfair Display',Georgia,serif;
}

@media (max-width:640px){
  .yoga-grid{grid-template-columns:1fr;}
  .yoga-card{min-height:0;}
}

/* ---------- Meditation section — real HTML text + icon cards, no baked image ---------- */
.med-wrap{max-width:1120px;margin:0 auto;}
.med-hero{text-align:center;}
.med-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:28px;
  color:var(--sage);letter-spacing:.4em;font-size:.85rem;
  text-transform:uppercase;font-family:'Jost',Arial,sans-serif;
}
.med-eyebrow::before,.med-eyebrow::after{content:"";width:60px;height:1px;background:var(--sage);}
.med-hero h2{
  margin:26px auto 0;color:var(--dark-green);max-width:820px;
  font:500 clamp(2.4rem,7vw,4.6rem)/1 'Playfair Display',Georgia,serif;
}
.med-rule{width:70px;height:1px;background:var(--sage);margin:24px auto;}
.med-tagline{
  color:var(--sage);letter-spacing:.32em;font-size:.95rem;
  text-transform:uppercase;margin-bottom:30px;font-family:'Jost',Arial,sans-serif;
}
.med-intro{
  max-width:780px;margin:0 auto 40px;font-size:1.15rem;line-height:1.6;
  color:var(--text-dark);
}
.med-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;
}
.med-benefit{padding:0 8px;}
.med-icon-wrap{
  width:104px;height:104px;border-radius:50%;background:rgba(141,162,126,.12);
  display:grid;place-items:center;margin:0 auto 18px;
}
.med-icon{width:60px;height:60px;color:var(--dark-green);}
.med-benefit h3{
  font-size:1rem;line-height:1.35;letter-spacing:.18em;font-weight:500;
  color:var(--dark-green);min-height:40px;margin:0;
  text-transform:uppercase;font-family:'Jost',Arial,sans-serif;
}
.med-mini-rule{width:48px;height:1px;background:var(--sage);margin:16px auto;}
.med-benefit p{font-size:1rem;line-height:1.5;margin:0 auto;max-width:280px;color:var(--text-muted);}

.med-cta-wrap{text-align:center;margin:42px 0 32px;}
.med-cta{
  display:inline-flex;align-items:center;gap:16px;
  background:var(--sage);color:#fff!important;
  padding:16px 38px;text-transform:uppercase;letter-spacing:.16em;font-size:.9rem;
  border-radius:999px;transition:background .2s ease,transform .2s ease;
}
.med-cta:hover{background:var(--olive-dark);transform:translateY(-1px);}

.med-closing{
  text-align:center;color:var(--dark-green);
  font:italic 500 1.4rem 'Playfair Display',Georgia,serif;margin:0;
}

@media (max-width:760px){
  .med-eyebrow{gap:14px;font-size:.72rem;}
  .med-eyebrow::before,.med-eyebrow::after{width:32px;}
  .med-tagline{letter-spacing:.22em;font-size:.78rem;}
  .med-grid{grid-template-columns:1fr;gap:34px;}
  .med-benefit h3{min-height:0;}
}

/* ---------- Full-bleed photo bands ----------
   #hero is the very first thing on the page, so nothing can ever compete
   with it — it uses a truly fixed (position:fixed) background layer: the
   picture is physically pinned to the viewport, no runway math needed.

   Every OTHER .section-photo (yoga-collage-class, group-photo, sangha)
   uses a scoped position:sticky "frame" instead. We hit a real bug with a
   naive `.section-photo{position:sticky}` applied straight to the
   <section>: every one of those sections shared <main> (which spans the
   entire page) as its sticky containing block, so a photo could stay
   pinned for nearly the whole page and bleed through any later section
   whose own box happened to be shorter than the viewport (this is what
   caused the group-photo image to peek through in a thin band between
   About and the "Come into stillness" photo). Wrapping the sticky
   element in a .photo-sticky-frame whose immediate parent (the
   <section>) is given the SAME fixed height gives the frame a locally
   scoped containing block with zero extra runway — it sticks and
   un-sticks within its own section only, so it's fully, reliably covered
   by whatever comes next. (We also tried making every photo section
   position:fixed like hero — that failed differently: fixed elements
   don't care about scroll position at all, so with several of them on
   the page simultaneously the last one in the DOM permanently covered
   everything, even before any scrolling happened. Fixed only works for a
   single, first-in-document background layer like hero.) ---------- */
.section-photo{
  position:relative;
  height:calc(100vh - var(--nav-height));
  overflow:hidden;
}
#hero.section-photo{
  height:100vh;
}
.hero-fixed-bg{
  position:fixed;
  top:0;left:0;
  width:100%;height:100vh;
  z-index:0;
}
@media (prefers-reduced-motion:reduce){
  .hero-fixed-bg{position:relative;height:100vh;}
}
#hero .section-media{width:100%;height:100%;}
#hero .section-media img{width:100%;height:100%;object-fit:cover;}

.photo-sticky-frame{
  position:sticky;
  top:var(--nav-height);
  width:100%;height:calc(100vh - var(--nav-height));
  overflow:hidden;
  z-index:0;
}
.photo-sticky-frame .section-media{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
}
.photo-sticky-frame .section-media img{
  width:100%;height:100%;object-fit:cover;
}
@media (prefers-reduced-motion:reduce){
  .photo-sticky-frame{position:relative;}
}

/* ---------- Hero overlay text + CTA ---------- */
.hero-text-wrap{
  position:absolute;left:0;right:0;top:7%;
  display:flex;justify-content:center;padding:0 24px;
  pointer-events:none;
}
.hero-title{
  margin:0;text-align:center;color:var(--dark-green);
  font-size:clamp(1.9rem,5.5vw,3.6rem);font-weight:600;
  letter-spacing:.01em;line-height:1.15;
  text-shadow:0 2px 18px rgba(255,255,255,.55),0 1px 3px rgba(255,255,255,.4);
}
.hero-cta-wrap{
  position:absolute;left:0;right:0;bottom:16%;
  display:flex;justify-content:center;
}
.hero-cta{
  padding:14px 30px;background:rgba(47,59,36,0.88);color:#fff;
  border-radius:999px;font-size:.95rem;letter-spacing:.05em;
  box-shadow:0 6px 22px rgba(0,0,0,0.25);
  transition:background .2s ease,transform .2s ease;
}
.hero-cta:hover{background:var(--rose);transform:translateY(-2px);}

/* ---------- Sangha overlay text (real HTML, sits inside .photo-fixed-bg
   alongside the image so it stays perfectly pinned to it) ---------- */
.sangha-text-overlay{
  position:absolute;left:0;right:0;top:12%;
  display:flex;flex-direction:column;align-items:center;
  padding:0 24px;
}
.sangha-glyph-rule{
  display:flex;align-items:center;gap:18px;margin-bottom:18px;
}
.sangha-line{width:70px;height:1px;background:var(--sage);display:block;}
.sangha-lotus{width:26px;height:26px;color:var(--dark-green);}
.sangha-title{
  margin:0;text-align:center;color:var(--dark-green);
  font:500 clamp(1.8rem,5vw,3.2rem)/1.1 'Playfair Display',Georgia,serif;
  text-shadow:0 2px 18px rgba(255,255,255,.5),0 1px 3px rgba(255,255,255,.4);
}

/* ---------- Sangha detail section — real HTML text, matches yoga/meditation pattern ---------- */
#sangha-detail{background:var(--cream-alt);}
.sd-wrap{max-width:900px;margin:0 auto;text-align:center;}
.sd-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:16px;
  text-transform:uppercase;letter-spacing:.3em;font-size:.78rem;
  color:var(--dark-green);margin-bottom:18px;
}
.sd-eyebrow span{width:44px;height:1px;background:var(--rose);display:block;}
.sd-hero h2{
  margin:0 auto 22px;max-width:760px;color:var(--dark-green);
  font:500 clamp(1.9rem,4.8vw,3.1rem)/1.2 'Playfair Display',Georgia,serif;
}
.sd-rule{width:70px;height:1px;background:var(--sage);margin:0 auto 26px;}
.sd-copy{max-width:700px;margin:0 auto;font-size:1.1rem;line-height:1.6;color:var(--text-dark);}
.sd-copy p{margin:0 0 16px;}
.sd-copy p:last-child{margin-bottom:0;}

.sd-values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  max-width:560px;margin:38px auto 30px;
}
.sd-circle{
  width:88px;height:88px;border:2px solid var(--sage);border-radius:50%;
  display:grid;place-items:center;margin:0 auto;color:var(--sage);
}
.sd-circle svg{width:52px;height:52px;}
.sd-value-rose .sd-circle{border-color:var(--rose);color:var(--rose);}
.sd-label{
  margin-top:12px;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dark-green);
}
.sd-value-rose .sd-label{color:var(--rose);}

.sd-details{
  font:1.3rem 'Playfair Display',Georgia,serif;color:var(--dark-green);
  margin:10px 0 28px;
}
.sd-cta-wrap{margin:0 0 30px;}
.sd-cta{
  display:inline-flex;align-items:center;gap:16px;padding:16px 40px;
  background:var(--olive);color:var(--cream)!important;border-radius:999px;
  text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;
  transition:background .2s ease,transform .2s ease;
}
.sd-cta:hover{background:var(--olive-dark);transform:translateY(-1px);}
.sd-closing{
  font:italic 1.5rem 'Playfair Display',Georgia,serif;color:var(--sage);margin:0;
}

@media (max-width:640px){
  .sd-values{grid-template-columns:1fr;gap:26px;max-width:220px;}
}

/* ---------- Scroll-stacking layers (jesskahnyoga.com-style): only the
   full-bleed PHOTO bands (.section-photo — hero, yoga-collage-class,
   group-photo, sangha) pin under the nav; the text sections that follow
   each one stay in normal flow and simply scroll up over the pinned
   photo as the user continues scrolling, then unpin it once they've
   fully passed. Text sections must NOT be sticky themselves — a short
   content section sticking immediately would let the next photo start
   covering it before it has even scrolled into view, cutting content
   off (that was the bug with making every section sticky). */
.section-photo{
  position:sticky;
  top:var(--nav-height);
}
@media (prefers-reduced-motion:reduce){
  .section-photo{position:relative;}
}

/* ---------- About section — real HTML text + photo, two-column layout ---------- */
#about.about-susan{
  background:var(--cream-alt);
  display:grid;grid-template-columns:minmax(320px,36%) 1fr;
  min-height:640px;overflow:hidden;
}
.about-photo{position:relative;min-height:640px;overflow:hidden;}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center center;}
.about-content{position:relative;display:flex;align-items:center;padding:56px clamp(32px,5vw,80px);}
.about-inner{width:100%;max-width:720px;}
.about-eyebrow{
  display:flex;align-items:center;gap:22px;
  text-transform:uppercase;letter-spacing:.28em;font-size:.82rem;
  color:var(--sage);margin-bottom:30px;
}
.about-eyebrow span{width:60px;height:1px;background:var(--rose);display:block;}
#about h2{
  color:var(--dark-green);
  font:500 clamp(1.9rem,3.4vw,3rem)/1.15 'Playfair Display',Georgia,serif;
  margin:0 0 30px;letter-spacing:-.01em;
}
.about-copy{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.6;color:var(--text-dark);}
.about-copy p{margin:0 0 20px;}
.about-copy p:last-child{margin-bottom:0;}
.about-cta{
  display:inline-flex;align-items:center;gap:18px;margin-top:32px;
  padding:18px 34px;border-radius:999px;background:var(--olive);
  color:var(--cream)!important;text-transform:uppercase;letter-spacing:.16em;
  font-size:.85rem;transition:background .2s ease,transform .2s ease;
}
.about-cta:hover{background:var(--olive-dark);transform:translateY(-1px);}

@media (max-width:800px){
  #about.about-susan{display:flex;flex-direction:column;min-height:0;}
  .about-photo{width:100%;min-height:0;aspect-ratio:4/5;}
  .about-photo img{object-position:center top;}
  .about-content{padding:38px 22px 46px;}
  .about-eyebrow{gap:14px;font-size:.72rem;margin-bottom:22px;}
  .about-eyebrow span{width:34px;}
  #about h2{font-size:clamp(1.9rem,8vw,2.5rem);margin-bottom:22px;}
  .about-copy{font-size:1.02rem;}
  .about-cta{font-size:.75rem;letter-spacing:.12em;padding:16px 18px;gap:12px;width:100%;justify-content:center;}
}

/* ---------- Contact section ---------- */
#contact{
  background:var(--cream-alt);
  padding:clamp(56px,8vw,96px) clamp(20px,6vw,40px);
}
.contact-wrap{
  max-width:640px;margin:0 auto;text-align:center;
}
.contact-eyebrow{
  text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;
  color:var(--sage);margin-bottom:14px;
}
#contact h2{
  font-size:clamp(2rem,4vw,2.7rem);color:var(--dark-green);margin:0 0 14px;
}
#contact p.lead{
  color:var(--text-muted);max-width:480px;margin:0 auto 40px;line-height:1.6;
}

.contact-form{
  text-align:left;background:#fff;border-radius:18px;
  padding:clamp(24px,4vw,44px);box-shadow:0 12px 40px rgba(47,59,36,0.08);
}
.form-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.form-field{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;}
.form-field.full{flex-basis:100%;}
.form-field label{
  font-size:.8rem;letter-spacing:.04em;color:var(--dark-green);
  font-family:'Jost',Arial,sans-serif;
}
.form-field input,.form-field textarea{
  font-family:'Jost',Arial,sans-serif;font-size:1rem;
  padding:12px 14px;border:1px solid #ddd6c8;border-radius:10px;
  background:#FCFBF7;color:var(--text-dark);resize:vertical;
}
.form-field input:focus,.form-field textarea:focus{
  outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(141,162,126,.18);
}
.hp-field{position:absolute;left:-9999px;top:-9999px;}

.btn-submit{
  width:100%;padding:15px 20px;border:0;border-radius:999px;
  background:var(--olive);color:#fff;font-size:1rem;letter-spacing:.04em;
  cursor:pointer;transition:background .2s ease,transform .2s ease;
  font-family:'Playfair Display',Georgia,serif;
}
.btn-submit:hover{background:var(--olive-dark);transform:translateY(-1px);}
.btn-submit:disabled{opacity:.6;cursor:default;transform:none;}

.form-note{
  margin-top:14px;font-size:.8rem;color:var(--text-muted);text-align:center;
}
.form-status{
  margin-top:16px;padding:12px 16px;border-radius:10px;font-size:.92rem;
  display:none;
}
.form-status.show{display:block;}
.form-status.ok{background:#eaf3e6;color:#33472b;}
.form-status.err{background:#fbe9e9;color:#7a2c2c;}

.contact-alt{
  margin-top:28px;font-size:.9rem;color:var(--text-muted);
}
.contact-alt a{color:var(--olive);border-bottom:1px solid var(--olive);}

/* ---------- Footer ---------- */
footer{
  background:var(--dark-green);color:#E9E6DA;
  padding:44px clamp(20px,6vw,40px) 30px;text-align:center;
}
footer .footer-brand{
  font-family:'Playfair Display',Georgia,serif;font-size:1.2rem;margin-bottom:6px;
}
footer .footer-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  margin:16px 0;font-size:.9rem;
}
footer .footer-links a{opacity:.85;}
footer .footer-links a:hover{opacity:1;text-decoration:underline;}
footer .footer-note{font-size:.78rem;opacity:.6;margin-top:18px;}