/* ==========================================================================
   David Bowerman — Therapy & Coaching
   v3 · "The Room You Can Breathe In"
   sand · forest · sage · clay · Fraunces / Manrope
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --paper:  #ffffff;
  --ink:    #242422;
  --sand:   #e8dcc8;
  --forest: #1f352b;
  --sage:   #7d9a86;
  --clay:   #c96f4a;
  --clay-d: #a9502f;
  --muted:  #6f736c;

  --ink-soft: #3f3d36;

  /* base.css names, remapped */
  --ink-2:     #242422;
  --ink-3:     #1f352b;
  --surface:   #e8dcc8;
  --surface-2: #f1e8d8;
  --text:      #ffffff;
  --ink-text:  #242422;
  --ink-mute:  #6f736c;
  --accent:    #c96f4a;
  --accent-2:  #a9502f;
  --accent-lit:#c96f4a;
  --line:      rgba(36,36,34,.14);
  --line-d:    rgba(36,36,34,.18);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--display);
  --font-body:    var(--body);
  --font-mono:    var(--body);

  --wrap-max: 1360px;
  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --hdr-h: 80px;
  --radius: 999px;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- base */
/* ScrollTrigger must measure with instant scrolling; base.css sets smooth. */
html{ scroll-behavior: auto; scroll-padding-top: calc(var(--hdr-h) + 20px); }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
}

h1,h2,h3{ font-family: var(--display); font-weight: 400; }

::selection{ background: var(--clay-d); color: #fff; }

:focus-visible{ outline: 2px solid var(--clay-d); outline-offset: 4px; border-radius: 4px; }
.hero :focus-visible,
.hdr :focus-visible,
.nav :focus-visible,
.hour :focus-visible,
.reviews :focus-visible,
.contact :focus-visible{ outline-color: var(--sand); }
.foot :focus-visible{ outline-color: var(--clay); }

/* grain */
.grain{
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.skip{
  position: absolute; left: 1rem; top: -5rem; z-index: 10000;
  padding: .8rem 1.1rem;
  background: var(--clay-d); color: #fff;
  font-size: .8rem; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus{ top: 1rem; }

/* ---------------------------------------------------------------- type */
.eyebrow{
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--body);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--clay-d);
  line-height: 1.35;
}
.hero__eyebrow{ color: var(--ink-soft); }
.how .eyebrow,
.fees .eyebrow{ color: var(--ink-soft); }
.bristol .eyebrow{ color: var(--ink); }
.eyebrow .dot,
.eyebrow::before{
  content: ""; flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clay);
}
.eyebrow--light{ color: var(--sand); }
.eyebrow--light::before{ background: var(--clay); }

.h2{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-top: 1.2rem;
}

.lead{
  margin-top: 1.4rem;
  max-width: 42ch;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--muted);
}

.label{
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--clay-d);
}

