/* ===== Aligned Myndset — Direction A: Quiet Editorial ===== */

:root{
  color-scheme: light only; /* stop mobile browsers (notably Samsung Internet's
    forced dark mode) from auto-darkening our own light palette */
  --cream:#F6F1E7;
  --paper:#FFFDF8;
  --ink:#26261F;
  --sage:#6C7C52;
  --sage-deep:#4B5738;
  --line:#D8D2C0;

  --font-display:'Fraunces', serif;
  --font-body:'Jost', sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --wrap: 1200px;
}

*{box-sizing:border-box;}

/* focus visibility — accessibility skill: keyboard focus must never be invisible */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--sage-deep);
  outline-offset:3px;
  border-radius:1px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 20px;
  font-family:var(--font-body); font-size:0.9rem; text-decoration:none;
}
.skip-link:focus{ left:var(--s3); top:var(--s3); }
html{scroll-behavior:smooth; color-scheme:light only;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%; display:block;}
a{color:inherit;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s5);}
@media (max-width:640px){ .wrap{padding:0 var(--s3);} }

h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.02; margin:0; letter-spacing:-0.03em; }
h1{font-size:clamp(2.8rem, 7.5vw, 6.4rem); font-weight:400; letter-spacing:-0.035em;}
h2{font-size:clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing:-0.03em;}
h3{font-size:clamp(1.25rem, 1.9vw, 1.5rem); font-weight:500; letter-spacing:-0.01em;}
p{margin:0;}

/* subtle paper grain — premium tactile texture, not a gradient/glass effect */
body::before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* On small viewports the 120px noise tile is large relative to the screen,
   so the multiply blend reads as blotchy/muddy discoloration rather than a
   fine grain — most visible over the sage-deep sections and the hero fade.
   Desktop is untouched; this only disables the texture below 768px. */
@media (max-width:767px){
  body::before{ display:none !important; content:none !important; }
}

.eyebrow{
  font-family:var(--font-body); font-size:0.78rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--sage-deep); font-weight:500;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:0.95rem; letter-spacing:0.03em;
  padding:16px 32px; border-radius:999px; text-decoration:none;
  border:1px solid var(--ink); transition:all 0.25s ease; cursor:pointer;
}
.btn svg{width:16px; height:16px; transition:transform 0.25s ease;}
.btn-dark{background:var(--ink); color:var(--cream); border-color:var(--ink);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn:hover svg{transform:translateX(4px);}

section{position:relative; z-index:2;}
header, .mobile-panel{z-index:100;}

/* ---------- Signature device: soft rounded photography (replaces old hard offset frame) ---------- */
.hero-media, .meet-media, .pillar-media, .service-card, .gallery-grid > div{
  position:relative;
}
main img, main .placeholder{
  border-radius:28px;
  box-shadow:0 24px 48px -20px rgba(38,38,31,0.28);
  transition:transform 0.6s ease, box-shadow 0.4s ease;
}
.hero-media:hover img, .meet-media:hover img, .pillar-media:hover img, .service-card:hover img, .gallery-grid > div:hover img, .epigraph-grid > div:hover img{
  transform:scale(1.02);
  box-shadow:0 28px 56px -18px rgba(38,38,31,0.32);
}

/* ---------- Ghost numerals (pillars) — oversized background numbering ---------- */
.pillar-row{position:relative;}
.pillar-ghost{
  position:absolute;
  top:-0.3em; right:calc(-0.5vw);
  font-family:var(--font-display);
  font-size:clamp(6rem, 14vw, 11rem);
  font-weight:300;
  color:var(--ink);
  opacity:0.04;
  line-height:1;
  pointer-events:none;
  z-index:0;
  user-select:none;
}
.pillar-row:nth-child(even) .pillar-ghost{ right:auto; left:calc(-0.5vw); }
/* NB: must not be `.pillar-row > *` — that has the same specificity as
   .pillar-ghost and was overriding its position:absolute, dropping the
   giant watermark numeral into the grid as a real column. */
.pillar-media, .pillar-text{position:relative; z-index:1;}

/* ---------- Drop cap for editorial statement blocks ---------- */
.drop-cap::first-letter{
  font-family:var(--font-display);
  font-size:3.4em;
  font-weight:500;
  float:left;
  line-height:0.78;
  padding-right:0.08em;
  padding-top:0.04em;
  color:var(--sage-deep);
}
.drop-cap.on-sage::first-letter{ color:var(--cream); }

/* ---------- Underline accent — key phrase highlight in headlines ---------- */
.underline-accent{
  position:relative;
  white-space:nowrap;
}
.underline-accent::after{
  content:'';
  position:absolute;
  left:2px; right:2px; bottom:0.06em;
  height:0.09em;
  background:var(--sage);
  border-radius:2px;
  z-index:-1;
}

/* ---------- Full-bleed color-block sections ---------- */
.block-sage{
  background:var(--sage-deep);
  color:var(--cream);
}
.block-sage .eyebrow{color:#D9E0CB;}
.block-sage h2, .block-sage h3{color:var(--cream);}
.block-sage p{color:var(--cream) !important;}
.block-sage .italic-line{color:var(--cream) !important;}
.block-sage .btn-dark{background:var(--cream); color:var(--ink); border-color:var(--cream);}
.block-sage .btn-dark::before{background:var(--sage);}
.block-sage .btn-dark:hover{color:var(--ink); border-color:var(--sage);}
.block-sage .btn-outline{background:transparent; color:var(--cream); border-color:var(--cream);}
.block-sage .btn-outline::before{background:var(--cream);}
.block-sage .btn-outline:hover{color:var(--sage-deep); border-color:var(--cream);}
.block-sage .meet-credentials{border-top-color:rgba(246,241,231,0.3); color:#D9E0CB;}
.block-sage .process-item::before{background:var(--sage-deep); border-color:var(--cream); color:var(--cream);}
.block-sage .process-list{border-left-color:rgba(246,241,231,0.3);}
.block-sage .epigraph-marker{color:var(--cream); opacity:0.55;}

/* ---------- Organic wave dividers ---------- */
.wave{ display:block; line-height:0; margin:0; }
.wave svg{ display:block; width:100%; height:64px; }
@media (min-width:900px){ .wave svg{height:96px;} }
.wave.into-sage svg path{ fill:var(--sage-deep); }
.wave.out-of-sage svg path{ fill:var(--cream); }
.wave.out-of-sage-to-paper svg path{ fill:var(--paper); }

/* ---------- Button: fill-sweep hover instead of flat color swap ---------- */
.btn{ position:relative; overflow:hidden; z-index:1; }
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:var(--sage-deep);
  transform:translateX(-101%);
  transition:transform 0.35s cubic-bezier(.65,0,.35,1);
  z-index:-1;
}
.btn-dark::before{background:var(--sage-deep);}
.btn-outline::before{background:var(--ink);}
.btn:hover::before{transform:translateX(0);}
.btn-dark:hover{color:var(--cream); border-color:var(--sage-deep);}
.btn-outline:hover{color:var(--cream); border-color:var(--ink);}

/* ---------- Marginalia rail ---------- */
.rail{ position:absolute; left:calc(var(--s5) - 2px); top:0; bottom:0; width:1px; background:var(--line); display:none; }
.rail::before{
  content:attr(data-label); position:absolute; top:var(--s5); left:50%;
  transform:translateX(-50%) rotate(-90deg); transform-origin:left top; white-space:nowrap;
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage-deep); font-family:var(--font-body);
}
@media (min-width:1120px){ .rail{display:block;} }

/* ---------- Header / nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(246,241,231,0.92); border-bottom:1px solid transparent;
  transition:background-color 0.3s ease, border-color 0.3s ease;
}
/* Fully opaque once scrolled — guarantees the hamburger and nav always have
   solid contrast, regardless of what color section is now behind the fixed
   header (translucency only looks intentional at the very top, over the
   hero). */
header.scrolled{ background:var(--cream); border-bottom-color:var(--line); }
.nav-inner{
  max-width:var(--wrap); margin:0 auto; padding:20px var(--s5);
  display:flex; align-items:center; justify-content:space-between;
}
.logo{display:flex; align-items:center; text-decoration:none; flex-shrink:0;}
.logo img{height:46px; width:auto; flex-shrink:0;} /* flex-shrink:0 — logo was being squashed ~11% narrower at ~1024px */
.nav-links-wrap{display:none;}
/* Gap scales with viewport so all seven nav items stay on one line;
   nowrap stops individual labels breaking across two lines. */
nav.links{display:flex; gap:clamp(20px, 1.8vw, 30px); list-style:none; margin:0; padding:0; font-size:0.94rem; font-weight:500;}
nav.links a{white-space:nowrap;}
nav.links a{text-decoration:none; position:relative; padding-bottom:4px;}
nav.links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--ink); transition:width 0.25s ease;
}
nav.links a:hover::after, nav.links a.active::after{width:100%;}
nav.links a.active{color:var(--sage-deep);}
.nav-cta{display:none;}
@media (min-width:900px){
  .nav-links-wrap{display:flex; align-items:center; gap:clamp(20px, 1.8vw, 30px);}
  .nav-cta{display:inline-flex;}
}
/* Explicit, defensive mobile hide — belt-and-braces on top of the
   mobile-first default above, using the exact breakpoint the CTA must
   never appear past. Desktop rule at min-width:900px above is untouched. */
