/* ==========================================================================
   YS Counselling Bristol — "A Space to Pause"
   --------------------------------------------------------------------------
   Forest / oat / gold, Spectral + Jost, portrait medallion, narrow column,
   numbered hairline rows, one full-bleed forest quote band.
   base.css keeps the structure; this file sets the tokens and the page.
   ========================================================================== */

:root{
  /* --- palette, from her real logo and her own quiet tone --- */
  --forest:      #2f6b4a;
  --forest-deep: #244f38;
  --oat:         #f3eee2;
  --oat-2:       #ece5d6;
  --oat-3:       #e3dccb;
  --gold:        #c8a44a;
  --graphite:    #22251f;
  --body:        #33362e;
  --stone:       #5f6358;

  /* --- base.css token remap (base uses --ink as the page background) --- */
  --ink:        #f3eee2;
  --ink-2:      #ece5d6;
  --ink-3:      #f3eee2;
  --surface:    #ece5d6;
  --surface-2:  #e3dccb;
  --text:       #22251f;
  --muted:      #5f6358;
  --ink-text:   #22251f;
  --ink-mute:   #5f6358;
  --accent:     #2f6b4a;
  --accent-lit: #3c7f59;
  --accent-2:   #2f6b4a;
  --line:       rgba(34,37,31,.15);
  --line-d:     rgba(34,37,31,.15);

  /* --- type --- */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap-max: 1140px;
  --radius:   3px;
}

/* ------------------------------------------------------------------ base */
body{
  background:var(--oat);
  color:var(--body);
  font-size:clamp(16.5px, 1.02vw, 17.5px);
  line-height:1.72;
  font-weight:400;
}
::selection{ background:var(--forest); color:var(--oat); }
:focus-visible{ outline:2px solid var(--forest); outline-offset:4px; }

.sect{ padding-block:clamp(3.6rem,7.5vw,6.4rem); }
section[id]{ scroll-margin-top:92px; }

/* the page architecture: one narrow column, centred, generous space */
.sect .wrap > *{ max-width:770px; margin-inline:auto; }
.sect--tint{ background:var(--oat-2); }

.sect__h2{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.9rem,3.6vw,2.85rem);
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--graphite);
  max-width:24ch;
}
.sect__lead{
  margin-top:1.1rem;
  max-width:60ch;
  color:var(--stone);
  font-size:clamp(1rem,1.3vw,1.06rem);
  font-weight:300;
  line-height:1.7;
}
.sect__head{ margin-bottom:clamp(2rem,3.6vw,2.9rem); }

p{ max-width:66ch; }

/* ---------------------------------------------------------------- utils */
.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--forest); color:var(--oat);
  padding:.85rem 1.3rem; font-size:.9rem;
}
.skip:focus{ left:1rem; top:1rem; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--forest);
}

/* the signature: a short gold rule above every section label */
.label{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--font-body);
  font-size:.71rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--forest);
  margin-bottom:clamp(1.5rem,2.6vw,2.1rem);
}
.label__rule{
  display:block; flex:0 0 auto;
  width:46px; height:2px;
  background:var(--gold);
  transform:scaleX(.4); transform-origin:left center;
  will-change:transform;
}

.tlink{
  color:var(--forest);
  border-bottom:1px solid rgba(47,107,74,.4);
  padding-bottom:1px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.tlink:hover{ color:var(--forest-deep); border-bottom-color:var(--forest-deep); }

/* ------------------------------------------------------------- preloader */
.pre{
  background:var(--oat);
  color:var(--forest);
}
.pre__mark{ width:44px; height:44px; }
.pre__mark svg{ width:100%; height:100%; display:block; }
.pre__bar-a{ opacity:0; animation:pause-bar .9s cubic-bezier(.22,.61,.36,1) .05s forwards; }
.pre__bar-b{ opacity:0; animation:pause-bar .9s cubic-bezier(.22,.61,.36,1) .2s forwards; }
@keyframes pause-bar{
  from{ opacity:0; transform:translateY(7px); }
  to{ opacity:1; transform:translateY(0); }
}
.pre__meta{
  font-family:var(--font-body);
  color:var(--stone);
  letter-spacing:.24em;
}
.pre__pct{ color:var(--forest); font-variant-numeric:tabular-nums; }
.pre__bar{ background:rgba(34,37,31,.16); width:min(220px,58vw); height:2px; margin-bottom:3rem; }
.pre__bar i{ background:var(--gold); }

/* ---------------------------------------------------------------- header */
.hdr{
  background:var(--oat);
  border-bottom:1px solid var(--line);
}
@media (min-width:1024px){
  .hdr{
    background:color-mix(in srgb, var(--oat) 86%, transparent);
    backdrop-filter:blur(14px) saturate(1.05);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);
  }
}
.hdr.is-scrolled{
  box-shadow:0 16px 40px -34px rgba(34,37,31,.6);
  border-bottom-color:rgba(34,37,31,.22);
}

