/* ============================================================
   HEARTWING HEALING / SITE STYLESHEET
   Built on the Heartwing brand system v1.

   Palette, type roles and proportion rules are documented in
   Heartwing-Brand-Style-Guide.html. Every hex here was sampled
   from the original heartwinghealing.com.

   Proportion:
     Patient-facing pages  sand 60 / blush 25 / pine 10 / coral 5
     Professional pages    pine 55 / blush 25 / sand 12 / gold 5
   ============================================================ */

:root{
  --pine:#003538;
  --pine-mid:#175857;
  --verdigris:#3D7576;
  --gold:#C9A961;         /* the metal in the logo. Large text and rules only. */
  --gold-deep:#A8873F;
  --sand:#E7D6B1;
  --sand-pale:#F2E8D2;
  --blush:#FDF5F4;
  --coral:#E07368;        /* brand coral. Reference value, not for small text. */
  --ink:#17201F;
  --ink-soft:#4A5754;

  /* Accessible variants. Erin's raw brand values fail WCAG AA at the sizes
     this site uses them: gold-deep eyebrows hit 2.4:1 on sand, and white on
     brand coral hits 3.1:1 at button size. These three are the tuned versions
     used wherever the text is small. Every one is still recognisably hers. */
  --gold-ink:#6B5318;     /* small text on light grounds. 5.1:1 on sand.   */
  --gold-pale:#E8D6A8;    /* small text on pine.          6.6:1 on pine.   */
  --coral-btn:#BF4F45;    /* button fill w/ white label.  4.8:1.           */
  --coral-btn-hover:#A63F36;
  --coral-light:#F0938A;  /* coral text on pine.          5.9:1 on pine.   */

  --display:'Amethysta',Georgia,serif;
  --body:'Lora',Georgia,serif;
  --util:'Josefin Sans',system-ui,sans-serif;

  --band:clamp(4rem,8vw,7rem);
  --max:1240px;
  --read:1000px;
  --hair:1px solid rgba(23,32,31,.14);
  --hair-gold:1px solid rgba(201,169,97,.3);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blush);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--verdigris)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.shell{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}
.shell--read{max-width:var(--read)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--gold);color:var(--pine);
  padding:.7rem 1.2rem;font-family:var(--util);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------------- type ---------------- */
.eyebrow{
  font-family:var(--util);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 1rem;
}
.eyebrow--onPine{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.01em;margin:0}
.h-page{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.04;margin:0 0 1.4rem;max-width:18ch}
.h-sec{font-size:clamp(1.85rem,3.8vw,2.9rem);line-height:1.12;color:var(--pine);margin:0 0 1.3rem;max-width:24ch}
.h-sec--wide{max-width:32ch}
.h-sub{font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.25;color:var(--pine-mid);margin:0 0 .6rem}
.onPine .h-sec,.onPine h1,.onPine h2,.onPine h3{color:var(--blush)}
.onPine .h-sub{color:var(--gold)}
.lede{font-size:1.13rem;line-height:1.7;max-width:62ch;margin:0 0 1.2rem}
.onPine .lede{color:rgba(253,245,244,.84)}
.prose p{max-width:66ch;margin:0 0 1.15rem}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600;color:var(--pine)}
.onPine .prose p{color:rgba(253,245,244,.84)}
.onPine .prose strong{color:var(--gold)}
.center{text-align:center}
.center .h-sec,.center .lede{margin-left:auto;margin-right:auto}