@media (max-width:767px){
  .nav-links-wrap{ display:none !important; }
  .nav-cta{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
}
.hamburger{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; width:44px; height:44px; padding:0; }
.hamburger span{width:22px; height:1px; background:var(--ink);}
@media (min-width:900px){ .hamburger{display:none;} }

.mobile-panel{
  position:fixed; left:0; right:0; bottom:0;
  top:var(--mobile-header-h, 84px);
  z-index:98; background:var(--cream);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--s4);
  padding:var(--s5); overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-panel.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity 0.3s ease, visibility 0s linear 0s;
}
.mobile-panel a{font-family:var(--font-display); font-size:2rem; text-decoration:none;}
.mobile-panel a.btn{ font-family:var(--font-body); font-size:0.95rem; }
.mobile-close{ position:absolute; top:22px; right:var(--s5); background:none; border:none; font-size:1.6rem; cursor:pointer; }

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ---------- Page header (interior pages) ---------- */
.page-header{ padding:calc(var(--s8) + var(--s3)) 0 var(--s6); border-bottom:1px solid var(--line); }
.page-header .eyebrow{margin-bottom:var(--s3);}
.page-header p.lede{max-width:60ch; margin-top:var(--s3); font-size:1.05rem; color:#4a4a3f;}
.crumb{font-size:0.85rem; color:#6b6558; margin-bottom:var(--s3); font-weight:500;}
.crumb a{text-decoration:none; color:var(--sage-deep);}

/* ---------- Placeholder blocks ---------- */
.placeholder{
  background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  text-align:center; color:#6b6558; font-size:0.8rem; letter-spacing:0.03em; padding:var(--s3); font-family:var(--font-body);
}

/* ---------- GRAND HERO — text left, Ferdous's full portrait large on the right ---------- */
.grand-hero{
  position:relative;
  padding:calc(var(--s8) + var(--s4)) 0 var(--s7);
  overflow:visible;
}

.hero-split{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:var(--s6);
  align-items:start;
}

.centerpiece{
  background:var(--paper);
  border-radius:4px;
  box-shadow:0 28px 60px -20px rgba(38,38,31,0.22);
  padding:var(--s6) var(--s5);

  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center;
}
.centerpiece .eyebrow{margin-bottom:var(--s3);}
.centerpiece h1{margin-bottom:var(--s4); font-size:clamp(1.9rem, 3vw, 2.6rem);}
.centerpiece .hero-lede{font-size:1.05rem; max-width:44ch; margin-bottom:var(--s2);}
.centerpiece .hero-prompt{font-size:1.05rem; margin-bottom:var(--s4);}
.hero-btn-row{display:flex; gap:var(--s3); flex-wrap:wrap;}

/* Portrait column — the full, uncropped photograph, sized by its own
   natural aspect ratio rather than forced into a fixed-height box, so the
   entire image is always visible with no cropping. */
.hero-portrait{ position:relative; }
.hero-portrait-frame{
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 24px 54px -30px rgba(38,38,31,0.3);
}
.hero-portrait-frame img{
  display:block; width:100%; height:auto; object-fit:contain;
}
.hero-portrait-caption{
  display:block; margin-top:var(--s3); padding-right:6px;
  font-size:0.82rem; color:#6b6558; text-align:right;
}

@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; }
  /* Hero content (heading, lede, CTA buttons) reads first on small screens;
     the founder portrait follows it. Desktop two-column layout is untouched. */
  .centerpiece{ order:1; padding:var(--s5) var(--s4); }
  .hero-portrait{ order:2; max-width:420px; width:100%; margin:0 auto; }
}

