/* ==========================================================================
   Miriam Beck — Counselling and Psychotherapy, Bristol
   Concept: "The Honest Life" — lilac / graphite / cream
   --------------------------------------------------------------------------
   Tokens override base.css only. Everything structural (grid shell, header
   mechanics, mobile overlay, preloader shell, footer skeleton) stays in
   base.css untouched.

   Page order: preloader · header · hero + portrait shelf · the questions ·
   work with me · about · egg pull-quote (lilac band) · practical · faq ·
   contact · footer.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  --cream:      #faf5ec;
  --cream-2:    #f2ebdf;
  --graphite:   #34313a;
  --lilac:      #8f7fa8;   /* ornament + large display only (3.3:1) */
  --lilac-deep: #6a5b83;   /* 5.6:1 on cream, cream on it 5.6:1 */
  --peach:      #e8c9b8;   /* ornament only, never text */
  --prose:      #3f3a45;
  --mute:       #665e70;   /* 5.7:1 on cream */
  --foot-mute:  #b3aca6;   /* 5.7:1 on graphite */

  /* base.css token remap — this page is light, so "ink" is the cream ground */
  --ink:        var(--cream);
  --ink-2:      var(--cream-2);
  --ink-3:      var(--cream-2);
  --surface:    var(--cream-2);
  --surface-2:  #ece2d2;
  --text:       var(--graphite);
  --muted:      var(--mute);
  --ink-text:   var(--graphite);
  --ink-mute:   var(--mute);
  --accent:     var(--lilac-deep);
  --accent-lit: var(--lilac);
  --accent-2:   var(--lilac-deep);
  --line:       rgba(52,49,58,.15);
  --line-d:     rgba(52,49,58,.24);

  --font-display:"Alegreya", Georgia, "Times New Roman", serif;
  --font-body:   "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "Nunito", system-ui, sans-serif;

  --wrap-max:1180px;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{ scroll-behavior:smooth; }
body{
  background:var(--cream);
  color:var(--prose);
  font-family:var(--font-body);
  font-size:18px;
  font-weight:300;
  line-height:1.68;
}
::selection{ background:var(--lilac-deep); color:var(--cream); }
:focus-visible{ outline:2px solid var(--lilac-deep); outline-offset:3px; }

/* paper grain — 2.8% multiply, never over interactive targets */
body::before{
  content:"";
  position:fixed; inset:0; z-index:60;
  pointer-events:none;
  opacity:.028;
  mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E');
}

.skip{
  position:absolute; left:0; top:0; z-index:10000;
  transform:translateY(-130%);
  background:var(--graphite); color:var(--cream);
  padding:.72rem 1.1rem; font-size:.82rem; letter-spacing:.06em;
  transition:transform .2s var(--ease);
}
.skip:focus{ transform:translateY(0); }

h1,h2,h3{ color:var(--graphite); }
a{ transition:color .2s var(--ease), border-color .2s var(--ease); }