/* ---------------- bands ---------------- */
.band{padding:var(--band) 0}
.band--pine{background:var(--pine);color:var(--blush)}
.band--sand{background:var(--sand)}
.band--pale{background:var(--sand-pale)}
.band--blush{background:var(--blush)}
.band--tight{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;font-family:var(--util);font-weight:600;font-size:.84rem;
  letter-spacing:.1em;text-transform:uppercase;padding:1.1rem 2.2rem;
  border:1px solid transparent;border-radius:2px;text-decoration:none;cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn--primary{background:var(--coral-btn);color:#fff;border-color:var(--coral-btn)}
.btn--primary:hover{background:var(--coral-btn-hover);border-color:var(--coral-btn-hover);color:#fff}
.btn--ghost{background:transparent;color:var(--pine);border-color:rgba(23,88,87,.4)}
.btn--ghost:hover{background:rgba(23,88,87,.07);border-color:var(--pine-mid);color:var(--pine)}
/* .phero is a pine ground too, but it does not carry .onPine. Without it here,
   ghost buttons in every page hero rendered pine on pine and were invisible. */
.onPine .btn--ghost,.phero .btn--ghost{color:var(--gold);border-color:rgba(201,169,97,.55)}
.onPine .btn--ghost:hover,.phero .btn--ghost:hover{background:rgba(201,169,97,.12);border-color:var(--gold);color:var(--gold)}
.btn--sm{padding:.7rem 1.4rem;font-size:.72rem}
.btnrow{display:flex;flex-wrap:wrap;gap:1rem}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(0,53,56,.97);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:var(--hair-gold);
}
.nav__in{display:flex;align-items:center;gap:1rem;padding-top:.8rem;padding-bottom:.8rem}
.nav__brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;margin-right:auto;color:var(--blush)}
/* The logo file is a full lockup. At nav scale the wordmark turns to mush,
   so the mark is clipped to the winged heart only.
   The source is 500x500 with the heart occupying y74-299 and the wordmark
   below it. At 44px wide the scale is 0.088, so the heart lands at y6.5-26.3.
   The window must start at 6 and clear 27 or the base of the heart is cut off. */
.nav__brand .mark{width:44px;height:21px;overflow:hidden;flex:none;display:block}
.nav__brand .mark img{width:44px;height:auto;margin-top:-6px}
.nav__brand span{font-family:var(--util);font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blush);line-height:1.3;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.nav__links > li{position:relative}
.nav__links a{
  display:block;font-family:var(--util);font-size:.75rem;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(253,245,244,.78);
  text-decoration:none;padding:.65rem .62rem;transition:color .2s ease;white-space:nowrap;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--gold)}
.nav__links a[aria-current="page"]{border-bottom:1px solid var(--gold)}
.nav__drop > button{
  font-family:var(--util);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(253,245,244,.78);background:none;border:0;padding:.65rem .62rem;cursor:pointer;white-space:nowrap;
}
.nav__drop > button:hover,.nav__drop[data-open="true"] > button{color:var(--gold)}
.nav__drop > button::after{content:"\203A";display:inline-block;transform:rotate(90deg);margin-left:.4rem;font-size:.9rem}
.nav__menu{
  position:absolute;top:100%;left:0;min-width:250px;background:var(--pine);
  border:var(--hair-gold);list-style:none;margin:0;padding:.4rem 0;display:none;
}
.nav__drop[data-open="true"] .nav__menu{display:block}
.nav__menu a{padding:.6rem 1.1rem;letter-spacing:.08em;text-transform:none;font-size:.85rem}
.nav__cta{margin-left:.5rem;white-space:nowrap}
.nav__toggle{display:none;background:none;border:0;color:var(--blush);cursor:pointer;
  font-family:var(--util);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:.6rem}

/* ---------------- page hero ---------------- */
.phero{position:relative;background:var(--pine);color:var(--blush);
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 82% 8%,rgba(61,117,118,.5) 0%,rgba(0,53,56,0) 62%)}
.phero__in{position:relative;z-index:1}
.phero__mark{width:clamp(84px,9vw,112px);margin:0 0 2rem;opacity:.95}
.phero h1{color:var(--blush)}
.phero h1 em{font-style:normal;color:var(--gold)}
.phero__deck{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.65;
  color:rgba(253,245,244,.82);max-width:56ch;margin:0 0 2.2rem}
.phero__note{font-family:var(--util);font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(253,245,244,.75);margin:1.2rem 0 0}
.phero__note b{color:var(--gold);font-weight:500}