/* ---------- Fade transition: cream hero bleeding into the sage-deep section below ---------- */
.fade-to-sage{
  height:160px;
  margin-top:-2px;
  margin-bottom:-2px;
  background:linear-gradient(180deg, var(--cream) 0%, var(--sage-deep) 100%);
}

/* ---------- Fade transition: sage-deep section bleeding back into cream below ---------- */
.fade-from-sage{
  height:160px;
  margin-top:-2px;
  margin-bottom:-2px;
  background:linear-gradient(180deg, var(--sage-deep) 0%, var(--cream) 100%);
}

/* Mobile: the desktop fade is removed entirely below 768px (not shrunk, not
   swapped for another gradient) — the cream section ends and the sage-deep
   section begins directly on a clean, flat edge. Desktop rules above are
   untouched at any width ≥768px. */
@media (max-width:767px){
  .fade-to-sage, .fade-from-sage{
    display:none !important;
    height:0 !important;
    margin:0 !important;
    background:none !important;
  }
}

/* ---------- Epigraph: editorial layout — wide canvas, image woven into the text flow ---------- */
#right-place .wrap{ max-width:1200px; }

.epigraph-head{
  display:flex;
  align-items:center;
  gap:var(--s6);
  margin-bottom:var(--s8);
}
.epigraph-rule{
  flex:1 1 auto;
  height:1px;
  background:rgba(246,241,231,0.28);
}
.epigraph-head-copy{
  flex:0 0 auto;
  max-width:580px;
  text-align:center;
}
.epigraph-head-copy .eyebrow{ margin-bottom:var(--s2); }
.epigraph-head-copy h2{ margin-bottom:0; }

.epigraph-editorial{
  max-width:960px;
  margin:0 auto;
}
.epigraph-editorial::after{ content:""; display:block; clear:both; }
.epigraph-editorial p{
  margin-bottom:var(--s4);
  line-height:1.75;
}
.epigraph-editorial p:last-child{ margin-bottom:0; }

.epigraph-photo-float{
  float:right;
  width:46%;
  max-width:460px;
  margin:6px 0 var(--s5) var(--s6);
}
.epigraph-photo-float img{
  display:block;
  width:100%;
  height:auto;          /* full original composition — no crop */
  border-radius:28px;   /* matches every other image on the site */
}

@media (max-width:900px){
  .epigraph-head{ gap:var(--s4); margin-bottom:var(--s6); }
  .epigraph-head-copy{ max-width:420px; }
}
@media (max-width:820px){
  .epigraph-photo-float{
    float:none;
    width:100%;
    max-width:400px;
    margin:0 auto var(--s5);
  }
  .epigraph-editorial p{ max-width:none; }
}
@media (max-width:640px){
  .epigraph-head{ flex-direction:column; gap:var(--s3); }
  .epigraph-rule{ width:56px; flex:0 0 auto; }
}

.epigraph-closing{
  max-width:640px;
  margin:var(--s6) auto 0;
  padding-top:var(--s5);
  border-top:1px solid rgba(246,241,231,0.25);
  text-align:center;
}
.epigraph-closing .italic-line{ font-size:1.15rem; margin-bottom:var(--s4); }
.epigraph-closing .btn{ margin:0 auto; }
@media (max-width:980px){
  .epigraph-grid-2{ grid-template-columns:1fr; }
  .epigraph-right{ margin-top:0; }
  .epigraph-left h2{ margin-bottom:var(--s6) !important; }
  .epigraph-left{ margin-bottom:var(--s3); }
}
@media (max-width:640px){
  .epigraph-photo-big{ max-width:100%; }
}
.hero{padding:calc(var(--s8) + var(--s4)) 0 var(--s7);}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--s6); align-items:end;}
.hero-text .eyebrow{margin-bottom:var(--s3);}
.hero-text h1{margin-bottom:var(--s4);}
.hero-lede{font-size:1.15rem; max-width:46ch; margin-bottom:var(--s2); color:var(--ink);}
.hero-prompt{font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--sage-deep); margin-bottom:var(--s5);}
.hero-media{position:relative; align-self:stretch;}
.hero-media img, .hero-media .placeholder{aspect-ratio:4/5; width:100%; object-fit:cover;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:var(--s5);}
  .hero{padding-top:var(--s7);}
}