/* ------------------------------------------------------------- preloader */
.pre{ background:var(--cream); color:var(--graphite); }
.pre__egg{
  grid-row:1;
  width:clamp(64px, 8vw, 86px);
  height:auto;
  color:var(--lilac-deep);
  margin-bottom:1.6rem;
}
.pre__line{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:egg-draw 1.9s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes egg-draw{ to{ stroke-dashoffset:0; } }
.pre__meta{
  font-family:var(--font-body);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
}
.pre__pct{ color:var(--lilac-deep); }
.pre__bar{ background:rgba(52,49,58,.14); }
.pre__bar i{ background:var(--lilac-deep); }

/* ---------------------------------------------------------------- header */
.hdr{
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.hdr.is-scrolled{
  box-shadow:0 14px 34px -28px rgba(52,49,58,.75);
  border-bottom-color:var(--line-d);
}
.brand{ line-height:1; padding-block:.2rem; }
.brand__name{
  display:block;
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:400;
  letter-spacing:.005em;
  color:var(--graphite);
}
.brand__sub{
  display:block;
  margin-top:.28rem;
  font-size:.62rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--mute);
}
.nav__link{
  position:relative;
  color:var(--graphite);
  font-size:.9rem;
  font-weight:400;
  letter-spacing:.005em;
  padding:.55rem .72rem;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:.72rem; right:.72rem; bottom:.3rem;
  height:1px; background:var(--lilac-deep);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .3s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible{ color:var(--lilac-deep); background:none; }
.nav__link:hover::after,
.nav__link:focus-visible::after{ transform:scaleX(1); }
.hdr__cta{
  margin-left:.7rem;
  padding:.78rem 1.05rem;
  font-size:.8rem;
  letter-spacing:.01em;
}

@media (min-width:1024px){
  .nav__foot{ display:none; }
  .nav__close{ display:none; }
}

/* --------------------------------------------------------------- buttons */
.btn{
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.012em;
  padding:.92rem 1.35rem;
  line-height:1.2;
}
.btn--solid{ background:var(--lilac-deep); color:var(--cream); }
.btn--solid:hover{ background:#5c4e73; transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--line-d); color:var(--graphite); background:transparent; }
.btn--ghost:hover{
  border-color:var(--lilac-deep);
  color:var(--lilac-deep);
  background:transparent;
  transform:translateY(-2px);
}

/* ------------------------------------------------------------------ hero */
.hero{
  display:flex;
  flex-direction:column;
  min-height:calc(100svh - 76px);
  background:var(--cream);
  padding-top:clamp(1.6rem, 3.2vw, 3rem);
}
.hero__wrap{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  width:100%;
  padding-bottom:clamp(1.4rem, 2.6vw, 2.2rem);
}
.hero__eyebrow{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding-bottom:1.05rem;
  border-bottom:1px solid var(--line);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--lilac-deep);
}
.hero__eyebrow::before{
  content:"";
  width:28px; height:1px;
  flex:none;
  background:currentColor;
}
.hero__h1{
  margin-top:clamp(1.3rem, 3vw, 2.4rem);
  font-size:clamp(2.2rem, 5.7vw, 4.9rem);
  font-weight:400;
  line-height:1.03;
  letter-spacing:-.016em;
  color:var(--graphite);
}
.hero__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.4rem, 4vw, 3.4rem);
  align-items:end;
  margin-top:clamp(1.4rem, 2.8vw, 2.2rem);
  padding-bottom:clamp(1.3rem, 2.2vw, 1.9rem);
}
.hero__lead{
  font-size:clamp(1.02rem, 1.35vw, 1.16rem);
  line-height:1.62;
  color:var(--graphite);
  max-width:47ch;
}
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}
.hero__trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-top:auto;
  padding-top:1.05rem;
  border-top:1px solid var(--line);
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--mute);
}
.hero__trust li{ display:flex; align-items:center; }
.hero__trust li + li::before{
  content:"";
  width:1px; height:10px;
  background:var(--line-d);
  margin-inline:.95rem;
}

/* portrait shelf — the photograph sits under the type */
.shelf{
  margin:0;
  width:100%;
  background:var(--cream-2);
}
.shelf img{
  width:100%;
  height:clamp(190px, 26vw, 340px);
  object-fit:cover;
  object-position:50% 35%;
}

/* --------------------------------------------------------- section shell */
.sect{ padding-block:clamp(3.6rem, 7vw, 6.4rem); }
.sect--ask{ background:var(--cream); }
.sect--work{ background:var(--cream-2); }
.sect--about{ background:var(--cream); }
.sect--fees{ background:var(--cream); }
.sect--faq{ background:var(--cream-2); }
.sect--contact{ background:var(--cream); }
section[id]{ scroll-margin-top:88px; }

.sechead{ margin-bottom:clamp(1.9rem, 3.6vw, 3.1rem); }
.sechead__label{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1.15rem;
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lilac-deep);
}
.sechead__label::before{
  content:"";
  width:30px; height:1px;
  flex:none;
  background:currentColor;
}
.sechead__h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.85rem, 4.2vw, 3.15rem);
  line-height:1.07;
  letter-spacing:-.014em;
  max-width:23ch;
  text-wrap:balance;
}
.sechead__lede{
  margin-top:1rem;
  font-size:1rem;
  line-height:1.72;
  color:var(--mute);
  max-width:46ch;
}
.sechead--split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.3rem, 4vw, 3.6rem);
  align-items:end;
}

/* ------------------------------------------------------------- questions */
.qs{
  display:grid;
  border-top:1px solid var(--line-d);
}
.q{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1rem, 4vw, 3.4rem);
  padding:clamp(1.5rem, 2.8vw, 2.3rem) 0;
  border-bottom:1px solid var(--line);
}
.q__no{
  margin-bottom:.55rem;
  font-size:.68rem;
  letter-spacing:.2em;
  color:var(--lilac-deep);
}
.q__q{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.2rem, 2vw, 1.5rem);
  line-height:1.33;
  letter-spacing:-.004em;
  max-width:26ch;
  text-wrap:pretty;
}
.q__a{
  font-size:1rem;
  line-height:1.74;
  color:var(--prose);
  max-width:52ch;
  padding-top:.15rem;
}

/* ---------------------------------------------------------- work with me */
.areas{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.4rem, 2.6vw, 2.4rem);
  padding-top:clamp(1.4rem, 2.6vw, 2rem);
  border-top:1px solid var(--line-d);
}
.area{ display:grid; align-content:start; gap:.55rem; }
.area + .area{
  padding-left:clamp(1.2rem, 2.4vw, 2rem);
  border-left:1px solid var(--line);
}
.area__no{
  font-family:var(--font-display);
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lilac-deep);
}
.area__h{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.25rem, 2.1vw, 1.6rem);
  line-height:1.25;
  letter-spacing:-.008em;
}
.area p{
  font-size:.97rem;
  line-height:1.7;
  color:var(--mute);
}

