/* Yasmine Schillebeeckx, guide pages. HER palette, read from outofthewoodscounselling.net site.css (1 Oct 2026):
   terracotta #d4967d, slate #495a58, oat #e5e3dc, text #303636. Fraunces (display) + Roboto (body), as in her guide PDF. */
:root{
  --terra:#d4967d; --terra-deep:#a8634a; --slate:#495a58; --oat:#e5e3dc; --cream:#f6f3ec; --ink:#303636; --muted:#5d6564; --white:#fff;
  --display:'Fraunces',Georgia,serif; --body:'Roboto',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra-deep)}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.preview{background:#b8573a;color:#fff;text-align:center;font-size:14px;padding:8px 16px}

/* hero: photograph behind the letters. 12 Oct: HER photo (misty forest, the one on her website main page and Zanda portal),
   darkened with an even slate scrim and white centred text, the same treatment as her own site. */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:url(hero-forest.jpg) center 45%/cover no-repeat;padding:80px 20px}
.hero::before{content:"";position:absolute;inset:0;background:rgba(36,42,42,.62)}
.hero .brand,.hero h1,.hero .sub{color:#fff}
.hero .note{color:rgba(255,255,255,.85)}
.hero .btn{background:var(--terra-deep)}
.hero .btn:hover,.hero .btn:focus{background:#8f5340}
.hero .inner{position:relative;max-width:760px}
.brand{font-family:var(--body);text-transform:uppercase;letter-spacing:.22em;font-size:13px;color:var(--slate);margin:0 0 28px;font-weight:500}
h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,5.4vw,56px);line-height:1.15;color:var(--ink);margin:0 0 22px}
.sub{font-size:clamp(18px,2.2vw,21px);color:var(--ink);max-width:620px;margin:0 auto 34px}
.btn{display:inline-block;background:var(--slate);color:#fff;border:0;border-radius:40px;padding:16px 34px;font:500 17px var(--body);
  cursor:pointer;text-decoration:none;transition:background .2s}
.btn:hover,.btn:focus{background:var(--ink)}
.note{font-size:14px;color:var(--muted);margin-top:14px}

section{padding:72px 0}
section.alt{background:var(--white)}
section.oat{background:var(--oat)}
h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.6vw,38px);line-height:1.2;margin:0 0 26px;color:var(--ink)}
.lines p{margin:0 0 16px}
.lines p.last{font-weight:500;color:var(--slate)}
ul.inside{list-style:none;padding:0;margin:0}
ul.inside li{position:relative;padding:0 0 18px 34px}
ul.inside li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:14px;border-radius:50%;background:var(--terra)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split>*{min-width:0}
.split img{border-radius:14px;width:100%}
.cover{background:var(--terra);color:#fff;border-radius:10px;padding:38px 30px;box-shadow:0 18px 40px rgba(48,54,54,.18);max-width:320px;margin:0 auto;aspect-ratio:210/297;display:flex;flex-direction:column;justify-content:space-between}
.cover small{letter-spacing:.2em;text-transform:uppercase;font-size:10px}
.cover strong{font-family:var(--display);font-weight:500;font-size:25px;line-height:1.2;display:block}
.cover span{font-size:12px;opacity:.95}
.permission{text-align:center}
.permission p{font-size:20px;max-width:640px;margin:0 auto 16px}
.about{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start}
.about img{border-radius:50%;width:200px;height:200px;object-fit:cover}
.final{text-align:center}
footer{background:var(--slate);color:#e9ece9;font-size:14px;padding:36px 0;line-height:1.6}
footer a{color:#fff}
footer p{margin:0 0 10px}
footer .crisis{font-size:17px;line-height:1.6;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.2)}

.list-head{font-family:var(--display);font-weight:500;font-size:24px;margin:44px 0 18px}
ul.sub-list{list-style:none;padding:8px 0 0;margin:0;columns:2;column-gap:28px;font-size:16px}
ul.sub-list li{padding:0 0 6px 16px;position:relative;break-inside:avoid}
ul.sub-list li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--slate)}
.care{background:var(--white);border-left:4px solid var(--terra);border-radius:0 10px 10px 0;text-align:left;font-size:16px;padding:20px 24px;margin:44px auto 30px;max-width:620px}
.care p{margin:0 0 10px}
.warm{font-family:var(--display);font-size:22px;color:var(--slate)}
@media (max-width:720px){ul.sub-list{columns:1}}

/* sign-up modal: lazy, opened by the buttons (forms are pop-ups) */
.modal{position:fixed;inset:0;background:rgba(48,54,54,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.open{display:flex}
.modal .box{background:var(--cream);border-radius:14px;max-width:480px;width:100%;padding:34px 28px;position:relative;max-height:90vh;overflow:auto}
.modal .close{position:absolute;top:8px;right:14px;background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--ink)}
.modal h3{font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 8px}
.pending{border:2px dashed var(--terra);border-radius:10px;padding:18px;font-size:15px;color:var(--muted);margin-top:16px}
/* her MailerLite form, in her palette */
.ml-form-embedContainer{width:100%;margin-top:14px}
.ml-form-fieldRow{margin:0 0 12px}
.ml-form-embedContainer input.form-control{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid #cfcac0;border-radius:8px;background:#fff;font:400 17px var(--body);color:var(--ink)}
.ml-form-embedContainer input.form-control:focus{outline:2px solid var(--terra);border-color:var(--terra)}
.ml-form-embedSubmit{margin-top:6px}
.ml-form-embedSubmit button.primary{width:100%;background:var(--slate);color:#fff;border:0;border-radius:40px;padding:15px 20px;font:500 17px var(--body);cursor:pointer}
.ml-form-embedSubmit button.primary:hover{background:var(--ink)}
.ml-form-embedSubmit button.loading{width:100%;background:var(--slate);border:0;border-radius:40px;padding:15px}
.ml-form-embedSubmitLoad{display:inline-block;width:18px;height:18px;border:3px solid #fff;border-right-color:transparent;border-radius:50%;animation:mlspin 1s linear infinite}
@keyframes mlspin{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.ml-error input.form-control{border-color:#b3261e}
.ml-form-successContent p{font-size:17px}

/* thank-you */
.ty{min-height:70vh;display:flex;align-items:center}
.ty .inner{text-align:center}

@media (max-width:720px){
  body{font-size:17px}
  section{padding:54px 0}
  .split,.about{grid-template-columns:1fr}
  .about img{margin:0 auto}
  .hero{min-height:auto}
}