/* fact strip */
.facts{margin-top:clamp(2.5rem,5vw,4rem);border-top:var(--hair-gold);
  display:grid;grid-template-columns:repeat(4,1fr)}
.facts div{padding:1.5rem 1.4rem 0 0}
.facts dt{font-family:var(--util);font-size:.67rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(253,245,244,.72);margin:0 0 .4rem}
.facts dd{margin:0;font-family:var(--display);font-size:clamp(1.2rem,1.9vw,1.7rem);
  line-height:1.15;color:var(--gold)}
.facts dd small{display:block;font-family:var(--body);font-size:.8rem;
  color:rgba(253,245,244,.66);margin-top:.3rem}

/* ---------------- layout helpers ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.split--portrait{grid-template-columns:340px 1fr}
.pull{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.35;
  color:var(--pine-mid);margin:2.4rem 0 0;padding-left:1.5rem;border-left:2px solid var(--gold)}
.onPine .pull{color:var(--gold);border-left-color:rgba(201,169,97,.5)}

/* portrait with offset gold frame */
.frame{position:relative;display:block}
.frame img{width:100%;border-radius:2px;position:relative;z-index:1}
.frame::after{content:"";position:absolute;inset:16px -16px -16px 16px;
  border:1px solid var(--gold);border-radius:2px;z-index:0}

/* credential list */
.creds{list-style:none;margin:1.8rem 0 0;padding:0;border-top:var(--hair)}
.creds li{padding:.72rem 0;border-bottom:1px solid rgba(23,32,31,.09);
  font-family:var(--util);font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft)}

/* ---------------- panels grid ---------------- */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(23,32,31,.14);border:var(--hair);margin-top:2.4rem}
.panels--2{grid-template-columns:repeat(2,1fr)}
.panels > div{background:var(--sand);padding:1.8rem 1.6rem}
.band--sand .panels > div{background:var(--sand)}
.band--blush .panels > div,.band--pale .panels > div{background:var(--blush)}
.panels h3,.panels h4{font-family:var(--util);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pine-mid);margin:0 0 .7rem}
.panels p{margin:0;font-size:.98rem;line-height:1.6;color:var(--ink)}

/* ---------------- cards (courses, media, episodes) ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.2rem,2.5vw,2rem);margin-top:2.4rem}
.cards--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.cards--2{grid-template-columns:1fr}}
.card{
  background:var(--blush);border:var(--hair);border-radius:2px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .22s ease,transform .22s ease;
}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card__top{background:var(--pine);padding:1.6rem 1.5rem;border-bottom:1px solid rgba(201,169,97,.28);
  min-height:132px;display:flex;flex-direction:column;justify-content:flex-end}
.card__tier{font-family:var(--util);font-size:.64rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;align-self:flex-start;padding:.24rem .6rem;border-radius:2px;margin-bottom:.9rem}
.card__tier--free{background:rgba(201,169,97,.2);color:var(--gold-pale);border:1px solid rgba(201,169,97,.45)}
.card__tier--paid{background:var(--gold);color:var(--pine)}
.card__top h3{font-size:1.35rem;line-height:1.2;color:var(--blush)}
.card__body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.card__body p{margin:0 0 1.3rem;font-size:.99rem;line-height:1.6;color:var(--ink-soft)}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card__price{font-family:var(--display);font-size:1.3rem;color:var(--pine)}
.card__price small{font-family:var(--util);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);display:block}

/* feature card (master course) */
.feature{
  background:var(--pine);color:var(--blush);border:1px solid var(--gold);
  padding:clamp(2rem,4vw,3.2rem);display:grid;grid-template-columns:1.4fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:center;margin-top:2.4rem;
}
.feature h3{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.14;color:var(--blush);margin:0 0 1rem}
.feature p{color:rgba(253,245,244,.82);margin:0 0 1.6rem;font-size:1.03rem}
.feature__facts{list-style:none;margin:0;padding:0;border-top:var(--hair-gold)}
.feature__facts li{padding:.7rem 0;border-bottom:1px solid rgba(201,169,97,.18);
  font-family:var(--util);font-size:.78rem;letter-spacing:.08em;color:rgba(253,245,244,.8)}