.quote-mark{
  display: block;
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: .55;
  color: var(--clay-d);
  pointer-events: none;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  padding: 1rem 1.7rem;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .005em;
  gap: .5rem;
}
.btn--clay{ background: var(--clay-d); color: #fff; }
.btn--clay:hover{ background: #8e4227; color: #fff; transform: none; filter: none; }
.btn--sand{ background: var(--sand); color: var(--ink); }
.btn--sand:hover{ background: #f1e8d8; color: var(--ink); transform: none; filter: none; }
.btn--outline{ border: 1.5px solid rgba(232,220,200,.55); color: var(--sand); background: transparent; }
.btn--outline:hover{ background: var(--sand); color: var(--ink); border-color: var(--sand); }

.link-arrow{
  display: inline-flex; align-items: center; gap: .55rem;
  padding-bottom: .2rem;
  font-size: .86rem; font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--clay-d);
  transition: color .2s, border-color .2s;
}
.link-arrow svg{ width: 17px; height: 17px; transition: transform .25s var(--ease); }
.link-arrow:hover{ color: var(--clay-d); }
.link-arrow:hover svg{ transform: translateX(4px); }

/* ---------------------------------------------------------------- preloader */
.pre{
  background: var(--forest);
  color: var(--sand);
  padding: 2rem;
}
.pre__mark svg{
  width: clamp(90px, 11vw, 128px);
  height: auto;
  display: block;
  color: var(--sand);
}
.pre__arch{ stroke-dasharray: 300; stroke-dashoffset: 300; animation: preArch 1.3s var(--ease) .1s forwards; }
.pre__sill{ stroke-dasharray: 120; stroke-dashoffset: 120; animation: preArch 1s var(--ease) .75s forwards; }
.pre__dot{
  color: var(--clay);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
  animation: preDot .6s var(--ease) 1.25s forwards;
}
@keyframes preArch{ to{ stroke-dashoffset: 0; } }
@keyframes preDot{ to{ opacity: 1; transform: scale(1); } }

.pre__meta{
  font-family: var(--body);
  font-size: .62rem; letter-spacing: .24em;
  color: rgba(232,220,200,.72);
}
.pre__pct{ color: var(--clay); }
.pre__bar{ background: rgba(232,220,200,.18); }
.pre__bar i{ background: var(--clay); }

/* ---------------------------------------------------------------- header */
.hdr{
  background: var(--sand);
  border-bottom: 0;
  color: var(--ink);
}
@media (min-width:1024px){
  .hdr{ background: var(--sand); }
}
.hdr__in{ min-height: var(--hdr-h); gap: 1.6rem; }

.brand{
  display: flex; flex-direction: column;
  gap: .26rem; line-height: 1;
  color: var(--ink);
}
.brand__name{
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 400;
  letter-spacing: -.01em; line-height: 1;
}
.brand__sub{
  font-family: var(--body);
  font-size: .52rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1;
}

.nav__list{ gap: .15rem; }
.nav__link{
  position: relative;
  font-size: .86rem; font-weight: 600;
  color: var(--ink);
  padding: .6rem .8rem;
}
.nav__link::after{
  content: "";
  position: absolute; left: .8rem; right: .8rem; bottom: .34rem;
  height: 2px; background: var(--clay-d);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover{ color: var(--clay-d); background: none; }
.nav__link:hover::after{ transform: scaleX(1); }

.hdr__cta{ padding: .78rem 1.3rem; font-size: .82rem; }
.nav__foot{ display: none; }

/* ---------------------------------------------------------------- hero */
.hero{
  position: relative;
  min-height: calc(100vh - var(--hdr-h));
  min-height: calc(100dvh - var(--hdr-h));
  background: var(--sand);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero__inner{
  position: relative; z-index: 2;
  padding-block: clamp(1.8rem, 4vh, 2.8rem) clamp(1.8rem, 3.5vh, 2.6rem);
}

.hero__eyebrow{
  display: flex; align-items: center; gap: .65rem;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--clay-d);
}
.hero__eyebrow .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--clay);
}

.hero__h1{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 9rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--ink);
  margin-top: clamp(1rem, 2.4vh, 1.8rem);
}
.hero__h1 .line{
  display: block;
  overflow: hidden;
  padding-block: .08em .1em;
  margin-block: -.04em;
}
.hero__h1 .line > span{
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}
.hero__h1 .line:nth-child(2) > span{
  font-style: italic;
  font-weight: 300;
  color: var(--clay);
}

.hero__lower{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-top: clamp(1.4rem, 3.4vh, 2.6rem);
}

.hero__copy{ max-width: 34rem; }

.hero__lead{
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 35ch;
}

.hero__actions{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem;
  margin-top: 1.9rem;
}

.hero__trust{
  display: flex; flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: clamp(1.6rem, 3.4vh, 2.5rem);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .015em;
  color: rgba(36,36,34,.78);
}
.hero__trust li{ display: flex; align-items: center; gap: .55rem; }
.hero__trust li::before{
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: var(--clay);
  flex: 0 0 auto;
}
.hero__trust a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-underline-offset: .22em;
}
.hero__trust a:hover{ color: var(--clay-d); }

.hero__media{
  position: relative;
  justify-self: end;
  display: flex;
  align-items: flex-end;
}

.hero__disc{
  position: absolute;
  z-index: 0;
  width: clamp(280px, 30vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clay);
  left: clamp(-5rem, -5vw, -2rem);
  top: -6%;
}

.hero__figure{
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .9rem;
}

.hero__arch{
  height: clamp(320px, 45vh, 460px);
  aspect-ratio: .72;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: #d8ccb6;
}
.hero__arch img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