.hdr__in{ min-height:78px; }
.brand{
  display:inline-flex; align-items:center; gap:.72rem;
  color:var(--forest);
}
.brand__mark{ width:21px; height:36px; flex:0 0 auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--font-display);
  font-size:1.06rem; font-weight:400; letter-spacing:.01em;
  color:var(--graphite);
}
.brand__sub{
  margin-top:.34rem;
  font-family:var(--font-body);
  font-size:.6rem; font-weight:400;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--stone);
}

.hdr__actions{
  display:flex; align-items:center; gap:.75rem;
  margin-left:1.1rem;
}
.hdr__cta{
  padding:.72rem 1.15rem;
  font-size:.79rem; font-weight:500;
  letter-spacing:.02em;
  white-space:nowrap;
}

.nav__foot{ display:none; }

.nav__link{
  position:relative;
  font-family:var(--font-body);
  font-size:.865rem; font-weight:400;
  letter-spacing:.045em;
  color:var(--graphite);
  padding:.6rem .72rem;
}
.nav__link::after{
  content:"";
  position:absolute; left:.72rem; right:.72rem; bottom:.34rem; height:1px;
  background:var(--forest);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .38s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .nav__link:hover{ color:var(--forest); background:none; }
  .nav__link:hover::after{ transform:scaleX(1); }
}

/* --------------------------------------------------------------- buttons */
.btn{
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:.85rem; font-weight:500;
  letter-spacing:.03em;
  padding:.92rem 1.5rem;
}
.btn--solid{
  background:var(--forest); color:var(--oat);
  border:1px solid var(--forest);
}
.btn--solid:hover{
  transform:translateY(-2px);
  filter:none;
  background:var(--forest-deep);
  border-color:var(--forest-deep);
}
.btn--ghost{
  border:1px solid rgba(47,107,74,.45);
  color:var(--forest);
  background:transparent;
}
.btn--ghost:hover{
  border-color:var(--forest);
  background:rgba(47,107,74,.06);
  color:var(--forest-deep);
}
.btn svg{ width:16px; height:16px; }

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(115% 85% at 86% 14%, rgba(200,164,74,.16), transparent 58%),
    linear-gradient(180deg, #f8f4ea 0%, var(--oat) 58%, #efe8d9 100%);
}
.hero__wrap{
  min-height:calc(100svh - 78px);
  display:flex; align-items:center;
  padding-block:clamp(2.4rem,5vw,4.6rem);
}
.hero__grid{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,25vw,348px);
  gap:clamp(2rem,3.4vw,3rem);
  align-items:center;
}
.hero__copy{ min-width:0; }

.hero__eyebrow{ margin-bottom:clamp(1.3rem,2.6vw,1.9rem); }

.hero__h1{
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.018em;
  color:var(--graphite);
}
.hero__lead{
  margin-top:clamp(1.3rem,2.4vw,1.8rem);
  max-width:46ch;
  font-size:clamp(1rem,1.35vw,1.09rem);
  font-weight:300;
  line-height:1.75;
  color:var(--stone);
}

.hero__cta{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top:clamp(1.6rem,3vw,2.1rem);
}

.hero__trust{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.55rem 1.35rem;
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
  font-family:var(--font-body);
  font-size:.775rem; letter-spacing:.05em;
  color:var(--stone);
}
.hero__trust li{ display:inline-flex; align-items:center; gap:.55rem; }
.hero__trust li + li::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--gold); flex:0 0 auto;
}

