/* =========================================================================
   Resting in Awareness — site styles
   Palette + type live here. Edit the :root variables to re-skin the whole site.
   ========================================================================= */

:root{
  --olive:#586b32;        /* deep olive green   */
  --olive-dark:#46562a;   /* hover / accents    */
  --cream:#f6fbd9;        /* pale cream-green   */
  --ink:#0f0f0d;          /* near-black bands   */
  --text-dark:#3a3f2c;    /* body text on cream */
  --text-light:#f6fbd9;   /* text on dark/olive */
  --maxw:1180px;
  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-body:"Jost", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}

/* skip link (a11y) */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:1100;
  background:var(--ink);color:var(--text-light);
  padding:.7rem 1.1rem;border-radius:6px;transition:top .2s;
}
.skip-link:focus{top:12px}

/* visible keyboard focus */
:focus-visible{outline:3px solid #c9d98a;outline-offset:3px;border-radius:3px}
body{
  font-family:var(--font-body);
  color:var(--text-dark);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1}

/* ---- reusable bits ---------------------------------------------------- */
.inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.95rem;letter-spacing:.04em;
  padding:.95em 2.6em;border-radius:999px;
  background:var(--olive);color:var(--text-light);
  border:1px solid var(--olive);
  transition:background .25s,color .25s,transform .25s;
  cursor:pointer;
}
.btn:hover{background:transparent;color:var(--olive)}
.btn--ghost{background:rgba(70,86,42,.55);color:var(--text-light);
  border-color:var(--text-light);backdrop-filter:blur(2px)}
.btn--ghost:hover{background:var(--text-light);color:var(--olive)}
.btn--dark{background:var(--ink);border-color:var(--ink);color:var(--text-light)}
.btn--dark:hover{background:transparent;color:var(--ink)}

.eyebrow{font-family:var(--font-body);letter-spacing:.22em;text-transform:uppercase;
  font-size:.72rem;opacity:.92}
.italic{font-style:italic}
.nowrap{white-space:nowrap}

/* fade-up on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:flex-end;
  padding:26px 40px;transition:background .3s,padding .3s;
}
.nav:not(.scrolled){background:linear-gradient(rgba(10,14,5,.55),rgba(10,14,5,0))}
.nav.scrolled{background:rgba(15,15,13,.9);backdrop-filter:blur(6px);padding:16px 40px}
.nav ul{display:flex;gap:38px;list-style:none}
.nav a{color:#fff;font-size:.95rem;letter-spacing:.05em;
  text-shadow:0 1px 4px rgba(0,0,0,.55)}
.nav a:hover{text-decoration:underline;text-underline-offset:6px}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
  width:44px;height:44px;line-height:1;padding:0;margin:-6px}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  min-height:100vh;display:flex;align-items:center;
  color:#fff;text-align:center;
  background:linear-gradient(rgba(30,40,15,.35),rgba(30,40,15,.45)),
             url("../../images/bg-hero.jpg") center/cover no-repeat fixed;
}
.hero::before{content:"";position:absolute;inset:0;backdrop-filter:blur(3px);pointer-events:none}
.hero{position:relative}
.hero .inner{position:relative;z-index:1}
.hero h1{font-size:clamp(3rem,8vw,6.4rem);font-weight:600;letter-spacing:.01em}
.hero p{max-width:640px;margin:1.4rem auto 2.6rem;font-size:1.05rem;opacity:.95}

/* =========================================================================
   ABOUT  (split: olive left / cream right)
   ========================================================================= */
.about{display:grid;grid-template-columns:1fr 1fr}
.about__left{
  background:var(--olive);color:var(--text-light);
  padding:7rem 5rem;display:flex;flex-direction:column;gap:2.5rem;
}
.about__left h2{font-size:2.6rem}
.about__portrait{border-radius:6px;aspect-ratio:4/5;object-fit:cover;width:100%}
.about__right{
  background:var(--cream);padding:7rem 5rem;
  display:flex;flex-direction:column;gap:1.3rem;text-align:center;
  align-items:center;justify-content:center;
}
.about__right .lead{font-size:1.15rem;color:var(--olive)}
.about__right p{max-width:520px}

/* education block inside About (consistent fonts, no new section) */
.edu{margin:1.8rem auto 0;text-align:center;width:100%;max-width:520px}
.edu-heading{font-family:var(--font-display);font-size:1.5rem;
  color:var(--olive);margin-bottom:1rem}
.edu-list{list-style:none;display:flex;flex-direction:column;gap:.8rem;
  font-family:var(--font-body);font-size:.97rem;line-height:1.5}
.edu-sub{display:block;font-size:.88rem;opacity:.78}
.edu-reg{margin-top:1.2rem;font-size:.85rem;color:var(--olive);opacity:.9}

/* =========================================================================
   HOW I WORK  (olive band: who I work alongside + my approach)
   ========================================================================= */
.howiwork{background:var(--olive);color:var(--text-light);padding:7rem 0}
.hiw-block{max-width:760px;margin:0 auto;text-align:center}
.hiw-block + .hiw-block{margin-top:4rem}
.hiw-block h2{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:1.4rem}
.hiw-block p{font-family:var(--font-body);font-size:1.05rem;line-height:1.9;opacity:.95}

/* =========================================================================
   PSYCHOTHERAPY  (new section)
   ========================================================================= */
.therapy{background:var(--ink);color:var(--text-light);padding:7rem 0;text-align:center}
.therapy h2{font-size:2.8rem;margin-bottom:1rem}
.therapy>.inner>p{max-width:620px;margin:0 auto 3.5rem;opacity:.85}
.therapy__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;
  max-width:760px;margin:0 auto}