.hero__figure figcaption{
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(36,36,34,.7);
}

/* ---------------------------------------------------------------- ticker */
.ticker{
  background: var(--forest);
  color: #fff;
  padding-block: 1.35rem;
  overflow: hidden;
}
.ticker__row{
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
  will-change: transform;
}
.ticker__track{
  display: flex;
  align-items: center;
  gap: 2.1rem;
  padding-right: 2.1rem;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.1vw, 3rem);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1;
}
.ticker__track i{
  display: block;
  width: .38em; height: .38em;
  border-radius: 50%;
  background: var(--clay);
  flex: 0 0 auto;
}
.ticker:hover .ticker__row{ animation-play-state: paused; }
@keyframes ticker{ to{ transform: translateX(-50%); } }

/* ---------------------------------------------------------------- who */
.who{
  background: var(--paper);
  padding-block: clamp(5.5rem, 10vw, 9rem);
}
.who__grid{
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: start;
}
.who__head{
  position: sticky;
  top: calc(var(--hdr-h) + 3rem);
}
.who__head .h2{ max-width: 13ch; }

.concerns{ padding-top: .4rem; }
.concern{
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: .8rem;
  padding: 1.35rem 0;
  border-top: 1px solid rgba(36,36,34,.12);
}
.concern:first-child{ border-top: 0; padding-top: 0; }
.concern__num{
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--clay-d);
  line-height: 1.2;
  padding-top: .18rem;
}
.concern h3{
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.9vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.concern p{
  margin-top: .4rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 42ch;
}

.also{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 2.6rem;
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  background: var(--sand);
  border-radius: 24px;
}
.also .label{ color: var(--ink-soft); }
.also__item p:not(.label){
  margin-top: .6rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 38ch;
}

/* ---------------------------------------------------------------- how */
.how{
  background: var(--sand);
  padding-block: clamp(5.5rem, 10vw, 9rem);
}
.how__grid{
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
}
.how__head .h2{ max-width: 11ch; }

.how__media{
  position: relative;
  margin: clamp(2rem, 4vw, 3.4rem) 0 0;
}
.how__imgwrap{
  position: relative;
  height: clamp(380px, 54vh, 600px);
  overflow: hidden;
  border-radius: 28px;
}
.how__imgwrap img{
  position: absolute;
  left: 0; top: -6%;
  width: 100%; height: 112%;
  object-fit: cover;
  will-change: transform;
}
.how__quote{
  position: absolute;
  right: -1.4rem;
  bottom: 1.4rem;
  width: min(300px, 82%);
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--forest);
  color: #fff;
  border-radius: 20px;
}
.how__quote .quote-mark{ font-size: 2.6rem; color: var(--clay); }
.how__quote p{
  margin-top: .4rem;
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.35;
}
.how__cite{
  display: block;
  margin-top: .9rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sand);
}

.how__steps{ padding-top: .2rem; }
.step{ margin-bottom: clamp(2.2rem, 5vh, 3.6rem); }
.step__num{
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--clay-d);
  line-height: 1;
}
.step h3{
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: .55rem 0 .8rem;
}
.step p{
  max-width: 44ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.how__note{
  color: var(--ink-soft);
  margin-top: .4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(36,36,34,.16);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- about */
.about{
  background: var(--paper);
  padding-block: clamp(5.5rem, 10vw, 9rem);
}
.about__grid{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 7vw, 7.5rem);
  align-items: start;
}
.about__media{
  position: relative;
  margin: 0;
  z-index: 0;
}
.about__media::after{
  content: "";
  position: absolute;
  right: -1.1rem; bottom: -1.1rem;
  width: 62%; height: 48%;
  background: var(--sand);
  z-index: -1;
}
.about__imgwrap{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 4 / 5;
  z-index: 1;
}
.about__imgwrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  display: block;
}
.about__head .h2{ max-width: 13ch; }
.about__text{
  margin-top: 1.8rem;
  max-width: 58ch;
}
.about__text p{
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--ink-soft);
}
.about__text p + p{ margin-top: 1rem; }