.feature__facts b{color:var(--gold);font-weight:500}

/* ---------------- fees ---------------- */
.fees{list-style:none;margin:2.2rem 0 0;padding:0;max-width:640px}
.fees li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1.1rem 0;border-bottom:var(--hair)}
.fees li:first-child{border-top:var(--hair)}
.fees .what{font-family:var(--display);font-size:1.2rem;color:var(--pine)}
.fees .amt{font-family:var(--display);font-size:1.5rem;color:var(--gold-ink);white-space:nowrap}
.fees__note{margin-top:1.6rem;font-size:.95rem;line-height:1.65;color:var(--ink-soft);max-width:62ch}

/* ---------------- casebook axis (master course curriculum) ---------------- */
.axis{position:relative;padding-left:clamp(3rem,6vw,5.5rem)}
.axis::before{content:"";position:absolute;left:clamp(.9rem,1.8vw,1.8rem);top:.75rem;bottom:.75rem;width:1px;
  background:linear-gradient(180deg,rgba(201,169,97,0) 0%,var(--gold) 8%,var(--gold) 92%,rgba(201,169,97,0) 100%)}
.mv{position:relative;padding:clamp(1.6rem,3vw,2.3rem) 0;border-top:var(--hair)}
.mv:first-child{border-top:0;padding-top:0}
.mv::before{content:"";position:absolute;
  left:calc(clamp(.9rem,1.8vw,1.8rem) - clamp(3rem,6vw,5.5rem) - 3.5px);
  top:calc(clamp(1.6rem,3vw,2.3rem) + .62em);
  width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--sand)}
.mv:first-child::before{top:.62em}
.mv__n{position:absolute;left:calc(-1 * clamp(3rem,6vw,5.5rem));width:clamp(2rem,4vw,3.4rem);
  top:calc(clamp(1.6rem,3vw,2.3rem) + .12em);font-family:var(--display);font-size:1.05rem;
  letter-spacing:.08em;color:var(--gold-ink)}
.mv:first-child .mv__n{top:.12em}
.mv h3{font-size:clamp(1.28rem,2.1vw,1.7rem);line-height:1.2;color:var(--pine);margin:0 0 .55rem}
.mv p{margin:0;max-width:62ch;color:var(--ink-soft);font-size:1.01rem}
.mv__tag{display:inline-block;margin-top:.8rem;font-family:var(--util);font-size:.65rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pine-mid);
  border:1px solid rgba(23,88,87,.3);padding:.26rem .68rem;border-radius:2px}

/* ---------------- outcomes ---------------- */
.outcomes{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:0 clamp(2rem,4vw,3.5rem)}
.outcomes li{padding:1.35rem 0;border-top:var(--hair-gold);font-size:1.01rem;line-height:1.6;
  color:rgba(253,245,244,.86)}
.outcomes li b{display:block;font-family:var(--display);font-weight:400;font-size:1.16rem;
  color:var(--gold);margin-bottom:.32rem;line-height:1.3}

/* ---------------- yes / no ---------------- */
.forwho{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(201,169,97,.3);border:var(--hair-gold);margin-top:2.4rem}
.forwho > div{background:var(--pine);padding:1.9rem 1.8rem}
.forwho h3{font-family:var(--util);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 1rem}
.forwho .yes h3{color:var(--gold)}
.forwho .no h3{color:var(--coral-light)}
.forwho ul{margin:0;padding:0;list-style:none}
.forwho li{padding:.52rem 0 .52rem 1.5rem;position:relative;font-size:.98rem;line-height:1.55;
  color:rgba(253,245,244,.85)}
.forwho li::before{position:absolute;left:0;top:.52rem;font-family:var(--util);font-size:.9rem}
.forwho .yes li::before{content:"+";color:var(--gold)}
.forwho .no li::before{content:"\2013";color:var(--coral-light)}