.chg{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.3rem, 4vw, 3.4rem);
  margin-top:clamp(2.2rem, 4.6vw, 3.6rem);
  padding-top:clamp(1.5rem, 2.8vw, 2.2rem);
  border-top:1px solid var(--line-d);
}
.chg__h{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.4rem, 2.5vw, 1.95rem);
  line-height:1.2;
  margin-bottom:.75rem;
}
.chg__intro p{
  font-size:.95rem;
  line-height:1.7;
  color:var(--mute);
  max-width:38ch;
}
.chg__list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.85rem;
  padding:.95rem 0;
  border-bottom:1px solid var(--line);
  font-size:.99rem;
  line-height:1.62;
  color:var(--prose);
}
.chg__list li:first-child{ padding-top:.35rem; }
.chg__list li::before{
  content:"";
  width:5px; height:5px;
  margin-top:.62rem;
  border-radius:50%;
  background:var(--peach);
}

/* ----------------------------------------------------------------- about */
.about{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.6rem, 5vw, 4.2rem);
  align-items:start;
}
.about__head .sechead__h2{ max-width:17ch; font-size:clamp(1.7rem, 3.3vw, 2.55rem); }
.about__body{ max-width:58ch; }
.about__body p{
  font-size:1.02rem;
  line-height:1.78;
  color:var(--prose);
}
.about__body p + p{ margin-top:1.1rem; }
.about__lede{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.12rem, 1.8vw, 1.32rem);
  line-height:1.5;
  color:var(--lilac-deep);
  margin-bottom:1.1rem;
}

/* ------------------------------------------------- egg pull-quote (band) */
.band{
  position:relative;
  background:var(--lilac-deep);
  color:var(--cream);
  padding-block:clamp(3.2rem, 6.5vw, 5.6rem);
  overflow:hidden;
}
.band__in{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
}
/* the egg is a grid item, so the band is always tall enough to hold it */
.egg{
  grid-area:1 / 1;
  width:min(400px, 64vw);
  height:auto;
  color:var(--peach);
  opacity:.8;
  pointer-events:none;
}
.band__q{
  grid-area:1 / 1;
  position:relative;
  z-index:1;
  max-width:18ch;
}
.band__q p{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem, 3.2vw, 2.1rem);
  line-height:1.34;
  letter-spacing:-.006em;
  color:var(--cream);
  text-wrap:balance;
}
.band__q footer{
  margin-top:1.5rem;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.85;
}
.band :focus-visible{ outline-color:var(--cream); }

/* --------------------------------------------------------------- practical */
.facts{ border-top:1px solid var(--line-d); }
.fact{
  display:grid;
  grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);
  gap:clamp(1rem, 3vw, 3rem);
  padding:clamp(1rem, 2vw, 1.45rem) 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.fact dt{
  font-size:.68rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--lilac-deep);
}
.fact dd{
  font-size:1rem;
  line-height:1.68;
  color:var(--prose);
  max-width:56ch;
}

/* ------------------------------------------------------------------- faq */
.faq{ border-top:1px solid var(--line-d); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__i summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  padding:clamp(1.05rem, 2.1vw, 1.55rem) 0;
  cursor:pointer;
  list-style:none;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::marker{ content:""; }
.faq__i h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.12rem, 1.9vw, 1.45rem);
  line-height:1.32;
  letter-spacing:-.006em;
}
.faq__sign{
  position:relative;
  flex:none;
  width:26px; height:26px;
  border:1px solid var(--line-d);
  border-radius:50%;
}
.faq__sign::before,
.faq__sign::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:11px; height:1px;
  background:var(--lilac-deep);
  transform:translate(-50%,-50%);
  transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__i[open] .faq__sign::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; }
.faq__i summary:hover h3{ color:var(--lilac-deep); }
.faq__i summary:focus-visible{ outline:2px solid var(--lilac-deep); outline-offset:5px; }
.faq__a{
  padding:0 3rem clamp(1.15rem, 2vw, 1.7rem) 0;
  max-width:62ch;
}
.faq__a p{
  font-size:1rem;
  line-height:1.74;
  color:var(--mute);
}