.card{
  border:1px solid rgba(246,251,217,.25);border-radius:8px;
  padding:2.6rem 2rem;text-align:left;transition:background .25s;
}
.card:hover{background:rgba(246,251,217,.06)}
.card h3{font-size:1.4rem;margin-bottom:.8rem;color:#fff}
.card p{opacity:.8;font-size:.97rem}

/* =========================================================================
   POEM  (blurred green bg, two columns)
   ========================================================================= */
.poem{
  position:relative;color:#fff;text-align:center;padding:7rem 0;
  background:linear-gradient(rgba(30,40,15,.5),rgba(30,40,15,.55)),
             url("../../images/bg-poem.jpg") center/cover no-repeat;
}
.poem h2{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:3rem}
.poem__lines{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}
.poem__lines p{font-family:var(--font-body);font-weight:300;
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.85;opacity:.95}

/* =========================================================================
   RESOURCES / LIFE LATELY  (split: image / dark panel)
   ========================================================================= */
.lately{display:grid;grid-template-columns:1fr 1fr;min-height:80vh}
.lately__img{background:url("../../images/life-lately.jpg") center/cover no-repeat}
.lately__panel{
  background:var(--ink);color:var(--text-light);
  padding:6rem 5rem;display:flex;flex-direction:column;
  justify-content:center;gap:1.4rem;
}
.lately__panel h2{font-size:clamp(2.6rem,4.5vw,4rem)}
.lately__meta{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.lately__panel p{opacity:.85}
.lately__panel .btn{align-self:flex-start;margin-top:1rem}

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact{
  position:relative;color:#fff;text-align:center;padding:7rem 0 6rem;
  background:linear-gradient(rgba(40,30,10,.55),rgba(40,30,10,.6)),
             url("../../images/contact-bg.jpg") center/cover no-repeat;
}
.contact h2{font-size:clamp(2.4rem,5vw,3.6rem)}
.contact>.inner>p{margin:.8rem 0 3rem;opacity:.9}
.contact form{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:1.1rem}
.contact label{display:block;text-align:left;font-size:.85rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:.4rem;opacity:.85}
.contact input,.contact textarea{
  width:100%;padding:.95rem 1.1rem;border:0;border-radius:6px;
  background:rgba(255,255,255,.92);font-family:var(--font-body);font-size:1rem;
  color:var(--ink);
}
.contact textarea{resize:vertical;min-height:130px}
.contact .btn{margin-top:.6rem;align-self:center}
.socials{display:flex;gap:1.4rem;justify-content:center;margin-top:2.6rem}
.socials a{
  width:46px;height:46px;border:1px solid rgba(255,255,255,.6);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  transition:background .25s,color .25s;
}
.socials a:hover{background:#fff;color:var(--olive)}

/* =========================================================================
   FORM ERROR + SUCCESS MODAL
   ========================================================================= */
.form-error{
  background:rgba(150,30,30,.9);color:#fff;padding:.85rem 1.1rem;border-radius:6px;
  text-align:left;font-size:.92rem;
}
.form-note{text-align:left;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;opacity:.8;margin-bottom:.3rem}
.req{color:#e9b84d}
.phone-row{display:flex;gap:.6rem}
.phone-row select{
  flex:0 0 auto;width:auto;padding:.95rem .7rem;border:0;border-radius:6px;
  background:rgba(255,255,255,.92);font-family:var(--font-body);font-size:1rem;
  color:var(--ink);cursor:pointer;
}
.phone-row input{flex:1 1 auto;min-width:0}
.form-confidential{
  text-align:left;font-size:.82rem;line-height:1.55;opacity:.8;
  border-left:2px solid rgba(255,255,255,.4);padding-left:.9rem;margin:.4rem 0 .2rem;
}

.modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;transition:opacity .28s ease;
}
.modal.open{opacity:1}
.modal[hidden]{display:none}
.modal__scrim{
  position:absolute;inset:0;background:rgba(15,20,8,.6);
  backdrop-filter:blur(5px);cursor:pointer;
}
.modal__card{
  position:relative;z-index:1;max-width:460px;width:100%;
  background:var(--cream);color:var(--text-dark);
  border-radius:14px;padding:3rem 2.4rem 2.4rem;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  transform:translateY(14px) scale(.96);transition:transform .28s ease;
}
.modal.open .modal__card{transform:none}
.modal__card h2{font-size:2.6rem;color:var(--olive);margin-bottom:1rem}
.modal__card p{margin-bottom:1.8rem;line-height:1.7}
.modal__close{
  position:absolute;top:.7rem;right:1rem;
  background:none;border:0;font-size:1.9rem;line-height:1;
  color:var(--text-dark);opacity:.55;cursor:pointer;
}
.modal__close:hover{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .modal,.modal.open,.modal__card,.modal.open .modal__card{transition:none;transform:none}
  .reveal{opacity:1!important;transform:none!important;transition:none}
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{background:var(--olive);color:var(--text-light);text-align:center;padding:1.8rem 0}
.footer small{opacity:.7;letter-spacing:.04em}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .nav{padding:18px 22px}
  .nav.scrolled{padding:14px 22px}
  .nav-toggle{display:block}
  .nav ul{
    display:none;position:absolute;top:100%;right:0;left:0;
    flex-direction:column;gap:0;background:rgba(15,15,13,.97);padding:1rem 0;
  }
  .nav.open ul{display:flex}
  .nav ul li{text-align:center;padding:.8rem 0}

  .nowrap{white-space:normal}
  .about,.lately,.poem__cols,.therapy__grid{grid-template-columns:1fr}
  .about__left,.about__right,.lately__panel{padding:4rem 1.6rem}
  .poem__cols{gap:0;max-width:520px}
  .poem__cols p+p{margin-top:1.4rem}
  .lately{min-height:auto}
  .lately__img{min-height:55vh}
  .hero{background-attachment:scroll}
}