/* ---------------- price card ---------------- */
.price{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.price__card{border:1px solid var(--gold);padding:clamp(2rem,4vw,2.8rem);background:rgba(201,169,97,.07)}
.price__early{font-family:var(--util);font-size:.67rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pine);background:var(--gold);display:inline-block;
  padding:.3rem .72rem;border-radius:2px;margin-bottom:1.3rem}
.price__now{font-family:var(--display);font-size:clamp(2.7rem,5.5vw,3.9rem);line-height:1;color:var(--pine);margin:0 0 .45rem}
.price__was{font-family:var(--util);font-size:.88rem;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 1.5rem}
.price__terms{list-style:none;margin:0 0 1.9rem;padding:0}
.price__terms li{padding:.58rem 0;border-top:var(--hair);font-size:.96rem;color:var(--ink-soft)}
.price__fine{font-size:.89rem;line-height:1.6;color:var(--ink-soft);margin:1.3rem 0 0;max-width:52ch}

/* ---------------- steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,169,97,.3);
  border:var(--hair-gold);margin:2.6rem 0;text-align:left}
.steps > div{background:var(--pine);padding:1.6rem 1.5rem}
.steps dt{font-family:var(--util);font-size:.65rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.45rem}
.steps dd{margin:0;font-size:.96rem;line-height:1.55;color:rgba(253,245,244,.82)}

/* ---------------- FAQ ---------------- */
.faq{max-width:78ch;margin-top:2.4rem}
.faq details{border-top:var(--hair)}
.faq details:last-of-type{border-bottom:var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-family:var(--display);font-size:1.1rem;line-height:1.4;color:var(--pine)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:1.2rem;font-family:var(--util);
  font-size:1.3rem;color:var(--gold-ink);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 2.5rem 1.5rem 0;margin:0;color:var(--ink-soft);font-size:1rem;max-width:66ch}

/* ---------------- media / embeds ---------------- */
.embed{border:var(--hair);background:#fff;border-radius:2px;overflow:hidden}
.embed iframe{display:block;width:100%;border:0}
.mediaitem{padding:1.5rem 0;border-top:var(--hair)}
.mediaitem:first-of-type{border-top:0}
.mediaitem h3{font-size:1.25rem;color:var(--pine);margin:0 0 .3rem}
.mediaitem p{margin:0;color:var(--ink-soft);font-size:.97rem}

/* episode list */
.eps{list-style:none;margin:2.2rem 0 0;padding:0}
.eps li{padding:1.5rem 0;border-top:var(--hair)}
.eps li:last-child{border-bottom:var(--hair)}
.eps h3{font-size:1.28rem;color:var(--pine);margin:0 0 .4rem}
.eps h3 a{color:inherit;text-decoration:none}
.eps h3 a:hover{color:var(--verdigris)}
.eps .meta{font-family:var(--util);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 .5rem}
.eps p{margin:0;color:var(--ink-soft);font-size:.98rem;max-width:70ch}

/* ---------------- forms ---------------- */
.form{max-width:560px}
.form label{display:block;font-family:var(--util);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pine-mid);margin:0 0 .4rem}
.form .field{margin-bottom:1.2rem}
.form input,.form textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;border:var(--hair);border-radius:2px;padding:.85rem .95rem;
}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--gold)}
.onPine .form label{color:var(--gold)}
.onPine .form input,.onPine .form textarea{background:rgba(253,245,244,.06);
  border-color:rgba(201,169,97,.35);color:var(--blush)}
.form__note{font-size:.86rem;color:var(--ink-soft);margin:.2rem 0 1.4rem}
.onPine .form__note{color:rgba(253,245,244,.78)}