/* portrait medallion — thin gold ring, one real photograph */
.hero__medal{
  position:relative;
  justify-self:end;
  width:100%;
  max-width:348px;
  aspect-ratio:1;
}
.hero__medal img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 48px 90px -46px rgba(36,79,56,.7);
}
.hero__medal::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(34,37,31,.14);
  pointer-events:none;
}
.hero__ring{
  position:absolute; inset:-15px; z-index:0;
  border:1px solid rgba(200,164,74,.85);
  border-radius:50%;
}

/* ----------------------------------------------------------------- about */
.about__body p{ margin-top:1.15rem; color:var(--body); max-width:62ch; }
.about__body p:first-of-type{ margin-top:1.5rem; }

.facts{
  border-top:1px solid var(--line);
  margin-top:clamp(2rem,3.6vw,2.8rem);
}
.facts li{
  padding:1.05rem 0;
  border-bottom:1px solid var(--line);
}
.facts__k{
  display:block;
  font-family:var(--font-body);
  font-size:.66rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--forest);
  margin-bottom:.4rem;
}
.facts__v{
  display:block;
  font-size:.925rem; line-height:1.6;
  color:var(--stone);
  max-width:34ch;
}

/* ------------------------------------------------------------ counselling */
.svc{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,4vw,2.9rem) clamp(2rem,5vw,4rem);
}
.svc__item{
  border-top:1px solid var(--line);
  padding-top:1.15rem;
}
.svc__item--wide{ grid-column:1 / -1; }
.svc__no{
  font-family:var(--font-body);
  font-size:.7rem; letter-spacing:.2em;
  color:var(--stone);
}
.svc__h{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.66rem);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--graphite);
  margin:.6rem 0 .6rem;
}
.svc__p{
  color:var(--body);
  font-size:1rem;
  max-width:46ch;
}
.svc__item--wide .svc__p{ max-width:68ch; }

.areas{ margin-top:clamp(3rem,6vw,4.6rem); }
.areas__h{
  font-family:var(--font-body);
  font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--forest);
  margin-bottom:.9rem;
}
.rows{ border-top:1px solid var(--line); max-width:820px; }
.rows li{
  display:grid;
  grid-template-columns:3.2rem minmax(0,1fr);
  gap:1rem;
  align-items:baseline;
  padding:1.02rem 0;
  border-bottom:1px solid var(--line);
}
.rows__no{
  font-family:var(--font-body);
  font-size:.7rem; letter-spacing:.16em;
  color:var(--stone);
}
.rows__name{
  font-family:var(--font-display);
  font-size:clamp(1.06rem,1.7vw,1.24rem);
  font-weight:400;
  color:var(--graphite);
  transition:transform .35s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .rows li:hover .rows__name{ transform:translateX(4px); }
}

.areas__note{
  margin-top:1.4rem;
  font-size:.95rem;
  color:var(--stone);
  max-width:60ch;
}

/* ------------------------------------------------------------ how it works */
.steps{ border-top:1px solid var(--line); }
.steps__row{
  padding:clamp(1.3rem,2.4vw,1.75rem) 0;
  border-bottom:1px solid var(--line);
}
.steps__k{
  font-family:var(--font-body);
  font-size:.74rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--forest);
  margin-bottom:.55rem;
}
.steps__v p{ max-width:58ch; color:var(--body); }

/* ------------------------------------------------------------------- who */
.who__block{
  padding:clamp(1.6rem,3vw,2.3rem) 0;
  border-top:1px solid var(--line);
}
.who__block:last-of-type{ border-bottom:1px solid var(--line); }
.who__h{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.16rem,1.9vw,1.44rem);
  line-height:1.25;
  color:var(--forest);
  margin-bottom:.7rem;
}
.who__block p{ color:var(--body); max-width:58ch; }
.who__block p + p{ margin-top:.95rem; }