.facts{
  display: grid;
  grid-template-columns: minmax(0,.55fr) minmax(0,1.45fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--sand);
  border-radius: 24px;
}
.facts__stat{ border-right: 1px solid rgba(36,36,34,.16); padding-right: 1.4rem; }
.facts__year{
  display: block;
  font-family: var(--display);
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
  line-height: .9;
  color: var(--clay-d);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.facts__statlabel{
  display: block;
  margin-top: .5rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.facts__list{ display: grid; gap: .7rem; margin: 0; }
.facts__list > div{
  display: grid;
  grid-template-columns: 6.6rem minmax(0,1fr);
  gap: .8rem;
}
.facts__list dt{
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: .25rem;
}
.facts__list dd{
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------------------------------------------------------------- hour */
.hour{
  position: relative;
  min-height: clamp(620px, 92vh, 920px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.hour__bg{
  position: absolute;
  left: 0; top: -6%;
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: 50% 45%;
  z-index: 0;
  will-change: transform;
}
.hour__veil{
  position: absolute; inset: 0;
  background: rgba(31,53,43,.69);
  z-index: 1;
}
.hour__inner{
  position: relative;
  z-index: 2;
  text-align: center;
  padding-block: clamp(5rem, 10vh, 7rem) clamp(5rem, 10vh, 7rem);
}
.hour__h2{
  font-family: var(--display);
  font-size: clamp(3rem, 6.8vw, 6.6rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: #fff;
  margin-top: 1.6rem;
}
.hour__h2 em{ font-style: italic; color: var(--clay); }
.hour__lead{
  max-width: 46ch;
  margin: 1.4rem auto 0;
  font-size: 1.06rem;
  line-height: 1.7;
  color: #fff;
}
.hour__small{
  margin-top: 1.8rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sand);
}
.hour__quote{
  margin: 3rem auto 0;
  max-width: 34ch;
}
.hour__quote .quote-mark{ font-size: 2.8rem; color: var(--clay); margin-bottom: .4rem; }
.hour__quote p{
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
}
.hour__quote footer{
  margin-top: .9rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sand);
}
.hour__credit{
  position: absolute;
  right: var(--pad);
  bottom: 1.2rem;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ---------------------------------------------------------------- reviews */
.reviews{
  background: var(--forest);
  color: #fff;
  overflow: hidden;
}
.reviews__pin{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--hdr-h) + 1.5rem) 3.5rem;
}
.reviews__grid{
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
}
.reviews__h2{
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--sand);
  margin-top: 1rem;
}
.reviews__score{
  display: flex; align-items: flex-end;
  gap: .5rem;
  margin-top: 1.1rem;
}
.reviews__num{
  font-family: var(--display);
  font-size: clamp(5rem, 11vw, 11rem);
  line-height: .72;
  letter-spacing: -.05em;
  color: var(--clay);
  font-variant-numeric: tabular-nums;
}
.reviews__den{
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  color: rgba(232,220,200,.7);
  padding-bottom: .4rem;
}
.reviews__meta{
  margin-top: 1.6rem;
  max-width: 28ch;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--sand);
}
.reviews__meta a{
  color: var(--sand);
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-underline-offset: .22em;
}
.reviews__meta a:hover{ color: #fff; }

.reviews__viewport{ overflow: hidden; min-width: 0; }
.reviews__track{
  display: flex;
  gap: 1.4rem;
  will-change: transform;
}
.review{
  flex: 0 0 min(42vw, 520px);
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 48vh, 460px);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--sand);
  color: var(--ink);
  border-radius: 24px;
}
.review .quote-mark{ color: var(--clay-d); font-size: 3.2rem; margin-bottom: .9rem; }
.review p{
  font-family: var(--display);
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  line-height: 1.42;
}
.review footer{
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem;
  font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.review footer strong{ color: var(--ink); }
.reviews__progress{
  height: 2px;
  margin-top: 2rem;
  background: rgba(232,220,200,.2);
  overflow: hidden;
}
.reviews__progress i{
  display: block;
  height: 100%;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------------------------------------------------------------- fees */
.fees{
  background: var(--sand);
  padding-block: clamp(5.5rem, 10vw, 9rem);
}
.fees__head{ max-width: 100%; }
.fees__kicker{
  margin-top: 1.2rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
  color: var(--ink-soft);
}
.fees__big{
  font-family: var(--display);
  font-size: clamp(4rem, 10.4vw, 10.5rem);
  font-weight: 300;
  line-height: .84;
  letter-spacing: -.045em;
  color: var(--ink);
  margin-top: .4rem;
}
.fees__dot{ color: var(--clay); }
.fees__free{
  margin-top: 1.4rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--clay-d);
}
.fees__body{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) auto;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: end;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  max-width: 1120px;
}
.fees__copy{
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34ch;
}
.fees__cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.6rem;
}
.fees .label{ color: var(--ink-soft); }
.fees__value{
  margin-top: .45rem;
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ink);
}
.fees__body .btn{ justify-self: start; }