/* ---------- Epigraph / editorial statement block ---------- */
.epigraph{padding:var(--s7) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
#right-place{ padding-top:var(--s4); }
@media (max-width:640px){ #right-place{ padding-top:var(--s5); } }
.epigraph .wrap{max-width:900px;}
.epigraph-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center;}
.epigraph h2{font-weight:400; margin-bottom:var(--s3);}
.epigraph p{color:#4a4a3f; margin-bottom:var(--s3);}
.epigraph .italic-line{font-family:var(--font-display); font-style:italic; color:var(--sage-deep); font-size:1.1rem;}
.epigraph-marker{font-family:var(--font-display); font-size:1.4rem; color:var(--sage-deep); margin-bottom:var(--s3); display:block;}
@media (max-width:820px){ .epigraph-grid{grid-template-columns:1fr;} }

/* Story photo beside the quote block (coach page) */
.epigraph-grid--photo{grid-template-columns:0.8fr 1.2fr; align-items:center;}
.story-photo{margin:0;}
.story-photo img{display:block; width:100%; height:auto; max-width:420px;}
@media (max-width:820px){
  .epigraph-grid--photo{grid-template-columns:1fr;}
  .story-photo img{max-width:360px; margin:0 auto;}
}

/* ---------- Pillars (magazine spread rows) ---------- */
.pillars{padding:var(--s7) 0;}
.pillars-head{max-width:640px; margin-bottom:var(--s6);}
.pillars-lede{margin-top:var(--s3); color:#4a4a3f; max-width:56ch;}
.pillars-closing{margin-top:var(--s6); font-style:italic; font-family:var(--font-display); font-size:1.1rem; color:var(--sage-deep); max-width:52ch;}
.pillars-head .eyebrow{margin-bottom:var(--s3);}
.pillar-row{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--s6); align-items:center;
  padding:var(--s6) 0; border-top:1px solid var(--line);
}
.pillar-row:last-child{border-bottom:1px solid var(--line);}
.pillar-row:nth-child(even){grid-template-columns:1.1fr 0.9fr;}
.pillar-row:nth-child(even) .pillar-media{order:2;}
.pillar-num{font-family:var(--font-display); font-size:0.85rem; color:var(--sage-deep); margin-bottom:var(--s3); letter-spacing:0.05em;}
.pillar-text h3{margin-bottom:var(--s3);}
.pillar-text p{max-width:44ch; color:#4a4a3f;}
.pillar-media img, .pillar-media .placeholder{aspect-ratio:4/3; width:100%; height:auto; object-fit:cover; object-position:center;}
@media (max-width:820px){
  .pillar-row, .pillar-row:nth-child(even){grid-template-columns:1fr; gap:var(--s3);}
  .pillar-row:nth-child(even) .pillar-media{order:0;}
}

/* ---------- Meet / About blocks ---------- */
.meet{padding:var(--s7) 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.meet.block-sage{background:var(--sage-deep); border-top:none; border-bottom:none;}
.meet-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--s6); align-items:center;}
.meet-media{ position:relative; }
.meet-media img, .meet-media .placeholder{aspect-ratio:3/4; width:100%; height:auto; max-width:380px; object-fit:cover;}
.meet-media-accent{
  position:absolute; right:-28px; bottom:-28px; width:42%; max-width:170px;
  border:6px solid var(--paper); border-radius:4px; overflow:hidden;
  box-shadow:0 20px 40px -16px rgba(20,22,14,0.5); background:var(--paper);
}
.meet-media-accent img{ aspect-ratio:4/3; width:100%; height:auto; max-width:none; display:block; object-fit:cover; }
.meet-text .eyebrow{margin-bottom:var(--s3);}
.meet-text h2{margin-bottom:var(--s4);}
.meet-text p{max-width:54ch; margin-bottom:var(--s3); color:#4a4a3f;}
.meet-credentials{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line); font-size:0.95rem; font-weight:500; color:var(--sage-deep); line-height:1.9; }

/* Credentials section on coach.html — feature photo at its natural 2:3,
   with the wider column given to the long body copy. */
.meet-grid--text-lead{grid-template-columns:1.15fr 0.85fr;}
.meet-media--feature img{
  aspect-ratio:2/3;   /* the photo's own ratio — nothing cropped */
  height:auto;
  max-width:440px;
  margin-left:auto;   /* sits tight against the text column */
}
@media (max-width:820px){
  .meet-grid--text-lead{grid-template-columns:1fr;}
  .meet-media--feature img{margin:0 auto;}
}
@media (max-width:820px){
  .meet-grid{grid-template-columns:1fr;}
  .meet-media-accent{ right:-12px; bottom:-20px; width:38%; }
}
@media (max-width:520px){
  .meet-media{ max-width:320px; margin:0 auto; }
  .meet-media-accent{ display:none; } /* avoid overlap crowding on very small screens */
}

/* ---------- Gallery ---------- */
.gallery{padding:var(--s7) 0;}
.gallery-head{max-width:640px; margin-bottom:var(--s6);}
.gallery-head .eyebrow{margin-bottom:var(--s3);}
.gallery-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:auto auto; gap:var(--s3);}
.gallery-grid > *:first-child{grid-row:span 2;}
.gallery-grid img, .gallery-grid .placeholder{width:100%; height:100%; object-fit:cover; aspect-ratio:auto;}
.gallery-grid > *:first-child img, .gallery-grid > *:first-child .placeholder{aspect-ratio:3/4;}
.gallery-grid > *:not(:first-child) img, .gallery-grid > *:not(:first-child) .placeholder{aspect-ratio:4/3;}
@media (max-width:820px){
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid > *:first-child{grid-row:span 1; grid-column:span 2;}
}

/* ---------- Testimonials ---------- */
.testimonials{padding:var(--s7) 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.testimonials-head{max-width:640px; margin-bottom:var(--s6);}
.testimonials-head .eyebrow{margin-bottom:var(--s3);}
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);}
.testimonial-card{ border-top:1px solid var(--line); padding-top:var(--s3); }
.testimonial-card p{color:#6b6558; font-style:italic; font-family:var(--font-display); font-size:1.05rem;}
@media (max-width:820px){ .testimonial-grid{grid-template-columns:1fr;} }

/* ---------- Process ---------- */
.process{padding:var(--s7) 0;}
.process-head{max-width:640px; margin-bottom:var(--s6);}
.process-head .eyebrow{margin-bottom:var(--s3);}
.process-list{max-width:720px; border-left:1px solid var(--line); margin-left:12px;}
.process-item{position:relative; padding:0 0 var(--s6) var(--s5);}
.process-item:last-child{padding-bottom:0;}
.process-item::before{
  content:attr(data-step); position:absolute; left:-13px; top:0; width:25px; height:25px;
  background:var(--cream); border:1px solid var(--sage); color:var(--sage-deep); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:0.75rem;
}
.process-item h3{margin-bottom:var(--s2);}
.process-item p{color:#4a4a3f; max-width:50ch;}

/* ---------- Qualities: what partnership feels like — editorial, staggered ---------- */
.qualities{
  padding:var(--s8) 0;
  background:linear-gradient(175deg, var(--cream) 0%, #F1EADB 55%, var(--cream) 100%);
}
.qualities-head{max-width:600px; margin:0 auto var(--s8); text-align:center;}
.qualities-head .eyebrow{margin-bottom:var(--s3);}
.qualities-head h2{
  font-size:clamp(2rem, 3.4vw, 2.65rem);
  font-weight:400;
  line-height:1.18;
}

.qualities-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--s6);
  row-gap:var(--s7);
  max-width:960px;
  margin:0 auto;
}
.quality-card:nth-child(2){ margin-top:var(--s6); }
.quality-card:nth-child(3){ margin-top:calc(var(--s6) * -1); }

.quality-card{
  background:var(--paper);
  border:1px solid rgba(216,210,192,0.55);
  border-radius:22px;
  padding:44px 42px;
  box-shadow:0 22px 46px -32px rgba(38,38,31,0.22);
  transition:transform 0.4s cubic-bezier(.22,.9,.34,1), box-shadow 0.4s cubic-bezier(.22,.9,.34,1);
}
.quality-card:hover{
  transform:translateY(-7px);
  box-shadow:0 34px 64px -26px rgba(38,38,31,0.3);
}
.quality-icon{ display:block; margin-bottom:22px; color:var(--sage-deep); }
.quality-icon svg{ display:block; width:30px; height:16px; }
.quality-card h3{
  font-family:var(--font-display); font-weight:500; font-size:1.4rem;
  letter-spacing:-0.01em; margin-bottom:14px;
}
.quality-card p{ color:#4a4a3f; max-width:32ch; line-height:1.75; margin:0; }

@media (max-width:820px){
  .quality-card:nth-child(2), .quality-card:nth-child(3){ margin-top:0; }
}
@media (max-width:700px){
  .qualities-grid{ grid-template-columns:1fr; row-gap:var(--s5); }
  .quality-card{ padding:36px 32px; }
}

/* ---------- Services: arch-frame alternating panels ---------- */
.service-arch-row{
  display:grid;
  grid-template-columns:340px 1fr;
  align-items:stretch;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:var(--s5);
  box-shadow:0 20px 50px -24px rgba(38,38,31,0.28);
}
.service-arch-row:nth-child(even){ grid-template-columns:1fr 340px; }
.service-arch-row:nth-child(even) .service-arch-photo{ order:2; }

.service-arch-photo{
  background:var(--paper);
  display:flex; align-items:flex-end; justify-content:center;
  padding:var(--s5) var(--s4) 0;
}
.service-arch-photo img{
  width:100%; max-width:230px; height:auto;
  aspect-ratio:3/4; object-fit:cover;
  border-radius:115px 115px 6px 6px;
  box-shadow:0 20px 40px -18px rgba(38,38,31,0.3);
}

.service-arch-panel{
  background:var(--sage-deep);
  color:var(--cream);
  padding:var(--s6) var(--s5);
  display:flex; flex-direction:column; justify-content:center;
}
.service-arch-panel .eyebrow{ color:#D9E0CB; margin-bottom:var(--s2); }
.service-arch-panel h3{ color:var(--cream); font-size:clamp(1.5rem,2.2vw,2rem); margin-bottom:var(--s3); font-family:var(--font-display); font-weight:500; }
.service-arch-panel p{ color:#E9E4D3; margin-bottom:var(--s3); max-width:46ch; }
.service-arch-panel .service-price{ color:var(--cream); font-size:1.15rem; font-weight:500; margin-bottom:var(--s3); }
.service-arch-panel .service-price.flag{ color:#F6D9A0; }
.service-arch-panel .service-note{ color:#F6D9A0; font-size:0.85rem; margin-bottom:var(--s3); max-width:46ch; }
.service-arch-panel .btn{ align-self:flex-start; }
.service-arch-panel .service-btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.service-arch-panel .btn-outline{ background:transparent; color:var(--cream); border-color:var(--cream); }
.service-arch-panel .btn-outline::before{ background:var(--cream); }
.service-arch-panel .btn-outline:hover{ color:var(--sage-deep); border-color:var(--cream); }

@media (max-width:820px){
  .service-arch-row, .service-arch-row:nth-child(even){ grid-template-columns:1fr; }
  .service-arch-row:nth-child(even) .service-arch-photo{ order:0; }
  .service-arch-photo{ padding:var(--s4) var(--s4) 0; }
  .service-arch-photo img{ max-width:200px; }
  .service-arch-panel{ padding:var(--s5) var(--s4); }
}

/* ---------- Services ---------- */
.services{padding:var(--s7) 0;}
.services.on-paper{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.services-head{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s4); margin-bottom:var(--s6); flex-wrap:wrap;}
.services-head .eyebrow{margin-bottom:var(--s3);}
.services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s5);}
.service-card img, .service-card .placeholder{aspect-ratio:5/6; width:100%; margin-bottom:var(--s3); object-fit:cover;}
.service-card h3{font-size:1.1rem; margin-bottom:6px;}
.service-price{font-family:var(--font-body); color:var(--sage-deep); font-size:0.9rem;}
.service-price.flag{color:#8f5e24;}
.service-note{font-size:0.78rem; color:#8f5e24; margin-top:6px;}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .services-grid{grid-template-columns:1fr; max-width:360px;} }

/* ---------- FAQ ---------- */
.faq{padding:var(--s7) 0;}
.faq-head{max-width:640px; margin-bottom:var(--s6);}
.faq-head .eyebrow{margin-bottom:var(--s3);}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6) var(--s6); max-width:900px;}
.faq-item{border-top:1px solid var(--line); padding-top:var(--s3);}
.faq-item h3{font-size:1.05rem; margin-bottom:var(--s2); font-weight:500;}
.faq-item p{color:#3a3a30; font-size:1rem;}
@media (max-width:700px){ .faq-grid{grid-template-columns:1fr;} }

/* ---------- Contact form block ---------- */
.contact-block{padding:var(--s7) 0;}
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--s6);}
.contact-info .eyebrow{margin-bottom:var(--s3);}
.contact-info h2{margin-bottom:var(--s4);}
.contact-info p{color:#4a4a3f; max-width:44ch; margin-bottom:var(--s4);}
.contact-detail{margin-bottom:var(--s3); font-size:1rem; font-weight:500;}
.contact-detail a{text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; transition:border-color 0.2s ease, color 0.2s ease;}
.contact-detail a:hover{color:var(--sage-deep); border-color:var(--sage-deep);}
.contact-detail .label{display:block; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:4px;}
.contact-note{ background:var(--paper); border:1px solid var(--line); padding:var(--s4); font-size:0.95rem; color:#5f5949; }
.pending-note{ font-style:italic; color:#8a8574; font-weight:400; }
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }

/* ---------- Contact form ---------- */
.contact-form{display:flex; flex-direction:column; gap:var(--s4);}
.form-hidden{ position:absolute; left:-9999px; }
.form-row{display:flex; flex-direction:column; gap:6px;}
.form-row label{font-size:0.75rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--sage-deep); font-weight:500;}
.form-row .optional{text-transform:none; letter-spacing:0; color:#8a8574; font-size:0.75rem; font-weight:400;}
.form-row input, .form-row select{
  font-family:var(--font-body); font-size:1rem; padding:12px 2px;
  border:none; border-bottom:1px solid var(--line); border-radius:0;
  background:transparent; color:var(--ink); transition:border-color 0.2s ease;
}
.form-row textarea{
  font-family:var(--font-body); font-size:1rem; padding:12px; resize:vertical; min-height:110px;
  border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink);
  transition:border-color 0.2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--sage-deep); }
.contact-form .btn{ align-self:flex-start; margin-top:var(--s2); }

/* ---------- Confirmation / thank-you page ---------- */
.confirmation-block{padding:var(--s8) 0;}
.confirmation-card{max-width:560px; margin:0 auto; text-align:center;}
.confirmation-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; margin-bottom:var(--s4);
  background:var(--sage-deep); color:var(--cream);
}
.confirmation-mark svg{width:28px; height:28px;}
.confirmation-card .eyebrow{margin-bottom:var(--s3); display:block;}
.confirmation-card h1{margin-bottom:var(--s3);}
.confirmation-card .lede{margin:0 auto var(--s5); max-width:44ch;}

.booking-summary{
  max-width:420px; margin:0 auto var(--s5); text-align:left;
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.booking-summary-row{
  display:flex; justify-content:space-between; gap:var(--s3);
  padding:14px var(--s4); border-bottom:1px solid var(--line); font-size:0.95rem;
}
.booking-summary-row:last-child{ border-bottom:none; }
.booking-summary-row .label{
  font-size:0.72rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--sage-deep); font-weight:500;
  flex-shrink:0;
}
.booking-summary-row span:last-child{ text-align:right; color:var(--ink); }

/* ---------- Final CTA ---------- */
.final-cta{padding:var(--s7) 0 calc(var(--s7) + var(--s3)); text-align:center;}
.final-cta .eyebrow{margin-bottom:var(--s3); display:block;}
.final-cta h2{max-width:680px; margin:0 auto var(--s5); font-weight:400;}

/* ---------- Services: What's Included (sits below the arch-row) ---------- */
.services-included{
  max-width:640px; margin:var(--s6) auto 0; padding-top:var(--s6);
  border-top:1px solid var(--line); text-align:left;
}
.services-included .eyebrow{margin-bottom:var(--s3); display:block;}
.services-included p:not(.eyebrow){ color:#4a4a3f; margin-bottom:var(--s4); max-width:60ch; }

/* ---------- Workshops & Group Experiences ---------- */
.workshops{padding:var(--s7) 0; text-align:center;}
.workshops .eyebrow{margin-bottom:var(--s3); display:block;}
.workshops h2{max-width:680px; margin:0 auto var(--s4); font-weight:400;}
.workshops p{max-width:56ch; margin:0 auto var(--s3); color:var(--cream);}
.workshops .workshops-prompt{ font-family:var(--font-display); font-style:italic; font-size:1.1rem; margin-top:var(--s4); margin-bottom:var(--s4); }

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:var(--s6) 0 var(--s5);}
.footer-top{display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s5);}
.footer-brand img{height:44px; margin-bottom:var(--s2);}
.footer-brand p{font-size:0.9rem; color:#5f5949; max-width:34ch;}
.footer-links{display:flex; gap:var(--s6); flex-wrap:wrap;}
.footer-col h4{font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:var(--s2); font-weight:500;}
.footer-col a{display:block; text-decoration:none; font-size:0.9rem; margin-bottom:8px; color:var(--ink);}
.footer-col a:hover{color:var(--sage-deep);}
.footer-email-pending{ display:block; font-size:0.9rem; color:#6b6558; margin-bottom:8px; font-style:italic; }
.footer-social{display:flex; gap:18px; margin-top:var(--s3); flex-wrap:wrap;}
.social-icon{
  display:flex; align-items:center; justify-content:center;
  color:#6b6558;
  transition:color 0.2s ease, transform 0.2s ease;
}
.social-icon svg{width:19px; height:19px;}
.social-icon:hover{ color:var(--sage-deep); transform:translateY(-2px); }
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s3); font-size:0.85rem; color:#5f5949; border-top:1px solid var(--line); padding-top:var(--s4);}

.demo-note{ max-width:none; padding:10px var(--s5); font-size:0.78rem; color:#5f5949; text-align:center; background:#EFE9D8; }

/* =====================================================================
   BOOK A SESSION PAGE
   ===================================================================== */

/* ---------- Choose Your Session cards ---------- */
.sessions-choose{padding:var(--s7) 0;}
.sessions-head{max-width:640px; margin:0 auto var(--s6); text-align:center;}
.sessions-head .eyebrow{margin-bottom:var(--s3);}
.sessions-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s5);}
.session-card{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:var(--s5); box-shadow:0 20px 45px -30px rgba(38,38,31,0.3);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.session-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -28px rgba(38,38,31,0.35); }
.session-card h3{ font-size:1.2rem; margin-bottom:4px; }
.session-duration{ font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage-deep); font-weight:500; margin-bottom:var(--s3); }
.session-desc{ color:#4a4a3f; flex:1; margin-bottom:var(--s4); }
.session-price{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); margin-bottom:var(--s4); }
.session-book-btn{ width:100%; justify-content:center; }
.sessions-footnote{ text-align:center; font-size:0.82rem; font-style:italic; color:#8a8574; margin-top:var(--s5); }

@media (max-width:980px){ .sessions-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .sessions-grid{grid-template-columns:1fr; max-width:400px; margin:0 auto;} }

/* ---------- Booking experience shell (sits on sage-deep) ---------- */
.booking-experience{ padding:var(--s7) 0; }
.booking-head{ max-width:600px; margin:0 auto var(--s6); text-align:center; }
.booking-head .eyebrow{ margin-bottom:var(--s3); }
.booking-head-note{ margin-top:var(--s3); font-size:0.9rem; color:rgba(246,241,231,0.75) !important; }
.booking-head-note a{ color:var(--cream); border-bottom:1px solid rgba(246,241,231,0.5); text-decoration:none; }
.booking-head-note a:hover{ border-color:var(--cream); }

.booking-steps{
  display:flex; justify-content:center; gap:var(--s4); flex-wrap:wrap;
  list-style:none; padding:0; margin:0 0 var(--s6);
}
.booking-steps li{
  font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:500;
  color:rgba(246,241,231,0.45); padding-bottom:8px; border-bottom:2px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.booking-steps li.active{ color:var(--cream); border-color:var(--cream); }
.booking-steps li.done{ color:rgba(246,241,231,0.8); }

.booking-panel-card{
  max-width:720px; margin:0 auto;
  background:var(--paper); border-radius:18px; padding:var(--s6);
  box-shadow:0 40px 90px -30px rgba(20,22,14,0.5);
}
@media (max-width:640px){ .booking-panel-card{ padding:var(--s5) var(--s4); border-radius:14px; } }

/* text inside the light card must NOT inherit the dark block-sage overrides */
.booking-experience .booking-panel-card p{ color:#4a4a3f !important; }
.booking-experience .booking-panel-card h2,
.booking-experience .booking-panel-card h3{ color:var(--ink); }
.booking-experience .booking-panel-card .eyebrow{ color:var(--sage-deep); }
.booking-experience .booking-panel-card .italic-line{ color:var(--sage-deep) !important; }

.booking-step{ animation:bookingStepIn 0.4s ease; }
.gs-step{ animation:bookingStepIn 0.4s ease; }
@keyframes bookingStepIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .booking-step, .gs-step{ animation:none; } }

.booking-step > h3{ text-align:center; margin-bottom:var(--s5); }
/* ---------- Workshop signup page ---------- */
.workshop-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--s6); align-items:start; }
.workshop-facts{ margin:var(--s4) 0 var(--s4); }
.workshop-facts > div{ display:grid; grid-template-columns:8rem 1fr; gap:var(--s3);
  padding:14px 0; border-bottom:1px solid var(--line); }