/* ---------------------------------------------------------- quote band */
.band{
  background:var(--forest);
  color:var(--oat);
  padding-block:clamp(4.2rem,9vw,7.6rem);
}
.band__in{
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--pad);
  text-align:center;
}
.band__rule{
  display:block; width:58px; height:2px;
  background:var(--gold);
  margin:0 auto clamp(1.8rem,3.4vw,2.6rem);
}
.band__quote{
  margin:0;
  font-family:var(--font-display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.85rem,4.3vw,3.3rem);
  line-height:1.26;
  letter-spacing:-.01em;
  color:var(--oat);
  max-width:26ch;
  margin-inline:auto;
}
.band__by{
  margin-top:clamp(1.4rem,2.6vw,2rem);
  font-family:var(--font-body);
  font-size:.72rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,238,226,.9);
}

/* -------------------------------------------------------------- supervision */
.super__body p{ margin-bottom:1.1rem; color:var(--body); max-width:64ch; }
.super__body p:last-child{ margin-bottom:0; }

.chips{
  display:flex; flex-wrap:wrap;
  gap:.6rem 1.7rem;
  margin-top:clamp(1.8rem,3vw,2.4rem);
  padding-top:1.3rem;
  border-top:1px solid var(--line);
  font-family:var(--font-body);
  font-size:.84rem;
  color:var(--stone);
}
.chips li{ display:inline-flex; align-items:center; gap:.6rem; }
.chips li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex:0 0 auto;
}

.super__cta{
  margin-top:1.8rem;
  color:var(--stone);
  font-size:.95rem;
}

/* ------------------------------------------------------------------ fees */
.fees__table{ border-top:1px solid var(--line); max-width:820px; }
.fees__row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem;
  padding:clamp(1.1rem,2vw,1.5rem) 0;
  border-bottom:1px solid var(--line);
}
.fees__row dt{
  font-family:var(--font-display);
  font-size:clamp(1.14rem,1.9vw,1.44rem);
  font-weight:400;
  line-height:1.3;
  color:var(--graphite);
}
.fees__row dt span{
  display:block;
  margin-top:.4rem;
  font-family:var(--font-body);
  font-size:.79rem; font-weight:400;
  letter-spacing:.05em;
  color:var(--stone);
}
.fees__row dd{
  margin:0;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.5rem,2.8vw,2rem);
  line-height:1;
  color:var(--forest);
  white-space:nowrap;
}

.fees__next{
  margin-top:clamp(2.2rem,4.4vw,3.2rem);
  max-width:62ch;
}
.fees__h{
  font-family:var(--font-body);
  font-size:.73rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--forest);
  margin-bottom:.8rem;
}
.fees__next p{ color:var(--body); }
.fees__links{
  margin-top:1.1rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem;
  font-size:1rem;
}
.fees__links span{ color:var(--stone); }

/* ----------------------------------------------------------------- proof */
.proof__rating{
  margin-top:1rem;
  font-family:var(--font-body);
  font-size:.9rem;
  letter-spacing:.04em;
  color:var(--stone);
}
.proof__rating strong{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.15rem;
  color:var(--forest);
  margin-right:.25rem;
}

.quotes{ display:grid; gap:clamp(1.8rem,3.6vw,2.8rem); max-width:760px; }
.quote{
  margin:0;
  padding-left:clamp(1.1rem,3vw,1.9rem);
  border-left:2px solid var(--gold);
}
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.12rem,2vw,1.4rem);
  line-height:1.55;
  color:var(--graphite);
  max-width:54ch;
}
.quote figcaption{
  margin-top:1rem;
  font-family:var(--font-body);
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--stone);
}
.quote__name{ color:var(--forest); }
.quote__role::before{ content:"· "; color:var(--stone); }

.proof__note{
  margin-top:1.8rem;
  font-size:.84rem;
  color:var(--stone);
}