/* ---------------------------------------------------------------- bristol */
.bristol{
  background: var(--sage);
  color: var(--ink);
  padding-block: clamp(5.5rem, 10vw, 9rem);
}
.bristol__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.bristol__media{
  margin: 0;
  position: relative;
}
.bristol__imgwrap{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  aspect-ratio: 4 / 3;
}
.bristol__imgwrap img{
  position: absolute;
  left: 0; top: -6%;
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: 50% 55%;
  will-change: transform;
}
.bristol__media figcaption{
  margin-top: .8rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.bristol__body .h2{ color: var(--forest); max-width: 12ch; }
.bristol__copy{
  margin-top: 1.4rem;
  max-width: 40ch;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
}
.bristol__address{
  margin-top: 2rem;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink);
}
.bristol__address .label{ display: block; margin-bottom: .4rem; color: var(--ink); }
.bristol__links{
  display: flex; flex-wrap: wrap;
  gap: .6rem 1.8rem;
  margin-top: 1.6rem;
}
.bristol__links a{
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--clay-d);
  text-underline-offset: .22em;
}
.bristol__links a:hover{ color: var(--forest); }

/* ---------------------------------------------------------------- faq */
.faq{
  background: var(--paper);
  padding-block: clamp(5.5rem, 10vw, 9rem);
}
.faq__grid{
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.faq__head{
  position: sticky;
  top: calc(var(--hdr-h) + 3rem);
}
.faq__head .h2{ max-width: 9ch; }
.faq__head .link-arrow{ margin-top: 1.8rem; }

.faq__block details{ border-top: 1px solid rgba(36,36,34,.14); }
.faq__block details:first-child{ border-top: 0; }
.faq__block summary{
  display: flex; align-items: baseline;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
  transition: color .2s;
}
.faq__block summary::-webkit-details-marker{ display: none; }
.faq__block summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--body);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--clay-d);
  transition: transform .3s var(--ease);
}
.faq__block details[open] summary::after{ transform: rotate(45deg); }
.faq__block summary:hover{ color: var(--clay-d); }
.faq__num{
  flex: 0 0 1.7rem;
  font-family: var(--body);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--clay-d);
}
.faq__a p{
  padding: 0 2.2rem 1.35rem 2.7rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------------------------------------------------------------- contact */
.contact{
  background: var(--forest);
  color: #fff;
  padding-block: clamp(5.5rem, 10vw, 9rem) clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
}
.contact__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.contact__h2{
  font-family: var(--display);
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: .92;
  letter-spacing: -.035em;
  color: #fff;
  margin-top: 1.4rem;
  max-width: 10ch;
}
.contact__lead{
  margin-top: 1.6rem;
  max-width: 36ch;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--sand);
}
.contact__actions{
  display: flex; flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}
.contact__details{ display: grid; gap: 1.4rem; margin: 0; }
.contact__details dt{
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: .25rem;
}
.contact__details dd{
  font-size: 1.05rem;
  line-height: 1.55;
  color: #fff;
}
.contact__details address{ line-height: 1.55; }
.contact__details a{
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(232,220,200,.6);
  text-underline-offset: .22em;
  transition: color .2s, text-decoration-color .2s;
}
.contact__details a:hover{ color: var(--sand); text-decoration-color: var(--sand); }

.contact__closing{
  margin-top: clamp(4rem, 9vw, 8rem);
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 6rem);
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--sand);
  max-width: 18ch;
}
.contact__closing em{ font-style: italic; color: var(--clay); }