.workshop-facts dt{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage-deep); font-weight:500; }
.workshop-facts dd{ margin:0; }
.workshop-note{ max-width:46ch; color:#4a4a3f; }
.workshop-form-card{ background:var(--paper); border:1px solid var(--line);
  border-radius:28px; padding:var(--s5); }
.workshop-form-card h2{ margin-bottom:var(--s4); }
@media (max-width:820px){
  .workshop-layout{ grid-template-columns:1fr; gap:var(--s5); }
  .workshop-facts > div{ grid-template-columns:7rem 1fr; }
  .workshop-form-card{ padding:var(--s4); }
}
@media (max-width:400px){
  .workshop-facts > div{ grid-template-columns:1fr; gap:4px; }
}

/* Step 1 of the booking flow: complimentary discovery call intro */
.booking-step-intro{ max-width:62ch; margin-bottom:var(--s4); }
.booking-intro-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); }
/* This panel sits on a cream card inside a .block-sage section, so the
   sage-context outline button (cream text on cream) would be invisible here. */
.booking-intro-actions .btn-outline{ color:var(--ink); border-color:var(--line); }
.booking-intro-actions .btn-outline::before{ background:var(--ink); }
.booking-intro-actions .btn-outline:hover{ color:var(--paper); border-color:var(--ink); }