/* --------------------------------------------------------------- contact */
.contact__list{
  border-top:1px solid var(--line);
  max-width:800px;
}
.contact__row{
  padding:1.15rem 0;
  border-bottom:1px solid var(--line);
}
.contact__row dt{
  font-family:var(--font-body);
  font-size:.69rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--forest);
  margin-bottom:.4rem;
}
.contact__row dd{
  margin:0;
  font-size:1.02rem;
  color:var(--body);
  overflow-wrap:anywhere;
}
.contact__row dd a{
  color:var(--forest);
  border-bottom:1px solid rgba(47,107,74,.4);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.contact__row dd a:hover{ color:var(--forest-deep); border-bottom-color:var(--forest-deep); }

.contact__cta{ margin-top:clamp(1.9rem,3.4vw,2.6rem); }

/* ---------------------------------------------------------------- footer */
.foot{
  background:var(--forest);
  color:var(--oat);
  border-top:0;
}
.foot__top{ border-bottom:1px solid rgba(243,238,226,.22); }
.foot__nav{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.foot :focus-visible{ outline-color:var(--oat); }
.brand--foot{ color:var(--oat); }
.brand--foot .brand__name{ color:var(--oat); }
.brand--foot .brand__sub{ color:rgba(243,238,226,.9); }
.foot__line{
  margin-top:1.35rem;
  max-width:36ch;
  font-size:.9rem; line-height:1.7;
  color:rgba(243,238,226,.84);
}
.foot__meta{
  margin-top:1rem;
  font-family:var(--font-body);
  font-size:.73rem; letter-spacing:.06em;
  color:rgba(243,238,226,.88);
}
.foot__h{
  font-family:var(--font-body);
  font-size:.62rem; letter-spacing:.19em;
  color:rgba(243,238,226,.9);
}
.foot__nav a{ color:rgba(243,238,226,.88); }
.foot__nav a:hover{ color:#fdf9ee; text-decoration:underline; text-underline-offset:3px; }
.foot__bottom{
  font-family:var(--font-body);
  font-size:.68rem; letter-spacing:.05em;
  color:rgba(243,238,226,.88);
}

/* =======================================================================
   RESPONSIVE — 1024 / 860 / 640
   ======================================================================= */
@media (max-width:1024px){
  .hdr__cta{ font-size:.76rem; padding:.66rem .95rem; }
  .nav__link{ font-size:.83rem; padding:.55rem .6rem; }
  .nav__link::after{ left:.6rem; right:.6rem; }
}

@media (max-width:1023px){
  .hdr__in{ min-height:68px; }
  .brand__mark{ width:19px; height:32px; }
  .nav__link{ font-size:1.02rem; padding:1rem .1rem; }
  .nav__link::after{ display:none; }
  .nav__foot{ display:grid; letter-spacing:.04em; }

  .hero__wrap{ min-height:calc(100svh - 68px); }
  .foot__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
  .hdr__cta{ display:none; }
}

@media (max-width:860px){
  .sect{ padding-block:clamp(3rem,7vw,4.6rem); }

  .hero__wrap{ padding-block:clamp(1.8rem,5vw,2.8rem); }
  .hero__grid{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(1.5rem,4vw,2rem);
  }
  .hero__medal{
    order:-1;
    justify-self:end;
    width:clamp(86px,20vw,132px);
  }
  .hero__ring{ inset:-9px; }
  .hero__lead{ max-width:52ch; }
  .hero__trust{ gap:.5rem 1rem; font-size:.75rem; }

  .facts__v{ max-width:52ch; }

  .svc{ grid-template-columns:minmax(0,1fr); gap:1.7rem; }
  .svc__item--wide{ grid-column:auto; }

  .sect .wrap > *{ max-width:100%; }
}

@media (max-width:640px){
  .label{ font-size:.66rem; letter-spacing:.17em; gap:.7rem; }
  .label__rule{ width:34px; }

  .hero__h1{ letter-spacing:-.014em; }
  .hero__lead{ font-size:1rem; }
  .hero__cta{ gap:.6rem; }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }

  .fees__row{ flex-direction:column; gap:.55rem; align-items:flex-start; }
  .fees__row dd{ font-size:1.75rem; }

  .quote{ padding-left:1rem; }
  .band__by{ letter-spacing:.16em; }

  .foot__top{ padding-bottom:2rem; }
  .foot__line{ max-width:44ch; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce){
  .label__rule{ transform:none; }
  .pre__bar-a, .pre__bar-b{ animation:none; opacity:1; }
  .hero__medal, .hero__medal img{ transform:none !important; }
}