/* contact rail */
.rail{list-style:none;margin:0;padding:0}
.rail li{padding:1.1rem 0;border-top:var(--hair)}
.rail li:last-child{border-bottom:var(--hair)}
.rail dt{font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.3rem}
.rail dd{margin:0;font-family:var(--display);font-size:1.25rem;color:var(--pine)}
.rail dd a{color:inherit;text-decoration:none}
.rail dd a:hover{color:var(--verdigris)}

/* ---------------- footer ---------------- */
.foot{background:var(--pine);color:rgba(253,245,244,.62);padding:clamp(3rem,6vw,4.5rem) 0 2.2rem}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;
  border-bottom:var(--hair-gold)}
.foot__brand .mark{width:74px;margin-bottom:1.1rem;opacity:.95}
.foot__brand p{margin:0;font-size:.95rem;line-height:1.6;color:rgba(253,245,244,.7);max-width:34ch}
.foot h2{font-family:var(--util);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55rem}
.foot a{color:rgba(253,245,244,.72);text-decoration:none;font-size:.95rem}
.foot a:hover{color:var(--gold)}
.foot__base{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;padding-top:1.6rem}
.foot__base p{margin:0;font-family:var(--util);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(253,245,244,.66)}
.foot__disc{max-width:70ch;margin-top:1.2rem;font-size:.82rem;line-height:1.6;color:rgba(253,245,244,.66)}

/* ---------------- motion ---------------- */
/* Content is visible by default. The script opts in by adding .js-reveal,
   so a script failure can never leave a section permanently blank. */
.rise{transition:opacity .6s ease,transform .6s ease}
.js-reveal .rise{opacity:0;transform:translateY(24px)}
.js-reveal .rise.in{opacity:1;transform:none}
.phero__mark,.phero h1,.phero__deck,.phero .btnrow,.phero__note,.facts{
  animation:heroIn .9s cubic-bezier(.22,.61,.36,1) both}