/* ---------------------------------------------------------------- footer */
.foot{
  background: var(--ink);
  border-top: 0;
  padding-block: clamp(3rem, 5vw, 4.5rem) 1.8rem;
}
.foot__top{
  border-bottom: 0;
  padding-bottom: clamp(2.2rem, 4vw, 3rem);
}
.foot__brand p{
  margin-top: 1.1rem;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  max-width: 30ch;
}
.brand--foot .brand__name{ color: var(--sand); font-size: 1.8rem; }
.brand--foot .brand__sub{ color: rgba(232,220,200,.78); }

.foot__nav{ grid-template-columns: minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr); }
.foot__h{
  font-family: var(--body);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .2em;
  color: rgba(255,255,255,.55);
  margin-bottom: .9rem;
}
.foot__nav a{
  font-size: .86rem;
  line-height: 1.45;
  color: rgba(255,255,255,.82);
  overflow-wrap: break-word;
  transition: color .2s;
}
.foot__nav a:hover{ color: var(--clay); }
.foot__bottom{
  font-family: var(--body);
  font-size: .72rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.55);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .hero__lead{ max-width: 31ch; }
}

@media (max-width:1023px){
  :root{ --hdr-h: 68px; }
  .hdr__cta{ display: none; }
  .brand__name{ font-size: 1.4rem; }
  .brand__sub{ font-size: .48rem; }

  .nav{ background: var(--forest); }
  .nav__head{ border-bottom: 0; }
  .nav__headlabel{ color: rgba(232,220,200,.65); font-family: var(--body); }
  .nav__close{ color: var(--sand); border-color: rgba(232,220,200,.3); }
  .nav__item{ border-bottom: 0; }
  .nav__link{
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--sand);
    padding: .9rem .1rem;
  }
  .nav__link::after{ display: none; }
  .nav__link:hover{ color: var(--clay); }

  .burger{ border-color: rgba(36,36,34,.3); }
  .burger span{ background: var(--ink); }

  .nav__foot{
    display: grid;
    gap: .7rem;
    margin-top: auto;
    padding-top: 1.4rem;
    font-family: var(--body);
    font-size: .92rem;
  }
  .nav__foot a{ color: rgba(232,220,200,.8); }
  .nav__foot a.nav__cta{ color: #fff; }
  .nav__cta{
    display: block;
    text-align: center;
    padding: .95rem 1rem;
    background: var(--clay-d);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 999px;
  }

  .foot__nav{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.8rem 1.4rem; }

  /* reviews become a vertical stack, no pin */
  .reviews__pin{ min-height: 0; padding-block: clamp(4rem,8vw,6rem); }
  .reviews__grid{ grid-template-columns: minmax(0,1fr); gap: 2.4rem; }
  .reviews__viewport{ overflow: visible; }
  .reviews__track{
    flex-direction: column;
    gap: 1rem;
    transform: none !important;
  }
  .review{ flex: 1 1 auto; width: 100%; min-height: 0; }
  .reviews__progress{ display: none; }
}

@media (max-width:900px){
  .hero{ align-items: flex-start; }
  .hero__h1{ font-size: clamp(2.1rem, 10vw, 4.5rem); }
  .hero__lower{ grid-template-columns: minmax(0,1fr); gap: 2.4rem; }
  .hero__media{ justify-self: start; }
  .hero__disc{ left: auto; right: -1.4rem; top: -4%; }
  .hero__figure{ align-items: flex-start; }
  .hero__arch{ height: clamp(320px, 52vh, 440px); aspect-ratio: .74; }

  .who__grid,
  .how__grid,
  .about__grid,
  .bristol__grid,
  .faq__grid,
  .contact__grid{ grid-template-columns: minmax(0,1fr); gap: 2.6rem; }
  .who__head,
  .faq__head{ position: static; }
  .who__head .h2,
  .faq__head .h2{ max-width: 16ch; }

  .how__media{ margin-top: 2rem; }
  .how__quote{
    position: relative;
    right: auto; bottom: auto;
    width: calc(100% - 1.2rem);
    margin-top: -2rem;
    margin-left: 1.2rem;
  }
  .how__steps{ padding-top: 1rem; }

  .facts{ grid-template-columns: minmax(0,1fr); }
  .facts__stat{ border-right: 0; padding-right: 0; padding-bottom: 1rem; }

  .reviews__grid{ grid-template-columns: minmax(0,1fr); }
  .bristol__media{ order: 2; }
  .bristol__body{ order: 1; }

  .fees__body{ grid-template-columns: minmax(0,1fr); align-items: start; gap: 2.4rem; }
}