/* --------------------------------------------------------------- contact */
.contact{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem, 5vw, 4.2rem);
  align-items:start;
}
.contact__say .sechead__h2{ max-width:19ch; margin-bottom:1.15rem; }
.contact__p{
  font-size:1rem;
  line-height:1.72;
  color:var(--mute);
  max-width:42ch;
  margin-bottom:1.8rem;
}
.contact__card{ border-top:1px solid var(--line-d); }
.contact__row{
  padding:1.05rem 0;
  border-bottom:1px solid var(--line);
}
.contact__k{
  margin-bottom:.3rem;
  font-size:.68rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--lilac-deep);
}
.contact__v{
  font-size:1.02rem;
  line-height:1.62;
  color:var(--graphite);
  overflow-wrap:anywhere;
}
.contact__v a{ border-bottom:1px solid var(--line-d); }
.contact__v a:hover{ color:var(--lilac-deep); border-bottom-color:var(--lilac-deep); }
.contact__alt{ display:inline-block; margin-top:.35rem; color:var(--mute); }

/* ---------------------------------------------------------------- footer */
.foot{
  background:var(--graphite);
  color:var(--cream);
  border-top:0;
}
.foot__top{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr);
  border-bottom:1px solid rgba(250,245,236,.16);
}
.foot__name{
  font-family:var(--font-display);
  font-size:1.62rem;
  font-weight:400;
  letter-spacing:.005em;
  color:var(--cream);
}
.foot__role{
  margin-top:.35rem;
  font-size:.64rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--foot-mute);
}
.foot__note{
  margin-top:1.2rem;
  max-width:34ch;
  font-size:.88rem;
  line-height:1.65;
  color:var(--foot-mute);
}
.foot__nav{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.foot__h{ color:var(--foot-mute); }
.foot__nav a{ color:rgba(250,245,236,.84); }
.foot__nav a:hover{ color:var(--cream); }
.foot__bottom{
  color:var(--foot-mute);
  border-top:0;
}
.foot :focus-visible{ outline-color:var(--peach); }

/* ============================================================ responsive */
@media (max-width:1023px){
  .hero{ min-height:calc(100svh - 68px); }
  .brand__name{ font-size:1.3rem; }
  .brand__sub{ font-size:.58rem; letter-spacing:.14em; }
  .hdr__cta{ display:none; }
  .nav__foot{ font-size:.8rem; }
  .nav__foot a{ color:var(--mute); }
  .nav__link{ font-size:1.06rem; }
  .nav__link::after{ display:none; }
  .nav__item:last-child{ border-bottom:0; }
  .nav__foot{ display:grid; gap:.5rem; }
  .nav__foot .nav__cta{
    display:block;
    margin-bottom:.5rem;
    padding:.9rem 1.1rem;
    background:var(--lilac-deep);
    color:var(--cream);
    text-align:center;
    font-size:.86rem;
    font-weight:600;
    letter-spacing:.01em;
    border-radius:var(--radius);
  }
}

@media (max-width:860px){
  .hero__body{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:1.3rem;
  }
  .hero__lead{ max-width:56ch; }
  .sechead--split{ grid-template-columns:minmax(0,1fr); align-items:start; gap:1rem; }
  .sechead__h2{ max-width:26ch; }
  .q{ grid-template-columns:minmax(0,1fr); gap:.7rem; padding-block:1.5rem; }
  .q__q{ max-width:30ch; }
  .area + .area{
    padding-left:0;
    padding-top:1.3rem;
    border-left:0;
    border-top:1px solid var(--line);
  }
  .chg{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .about{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .about__head .sechead__h2{ max-width:24ch; }
  .fact{ grid-template-columns:minmax(0,1fr); gap:.3rem; align-items:start; }
  .contact{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .contact__say .sechead__h2{ max-width:24ch; }
  .foot__top{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
  .foot__nav{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.8rem 1.4rem; }
}

@media (max-width:640px){
  body{ font-size:17px; }
  .hero{ padding-top:1.2rem; }
  .hero__eyebrow{ font-size:.6rem; letter-spacing:.15em; gap:.6rem; }
  .hero__eyebrow::before{ width:18px; }
  .hero__h1{ margin-top:1.1rem; }
  .hero__body{ margin-top:1.2rem; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ justify-content:center; }
  .hero__trust{ font-size:.72rem; gap:.35rem 0; }
  .hero__trust li + li::before{ margin-inline:.7rem; }
  .shelf img{ height:clamp(190px, 54vw, 260px); object-position:50% 26%; }
  .sechead__h2{ font-size:clamp(1.6rem, 7vw, 2rem); }
  .sechead__lede{ font-size:.96rem; }
  .q__a, .fact dd, .contact__v, .about__body p{ font-size:.99rem; }
  .area p{ font-size:.95rem; }
  .egg{ width:min(300px, 74vw); }
  .band__q{ max-width:17ch; }
  .faq__a{ padding-right:.5rem; }
  .contact__cta{ flex-direction:column; align-items:stretch; }
  .contact__cta .btn{ justify-content:center; }
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  .pre__line{ stroke-dashoffset:0; animation:none; }
  .skip{ transition:none; }
  html{ scroll-behavior:auto; }
}