.booking-step-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s5); flex-wrap:wrap; }
.booking-step-head h3{ margin:0; }
#selectedDateLabel{ font-family:var(--font-body); font-size:1rem; font-weight:400; color:#6b6558; }
.booking-back{
  background:none; border:none; font-family:inherit; font-size:0.85rem; color:var(--sage-deep);
  cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
}
.booking-back:hover{ color:var(--ink); }

/* Step 1: service picker */
.booking-service-list{ display:flex; flex-direction:column; gap:var(--s3); }
.booking-service-option{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; text-align:left; padding:var(--s4) var(--s5);
  border:1px solid var(--line); border-radius:12px; background:var(--cream);
  cursor:pointer; font-family:inherit;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.booking-service-option:hover{ border-color:var(--sage-deep); box-shadow:0 16px 32px -22px rgba(38,38,31,0.3); transform:translateY(-2px); }
.booking-service-option.selected{ border-color:var(--sage-deep); background:rgba(108,124,82,0.1); }
.bso-name{ display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--ink); }
.bso-meta{ display:block; font-size:0.85rem; color:#6b6558; margin-top:2px; }

/* Step 2: calendar */
.booking-calendar-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s4); }
.booking-calendar-nav button{
  background:var(--cream); border:1px solid var(--line); border-radius:50%;
  width:34px; height:34px; cursor:pointer; color:var(--sage-deep); font-size:1rem;
  display:flex; align-items:center; justify-content:center; transition:border-color 0.2s ease;
}
.booking-calendar-nav button:hover:not(:disabled){ border-color:var(--sage-deep); }
.booking-calendar-nav button:disabled{ opacity:0.3; cursor:default; }
#calMonthLabel{ font-family:var(--font-display); font-size:1.2rem; color:var(--ink); }