@media (max-width:700px){
  .also{ grid-template-columns: minmax(0,1fr); }
  .fees__cols{ grid-template-columns: minmax(0,1fr); gap: 1.2rem; }
  .hero__trust{ font-size: .68rem; }
}

@media (max-width:520px){
  .hero__lead{ font-size: 1.02rem; max-width: none; }
  .hero__actions{ gap: .8rem; }
  .hero__actions .btn{ flex: 1 1 100%; justify-content: center; }
  .hero__eyebrow{ font-size: .64rem; }
  .hero__arch{ aspect-ratio: .8; }

  .also{ padding: 1.3rem; }
  .concern{ grid-template-columns: 2.4rem minmax(0,1fr); }

  .facts__list > div{ grid-template-columns: minmax(0,1fr); gap: .2rem; }
  .facts__list dt{ padding-top: 0; }

  .review{ padding: 1.4rem; }
  .review p{ font-size: 1.15rem; }

  .contact__actions .btn{ flex: 1 1 100%; justify-content: center; }
  .contact__h2{ font-size: clamp(2.8rem, 12vw, 4rem); }
  .contact__closing{ font-size: clamp(2rem, 10vw, 3rem); }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker__row{ animation: none; }
  .ticker__track[aria-hidden="true"]{ display: none; }
  .reviews__track{ flex-wrap: wrap; }
  .review{ flex: 1 1 calc(50% - 1rem); }
  .hero__h1 .line > span{ transform: none !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width:1023px){
  .review{ flex: 1 1 100%; }
}


/* ==========================================================================
   Smooth state changes (2026-11-02) — sticky header reveal, buttons, links,
   rows and every hover state. Transform/opacity/colour only.
   ========================================================================== */
.hdr{
  transition: transform .55s cubic-bezier(.16,1,.3,1),
              background-color .4s cubic-bezier(.16,1,.3,1),
              box-shadow .4s cubic-bezier(.16,1,.3,1),
              border-color .4s cubic-bezier(.16,1,.3,1);
}
a, button, summary, input, textarea, select,
.btn, .link-arrow, .nav__link, .foot__nav a,
[class*="__link"], [class*="__cta"]{
  transition: color .32s cubic-bezier(.16,1,.3,1),
              background-color .32s cubic-bezier(.16,1,.3,1),
              border-color .32s cubic-bezier(.16,1,.3,1),
              box-shadow .32s cubic-bezier(.16,1,.3,1),
              opacity .32s cubic-bezier(.16,1,.3,1),
              text-decoration-color .32s cubic-bezier(.16,1,.3,1),
              gap .35s cubic-bezier(.16,1,.3,1);
}
.btn, .link-arrow, .hdr__cta{
  transition: color .32s cubic-bezier(.16,1,.3,1),
              background-color .32s cubic-bezier(.16,1,.3,1),
              border-color .32s cubic-bezier(.16,1,.3,1),
              box-shadow .32s cubic-bezier(.16,1,.3,1),
              opacity .32s cubic-bezier(.16,1,.3,1),
              transform .45s cubic-bezier(.16,1,.3,1),
              filter .3s cubic-bezier(.16,1,.3,1);
}
.link-arrow svg, .nav__chev{
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s;
}
[class*="row"], [class*="item"], [class*="card"], [class*="fee"],
[class*="word"], [class*="step"], [class*="quote"], [class*="cluster"]{
  transition: color .32s cubic-bezier(.16,1,.3,1),
              background-color .32s cubic-bezier(.16,1,.3,1),
              border-color .32s cubic-bezier(.16,1,.3,1),
              box-shadow .32s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .hdr, a, button, summary, input, textarea, select, .btn, .link-arrow,
  .nav__link, .foot__nav a, [class*="row"], [class*="item"], [class*="card"],
  [class*="fee"], [class*="word"], [class*="step"], [class*="quote"], [class*="cluster"]{
    transition-duration: .01ms;
  }
}

.faq__block summary{ transition: color .3s var(--ease); }