.phero h1{animation-delay:.08s}
.phero__deck{animation-delay:.16s}
.phero .btnrow{animation-delay:.24s}
.phero__note{animation-delay:.3s}
.facts{animation-delay:.38s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal .rise,.rise{opacity:1;transform:none;transition:none}
  .phero__mark,.phero h1,.phero__deck,.phero .btnrow,.phero__note,.facts{animation:none}
  .faq summary::after,.card{transition:none}
  .card:hover{transform:none}
}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){
  .nav__links{
    position:fixed;inset:56px 0 auto 0;background:var(--pine);flex-direction:column;
    align-items:stretch;gap:0;padding:1rem 0 1.6rem;border-bottom:var(--hair-gold);display:none;
    max-height:calc(100vh - 56px);overflow-y:auto;
  }
  .nav[data-open="true"] .nav__links{display:flex}
  .nav__links a,.nav__drop > button{padding:.9rem clamp(1.25rem,4vw,3.5rem);width:100%;text-align:left}
  .nav__menu{position:static;display:block;border:0;border-left:2px solid rgba(201,169,97,.35);
    margin:0 0 .5rem clamp(1.25rem,4vw,3.5rem);min-width:0}
  .nav__menu a{padding-left:1rem}
  .nav__drop > button::after{display:none}
  .nav__toggle{display:block}
  .nav__cta{display:none}
  .nav__links .nav__cta-m{display:block;margin:.8rem clamp(1.25rem,4vw,3.5rem) 0}
  .nav__links .nav__cta-m a{background:var(--coral-btn);color:#fff;text-align:center;
    border-radius:2px;font-weight:600;letter-spacing:.1em}
  .nav__links .nav__cta-m a:hover{color:#fff;background:var(--coral-btn-hover)}
}
@media (min-width:1041px){ .nav__cta-m{display:none} }

@media (max-width:960px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts div{padding-right:1rem}
  .split,.split--portrait,.price,.feature{grid-template-columns:1fr}
  .split--portrait .frame{max-width:320px}
  .steps,.panels{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:16px}
  .facts,.steps,.panels,.panels--2,.forwho{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
  .btn--sm,.btnrow .btn{width:auto}
  .btnrow{flex-direction:column;align-items:stretch}
  .btnrow .btn{width:100%}
  /* Margin numerals collide with the axis rule at narrow widths, so below 640px
     they sit inline above the movement title instead. */
  .axis{padding-left:1.9rem}
  .axis::before{left:.35rem}
  .mv::before{left:calc(.35rem - 1.9rem - 3.5px)}
  .mv__n{position:static;display:block;width:auto;font-size:.95rem;letter-spacing:.18em;margin-bottom:.3rem}
  .fees li{flex-direction:column;gap:.2rem}
}

/* ================= podcast episode list ================= */
/* Search + accordion rows with an inline player. All 107 episodes are in the
   DOM; .is-extra hides everything past the first batch until "show more". */
.epsearch{margin:2.2rem 0 .5rem;max-width:560px}
.epsearch__label{display:block;font-family:var(--util);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pine-mid);margin-bottom:.5rem}
.epsearch__input{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;
  border:var(--hair);border-radius:2px;padding:.85rem .95rem;
}
.epsearch__input:focus{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:2px}
.epsearch__count{font-family:var(--util);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin:.6rem 0 0;min-height:1em}

.eps{list-style:none;margin:1.6rem 0 0;padding:0}
.ep{border-top:var(--hair)}
.ep:last-child{border-bottom:var(--hair)}
/* Two independent states: paging (is-extra / is-shown) and search filtering.
   Search must always win, so its selectors carry higher specificity. Equal
   specificity here meant a revealed episode could not be filtered out. */
.ep.is-extra{display:none}
.ep.is-extra.is-shown{display:block}
.eps.is-filtering .ep,
.eps.is-filtering .ep.is-extra,
.eps.is-filtering .ep.is-extra.is-shown{display:none}
.eps.is-filtering .ep.is-match,
.eps.is-filtering .ep.is-extra.is-match{display:block}

.ep__head{
  width:100%;display:flex;align-items:center;gap:1.1rem;text-align:left;
  background:none;border:0;padding:1.1rem 0;cursor:pointer;color:inherit;
}
.ep__head:hover .ep__title{color:var(--verdigris)}
/* Square, matching the show cover. If a host ever supplies real 16:9 episode
   art, widen this box and object-fit:cover will do the rest. */
.ep__art{width:76px;height:76px;flex:none;border-radius:2px;object-fit:cover;background:var(--pine)}
.ep__text{display:flex;flex-direction:column;gap:.28rem;min-width:0;flex:1}
.ep__meta{font-family:var(--util);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink)}
.ep__title{font-family:var(--display);font-size:1.18rem;line-height:1.3;color:var(--pine);
  transition:color .2s ease}
.ep__chev{font-family:var(--util);font-size:1.4rem;color:var(--gold-ink);flex:none;
  width:1.6rem;text-align:center;transition:transform .25s ease}
.ep[data-open="true"] .ep__chev{transform:rotate(45deg)}

.ep__panel{padding:0 0 1.5rem 0}
@media (min-width:620px){ .ep__panel{padding-left:calc(76px + 1.1rem)} }
.ep__synopsis{margin:0 0 1rem;color:var(--ink-soft);font-size:1rem;line-height:1.6;max-width:64ch}
.ep__audio{width:100%;max-width:520px;display:block;margin-bottom:1rem}
.ep__link{font-family:var(--util);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pine-mid);text-decoration:none;
  border-bottom:1px solid rgba(23,88,87,.35);padding-bottom:.15rem}
.ep__link:hover{color:var(--verdigris);border-bottom-color:var(--verdigris)}

.epmore{margin-top:2rem}
.epmore.is-done{display:none}
.epsearch__count.is-empty{color:var(--coral-btn)}

@media (max-width:560px){
  .ep__art{width:58px;height:58px}
  .ep__title{font-size:1.05rem}
  .ep__head{gap:.85rem}
}