.booking-calendar-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.cal-dow{ text-align:center; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:#a39d8c; padding-bottom:8px; }
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:0.9rem; font-family:inherit; color:var(--ink);
  border:1px solid transparent; background:transparent;
}
.cal-day.empty{ visibility:hidden; }
.cal-day.available{ cursor:pointer; border-color:var(--line); background:var(--cream); }
.cal-day.available:hover{ border-color:var(--sage-deep); background:rgba(108,124,82,0.12); }
.cal-day.unavailable{ color:#c9c2af; cursor:default; }
.cal-day.selected{ background:var(--sage-deep); color:var(--cream); border-color:var(--sage-deep); }

.booking-calendar-key{ display:flex; gap:var(--s4); margin-top:var(--s4); font-size:0.78rem; color:#6b6558; }
.key-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.key-available{ background:var(--cream); border:1px solid var(--line); }
.key-unavailable{ background:#e5e0d2; }

/* Step 3: time slots */
.booking-time-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s3); }
.time-slot{
  padding:14px 8px; border:1px solid var(--line); border-radius:10px; background:var(--cream);
  cursor:pointer; font-family:inherit; font-size:0.92rem; text-align:center; color:var(--ink);
  transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.time-slot:hover{ border-color:var(--sage-deep); }
.time-slot.selected{ background:var(--sage-deep); color:var(--cream); border-color:var(--sage-deep); }
@media (max-width:520px){ .booking-time-grid{ grid-template-columns:repeat(2, 1fr); } }

/* Step 4: recap + consent */
.booking-recap.booking-summary{ margin-bottom:var(--s5); }
.booking-consent{ display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; color:#4a4a3f; margin:var(--s2) 0 var(--s4); }
.booking-consent input{ margin-top:3px; flex-shrink:0; }
.booking-error{ color:#a3453a; font-size:0.85rem; margin-top:var(--s2); }

/* Step 5: payment (Stripe integration placeholder) */
.payment-placeholder{ margin-bottom:var(--s4); }
.payment-placeholder .eyebrow{ margin-bottom:var(--s2); }
.payment-placeholder > p:not(.eyebrow){ color:#4a4a3f; margin-bottom:var(--s4); max-width:52ch; }
.payment-placeholder-box{
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:1.5px dashed var(--line); border-radius:12px;
  padding:var(--s6) var(--s4); background:var(--cream);
  color:#8a8574; font-size:0.9rem;
}
.payment-placeholder-box svg{ width:22px; height:22px; flex-shrink:0; }

/* Step 6: confirmation (reuses .confirmation-card / .booking-summary) */
.booking-step[data-step-panel="6"] .confirmation-card{ max-width:none; padding:0; }
.booking-step[data-step-panel="6"] .confirmation-mark{ margin-bottom:var(--s3); }
.booking-step[data-step-panel="6"] .confirmation-card .lede a{ color:var(--sage-deep); }

/* Get Started (package purchase) confirmation extras */
.gs-schedule-later{ margin-top:var(--s4) !important; font-size:0.85rem; color:#8a8574 !important; }
.gs-schedule-later a{ color:var(--sage-deep); }

/* ---------- ALIGNED workshop announcement modal (homepage only) ---------- */
.am-modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s3);
}
.am-modal[hidden]{ display:none; } /* needed: display:flex would otherwise beat the hidden attribute */

/* body class rather than an inline style, so it cannot fight the mobile menu's
   own scroll lock. overflow-y only, because body relies on overflow-x:clip. */
body.modal-lock{ overflow-y:hidden; }

.am-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(38,38,31,0.55);
  opacity:0; transition:opacity 0.35s ease;
}
.am-modal-card{
  position:relative; z-index:1;
  width:100%; max-width:430px; max-height:100%; overflow-y:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:var(--s5) var(--s4) var(--s4);
  text-align:center;
  box-shadow:0 30px 70px -30px rgba(38,38,31,0.55);
  opacity:0; transform:translateY(14px);
  transition:opacity 0.35s ease, transform 0.35s ease;
}
.am-modal.open .am-modal-backdrop{ opacity:1; }
.am-modal.open .am-modal-card{ opacity:1; transform:translateY(0); }

.am-modal-close{
  position:absolute; top:6px; right:6px;
  width:44px; height:44px; /* comfortable tap target */
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  color:#6b6558; border-radius:50%; padding:0;
}
.am-modal-close svg{ width:20px; height:20px; }
.am-modal-close:hover{ color:var(--ink); }

.am-modal-logo{ width:64px; height:auto; margin:0 auto var(--s3); }
.am-modal .eyebrow{ font-size:0.68rem; }
.am-modal-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 8vw, 2.5rem); line-height:1.1;
  color:var(--sage-deep);
  letter-spacing:0.2em; padding-left:0.2em; /* optical centering */
  margin:var(--s2) 0 var(--s2);
}
.am-modal-sub{
  font-family:var(--font-display); font-style:italic;
  font-size:1rem; color:#6b6558; margin-bottom:var(--s3);
}
.am-modal-body{ color:#4a4a3f; line-height:1.65; margin-bottom:var(--s3); }
.am-modal-meta{
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:#6b6558; margin-bottom:var(--s4);
}
.am-modal-cta{ width:100%; justify-content:center; }

@media (max-width:400px){
  .am-modal{ padding:var(--s2); }
  .am-modal-card{ padding:var(--s4) var(--s3) var(--s3); border-radius:16px; }
  .am-modal-title{ letter-spacing:0.14em; padding-left:0.14em; }
  .am-modal-body{ font-size:0.95rem; }
}

@media (prefers-reduced-motion: reduce){
  .am-modal-backdrop, .am-modal-card{ transition:none; }
  .am-modal-card{ transform:none; }
}