.ep__badge{
  display:inline-block;font-family:var(--util);font-size:.6rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pine);
  background:var(--gold);padding:.1rem .4rem;border-radius:2px;margin-right:.6rem;
  vertical-align:.08em;
}
.ep__links{display:flex;flex-wrap:wrap;gap:1.4rem}

/* tuition options table */
.paytable{width:100%;border-collapse:collapse;margin:1.8rem 0 1rem;font-size:.97rem}
.paytable caption{
  font-family:var(--util);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink);text-align:left;margin-bottom:.7rem;
}
.paytable th,.paytable td{padding:.7rem .6rem;border-bottom:var(--hair);text-align:left}
.paytable thead th{
  font-family:var(--util);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pine-mid);border-bottom:1px solid rgba(23,32,31,.28);
}
.paytable tbody th{font-family:var(--body);font-weight:400;color:var(--ink)}
.paytable td{font-family:var(--display);color:var(--pine)}
.paytable th:first-child,.paytable td:first-child{padding-left:0}

/* photo frames: <picture> must be a block so the offset gold rule lines up */
.frame picture{display:block}
/* image on the right of a split, with the gold offset mirrored inward */
.split--portrait-right{grid-template-columns:1fr 340px;align-items:center}
.frame--right::after{inset:16px 16px -16px -16px}
@media (max-width:960px){
  .split--portrait-right{grid-template-columns:1fr}
  .split--portrait-right .frame{max-width:320px}
}

/* early-bird price card: label above, regular price below, so the discount reads */
.price__label{
  font-family:var(--util);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pine-mid);margin:0 0 .2rem;
}
.price__after{
  font-size:.92rem;color:var(--ink-soft);margin:.55rem 0 1.6rem;font-style:italic;
}
.price__after strong{color:var(--pine);font-weight:600}

/* ---------------- embedded order form ----------------
   The GHL order form is framed in from start.heartwinghealing.com. It does
   not report its height to the parent, so the height is fixed in markup and
   set deliberately long. A little dead space below the button is far better
   than a pay button cut off by the frame edge. */
.orderframe{background:#fff;border:1px solid rgba(201,169,97,.45);border-radius:2px;
  margin:2.2rem auto 0;max-width:720px;overflow:hidden}
.orderframe iframe{display:block;width:100%;border:0}
.orderframe__note{max-width:60ch;margin:1.1rem auto 0;font-family:var(--util);
  font-size:.76rem;line-height:1.6;letter-spacing:.02em;color:rgba(253,245,244,.62)}
@media (max-width:640px){.orderframe{margin-top:1.6rem}}

/* ---------------- embedded GHL form widget ----------------
   These report their height back through form_embed.js, so unlike the order
   form frame the height here self-corrects. The inline value is only what is
   shown for the instant before the script runs. */
.formframe{background:#fff;border:1px solid rgba(201,169,97,.45);border-radius:4px;
  margin:2.4rem auto 0;max-width:640px;overflow:hidden}
.formframe iframe{display:block;width:100%;border:0}

/* ---------------- GHL booking calendar ----------------
   Height is set at runtime by the listener in site.js. The inline value is a
   floor, not a target. Scrolling is left on deliberately: if the height
   handshake ever breaks, a visitor can still reach the submit button instead
   of being stranded on a clipped form. */
.calframe{background:#fff;border:1px solid rgba(201,169,97,.45);border-radius:2px;
  overflow:hidden;max-width:860px;margin:0 auto}
.calframe iframe{display:block;width:100%;border:0}
.calpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.calpair .h-sub{margin-bottom:.9rem;text-align:center}
@media (max-width:900px){.calpair{grid-template-columns:1fr;gap:2.6rem}}

/* ---------------- video delivery pages ---------------- */
.videoframe{background:#000;border:1px solid rgba(201,169,97,.45);border-radius:2px;
  overflow:hidden;margin:0 auto;max-width:900px}
.videoframe video{display:block;width:100%;height:auto}
/* Vimeo carries its own padding-ratio wrapper, so no aspect rule here. */
.videoframe iframe{border:0}