/* ==========================================================================
   VIDA · homepage
   Canvas #F8F6F1 · Bone #F2EEE6 · Canyon Sage #3D4232
   Dry Grass #6B7355 · Sandstone #C9B79C · Copper #A65A3A
   Newsreader (display) · Spectral (text)
   ========================================================================== */

:root{
  --canvas:      #F8F6F1;
  --bone:        #F2EEE6;
  --canyon-sage: #3D4232;
  --dry-grass:   #6B7355;
  --dry-grass-t: #4E553E;
  --sandstone:   #C9B79C;
  --copper:      #A65A3A;

  --hair:        rgba(201, 183, 156, .62);
  --hair-soft:   rgba(201, 183, 156, .38);

  --serif-display: "Newsreader", Georgia, "Times New Roman", serif;
  --serif-text:    "Spectral", Georgia, "Times New Roman", serif;

  --pad: 56px;
  --col-gap: 28px;

  /* The cream strip above the photograph. The masthead lives inside it. */
  --strip: 118px;

  /* Entrance lockup proportions, set for the LONGER descriptor. */
  --mark-size:      clamp(72px, 15.4vw, 208px);
  --mark-track:     0.30em;
  --desc-size:      calc(var(--mark-size) * 0.085);
  --desc-track:     0.56em;
  --gap-mark-rule:  calc(var(--mark-size) * 0.30);
  --gap-rule-desc:  calc(var(--mark-size) * 0.115);

  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-travel: cubic-bezier(.55, .06, .18, 1);
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }

html.is-entering, html.is-entering body{ overflow:hidden; height:100%; }

body{
  background: var(--canvas);
  color: var(--canyon-sage);
  font-family: var(--serif-text);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ list-style:none; padding:0; }
::selection{ background: var(--sandstone); color: var(--canyon-sage); }


/* ==========================================================================
   ENTRANCE · LOCKED
   ========================================================================== */

.entrance{
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
  display: grid; place-items: center;
}

.entrance__lockup{
  display: grid; justify-items: center;
  transform-origin: 0 0; will-change: transform;
  margin-block-start: -6vh;
  opacity: 0;
}

.entrance__word{
  display: block;
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: var(--mark-size);
  line-height: 0.86;
  letter-spacing: var(--mark-track);
  margin-inline-end: calc(var(--mark-track) * -1);
  color: var(--canyon-sage);
  transform-origin: 0 0; will-change: transform;
}

.entrance__base{
  display: grid; justify-items: center;
  margin-block-start: var(--gap-mark-rule);
}

.entrance__rule{
  display: block; height: 1px; width: 0;
  background: var(--copper);
  margin-block-end: var(--gap-rule-desc);
}

.entrance__descriptor{
  display: block;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: var(--desc-size);
  line-height: 1;
  letter-spacing: var(--desc-track);
  margin-inline-end: calc(var(--desc-track) * -1);
  white-space: nowrap;
  color: var(--dry-grass);
}

.is-armed .entrance__lockup{ opacity: 1; transition: opacity 520ms ease-out; }

.is-handing-over .entrance__base{ opacity: 0; transition: opacity 350ms ease-in; }

.is-travelling .entrance__word{
  transform: translate(var(--flip-x), var(--flip-y)) scale(var(--flip-s));
  transition: transform 1100ms var(--ease-travel);
}

.entrance.is-done{ display:none; }


/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead{
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  padding: 40px var(--pad) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
}
.masthead > *{ pointer-events: auto; }

.is-settled .masthead{
  opacity: 1;
  position: absolute;
  transition: opacity 420ms ease-out;
}

.masthead__lockup{
  display: inline-flex;
  align-items: baseline;
  gap: 20px;
  text-decoration: none;
}

.masthead__word{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.30em;
  margin-inline-end: -0.30em;
  color: var(--canyon-sage);
}

.masthead__hairline{
  align-self: center;
  margin-inline-start: 5px;
  width: 1px; height: 15px;
  background: var(--copper);
  flex: 0 0 auto;
}

.masthead__descriptor{
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.22em;
  margin-inline-end: -0.22em;
  white-space: nowrap;
  color: var(--canyon-sage);
}


/* ---- navigation ---------------------------------------------------------- */

.nav{ display: flex; align-items: baseline; gap: 34px; padding-block-start: 6px; }

.nav__link,
.nav__trigger{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 12px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--canyon-sage);
  text-decoration: none;
  transition: color 220ms ease;
}
.nav__trigger{
  display: inline-block;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  font-family: var(--serif-display);
}
.nav__link:hover,
.nav__trigger:hover,
.nav__item.is-open .nav__trigger{ color: var(--copper); }

.nav__item{ position: relative; }
.nav__item .nav__trigger::after{
  content: "";
  display: block;
  height: 1px;
  margin-block-start: 6px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 280ms var(--ease);
}
.nav__item.is-open .nav__trigger::after{ transform: scaleX(1); }

.nav__book{
  color: var(--canyon-sage);
  border-block-end: 1px solid var(--copper);
  padding-block-end: 5px;
}

.nav__toggle{
  display: none;
  background: none; border: 0; padding: 6px 0 0;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 12px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--canyon-sage);
  cursor: pointer;
}


/* ---- dropdown panels ----------------------------------------------------- */

.menu{
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 59;
  background: var(--canvas);
  border-block-start: 1px solid var(--hair-soft);
  border-block-end: 1px solid var(--hair-soft);
  margin-block-start: 26px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 260ms ease, transform 320ms var(--ease);
}
.menu.is-open{ opacity: 1; transform: translateY(0); }

.menu__inner{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: 72px;
  padding: 40px var(--pad) 46px;
}

.menu__col li + li{ margin-block-start: 22px; }

.menu__col a{
  display: block;
  text-decoration: none;
  color: var(--canyon-sage);
  max-width: 46ch;
}
.menu__col span{
  display: block;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  transition: color 200ms ease;
}
.menu__col em{
  display: block;
  margin-block-start: 5px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dry-grass-t);
  opacity: .82;
}
.menu__col a:hover span{ color: var(--copper); }

.menu__col--quiet{
  border-inline-start: 1px solid var(--hair-soft);
  padding-inline-start: 72px;
}
.menu__col--quiet span{ font-size: 16px; }
.menu__col--quiet li + li{ margin-block-start: 16px; }
.menu__all span{
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}


/* ---- mobile panel -------------------------------------------------------- */

.nav__panel{
  position: fixed; inset: 0; z-index: 70;
  background: var(--canvas);
  display: flex; flex-direction: column; justify-content: center;
  gap: 26px;
  padding: 0 26px;
}
.nav__panel a{
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--canyon-sage);
  text-decoration: none;
}


/* ==========================================================================
   1 · HERO
   A cream strip holds the masthead. The photograph takes the rest of the
   first screen and the page moves on straight after it.
   ========================================================================== */

.hero{
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}

.hero__band{
  position: absolute; inset-inline: 0; inset-block-end: 0;
  height: calc(100svh - var(--strip));
  min-height: calc(600px - var(--strip));
  overflow: hidden;
  transform: translateY(100%);
}
.is-rising .hero__band{ transform: translateY(0); transition: transform 1080ms var(--ease) 140ms; }

.hero__image{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  transform: scale(1.06);
}
.is-rising .hero__image{ transform: scale(1); transition: transform 1800ms var(--ease) 140ms; }


/* ==========================================================================
   SHARED
   ========================================================================== */

.link{
  display: inline-block;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 5px;
  transition: color 220ms ease, border-color 220ms ease;
}
.link:hover{ color: var(--copper); border-block-end-color: var(--copper); }

.cta{
  display: inline-block;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--copper);
  padding-block-end: 7px;
  margin-inline-end: 44px;
  transition: color 220ms ease;
}
.cta:hover{ color: var(--copper); }
.cta--quiet{ color: var(--dry-grass-t); border-block-end-color: var(--hair); }
.cta--quiet:hover{ color: var(--canyon-sage); }
.cta--lg{ font-size: 15px; }


/* ==========================================================================
   2 · POSITIONING
   ========================================================================== */

.lede{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: 92px var(--pad) 0;
}

.lede__h1{
  grid-column: 1 / 8;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--canyon-sage);
}

.lede__body{
  grid-column: 9 / 13;
  margin-block-start: 12px;
  font-size: 18px;
  line-height: 1.66;
  color: var(--canyon-sage);
}

.lede__actions{
  grid-column: 1 / 8;
  margin-block-start: 58px;
}


/* ==========================================================================
   3 · CONDITIONS · the homepage routing system
   The one place on the page where movement belongs.
   ========================================================================== */

.routes{ padding-block-start: 148px; }

.routes__head{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  padding-inline: var(--pad);
}

.routes__h2{
  grid-column: 1 / 7;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.14;
  color: var(--canyon-sage);
}

.routes__intro{
  grid-column: 8 / 12;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--canyon-sage);
}

.routes__nav{
  grid-column: 12 / 13;
  justify-self: end;
  display: flex;
  gap: 10px;
}

.arrow{
  width: 40px; height: 40px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: none;
  color: var(--canyon-sage);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.arrow:hover{ border-color: var(--copper); color: var(--copper); }
.arrow[disabled]{ opacity: .3; cursor: default; }
.arrow[disabled]:hover{ border-color: var(--hair); color: var(--canyon-sage); }

.routes__track{
  margin-block-start: 56px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(290px, 27vw, 430px);
  column-gap: 30px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad) 0;
  padding-inline: var(--pad);
  scrollbar-width: none;
  outline: none;
}
.routes__track::-webkit-scrollbar{ display: none; }
.routes__track.is-dragging{ scroll-snap-type: none; cursor: grabbing; }
.routes__track:focus-visible{ outline: 1px solid var(--copper); outline-offset: 8px; }

.route{ scroll-snap-align: start; display: flex; }

.route__hit{
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: var(--canyon-sage);
}

.route__figure{
  overflow: hidden;
  background: var(--bone);
}
.route__figure img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--ease);
}
.route__hit:hover .route__figure img{ transform: scale(1.06); }

.route__num{
  display: block;
  margin-block-start: 22px;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--sandstone);
}

.route__name{
  margin-block-start: 10px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(22px, 1.85vw, 28px);
  line-height: 1.18;
  transition: color 220ms ease;
}
.route__hit:hover .route__name{ color: var(--copper); }

.route__note{
  margin-block-start: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--canyon-sage);
  max-width: 40ch;
}

.route__link{
  align-self: flex-start;
  margin-block-start: auto;
  padding-block-start: 24px;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
  border-block-end: 1px solid var(--hair-soft);
  padding-block-end: 5px;
  transition: color 220ms ease, border-color 220ms ease;
}
.route__hit:hover .route__link{ color: var(--canyon-sage); border-block-end-color: var(--copper); }

/* The two secondary routes close the same progression. They carry no
   photograph, which is what makes them read as secondary. */
.also{
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 46px;
  border-inline-start: 1px solid var(--hair-soft);
  padding-inline-start: 40px;
}
.also__item{ display: block; text-decoration: none; }
.also span{
  display: block;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(22px, 1.85vw, 28px);
  line-height: 1.18;
  color: var(--canyon-sage);
  transition: color 220ms ease;
}
.also em{
  display: inline-block;
  margin-block-start: 16px;
  font-style: normal;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dry-grass-t);
  border-block-end: 1px solid var(--hair-soft);
  padding-block-end: 5px;
  transition: color 220ms ease, border-color 220ms ease;
}
.also__item:hover span{ color: var(--copper); }
.also__item:hover em{ color: var(--canyon-sage); border-block-end-color: var(--copper); }

/* chapter break */
.rule{
  border: 0;
  height: 1px;
  background: var(--hair-soft);
  margin: 150px var(--pad) 0;
}


/* ==========================================================================
   4 · VIDA · the one personal section
   ========================================================================== */

.vida{
  margin-block-start: 132px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
  padding-inline: var(--pad);
}

.vida__text{ grid-column: 1 / 6; }

.vida__eyebrow{
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}

.vida__h2{
  margin-block-start: 22px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.14;
  color: var(--canyon-sage);
}

.vida__lead{
  margin-block-start: 26px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--canyon-sage);
}

.vida__body{
  margin-block-start: 18px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--canyon-sage);
  max-width: 46ch;
}

.vida__text .link{ margin-block-start: 40px; }

.vida__figure{
  grid-column: 7 / 11;
  overflow: hidden;
  background: var(--bone);
}
.vida__figure img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 26%;
}


/* ==========================================================================
   5 · TREATMENTS PATHWAY · a link, not a chapter
   ========================================================================== */

.pathway{
  margin-block-start: 132px;
  padding-inline: var(--pad);
}


/* ==========================================================================
   6 · QUIET MOMENT
   ========================================================================== */

.still{
  margin-block-start: 132px;
  padding-inline: var(--pad);
  overflow: hidden;
}
.still img{
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: 50% 52%;
  transform: scale(1.05);
  transition: transform 1600ms var(--ease);
}
.still.is-in img{ transform: scale(1); }


/* ==========================================================================
   7 · FINAL ACTION
   ========================================================================== */

.close{
  margin-block-start: 150px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding-inline: var(--pad);
}

.close__h2{
  grid-column: 1 / 7;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.1;
  color: var(--canyon-sage);
}

.close__body{
  grid-column: 8 / 12;
  align-self: end;
  font-size: 16.5px;
  line-height: 1.64;
  color: var(--canyon-sage);
}

.close__actions{
  grid-column: 1 / 9;
  margin-block-start: 56px;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{
  margin-block-start: 170px;
  padding: 42px var(--pad) 64px;
  border-block-start: 1px solid var(--hair-soft);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: 22px;
  align-items: baseline;
}

.foot__lockup{ grid-column: 1 / 4; display: flex; align-items: baseline; gap: 16px; }
/* The footer wordmark was Newsreader 300 at 20px and read faint against the
   canvas. Rebecca, 9 September: "much darker and more pronounced". It was
   ALREADY Canyon Sage, the darkest text colour on this site, so there was no
   colour left to give and the two levers were WEIGHT and SIZE. 500 is the
   ceiling Newsreader is loaded at. Same lesson as the /neuroacupuncture
   labels: when a line reads light, check its weight and size before reaching
   for a darker tone. */
.foot__word{
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 0.30em;
  margin-inline-end: -0.30em;
  color: var(--canyon-sage);
}
.foot__descriptor{
  font-family: var(--serif-display);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  margin-inline-end: -0.22em;
  color: var(--dry-grass-t);
}

.foot__practitioner{
  grid-column: 4 / 8;
  font-size: 13.5px;
  color: var(--dry-grass-t);
}
.foot__practitioner span{ color: var(--sandstone); padding-inline: 6px; }

.foot__nav{
  grid-column: 8 / 13;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.foot__nav a{
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
  text-decoration: none;
  transition: color 220ms ease;
}
.foot__nav a:hover{ color: var(--canyon-sage); }


/* ==========================================================================
   MOBILE · composed for the screen, not collapsed onto it
   ========================================================================== */

@media (max-width: 900px){
  :root{ --pad: 26px; --strip: 84px; }

  .nav{ display: none; }
  .nav__toggle{ display: block; }
  .menu{ display: none !important; }

  .masthead{ padding-block-start: 30px; }
  .masthead__lockup{ gap: 12px; flex-wrap: wrap; }
  .masthead__word{ font-size: 21px; }
  .masthead__hairline{ height: 12px; }
  .masthead__descriptor{ font-size: 8px; letter-spacing: 0.18em; margin-inline-end: -0.18em; }

  .hero{ height: 100svh; min-height: 520px; }
  .hero__band{ height: calc(100svh - var(--strip)); min-height: calc(520px - var(--strip)); }
  .hero__image{ object-position: 60% 40%; }

  .lede{ display: block; padding-block-start: 62px; }
  .lede__h1{ font-size: clamp(31px, 8.4vw, 42px); line-height: 1.12; }
  .lede__body{ margin-block-start: 26px; font-size: 16.5px; }
  .lede__actions{ margin-block-start: 42px; }
  .cta{ display: block; margin: 0 0 22px; width: max-content; }

  .routes{ padding-block-start: 96px; }
  .routes__head{ display: block; }
  .routes__intro{ margin-block-start: 20px; font-size: 15.5px; }
  .routes__nav{ display: none; }

  .routes__track{
    margin-block-start: 36px;
    grid-auto-columns: 78vw;
    column-gap: 18px;
    padding-inline: var(--pad);
  }
  .route__note{ font-size: 15px; }

  .also{ gap: 40px; padding-inline-start: 26px; justify-content: flex-start; padding-block-start: 8px; }
  .also__item{ max-width: none; }

  .rule{ margin-block-start: 92px; }

  .vida{ margin-block-start: 92px; display: block; padding-inline: var(--pad); }
  .vida__figure{ margin-block-start: 42px; }
  .vida__figure img{ aspect-ratio: 4 / 5; }
  .vida__lead{ font-size: 17.5px; }

  .pathway{ margin-block-start: 88px; }

  .still{ margin-block-start: 88px; padding-inline: 0; }
  .still img{ aspect-ratio: 4 / 5; }

  .close{ margin-block-start: 96px; display: block; }
  .close__body{ margin-block-start: 24px; }
  .close__actions{ margin-block-start: 40px; }

  .foot{ margin-block-start: 104px; display: block; }
  .foot__practitioner{ margin-block-start: 22px; font-size: 13px; }
  .foot__nav{ margin-block-start: 26px; display: grid; gap: 12px; justify-self: start; }
}

@media (max-width: 680px){
  :root{
    --mark-size:  clamp(66px, 21.5vw, 92px);
    --mark-track: 0.28em;
    --desc-size:  11.5px;
    --desc-track: 0.25em;
    --gap-mark-rule: calc(var(--mark-size) * 0.38);
    --gap-rule-desc: calc(var(--mark-size) * 0.16);
  }
  .entrance__lockup{ margin-block-start: -15vh; }
}


/* ==========================================================================
   REDUCED MOTION · the settled state, immediately
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html.is-entering, html.is-entering body{ overflow: visible; height: auto; }
  .entrance{ display: none; }
  .masthead{ opacity: 1; position: absolute; }
  .hero__band{ transform: none; }
  .hero__image{ transform: none; }
  .still img{ transform: none; }
  .menu{ transition: none; }
  *, *::before, *::after{ animation: none !important; transition-duration: 1ms !important; }
}

/* ==========================================================================
   CONDITION PAGES · the shared interior system
   First built for /stress-and-anxiety. The remaining five condition pages
   reuse these components unchanged.

   The page has two halves, on purpose.

   The OPENER is VIDA's own: asymmetric, left aligned, twelve column. It
   carries the link back to the homepage and it is the part Rebecca approved.

   Everything BELOW the opener follows REDMINT's rhythm, at Rebecca's
   direction: centred chapters at a narrow measure, plain lists with no rules
   and no cards, then alternating photograph and copy blocks, then a centred
   close. Substantial quiet between every chapter. Redmint's composition
   only. None of its type, colour or branding.
   ========================================================================== */

/* ---- a photograph that settles once, on entry. Used once per page. ------- */
[data-reveal]{ overflow: hidden; }
[data-reveal] img{ transform: scale(1.05); transition: transform 1600ms var(--ease); }
[data-reveal].is-in img{ transform: scale(1); }

/* ---- a link inside running copy ----------------------------------------- */
a.inline{
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 1px;
  transition: color 220ms ease, border-color 220ms ease;
}
a.inline:hover{ color: var(--copper); border-block-end-color: var(--copper); }


/* ---- 1 · the opening · VIDA's own composition, left aligned -------------- */
/* Interior pages carry no entrance overlay, so the first chapter clears the
   masthead itself. --strip is the same measure the homepage uses. */

.cond-open{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: calc(var(--strip) + 46px) var(--pad) 0;
}

.cond-open__eyebrow{
  grid-column: 1 / 13;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}

.cond-open__h1{
  grid-column: 1 / 8;
  grid-row: 2;
  margin-block-start: 30px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--canyon-sage);
}

.cond-open__intro{
  grid-column: 9 / 13;
  grid-row: 2 / 4;
  align-self: start;
  margin-block-start: 30px;
}
.cond-open__intro p{
  font-size: 17px;
  line-height: 1.68;
  color: var(--dry-grass-t);
}
.cond-open__intro p:first-child{ color: var(--canyon-sage); }
.cond-open__intro p + p{ margin-block-start: 18px; }

.cond-open__actions{ grid-column: 1 / 9; grid-row: 3; margin-block-start: 54px; }


/* ---- 2 · the one wide photograph ---------------------------------------- */
/* Full bleed, and the only place movement lives on a condition page. */

.cond-lead{ margin-block-start: 100px; }
.cond-lead img{
  width: 100%;
  height: clamp(400px, 56vh, 620px);
  object-fit: cover;
  object-position: 50% 50%;
}


/* ==========================================================================
   BELOW THE OPENER · the Redmint rhythm
   ========================================================================== */

/* ---- 3 · a centred chapter ---------------------------------------------- */

.cond-mid{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  text-align: center;
}

.cond-mid__h2{
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(27px, 2.7vw, 39px);
  line-height: 1.18;
  color: var(--canyon-sage);
}

.cond-mid__intro{
  max-width: 58ch;
  margin: 28px auto 0;
  font-size: 17px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}

/* A list, set plainly. No rules, no cards, no bullets, no numerals. */
.cond-list{
  max-width: 1120px;
  margin: 54px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 52px;
  row-gap: 42px;
}
.cond-list--four{ grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 44px; }

.cond-list li{
  font-size: 17px;
  line-height: 1.58;
  color: var(--canyon-sage);
}
.cond-list--four li{ font-size: 16.5px; }

.cond-mid__note{
  max-width: 56ch;
  margin: 48px auto 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}
.cond-mid__note--lead{ color: var(--canyon-sage); font-size: 17.5px; }
.cond-mid__note + .cond-mid__note{ margin-block-start: 16px; }


/* ---- 4 · alternating photograph and copy -------------------------------- */
/* The photograph is a contained rectangle with real quiet around it, not a
   full bleed band and not a card. The copy column stays narrow beside it.
   The two blocks on a page mirror each other and carry different ratios. */

.cond-alt{
  margin-block-start: 108px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
}

.cond-alt__figure{ grid-column: 2 / 7; background: var(--bone); overflow: hidden; }
.cond-alt__text{ grid-column: 8 / 12; }

.cond-alt--flip .cond-alt__text{ grid-column: 2 / 6; }
.cond-alt--flip .cond-alt__figure{ grid-column: 7 / 12; }

/* --top · the photograph starts level with the heading instead of floating in
   the middle. For blocks where the copy is much taller than the picture. */
.cond-alt--top{ align-items: start; }

.cond-alt__figure img{ width: 100%; object-fit: cover; }

.cond-alt__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 35px);
  line-height: 1.18;
  color: var(--canyon-sage);
}

.cond-alt__lead{
  margin-block-start: 24px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--canyon-sage);
}

.cond-alt__body{
  margin-block-start: 18px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}

.cond-alt__list{ margin-block-start: 28px; }
.cond-alt__list li{
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--canyon-sage);
}
.cond-alt__list li + li{ margin-block-start: 15px; }


/* ---- a Copper separator between two text chapters ------------------------
   Used only where one text section meets another with nothing between them.
   Where a photograph already separates two chapters, no rule is needed. */

.cond-sep{
  width: 30px;
  height: 1px;
  border: 0;
  background: var(--copper);
  margin: 92px auto 0;
}
.cond-sep + .cond-mid,
.cond-sep + .cond-research,
.cond-page .cond-sep + .close{ margin-block-start: 44px; }


/* ---- 5 · research ------------------------------------------------------- */
/* Evidence, centred and quiet. Space around it instead of a rule. */

.cond-research{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  text-align: center;
}
.cond-research__label{
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}
.cond-research__body{
  max-width: 64ch;
  margin: 26px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--dry-grass-t);
}
.cond-research__cite{
  display: block;
  max-width: 60ch;
  margin: 26px auto 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--canyon-sage);
}
.cond-research__cite a{
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 1px;
  transition: color 220ms ease, border-color 220ms ease;
}
.cond-research__cite a:hover{ color: var(--copper); border-block-end-color: var(--copper); }


/* ---- 6 · when acupuncture may not be enough ------------------------------ */
/* Safety information needs weight without alarm. One short Copper rule,
   used once on the page, is the entire treatment. No panel, no tint, no icon. */

.cond-caution{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  text-align: center;
}
.cond-caution__rule{
  width: 46px; height: 1px;
  background: var(--copper);
  margin: 0 auto 36px;
}
.cond-caution__h2{
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(25px, 2.4vw, 33px);
  line-height: 1.2;
  color: var(--canyon-sage);
}
.cond-caution__body{
  max-width: 58ch;
  margin: 24px auto 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}
.cond-caution ul{
  max-width: 980px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 46px;
  row-gap: 28px;
}
.cond-caution li{
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--canyon-sage);
}
.cond-caution__crisis{
  max-width: 56ch;
  margin: 44px auto 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--canyon-sage);
}
.cond-caution__crisis a{
  color: var(--copper);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 1px;
}
.cond-caution__crisis a:hover{ border-block-end-color: var(--copper); }


/* ---- 7 · the close ------------------------------------------------------ */
/* The homepage close component, centred so the page ends the way the rest
   of it reads. */

.cond-page .close{
  margin-block-start: 108px;
  display: block;
  text-align: center;
}
.cond-page .close__h2{
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(30px, 3.3vw, 47px);
}
.cond-page .close__body{
  max-width: 56ch;
  margin: 30px auto 0;
}
.cond-page .close__body p + p{ margin-block-start: 14px; }
.cond-page .close__actions{ margin-block-start: 50px; }
.cond-page .close__actions .cta{ margin-inline: 22px; }


/* ---- mobile · composed for the screen ----------------------------------- */

@media (max-width: 900px){
  .cond-open{ display: block; padding-block-start: calc(var(--strip) + 34px); }
  .cond-open__h1{ margin-block-start: 22px; font-size: clamp(31px, 8.4vw, 42px); }
  .cond-open__intro{ margin-block-start: 26px; }
  .cond-open__intro p{ font-size: 16.5px; }
  .cond-open__actions{ margin-block-start: 42px; }

  .cond-lead{ margin-block-start: 58px; }
  /* A viewport-height band crops this frame down to a fragment of a face on
     a phone. A square block keeps the whole head and the room around it. */
  .cond-lead img{ height: auto; aspect-ratio: 1 / 1; object-position: 56% 50%; }
  /* Pain and Injury opens on a wider frame than Stress and Anxiety, so the
     square pulls left to keep Vida, her hands and the patient in shot. */
  .cond-page--wide .cond-lead img{ object-position: 43% 50%; }

  .cond-mid{ margin-block-start: 72px; }
  .cond-mid__h2{ max-width: none; font-size: clamp(25px, 6.6vw, 32px); }
  .cond-mid__intro{ margin-block-start: 22px; font-size: 16.5px; }

  .cond-list{ margin-block-start: 34px; display: block; }
  .cond-list li{ font-size: 16.5px; }
  .cond-list li + li{ margin-block-start: 22px; }
  .cond-list--four li{ font-size: 16.5px; }

  .cond-mid__note{ margin-block-start: 34px; font-size: 16.5px; }
  .cond-mid__note--lead{ font-size: 17px; }

  .cond-sep{ margin-block-start: 62px; }
  .cond-sep + .cond-mid,
  .cond-sep + .cond-research,
  .cond-page .cond-sep + .close{ margin-block-start: 32px; }

  .cond-alt{ margin-block-start: 76px; display: block; }
  .cond-alt__text{ margin-block-start: 36px; }
  .cond-alt--flip .cond-alt__figure{ margin-block-start: 36px; }
  .cond-alt--flip .cond-alt__text{ margin-block-start: 0; }
  .cond-alt__figure img{ aspect-ratio: 4 / 5 !important; }

  .cond-research{ margin-block-start: 72px; }
  .cond-research__body{ margin-block-start: 22px; }

  .cond-caution{ margin-block-start: 72px; }
  .cond-caution__rule{ margin-block-end: 30px; }
  .cond-caution__h2{ max-width: none; }
  .cond-caution ul{ margin-block-start: 40px; display: block; }
  .cond-caution li + li{ margin-block-start: 22px; }
  .cond-caution__crisis{ margin-block-start: 46px; }

  .cond-page .close{ margin-block-start: 76px; }
  .cond-page .close__h2{ max-width: none; }
  .cond-page .close__actions .cta{ display: block; width: max-content; margin: 0 auto 22px; }
}


/* Reduced motion, restated after the condition system so it wins the cascade. */
@media (prefers-reduced-motion: reduce){
  [data-reveal] img{ transform: none; }
}


/* ---- additions for longer condition pages -------------------------------- */
/* First needed by /pain-and-injury, whose copy runs longer than Stress and
   Anxiety and carries lists that do not divide evenly into columns. */

/* Calls to action inside a centred chapter, where the approved copy puts them
   partway down the page rather than in the opener. */
.cond-mid__actions{ margin-block-start: 46px; }
.cond-mid__actions .cta{ margin-inline: 22px; }

/* A list whose item count does not divide evenly. Flex centres the short last
   row instead of leaving it hanging to the left the way a grid does. */
.cond-list--wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 950px;
  column-gap: 52px;
  row-gap: 34px;
}
/* A fixed basis, not a flexible one. Equal columns break into even rows and
   the short last row centres under them. */
.cond-list--wrap li{ flex: 0 0 280px; }

/* A second, quieter label inside the research chapter. */
.cond-research__sublabel{
  margin-block-start: 46px;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}
.cond-research__sublabel + .cond-research__cite{ margin-block-start: 18px; }
.cond-research__cite + .cond-research__cite{ margin-block-start: 10px; }

@media (max-width: 900px){
  .cond-mid__actions{ margin-block-start: 34px; }
  .cond-mid__actions .cta{ display: block; width: max-content; margin: 0 auto 22px; }
  .cond-list--wrap{ display: block; }
  .cond-list--wrap li + li{ margin-block-start: 22px; }
  .cond-research__sublabel{ margin-block-start: 36px; }
}


/* ==========================================================================
   PAIN AND INJURY · page scoped
   Redmint rhythm, unchanged. Centred single column copy, a full bleed lead,
   and photographs paired with copy in the shared alternating block. Nothing
   here is a new layout, only a wider measure and a video inside the existing
   `.cond-alt` figure slot.

   TRIED AND REJECTED 4 September, do not reintroduce: two column running copy
   (`.cond-cols`), a split alternating block with a full width tail, and a
   contained lead. When a chapter reads too narrow the lever is the measure and
   the type size. When a photograph needs more presence it goes in a
   `.cond-alt` block with copy beside it, not a full bleed band.
   ========================================================================== */

/* ---- wider centred chapters ---------------------------------------------
   Rebecca has asked three times for these to hold more of the page, so the
   measure is set in px rather than ch and the type goes up with it. This runs
   longer than a textbook measure on purpose. If it ever reads as too long a
   line, take the width down before taking the type size down. */
.cond-page--wide .cond-mid__h2{ max-width: 30ch; }
.cond-page--wide .cond-mid__intro{ max-width: 940px; font-size: 18.5px; }
.cond-page--wide .cond-mid__note{ max-width: 900px; font-size: 18px; }
.cond-page--wide .cond-mid__note--lead{ font-size: 19px; }
.cond-page--wide .cond-caution__h2{ max-width: 30ch; }
.cond-page--wide .cond-caution__body{ max-width: 900px; font-size: 18px; }
.cond-page--wide .cond-caution__crisis{ max-width: 860px; font-size: 18px; }
.cond-page--wide .cond-research__body{ max-width: 860px; }

/* Bullets inside an alternating block. The centred `.cond-list` grids stay
   plain, with no bullets and no numerals. */
.cond-alt__list--marked li{
  position: relative;
  padding-inline-start: 22px;
}
.cond-alt__list--marked li::before{
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sandstone);
}

/* ---- a video in the alternating block ------------------------------------
   Same slot, same width, same quiet as a photograph. Muted, looping, no
   controls, no sound. The lead gives up its reveal so this is the only
   movement on the page.

   The approved clip is PORTRAIT footage carrying a `rotation=-90` flag, so it
   is cropped and shown at 4/5. Never force it to 16/9, that squashes it. */
.cond-alt__figure--motion{
  /* The clip is 4/5 and portrait, so at the figure's full column width it runs
     far taller than the copy beside it and the two stop reading as one block.
     Capping it keeps the heights within about 60px at every width, which is
     the same target the photographs are held to. It stays flush to the left of
     its column. */
  max-width: 480px;
  margin-inline-end: auto;
}
.cond-alt__figure video{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce){
  .cond-alt__figure video{ display: none; }
  .cond-alt__figure--motion::after{
    content: "";
    display: block;
    aspect-ratio: 4 / 5;
    background-image: var(--motion-poster);
    background-size: cover;
    background-position: 50% 50%;
  }
}

@media (max-width: 900px){
  .cond-page--wide .cond-mid__intro,
  .cond-page--wide .cond-mid__note,
  .cond-page--wide .cond-caution__body,
  .cond-page--wide .cond-caution__crisis,
  .cond-page--wide .cond-research__body{ max-width: none; }
}


/* ==========================================================================
   NEUROACUPUNCTURE · page scoped
   Same Redmint rhythm as Pain and Injury, and it also carries
   `.cond-page--wide`, so this is the second page on the wider measure.

   Nothing here is a new layout. Three small things the approved copy needs
   that no earlier condition page has had to carry:
     1. a price and duration line above the opening call to action
     2. a second heading level inside a centred chapter
     3. a source credit under the safety list
   Everything else is the shared condition system, unchanged.
   ========================================================================== */

/* ---- 1 · duration and price, above the opening call to action ------------
   The approved copy states 60 minutes and $145 before the button, so it is
   information, not a label on the button. Set quiet and small, on its own
   line, so the button still reads as the action. */
.cond-page--neuro .cond-open__price{
  display: block;
  margin-block-end: 22px;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}

/* ---- 2 · the sub chapters -------------------------------------------------
   `When Neuroacupuncture may be considered` carries four sub sections in the
   approved copy. Three of them are parallel and short: a label, one line, a
   short list. Set as one centred column they ran to 1763px and read as a wall.
   As a three up of left aligned blocks they run to about a third of that, and
   the left edge gives the eye something to travel down, which is what makes
   the Redmint massage page feel brisk rather than merely short.

   The fourth sub section is four paragraphs of careful wording about an
   evolving area of research. It stays full width and centred, the way Redmint
   follows a row of short blocks with a full width one. */

.cond-page--neuro .cond-subs{
  max-width: 1240px;
  margin: 62px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 56px;
  text-align: start;
}

/* The sub headings are labels, not display headings. The page already has one
   display size, the chapter H2, and a second one at 21px sat too close to it
   to read as a different level. Small caps is the site's existing way of
   marking a label (the eyebrow, the research label) and it is what Redmint
   uses over each block. Canyon Sage rather than the quieter Dry Grass tone,
   because these head a section rather than annotate one. */
.cond-page--neuro .cond-sub__h3{
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--canyon-sage);
}
/* One of the three labels runs to two lines. Reserving two lines in all three
   keeps the first paragraph of each column on the same baseline. */
.cond-page--neuro .cond-subs .cond-sub__h3{ min-block-size: 3em; }

.cond-page--neuro .cond-sub__intro{
  margin-block-start: 18px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--dry-grass-t);
}

.cond-page--neuro .cond-sub__list{ margin-block-start: 20px; }
.cond-page--neuro .cond-sub__list li{
  font-size: 16px;
  line-height: 1.5;
  color: var(--canyon-sage);
}
.cond-page--neuro .cond-sub__list li + li{ margin-block-start: 11px; }

.cond-page--neuro .cond-sub__note{
  margin-block-start: 20px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--dry-grass-t);
}

/* The fourth one keeps the centred chapter treatment. */
.cond-page--neuro .cond-sub--full{ margin-block-start: 44px; }
.cond-page--neuro .cond-sub--full .cond-sub__h3{
  text-align: center;
}
.cond-page--neuro .cond-sub--full .cond-mid__intro{ margin-block-start: 22px; }

/* A Copper hairline between the row and the full width section. */
.cond-page--neuro .cond-sep--sub{ margin-block-start: 74px; }

/* ---- 3 · a source credit under the safety list ---------------------------
   The approved copy names the source but supplies no URL, so this is plain
   text, not a link. Quiet, because it is a credit and not a chapter. */
.cond-page--neuro .cond-caution__source{
  max-width: 56ch;
  margin: 38px auto 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dry-grass-t);
}

/* ---- lists divide evenly or they run in one column -----------------------
   Every list on the approved pages divides evenly into its columns, which is
   why they read as tidy: three items across three, six across three, eight
   across four. A count that does not divide leaves a short last row, and
   centring that row is what Rebecca read as chaotic. So the column count
   follows the item count, and a count that divides by nothing runs as one
   clean centred column instead. */

/* four items, two even rows of two */
.cond-list--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
  column-gap: 56px;
}

/* five items, one column, one per line */
.cond-list--one{
  display: block;
  max-width: 66ch;
  margin-inline: auto;
}
.cond-list--one li + li{ margin-block-start: 18px; }

/* The five stroke warning signs are the same case, and one line each is the
   right way to set them anyway. */
.cond-page--neuro .cond-caution ul{
  display: block;
  max-width: 78ch;
  margin: 38px auto 0;
}
.cond-page--neuro .cond-caution li + li{ margin-block-start: 18px; }

@media (max-width: 900px){
  .cond-page--neuro .cond-open__price{ margin-block-end: 18px; }
  .cond-page--neuro .cond-sub{ margin-block-start: 48px; }
  .cond-page--neuro .cond-caution__source{ max-width: none; margin-block-start: 32px; }
  .cond-page--neuro .cond-caution ul,
  .cond-list--two,
  .cond-list--one{ max-width: none; }
  .cond-list--two{ display: block; }
  .cond-list--two li + li{ margin-block-start: 22px; }
  .cond-page--neuro .cond-subs{
    display: block;
    margin-block-start: 40px;
    text-align: center;
  }
  .cond-page--neuro .cond-subs .cond-sub + .cond-sub{ margin-block-start: 46px; }
  .cond-page--neuro .cond-sub__list li + li{ margin-block-start: 14px; }
  .cond-page--neuro .cond-sep--sub{ margin-block-start: 50px; }
  .cond-page--neuro .cond-sub--full{ margin-block-start: 32px; }
  .cond-page--neuro .cond-alt--fill .cond-alt__figure > video{ aspect-ratio: 4 / 5; }
}


/* ---- the page stops growing past 1600px ----------------------------------
   The site has no maximum width, so on a wide display the twelve column
   blocks keep stretching. The figure grows with its column and, at a fixed
   ratio, gets taller, while the copy beside it gets shorter because the lines
   stop wrapping. Measured on this page: the video sat 41px taller than its
   copy at 1440 and 573px taller at 2240. That is the whole of the problem
   Rebecca has flagged three times, and it is not a video problem.

   Capping the twelve column blocks holds the composition still above 1600.
   The lead photograph is deliberately full bleed and is not capped. */
.cond-page--neuro .cond-open,
.cond-page--neuro .cond-alt{
  max-width: 1600px;
  margin-inline: auto;
}

/* ---- a media block that matches its copy exactly -------------------------
   A fixed aspect ratio can only match the copy at one window width. These two
   blocks let the picture and the clip fill the row instead, so the figure is
   the same height as the copy beside it at every width, with the crop taken
   by object-fit. Block 2, the wide photograph beside a two line chapter
   opening, keeps its ratio: there the picture is meant to be the taller
   element. */
@media (min-width: 901px){
  .cond-page--neuro .cond-alt--fill{ align-items: stretch; }
  /* The figure takes its height from the row, and the row is set by the copy.
     The media is positioned out of flow so its own intrinsic height cannot
     drive the row, which is what left white space under the copy. */
  .cond-page--neuro .cond-alt--fill .cond-alt__figure{
    position: relative;
    /* The shared motion rule carries an auto inline margin. With the media
       positioned out of flow the figure has no content width, so that auto
       margin eats the whole column and the clip disappears. */
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .cond-page--neuro .cond-alt--fill .cond-alt__figure > img,
  .cond-page--neuro .cond-alt--fill .cond-alt__figure > video{
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---- carried over -------------------------------------------------------- */

/* `298` is a wide horizontal composition and its subject sits low in the
   frame, so it takes a 16/9 crop rather than the 4/5 the portrait originals
   use. On mobile the shared rule forces every figure to 4/5, which would cut
   this frame down to a vertical slice of one cheek, so it holds 3/2 instead. */
@media (max-width: 900px){
  .cond-page--neuro .cond-alt__figure--wide img{ aspect-ratio: 3 / 2 !important; }
}

/* The shared `--motion` rule caps a clip at 480px, which Pain and Injury needs
   because its copy is short. Here the clip fills its row instead, so the cap
   comes off. */
.cond-page--neuro .cond-alt__figure--motion{ max-width: none; }

@media (prefers-reduced-motion: reduce){
  .cond-page--neuro .cond-alt__figure--motion{ display: block; }
  .cond-page--neuro .cond-alt__figure--motion::after{
    aspect-ratio: auto;
    height: 100%;
    min-height: 420px;
  }
}


/* ==========================================================================
   SLEEP · page scoped
   865 words, so this is a small page and it is built off the Redmint
   ACUPUNCTURE reference, the same as Stress and Anxiety. None of the long
   page devices from Neuroacupuncture appear here: no three up, no second
   heading level, no `.cond-sub`. The approved copy has one heading level and
   does not need another.

   Nothing here is a new layout. One list setting the opener has not needed
   before, plus the two width fixes carried over from Neuroacupuncture.
   ========================================================================== */

/* ---- 1 · a list inside the opening column --------------------------------
   The approved copy opens with one line, five short items and a paragraph,
   which no earlier condition page has asked the opener to hold. Given the
   narrow four column intro every item wrapped to two lines and the column ran
   past the buttons, so the column takes a fifth column and the list is set
   plainly, one item per line, with no bullets. It is the opener's own left
   aligned voice, not the centred `.cond-list` grid. */
.cond-page--sleep .cond-open__intro{ grid-column: 8 / 13; }

.cond-page--sleep .cond-open__list{
  margin-block-start: 20px;
  padding-inline-start: 0;
  list-style: none;
}
.cond-page--sleep .cond-open__list li{
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--canyon-sage);
}
.cond-page--sleep .cond-open__list li + li{ margin-block-start: 12px; }
.cond-page--sleep .cond-open__list + p{ margin-block-start: 24px; }


/* ---- 2 · the lead -------------------------------------------------------
   `107`, chosen by Rebecca on 5 September. The asset is cut to 2.4:1 with the
   head already on the vertical centre, so the band can sit at 50% and still
   hold the whole head when it grows to 3.6:1 on a 27 inch display. The phone
   is served a purpose cut square instead, which is why the shared `--wide`
   mobile offset is reset here. */
.cond-page--sleep .cond-lead img{ object-position: 50% 50%; }

@media (max-width: 900px){
  .cond-page--sleep .cond-lead img{ object-position: 50% 50%; }
}


/* ---- 3 · two intro paragraphs in one centred chapter ---------------------
   `How acupuncture may help with sleep` runs a paragraph, then the one line
   `The focus may be:` that introduces its list. The second is a lead-in to
   the list rather than a paragraph in its own right, so it sits closer. */
.cond-page--sleep .cond-mid__intro + .cond-mid__intro{ margin-block-start: 14px; }


/* ---- 4 · the caution ----------------------------------------------------
   The approved Sleep copy carries no safety list and no crisis line, only two
   paragraphs, so the second one needs a little more air than the first. */
.cond-page--sleep .cond-caution__body + .cond-caution__body{ margin-block-start: 20px; }


/* ---- 5 · the page stops growing past 1600px -----------------------------
   Carried over from Neuroacupuncture. The site has no maximum width, so on a
   wide display the twelve column blocks keep stretching, the figure grows
   with its column and the copy beside it gets shorter. Measured there: 41px
   out at 1440 and 573px out at 2240. Rebecca reviews on a 27 inch iMac, so a
   ratio tuned at 1440 fixes nothing.

   THIS IS NOW ON THREE OF FOUR CONDITION PAGES. When the fourth arrives it
   should be promoted into the shared system rather than scoped again. That is
   a one pass change across Pain and Injury and Stress and Anxiety, both of
   which are approved as they stand, so it needs Rebecca's word first. */
.cond-page--sleep .cond-open,
.cond-page--sleep .cond-alt{
  max-width: 1600px;
  margin-inline: auto;
}

/* ---- 6 · a photograph that matches its copy exactly ----------------------
   Also carried over. A fixed aspect ratio can only match its copy at one
   window width. Here the figure takes its height from the row and the row is
   set by the copy, so the two are level at every width, with the crop taken
   by object-fit.

   Two traps, both already paid for: the image must be OUT OF FLOW or its own
   intrinsic height drives the row and leaves white space under the copy, and
   the figure needs an explicit width with no auto inline margin. */
@media (min-width: 901px){
  .cond-page--sleep .cond-alt--fill{ align-items: stretch; }
  .cond-page--sleep .cond-alt--fill .cond-alt__figure{
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .cond-page--sleep .cond-alt--fill .cond-alt__figure > img{
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 900px){
  .cond-page--sleep .cond-open__intro{ margin-block-start: 26px; }
  .cond-page--sleep .cond-open__list{ margin-block-start: 18px; }
}


/* ==========================================================================
   TREATMENTS LANDING PAGE · a new page type
   Built for /treatments, 5 September. Class prefix `tx-`.

   This is NOT a condition page and none of the `cond-` system applies.
   A condition page explains one thing in depth. This page lays out seven
   entries, makes the hierarchy between them obvious, and sends people to
   the right next page.

   Reference: the https://www.shopredmint.com products page. What is taken
   from it: one grid of three, equal gutters, a picture on top with the
   name quietly under it, no box, no border, no button, and a lot of white.
   What is left behind: it is a shop, so its cart, price, product card and
   buy button have no equivalent here and must not be implied.

   THE PAGE IS TWO ROWS OF THREE, AT TWO WEIGHTS.
   The approved copy states its tiers and states them twice. The two rows
   say the same thing without a word of their own:

     Acupuncture, Neuroacupuncture, Cosmetic Acupuncture
       4/5 picture, large name, the copy's standfirst line, a Copper CTA
       booked separately

     Cupping, Moxibustion, Gua Sha and Tui Na
       1/1 picture, smaller name, no standfirst, a quiet hairline link
       incorporated into an Acupuncture appointment, never booked alone

     Herbal Medicine
       stands alone, no row, no button
       not an appointment at all

   Every cell in both rows is the same width and the same shape. The
   weight, not the width, is what separates the tiers, and nothing else
   marks them: no rules between entries, no labels, no colour blocks.

   Carried over unchanged: masthead, navigation, footer, type scale and
   weights, palette, canvas, `a.inline`, `.cta`, `.link`, `[data-reveal]`.
   ========================================================================== */

/* Every block is capped at 1600px from the start. The site has no maximum
   width and Rebecca reviews on a 27 inch display, so a block that keeps
   growing is the width bug. See BUILD-STATE. The hero is deliberately full
   bleed and is the one thing not capped. */
.tx-page .tx-open,
.tx-page .tx-during,
.tx-page .tx-treatments,
.tx-page .tx-mod,
.tx-page .tx-herb,
.tx-page .tx-next,
.tx-page .close{
  max-width: 1600px;
  margin-inline: auto;
}


/* ---- the name of a treatment, as a link --------------------------------
   The hairline draws in from the left on hover. It reveals rather than
   lifts: nothing scales, nothing shadows, nothing moves off the page.
   The same gesture the navigation trigger already makes. */

.tx-name{
  color: var(--canyon-sage);
  text-decoration: none;
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-block-end: 4px;
  transition: background-size 380ms var(--ease), color 220ms ease;
}
.tx-name:hover,
.tx-name:focus-visible{ color: var(--copper); background-size: 100% 1px; }


/* ---- a Copper hairline that opens a section ----------------------------
   Left aligned, because this page is left aligned. Two on the page: one
   opening the modalities, one opening Herbal Medicine. */

.tx-rule{
  grid-column: 1 / 13;
  width: 46px;
  height: 0;
  border: 0;
  border-block-start: 1px solid var(--copper);
  margin: 0;
}


/* ---- 1 · the opening ---------------------------------------------------
   THE HOMEPAGE'S OWN LEDE COMPOSITION, at Rebecca's instruction: headline
   left in columns 1 to 8, opening copy in the narrow right column at 9 to
   13, at the homepage's own 18px. The columns, the type size and the tone
   are `.lede` exactly. What differs is where it sits: above the hero here,
   below it on the homepage, so the two pages open alike without repeating
   each other's order.

   A small caps eyebrow sits above the headline, the same device the
   condition pages use, and no call to action, because the copy puts both
   at the foot of the page. */

/* THE HEADLINE IS LARGER THAN ANY OTHER H1 ON THE SITE, and the copy
   column is wider than the homepage's. Both are deliberate and both exist
   for the same reason: the two columns have to end at roughly the same
   depth or the headline leaves a hole under it.

   A condition page runs a two line intro next to its headline. This page
   runs seven. At the site's usual `clamp(38px, 4.6vw, 68px)` the headline
   was 147px of text against 227px of copy, and the 80px difference read as
   dead space no amount of realigning fixed. So the headline came up to
   86px and the copy column went out by one column, and they meet.

   Do not copy this size onto a condition page. It exists because of the
   length of THIS page's opening copy. */

.tx-open{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: calc(var(--strip) + 46px) var(--pad) 0;
}

.tx-open__eyebrow{
  grid-column: 1 / 13;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}

.tx-open__h1{
  grid-column: 1 / 7;
  grid-row: 2;
  margin-block-start: 30px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 5.8vw, 86px);
  line-height: 1.04;
  letter-spacing: -0.008em;
  color: var(--canyon-sage);
}

.tx-open__body{
  grid-column: 8 / 13;
  grid-row: 2;
  margin-block-start: 34px;
  font-size: 18px;
  line-height: 1.66;
  color: var(--canyon-sage);
}
.tx-open__body p + p{ margin-block-start: 18px; }


/* ---- 3 · what happens in an appointment, under the hero ----------------
   UNAPPROVED: the heading "During your treatment" is Rebecca's own,
   written 5 September, and is not in the approved copy.

   CENTRED ON THE PAGE, heading above copy, not split left and right.

   Every other block in the lower half runs heading left and copy right,
   and their left columns have something in them: a photograph, or a
   headline big enough to hold the space. This one has a single short
   line, so splitting it left a wide void in the middle of the block and
   stranded the copy on the right.

   Centred is also the site's own language below an opener: every
   condition page runs its chapters centred, off Redmint. This is the one
   centred moment on this page, and it sits directly after the full bleed
   hero, which is where a change of rhythm belongs. */

.tx-during{
  margin-block-start: 92px;
  padding-inline: var(--pad);
  text-align: center;
}

.tx-during__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.14;
  color: var(--canyon-sage);
}

.tx-during__body{
  max-width: 64ch;
  margin: 26px auto 0;
}
.tx-during__body p{
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--canyon-sage);
  /* evens the line lengths so the last line is not one word on its own,
     which centred text makes very visible. Ignored by older browsers,
     which simply wrap as before. */
  text-wrap: balance;
}
.tx-during__body p + p{ margin-block-start: 16px; }


/* ---- 2 · the hero ------------------------------------------------------
   Full bleed, edge to edge, and the only element on the page that breaks
   the 1600px cap. The title sits directly above it and the opening copy
   directly below it. The one place movement lives on this page. */

.tx-hero{ margin-block-start: 72px; }
.tx-hero picture{ display: contents; }
.tx-hero img{
  width: 100%;
  /* A FIXED RATIO, NOT A VIEWPORT HEIGHT. The asset is cut at 2/1 to hold
     Vida and the patient together, and Vida's head sits within a hair of
     its top edge while the patient runs to the bottom. Any vertical trim
     loses one of them, so the element matches the asset exactly and never
     crops. It does grow with the viewport, which is correct for a full
     bleed hero and is not the width bug: nothing sits beside it whose
     height it has to match. */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}


/* ---- 3 and 4 · the two rows of three -----------------------------------
   One cell shape, two weights. `--major` is a bookable treatment.
   `--min` is a modality that is only ever incorporated. */

.tx-treatments{ margin-block-start: 112px; padding-inline: var(--pad); }

.tx-trio{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
}

.tx-item:nth-child(1){ grid-column: 1 / 5; }
.tx-item:nth-child(2){ grid-column: 5 / 9; }
.tx-item:nth-child(3){ grid-column: 9 / 13; }

.tx-item__figure img{
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* the heavier row · booked separately */
.tx-item--major .tx-item__figure img{ aspect-ratio: 4 / 5; }

.tx-item__h2{
  margin-block-start: 30px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(25px, 2.3vw, 32px);
  line-height: 1.14;
  color: var(--canyon-sage);
}

.tx-item__stand{
  margin-block-start: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--dry-grass-t);
}

/* the quieter row · incorporated, never booked alone */
.tx-item--min .tx-item__figure img{ aspect-ratio: 1 / 1; }

.tx-item__h3{
  margin-block-start: 26px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 23px;
  line-height: 1.16;
  color: var(--canyon-sage);
}

.tx-item p{ font-size: 16px; line-height: 1.68; color: var(--canyon-sage); }
.tx-item__h2 + p,
.tx-item__h3 + p{ margin-block-start: 20px; }
.tx-item__stand + p{ margin-block-start: 22px; }
.tx-item p + p{ margin-block-start: 15px; }


/* ---- what it costs -----------------------------------------------------
   Only the three bookable treatments carry one. The modalities are never
   booked alone and carry no charge of their own, and Herbal Medicine is
   not an appointment, so those four show nothing here. That absence is
   the clearest statement of the tier anywhere on the page, and it is why
   no price is written as a blank or a dash.

   Acupuncture is the only entry with two, because the approved copy sets
   a first visit and a follow up. The small caps label is the copy's own. */

.tx-item__price{ margin-block-start: 26px; }

.tx-item .tx-item__price-label{
  font-family: var(--serif-display);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
  margin-block-start: 0;
}
.tx-item .tx-item__price-fig{
  font-size: 16px;
  line-height: 1.4;
  color: var(--canyon-sage);
  margin-block-start: 5px;
}
.tx-item .tx-item__price-fig + .tx-item__price-label{ margin-block-start: 16px; }


/* ---- the two things you can do next ------------------------------------
   Reading about it and booking it are different actions, so they are two
   links rather than two calls to action for the same thing. In the
   modality row there is only ever one, because there is nothing to book. */

.tx-item__actions{
  margin-block-start: 30px;
  display: grid;
  gap: 20px;
  justify-items: start;
}
.tx-item__actions .cta{ margin-inline-end: 0; }


/* ---- the modalities section head --------------------------------------- */

.tx-mod{ margin-block-start: 124px; padding-inline: var(--pad); }

.tx-mod__head{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  margin-block-start: 44px;
}

.tx-mod__h2{
  grid-column: 1 / 7;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.14;
  color: var(--canyon-sage);
}

.tx-mod__intro{
  grid-column: 8 / 13;
  align-self: end;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--dry-grass-t);
}

.tx-mod .tx-trio{ margin-block-start: 68px; }


/* ---- 5 · Herbal Medicine -----------------------------------------------
   The only entry with no page of its own and no button in the approved
   copy, so it stands alone rather than joining a row. Picture on top and
   text below, the same as the rows, but set once and wide. The right of
   the grid stays empty, which is the quiet.

   Its photograph is STOCK, supplied by Rebecca as a placeholder. It is
   the only stock image on the site. */

.tx-herb{
  margin-block-start: 124px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
}

/* Picture left, copy beside it. The one entry on the page that is not in
   a row, and the only one that reads across rather than down.

   THE FIGURE SPANS BOTH TEXT ROWS. If it sits in row two only, the
   picture's height becomes row two's height, the heading floats at the top
   of it and the copy is pushed down to row three, leaving several hundred
   pixels of gap between a heading and its own first sentence. Spanning
   2/4 lets the heading and the copy size their own rows and sit together. */
.tx-herb{ align-items: start; }
.tx-herb .tx-rule{ grid-row: 1; }
/* The picture and the copy sit on the SAME TWO COLUMNS as `During your
   treatment` and the two closing blocks, so four blocks down the page share
   one left edge and one right edge. The copy used to run to the right edge
   of the grid at column 13, which lined up with nothing. */
.tx-herb__figure{ grid-column: 1 / 6; grid-row: 2; margin-block-start: 44px; }
.tx-herb__body{ grid-column: 7 / 12; grid-row: 2; margin-block-start: 44px; }
.tx-herb__figure img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}

.tx-herb__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.14;
  color: var(--canyon-sage);
}

.tx-herb__copy{ margin-block-start: 22px; }
.tx-herb__copy p{ font-size: 16.5px; line-height: 1.7; color: var(--canyon-sage); }
.tx-herb__copy p + p{ margin-block-start: 16px; }


/* ---- 6 · the two ways on -----------------------------------------------
   Conditions is a sideways step and runs quiet. Booking is the
   destination and takes the shared `.close` at full weight. */

/* THE TWO CLOSING BLOCKS SHARE ONE GEOMETRY.
   Left to their own devices they did not line up on anything: headings of
   424px and 650px, copy starting at two different columns, and the two
   links in completely different places. They are a pair and they have to
   read as one. Same heading column, same copy column, each link directly
   under its own copy. The only thing that differs is the size of the
   heading, which is the point: one is a sideways step, one is where the
   page has been going. */

.tx-next,
.tx-page .close{
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
}

.tx-next{ margin-block-start: 128px; }
.tx-page .close{ margin-block-start: 104px; }

.tx-next__h2,
.tx-page .close__h2{ grid-column: 1 / 6; }

.tx-next__body,
.tx-page .close__body,
.tx-page .close__actions{ grid-column: 7 / 12; }

.tx-next__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.16;
  color: var(--canyon-sage);
}

.tx-next__body p{ font-size: 16.5px; line-height: 1.7; color: var(--canyon-sage); }
.tx-next__actions{ margin-block-start: 26px; }

/* the shared component sets these for the homepage; this page needs the
   copy to start level with its heading and the link to sit under the copy */
.tx-page .close__body{ align-self: start; }
.tx-page .close__actions{ margin-block-start: 26px; }


/* ---- mobile · composed for the screen, not collapsed onto it -----------
   Both rows stack, so the two weights have to survive without columns.
   The heavier row keeps its 4/5 portraits. The modalities drop to a 3/2
   landscape, so each one costs a third of a screen rather than a whole
   one, and the difference in height between the rows is what carries the
   hierarchy on a phone. */

@media (max-width: 900px){

  .tx-open{ display: block; padding-block-start: calc(var(--strip) + 34px); }
  .tx-open__h1{ margin-block-start: 20px; font-size: clamp(33px, 9vw, 48px); line-height: 1.08; }
  .tx-open__body{ margin-block-start: 26px; font-size: 16.5px; }

  .tx-hero{ margin-block-start: 46px; }
  .tx-hero img{ aspect-ratio: 1 / 1; }

  .tx-during{ margin-block-start: 60px; }
  .tx-during__h2{ font-size: clamp(23px, 6vw, 28px); }
  .tx-during__body{ margin-block-start: 20px; max-width: none; }
  .tx-during__body p{ font-size: 16.5px; }

  .tx-treatments{ margin-block-start: 76px; }
  .tx-trio{ display: block; }
  .tx-item + .tx-item{ margin-block-start: 76px; }
  .tx-item__h2{ font-size: clamp(25px, 6.6vw, 32px); }
  .tx-item__h3{ font-size: 22px; margin-block-start: 22px; }

  .tx-mod{ margin-block-start: 88px; }
  .tx-mod__head{ display: block; margin-block-start: 34px; }
  .tx-mod__h2{ font-size: clamp(23px, 6vw, 28px); }
  .tx-mod__intro{ margin-block-start: 20px; font-size: 16px; }
  .tx-mod .tx-trio{ margin-block-start: 44px; }
  .tx-item--min .tx-item__figure img{ aspect-ratio: 3 / 2; }
  .tx-item--min + .tx-item--min{ margin-block-start: 64px; }

  .tx-herb{ display: block; margin-block-start: 88px; }
  .tx-herb__figure{ margin-block-start: 34px; }
  .tx-herb__figure img{ aspect-ratio: 3 / 2; }
  .tx-herb__h2{ font-size: clamp(23px, 6vw, 28px); }
  .tx-herb__copy{ margin-block-start: 20px; }
  .tx-herb__figure, .tx-herb__body{ grid-row: auto; margin-block-start: 34px; }
  .tx-herb__body{ margin-block-start: 26px; }

  .tx-next,
  .tx-page .close{ display: block; }
  .tx-next{ margin-block-start: 88px; }
  .tx-page .close{ margin-block-start: 76px; }
  .tx-next__body{ margin-block-start: 20px; }
  .tx-next__actions{ margin-block-start: 24px; }
}


/* ==========================================================================
   TREATMENT PAGES · the shared system for the five individual treatments
   Built first for /acupuncture, 5 September. Class prefix `tp-`.

   This is NOT a condition page and none of the `cond-` system applies to
   it. It is also not `tx-`, which belongs to the /treatments landing page.
   Body carries `class="page tp-page"`.

   FIVE PAGES WILL USE THIS BLOCK, and two of them cannot be booked:

     /acupuncture           bookable   two prices
     /cosmetic-acupuncture  bookable   one price
     /cupping               modality   NO price, NO Book link
     /moxibustion           modality   NO price, NO Book link
     /gua-sha-tui-na        modality   NO price, NO Book link

   So `.tp-facts` is a component that can be ABSENT. On a modality page the
   opener runs straight into the lead photograph and nothing is written in
   its place, no dash and no blank. That absence is the same statement the
   modality row of /treatments makes by carrying no price.

   Reference: https://sferacare.co.uk/our-homes/arranmore-park, assigned by
   Rebecca. What is taken from it: the panel of short labelled facts
   directly under the opener, and one horizontal photograph track that runs
   off both edges of the viewport. What is left behind: its dark gallery
   ground, its two tone accent headline, its sticky section jump bar, its
   icons, its star ratings and its map. VIDA is light on #F8F6F1 with no
   large dark blocks, and Copper is for rules and hover states, never for
   display type.

   Carried over unchanged: masthead, navigation, footer, type scale and
   weights, palette, canvas, `a.inline`, `.cta`, `.link`, `.close` and
   `[data-reveal]`. Nothing here redeclares a token.
   ========================================================================== */

/* Every twelve column block is capped at 1600px FROM THE FIRST LINE, not
   retrofitted. The site has no maximum width and Rebecca reviews on a 27
   inch display. See THE WIDTH BUG in BUILD-STATE. The lead photograph is
   deliberately full bleed and the gallery track deliberately runs off both
   edges, so neither is capped. */
.tp-page .tp-open,
.tp-page .tp-facts,
.tp-page .tp-intro,
.tp-page .tp-mid,
.tp-page .tp-aside,
.tp-page .tp-alt,
.tp-page .tp-subs,
.tp-page .tp-quotes__head,
.tp-page .tp-caution,
.tp-page .close,
.tp-page .tp-gallery__head{
  max-width: 1600px;
  margin-inline: auto;
}


/* ---- 1 · the opener ----------------------------------------------------
   VIDA's own asymmetric composition, the same one the condition pages and
   /treatments open with: small caps eyebrow, headline left, approved
   opening copy in the narrow right column. No photograph on the first
   screen and no call to action, because the fact panel directly below
   carries the only action the top of the page needs.

   The headline stays at the site's usual size. The 86px on /treatments is
   scoped to that page and exists because its opening copy runs seven
   lines. This page runs three. */

.tp-open{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: calc(var(--strip) + 46px) var(--pad) 0;
}

.tp-open__eyebrow{
  grid-column: 1 / 13;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}

.tp-open__h1{
  grid-column: 1 / 7;
  grid-row: 2;
  margin-block-start: 30px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.006em;
  color: var(--canyon-sage);
}

.tp-open__body{
  grid-column: 8 / 13;
  grid-row: 2;
  margin-block-start: 34px;
  font-size: 18px;
  line-height: 1.66;
  color: var(--canyon-sage);
}
.tp-open__body p + p{ margin-block-start: 18px; }


/* ---- 3 · the panel -----------------------------------------------------
   THE ONE IDEA TAKEN WHOLE FROM THE REFERENCE. Sfera answers what it
   costs and how long it takes in a panel of short labelled facts laid over
   the foot of the hero photograph, before a visitor reads a word of prose.
   That is the complaint that drove the /treatments revision, and the
   approved copy supplies exactly the right material for it.

   Rebecca asked for the box itself on 5 September, having seen the
   reference again: "I like the idea of this box. I don't want it to look
   cheap but want to break things up a bit." A first pass set the same
   information between two hairlines with no panel behind it. She wanted
   more separation, so it became paper.

   WHAT KEEPS IT FROM READING AS A CARD:
     no border, no shadow, no rounded corner, no tint, no icon
     one weight of white, laid flat on the photograph
     generous padding, so the panel is mostly quiet
     three columns, each a display heading, a hairline and one short value

   #FFFFFF IS A NEW VALUE AND IT IS USED HERE AND NOWHERE ELSE. It is not
   in the VIDA palette. Bone was the obvious alternative and it is wrong:
   at #F2EEE6 on a #F8F6F1 canvas the panel reads as a shaded box, which is
   the cheaper of the two. White reads as paper.

   THE HEADINGS ARE THE COPY'S OWN WORDS. "First visit" and "Follow up" are
   promoted from small caps to display headings so they can do the
   structural job the reference gives its column titles. Nothing was
   written for this panel, and there is no third heading because VIDA has
   no approved address, email or phone to put under one.

   THE OVERLAP IS NEGATIVE MARGIN, NOT ABSOLUTE POSITIONING, so the panel
   still pushes the page below it and nothing has to be measured twice. */

.tp-facts{
  position: relative;
  z-index: 2;
  margin-block-start: -128px;
  padding-inline: var(--pad);
}

.tp-facts__panel{
  background: #FFFFFF;
  padding: 54px clamp(36px, 4vw, 64px) 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: 34px;
  align-items: start;
}

.tp-facts__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.16;
  color: var(--canyon-sage);
  padding-block-end: 20px;
  border-block-end: 1px solid var(--hair);
}

.tp-facts__fig{
  margin-block-start: 22px;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.4;
  color: var(--canyon-sage);
  white-space: nowrap;
}

/* EVERY PRICE CARRIES ITS OWN ACTION. The panel used to run three columns
   with a single Book link in the third, and an existing patient reading the
   follow up price had nowhere to go. The follow up link is `.cta--quiet`, so
   the first visit stays the louder of the two: most visitors to a treatment
   page are new, and somebody booking a follow up already knows what they
   want and only needs the link to exist. */
.tp-facts__action{ margin-block-start: 26px; }
.tp-facts__action .cta{ margin-inline-end: 0; }

/* the small caps label survives for the two places the copy repeats a
   price outside this panel */
.tp-facts__label{
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}


/* ---- 4 · the overview --------------------------------------------------
   The two approved paragraphs that used to sit in the opener. Rebecca cut
   the opener to one paragraph on 5 September and asked for these to follow
   the photograph, which is where the reference puts its overview too.

   Two columns, left aligned, no heading. The reference runs its main copy
   left and a shorter sub answer right; these two paragraphs are close
   enough in length to sit as a pair, and the second is the longer of the
   two, so it takes the wider column. */

.tp-intro{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
}
.tp-intro__body{
  font-size: 17px;
  line-height: 1.74;
  color: var(--canyon-sage);
}
.tp-intro__body:first-child{ grid-column: 1 / 6; }
.tp-intro__body:last-child{ grid-column: 7 / 13; }


/* ---- 3 · the lead photograph -------------------------------------------
   Full bleed, edge to edge, and one of the two things on the page that
   breaks the 1600px cap.

   THE RATIO IS FIXED, THE ASSET IS CUT TO IT, AND THE PANEL SET IT.
   004 puts Vida's head high in the frame and the patient low, so a 2.4:1
   band cannot hold both: three candidate crops at that ratio all cut her
   head or lost the patient. 2.28:1 held both, and then the panel arrived
   and covered the bottom 128px, which is exactly where the patient's face
   was. The crop was opened out to 2.05:1 so the whole composition still
   reads with the panel over it. **Any change to the overlap is a change to
   this crop.** The element matches the asset, so it never crops further at
   any width. It grows with the viewport, which is correct for a full bleed
   lead and is not the width bug: nothing sits beside it whose height it
   has to match. It is capped so it cannot take the whole first screen. */

.tp-lead{ margin-block-start: 64px; }
.tp-lead picture{ display: contents; }
.tp-lead img{
  width: 100%;
  aspect-ratio: 2400 / 1172;
  max-block-size: 900px;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.03);
  transition: transform 1200ms var(--ease), opacity 900ms ease;
  opacity: 0;
}
.tp-lead.is-in img{ transform: none; opacity: 1; }


/* ---- 4 · a centred chapter ---------------------------------------------
   The Redmint rhythm the condition pages settled on: one column of copy,
   centred, at a moderate measure, no hairlines, no cards, no bullets.
   Where a chapter has no photograph beside it, this is the setting. */

.tp-mid{
  margin-block-start: 108px;
  padding-inline: var(--pad);
  text-align: center;
}

.tp-mid__h2{
  max-width: 26ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.16;
  color: var(--canyon-sage);
}

.tp-mid__intro{
  max-width: 62ch;
  margin: 26px auto 0;
  font-size: 17px;
  line-height: 1.74;
  color: var(--canyon-sage);
}
.tp-mid__intro + .tp-mid__intro{ margin-block-start: 18px; }

/* the lead-in line directly above a list belongs to the list, not to the
   paragraph before it, so it closes up */
.tp-mid__intro--leadin{ margin-block-start: 22px; }

.tp-mid__note{
  max-width: 60ch;
  margin: 48px auto 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}
.tp-mid__note + .tp-mid__note{ margin-block-start: 18px; }
.tp-mid__note--lead{ color: var(--canyon-sage); }

.tp-mid__actions{ margin-block-start: 46px; }
.tp-mid__actions .cta{ margin-inline-end: 0; }


/* ---- lists -------------------------------------------------------------
   LISTS DIVIDE EVENLY OR THEY RUN IN ONE COLUMN. See BUILD-STATE. Three
   columns for 3, 6 and 9. Four for 4 and 8, but only where the items are
   of similar length. One centred column for 5, 7, anything prime, and any
   four items of very uneven length. There is no wrapping variant and none
   should be added.

   Six lists appear on /acupuncture and they are NOT set the same way. The
   container decides: two run as centred grids here, two run left aligned
   inside a copy column beside a photograph, one runs as a single centred
   column, and one belongs to the caution. Six identical settings would
   read as one module repeated six times. */

.tp-list{
  max-width: 1020px;
  margin: 54px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 46px;
  row-gap: 28px;
}
.tp-list li{
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--canyon-sage);
}
.tp-list--four{ grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 38px; }
.tp-list--one{
  max-width: 66ch;
  grid-template-columns: 1fr;
  row-gap: 16px;
}


/* ---- the split chapter -------------------------------------------------
   A centred chapter with a heading and a short list is fine. A centred
   chapter with a list of SIX items running from four words to fifteen is
   not: centring each item puts every one on its own axis, leaves no left
   edge anywhere in the block, and gives the rows uneven heights. Rebecca
   flagged exactly that on "Your first visit" and it was the only section
   on the page she did not like.

   A second pass put the heading in a side column with the chapter beside
   it. Better, still not right. She then sent the reference's own OVERVIEW
   section and asked how to do that without a photograph.

   THE REFERENCE ALREADY DOES IT WITHOUT ONE. Its overview runs the
   headline large across the top, a hairline under it at full width, and
   the copy in two columns below with no image anywhere. That is this
   variant: heading, rule, then intro and list left, closing notes right.

   Three things it deliberately does not take from the reference:
     the two tone headline, because Copper is never display type
     the circular check icons, because CLAUDE.md rules out icon sets
     the pair of solid buttons, because VIDA has no solid buttons

   THE HEADING IS LARGER HERE THAN IN A CENTRED CHAPTER. It has a whole
   row to itself and it is the thing holding the section together, so it
   runs at up to 44px against the centred chapter's 36px. That contrast is
   the point: a page carrying one split chapter and one centred chapter
   reads as composed rather than as one module repeated.

   Use `--split` where a chapter carries a long or uneven list and no
   photograph. Leave a chapter centred where its list is short and even, so
   the page keeps both rhythms. /acupuncture runs one of each. */

.tp-mid--split{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
  text-align: start;
}

.tp-mid--split .tp-mid__h2{
  grid-column: 1 / 10;
  max-width: none;
  margin-inline: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.004em;
}

.tp-mid__rule{
  grid-column: 1 / 13;
  height: 1px;
  border: 0;
  background: var(--hair);
  margin: 34px 0 0;
}

.tp-mid--split .tp-mid__col{ grid-column: 1 / 6; margin-block-start: 46px; }
.tp-mid--split .tp-mid__col--b{ grid-column: 7 / 12; }

.tp-mid--split .tp-mid__intro{
  max-width: none;
  margin: 0;
}
.tp-mid--split .tp-mid__intro--leadin{ margin-block-start: 22px; }
.tp-mid--split .tp-mid__note{
  max-width: none;
  margin: 0;
}
.tp-mid--split .tp-mid__note + .tp-mid__note{ margin-block-start: 18px; }

/* one column, because it sits in half the page and the items run to two
   lines. The Sandstone dot is the marker the alternating blocks use. */
.tp-mid__list{
  margin-block-start: 24px;
  display: grid;
  row-gap: 14px;
}
.tp-mid__list li{
  position: relative;
  padding-inline-start: 20px;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--canyon-sage);
}
.tp-mid__list li::before{
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sandstone);
}


/* ---- 5 · the aside -----------------------------------------------------
   "What to wear" is twenty one words and its own approved heading. Set as
   a full chapter it reads as an empty section, and the copy cannot be
   moved or merged. So it is deliberately small: a short Copper hairline,
   the heading at body scale rather than display scale, and one line of
   copy at a tight measure.

   It is the page's one quiet beat, and it sits between the gallery and the
   longest chapter, which is where a change of pace belongs. */

.tp-aside{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  text-align: center;
}
.tp-aside__rule{
  width: 30px; height: 1px;
  background: var(--copper);
  border: 0;
  margin: 0 auto 30px;
}
.tp-aside__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 21px;
  line-height: 1.2;
  color: var(--canyon-sage);
}
.tp-aside__body{
  max-width: 48ch;
  margin: 18px auto 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}


/* ---- 6 · the photograph track ------------------------------------------
   Rebecca: "I like the idea of scrolling pictures." One horizontal
   progression, running off both edges of the viewport, mid page, exactly
   where the reference puts its gallery.

   IT REUSES THE HOMEPAGE TRACK ENGINE. `site.js` runs on every page and
   already carries arrows, drag, trackpad and keyboard for the conditions
   track. That function was generalised rather than copied, so there is one
   scroller on this site and not two. The markup difference is the marker
   `data-track` on the scrolling element and a `.arrow` pair inside the
   same `<section>`.

   THE FRAMES SHARE A HEIGHT, NOT A RATIO. The approved set holds a wide
   room, two mid figures and two close details, and forcing them all into
   one rectangle would turn them into the repetitive card system the brief
   warns against. A common baseline and varying widths keeps each
   photograph the shape it was taken in.

   No captions, no numerals, no links. These are photographs, not routes.
   That is what separates this track from the homepage's. */

.tp-gallery{ margin-block-start: 112px; }

.tp-gallery__head{
  display: flex;
  justify-content: flex-end;
  padding-inline: var(--pad);
}

/* NO LABEL AND NO CAPTIONS. A heading over this row would be a line of
   copy nobody has approved, and the photographs do not need telling. The
   arrows are the whole interface. */
.tp-gallery__nav{ display: flex; gap: 10px; }

.tp-gallery__track{
  margin-block-start: 30px;
  display: flex;
  gap: 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad) 0;
  padding-inline: var(--pad);
  scrollbar-width: none;
  outline: none;
}
.tp-gallery__track::-webkit-scrollbar{ display: none; }
.tp-gallery__track.is-dragging{ scroll-snap-type: none; cursor: grabbing; }
.tp-gallery__track:focus-visible{ outline: 1px solid var(--copper); outline-offset: 8px; }

.tp-shot{
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--bone);
}
.tp-shot img{
  /* THE CAP IS SET BY HOW FAR THE TRACK HAS TO TRAVEL, not by taste. At
     520px the four frames very nearly fitted a 2560 wide viewport and the
     arrows sat disabled, so the one moving thing on the page did not move.
     At 620 the row runs about 3480px and there is always somewhere to go. */
  block-size: clamp(340px, 33vw, 620px);
  inline-size: auto;
  max-inline-size: none;
  object-fit: cover;
}


/* ---- 7 · an alternating block ------------------------------------------
   A photograph and its copy, side by side, mirrored by `--flip`. The
   figure is a contained rectangle with real quiet around it, never a band
   and never a card.

   `--fill` is the default here rather than a fixed ratio. The figure takes
   its height from the row and the row is set by the copy, so figure height
   equals copy height at every viewport width. A fixed aspect ratio can
   only ever match its copy at one width, which is the width bug. */

.tp-alt{
  margin-block-start: 112px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
}

.tp-alt__figure{
  grid-column: 2 / 8;
  grid-row: 1;
  background: var(--bone);
  overflow: hidden;
}
.tp-alt__figure img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tp-alt__text{
  grid-column: 8 / 13;
  grid-row: 1;
  text-align: start;
}

.tp-alt--flip .tp-alt__figure{ grid-column: 6 / 12; }
.tp-alt--flip .tp-alt__text{ grid-column: 1 / 6; }

.tp-alt__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.18;
  color: var(--canyon-sage);
}

.tp-alt__body{
  margin-block-start: 22px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--canyon-sage);
}
.tp-alt__body + .tp-alt__body{ margin-block-start: 16px; }
.tp-alt__body--quiet{ color: var(--dry-grass-t); }

/* a left aligned list inside a copy column takes the Sandstone dot. The
   centred grids stay plain. */
.tp-alt__list{
  margin-block-start: 20px;
  display: grid;
  row-gap: 12px;
}
.tp-alt__list li{
  position: relative;
  padding-inline-start: 20px;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--canyon-sage);
}
.tp-alt__list li::before{
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sandstone);
}

.tp-alt__actions{ margin-block-start: 34px; }
.tp-alt__actions .cta{ margin-inline-end: 0; }

/* THE FILL VARIANT. The media goes out of flow so the row height is set by
   the copy alone, and the figure matches it exactly at every width. Two
   traps, both already paid for on the condition pages: the media must be
   absolutely positioned or its own intrinsic height drives the row, and
   the figure needs an explicit full width or an inherited auto margin eats
   the column. */
@media (min-width: 901px){
  .tp-alt--fill{ align-items: stretch; }
  .tp-alt--fill .tp-alt__figure{
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .tp-alt--fill .tp-alt__figure img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}


/* ---- 8 · the three up --------------------------------------------------
   "Other techniques Vida may use during acupuncture" carries three short
   parallel sub sections, one per modality. Set as one centred column they
   run as a wall, because centred text at a wide measure gives the eye no
   left edge to return to. As a row of three left aligned blocks they read
   as what they are: three discrete named things.

   This is NOT the two column running copy Rebecca rejected. That was
   sentences flowing down one column and continuing in the next. This is a
   row of separate labelled items, and Redmint's massage page does the
   same.

   The sub headings are small caps labels, not display headings, and each
   one is the link to that modality's own page. That satisfies the copy's
   internal links note once and properly, instead of putting three links
   into the opening paragraph and pulling people off the page before they
   have read it. */

.tp-subs{
  margin-block-start: 112px;
  padding-inline: var(--pad);
  text-align: center;
}

.tp-subs__h2{
  max-width: 30ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.16;
  color: var(--canyon-sage);
}

.tp-subs__intro{
  max-width: 62ch;
  margin: 26px auto 0;
  font-size: 17px;
  line-height: 1.74;
  color: var(--canyon-sage);
}

.tp-subs__row{
  max-width: 1240px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 44px;
  text-align: start;
}

/* THE MODALITY HEADINGS ARE DISPLAY HEADINGS, NOT SMALL CAPS LABELS, at
   Rebecca's instruction on 5 September: "these need larger headers."

   This is a deliberate divergence from `.cond-sub__h3` on Neuroacupuncture,
   which is a 13px small caps label and stays one. The difference is what
   the words are doing. There they label three aspects of one treatment.
   Here they name three treatments that each have a page of their own, and
   each one is the link to it, so they carry the same weight as the entry
   headings on /treatments.

   `min-block-size` holds one line, so the three bodies start level. At the
   sizes this heading runs, none of the three names wraps at any desktop
   width, including "Gua Sha and Tui Na" in a 360px column. 2.4em was tried
   first, to allow for a wrap that never happens, and it left a hole
   between every heading and its paragraph. */
.tp-sub__h3{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
  color: var(--canyon-sage);
  min-block-size: 1.25em;
}
.tp-sub__h3 a{
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid var(--hair-soft);
  padding-block-end: 6px;
  transition: color 220ms ease, border-color 220ms ease;
}
.tp-sub__h3 a:hover,
.tp-sub__h3 a:focus-visible{ color: var(--copper); border-block-end-color: var(--copper); }

.tp-sub__body{
  margin-block-start: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--dry-grass-t);
}


/* ---- what people say · the shared review strip -------------------------
   A CONTINUOUSLY TRAVELLING TICKER, at Rebecca's instruction: the Sfera
   Care reviews section, moving, carrying the whole bank, and the same
   block on every treatment page.

   THIS SECTION TOOK FIVE ATTEMPTS AND THE LESSON IS WORTH KEEPING.
   Bigger type did nothing. Different alignment did nothing. Tone helped a
   little, but Bone measures 1.07:1 against the canvas, a six per cent step
   in lightness, so a Bone panel reads as more page. Stars and cards fixed
   the recognition problem. Movement fixed the rest. **When something
   "blends", the answer is a recognisable signal and a change of state, not
   a change of measure.**

   TWO ROWS, TRAVELLING IN OPPOSITE DIRECTIONS, which is what the reference
   does. The top row carries eight reviews and moves left, the bottom
   carries seven and moves right. The counts and the durations are both
   deliberately different, so the rows never fall into step and the block
   never resolves into one repeating pattern. No review appears in both
   rows: fifteen unique, split eight and seven.

   IT IS A MARQUEE, NOT A SCROLLER, AND IT IS THE ONE COMPONENT ON THE SITE
   THAT DOES NOT USE THE SHARED TRACK ENGINE. An auto-running animation and
   a drag-and-arrow scroller fight each other for the same scroll position,
   so this one owns its motion and `site.js` is untouched by it. That is
   also why it has no arrows: a ticker is ambient, not a control.

   HOW THE LOOP JOINS. The row holds the cards TWICE. The second set is
   `aria-hidden`, so a screen reader hears each review once. The animation
   translates by exactly one set, `n * (card + gap)`, which lands card n+1
   where card 1 started, so the join is invisible and the loop never
   snaps back. `--n` is set inline on the row and MUST match the number of
   cards in one set. Change the reviews, change `--n`.

   ACCESSIBILITY, AND IT IS NOT OPTIONAL ON A THING THAT MOVES BY ITSELF.
   It pauses on hover and on `:focus-within`, so anybody can stop it to
   read. Under `prefers-reduced-motion` the animation is off and the
   viewport becomes an ordinary horizontal scroller, so the content is
   still reachable.

   MOVEMENT NOW LIVES IN TWO PLACES ON THIS PAGE, which bends a standing
   rule. The photograph track is driven by the visitor; this runs on its
   own. REFERENCE-GUIDE supports it: it calls Sfera's travelling reviews
   "particularly relevant" and notes reviews give VIDA interaction "without
   requiring additional photography". Recorded as a bend at Rebecca's
   instruction, the same way Neuroacupuncture's two are.

   Copper is doing a fifth job as the stars. The standing rule is rules,
   hover states and crisis links, and stars are none of those. Rebecca's
   call, and accurate: the bank records every review as five stars. Note
   that SFERA'S OWN REVIEW CARDS CARRY NO STARS. */

.tp-quotes{
  --card: clamp(300px, 26vw, 460px);
  --gap: 26px;
  margin-block-start: 120px;
  margin-block-end: 120px;
}

.tp-quotes__head{ padding-inline: var(--pad); }

.tp-quotes__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.16;
  color: var(--canyon-sage);
}

/* the rows run the full width of the viewport and are not capped, the same
   as the lead photograph and the photograph track */
.tp-quotes__rows{
  margin-block-start: 34px;
  display: grid;
  row-gap: var(--gap);
}

.tp-quotes__viewport{ overflow: hidden; }

.tp-quotes__row{
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  inline-size: max-content;
  padding-inline: var(--pad);
  animation: tp-marquee 96s linear infinite;
  will-change: transform;
}

/* THE SECOND ROW RUNS THE OTHER WAY. `reverse` on the same keyframes, so
   there is one set of keys to keep correct rather than two. At rest it
   sits at the translated end, which is a duplicate of the start, so the
   row looks no different at load. Its duration is deliberately not a
   multiple of the first row's: 84 against 96 means the two take about
   eleven minutes to return to the same relative position, which is long
   enough that they never read as synchronised. */
.tp-quotes__row--rev{
  animation-duration: 84s;
  animation-direction: reverse;
}

/* pausing has to be per row, so hovering one row does not freeze both */
.tp-quotes__viewport:hover .tp-quotes__row,
.tp-quotes__viewport:focus-within .tp-quotes__row{ animation-play-state: paused; }

@keyframes tp-marquee{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(calc(-1 * var(--n) * (var(--card) + var(--gap))), 0, 0); }
}

.tp-quote{
  flex: 0 0 auto;
  inline-size: var(--card);
  margin: 0;
  background: var(--bone);
  border-block-start: 2px solid var(--copper);
  padding: 32px clamp(24px, 2vw, 34px) 36px;
  display: flex;
  flex-direction: column;
}

.tp-stars{ display: block; }
.tp-stars svg{
  display: block;
  block-size: 13px;
  inline-size: auto;
  fill: var(--copper);
}

.tp-quote blockquote{ margin: 0; padding-block-start: 24px; }
.tp-quote blockquote p{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(17.5px, 1.3vw, 19.5px);
  line-height: 1.46;
  color: var(--canyon-sage);
}

/* the name sits at the foot, so every name in the row lands on the same
   line whatever length its quote runs to */
.tp-quote figcaption{
  margin-block-start: auto;
  padding-block-start: 28px;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}


/* ---- 9 · separator -----------------------------------------------------
   Used only where one text chapter meets another with nothing between
   them. Where a photograph already divides two chapters, no rule is
   needed. Restraint never needs permission; adding a mark does.

   NOT USED ON /acupuncture. It was, above the caution, and Rebecca cut it:
   "we don't need 2 orange lines." She is right, and it is the same thing
   Sleep taught. The caution carries its own 46px Copper rule, and a 30px
   Copper rule 45px above it reads as a matched pair bracketing the safety
   copy rather than as a chapter turn. The rule stays in the system for a
   page whose chapters genuinely need one; it does not go next to the
   caution. Copper on this page is now down to two marks: the aside and the
   caution. */

.tp-sep{
  width: 30px; height: 1px;
  border: 0;
  background: var(--copper);
  margin: 92px auto 0;
}
.tp-sep + .tp-caution,
.tp-page .tp-sep + .close{ margin-block-start: 44px; }


/* ---- 10 · the caution --------------------------------------------------
   Safety copy needs weight without alarm. One short Copper rule above the
   heading is the entire treatment. No panel, no tint, no icon. */

.tp-caution{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  text-align: center;
}
.tp-caution__rule{
  width: 46px; height: 1px;
  border: 0;
  background: var(--copper);
  margin: 0 auto 36px;
}
.tp-caution__h2{
  max-width: 26ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(25px, 2.4vw, 33px);
  line-height: 1.2;
  color: var(--canyon-sage);
}
.tp-caution__body{
  max-width: 60ch;
  margin: 24px auto 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}
.tp-caution__body + .tp-caution__body{ margin-block-start: 18px; }
.tp-caution ul{
  max-width: 1020px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 46px;
  row-gap: 28px;
}
.tp-caution li{
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--canyon-sage);
}


/* ---- the close ---------------------------------------------------------
   The shared homepage component, centred here the way the condition pages
   centre it. */

.tp-page .close{
  margin-block-start: 112px;
  display: block;
  text-align: center;
  padding-inline: var(--pad);
}
.tp-page .close__h2{ max-width: 20ch; margin-inline: auto; }
.tp-page .close__body{ max-width: 54ch; margin: 22px auto 0; }
.tp-page .close__actions{ margin-block-start: 44px; }
.tp-page .close__actions .cta{ margin-inline-end: 0; }

.tp-page .foot{ margin-block-start: 150px; }


/* ---- mobile · composed, not stacked ------------------------------------
   The fact panel and the photograph track both get a real answer here
   rather than a collapse.

   The fact panel becomes a two column strip rather than a stack, because
   the two appointment lengths are the comparison and stacking them buries
   it. The Book link then sits full width beneath, which is where a thumb
   expects it.

   The track keeps scrolling. A horizontal swipe is native on a phone and
   it costs a third of a screen instead of five whole ones, so this is the
   one component that is better on mobile than it is on a desktop. The
   arrows go, because there is nothing to point at. */

@media (max-width: 900px){
  .tp-open{ padding: calc(var(--strip) + 30px) var(--pad) 0; display: block; }
  .tp-open__h1{ margin-block-start: 20px; font-size: clamp(34px, 9vw, 46px); }
  .tp-open__body{ margin-block-start: 24px; font-size: 17px; }

  .tp-lead{ margin-block-start: 34px; }
  .tp-lead img{ aspect-ratio: 1 / 1; max-block-size: none; object-position: 50% 40%; }

  /* THE PANEL STILL OVERLAPS, BUT ONLY JUST. A phone screen cannot spare
     128px of photograph, and the square crop puts Vida low in the frame.
     32px is enough for the panel to read as laid over the picture rather
     than stacked under it. The two appointments stay side by side, because
     they are the comparison and stacking them buries it, and the Book link
     goes full width beneath, where a thumb expects it. */
  .tp-facts{ margin-block-start: -32px; }
  /* THE TWO APPOINTMENTS STACK ON A PHONE now that each carries its own
     action. Side by side, a two line price and a three word link in a
     169px column was unreadable. Stacked, each one reads as a complete
     answer: what it is, how long, what it costs, how to book it. */
  .tp-facts__panel{
    padding: 30px 26px 34px;
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .tp-facts__h2{ font-size: 20px; padding-block-end: 14px; }
  .tp-facts__fig{ margin-block-start: 16px; font-size: 16.5px; white-space: normal; }
  .tp-facts__action{ margin-block-start: 18px; }

  .tp-intro{
    margin-block-start: 60px;
    display: block;
  }
  .tp-intro__body + .tp-intro__body{ margin-block-start: 18px; }

  .tp-mid{ margin-block-start: 74px; }
  .tp-mid__h2{ max-width: none; font-size: clamp(24px, 6.6vw, 30px); }
  .tp-mid__intro{ max-width: none; margin-block-start: 20px; }
  .tp-mid__note{ max-width: none; margin-block-start: 34px; }

  .tp-list,
  .tp-list--four{
    margin-block-start: 34px;
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .tp-mid--split{ display: block; }
  .tp-mid--split .tp-mid__h2{ max-width: none; font-size: clamp(25px, 7vw, 32px); }
  .tp-mid__rule{ margin-block-start: 20px; }
  .tp-mid--split .tp-mid__col{ margin-block-start: 26px; }
  .tp-mid--split .tp-mid__col--b{ margin-block-start: 30px; }
  .tp-mid__list{ margin-block-start: 20px; row-gap: 12px; }

  .tp-aside{ margin-block-start: 72px; }
  .tp-aside__body{ max-width: none; }

  .tp-gallery{ margin-block-start: 76px; }
  .tp-gallery__nav{ display: none; }
  .tp-gallery__track{ margin-block-start: 22px; gap: 14px; }
  .tp-shot img{ block-size: 300px; }

  .tp-alt{
    margin-block-start: 76px;
    display: block;
  }
  /* EDGE TO EDGE ON A PHONE. Held inside the page padding a 3/2 crop is
     338 by 225, which is the smallest picture on the page and puts the
     hierarchy backwards. Going to the screen edge fixes it without
     touching the ratio. The same fix /treatments needed for its lead. */
  .tp-alt__figure,
  .tp-alt--flip .tp-alt__figure{
    grid-column: auto;
    margin-inline: calc(var(--pad) * -1);
  }
  .tp-alt__figure img{ aspect-ratio: 4 / 5; }
  /* a wide original stays wide on a phone. The 4/5 above is right for a
     portrait frame and wrong for a landscape one. */
  .tp-alt__figure--wide img{ aspect-ratio: 3 / 2; }
  .tp-alt__text{ margin-block-start: 26px; }
  .tp-alt__h2{ font-size: clamp(23px, 6.2vw, 28px); }

  .tp-subs{ margin-block-start: 76px; }
  .tp-subs__h2{ max-width: none; font-size: clamp(24px, 6.6vw, 30px); }
  .tp-subs__intro{ max-width: none; }
  .tp-subs__row{
    margin-block-start: 40px;
    grid-template-columns: 1fr;
    row-gap: 34px;
  }

  /* THE TICKER KEEPS RUNNING ON A PHONE and is the only thing that moves
     there, because the photograph gallery is swipe driven and sits still
     until a thumb touches it. A narrower card and a shorter loop keep the
     speed reading the same as it does on a desktop. */
  .tp-quotes{
    --card: 74vw;
    --gap: 14px;
    margin-block-start: 76px;
    margin-block-end: 76px;
  }
  .tp-quotes__h2{ font-size: clamp(24px, 6.6vw, 30px); }
  .tp-quotes__rows{ margin-block-start: 22px; }
  .tp-quotes__row{ animation-duration: 72s; }
  .tp-quotes__row--rev{ animation-duration: 63s; }
  .tp-quote{ padding: 26px 24px 30px; }
  .tp-quote blockquote{ padding-block-start: 20px; }
  .tp-quote blockquote p{ font-size: 17.5px; }
  .tp-quote figcaption{ padding-block-start: 24px; }

  .tp-sep{ margin-block-start: 62px; }
  .tp-sep + .tp-caution,
  .tp-page .tp-sep + .close{ margin-block-start: 32px; }

  .tp-caution{ margin-block-start: 72px; }
  .tp-caution__h2{ max-width: none; }
  .tp-caution__body{ max-width: none; }
  .tp-caution ul{
    margin-block-start: 28px;
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .tp-page .close{ margin-block-start: 76px; }
  .tp-page .close__h2{ max-width: none; }
  .tp-page .close__body{ max-width: none; }
  .tp-page .foot{ margin-block-start: 92px; }
}

/* the settled state, immediately. THE REVIEW STRIP STOPS AND BECOMES AN
   ORDINARY HORIZONTAL SCROLLER, so nothing moves on its own and every
   review is still reachable. */
@media (prefers-reduced-motion: reduce){
  .tp-lead img{ transform: none; opacity: 1; transition: none; }
  .tp-quotes__row,
  .tp-quotes__row--rev{ animation: none; transform: none; }
  .tp-quotes__viewport{
    overflow-x: auto;
    scroll-padding-inline: var(--pad) 0;
    scrollbar-width: none;
  }
  .tp-quotes__viewport::-webkit-scrollbar{ display: none; }
}


/* ---- a price inside a chapter, and at the close ------------------------
   The approved copy repeats the follow up figure at the end of "Follow up
   and progress" and the first visit figure at the close. Both are set the
   same way as the fact panel, a small caps label over the figure, so the
   page says the price in one voice in all three places. */

.tp-mid__price{
  margin-block-start: 48px;
  text-align: center;
}
.tp-mid__price .tp-facts__fig{ margin-block-start: 10px; }
.tp-mid__price-action{ margin-block-start: 24px; }
.tp-mid__price-action .cta{ margin-inline-end: 0; }

.tp-close__price{
  margin-block-start: 20px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 18px;
  color: var(--canyon-sage);
}
.tp-page .close__body + .tp-close__price{ max-width: 54ch; margin-inline: auto; }


/* ==========================================================================
   NEUROACUPUNCTURE · what this page added to the `tp-` system
   6 September 2026, on the rebuild of /neuroacupuncture from `cond-` onto
   `tp-`. Everything here EXTENDS the block above. Nothing above was edited
   and no token is redeclared, so /acupuncture is byte for byte unchanged.

   Four of these are page scoped to `.tp-page--neuro` because they would
   change /acupuncture if they were not. The rest are general and the four
   remaining treatment pages can use them.

   WHY THIS PAGE NEEDED ANYTHING AT ALL. It is the longest copy on the site
   at 1,236 words, it is the only page with two audiences, and it is the
   only treatment page whose approved copy carries a named source, four sub
   chapters and a chapter of clinician facing material. /acupuncture needed
   none of those.
   ========================================================================== */


/* ---- the fact panel, carrying two audiences instead of two prices -------
   /acupuncture's panel is two columns because it has two prices. This page
   has one price and one referral route, so its two columns are the two
   AUDIENCES: the appointment on the left, "Referring a patient?" on the
   right. The panel structure itself is unchanged.

   The right column carries a sentence where the left carries a figure, so
   it needs a body style the panel did not have.

   THE TWO ACTIONS ARE NOT ALIGNED TO EACH OTHER, AND THAT WAS TRIED FIRST.
   Pushing both to the foot of the panel so they sat level left about a
   hundred pixels of nothing between the price and its Book link, which is
   the same hole Rebecca rejected in the side column on /acupuncture. The
   columns run at their natural heights instead: the price column is a
   short finished block and the referral column is the taller of the two,
   which is what sets the panel. White space below a finished block reads
   as paper. White space above a link reads as a fault. */

.tp-facts__body{
  margin-block-start: 22px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}


/* ---- two plain paragraphs in a --split column ---------------------------
   /acupuncture's split chapter runs one .tp-mid__intro and then a
   .tp-mid__intro--leadin, so the system never needed a rule for two plain
   intros in a row and they set solid against each other here.

   Scoped to this page, and excluding --leadin, because the general rule
   would out-specify .tp-mid--split .tp-mid__intro--leadin and quietly move
   /acupuncture's spacing from 22px to 18px. */
.tp-page--neuro .tp-mid--split .tp-mid__intro + .tp-mid__intro:not(.tp-mid__intro--leadin){
  margin-block-start: 18px;
}


/* ---- the three up, with LABELS rather than display headings -------------
   THE DIVERGENCE FROM /acupuncture IS DELIBERATE AND IT IS ABOUT WHAT THE
   WORDS DO, not about which page they are on.

   On /acupuncture the three sub headings name three treatments that each
   have a page of their own, and each heading IS the link to it, so they run
   as display headings up to 25px. Rebecca asked for that directly: "these
   need larger headers."

   These four are not links. They label four aspects of one treatment, which
   is the job the old `cond-` page's small caps labels were doing. A display
   heading here would promise a page that does not exist.

   `min-block-size: 3em` because one of the three labels runs to two lines,
   and reserving two lines in all three keeps the first paragraph of each
   column on the same baseline. That is a real wrap at every desktop width,
   unlike the one on /acupuncture that never happened. */

/* SIZE AND TRACKING, BECAUSE WEIGHT HAS RUN OUT. Rebecca, 6 September:
   "the headers need to be a bit bolder right now they blend with the text."
   She is right, and the cause is arithmetic: at 13px these labels were
   SMALLER than the 16px body they sit above, so they read as a caption
   rather than as a heading.

   Newsreader is loaded wght@200..500 and these were already at 500, so
   there is no more weight to give them, and Canyon Sage is already the
   darkest text colour on the site. The two levers left are size and
   tracking. 13px to 15px, and the tracking comes in from 0.15em to 0.12em,
   because wide letterspacing at a small size is itself what makes a line
   read light. */
.tp-sub__label{
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--canyon-sage);
}
.tp-subs__row .tp-sub__label{ min-block-size: 3em; }

.tp-sub__intro{
  margin-block-start: 18px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--dry-grass-t);
}

/* plain, no marker. The dotted list belongs beside a photograph and inside
   a copy column; a marker here would turn three short reference blocks into
   three bulleted cards. */
.tp-sub__list{ margin-block-start: 20px; }
.tp-sub__list li{
  font-size: 16px;
  line-height: 1.5;
  color: var(--canyon-sage);
}
.tp-sub__list li + li{ margin-block-start: 11px; }

.tp-sub__note{
  margin-block-start: 20px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--dry-grass-t);
}


/* ---- the fourth sub chapter, full width ---------------------------------
   Four paragraphs of careful clinical wording about an evolving area of
   research, and the load bearing part of this chapter. In a third of a row
   it reads as a footnote, so it runs full width and centred at the page's
   normal measure. */

.tp-sub--full{
  max-width: 68ch;
  margin: 0 auto;
}
.tp-sub--full .tp-sub__label{ min-block-size: 0; }
.tp-sub__lead{
  max-width: 58ch;
  margin: 24px auto 0;
  font-size: 17px;
  line-height: 1.74;
  color: var(--canyon-sage);
}
.tp-sub__para{
  max-width: 64ch;
  margin: 18px auto 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--dry-grass-t);
}

/* A citation attached to a chapter rather than to the research block. Same
   treatment as .tp-research__cite so the page speaks about its sources in
   one voice, and set quieter and closer than a chapter would be. */
/* wider than .tp-research__cite because this title is long enough to run to
   three centred lines at 60ch, and a hairline underline broken across three
   ragged centred lines reads as damage rather than as a link. */
.tp-sub__cite{
  display: block;
  max-width: 78ch;
  margin: 30px auto 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--canyon-sage);
}
.tp-sub__cite a{
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 1px;
  transition: color 220ms ease, border-color 220ms ease;
}
.tp-sub__cite a:hover,
.tp-sub__cite a:focus-visible{ color: var(--copper); border-block-end-color: var(--copper); }

/* the hairline between the row of three and the full width fourth. A small
   caps label is a heading and not a separator, so without this the two
   sections meet with nothing to mark the turn. That is the joint Rebecca
   asked for a rule at on Sleep. */
.tp-sep--sub{ margin-block-start: 74px; }
.tp-sep--sub + .tp-sub--full{ margin-block-start: 56px; }


/* ---- the caution, with a five item list and a named source --------------
   FIVE ITEMS, SO ONE COLUMN. Five is prime and does not divide into three,
   and this is the safety copy, where one symptom per line is the most
   readable setting there is regardless of the arithmetic.

   THE 911 LINK IS COPPER, which is one of the four places Copper is
   allowed: rules, hover states, stars and the crisis links.

   THE SOURCE HAS NO URL. The approved copy names CDC and supplies no link,
   so it is plain text, quiet, and it is a credit rather than a chapter. */

.tp-caution ul.tp-caution__list--one{
  max-width: 68ch;
  grid-template-columns: 1fr;
  row-gap: 14px;
  text-align: center;
}
.tp-caution__body a{
  color: var(--copper);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 1px;
}
.tp-caution__body a:hover{ border-block-end-color: var(--copper); }

/* THE SOURCE CREDIT'S LINK NEEDED ITS OWN RULE AND THIS IS A TRAP WORTH
   KNOWING. There is no global anchor reset anywhere in site.css. Every link
   on this site is styled by the component it sits in, so an anchor in a
   component that has never carried one renders in the browser default,
   which is blue and underlined. The 911 link above got its rule when the
   caution was built; the CDC credit was still plain text at that point and
   only became a link when Rebecca sent the URL, so it went on unstyled.
   Rebecca caught it in the first review.

   IT TAKES THE CITATION TREATMENT, NOT THE CRISIS TREATMENT. The 911 link
   is Copper because it is a crisis link, which is one of the four places
   Copper is allowed. A source credit is a citation, so it matches
   .tp-research__cite a and .cond-research__cite a: Canyon Sage with a
   hairline underline, going Copper on hover. That also keeps the page's
   Copper count where it is. */
.tp-caution__source a{
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 1px;
  transition: color 220ms ease, border-color 220ms ease;
}
.tp-caution__source a:hover,
.tp-caution__source a:focus-visible{ color: var(--copper); border-block-end-color: var(--copper); }

.tp-caution__source{
  max-width: 56ch;
  margin: 38px auto 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dry-grass-t);
}


/* ---- the research chapter ----------------------------------------------
   The `tp-` equivalent of .cond-research, which the four condition pages
   use. /acupuncture has none because its approved copy names no sources.

   The title is the link. Hairline underline going Copper on hover, new tab
   with rel="noopener noreferrer". A named source with no URL goes in as a
   .tp-research__cite with no anchor, the way the CDC credit does above. */

.tp-research{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  text-align: center;
}
.tp-research__label{
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}
.tp-research__cite{
  display: block;
  max-width: 60ch;
  margin: 26px auto 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--canyon-sage);
}
.tp-research__cite + .tp-research__cite{ margin-block-start: 10px; }
.tp-research__cite a{
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 1px;
  transition: color 220ms ease, border-color 220ms ease;
}
.tp-research__cite a:hover,
.tp-research__cite a:focus-visible{ color: var(--copper); border-block-end-color: var(--copper); }

.tp-page .tp-research{ max-width: 1600px; margin-inline: auto; }


/* ---- a clip inside an alternating block ---------------------------------
   The first video on the `tp-` system. It sits in an ordinary .tp-alt
   figure, so the block's `--fill` behaviour has to reach the video the same
   way it reaches an image: out of flow, or the clip's own intrinsic height
   drives the row and the copy beside it stops matching.

   The approved clip is PORTRAIT footage carrying a rotation=-90 flag and is
   cut to 1080x1150. Never force it to 16/9.

   UNDER prefers-reduced-motion THE VIDEO IS HIDDEN AND THE POSTER TAKES ITS
   PLACE, so nothing moves and the block does not collapse. The poster comes
   in on a --motion-poster custom property set on the figure. */

.tp-alt__figure video{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 901px){
  .tp-alt--fill .tp-alt__figure video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce){
  .tp-alt__figure--motion video{ display: none; }
  .tp-alt__figure--motion::after{
    content: "";
    display: block;
    aspect-ratio: 1080 / 1150;
    background-image: var(--motion-poster);
    background-size: cover;
    background-position: 50% 50%;
  }
  @media (min-width: 901px){
    .tp-alt--fill .tp-alt__figure--motion::after{
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
      height: 100%;
    }
  }
}


/* ---- mobile ------------------------------------------------------------
   Composed, not stacked, the same as the rest of the system.

   The fact panel already stacks its two columns on a phone, which is right
   here for a different reason than it is on /acupuncture: there the two
   columns are a comparison between two appointments, here they are two
   different people being spoken to, and stacking makes each one a complete
   answer rather than half a row.

   The three up becomes one column, so the two line label reservation comes
   off. The full width fourth loses its measure caps, which are desktop
   devices and only create short lines on a 390 wide screen. */

@media (max-width: 900px){
  .tp-subs__row .tp-sub__label{ min-block-size: 0; }

  .tp-sep--sub{ margin-block-start: 50px; }
  .tp-sep--sub + .tp-sub--full{ margin-block-start: 40px; }
  .tp-sub--full{ max-width: none; }
  .tp-sub__lead,
  .tp-sub__para,
  .tp-sub__cite{ max-width: none; }

  .tp-caution ul.tp-caution__list--one{ max-width: none; text-align: start; }
  .tp-caution__source{ max-width: none; margin-block-start: 30px; }

  .tp-research{ margin-block-start: 72px; }
  .tp-research__cite{ max-width: none; }

  /* the clip goes edge to edge with the photographs and keeps its own
     ratio, which is portrait and close to 4/5 already. */
  .tp-alt__figure--motion video{ aspect-ratio: 1080 / 1150; }
}


/* ---- --tall · the picture is the taller element ------------------------
   Rebecca, 6 September: "can we make the images a bit bigger than the text."

   `--fill` sets the figure height to the copy height exactly, which is what
   kills the width bug and is why every block on this page measured 0px. The
   instinct is to reach for a fixed aspect ratio instead, and that is the
   wrong move: it reintroduces the bug between 900 and 1600, where the figure
   grows with the viewport while the copy beside it gets shorter.

   THE ROW IS PADDED, NOT THE PICTURE. Inset the copy inside its own column
   and the row grows by exactly that padding. `--fill` then makes the figure
   fill the taller row, so the photograph is taller than the text by a known
   amount at every width and the figure still equals the row exactly. The
   0px discipline is untouched; the thing being measured just got taller.

   No negative margins and no overflow, so nothing can collide with the
   chapter above or below.

   Mobile drops it. There the figure already runs edge to edge above the
   copy and there is no side by side comparison to make. */

@media (min-width: 901px){
  .tp-alt--tall .tp-alt__text{
    padding-block: clamp(30px, 3.6vw, 68px);
  }
}


/* ---- the close, with TWO actions ---------------------------------------
   Rebecca, 6 September: "separate the Acupuncture button and the Contact
   Vida button more, they're too close together."

   `/acupuncture` closes on one action, so the shared rule zeroes the CTA's
   trailing margin and nothing had to hold two apart. This page closes on
   both of its routes, so they need a real gap. Flex with a gap rather than a
   margin, so they also separate cleanly when they wrap on a narrow screen
   instead of stacking flush. */

.tp-page--neuro .close__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 20px 52px;
}
.tp-page--neuro .close__actions .cta{ margin-inline: 0; }


/* ==========================================================================
   THE 6 SEPTEMBER COPY REWRITE · what the new document needed
   Rebecca rewrote the Neuroacupuncture copy the same day the page was built,
   so that it and /neurological-conditions stop overlapping. Its own Content
   Ownership note is binding: this page owns the TREATMENT story, the
   condition page owns the conditions.

   What that removed from the page: the `.tp-subs` three up and its four sub
   sections, the progress chapter, and the ischemic stroke and diabetic
   neuropathy citations. **`.tp-sub__label` and the rest of the `.tp-sub`
   block above are now UNUSED BY ANY PAGE.** They are left in place because
   they are a real answer to a run of short parallel sections and the
   remaining treatment pages may need them. If none does, they can go.
   ========================================================================== */

/* ---- a fact panel with ONE column ---------------------------------------
   `/acupuncture` runs two columns because it has two prices. The previous
   Neuroacupuncture copy ran two because it had two audiences. This copy has
   one appointment, one price, one action, and it moves every word of the
   referral material into a full chapter lower down, so there is no second
   column of approved copy left to put in the panel.

   ONE COLUMN, AND THE HAIRLINE RUNS THE FULL WIDTH OF THE PANEL. That is
   the point: a single fact stated across the whole width reads as a
   confident answer, where the same fact in a half width column with white
   space beside it reads as a column that failed to fill.

   Do not invent a second column, and do not move the referral chapter back
   up to fill one. */
.tp-facts__panel--one{ grid-template-columns: 1fr; }


/* ---- the research chapter, now with approved prose ----------------------
   The previous build carried two bare citation titles and all of it was
   flagged unapproved. This document supplies an intro AND a sentence
   describing what each study found, including its certainty, so the chapter
   needs a body style it never had.

   THE FINDING SITS UNDER ITS CITATION, which is the document's own order:
   title first, then what it found. So `--find` is pulled up tight against
   the citation above it and the next citation is pushed away, which is what
   makes the chapter read as two pairs rather than four loose lines. */
.tp-research__body{
  max-width: 64ch;
  margin: 26px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--dry-grass-t);
}
.tp-research__cite + .tp-research__body--find{
  margin-block-start: 12px;
  font-size: 15px;
}
.tp-research__body--find + .tp-research__cite{ margin-block-start: 36px; }


/* ---- a named credential under the chapter that earns it -----------------
   The approved copy names the Neuro-Acupuncture Institute on its own line,
   directly after the sentence about the training. **It is a link in the
   document and it has no URL yet**, so it is plain text until Rebecca sends
   one. Set as a quiet credit, the same treatment the CDC source gets, so
   that when the anchor arrives it can take the citation link style without
   the line moving. */
.tp-mid__cred{
  max-width: 56ch;
  margin: 16px auto 0;
  font-family: var(--serif-display);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--dry-grass-t);
}
.tp-mid__cred a{
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 1px;
  transition: color 220ms ease, border-color 220ms ease;
}
.tp-mid__cred a:hover,
.tp-mid__cred a:focus-visible{ color: var(--copper); border-block-end-color: var(--copper); }


@media (max-width: 900px){
  .tp-research__body{ max-width: none; }
  .tp-mid__cred{ max-width: none; }
}


/* ---- the signpost pair ---------------------------------------------------
   Two one line routes out, sitting directly under the overview where the
   approved copy puts them: one to the condition page, one to a first visit.
   They are the mechanism that keeps this page and /neurological-conditions
   complementary rather than duplicated, so they need to be visible without
   competing with the chapter that follows.

   NOT `.tp-intro`, which is running prose at 17px. These are signposts: one
   line each, a step smaller, in the secondary tone, with the inline link
   doing the work of standing out. **No rule above them.** A Copper mark on a
   signpost would outweigh the thing it is pointing at, and this page already
   spends its Copper on the caution and the research turn. */
.tp-signposts{
  margin-block-start: 34px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: 12px;
}
.tp-signposts__line{
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--dry-grass-t);
}
.tp-signposts__line:first-child{ grid-column: 1 / 6; }
.tp-signposts__line:last-child{ grid-column: 7 / 13; }

@media (max-width: 900px){
  .tp-signposts{ margin-block-start: 24px; display: block; }
  .tp-signposts__line + .tp-signposts__line{ margin-block-start: 12px; }
}


/* ---- 6 September, after Rebecca reviewed the rebuilt page ---------------- */

/* THE SIGNPOSTS WERE NOT IN THE 1600px CAP, AND SHE SPOTTED IT.
   Every other twelve column block on a `tp-` page is capped and centred, so
   above 1600px the capped blocks stop growing while an uncapped one keeps
   spreading to the viewport. The signpost row therefore sat wider than the
   overview directly above it and its first column started to the LEFT of
   the copy it was supposed to line up with, far enough on a wide display to
   run off the edge.

   The cap list is in the shared `tp-` block above and this component was
   added after it, which is the whole failure: **a new twelve column
   component has to join that list in the same breath it is written.** */
.tp-page .tp-signposts{
  max-width: 1600px;
  margin-inline: auto;
}


/* the Institute credit now lives inside an alternating block's copy column,
   where `margin-inline: auto` would centre it against left aligned copy */
.tp-alt__text .tp-mid__cred{
  margin-inline: 0;
  max-width: none;
  text-align: start;
}


/* ---- Rebecca's review of the revised page, 6 September ------------------ */

/* 1 + 3 · THE COPY SAT TOO CLOSE TO THE MEDIA. Her words, on the clip and
   again on the referral photograph: "move the text farther from the video,
   it's currently too close."

   The cause is that `.tp-alt` puts the figure in columns 2 to 8 and the copy
   in 8 to 13, so the only thing between a 650 to 730px picture and the first
   word of copy is one 28px column gap. That is fine beside a 400px figure
   and tight beside this one.

   PADDING ON THE COPY COLUMN, NOT A COLUMN SHIFT. Moving the copy a whole
   column right would have taken the figure from 650px to 537px, and she has
   not asked for a smaller picture. Padding leaves every figure exactly where
   it is and takes the space out of the copy measure instead, which has room:
   537px at 17px Spectral is a wide measure, and 60px off it still reads at
   about 55 characters.

   Page scoped, because /acupuncture's two alternating blocks are approved as
   they stand and must not move. Reset on mobile, where the figure sits above
   the copy and there is no gap to open. */
.tp-page--neuro .tp-alt__text{ padding-inline-start: clamp(30px, 3vw, 60px); }
.tp-page--neuro .tp-alt--flip .tp-alt__text{
  padding-inline-start: 0;
  padding-inline-end: clamp(30px, 3vw, 60px);
}


/* 2 · A COPPER HAIRLINE BETWEEN THE APPOINTMENT CHAPTER AND THE
   REHABILITATION CHAPTER, asked for directly. Those two are the one joint on
   this page where a text chapter meets a text chapter with no picture and no
   change of setting between them, which is exactly what `.tp-sep` is for.

   `.tp-sep` already has rules for the caution and the close following it but
   never for a plain chapter, because no page had put one there before.
   Without this the two margins stack to 196px and the rule floats halfway
   between the chapters instead of belonging to the turn. 44px matches what
   the caution gets.

   THIS IS THE PAGE'S THIRD COPPER MARK, after the caution rule and the one
   above the research chapter, plus the reviews band. Recorded rather than
   waved through: BUILD-STATE's rule is that restraint needs no permission
   but adding a separator does, and this one was asked for. */
.tp-sep + .tp-mid{ margin-block-start: 44px; }


/* 4 · HER HEAD WAS CUT OFF, AND THE CAUSE WAS THE RATIO NOT THE CROP.
   The portrait was cut square, and the `--fill` slot it lands in is
   LANDSCAPE: measured 1.49 at 1440, 1.60 at 1700 and 1.55 at 2240. Cover
   scales a 1:1 source to the slot width and then loses the difference off
   the top and bottom, which is where her head was.

   Recut to 1.52 with real clearance above her head, so the source now
   roughly matches the slot instead of fighting it. `object-position` biased
   above centre as well, so that on the widest slot the little vertical crop
   that remains comes off the bottom rather than the top.

   THE LESSON, AND IT IS THE `--fill` LESSON AGAIN: the slot is whatever
   shape the copy makes it, so cut the asset to the slot's MEASURED ratio,
   not to a shape that looks right on its own. */
.tp-page--neuro .tp-alt__figure img[src*="neuro-tp-vida"]{ object-position: 50% 34%; }


@media (max-width: 900px){
  .tp-page--neuro .tp-alt__text,
  .tp-page--neuro .tp-alt--flip .tp-alt__text{
    padding-inline: 0;
  }
}


/* ---- the reviews heading was floating, and it was the alignment ---------
   Rebecca, 6 September: "I'm still not fond of the title above the reviews.
   It looks like it's just floating."

   THE DIAGNOSIS, MEASURED. `.tp-quotes__head` set no alignment, so it
   inherited `start` and sat hard left at the 56px page padding. Every
   chapter around it is centred: the research chapter above, the close
   below, the caution, all of them. So it was the only centred-page heading
   on a left axis, with nothing on that axis to line up against.

   AND THE THING IT LABELS RUNS PAST IT. The head is inside the 1600px cap
   while the rows are deliberately full bleed, so the first card starts at
   -54px, off the left edge, while the heading starts at +56px. A label
   inset from the content it introduces reads as detached from it, which is
   exactly what "floating" describes.

   THE FIX IS THE AXIS, NOT THE SPACING. The gaps were already right: 120px
   above it and 34px below, so it was already grouped with the cards rather
   than with the chapter above. Centred, it lands on the page's dominant
   axis and stops being an orphan. A measure so it does not sit as three
   small words stranded across a 1328px box.

   NOT SCOPED TO ONE PAGE, DELIBERATELY. The reviews strip is a shared
   component and BUILD-STATE locks it as identical on every treatment page
   that carries one. /acupuncture has the same heading in the same left
   position with the same centred neighbours, so it has the same fault and
   gets the same fix. Scoping this to one page would have made the two
   strips differ, which is the one thing that component must not do.

   No Copper added. A rule above the heading was the other option and this
   page already carries three marks. */
.tp-quotes__head{ text-align: center; }
.tp-quotes__h2{
  /* 24ch, not 30ch. Measured at 390 / 430 / 600 / 900 / 1440 / 1700 / 2560:
     30ch drops "Vida" alone on line two from 600px up. 24ch gives the same
     two lines at every width tested, "What patients say about" over
     "working with Vida", and never adds a third line. */
  max-width: 24ch;
  margin-inline: auto;
}


/* ==========================================================================
   NEUROLOGICAL CONDITIONS AND RECOVERY · page scoped
   /neurological-conditions, built 6 September 2026 on the `cond-` system.

   WHY THIS BLOCK IS AT THE END OF THE FILE AND NOT UP WITH THE OTHER
   CONDITION PAGE SCOPES. Appending is the only way to keep the "shared
   lines are byte identical to the backup" check meaningful, and that check
   is what proves the six existing pages did not move. Cascade order is not
   a problem here: `.cond-page--neurological .cond-open` and
   `.cond-page--wide .cond-open` are the same specificity, so this block
   needs to come last to win, which it does.

   965 words. Its opener carries a five item list, which only Sleep has
   asked an opener to do before, so it takes the same treatment.

   THE WIDTH CAP AND `--fill` ARE BUILT IN FROM THE FIRST LINE, not
   retrofitted. That is the fourth condition page to scope them separately.
   See BUILD-STATE Open Items 27: they are overdue for promotion into the
   shared `cond-` layer, which is a one pass change across Pain and Injury
   and Stress and Anxiety, and it needs Rebecca's word because both are
   approved as they stand.
   ========================================================================== */

/* ---- 1 · the opener, which has to hold a five item list -----------------
   Given the narrow four column intro every item wraps, so the column takes
   a fifth column, exactly as Sleep's does. The list is set plainly, one
   item per line, no bullets. It is the opener's own left aligned voice, not
   the centred `.cond-list` grid. */
.cond-page--neurological .cond-open__intro{ grid-column: 8 / 13; }

.cond-page--neurological .cond-open__list{
  margin-block-start: 20px;
  padding-inline-start: 0;
  list-style: none;
}
.cond-page--neurological .cond-open__list li{
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--canyon-sage);
}
.cond-page--neurological .cond-open__list li + li{ margin-block-start: 12px; }
.cond-page--neurological .cond-open__list + p{ margin-block-start: 24px; }


/* ---- 2 · a line that introduces a list is not a paragraph ---------------
   Three chapters on this page end with a one line lead-in before their
   list. At the standard 28px those lines float between the paragraph above
   and the list below and read as their own thought. Sleep applied the same
   fix as a blanket rule; here it is a modifier, because this page also has
   pairs of real paragraphs that need the full 28px between them. */
.cond-page--neurological .cond-mid__intro--leadin{ margin-block-start: 14px; }


/* ---- 3 · the evidence boundary sits closer to the chapter it limits -----
   The two lines about what the research does and does not show are a coda
   to "What acupuncture may support", not a new chapter. At the full 104px
   they read as a standalone section with no heading, which is the one thing
   a limit should never look like. Closer, they read as the end of the
   chapter above, which is where the approved copy puts them. */
.cond-page--neurological .cond-mid--bound{ margin-block-start: 68px; }


/* ---- 4 · the page stops growing past 1600px ----------------------------- */
.cond-page--neurological .cond-open,
.cond-page--neurological .cond-alt{
  max-width: 1600px;
  margin-inline: auto;
}


/* ---- 5 · a photograph that matches its copy exactly ---------------------
   Nothing on the page uses this yet, because the photography is still
   outstanding. It is here so that the two chapters marked AWAITING A FRAME
   can become `.cond-alt cond-alt--fill` blocks by changing the markup
   alone, with no CSS pass and no risk of the width bug arriving with them. */
@media (min-width: 901px){
  .cond-page--neurological .cond-alt--fill{ align-items: stretch; }
  .cond-page--neurological .cond-alt--fill .cond-alt__figure{
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .cond-page--neurological .cond-alt--fill .cond-alt__figure > img{
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


@media (max-width: 900px){
  .cond-page--neurological .cond-open__intro{ margin-block-start: 26px; }
  .cond-page--neurological .cond-open__list{ margin-block-start: 18px; }
  .cond-page--neurological .cond-mid--bound{ margin-block-start: 46px; }
}


/* ---- 6 · the opener runs to the page edge, like every other condition page
   Correction, 6 September. Section 4 above caps `.cond-open` as well as
   `.cond-alt` at 1600px. On `.cond-alt` that cap is load bearing: it is what
   stops the figure outgrowing its copy. On `.cond-open` it does nothing but
   centre the opener, and past 1600px that pushes the H1 inward while the
   chapters below it still run to the page edge. Measured at 2240, which is
   the width Rebecca reviews at: this H1 started at x376 and ran 856px wide,
   where Stress and Anxiety's starts at x56 and runs 1230px.

   So the cap comes off the opener and stays on the alternating blocks. The
   H1 now sits where every other condition page puts it. */
.cond-page--neurological .cond-open{
  max-width: none;
  margin-inline: 0;
}

/* Section 1 gives the intro a fifth column because the four item list wraps
   badly in four. Past 1600px there is no longer any shortage of width, and
   five columns of an uncapped grid is a 1000px measure for a list set at
   16.5px, which is too long a line to scan. Above 1600 it returns to the
   shared four. */
@media (min-width: 1600px){
  .cond-page--neurological .cond-open__intro{ grid-column: 9 / 13; }
}


/* ---- 7 · the three up ---------------------------------------------------
   "Where acupuncture may help" carries a second heading level in the
   approved copy: three parallel sections, each a diagnosis label and one
   paragraph. Set as one centred column at the page's wide measure they run
   as three near identical blocks with no left edge to travel down, which is
   what Rebecca saw as squished and chaotic.

   Same values as the three up that was built for the old `/neuroacupuncture`
   condition page and approved there. Redeclared rather than by widening
   those selectors, because that block sits in the region kept byte identical
   to the backup.

   THE DEFAULT IS ONE COLUMN. Three across needs about 340px a column before
   the lines get too short to read, which is 1240px of window. Below that it
   runs as a single left aligned column on a fixed measure, which is the same
   arithmetic rule the lists on this page follow: divide evenly or run in one
   column. Only the phone centres it. */
.cond-page--neurological .cond-subs{
  max-width: 720px;
  margin: 58px auto 0;
  text-align: start;
}
.cond-page--neurological .cond-subs .cond-sub + .cond-sub{ margin-block-start: 44px; }

.cond-page--neurological .cond-sub__h3{
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--canyon-sage);
}

.cond-page--neurological .cond-sub__intro{
  margin-block-start: 14px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--dry-grass-t);
}

/* The boundary line below the row is a coda to it, not a new chapter. */
.cond-page--neurological .cond-subs ~ .cond-mid--bound{ margin-block-start: 76px; }

@media (min-width: 1240px){
  .cond-page--neurological .cond-subs{
    max-width: 1280px;
    margin-block-start: 62px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 64px;
    row-gap: 48px;
    align-items: start;
  }
  .cond-page--neurological .cond-subs .cond-sub + .cond-sub{ margin-block-start: 0; }
  /* Two labels run to one line and one runs to two. Without a floor the
     three paragraphs start at different heights and the row loses the shared
     top edge that makes it read as one answer in three parts. */
  .cond-page--neurological .cond-subs .cond-sub__h3{ min-block-size: 3em; }
  .cond-page--neurological .cond-sub__intro{ margin-block-start: 4px; }
}

@media (max-width: 900px){
  .cond-page--neurological .cond-subs{
    max-width: none;
    margin-block-start: 40px;
    text-align: center;
  }
  .cond-page--neurological .cond-subs .cond-sub + .cond-sub{ margin-block-start: 46px; }
}


/* ---- 8 · the second picture block carries a button ----------------------
   Added 6 September when "How acupuncture fits into neurological recovery"
   became a photograph block. `.cond-alt` has never had to hold a call to
   action before, because on the other condition pages the buttons all sit
   in centred chapters. The approved copy puts one here, so the copy column
   needs the same space under its last paragraph that a centred chapter
   gives, and no more. */
.cond-page--neurological .cond-alt__actions{ margin-block-start: 34px; }

@media (max-width: 900px){
  .cond-page--neurological .cond-alt__actions{ margin-block-start: 28px; }
}


/* ==========================================================================
   COSMETIC ACUPUNCTURE · what this page added to the `tp-` system
   6 September 2026. The fourth and last bookable treatment page. Everything
   here EXTENDS the blocks above. Nothing above was edited and no token is
   redeclared, so /acupuncture, /neuroacupuncture and the four condition
   pages are byte for byte unchanged.

   THE REFERENCE FOR THIS PAGE IS A DIFFERENT SFERA PAGE, AND THAT IS THE
   WHOLE REASON IT IS NOT A COPY OF /acupuncture.
   The `tp-` components came off `sferacare.co.uk/our-homes/arranmore-park`
   and they are not redesigned here. Rebecca named
   `sferacare.co.uk/our-homes/k-lodge` for THIS page, and that is where its
   rhythm comes from. Measured at 1440, three things k-lodge does that its
   sibling does not:

     1  ITS QUIET IS TYPE, NOT A PHOTOGRAPH. A 1,245px left aligned text
        chapter sits directly under the panel at a 620px measure with no
        image anywhere in it. Arranmore puts a photograph track there.
     2  A RUN OF SHORT PARALLEL PARTS GETS ONE ANNOUNCEMENT rather than a
        chapter turn each. Its "Care we provide" heading runs centred and
        six sub sections hang off it.
     3  IMAGE SCALE VARIES HARD. 1440x822, 600x992, 1439x720 six times,
        600x547, 300x300. Five scales on one page and no formula.

   Left behind: its dark ground, its jump bar, its icons, its map, its two
   tone split section backgrounds, and its 128px display size, which is off
   the VIDA type scale.

   WHY THIS PAGE NEEDED ANY CSS AT ALL. Four things, all of them coming out
   of the shape of the approved copy rather than out of a design idea:
     - it is the only page on the site with TWO approved actions in the
       panel and two again at the close. /acupuncture gives each of its two
       columns one action; /neuroacupuncture's one column panel has one.
     - its overview is a SINGLE sentence that has to hold a band on its own,
       where both other treatment pages have two and set them as a pair.
     - its research citations attach to a SENTENCE inside a chapter rather
       than to a research chapter, because the approved copy names its
       sources in one line and supplies no heading for them.
     - it is the first `--split` chapter on the site that carries no list.
   ========================================================================== */


/* ---- the overview, one sentence, alone ----------------------------------
   `.tp-intro` is a twelve column grid built for two paragraphs: the first
   takes columns 1 to 5 and the second 7 to 12. With one child both rules
   match and `:last-child` wins, which would drop this sentence into the
   RIGHT half of the band with the left half empty. That reads as a column
   that failed to fill, which is the same fault Rebecca rejected twice on
   the fact panel.

   It goes left instead, at a slightly larger size, with the right half of
   the band deliberately empty. This is the page's quiet and it is k-lodge's
   move: the sentence states the whole positioning of the treatment, so it
   is given a band to itself rather than being paired with anything.

   `max-width` in `em` rather than columns, so the measure is the same 34
   characters wide at 1440 and at 2560 instead of stretching with the grid.
   Same specificity as `.tp-intro__body:last-child` and later in the file,
   so it wins on source order. */
.tp-page--cosmetic .tp-intro__body{
  grid-column: 1 / 9;
  max-width: 34em;
  font-size: 19px;
  line-height: 1.7;
}


/* ---- the panel, one column and TWO actions ------------------------------
   The approved copy puts `Book Cosmetic Acupuncture` and `Talk With Vida`
   together at the price block, and puts the same pair again at the close.
   `.tp-facts__action` was written for one link per column and zeroes the
   CTA's trailing margin, so two of them set flush against each other.

   Flex with a real gap rather than restoring the margin, so the two also
   separate cleanly when they wrap on a narrow screen instead of stacking
   touching. Same fix, and the same reason, as the close on
   /neuroacupuncture.

   THE PANEL IS STILL ONE COLUMN. Do not invent a second to hold the second
   action: both actions belong to the same appointment. */
.tp-page--cosmetic .tp-facts__action{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px 44px;
}
.tp-page--cosmetic .tp-facts__action .cta{ margin-inline: 0; }

/* the approved copy labels the block "Appointment", where the
   Neuroacupuncture copy labelled it nothing. The label goes in as the small
   caps `.tp-facts__label` above the figure, which is the same pairing
   `/acupuncture` uses where it repeats a price outside the panel, so the
   figure keeps the display heading slot and its full width hairline. */
.tp-page--cosmetic .tp-facts__label{ margin-block-end: 12px; }


/* ---- two plain intros in a --split column -------------------------------
   The same real bug in the shared system that /neuroacupuncture hit, and it
   is scoped for the same reason. `.tp-mid--split` has no rule for two plain
   `.tp-mid__intro` paragraphs in a row, because /acupuncture's split
   chapter runs one intro and then an `--leadin`. Two plain intros set solid
   against each other with no gap at all.

   Scoped to this page and excluding `--leadin`, because the general fix
   out-specifies `.tp-mid--split .tp-mid__intro--leadin` and would quietly
   move /acupuncture's spacing from 22px to 18px. Third page to need it now.
   It is overdue for promotion into the shared layer and that needs
   Rebecca's word. See BUILD-STATE Open Items 27. */
.tp-page--cosmetic .tp-mid--split .tp-mid__intro + .tp-mid__intro:not(.tp-mid__intro--leadin){
  margin-block-start: 18px;
}


/* ---- citations attached to a sentence, not to a research chapter --------
   /neuroacupuncture and /neurological-conditions both carry a `Research`
   chapter, because their approved copy names sources in a block and gives
   that block a heading. This copy does neither. It names its evidence in
   one sentence inside "What results can you expect?" and supplies no
   heading, so the two sources go directly under the sentence that cites
   them and the page adds no words at all.

   That is also the safer placement on this page in particular. A research
   chapter of its own would give one hedging sentence the weight of a
   section, which is more than the copy makes of it.

   `.tp-research__cite` is reused rather than duplicated so the site speaks
   about its sources in one voice. It only needs more air above the first
   one than a citation following another citation gets. */
.tp-page--cosmetic .tp-mid__note + .tp-research__cite{ margin-block-start: 40px; }


/* ---- the close, with TWO actions ----------------------------------------
   Same shape as `/neuroacupuncture`, and it cannot borrow that page's rule
   because that rule is scoped to `.tp-page--neuro` and sits above this
   block, where nothing may be edited. Rebecca's instruction from
   6 September applies here too: "separate the Acupuncture button and the
   Contact Vida button more, they're too close together." */
.tp-page--cosmetic .close__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 20px 52px;
}
.tp-page--cosmetic .close__actions .cta{ margin-inline: 0; }


/* ---- mobile -------------------------------------------------------------
   The overview sentence loses its desktop measure and its larger size. At
   390 the band is one column already, so the left alignment and the empty
   right half it was written for do not exist, and 19px on a 338px measure
   is a nine word line. */
@media (max-width: 900px){
  .tp-page--cosmetic .tp-intro__body{
    max-width: none;
    font-size: 17.5px;
  }
  .tp-page--cosmetic .tp-facts__action{ gap: 14px 32px; }
  .tp-page--cosmetic .close__actions{ gap: 18px 32px; }
  .tp-page--cosmetic .tp-mid__note + .tp-research__cite{ margin-block-start: 32px; }
}


/* ---- the clip is a different shape from the Neuroacupuncture one --------
   `10 41 05` is cut to 1080 x 1400. The scalp clip on /neuroacupuncture is
   1080 x 1150, and the mobile rule and the reduced motion poster rule that
   came in with it both hard code that ratio. On a phone this clip would be
   cropped to the shorter frame and lose the top of the head.
   Page scoped so /neuroacupuncture keeps its own ratio. */
@media (max-width: 900px){
  .tp-page--cosmetic .tp-alt__figure--motion video{ aspect-ratio: 1080 / 1400; }
}
@media (prefers-reduced-motion: reduce){
  .tp-page--cosmetic .tp-alt__figure--motion::after{ aspect-ratio: 1080 / 1400; }
  @media (min-width: 901px){
    .tp-page--cosmetic .tp-alt--fill .tp-alt__figure--motion::after{ aspect-ratio: auto; }
  }
}


/* ---- more air between a photograph and its copy -------------------------
   Rebecca, 6 September: "We need to pull the text away from the images a
   bit so they have some breathing room."

   She is right and the number explains it. `.tp-alt` puts the figure in
   columns 2 to 7 and the copy in 8 to 12, so the only thing between the
   edge of a photograph and the first word beside it is ONE column gap:
   28px at 1440. On a page where the photography is meant to do most of the
   work, that reads as a caption bolted to the picture rather than as a
   chapter sitting beside it.

   THE COPY IS INSET AND THE PICTURE IS NOT MOVED. Same mechanism as
   `--tall`, which gets a taller picture by padding the copy, and for the
   same reasons: the twelve column grid is untouched, the 1600px cap is
   untouched, and `--fill` still takes the figure height from the row, so
   every block stays at 0px against its copy at every width.

   THE ALTERNATIVE WAS TRIED ON PAPER AND IT IS WORSE. Moving the copy's
   grid lines from 8/13 to 9/13 would give a wider gutter but would also
   take the copy measure from 537px to 424px at 1440, which is a different
   change to the one she asked for. Insetting adds the air and costs the
   measure only what the air takes.

   `--flip` mirrors the block, so the inset goes on the other side.

   Desktop only. On a phone the block stacks and there is no gutter to open.

   SCOPED TO THIS PAGE ON PURPOSE. `/acupuncture` and `/neuroacupuncture`
   carry the same 28px and almost certainly want the same fix, but both are
   built and waiting on Rebecca's review and this is her instruction about
   THIS page. It is a two line promotion into the shared layer the moment
   she says so. See BUILD-STATE Open Items 27. */
@media (min-width: 901px){
  .tp-page--cosmetic .tp-alt__text{
    padding-inline-start: clamp(34px, 3vw, 62px);
  }
  .tp-page--cosmetic .tp-alt--flip .tp-alt__text{
    padding-inline-start: 0;
    padding-inline-end: clamp(34px, 3vw, 62px);
  }
}


/* ==========================================================================
   /cupping · THE FIFTH tp- PAGE, AND THE FIRST WITH NO LEAD, NO PANEL
   AND NO REVIEWS
   Appended 6 September 2026. Nothing above this line is edited.

   Reference: https://www.redmint.com/pages/membership, named by Rebecca
   for this page. What that page does at 1440 is open on a 480px block of
   TYPE with no image at all, run three image and copy rows in the middle,
   and close on a text block. This page takes that shape and nothing else
   from it: not its zero gutter, not its three identical squares, not its
   price eyebrow and not its 24px headings.

   Almost all of this page is the existing tp- system used as it stands.
   The only components it needs that no earlier page needed are in the
   OPENER, and they exist because the opener has to hold the entire first
   screen on its own with no photograph and no fact panel beneath it.

   THE ONE SHARED CHANGE IN THIS BLOCK IS THE GUTTER PROMOTION AT THE END,
   AND REBECCA ASKED FOR IT DIRECTLY.
   ========================================================================== */


/* ---- THE OPENER IS CENTRED, AND THAT IS THE REFERENCE'S OWN COMPOSITION
   Rebecca, 6 September, after seeing the page built: "Show me the opener
   centered like the redmint page."

   SHE IS RIGHT AND THE FIRST BUILD DIVERGED FROM THE REFERENCE. The
   membership page was measured again in a live browser rather than from
   the notes, at a 1660 viewport:
     H2   24px Bodoni Moda, `text-align: center`, 920px wide, left 370
     P    22px Poppins,     `text-align: center`, 920px wide, left 370
   370 + 920 + 370 = 1660, so the block is dead centre of the viewport and
   every line of it is centred. It is one column, not two.

   The first build used `.tp-open`'s twelve column split, which is VIDA's
   own opener and correct on the other four treatment pages, where a fact
   panel or a photograph arrives immediately underneath and balances it.
   **On a page that opens on type with nothing beneath it, the split is the
   wrong shape and it is not what the reference does.**

   WHAT CHANGES: `display: block` and `text-align: center` on this page's
   opener only. The grid columns on `.tp-open__h1` and `.tp-open__body`
   simply stop applying; nothing above this line is edited and no other
   page can reach these rules.

   WHAT DOES NOT CHANGE: the type scale. Redmint's heading is 24px, which
   is barely larger than its body, and that is Redmint's scale, not VIDA's.
   The H1 keeps `clamp(38px, 4.6vw, 68px)`, so the block reads as a VIDA
   opener that happens to be centred rather than as a copy of the
   reference's typography.

   AND THE MARKUP IS NOW IN THE DOCUMENT'S EXACT ORDER. The two column
   version had to group the headline and the action in a wrapper to stop
   the left column reading as a hole, which put `Book a First Visit` ABOVE
   the three standfirst paragraphs. Centred, the action simply follows the
   copy, which is where the approved document puts it. The wrapper is gone.
   **This page now carries the approved copy in source order with no
   departure at all, which no other page on the site does.** */

.tp-page--cupping .tp-open{
  display: block;
  text-align: center;
}

.tp-page--cupping .tp-open__h1{
  max-width: 18ch;
  margin: 26px auto 0;
}


/* THE MEASURE. Redmint runs 920px at 22px, which is about 90 characters and
   far wider than anything on this site. VIDA's centred chapters run 62ch on
   `.tp-mid__intro` and that measure is set and approved, so the opener takes
   it too: one measure for every centred block on the page rather than a
   second one invented for the top of it.
   In `ch` rather than px so it holds at 1440 and at 2560 alike. The site has
   no maximum width below the 1600px block cap, and three paragraphs allowed
   to stretch to 1003px would be about 130 characters, which is unreadable.
   The space it leaves either side above 1440 is the opener's own quiet, and
   on a page that opens on type that is the point. */
.tp-page--cupping .tp-open__body{
  max-width: 62ch;
  margin: 30px auto 0;
}


/* ---- "Before treatment" is the copy's own word --------------------------
   The approved document writes its third standfirst paragraph as "Before
   treatment: Cupping can leave circular red or purple marks...". The label,
   colon and all, is lifted out and set above the sentence it belongs to.
   Every character stays, the order does not move and nothing is added, so
   the page still diffs exactly against the document. Same device as the
   eyebrow, which every page on this site already uses.

   IT NEEDS TO READ AS A LABEL RATHER THAN AS A CAPTION, AND SIZE IS THE
   LEVER, NOT WEIGHT. /neuroacupuncture proved that on 6 September: its
   small caps labels were already at the heaviest weight Newsreader loads
   and already Canyon Sage, the darkest text colour on the site, and they
   still read light, because at 13px they were SMALLER than the 16px body
   beneath them. 14px at 0.14em, in Canyon Sage against a Dry Grass note,
   keeps it darker than the sentence it labels.

   NO RULE ABOVE IT. A hairline here would be a second Copper mark on a
   page that carries exactly one, and the label already does the work. */

.tp-page--cupping .tp-open__note{
  margin-block-start: 34px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--dry-grass-t);
}

.tp-page--cupping .tp-open__notelabel{
  display: block;
  margin-block-end: 9px;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canyon-sage);
}


/* THE ACTION CLOSES THE BLOCK, which is where the approved copy puts it and
   what the centred composition wants: headline, copy, one thing to do. */
.tp-page--cupping .tp-open__action{ margin-block-start: 46px; }
.tp-page--cupping .tp-open__action .cta{ margin-inline-end: 0; }


/* ---- mobile ------------------------------------------------------------
   `.tp-open` is already `display: block` below 901px, so only the centring
   and the spacing carry over. The headline keeps its own mobile size. The
   62ch measure never binds on a 338px column, so it is left alone rather
   than reset. The action closes up: 46px of air below the copy is right
   under a full width block and too much on a phone. */

@media (max-width: 900px){
  .tp-page--cupping .tp-open__h1{ margin-block-start: 20px; }
  .tp-page--cupping .tp-open__body{ margin-block-start: 24px; }
  .tp-page--cupping .tp-open__action{ margin-block-start: 34px; }
  .tp-page--cupping .tp-open__note{ margin-block-start: 28px; font-size: 16px; }
  .tp-page--cupping .tp-open__notelabel{ font-size: 13px; }
}


/* ---- THE PICTURES HAVE TO BE BIGGER ON THIS PAGE THAN `--tall` MAKES THEM
   ANYWHERE ELSE, AND THE WORD COUNT IS WHY.
   483 body words is the smallest page on the site, and in a `--fill` block
   the row height is set by the copy, so short chapters give thin bands. Built
   with the shared `--tall` inset the three slots measured 1.42, 2.37 and 2.99
   at 1440, and the last two are letterbox strips rather than photographs. The
   whole argument of this page is that the pictures live in the middle and
   carry it, so strips will not do.

   THE REFERENCE SETTLES THE PROPORTION. Redmint's membership page runs a
   682 x 682 image against a 515px copy column, so its copy sits vertically
   centred inside a row the picture sets. That is exactly what `--tall`
   already does; it just needs more of it here.

   `clamp(48px, 6vw, 96px)` against the shared `clamp(30px, 3.6vw, 68px)`.
   It buys about 172px of row at 1440 and 192px at 2240, and it lands the
   three slots at roughly 1.23, 1.46 and 1.67 at 1440. THREE DISTINCT SCALES,
   all of them set by how long each chapter runs, which is k-lodge's lesson
   and the reference's own composition rather than a formula.

   IT IS PAGE SCOPED AND MUST STAY THAT WAY. `/neuroacupuncture` and
   `/cosmetic-acupuncture` carry 900 word chapters and are approved as they
   stand. This is not a better default, it is the right number for a page
   with half their copy. The mechanism is unchanged: the COPY is padded, the
   picture is not moved, and `--fill` still takes the figure height from the
   row, so every block stays at 0px against its copy at every width. */

@media (min-width: 901px){
  .tp-page--cupping .tp-alt--tall .tp-alt__text{
    padding-block: clamp(48px, 6vw, 96px);
  }
}


/* ---- row 1 gets its own phone crop --------------------------------------
   `358` is a 5222 x 7829 portrait and the desktop slot is 1.28 wide, so the
   desktop asset is a landscape window cut out of the middle of it. Dropped
   into the 4/5 the phone gives an alternating figure, that window would be
   cover-cropped back to a narrow centre strip and lose most of Vida on the
   left. A second crop of the SAME frame at 4/5 keeps the whole composition
   instead, which is nearly the whole original.
   `display: contents` is what keeps `--fill` working: the `<picture>` must
   not become the positioned child, or the absolute rules land on the wrapper
   instead of the image. Same device `.cond-lead` uses. */

.tp-page--cupping .tp-alt__figure picture{ display: contents; }


/* ---- THE MARKS ROW IS THE ONE PICTURE THAT SETS ITS OWN HEIGHT ----------
   Rebecca, 6 September, on the first build of this row: "I think the image
   where you have the marks cupping can leave is too long and narrow, making
   it look odd because only the two cups are visible. You need to see the
   whole image."

   SHE IS RIGHT, AND THE CAUSE IS `--fill` DOING EXACTLY WHAT IT IS FOR.
   In a `--fill` block the row height comes from the copy, and this chapter
   is two paragraphs, so the slot measured 650 x 447 at 1440 and 730 x 438
   at 2240. The source is a 1080 x 1920 PORTRAIT frame. Cover-cropped into a
   1.45 slot it keeps a horizontal band across the middle: two cups out of
   four, no shoulder above, no hip below. A magnified detail rather than a
   photograph, which is the trap BUILD-STATE records for a portrait original
   in a wide band, arriving here through the copy rather than through a crop.

   SO THIS ROW COMES OFF `--fill` AND THE PICTURE SETS THE ROW.
   `aspect-ratio: 3 / 4`, which is the crop's own shape. The copy centres
   beside it, which is `.tp-alt`'s own default once `--fill`'s
   `align-items: stretch` is gone.

   THE FRAME IN THE SLOT HAS CHANGED ONCE SINCE AND THE FIX SURVIVED IT.
   It first held a clip frame of four cups resting on a bare back, which
   Rebecca rejected as clinical: "I don't think we use this is so ugly what
   else could we use here." Eight alternatives went to her as one labelled
   sheet and she chose `330`. Both frames are portrait, so the row still
   needs the picture to set its own height; only the ratio moved, from
   1080/1920 to 3/4.

   THIS IS THE SANCTIONED USE OF A FIXED RATIO AND IT IS THE ONLY ONE ON THE
   SITE. BUILD-STATE: "A fixed aspect ratio can only ever match its copy at
   one window width. Use one where the picture is MEANT to be the taller
   element." It is meant to be here. **And the width bug is bounded rather
   than open**, because the 1600px cap holds the figure at 730px wide above
   2240, so the row tops out at 1298px and does not keep growing.
   **The other two rows keep `--fill` and stay at 0px against their copy.**

   `--tall` STAYS, and it is doing a different job here. With `--fill` gone
   it no longer lifts the row; it pads the copy block itself, from 274px to
   about 446px, so a two paragraph chapter has some presence against a
   taller picture instead of floating as a caption.

   ON A PHONE THE FRAME KEEPS ITS OWN SHAPE TOO. The row loses `--wide` and
   takes the same 3/4, so the phone gets the same picture rather than a
   different crop of it. That leaves three genuinely different mobile
   scales: 4/5, 3/4 and 16/9 on the last row. */

.tp-page--cupping .tp-alt__figure--portrait img{
  aspect-ratio: 3 / 4;
}


/* ---- three scales on the phone too -------------------------------------
   Mobile is composed rather than stacked, and three identical 4/5 figures
   stacked down a phone is the repeating image formula the brief rules out
   as surely as three identical squares on a desktop.
   Row 1 keeps the shared 4/5, which is right for its portrait original.
   Row 2 keeps its own 3/4 from the rule above, so the phone gets the same
   picture rather than a differently cropped version of it.
   Row 3 goes wider still. `379` is an 8192 x 5464 landscape original whose
   subject sits across the frame, and it is the shortest chapter on the page,
   so it is the one that should read as a band on a phone as well. */

@media (max-width: 900px){
  .tp-page--cupping .tp-alt__figure--pan img{ aspect-ratio: 16 / 9; }
}


/* ==========================================================================
   THE GUTTER, PROMOTED OUT OF ONE PAGE AND INTO THE SHARED LAYER
   Rebecca, 6 September, on /cosmetic-acupuncture: "We need to pull the
   text away from the images a bit so they have some breathing room."
   Asked on 6 September whether to promote it, she said yes.

   WHAT IT DOES. `.tp-alt` puts the figure in columns 2 to 8 and the copy
   in 8 to 13, so the only thing between the edge of a photograph and the
   first word beside it is one column gap, 28px at 1440. The copy is inset
   and the picture is not moved, which is the same mechanism as `--tall`
   and for the same reasons: the twelve column grid is untouched, the
   1600px cap is untouched, and `--fill` still takes the figure height
   from the row, so every block stays at 0px against its copy.
   71px total at 1440, 90px at 2240 and above. Desktop only; a phone
   stacks the block and has no gutter to open.

   WHAT ACTUALLY MOVES, AND IT IS LESS THAN BUILD-STATE SAYS.
   BUILD-STATE Open Items 27 records that /acupuncture and
   /neuroacupuncture both still run the 28px Rebecca rejected. That is
   only true of /acupuncture. /neuroacupuncture has carried its own
   clamp(30px, 3vw, 60px) since its rebuild, asked for in the same words
   on the same day, and it is 58px at 1440 rather than 28px.
   So:
     /acupuncture           28px  ->  71px.  A real change she will see
     /neuroacupuncture      58px  ->  71px.  4px at 1440. Invisible
     /cosmetic-acupuncture  71px  ->  71px.  Identical values, no change
     /cupping                         71px.  Built with it from line one
   The two page scoped copies above are now dead weight and can go with
   their backups once she has approved the pages they sit on. They are
   left in place rather than edited, because nothing above this line in
   this file may be touched.

   THE ALTERNATIVE WAS TRIED ON PAPER AND IT IS WORSE. Moving the copy's
   grid lines from 8/13 to 9/13 opens a wider gutter in one edit and also
   takes the copy measure from 537px to 424px, which is a 21% narrowing
   nobody asked for. Insetting costs the measure only what the air takes:
   537px to 494px, about 64 characters, still a good line.
   ========================================================================== */

@media (min-width: 901px){
  .tp-page .tp-alt__text{
    padding-inline-start: clamp(34px, 3vw, 62px);
  }
  .tp-page .tp-alt--flip .tp-alt__text{
    padding-inline-start: 0;
    padding-inline-end: clamp(34px, 3vw, 62px);
  }
}


/* ==========================================================================
   /moxibustion · THE SIXTH tp- PAGE, AND THE SECOND WITH NO LEAD, NO PANEL
   AND NO REVIEWS
   Appended 7 September 2026. Nothing above this line is edited.

   Rebecca settled the shape before a line was written: "lets move onto the
   moxa page prompt it will look the same." So this page follows /cupping,
   which is its sibling at 483 words to this page's 505, and the reference
   is the same one she named for that page,
   https://www.redmint.com/pages/membership. It was opened in a live browser
   again for this build rather than taken from the record, and it holds: at
   a 1660 viewport the opening block's heading and all three of its
   paragraphs are `text-align: center`, 920px wide, at left 370 with 370 to
   spare. Dead centre, one column.

   ALMOST ALL OF THIS PAGE IS THE EXISTING tp- SYSTEM USED AS IT STANDS, and
   most of what follows is /cupping's own opener block re-scoped, because the
   two pages open the same way for the same reason. Three rules are new to
   the site and they are marked.

   THERE IS NO SHARED RULE IN THIS BLOCK. Every selector is
   `.tp-page--moxa` scoped and reaches nothing on any other page.
   ========================================================================== */


/* ---- THE OPENER IS CENTRED, AND IT CARRIES THE WHOLE FIRST SCREEN -------
   Same composition as /cupping and for the same reason: on a page with no
   photograph and no fact panel beneath the headline, `.tp-open`'s twelve
   column split is the wrong shape and it is not what the reference does.
   `display: block` plus `text-align: center` is the whole change. The grid
   columns on `.tp-open__h1` and `.tp-open__body` simply stop applying, so
   nothing above this line is touched and no other page can reach these
   rules.

   THE TYPE SCALE IS NOT TAKEN FROM THE REFERENCE. Redmint's heading is
   24px, barely larger than its body. The H1 here keeps the site's
   `clamp(38px, 4.6vw, 68px)`.

   THE MEASURE IS 62ch, which is `.tp-mid__intro`'s measure and therefore
   every other centred block on the site, in `ch` rather than px so it holds
   at 1440 and at 2560 alike. Uncapped it would stretch past 1000px, which
   at 18px is about 130 characters.

   FOUR PARAGRAPHS HERE, WHERE /cupping CARRIES THREE. The document gives
   this page four standfirst paragraphs and all four stay where it puts
   them. AND NO ACTION: this document puts "Book a First Visit" once only,
   at the very end, and on a page about something you cannot book, an
   opening screen with nothing to click is consistent rather than a gap. So
   there is no `.tp-open__action` rule on this page, which is the one place
   its opener differs from /cupping's. */

.tp-page--moxa .tp-open{
  display: block;
  text-align: center;
}

.tp-page--moxa .tp-open__h1{
  max-width: 18ch;
  margin: 26px auto 0;
}

.tp-page--moxa .tp-open__body{
  max-width: 62ch;
  margin: 30px auto 0;
}


/* ---- "Traditional terminology" is the copy's own word -------------------
   NEW TO THE SITE, in position rather than in kind. The approved document
   writes the note as "Traditional terminology: 'Cold' and 'damp' are
   Chinese medicine terms. They are not biomedical diagnoses." The label,
   colon and all, is lifted out and set above the sentence it belongs to.
   Every character stays and the order does not move, so the page still
   diffs exactly against the document.

   /cupping does the same thing with "Before treatment:" in its OPENER.
   This one lives inside a `--split` chapter's second column, so it needs
   its own rule rather than that one.

   SIZE IS THE LEVER, NOT WEIGHT. /neuroacupuncture proved that on 6
   September: its small caps labels were already at Newsreader's heaviest
   loaded weight and already Canyon Sage, the darkest text colour on the
   site, and they still read light, because at 13px they were SMALLER than
   the 16px body beneath them. 14px at 0.14em in Canyon Sage against a
   16.5px Dry Grass note keeps the label darker than the sentence it
   labels. */

.tp-page--moxa .tp-mid__notelabel{
  display: block;
  margin-block-end: 9px;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canyon-sage);
}


/* ---- THE CITATION SITS INSIDE A COPY COLUMN ----------------------------
   NEW TO THE SITE. /cosmetic-acupuncture established that a research
   citation does not always need a research chapter: where the copy names
   its evidence in one sentence and gives no heading, the `.tp-research__cite`
   goes under the sentence rather than into a component of its own. That is
   this page's situation too, with one difference. There the chapter was
   centred; here it is the copy column of an alternating block.

   `.tp-research__cite` is built for a centred chapter: `max-width: 60ch`
   with `margin-inline: auto`. Left in a 494px copy column it would sit
   about 40px in from the left edge with the paragraphs above it flush,
   which reads as a mistake rather than as a citation. So the measure comes
   off and the margins go flush.

   THE COMPONENT IS REUSED RATHER THAN DUPLICATED, so the site still speaks
   about its sources in one voice: same size, same colour, same hairline
   underline, same Copper hover. */

.tp-page--moxa .tp-alt__text .tp-research__cite{
  max-width: none;
  margin: 34px 0 0;
}


/* ---- THE PICTURES HAVE TO BE BIGGER THAN `--tall` MAKES THEM ANYWHERE
   ELSE, AND THE WORD COUNT IS WHY.
   /cupping wrote this rule down and this page is the second data point.
   In a `--fill` block the row height is set by the copy, so on a short page
   the slots come out thin. `--tall` answers it by padding the COPY, not by
   fixing a ratio, so the figure still equals the row exactly at every
   width.

   `--tall`'s INSET IS A FUNCTION OF THE PAGE'S WORD COUNT, NOT A CONSTANT,
   AND /cupping's NUMBER WAS NOT INHERITED. This page has 505 words to that
   page's 483 but only ONE `--fill` row rather than three, and that row is
   the longest chapter on the page at three paragraphs, so it starts from a
   different place. The slots were measured in the rendered page first and
   the inset set from what they came out at. See the build record for the
   measured before and after.

   IT IS PAGE SCOPED AND MUST STAY THAT WAY. /neuroacupuncture and
   /cosmetic-acupuncture carry chapters twice this length and are approved
   as they stand. This is not a better default. */

@media (min-width: 901px){
  .tp-page--moxa .tp-alt--tall .tp-alt__text{
    padding-block: clamp(48px, 6vw, 96px);
  }
}


/* ---- row 1 gets its own phone crop --------------------------------------
   `161` is an 8192 x 5464 landscape original and the desktop asset is a
   narrower landscape window cut out of the middle of it. The phone row runs
   at 16/9, so cover-cropping that window would take a strip off the top and
   bottom of the needles. A second crop of the same frame at 16/9 keeps the
   full width instead.
   `display: contents` is what keeps `--fill` working: the `<picture>` must
   not become the positioned child, or the absolute rules land on the
   wrapper instead of the image. Same device `.cond-lead` and /cupping's
   row 1 both use. */

.tp-page--moxa .tp-alt__figure picture{ display: contents; }


/* ---- THE RESEARCH ROW IS A PICTURE THAT SETS ITS OWN HEIGHT -------------
   THE SECOND BLOCK ON THE SITE TO COME OFF `--fill`, and the reason is the
   one /cupping wrote down after Rebecca sent its marks row back: "--fill is
   not free. It hands the picture's shape to the copy."

   `120` is a 5191 x 7782 PORTRAIT original whose composition runs from
   Vida's face near the top to the lit tealight near the bottom, about 4,600
   pixels apart. This chapter is two paragraphs, so a `--fill` slot here
   comes out around 1.4 wide, which is a window roughly 3,600 pixels tall on
   the original. Ten windows were built and looked at before this was
   settled: every wide one loses either her face or the flame, and cutting
   the asset to the measured slot ratio is exactly what would have destroyed
   it.

   SO THE PICTURE SETS THE ROW. `aspect-ratio: 4 / 5`, which is the crop's
   own shape, and the copy centres beside it on `.tp-alt`'s own default once
   `--fill`'s `align-items: stretch` is gone.

   BUILD-STATE'S CONDITION IS MET: "use a fixed ratio where the picture is
   MEANT to be the taller element." It is here. AND THE WIDTH BUG IS BOUNDED
   RATHER THAN OPEN, because the 1600px cap holds the figure at 730px wide
   above 2240, so the row stops growing instead of running away with the
   viewport. A fixed ratio without the cap is the width bug; with it, it is
   a decision.

   IT ALSO MAKES THE TWO PICTURES ON THIS PAGE DIFFERENT SHAPES. With only
   two photographs, two wide `--fill` bands would be closer to a formula
   than /cupping's three. One wide landscape band and one tall portrait is
   the version of this page where different photographs do different jobs.

   ON A PHONE IT NEEDS NO RULE AT ALL. 4/5 is already the shared mobile
   default for an alternating figure, and the crop is 4/5 exactly, so the
   phone gets the same picture rather than a differently cropped version of
   it. */

.tp-page--moxa .tp-alt__figure--portrait img{
  aspect-ratio: 4 / 5;
}


/* ---- two scales on the phone -------------------------------------------
   Two identical 4/5 figures stacked down a phone would be the repeating
   image formula on mobile, and with only two pictures it would be the whole
   page. Row 1's landscape original goes to 16/9 from its own crop; row 2
   keeps the 4/5 above. */

@media (max-width: 900px){
  .tp-page--moxa .tp-alt__figure--pan img{ aspect-ratio: 16 / 9; }
}


/* ---- mobile ------------------------------------------------------------
   `.tp-open` is already `display: block` below 901px, so only the centring
   and the spacing carry over, and the headline keeps its own mobile size.
   The 62ch measure never binds on a 338px column, so it is left alone
   rather than reset. */

@media (max-width: 900px){
  .tp-page--moxa .tp-open__h1{ margin-block-start: 20px; }
  .tp-page--moxa .tp-open__body{ margin-block-start: 24px; }
  .tp-page--moxa .tp-mid__notelabel{ font-size: 13px; }
  .tp-page--moxa .tp-alt__text .tp-research__cite{ margin-block-start: 28px; }
}


/* ==========================================================================
   /gua-sha-tui-na · THE SEVENTH tp- PAGE, THE THIRD WITH NO LEAD, NO PANEL
   AND NO REVIEWS, AND THE LAST TREATMENT PAGE ON THE SITE
   Appended 7 September 2026. Nothing above this line is edited.

   It is /cupping's and /moxibustion's sibling and the copy document asks for
   that by name: "Build this page in the same service-page template as
   Cupping." The reference is the same one Rebecca named for both,
   https://www.redmint.com/pages/membership: no hero, a centred opening text
   block, the pictures living in the middle, a text block to close.

   THIS PAGE IS HALF AGAIN AS BIG AS EITHER SIBLING. 599 body words against
   /cupping's 483 and /moxibustion's 505, and SEVEN chapters against six and
   five. So it takes /cupping's SHAPE and /cupping's PICTURE COUNT, three,
   rather than /moxibustion's two, and it needs one text setting neither of
   them needed. See the `--split` note below.

   THERE IS NO SHARED RULE IN THIS BLOCK. Every selector is
   `.tp-page--guasha` scoped and reaches nothing on any other page.
   ========================================================================== */


/* ---- THE OPENER IS CENTRED, AND IT CARRIES THE WHOLE FIRST SCREEN -------
   Third page to do this and the reason has not changed: with no photograph
   and no fact panel beneath the headline, `.tp-open`'s twelve column split
   is the wrong shape and it is not what the reference does. `display: block`
   plus `text-align: center` is the whole change, so the grid columns on
   `.tp-open__h1` and `.tp-open__body` simply stop applying and nothing above
   this line is touched.

   THREE PARAGRAPHS, as /cupping has. The measure is 62ch, which is
   `.tp-mid__intro`'s measure and therefore every other centred block on the
   site, in `ch` so it holds at 1440 and at 2560 alike.

   AND IT CARRIES AN ACTION, WHICH IS /cupping's ANSWER AND NOT
   /moxibustion's. This document puts `Book a First Visit` twice, at the end
   of the standfirst and at the end of the last chapter, so the opener closes
   on a link exactly where the copy puts it. Read the document, not the
   sibling page. */

.tp-page--guasha .tp-open{
  display: block;
  text-align: center;
}

.tp-page--guasha .tp-open__h1{
  max-width: 18ch;
  margin: 26px auto 0;
}

.tp-page--guasha .tp-open__body{
  max-width: 62ch;
  margin: 30px auto 0;
}

.tp-page--guasha .tp-open__action{ margin-block-start: 46px; }
.tp-page--guasha .tp-open__action .cta{ margin-inline-end: 0; }


/* ---- NO NOTELABEL RULE ON THIS PAGE ------------------------------------
   /cupping lifts "Before treatment:" out of its third standfirst paragraph
   and /moxibustion lifts "Traditional terminology:" out of a note, and both
   needed a rule for it. THIS DOCUMENT WRITES NO LABEL OF ITS OWN ANYWHERE,
   so none is set. A label the copy itself writes can be lifted out and set
   as a label. Inventing one cannot, and that is a copy change rather than
   formatting. Recorded here so the absence reads as a decision. */


/* ---- `--tall`'s INSET, AND THIS PAGE IS THE THIRD DATA POINT ------------
   In a `--fill` block the row height is set by the copy, so on a short page
   the slots come out thin. `--tall` answers it by padding the COPY, not by
   fixing a ratio, so the figure still equals the row exactly at every width.

   THE INSET IS A FUNCTION OF THE PAGE'S WORD COUNT AND IT IS NOT INHERITED.
   /cupping, 483 words and three `--fill` rows, went to
   `clamp(48px, 6vw, 96px)`. /moxibustion, 505 words and one `--fill` row,
   landed on the same number by a coincidence of two effects cancelling, and
   its own block says so. This page has 599 words and three `--fill` rows,
   and its picture chapters are longer than /cupping's, so the slots start
   from a different place again. They were measured in the rendered page
   before this line was written. See the build record for the before and
   after.

   IT IS PAGE SCOPED AND MUST STAY THAT WAY. /neuroacupuncture and
   /cosmetic-acupuncture carry chapters twice this length and are approved as
   they stand. */

@media (min-width: 901px){
  .tp-page--guasha .tp-alt--tall .tp-alt__text{
    padding-block: clamp(40px, 5vw, 82px);
  }
}


/* ---- two rows take their own phone crop --------------------------------
   `display: contents` is what keeps `--fill` working: the `<picture>` must
   not become the positioned child, or the absolute rules land on the wrapper
   instead of the image. Same device `.cond-lead`, /cupping's row 1 and
   /moxibustion's row 1 all use. */

.tp-page--guasha .tp-alt__figure picture{ display: contents; }


/* ---- THREE SCALES ON THE PHONE -----------------------------------------
   Three identical 4/5 figures stacked down a phone is the repeating image
   formula on mobile, and on a page with three pictures it would be the whole
   page. It matters more here than on either sibling, because TWO OF THE
   THREE FRAMES ARE THE SAME GESTURE FROM THE SAME SHOOT: a hand, a black
   tool and a shoulder. If they are also the same shape they read as one
   picture used twice.

   So row 1 keeps the shared 4/5 default from its own crop, row 2 goes to
   16/9 from a second crop of its own frame, and row 3 goes to 3/2, which is
   close to the still life's native 1.41 and barely crops it. */

@media (max-width: 900px){
  .tp-page--guasha .tp-alt__figure--pan img{ aspect-ratio: 16 / 9; }
  .tp-page--guasha .tp-alt__figure--still img{ aspect-ratio: 3 / 2; }
}


/* ---- mobile ------------------------------------------------------------
   `.tp-open` is already `display: block` below 901px, so only the centring
   and the spacing carry over, and the headline keeps its own mobile size.
   The 62ch measure never binds on a 338px column, so it is left alone rather
   than reset. */

@media (max-width: 900px){
  .tp-page--guasha .tp-open__h1{ margin-block-start: 20px; }
  .tp-page--guasha .tp-open__body{ margin-block-start: 24px; }
  .tp-page--guasha .tp-open__action{ margin-block-start: 34px; }
}


/* ==========================================================================
   MEET VIDA · page scoped
   /about, built 7 September 2026 on the `cond-` system and RECUT the same day
   after Rebecca reviewed the opener.

   WHY THIS BLOCK IS AT THE END OF THE FILE. Appending is the only way to keep
   the "shared lines are byte identical to the backup" check meaningful, and
   that check is what proves the twelve existing pages did not move. Cascade
   order is not a problem: `.cond-page--about .cond-open` and
   `.cond-page--wide .cond-open` are the same specificity, so this block has
   to come last to win, which it does.

   /about IS THE FIRST PAGE ON THIS SITE OUTSIDE THE THREE PAGE SYSTEMS, and
   it was put on `cond-` rather than given a fourth. The reasoning is written
   at the head of `about/index.html` and in `claude/ABOUT-BUILD.md`.

   535 words including the credentials block, 475 without it. That puts it
   between /moxibustion at 505 and /gua-sha-tui-na at 599.

   THE WIDTH CAP AND `--fill` ARE BUILT IN FROM THE FIRST LINE. That is the
   fifth condition page to scope them separately. BUILD-STATE Open Items 27.

   THE RECUT CHANGED SECTION 1 COMPLETELY AND DELETED THE OLD SECTION 4. Every
   other section below is unchanged from the first build.
   ========================================================================== */


/* ---- 1 · THE OPENER · the only one on this site that carries a photograph
   ------------------------------------------------------------------------
   REBECCA'S NOTE, 7 SEPTEMBER: "the opening header doesn't work visually",
   then, on the option she picked: "the text needs to be a part of the image
   because they look too disconnected this way."

   THE DIAGNOSIS, MEASURED. `.cond-open` is a twelve column grid built for a
   long headline and a short intro. `Meet Vida` is two words. So the left
   column held a two word headline, a signature, then about 300px of nothing,
   then two links, while the right column held four paragraphs at
   `grid-column: 9 / 13`, which put 480px of empty canvas between them.

   THE FIX IS TWO CHANGES AND BOTH ARE LOAD BEARING.

   ONE, THE GUTTER. The portrait takes columns 1 to 6 and everything else
   takes 7 to 12, which measures 141px between them at 1440. That is the same
   gutter every `.cond-alt` block on this site already uses, so the opener now
   sits on a relationship the reader has already met.

   TWO, THE HEADLINE MOVED INTO THE COPY COLUMN, and this is the half that
   actually answers her note. With the H1 and the signature above the
   paragraphs, the text block runs tall enough to hold the portrait's height,
   so the two read as one object. THREE ARRANGEMENTS WERE BUILT AND MEASURED:
   with the headline above the picture instead, the copy column comes out
   118px SHORTER than the photograph and the hole simply moves to the right.
   Same picture, same gutter, same words, and it still reads as two things.

   NO TEXT SITS OVER THE PHOTOGRAPH. The brief rules that out except where it
   earns its place, and it does not here: the portrait is three quarter length
   against a bright window with no quiet ground to set type on.

   THREE, THE COPY IS VERTICALLY CENTRED AGAINST THE PORTRAIT. Rebecca again,
   after the first recut: "the copy should be centered in the image; right now
   it sits at the top." See the note on `.cond-open__col` below.

   SOURCE ORDER IS EYEBROW, THE COPY COLUMN, THEN THE PORTRAIT, and the PHONE
   reorders it rather than the desktop. See section 8.

   NOTHING ABOVE THE APPEND POINT IS TOUCHED. The H1's shared `grid-column`
   and `grid-row` simply stop applying inside `.cond-open__title`, which is
   not a grid container. Only its shared `margin-block-start` has to be
   reset. */
/* THE COPY COLUMN IS ONE GRID ITEM AND IT IS VERTICALLY CENTRED AGAINST THE
   PORTRAIT. Rebecca, 7 September, on the first recut: "the copy should be
   centered in the image; right now it sits at the top."

   She is right and the cause is structural. The headline, the paragraphs and
   the actions were three separate grid items in three rows, so they could
   only ever start at the top of the picture and leave the remainder below it.
   Wrapping them in `.cond-open__col` makes them ONE item, and one item can be
   centred against a taller neighbour with `align-self: center`.

   The row is sized by the portrait, which is the taller of the two, so the
   text now sits with equal quiet above and below it: 78px either side at
   1440, 119px from 1600 up. */
/* The 34px that used to sit on the portrait as a top margin is a ROW GAP
   instead. With the margin inside the track, `align-self: center` centred the
   copy against the TRACK rather than against the picture and landed it 17px
   high. Measured, not eyeballed. */
.cond-page--about .cond-open{ row-gap: 34px; }

.cond-page--about .cond-open__col{
  grid-column: 7 / 12;
  grid-row: 2;
  align-self: center;
}

.cond-page--about .cond-open__title{
  margin-block-start: 0;
}

/* Smaller than the shared `clamp(38px, 4.6vw, 68px)`, because it lives in a
   537px column rather than across seven of twelve. Checked at 390, 900, 1024,
   1440, 2240 and 2560: `Meet Vida` holds one line at every one of them. */
.cond-page--about .cond-open__h1{
  margin-block-start: 0;
  font-size: clamp(36px, 3.9vw, 58px);
}

/* THE SIGNATURE LINE. No other page on this site has one. The approved copy
   puts `Vida Pirata, L.Ac.` on its own line between the H1 and the first
   paragraph. It is not a second heading and it is not body copy, so it is set
   as what it is: a signature, in the display face, plainly subordinate to the
   headline and directly under it.

   Canyon Sage rather than the Dry Grass tone, deliberately. It belongs to the
   headline above it rather than to the paragraphs below, and the 22px gap
   above against the 34px gap below is what groups it upward. */
.cond-page--about .cond-open__signature{
  margin-block-start: 22px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--canyon-sage);
}

/* THE PORTRAIT. Five columns and a fixed 4/5. It shares row 2 with the copy
   column and, being the taller of the two, it is what sets that row's height,
   which is what lets the copy centre against it.
   `align-self: start` matters: without it the figure stretches to the row and
   the fixed ratio fights the grid. Bone behind it for the moment before the
   image paints, which is the same ground `.cond-alt__figure` uses.

   IT IS CAPPED AT 604px AND THAT IS THE WIDTH BUG ARRIVING SOMEWHERE IT HAS
   NEVER BEEN BEFORE. `.cond-open` is deliberately NOT capped, because capping
   it pushes the headline inward past 1600px and Rebecca sent exactly that
   back on /neurological-conditions. But an uncapped opener means an uncapped
   figure, and a fixed ratio on an uncapped figure IS the bug: measured before
   this cap went on, the portrait reached **870 x 1088 at 2240 and 1004 x 1255
   at 2560**, against a text block that stays 432px tall, because four short
   paragraphs get SHORTER as their column widens.

   SO THE CAP GOES ON THE FIGURE, NOT ON THE SECTION. 604px is not arbitrary:
   it is exactly what `.cond-alt__figure` measures at 2240 under the 1600px
   block cap, so the opener portrait and the two alternating figures below it
   all top out at the same width and the page has one widest picture rather
   than three.

   THE PORTRAIT IS STILL THE TALLER ELEMENT ABOVE 1440 AND THAT IS
   DELIBERATE, the same call `/cupping`, `/moxibustion` and this page's own
   first build all made: a portrait original beside a short chapter sets its
   own height rather than being cut to the copy's shape. Bounded, that is a
   decision. Unbounded, it is the bug. */
.cond-page--about .cond-open__portrait{
  grid-column: 1 / 6;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  inline-size: 100%;
  max-inline-size: 604px;
  background: var(--bone);
  overflow: hidden;
}
.cond-page--about .cond-open__portrait picture{ display: contents; }
.cond-page--about .cond-open__portrait img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}

/* 17px rather than the shared 17.5, and it is the one number here that is
   about fit rather than taste: at 17.5 the four paragraphs run 24px taller
   than the portrait and the block loses its bottom edge. */
.cond-page--about .cond-open__intro{
  grid-column: auto;
  grid-row: auto;
  margin-block-start: 34px;
}
.cond-page--about .cond-open__intro p{ font-size: 17px; }

.cond-page--about .cond-open__actions{
  grid-column: auto;
  grid-row: auto;
  margin-block-start: 34px;
}

/* ABOVE 1600px THE OPENER STOPS BEING A TWELVE COLUMN GRID, AND THIS IS THE
   SECOND HALF OF THE CAP.

   Capping the figure alone is not enough and the measurement says so. The
   portrait tops out at 604px, but the copy is still placed at `grid-column:
   7` of a grid that keeps stretching, so the gap between them reopened to
   **474px at 2240 and 634px at 2560** — which is the fault Rebecca reported
   in the first place, returning at the widths she actually reviews at.

   So above 1600 the opener runs on four explicit tracks instead: the
   portrait, an 85px spacer, the copy, and whatever is left. With the shared
   28px column gap either side of the spacer that holds the gutter at exactly
   141px at every width from 1600 up, which is the same 141px it measures at
   1440 on the twelve column grid. The two halves of the opener stay locked
   together at any display width.

   1600 is the switch because the twelve column grid gives a 603px portrait
   and a 603px copy column at exactly that width, so nothing jumps: the tracks
   below take over at the size the grid had already reached.

   THE OPENER STILL RUNS TO THE PAGE EDGE. `.cond-open` is not capped and must
   not be. The fourth track absorbs the extra width instead. */
@media (min-width: 1600px){
  .cond-page--about .cond-open{
    grid-template-columns: 604px 85px 604px 1fr;
  }
  .cond-page--about .cond-open__eyebrow{ grid-column: 1 / -1; }
  .cond-page--about .cond-open__portrait{ grid-column: 1; max-inline-size: none; }
  .cond-page--about .cond-open__col{ grid-column: 3; }
}


/* ---- 1b · THE TWO PICTURE ROWS ZIGZAG, AND BOTH FIGURES ARE WIDER ------
   Rebecca, 7 September: "flip the picture and text so they are opposite the
   header, make the image slightly larger", and on the second row, "flip it to
   the other side to create a zigzag pattern".

   THE ZIGZAG NOW STARTS IN THE OPENER, WHICH IS WHY THE FIRST ROW HAD TO
   FLIP. The opener puts the portrait LEFT and the words RIGHT. So the first
   picture row takes the picture RIGHT and the second takes it LEFT, and the
   page reads left, right, left down its three photographs. Before this the
   opener and the first row both had the picture on the left, which is a
   repeat rather than a rhythm.

   THE FIGURE IS SIX COLUMNS AND THE COPY IS FIVE, where the shared component
   gives the figure five and the copy four. That is "slightly larger" done
   inside the grid rather than by setting a width: the figure goes from 537 to
   650 at 1440 and the copy from 424 to 537, which is the same measure the
   opener's copy column uses, so the page has ONE copy measure rather than
   two.

   BOTH ROWS RUN EDGE TO EDGE WITHIN THE PAGE PADDING and the gutter between
   picture and copy stays 141px, matching the opener. The shared component
   insets both sides by a column; this page spends those two columns on the
   picture and the measure instead. */
@media (min-width: 901px){
  .cond-page--about .cond-alt__figure{ grid-column: 1 / 7; }
  .cond-page--about .cond-alt__text{ grid-column: 8 / 13; }
  .cond-page--about .cond-alt--flip .cond-alt__text{ grid-column: 1 / 6; }
  .cond-page--about .cond-alt--flip .cond-alt__figure{ grid-column: 7 / 13; }
}


/* ---- 2 · the page stops growing past 1600px -----------------------------
   THE CAP GOES ON `.cond-alt` ONLY AND NEVER ON `.cond-open`. On `.cond-alt`
   it is load bearing: it is what stops the figure outgrowing its copy. On
   `.cond-open` it does nothing but centre the opener, and past 1600px that
   pushes the H1 inward while every chapter below still runs to the page edge.
   Rebecca flagged exactly that on /neurological-conditions and it cost a
   round. See NEUROLOGICAL-CONDITIONS-BUILD.md, revision pass item 1. */
.cond-page--about .cond-alt{
  max-width: 1600px;
  margin-inline: auto;
}


/* ---- 3 · BOTH PICTURE ROWS TAKE A FIXED RATIO. THERE IS NO `--fill` ON
   THIS PAGE, AND THAT IS A CONSEQUENCE OF SECTION 1b -----------------------
   Rebecca asked for both pictures to be larger and for neither Vida nor her
   feet to be cut off. Widening the figure to six columns also widened the
   COPY to five, and wider copy is shorter copy, so a `--fill` slot would have
   come out at **1.50 on the first row and 1.87 on the second** at 1440.
   Measured. Both source frames are portraits at 0.667. **Cutting a portrait
   original to a 1.87 letterbox is exactly what she is asking us not to do.**

   So both figures set their own height and the copy centres beside them on
   `.cond-alt`'s own default `align-items: center`. **The ratios were chosen by
   building the windows and looking at them, not by arithmetic:** at 1.10 the
   first frame already loses her feet, and above 1.15 the second loses her
   crossed legs.

   THE 1600px CAP IN SECTION 2 IS WHAT MAKES THIS SAFE. The figure stops
   widening at 730px, so each row tops out rather than growing with the
   viewport. A fixed ratio WITHOUT the cap is the width bug; with it, it is a
   decision. Same case as `/cupping`'s marks row, `/moxibustion`'s research row
   and this page's own opener.

   **THREE PICTURES, THREE RATIOS, ALTERNATING SIDES: 0.80 in the opener on the
   left, 0.95 on the right, 0.85 on the left.** All three are taller than their
   copy, which is a repetition, and it is the price of her instruction. The
   ratios and the sides are what keep it a rhythm rather than a formula. */
@media (min-width: 901px){
  .cond-page--about .cond-alt__figure picture{ display: contents; }
  .cond-page--about .cond-alt--india .cond-alt__figure img{ aspect-ratio: 0.95; }
  .cond-page--about .cond-alt--practice .cond-alt__figure img{ aspect-ratio: 0.85; }
}


/* ---- 4 · a line that introduces a list is not a paragraph ---------------
   Two chapters on this page end with a one line lead-in before their list. At
   the standard spacing those lines float between the paragraph above and the
   list below and read as their own thought. Same fix Sleep and
   /neurological-conditions both carry. */
.cond-page--about .cond-mid__intro--leadin{ margin-block-start: 14px; }


/* ---- 5 · a list of two -------------------------------------------------
   `Her Neuroacupuncture training includes:` carries TWO items and two does
   not appear in the arithmetic table at all, so it runs in one column. The
   real problem is not the count: the two items are near identical long
   strings differing only in `Level I` and `Level II`.

   THE FIRST BUILD SET A 50ch MEASURE AND IT PRODUCED THE EXACT FAULT IT WAS
   MEANT TO AVOID. Each item wrapped so that `Level` ended line one and `I,`
   began line two, which strands the one word that tells the two entries apart
   and reads as a hyphenation accident. Same class of fault as `CBT-I`
   breaking on Sleep, which Rebecca spotted herself. The element screenshot
   found it; the measurements did not.

   So each item runs on ONE LINE on a desktop. At 17px the longest is about
   700px, which fits inside the measure below at every width from 901 up.
   Below that the two nowrap spans in the markup keep `Neuroacupuncture,
   Level I,` and `Neuro-Acupuncture Institute, 2023` each whole, so a phone
   breaks the line between the two halves rather than inside either.

   THE OTHER LIST ON THIS PAGE HAS SIX ITEMS AND RUNS AS A THREE COLUMN
   CENTRED GRID, on the shared `.cond-list` with no page scoped rule at all.
   In the first build that chapter sat beside a photograph, so the same list
   had to run dotted in one column inside a copy column. Six divides by three,
   so the arithmetic wanted three columns all along and the BLOCK was what
   prevented it. The recut moved the photograph and the list took the setting
   it always wanted. **Proof in both directions, on one page, of the rule that
   the block decides and not the count.** */
.cond-page--about .cond-list--pair{
  max-width: 820px;
  margin-block-start: 28px;
  row-gap: 24px;
}
.cond-page--about .cond-list--pair li{
  font-size: 17px;
  line-height: 1.6;
  color: var(--canyon-sage);
}


/* ---- 6 · two reviews, and NOT the shared strip --------------------------
   `_TEMPLATE/reviews-strip.html` is a two row marquee of fifteen cards. It is
   the right component for a wall and the wrong one for two quotes: at
   `--n: 2` the row loops in seconds and reads as a fault. It is also a `tp-`
   component, and BUILD-STATE is explicit that a page carries exactly one
   system on its body class and borrows no other system's components.

   So this is built page scoped and FROM THE PARTS ALREADY THERE. The star
   artwork is the strip's own inline SVG, copied character for character.
   Every type and colour value below is the strip's own, with one deliberate
   change: the quote runs larger, because it is not inside a 460px card.

   NO CARD, NO BONE PANEL, NO BORDER. The strip's cards carry a Bone ground
   and a Copper top rule because they are moving objects that have to read as
   discrete at speed. Two static quotes do not, and a Bone block is against
   the standing rule on this canvas.

   HEADING CENTRED, QUOTES LEFT ALIGNED IN TWO COLUMNS. Same shape as the
   three up on /neurological-conditions, and for the same reason: centred text
   at a wide measure gives the eye no left edge to return to. The heading
   takes the strip's own 24ch measure. */
.cond-page--about .cond-voices{
  margin-block-start: 118px;
  padding-inline: var(--pad);
  text-align: center;
}

.cond-page--about .cond-voices__h2{
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.16;
  color: var(--canyon-sage);
}

.cond-page--about .cond-voices__pair{
  max-width: 1180px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 92px;
  align-items: start;
  text-align: start;
}

.cond-page--about .cond-voice{ margin: 0; }

.cond-page--about .cond-stars{ display: block; }
.cond-page--about .cond-stars svg{
  display: block;
  block-size: 13px;
  inline-size: auto;
  fill: var(--copper);
}

.cond-page--about .cond-voice blockquote{ margin: 0; padding-block-start: 24px; }
.cond-page--about .cond-voice blockquote p{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(18px, 1.5vw, 21.5px);
  line-height: 1.5;
  color: var(--canyon-sage);
}

.cond-page--about .cond-voice figcaption{
  padding-block-start: 26px;
  font-family: var(--serif-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}


/* ---- 7 · education and credentials · `.cond-research` REUSED ------------
   THE ONE BLOCK ON THIS PAGE WITH NO EQUIVALENT ANYWHERE ON THE SITE, and no
   new component was invented for it. BUILD-STATE Open Items 21 records what
   happens when a session invents a layout instead of solving it inside the
   pattern, and Rebecca's own words on that list are "you are changing the
   desired layout".

   `.cond-research` is the evidence component the four condition pages already
   share, and a credential is structurally a citation: a title, an issuing
   body, a place, a year. `.cond-research__cite` is already a 13.5px Canyon
   Sage line at a 60ch measure with 10px between siblings, centred and quiet,
   which is exactly this. Only four things are added below and every one of
   them is a value the component already uses somewhere.

   The four groups run in the document's order, which is chronological: 2015,
   then the licence, then the two 2023 trainings, then the ongoing line. That
   is a SEQUENCE and not a set, which is why it is not a three up.

   `<cite>` renders italic by default and the research citations on the other
   pages are italic on purpose, which is a citation convention. A credential
   record is not a citation of a published work, so italic comes off here and
   here only.

   NOT A CARD, A TABLE, A BADGE ROW OR A BORDERED PANEL. Every one of those is
   on the rejected list. */
.cond-page--about .cond-cred .cond-research__cite{ font-style: normal; }

/* Vida's name heads the record, in the display face, plainly subordinate to
   the small caps label above it and plainly above the lines below it. */
.cond-page--about .cond-cred__name{
  margin-block-start: 26px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 21px;
  line-height: 1.35;
  color: var(--canyon-sage);
}

/* 46px between groups is `.cond-research__sublabel`'s own gap, and 8px inside
   a group is a hair under the component's own 10px, so a group reads as one
   record before the page reads it as four. */
.cond-page--about .cond-cred__group{ margin-block-start: 46px; }
.cond-page--about .cond-cred__group .cond-research__cite{ margin-block-start: 8px; }

/* TWO TONES, NOT ONE SIZE. The first build gave the title 16px against the
   detail lines' 13.5px and left both in Canyon Sage, and the element
   screenshot showed four groups of near identical centred lines with no
   hierarchy inside any of them. The component itself already carries the
   answer: `.cond-research__body` is the Dry Grass tone and
   `.cond-research__cite` is Canyon Sage, so the block has a two tone
   convention and it was simply not being used. The title keeps Canyon Sage
   and the lines under it take the Dry Grass tone, which is 7.22:1 on this
   canvas and reads clearly at 13.5px. */
.cond-page--about .cond-cred__group .cond-research__cite{ color: var(--dry-grass-t); }

.cond-page--about .cond-cred__title{
  margin-block-start: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--canyon-sage);
}

/* The closing line is the document's own last sentence and it summarises the
   record rather than belonging to the last group, so it gets the gap a group
   gets rather than the gap a line gets. */
.cond-page--about .cond-cred__body{ margin-block-start: 54px; }


/* ---- 8 · mobile · composed, not stacked ---------------------------------
   THE OPENER STACKS IN SOURCE ORDER, which is eyebrow, headline, signature,
   portrait, copy, actions. A reader on a phone meets the words before the
   picture, which is the right order for a page called Meet Vida and is why
   the markup is written that way rather than picture first.

   THE PORTRAIT GOES TO 3/4 ON A PHONE, not the 4/5 it holds on a desktop.
   Full column width at 4/5 is 470px tall on a 390px screen, which pushes the
   first paragraph off the first screen entirely.

   THE TWO ALTERNATING FIGURES CARRY THREE DIFFERENT RATIOS BETWEEN THEM AND
   THE OPENER. The shared `cond-` mobile rule sets every alternating figure to
   4/5 with `!important`, so the second one is overridden here, and
   `!important` is required only because the shared rule carries it.
   Identical stacked figures are the repeating image formula on mobile. */
@media (max-width: 900px){
  /* THE PORTRAIT STAYS BETWEEN THE HEADLINE AND THE COPY ON A PHONE, and that
     needs three lines because the desktop wrapper would otherwise put it last.
     `.cond-open__col` goes `display: contents`, so its three children become
     children of `.cond-open` again, `.cond-open` becomes a column flex
     container, and `order` puts them back in reading order: headline, face,
     copy, actions. A reader on a phone meets `Meet Vida` before the
     photograph, which is the right order for a page with that name. */
  .cond-page--about .cond-open{ display: flex; flex-direction: column; }
  .cond-page--about .cond-open__col{ display: contents; }
  .cond-page--about .cond-open__eyebrow{ order: 1; }
  .cond-page--about .cond-open__title{ order: 2; }
  .cond-page--about .cond-open__portrait{ order: 3; }
  .cond-page--about .cond-open__intro{ order: 4; }
  .cond-page--about .cond-open__actions{ order: 5; }

  .cond-page--about .cond-open__title{ margin-block-start: 0; }
  .cond-page--about .cond-open__signature{ margin-block-start: 16px; font-size: 17.5px; }
  .cond-page--about .cond-open__portrait{ margin-block-start: 30px; }
  .cond-page--about .cond-open__portrait img{ aspect-ratio: 3 / 4; }
  .cond-page--about .cond-open__intro{ margin-block-start: 30px; }
  .cond-page--about .cond-open__intro p{ font-size: 16.5px; }
  .cond-page--about .cond-open__actions{ margin-block-start: 38px; }

  /* THREE RATIOS ON A PHONE TOO: 3/4 in the opener, the shared 4/5 on the
     first row, and a SQUARE on the second. The second row was 16/9 before the
     pictures were enlarged; at that ratio it cuts Vida's legs, which is the
     thing Rebecca asked us to stop doing. `!important` is required only
     because the shared `cond-` mobile rule carries it. */
  .cond-page--about .cond-alt--practice .cond-alt__figure img{
    aspect-ratio: 1 / 1 !important;
  }

  .cond-page--about .cond-list--pair{
    max-width: none;
    margin-block-start: 22px;
  }
  .cond-page--about .cond-list--pair li{ font-size: 16.5px; }
  .cond-page--about .cond-list--pair li + li{ margin-block-start: 22px; }

  .cond-page--about .cond-voices{ margin-block-start: 76px; }
  .cond-page--about .cond-voices__h2{
    max-width: none;
    font-size: clamp(24px, 6.6vw, 30px);
  }
  .cond-page--about .cond-voices__pair{
    margin-block-start: 34px;
    display: block;
  }
  .cond-page--about .cond-voice + .cond-voice{ margin-block-start: 46px; }
  .cond-page--about .cond-voice blockquote p{ font-size: 18px; }

  .cond-page--about .cond-cred__name{ margin-block-start: 22px; font-size: 19px; }
  .cond-page--about .cond-cred__group{ margin-block-start: 38px; }
  .cond-page--about .cond-cred__body{ margin-block-start: 44px; }
}


/* ==========================================================================
   BOOK AN APPOINTMENT · page scoped · body.bk-page
   --------------------------------------------------------------------------
   THE FOURTH PAGE SYSTEM, AND THE FIRST NEW PREFIX SINCE tp-.
   The rule set on /about is that a page outside the three systems goes on
   cond- if its blocks are cond- blocks, and a fourth prefix is built only
   when a page needs a component none of the three has. /book needs one:
   a FULL WIDTH PRICED APPOINTMENT ROW carrying body copy and its own Book
   action, sitting directly on the canvas with no container.

     .tp-facts  has the name, the figure and the action but NO body copy,
                and it is a WHITE PANEL built to overlap a lead photograph.
                Four of them stacked on a light page is the repeating card
                system the brief rules out, and taking the overlap off leaves
                a different component wearing the same name.
     .tx-item--major  has the right ANATOMY exactly: name, standfirst, price
                label, price figure, one Copper action, no container. But it
                is a column in a three up grid, and this page is four stacked
                full width rows carrying two to three paragraphs each.
     .cond-     has no priced row and no repeated action anywhere.

   So bk- borrows the LOOK of .tx-item--major deliberately, one type scale
   and one Book action style, so a visitor arriving from /treatments
   recognises it, without borrowing the class.

   FOUR IDENTICAL ROWS IS THE CORRECT ANSWER HERE and it is not a card
   system. The four appointments are parallel content and the page's whole
   job is comparing them. Varying the rows would make them harder to read
   against each other. What keeps it off the card list is that there is no
   container, no background block and no border box: one hairline and two
   columns on the canvas.

   COLOUR. Four Copper CTA underlines, which the .cta component brings with
   it, and nothing else. The row rules are Sandstone hairlines. Contact Vida
   is cta--quiet on purpose: it is the alternative to booking, not a fifth
   booking, and a fifth Copper mark would compete with the four that matter.
   ========================================================================== */

/* ---- opener -------------------------------------------------------------
   No eyebrow. See the HTML comment. The H1 and the one approved line beneath
   it sit in the same two column relationship the appointment rows use, so
   the page states its own grid before the first appointment arrives. */

.bk-page .bk-open{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: calc(var(--strip) + 46px) var(--pad) 0;
  max-width: 1600px;
  margin-inline: auto;
}

.bk-page .bk-open__h1{
  grid-column: 1 / 8;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--canyon-sage);
}

.bk-page .bk-open__intro{
  grid-column: 8 / 13;
  align-self: end;
  padding-block-end: 10px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--dry-grass-t);
}

/* ---- the four appointments --------------------------------------------- */

.bk-page .bk-list{
  margin-block-start: 96px;
  padding-inline: var(--pad);
  max-width: 1600px;
  margin-inline: auto;
}

.bk-page .bk-appt{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding-block: 54px;
  border-block-start: 1px solid var(--hair-soft);
}

/* The first appointment is the one the page's own closing chapter sends most
   people to. It heads the list rather than being one of four, so it carries
   no rule above it and a little more air. */
.bk-page .bk-appt--lead{
  border-block-start: 0;
  padding-block-start: 0;
}

/* The name and the figure read as ONE identity at the head of the row, and
   they stay together at every width including the phone. Rebecca chose this
   over the alternative, which pushed the figure to the foot of the row so it
   landed on the Book action's line: that made the empty space do work, but it
   broke the column of four prices, and comparing the four prices is what
   somebody choosing an appointment is actually doing. Scanning wins. */
.bk-page .bk-appt__id{ grid-column: 1 / 5; }
.bk-page .bk-appt__body{ grid-column: 6 / 12; }

.bk-page .bk-appt__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.004em;
  color: var(--canyon-sage);
}

.bk-page .bk-appt__fig{
  margin-block-start: 16px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--dry-grass-t);
}

.bk-page .bk-appt__lead{
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--canyon-sage);
}

.bk-page .bk-appt__copy{
  max-width: 64ch;
  margin-block-start: 18px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--dry-grass-t);
}

.bk-page .bk-appt__actions{ margin-block-start: 30px; }
.bk-page .bk-appt__actions .cta{ margin-inline-end: 0; }

/* ---- not sure what to book ---------------------------------------------
   The only chapter on the page whose answer is a person rather than a
   button, and the only one carrying enough copy to hold a photograph.
   The figure takes the four columns the appointment NAMES have been running
   in and the copy takes the six the appointment COPY has been running in, so
   the chapter sits on the grid the page has already established rather than
   introducing a second one. The picture is modest as a result, and it should
   be: it is the only photograph here and its job is warmth, not scale. */

.bk-page .bk-help{
  margin-block-start: 130px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: center;
  max-width: 1600px;
  margin-inline: auto;
}

.bk-page .bk-help__figure{
  grid-column: 1 / 5;
  background: var(--bone);
  overflow: hidden;
}
.bk-page .bk-help__figure picture{ display: contents; }
.bk-page .bk-help__figure img{
  display: block;
  width: 100%;
  aspect-ratio: 0.86;
  object-fit: cover;
}

.bk-page .bk-help__text{ grid-column: 6 / 12; }

.bk-page .bk-help__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(27px, 2.7vw, 39px);
  line-height: 1.18;
  color: var(--canyon-sage);
}

.bk-page .bk-help__copy{
  margin-block-start: 22px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--dry-grass-t);
}

.bk-page .bk-help__actions{ margin-block-start: 34px; }
.bk-page .bk-help__actions .cta{ margin-inline-end: 0; }

/* ---- the last line ------------------------------------------------------
   Approved copy, and it is the last thing the document says. It is a
   reassurance, not a chapter, so it is set quiet and small at the foot of
   main rather than given a block of its own. */

.bk-page .bk-secure{
  margin-block-start: 96px;
  padding-inline: var(--pad);
  max-width: 1600px;
  margin-inline: auto;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--dry-grass-t);
}

/* ---- phone --------------------------------------------------------------
   The two columns become one, but the appointment KEEPS its shape: the name
   and the figure stay together at the top of each row, which is what makes
   the four scannable on a small screen. The photograph goes 4/5, which is the
   tallest window that still holds her whole on a narrow asset. */

@media (max-width: 900px){

  .bk-page .bk-open{ display: block; }
  .bk-page .bk-open__intro{ margin-block-start: 24px; padding-block-end: 0; }

  .bk-page .bk-list{ margin-block-start: 66px; }

  .bk-page .bk-appt{ display: block; padding-block: 40px; }
  .bk-page .bk-appt__fig{ margin-block-start: 12px; }
  .bk-page .bk-appt__body{ margin-block-start: 22px; }
  .bk-page .bk-appt__lead,
  .bk-page .bk-appt__copy{ max-width: none; }

  .bk-page .bk-help{ display: block; margin-block-start: 92px; }
  .bk-page .bk-help__text{ margin-block-start: 34px; }
  .bk-page .bk-help__figure img{ aspect-ratio: 4 / 5; }

  .bk-page .bk-secure{ margin-block-start: 72px; }
}


/* ==========================================================================
   NAVIGATION · the five item nav, 7 September
   --------------------------------------------------------------------------
   Rebecca, 7 September: the top nav, the phone menu and the footer said three
   different things. They now say one:

       Conditions · Treatments · Meet Vida · Book · Contact

   Meet Vida because that is the page's own H1 since her copy change this
   morning. Book because the item carries the Copper underline and is the
   page's primary action, and an action is a verb. Contact because forty four
   links point at that page and the top nav was the only route that did not
   offer it.

   THE FIFTH ITEM DOES NOT FIT AT 900px AND THAT IS ARITHMETIC, NOT TASTE.
   The lockup is 369px wide and ends at 425px. At 901px that leaves 420px for
   the nav. The four item nav measured 410px, so it was already 10px from its
   limit; the five item nav measures 553px and needs 1034px of viewport.

   So the nav alone moves to the phone menu between 901 and 1079. EVERYTHING
   ELSE STILL CHANGES AT 900px. Do not be tempted to move the 900px query
   itself: it carries --pad, --strip, the masthead, the hero and every page's
   mobile composition, and moving it would reflow the entire site to fix a
   navigation bar. This block only hides the nav and shows the toggle.

   The phone menu needs no new rule. It is a fullscreen fixed panel with no
   width dependency, and site.js binds the toggle with no media query at all,
   so it already worked at these widths and was simply never shown.
   ========================================================================== */

/* The items may NEVER be squeezed. .nav is a flex row and its children shrink
   by default, so at 1040 to 1070 "Meet Vida" was being compressed from its
   natural 89px down to 55px rather than the row simply being too wide. It
   measured as one line and looked wrong, which is the sort of fault a width
   number passes and an eye catches. Pinning flex-basis is the fix; the
   breakpoint below is then chosen from the TRUE width, not the squeezed one. */
.nav > *{ flex: 0 0 auto; }
.nav .nav__link,
.nav .nav__trigger{ white-space: nowrap; }

/* 552px of nav plus a 425px lockup plus 56px of padding wants 1033px, and at
   1080 it clears by 46px. Below that, the phone menu. */
@media (min-width: 901px) and (max-width: 1079px){
  .nav{ display: none; }
  .nav__toggle{ display: block; }
  .menu{ display: none !important; }
}


/* ==========================================================================
   CONTACT · page scoped · body.ct-page
   --------------------------------------------------------------------------
   THE FIFTH PAGE SYSTEM, AND THE SECOND NEW PREFIX IN TWO DAYS.

   The rule set on /about is that a page outside the three systems goes on
   cond- if its blocks are cond- blocks, and a new prefix is built only when
   a page needs a component none of the systems has. /about passed that test
   and went on cond-. /book failed it and became bk-.

   /contact fails it harder than /book did. Its central block is a FORM:
   a fieldset, a legend, five labelled controls, a radio group, a textarea
   and a submit button. There is no input, no label, no legend, no textarea
   and no button anywhere in cond-, tx- or tp-. This is the FIRST
   INTERACTIVE COMPONENT ON THE SITE. Everything until now has been type and
   photographs.

   And once the page has its own prefix the opener and the chapters go on it
   too, exactly the way /book put its opener on bk- rather than borrowing
   .cond-open. A page carries one prefix.

   WHAT THE FORM IS MADE OF, AND WHY IT IS NOT A FORM UI KIT.
   Every field is a HAIRLINE, which is the site's own language: every link
   on this site is a hairline underline, .bk-appt is separated by hairlines,
   .tp-mid--split is opened by one. So a field is a line of type sitting on
   a Sandstone hairline, with nothing around it. No boxes, no rounded
   corners, no filled inputs, no floating labels, no placeholder text
   standing in for a label. Take the values out and the form is four
   hairlines and a column of small caps labels, which is the same page the
   rest of the site would draw.

   THE LABELS ARE THE SITE'S SMALL CAPS LABEL DEVICE, the same one carrying
   the eyebrow, the research label, .tp-sub__label and /cupping's lifted
   "Before treatment:". They are 12px against 17px input type, so per the
   typography finding they are made DARKER than what they label rather than
   only smaller: label Canyon Sage, field value Canyon Sage, and the
   hairline beneath in Sandstone.

   COLOUR. ONE Copper mark on the page proper, the hairline over
   "Reach Vida directly". The row rule over the two route columns is a
   Sandstone hairline, the same one .bk-appt uses. Copper otherwise appears
   only where the shared rules already allow it: .cta underlines, hover
   states, the focus ring and the chosen radio, all of which are states.
   That puts /contact level with /cupping, /moxibustion, /gua-sha-tui-na
   and /about as the quietest pages on the site.

   NO BROWSER BLUE ANYWHERE, AND THIS IS THE PAGE WHERE THAT RULE WOULD
   HAVE BROKEN BY ACCIDENT. A form brings four default blues with it: the
   focus ring on every input, on the textarea, on the radios and on the
   button. Every one is overridden below with an explicit Copper
   :focus-visible ring at a 6px offset, plus the underline going Copper and
   2px. The ring is :focus-visible rather than :focus so it appears for the
   keyboard and not for the mouse.
   ========================================================================== */

/* ---- opener -------------------------------------------------------------
   No eyebrow: the H1 already says the word, which is the /book rule and the
   reason /book is the only page on the site with no unapproved extras.
   Deliberately the SAME 1/8 and 8/13 split /book's opener uses. /book and
   /contact are the site's two action pages and they link to each other, so
   a visitor arriving from one should recognise the other's first screen. */

.ct-page .ct-open{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding: calc(var(--strip) + 46px) var(--pad) 0;
  max-width: 1600px;
  margin-inline: auto;
}

.ct-page .ct-open__h1{
  grid-column: 1 / 8;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--canyon-sage);
}

.ct-page .ct-open__intro{
  grid-column: 8 / 13;
  align-self: end;
  padding-block-end: 10px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--dry-grass-t);
}

/* ---- the form, and the page's only photograph --------------------------
   The form takes six columns and the portrait five, with the site's own
   141px gutter between them at 1440. The figure is aligned to the END of
   the row so its base lands on the Send Message button's line: the form is
   the taller element, and letting the quiet gather ABOVE the picture, next
   to the heading and the first two fields, gives the page a real alignment
   at the point where the reader finishes writing.

   The figure takes a FIXED 3/4 and not --fill. --fill would hand the
   picture's shape to the form, and the form's height moves with the number
   of lines a label wraps to. 3/4 with the 1600px block cap is bounded
   instead: the figure stops widening at 604px, so the row tops out rather
   than growing with the viewport. That is the same call /cupping's marks
   row, /moxibustion's research row and /about's practice row all made. */

.ct-page .ct-send{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  align-items: end;
  max-width: 1600px;
  margin-inline: auto;
}

.ct-page .ct-send__form{ grid-column: 1 / 7; }

.ct-page .ct-send__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(27px, 2.7vw, 39px);
  line-height: 1.18;
  color: var(--canyon-sage);
}

.ct-page .ct-send__figure{
  grid-column: 8 / 13;
  background: var(--bone);
  overflow: hidden;
}
.ct-page .ct-send__figure img{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---- the fields ---------------------------------------------------------
   A field is a label and a line of type on a hairline. Nothing else. */

.ct-page .ct-form{ margin-block-start: 46px; }

/* The honeypot. Netlify reads it whether or not the build system saw the
   form, and it is out of the tab order and out of the accessibility tree. */
.ct-page .ct-hp{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.ct-page .ct-field{
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  margin-block-start: 34px;
}
/* The honeypot is the form's first child, so the first REAL field is the one
   after it. :first-of-type would be wrong here: the fieldset is a fieldset
   and would match it as the first of ITS type, and lose its own top margin. */
.ct-page .ct-hp + .ct-field{ margin-block-start: 0; }

.ct-page .ct-label{
  display: block;
  padding: 0;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-inline-end: -0.14em;
  text-transform: uppercase;
  color: var(--canyon-sage);
}

.ct-page .ct-input{
  display: block;
  width: 100%;
  margin-block-start: 6px;
  padding: 10px 0 12px;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--hair);
  border-radius: 0;
  font-family: var(--serif-text);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--canyon-sage);
  transition: border-color 220ms ease;
}
.ct-page .ct-input:hover{ border-block-end-color: var(--sandstone); }

.ct-page .ct-input--area{
  resize: vertical;
  min-height: 148px;
}

/* THE FOCUS RING. Copper, never the browser's blue, on every control. */
.ct-page .ct-input:focus{
  outline: none;
  border-block-end: 2px solid var(--copper);
  padding-block-end: 11px;
}
.ct-page .ct-input:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 6px;
}

/* ---- what is this about -------------------------------------------------
   Two radios rather than a select. A select hides the second option behind
   a tap, and a clinician arriving on the "Contact Vida About a Referral"
   link should be able to SEE that this page expects them. The native input
   stays in the DOM and stays focusable; the ring is drawn on the mark. */

.ct-page .ct-choice{
  margin-block-start: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 44px;
}

.ct-page .ct-opt{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  cursor: pointer;
}

.ct-page .ct-opt input{
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}

.ct-page .ct-opt__mark{
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border: 1px solid var(--sandstone);
  border-radius: 50%;
  transition: border-color 220ms ease;
}
.ct-page .ct-opt__mark::after{
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin: 3px;
  border-radius: 50%;
  background: var(--copper);
  opacity: 0;
  transition: opacity 220ms ease;
}

.ct-page .ct-opt__text{
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--dry-grass-t);
  transition: color 220ms ease;
}

.ct-page .ct-opt:hover .ct-opt__mark{ border-color: var(--copper); }
.ct-page .ct-opt:hover .ct-opt__text{ color: var(--canyon-sage); }

.ct-page .ct-opt input:checked ~ .ct-opt__mark{ border-color: var(--copper); }
.ct-page .ct-opt input:checked ~ .ct-opt__mark::after{ opacity: 1; }
.ct-page .ct-opt input:checked ~ .ct-opt__text{ color: var(--canyon-sage); }

.ct-page .ct-opt input:focus-visible ~ .ct-opt__mark{
  outline: 2px solid var(--copper);
  outline-offset: 5px;
}

/* ---- the button ---------------------------------------------------------
   It is a .cta and that is genuinely the right thing here. The site has
   exactly one action style, an uppercase Newsreader line with a Copper
   underline, and it is the style every other action on every other page
   already wears. Giving this one a filled rectangle would put the first
   solid colour UI block on the site on the page that needs it least.
   All this rule does is take the browser's button chrome off. */

.ct-page .ct-form__actions{ margin-block-start: 40px; }

.ct-page .ct-send__btn{
  appearance: none;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--copper);
  border-radius: 0;
  padding: 0 0 7px;
  margin-inline-end: 0;
  cursor: pointer;
}
.ct-page .ct-send__btn:focus{ outline: none; }
.ct-page .ct-send__btn:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 6px;
}

/* .cta HAS NO FOCUS STYLE ANYWHERE IN THE SHARED LAYER, AND THIS IS THE
   FIRST PAGE TO NOTICE. Tabbing to "Book a First Visit" gave Chromium's own
   default ring, rgb(16, 16, 16) at 1px. It is not blue, which is why the
   site's "no browser blue" check has passed on fourteen pages, but it is
   still the browser drawing rather than the site. Every .cta on every page
   has it.

   FIXED PAGE SCOPED HERE, NOT PROMOTED. This is the one page where a focus
   ring is load bearing, so it earns the rule; changing .cta itself would
   move a component on all fifteen pages in a build that was asked for one.
   CANDIDATE FOR PROMOTION into the shared layer alongside .cta, in one pass,
   at Rebecca's word. See Open Items 27. */
.ct-page .cta:focus{ outline: none; color: var(--copper); }
.ct-page .cta:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 6px;
}

/* ---- the two arrivals ---------------------------------------------------
   The one symmetric block on the page, and symmetry is right here for the
   same reason four identical rows was right on /book: these are parallel
   chapters, one for each audience the site's own links send to this page,
   and setting them differently would say one matters more than the other.
   No container and no card. One Sandstone hairline over the pair, the same
   hairline .bk-appt is separated by. */

.ct-page .ct-routes{
  margin-block-start: 130px;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  max-width: 1600px;
  margin-inline: auto;
}

.ct-page .ct-routes::before{
  content: "";
  grid-column: 1 / 13;
  height: 1px;
  background: var(--hair-soft);
  margin-block-end: 54px;
}

.ct-page .ct-route:first-of-type{ grid-column: 1 / 6; }
.ct-page .ct-route:last-of-type{ grid-column: 7 / 12; }

.ct-page .ct-route__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.004em;
  color: var(--canyon-sage);
}

.ct-page .ct-route__copy{
  margin-block-start: 22px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--dry-grass-t);
}

.ct-page .ct-route__actions{ margin-block-start: 32px; }
.ct-page .ct-route__actions .cta{ margin-inline-end: 0; }

/* ---- reach Vida directly ------------------------------------------------
   The two facts somebody is scanning for. Set at display scale because
   that is what they are for, and in Canyon Sage because Copper is never
   display type. The Copper hairline above is the ONE Copper mark on the
   page proper. Left aligned and narrow, so the page ends quietly rather
   than on a centred flourish. */

.ct-page .ct-reach{
  margin-block-start: 124px;
  padding-inline: var(--pad);
  max-width: 1600px;
  margin-inline: auto;
}

.ct-page .ct-reach__h2{
  position: relative;
  padding-block-start: 40px;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.14;
  color: var(--canyon-sage);
}
.ct-page .ct-reach__h2::before{
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 46px; height: 1px;
  background: var(--copper);
}

.ct-page .ct-reach__line{ margin-block-start: 22px; }

.ct-page .ct-reach__link{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  color: var(--canyon-sage);
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 3px;
  transition: color 220ms ease, border-color 220ms ease;
}
.ct-page .ct-reach__link:hover{ color: var(--copper); border-block-end-color: var(--copper); }
.ct-page .ct-reach__link:focus{ outline: none; color: var(--copper); border-block-end-color: var(--copper); }
.ct-page .ct-reach__link:focus-visible{ outline: 2px solid var(--copper); outline-offset: 6px; }

/* ---- phone --------------------------------------------------------------
   The form runs full width and the portrait follows it rather than leading,
   because somebody who has just tapped "Talk With Vida" on a phone wants
   the form, not a screen of photograph before it. The picture then sits
   between the form and the two route chapters and does the job of a breath.

   THE TWO ROUTE COLUMNS STACK, and they keep the hairline over the pair
   rather than gaining one each: two hairlines on a phone would read as two
   sections rather than as one pair.

   TOUCH TARGETS. The inputs come to 48px from their own padding. The radio
   labels come to 48px from theirs. The button is the one that does not:
   .cta is 13px type on a 7px underline, about 25px, so it takes explicit
   padding here and nowhere else. */

/* ---- 901 to 1079 · the form section stacks EARLY, and that is not a guess
   The two columns measure well at 1440 and badly at 1024: five columns of a
   1024 viewport leaves the figure 364px wide against a 766px form, so the
   picture floats low with about 280px of empty canvas over it. The numbers
   passed that; the element screenshot is what showed it.

   1080 IS NOT AN INVENTED BREAKPOINT. The navigation harmonisation of
   7 September already decided that this site stops being a desktop below
   1080: between 901 and 1079 the five item nav is hidden and the phone menu
   is shown. A page showing a hamburger has no business holding a two column
   form beside a portrait, so /contact stacks where the navigation stacks.
   The 900px query is untouched, exactly as that block warns.

   THE STACKED FIGURE IS CAPPED AT 520px AND LEFT ALIGNED. Full width at
   1024 would be a 912px wide portrait standing 1216px tall, which is a
   different photograph. The cap keeps it the modest picture it is meant to
   be, and it stops binding below a 572px viewport, so the phone simply
   runs it full width with no second rule. */

@media (max-width: 1079px){
  .ct-page .ct-send{ display: block; align-items: initial; }
  /* The fields keep a readable measure once they are no longer in a column.
     Left at full width a name field runs 912px at 1024, which is a longer
     line than anything else on the site. */
  .ct-page .ct-send__form{ max-width: 620px; }
  .ct-page .ct-send__figure{ margin-block-start: 64px; max-width: 520px; }
}

@media (max-width: 900px){

  .ct-page .ct-open{ display: block; }
  .ct-page .ct-open__intro{ margin-block-start: 24px; padding-block-end: 0; }

  .ct-page .ct-send{ margin-block-start: 72px; }

  .ct-page .ct-form{ margin-block-start: 36px; }
  .ct-page .ct-field{ margin-block-start: 30px; }
  .ct-page .ct-choice{ gap: 0 36px; }

  .ct-page .ct-send__btn{
    display: inline-block;
    padding-block: 16px 13px;
  }

  .ct-page .ct-routes{ display: block; margin-block-start: 88px; }
  .ct-page .ct-routes::before{ display: block; margin-block-end: 40px; }
  .ct-page .ct-route + .ct-route{ margin-block-start: 56px; }

  .ct-page .ct-reach{ margin-block-start: 88px; }
  .ct-page .ct-reach__h2{ padding-block-start: 34px; }
}


/* ==========================================================================
   ACUPUNCTURE FOR TREATMENT CENTERS AND RECOVERY SUPPORT · page scoped
   /treatment-centers, built 8 September 2026 on the `cond-` system.
   Body carries `class="page cond-page cond-page--wide cond-page--centers"`.

   THE SYSTEM DECISION, WHICH IS THE FOURTH RUN OF THE /about TEST.
   A page outside the three original systems goes on `cond-` if its blocks
   are `cond-` blocks. Every block on this page is one: an opener with a
   headline and a standfirst, centred chapters carrying lists, a chapter
   beside a photograph, a caution with a Copper hairline and a crisis line,
   a research chapter with citations, a record set as a citation list the
   way /about sets its credentials, and the shared close. Nothing here needs
   a component `cond-` does not have. The two things that looked like they
   might — the route chooser near the top and the two way close — are both a
   grid of two short labelled blocks with a link, which is a page scoped
   addition and not a fourth prefix. So `cond-`, and the reasoning is
   written down rather than asked.

   `/neuroacupuncture` has `.tp-signposts`, which is the same idea as the
   route chooser. It is a `tp-` component and this is not a `tp-` page, so
   nothing was pasted across. The page scoped equivalent is section 2 below.

   WHY THIS BLOCK IS AT THE END OF THE FILE. Appending is the only way to
   keep the "shared lines are byte identical to the backup" check
   meaningful, and that check is what proves the fifteen existing pages did
   not move.

   1,258 body words, the second longest page on the site behind
   /neuroacupuncture at 1,236 and ahead of Pain and Injury at 1,072.

   THE WEIGHTING IS THE WHOLE DESIGN PROBLEM AND IT IS SOLVED BY SETTING,
   NOT BY CUTTING. The centers half is 524 words and the individuals half
   335, which is 61 to 39 rather than the 90 to 10 Rebecca's framing
   implied. Not one approved word is cut. Instead the centers half carries
   the page's structural variety — a left aligned qualification chapter, the
   named facilities record, four different settings across five chapters —
   and the individuals half runs quieter: four centred chapters, one of them
   a caution, and a single patient voice. The centers half reads as the
   page's spine because it is built like one.

   "EXTREMELY PROFESSIONAL" IS ANSWERED WITH RESTRAINT, NOT WITH WEIGHT.
   The reader is a clinical director deciding whether to bring an outside
   practitioner into a facility. What earns that reader's trust on this page
   is scope, boundaries and an honest account of the evidence, all three of
   which the approved copy already does exceptionally well. So: no cards, no
   badges, no logo wall, no table, no bordered panel, no icons, no filled
   colour blocks. The named facilities get scale and quiet. The sentence
   about what Vida does NOT do gets its own air. The research chapter, whose
   own approved prose says the evidence does not support the service being
   sold, is set as a real chapter rather than as small print.

   TWO Copper marks on the whole page: the caution hairline and the 911
   link. The three division rules are Sandstone. `#FFFFFF` appears nowhere.

   NO EYEBROW, ON /book's PRECEDENT. The approved H1 is `Acupuncture for
   Treatment Centers and Recovery Support`, and an eyebrow reading either
   `Treatment Centers` or `Addiction and Recovery Support` above it repeats
   words the headline already carries twenty pixels below. /book found the
   same fault with `Book` over `Book an Appointment` and dropped it. What it
   buys here is the same thing it bought there: the page adds no unapproved
   word of its own.
   ========================================================================== */


/* ---- 0 · the page stops growing past 1600px, built in from line one -----
   Sixth condition page to scope this separately. The cap goes on
   `.cond-alt` only and never on `.cond-open`, which is the correction
   Rebecca forced on /neurological-conditions. See BUILD-STATE Open Items
   27: this is overdue for promotion into the shared `cond-` layer. */

.cond-page--centers .cond-alt{
  max-width: 1600px;
  margin-inline: auto;
}

/* A media block that matches its copy exactly. Both picture rows on this
   page use it, so both figures are the same height as the copy beside them
   at every desktop width and neither can drift as the window widens. */
@media (min-width: 901px){
  .cond-page--centers .cond-alt--fill{ align-items: stretch; }
  .cond-page--centers .cond-alt--fill .cond-alt__figure{
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .cond-page--centers .cond-alt--fill .cond-alt__figure > img,
  .cond-page--centers .cond-alt--fill .cond-alt__figure > .tc-slot{
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ---- 1 · the opener -----------------------------------------------------
   The approved H1 is fifty two characters, which is the longest on the
   site. At the shared `clamp(38px, 4.6vw, 68px)` it runs to five lines in
   its seven column measure and reads as a poster rather than as a page
   title. /about took the same lever for the opposite reason, a two word
   headline in a narrow column. Here it is a long headline in a wide one.

   THE OPENER CARRIES NO ACTION AND THAT IS THE DOCUMENT'S OWN DOING. The
   approved copy puts both actions in the route chooser directly beneath,
   one per audience, which is a better answer than a pair of general buttons
   above it. `/moxibustion` established the rule: read the document rather
   than copying the sibling page. */

.cond-page--centers .cond-open__h1{
  grid-column: 1 / 8;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.12;
}

.cond-page--centers .cond-open__intro{ grid-column: 9 / 13; }


/* ---- 2 · the route chooser ----------------------------------------------
   Two audiences, two short labelled blocks, one action each, under one
   Sandstone hairline. This is the page scoped equivalent of
   `.tp-signposts`. Not one `tp-` class is used and none is promoted.

   THE HEADING IS DELIBERATELY SMALL. `Choose the information that fits you`
   is an instruction, not a part title, and the two part titles below it run
   at up to 46px. Setting this at 21px is what stops the page having three
   headings of the same weight in its first screen.

   THE RULE ABOVE IT IS THE SOFT HAIRLINE, not the part rule, for the same
   reason: it separates the chooser from the opener without announcing a
   division of the page. */

.cond-page--centers .tc-choose{
  margin-block-start: 92px;
  padding-inline: var(--pad);
}
.cond-page--centers .tc-choose__inner{
  max-width: 1600px;
  margin-inline: auto;
}
.cond-page--centers .tc-choose__rule{
  border: 0;
  border-block-start: 1px solid var(--hair-soft);
  margin: 0 0 30px;
}
.cond-page--centers .tc-choose__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 21px;
  line-height: 1.3;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-choose__pair{
  margin-block-start: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 96px;
  align-items: start;
}

/* A small caps label that is DARKER than the sentence it labels, not only
   smaller. That is the /cupping and /moxibustion finding: at a small size,
   wide letterspacing is itself what makes a line read light, so the tone
   has to do the work the size cannot. */
.cond-page--centers .tc-route__label{
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-route__body{
  margin-block-start: 18px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}
.cond-page--centers .tc-route__action{ margin-block-start: 26px; }


/* ---- 3 · a part title ---------------------------------------------------
   The document carries four Heading1 levels after the chooser. Two of them,
   `For treatment centers` and `For individuals`, are audience divisions and
   everything under them belongs to that audience. The other two, the
   research chapter and the close, apply to both readers and are set as
   chapters instead. Giving all four the same rule would put four full width
   hairlines on a page that is supposed to be quiet.

   THE COMPOSITION IS VIDA'S OWN OPENER, REUSED. Heading on the left, the
   part's opening sentence on the right, under a full width rule. That is
   the asymmetric left aligned voice the site opens every page with, which
   is why the two part titles read as page divisions rather than as two more
   chapters in a centred sequence.

   THE RULE IS SANDSTONE, NOT COPPER. A Copper hairline on this site marks
   safety copy and nothing else. Two of them here would have halved the
   weight of the one that matters. */

.cond-page--centers .tc-part{
  margin-block-start: 118px;
  padding-inline: var(--pad);
}
.cond-page--centers .tc-part__inner{
  max-width: 1600px;
  margin-inline: auto;
}
.cond-page--centers .tc-part__rule{
  border: 0;
  border-block-start: 1px solid var(--hair);
  margin: 0 0 36px;
}
.cond-page--centers .tc-part__h2{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-part__intro{
  margin-block-start: 24px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}

@media (min-width: 901px){
  .cond-page--centers .tc-part__inner{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap);
    align-items: start;
  }
  .cond-page--centers .tc-part__rule{ grid-column: 1 / -1; }
  .cond-page--centers .tc-part__h2{ grid-column: 1 / 6; }
  .cond-page--centers .tc-part__intro{
    grid-column: 7 / 12;
    margin-block-start: 8px;
  }
}


/* ---- 4 · a line that introduces a list is not a paragraph ---------------
   Four chapters on this page end with a one line lead-in before their list.
   At the standard 28px those lines float between the paragraph above and
   the list below and read as their own thought. Same modifier
   /neurological-conditions and /about both carry. */

.cond-page--centers .cond-mid__intro--leadin{ margin-block-start: 14px; }


/* ---- 5 · the sentence that says what Vida does not do -------------------
   `Vida does not manage addiction medications, direct medication changes or
   provide medical withdrawal management.`

   THIS IS THE MOST IMPORTANT LINE ON THE PAGE FOR ITS PRIMARY READER and it
   is the one thing on it that must not read as small print. A clinical
   director is scanning for scope, boundaries, and whether the practitioner
   knows what she cannot do. So it gets air and a step up in size and tone,
   and nothing else: no rule, no panel, no italics, no pull quote. Set as a
   quotation it would read as marketing. Set with quiet around it, it reads
   as a professional stating a limit, which is what it is. */

.cond-page--centers .tc-bound{
  max-width: 48ch;
  margin: 58px auto 0;
  font-size: 19px;
  line-height: 1.66;
  color: var(--canyon-sage);
}


/* ---- 6 · the qualification chapter --------------------------------------
   `Is VIDA a good fit for your program?` is the most business to business
   thing on this site: five conditions, all long, and a closing paragraph
   about what a first conversation covers.

   IT IS LEFT ALIGNED AND IT SITS BETWEEN TWO CENTRED CHAPTERS, which is how
   it is separated from both without a mark being added. That is the rule
   /moxibustion established and /about and /gua-sha-tui-na both confirmed:
   where two text chapters touch, change the setting.

   THE LIST RUNS IN ONE COLUMN, WITH DOTS. Five is prime and every item runs
   long, so the arithmetic and the eye agree. The dot is the site's marker
   for a left aligned list inside a copy column, which is exactly what this
   is. It is not the centred `.cond-list` grid and it must not become one.

   NO HAIRLINE HERE. A `--split` chapter on a `tp-` page carries a full
   width rule under its heading. On this page that would have been a third
   Sandstone rule competing with the two part titles, so the left edge and
   the two columns do the work on their own. */

.cond-page--centers .tc-fit{
  margin-block-start: 104px;
  padding-inline: var(--pad);
}
.cond-page--centers .tc-fit__inner{
  max-width: 1600px;
  margin-inline: auto;
}
.cond-page--centers .tc-fit__h2{
  max-width: 22ch;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 35px);
  line-height: 1.18;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-fit__cols{ margin-block-start: 34px; }

.cond-page--centers .tc-fit__lead{
  font-size: 17px;
  line-height: 1.72;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-fit__list{ margin-block-start: 22px; }
.cond-page--centers .tc-fit__list li{
  position: relative;
  padding-inline-start: 22px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-fit__list li + li{ margin-block-start: 16px; }
.cond-page--centers .tc-fit__list li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sandstone);
}
.cond-page--centers .tc-fit__note{
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}

@media (min-width: 901px){
  .cond-page--centers .tc-fit__cols{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--col-gap);
    align-items: start;
  }
  .cond-page--centers .tc-fit__col--list{ grid-column: 1 / 7; }
  .cond-page--centers .tc-fit__col--note{ grid-column: 8 / 12; }
  .cond-page--centers .tc-fit__note{ margin-block-start: 6px; }
}


/* ---- 7 · the named facilities record ------------------------------------
   THE CENTRE OF GRAVITY OF THE WHOLE PAGE. Three current facilities and
   four previous ones, by name. Nothing else on this page persuades a
   clinical director the way seven named programmes do.

   IT REUSES `.cond-research`, WHICH IS THE /about MOVE. A credential is
   structurally a citation, and so is a facility: a name, and the relation
   in which it stands. `.cond-research` is already a centred, quiet,
   unruled evidence block with a two tone convention, and this is that.

   IT IS NOT A CARD, A TABLE, A BADGE ROW, A LOGO WALL OR A BORDERED PANEL.
   Every one of those is on BUILD-STATE's tried and rejected list, and a
   logo wall would be the single fastest way to make this page look like the
   generic wellness site the brief rules out.

   WHERE IT DEPARTS FROM /about IS SCALE, AND DELIBERATELY. /about sets
   seventeen credential lines at the component's own 13.5px because there
   are seventeen of them. There are seven names here and they are the
   argument, so they run at 20px in the display face with real space between
   them. Quiet is not the same as small.

   BOTH GROUPS RUN AS ONE CENTRED COLUMN, ONE NAME PER LINE, even though
   three and four both divide into columns. They are a record, not a list.
   Setting seven programme names as two little grids would read as a
   directory. */

.cond-page--centers .tc-record{ margin-block-start: 108px; }

.cond-page--centers .tc-record__h2{
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 35px);
  line-height: 1.18;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-record .cond-research__body{ margin-block-start: 26px; }

.cond-page--centers .tc-record__group{ margin-block-start: 52px; }

/* The two tone convention the component already carries: the lead-in takes
   the Dry Grass tone and the names keep Canyon Sage. */
.cond-page--centers .tc-record__lead{
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}
.cond-page--centers .tc-record__names{ margin-block-start: 22px; }
.cond-page--centers .tc-record__names li{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 20px;
  line-height: 1.5;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-record__names li + li{ margin-block-start: 10px; }

.cond-page--centers .tc-record__close{ margin-block-start: 66px; }
.cond-page--centers .tc-record__action{ margin-block-start: 44px; }

/* An alternating block has never had to hold a call to action on a
   condition page except on /neurological-conditions, whose rule is scoped
   to that page. The approved copy puts both actions at the foot of
   `Continuing acupuncture after treatment`, so the copy column needs the
   same space under its last paragraph that a centred chapter gives. */
.cond-page--centers .cond-alt__actions{ margin-block-start: 34px; }


/* ---- 8 · the caution, which carries no heading --------------------------
   THE APPROVED COPY WRITES NO HEADING FOR THIS BLOCK, so none is invented.
   `.cond-caution` normally runs rule, heading, body. Here it runs rule,
   body, crisis line, and the body has to close the gap the missing heading
   leaves.

   IT SITS INSIDE THE INDIVIDUALS HALF, where the document puts it, directly
   under the alcohol chapter it belongs to. It is not moved to the foot of
   the page and it is not turned into a site wide banner.

   A COPPER HAIRLINE ABOVE IT IS THE ENTIRE TREATMENT, and the 911 link is
   the site's own Copper crisis link, the same as the 911 and 988 links
   elsewhere. Those two are the only Copper marks on the page.

   `Once medical safety has been addressed...` is the approved sentence that
   resumes the chapter after the warning. It is set quietly and close, so it
   reads as the end of the alcohol chapter rather than as a new one. */

/* Closer than the shared 104px, because this is a coda to the alcohol
   chapter directly above it and not a chapter of its own. Same lever
   /neurological-conditions uses for its evidence boundary. */
.cond-page--centers .tc-caution{ margin-block-start: 76px; }
.cond-page--centers .tc-caution .cond-caution__rule{ margin-block-end: 30px; }
.cond-page--centers .tc-caution .cond-caution__body{ margin-block-start: 0; }

.cond-page--centers .tc-resume{
  margin-block-start: 44px;
  padding-inline: var(--pad);
  text-align: center;
}
.cond-page--centers .tc-resume p{
  max-width: 58ch;
  margin-inline: auto;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}


/* ---- 9 · one patient voice ----------------------------------------------
   ONE quote, not the shared reviews strip and not /about's two column pair.
   The strip is a fifteen card marquee and a `tp-` component; /about's pair
   is built for two. This is one, so it runs as one centred column.

   NO HEADING. /about carries `What patients say about working with Vida`
   because it sets two quotes as a section. A single quote with stars and a
   name needs no announcement, and leaving it off keeps this page at zero
   unapproved words of its own.

   THE STAR ARTWORK IS `_TEMPLATE/reviews-strip.html`'s OWN INLINE SVG,
   copied character for character, and every type and colour value below is
   /about's. No card, no Bone panel, no border, no marquee.

   WHERE IT SITS IS A DESIGN DECISION AND IT IS THE PAGE'S SHARPEST ONE. It
   closes the individuals half and the research chapter follows it
   immediately, so a reader meets one person's account and then, in the very
   next breath, the approved sentence saying the research is mixed. That
   sequence is the register a clinical director trusts. Anywhere in the
   centers half it would have read as marketing sitting next to the
   facilities record, which is the real evidence up there. */

.cond-page--centers .tc-voice{
  margin-block-start: 96px;
  padding-inline: var(--pad);
  text-align: center;
}
.cond-page--centers .tc-voice figure{ margin: 0; }
.cond-page--centers .tc-stars{ display: block; }
.cond-page--centers .tc-stars svg{
  width: 87px;
  height: 15px;
  margin-inline: auto;
  fill: var(--copper);
}
.cond-page--centers .tc-voice blockquote{ margin: 0; padding-block-start: 24px; }
.cond-page--centers .tc-voice blockquote p{
  max-width: 44ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 22px;
  line-height: 1.52;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-voice figcaption{
  margin-block-start: 22px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}


/* ---- 10 · the research chapter, set as a chapter ------------------------
   UNLIKE EVERY OTHER PAGE ON THIS SITE, THIS PAGE'S OWN APPROVED PROSE SAYS
   THE EVIDENCE DOES NOT SUPPORT THE SERVICE BEING SOLD. `Research on
   acupuncture in addiction treatment is mixed. It does not support
   presenting acupuncture as a treatment for substance use outcomes.`

   That is the page's biggest credibility asset with a clinical reader, so
   it gets a real chapter heading at the page's own chapter scale rather
   than `.cond-research__label`'s 11px small caps. Small print is precisely
   what a limit must never look like.

   THE SUBLABEL IS BUMPED TO 13px IN CANYON SAGE. At the shared 11px in the
   Dry Grass tone it is smaller AND lighter than the 16px body directly
   above it, which is the fault Rebecca reported on /neuroacupuncture: a
   label that reads as a caption. Bigger and darker fixes it, and there is
   no weight left to give at 500. */

.cond-page--centers .tc-research{ margin-block-start: 108px; }
.cond-page--centers .tc-research__h2{
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 35px);
  line-height: 1.18;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-research .cond-research__body{ margin-block-start: 26px; }
.cond-page--centers .tc-research .cond-research__body + .cond-research__body{
  margin-block-start: 20px;
}
.cond-page--centers .tc-research .cond-research__sublabel{
  margin-block-start: 54px;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--canyon-sage);
}


/* ---- 11 · the close · two ways to work with VIDA ------------------------
   The same anatomy as the route chooser at the top, and deliberately not
   the same setting. The chooser is an instruction in the first screen, so
   it runs at 21px with small caps labels. This is the page's last word, so
   it runs under the shared `.close__h2` at up to 47px with display headings
   and the large action style.

   Two blocks, left aligned inside a centred section, because a reader
   comparing two routes needs a left edge to return to. That is the same
   reasoning as the three up and as /book's price column. */

/* The shared close heading runs at a 20ch measure, which is right for
   `Meet Vida` and for `Ready when you are`. `Two ways to work with VIDA` is
   twenty six characters, so at 20ch it wraps and strands `VIDA` alone on a
   second line. A widow on the page's last heading is the kind of thing
   Rebecca spots, and 26ch holds it on one line from 1024 up. */
.cond-page--centers .close__h2{ max-width: 26ch; }

.cond-page--centers .tc-close__pair{
  max-width: 1000px;
  margin: 54px auto 0;
  text-align: start;
}
.cond-page--centers .tc-close__label{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 21px;
  line-height: 1.3;
  color: var(--canyon-sage);
}
.cond-page--centers .tc-close__body{
  margin-block-start: 16px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}
.cond-page--centers .tc-close__action{ margin-block-start: 26px; }

@media (min-width: 901px){
  .cond-page--centers .tc-close__pair{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 88px;
    align-items: start;
  }
}


/* ---- 12 · a reserved photography slot -----------------------------------
   THIS IS SCAFFOLDING, NOT DESIGN, AND IT COMES OUT THE MOMENT FRAMES
   EXIST. `PHOTOGRAPHY/Approved Pages/Treatment Centers/` and `Recovery/`
   are both empty, and nothing anywhere in the project shows a treatment
   centre, a group room, auricular acupuncture, a needle in an ear, a group
   treatment, or more than one patient in a frame. So the page's most
   illustrable idea cannot be illustrated from what exists.

   Rebecca's instruction, 8 September: "Since no images are available yet,
   we will use placeholders."

   IT IS NOT AN `<img>`, so the page ships with zero broken images, which is
   the /neurological-conditions rule met a different way. Bone ground, one
   soft hairline, and a small caps line naming the frame that belongs there.
   Swapping in a real photograph is a markup change and no CSS pass: replace
   the `.tc-slot` div with the `<img>`, cut to the slot's measured ratio. */

.cond-page--centers .tc-slot{
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 320px;
  padding: 32px;
  background: var(--bone);
  box-shadow: inset 0 0 0 1px var(--hair-soft);
  text-align: center;
}
.cond-page--centers .tc-slot span{
  max-width: 30ch;
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 2;
  color: var(--dry-grass-t);
}


/* ---- 13 · mobile · composed for the screen ------------------------------
   The two part titles stack heading over sentence and keep their rule. The
   chooser and the close stack their two blocks with real space between
   them, because two routes read as a decision and a decision needs a gap.
   The qualification chapter loses its two columns and keeps its dots and
   its left edge, which is the whole point of it. The facilities record
   keeps its scale: seven names at 20px is still readable on a phone and
   they are what a reader came for. */

@media (max-width: 900px){
  .cond-page--centers .cond-open__h1{ font-size: clamp(28px, 7.6vw, 38px); }

  .cond-page--centers .tc-choose{ margin-block-start: 62px; }
  .cond-page--centers .tc-choose__rule{ margin-block-end: 24px; }
  .cond-page--centers .tc-choose__h2{ font-size: 19px; }
  .cond-page--centers .tc-choose__pair{
    margin-block-start: 32px;
    display: block;
  }
  .cond-page--centers .tc-route + .tc-route{ margin-block-start: 46px; }
  .cond-page--centers .tc-route__body{ max-width: none; }

  .cond-page--centers .tc-part{ margin-block-start: 78px; }
  .cond-page--centers .tc-part__rule{ margin-block-end: 26px; }
  .cond-page--centers .tc-part__h2{ font-size: clamp(27px, 7.2vw, 35px); }
  .cond-page--centers .tc-part__intro{ margin-block-start: 20px; font-size: 16.5px; }

  .cond-page--centers .tc-bound{
    max-width: none;
    margin-block-start: 40px;
    font-size: 17.5px;
  }

  .cond-page--centers .tc-fit{ margin-block-start: 72px; }
  .cond-page--centers .tc-fit__h2{ max-width: none; font-size: clamp(25px, 6.6vw, 32px); }
  .cond-page--centers .tc-fit__cols{ margin-block-start: 26px; }
  .cond-page--centers .tc-fit__note{ margin-block-start: 34px; }

  .cond-page--centers .tc-record{ margin-block-start: 72px; }
  .cond-page--centers .tc-record__h2{ max-width: none; }
  .cond-page--centers .tc-record__group{ margin-block-start: 42px; }
  .cond-page--centers .tc-record__names{ margin-block-start: 18px; }
  .cond-page--centers .tc-record__names li{ font-size: 19px; }
  .cond-page--centers .tc-record__close{ margin-block-start: 42px; }
  .cond-page--centers .tc-record__action{ margin-block-start: 34px; }

  .cond-page--centers .tc-caution{ margin-block-start: 52px; }
  .cond-page--centers .tc-resume{ margin-block-start: 34px; }
  .cond-page--centers .cond-alt__actions{ margin-block-start: 28px; }

  .cond-page--centers .tc-voice{ margin-block-start: 68px; }
  .cond-page--centers .tc-voice blockquote p{ max-width: none; font-size: 20px; }

  .cond-page--centers .tc-research{ margin-block-start: 72px; }
  .cond-page--centers .tc-research__h2{ max-width: none; }
  .cond-page--centers .tc-research .cond-research__sublabel{ margin-block-start: 42px; }

  .cond-page--centers .tc-close__pair{
    max-width: none;
    margin-block-start: 40px;
    display: block;
  }
  .cond-page--centers .tc-close__col + .tc-close__col{ margin-block-start: 48px; }
  .cond-page--centers .tc-close__action .cta{ margin-inline: 0; }

  /* Stacked, the slot takes the same 4/5 the shared mobile rule gives a real
     alternating figure, so the phone composition is the one a photograph
     will actually land in. Without it a full width slot on a tablet comes
     out at 2.75:1, which is a letterbox nothing will ever be cut to. */
  .cond-page--centers .tc-slot{
    min-block-size: 0;
    aspect-ratio: 4 / 5;
  }
}


/* ==========================================================================
   ACUPUNCTURE FOR PERIMENOPAUSE, PMS AND PERIOD SYMPTOMS · page scoped
   /womens-health, 8 September. THE SEVENTEENTH PAGE AND THE LAST ONE.
   Body carries `class="page cond-page cond-page--wide cond-page--womens"`.

   THE SYSTEM DECISION, AND IT IS THE FIFTH RUN OF THE /about TEST.
   Every block on this page is a `cond-` block and nothing here is a new
   component: `.cond-open` with a list, `.cond-lead`, `.cond-mid` with
   `.cond-list--one`, `.cond-alt --fill` twice, `.cond-caution`,
   `.cond-research` and the shared `.close`. It PASSES, so there is still no
   sixth page system. `--wide` is the condition page default.
   Running score: /about PASSED, /book FAILED, /contact FAILED,
   /treatment-centers PASSED, /womens-health PASSED.

   THE DESIGN PROBLEM IS THE COPY'S OWN SHAPE, NOT ITS LENGTH.
   741 body words across five chapters that land at 116, 113, 122, 102 and
   169 words. That is the flattest copy on the site. Sleep had THREE
   structurally identical chapters and Rebecca said they read as one module
   repeated. This page has FIVE, so alternating photographs would not have
   been enough on their own.

   THE ANSWER IS FIVE CHAPTERS IN FIVE SETTINGS, WHICH IS THE RULE THIS SITE
   HAS NOW PROVED SEVEN TIMES. Centred with a centred list · photograph left
   with no list at all · left aligned with no photograph and no rule · a
   centred coda under a Copper hairline · photograph right with a dotted list
   in the copy column · centred research. Nothing repeats, and no two picture
   rows touch.

   AND SLEEP'S OWN RULE IS APPLIED DIRECTLY, BECAUSE REBECCA SET IT: the
   quiet chapter goes immediately after the lead band, not in the middle of
   the picture blocks. `Perimenopause and menopause` is that chapter.

   THREE FIVE ITEM LISTS ON ONE PAGE, IN THREE DIFFERENT BLOCKS.
   Five is prime, so all three run in one column and the BLOCK is what makes
   them read differently, which is the finding /treatment-centers and /about
   both landed on. The opener's runs plainly one per line in its own left
   aligned voice. The Perimenopause list runs as the centred `.cond-list--one`
   grid. The `How Vida will know` list runs dotted and left aligned inside a
   copy column, which is this site's own marker for exactly that. If a third
   list rule had been needed here, the blocks would have been wrong.

   ONE COPPER MARK ON THE PAGE PROPER, the caution hairline, plus five Copper
   stars in the one review. There is no `.cond-sep` anywhere on this page.
   That puts it level with /cupping, /moxibustion, /gua-sha-tui-na, /about
   and /contact as the quietest pages on the site.

   NO RECOLOUR AND NO WARM STEP ON ANY OF THE THREE ASSETS, AND IT WAS
   MEASURED RATHER THAN ASSUMED. Background R minus B against the canvas
   `#F8F6F1`'s own +7: `025` +12.7 at 0.156 saturation, `279` +17.7 at 0.151,
   `088` +19.3 at 0.162. All three are already warmer than the canvas, so the
   two step green treatment would push them past the site rather than onto
   it. Same finding as the Moxibustion, Gua Sha and white linen Portraits
   folders.
   ========================================================================== */


/* ---- 1 · the list inside the opening column ------------------------------
   Identical shape to Sleep's opener: one line, five short items, then a
   closing paragraph. The four column intro wraps every item onto two lines
   and runs the column past the buttons, so the column takes a fifth column
   and the list is set plainly with no bullets. This is the opener's own left
   aligned voice, NOT the centred `.cond-list` grid.

   This page's intro carries one paragraph MORE than Sleep's, because the
   approved copy opens with a standfirst line before the list line. */
.cond-page--womens .cond-open__intro{ grid-column: 8 / 13; }

.cond-page--womens .cond-open__list{
  margin-block-start: 20px;
  padding-inline-start: 0;
  list-style: none;
}
.cond-page--womens .cond-open__list li{
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--canyon-sage);
}
.cond-page--womens .cond-open__list li + li{ margin-block-start: 12px; }
.cond-page--womens .cond-open__list + p{ margin-block-start: 24px; }


/* ---- 2 · the lead --------------------------------------------------------
   `025`. The asset is cut to the MIDDLE of the band's swing rather than to
   its 1440 value, which is the /about finding: the band runs 2.32:1 at 1440
   and 4.13:1 at 2560, so a crop tuned at 1440 throws away most of the frame
   on the display Rebecca actually reviews on.

   The subject sits low and left, the patient along the bottom of the frame
   and Vida seated to the right of her, so the band pulls DOWN rather than to
   the centre. The phone is served a purpose cut square instead, which is why
   the shared `--wide` mobile offset is reset here. */
.cond-page--womens .cond-lead img{ object-position: 50% 62%; }

@media (max-width: 900px){
  .cond-page--womens .cond-lead img{ object-position: 50% 50%; }
}


/* ---- 3 · three paragraphs and a lead-in in one centred chapter -----------
   `Perimenopause and menopause` runs two real paragraphs and then the single
   line `Treatment may focus on:` that introduces its list. Sleep has the same
   shape with one paragraph and sets every gap to 14px, which on three
   paragraphs would read as one block of text.

   So the two paragraphs sit at 18px and the LEAD-IN takes MORE air above it
   than the gap it follows, because it starts a new movement rather than
   continuing the last one. And the list comes up to 36px from the shared
   54px, so the lead-in binds to the list it introduces instead of floating
   between the two. Page scoped: Sleep is approved as it stands. */
.cond-page--womens .cond-mid__intro + .cond-mid__intro{ margin-block-start: 18px; }
.cond-page--womens .cond-mid__intro + .cond-mid__intro--leadin{ margin-block-start: 30px; }
.cond-page--womens .cond-mid__intro--leadin + .cond-list{ margin-block-start: 36px; }


/* ---- 4 · two leads in a row inside an alternating block ------------------
   Same shape again in `How Vida will know if treatment is helping`, this
   time inside a copy column: a paragraph, then `That might mean:`, then the
   list. `.cond-alt__lead` opens at 24px, which reads as two separate
   paragraphs. The lead-in belongs to the list under it. */
.cond-page--womens .cond-alt__lead + .cond-alt__lead{ margin-block-start: 16px; }


/* ---- 5 · one patient voice, page scoped ---------------------------------
   NOT the fifteen card reviews strip. The strip is a `tp-` component and
   this is a `cond-` page, and the rule that the five systems do not mix has
   now held on /about, /treatment-centers and here. It would also have
   rendered with no CSS change at all, because `.tp-quotes` is not scoped
   under `.tp-page`. The rule holds because it is a rule.

   No heading over it, so the page adds no invented label. Copper stars are
   inline SVG because U+2605 is missing from both Newsreader and Spectral. */
.cond-page--womens .wh-voice{
  margin-block-start: 96px;
  padding-inline: var(--pad);
  text-align: center;
}
.cond-page--womens .wh-voice figure{ margin: 0; }
.cond-page--womens .wh-stars{ display: block; }
.cond-page--womens .wh-stars svg{
  width: 87px;
  height: 15px;
  margin-inline: auto;
  fill: var(--copper);
}
.cond-page--womens .wh-voice blockquote{ margin: 0; padding-block-start: 24px; }
.cond-page--womens .wh-voice blockquote p{
  max-width: 44ch;
  margin-inline: auto;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 22px;
  line-height: 1.52;
  color: var(--canyon-sage);
}
.cond-page--womens .wh-voice figcaption{
  margin-block-start: 22px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dry-grass-t);
}


/* ---- 6 · the left aligned chapter ---------------------------------------
   `If you are already using HRT or other treatment`. The page's fifth
   setting and the only left aligned chapter on it.

   THE LEFT EDGE IS THE POINT, NOT THE COLUMN COUNT. Three paragraphs at 95
   words would be thin in two columns and identical to the centred chapters
   in one, so the chapter keeps one column at a 640px measure and moves to a
   left edge instead. Centred text at a wide measure gives the eye no left
   edge to return to, which is what reads as heavy, and it is why this is the
   most legible difference available on a page whose copy is this flat.

   NO HAIRLINE UNDER THE HEADING. A `--split` chapter on a `tp-` page carries
   one. Here it would put a Sandstone rule twenty lines above the Copper rule
   that marks the safety copy, and two rules that close together halve the
   weight of the one that has to matter. /treatment-centers made the same
   call for the same reason.

   THE FIRST PARAGRAPH IS CANYON SAGE AND THE OTHER TWO ARE THE DRY GRASS
   TONE, which is `.cond-alt`'s own convention rather than a new one. */
.cond-page--womens .wh-hrt{
  margin-block-start: 104px;
  padding-inline: var(--pad);
}
.cond-page--womens .wh-hrt__inner{
  max-width: 1600px;
  margin-inline: auto;
}
.cond-page--womens .wh-hrt__h2{
  max-width: 24ch;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(26px, 2.5vw, 35px);
  line-height: 1.18;
  color: var(--canyon-sage);
}
.cond-page--womens .wh-hrt__body{
  max-width: 640px;
  margin-block-start: 30px;
}
.cond-page--womens .wh-hrt__lead{
  font-size: 18px;
  line-height: 1.72;
  color: var(--canyon-sage);
}
.cond-page--womens .wh-hrt__note{
  margin-block-start: 18px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--dry-grass-t);
}


/* ---- 7 · the caution, as a coda -----------------------------------------
   THE ONLY CAUTION ON THIS SITE THAT IS NOT A CHAPTER OF ITS OWN. The
   approved document sets it as a Heading2 INSIDE the Heading1 chapter above,
   so it belongs to that chapter and it sits at 58px rather than the shared
   104px. Do not move it to the foot of the page and do not promote it.

   IT STAYS CENTRED. Every caution on this site is centred under a 46px
   Copper hairline and that is a device a returning visitor recognises;
   moving it to a left edge to match its parent would cost more than the
   match is worth. The jump from the left aligned chapter above to this
   centred one is also the setting change that stops the two reading as one
   flat run, which is the answer /moxibustion found for touching text
   chapters and it applies here unchanged.

   NO LIST AND NO CRISIS LINE. The approved copy carries neither, and none
   was invented. Sleep's caution has neither either and is set correctly
   without them. /stress-and-anxiety has 911 and 988, /neuroacupuncture and
   /treatment-centers have 911. This page has no number anywhere. */
.cond-page--womens .wh-caution{ margin-block-start: 58px; }

/* THE HEADING FITS ON ONE LINE, AND ONLY LOOKING CAUGHT THIS.
   `When medical assessment comes first` is 35 characters and the shared
   `--wide` caution measure is 30ch, so it wrapped and left `first` alone on
   the second line. Same class of fault as `CBT-I` on Sleep: the one word
   that carries the sentence, stranded. 38ch holds it on one line at every
   desktop width and it still wraps naturally on a phone.
   SLEEP CARRIES THE IDENTICAL HEADING AND THE IDENTICAL WRAP. It is a one
   line fix on that page too and it is NOT made here, because that page is
   approved as it stands and this build changes only what was asked. */
.cond-page--womens .cond-caution__h2{ max-width: 38ch; }

@media (max-width: 900px){
  .cond-page--womens .wh-caution{ margin-block-start: 46px; }
}


/* ---- 8 · the page stops growing past 1600px -----------------------------
   THE SEVENTH PAGE TO SCOPE THIS AND THE LAST ONE THAT WILL EVER NEED TO.
   The site has no maximum width, so on a wide display the twelve column
   blocks keep stretching, the figure grows with its column and the copy
   beside it gets shorter. Sleep, /neurological-conditions, /about and
   /treatment-centers all carry it page scoped, and Pain and Injury and
   Stress and Anxiety still carry the bug.

   Now that every page is built this is one scripted pass at Rebecca's word,
   and it is on the remaining backlog rather than in this build. Cap
   `.cond-alt` and `.cond-open` ONLY. Never `.cond-lead`. */
.cond-page--womens .cond-open,
.cond-page--womens .cond-alt{
  max-width: 1600px;
  margin-inline: auto;
}


/* ---- 9 · ROW 2 COMES OFF `--fill`, AND THE CONDITION IS THE SAME ONE
        /cupping AND /moxibustion BOTH FOUND -------------------------------
   `--fill` is not free: it hands the picture's shape to the copy. Measured
   on the built page, this row's slot runs 0.520 at 1024, 0.842 at 1440 and
   1.040 at 1600 and above. `088` is a PORTRAIT original at 0.667 whose
   subject spans nearly its whole height, Vida's head at the top and her hand
   at the patient's abdomen at the bottom. Cut to a 1.040 slot the element
   screenshot showed exactly what the arithmetic predicted: the working hand
   and the patient disappear and the frame becomes a portrait of Vida sitting
   down, which is not what the chapter or the alt text is about.

   SO THE FIGURE TAKES A FIXED RATIO AND SETS ITS OWN ROW, and the copy
   centres beside it on `.cond-alt`'s own default. THE 1600px CAP IS WHAT
   MAKES THAT SAFE: the figure stops widening at 604px, so the row tops out
   instead of growing with the viewport. A fixed ratio without the cap is the
   width bug. A fixed ratio with it is a decision.

   THE RATIO IS THE ASSET'S OWN, 0.780, SO `object-fit: cover` CROPS NOTHING
   AT ANY WIDTH. That is the /about rule: match the asset to what is actually
   displayed rather than leaving a crop to happen. Deltas against the copy:
   +50px at 1440 and +194px at 1600 and above, the picture leading in both.

   AND ON A PAGE WITH TWO PICTURE ROWS IT DOES A SECOND JOB. Row 1 is a
   landscape original on `--fill` and measures its height from its copy; this
   one is a portrait original that sets its own. Two `--fill` bands would
   have been closer to a formula than two rows that behave differently. */
.cond-page--womens .wh-attend img{ aspect-ratio: 78 / 100; }


/* ---- 10 · ROW 1'S PICTURE LEADS ITS COPY, AT REBECCA'S INSTRUCTION -------
   8 September: *"For the image related to PMS and period symptoms, could we
   make it slightly larger than the text to create a visual distinction?"*

   THE LEVER IS `tp-`'s `--tall`, AND THE POINT OF IT IS THAT IT PADS THE
   COPY, NOT THE PICTURE. Giving the figure a fixed aspect ratio instead
   would reintroduce the width bug between 900 and 1600, and it would throw
   away the one thing `--fill` is for: the figure still takes its height from
   the row, so it is bounded and it still cannot drift away from its copy.
   The row simply gets taller, and the picture with it.

   `--tall` IS A `tp-` COMPONENT AND THIS IS A `cond-` PAGE, so the rule is
   written page scoped rather than the class being pasted across. Same
   discipline the reviews strip got on `/about`, `/treatment-centers` and
   here.

   THE INSET IS SMALLER THAN ANY `tp-` PAGE'S, AND DELIBERATELY SO. Cupping
   and Moxibustion run `clamp(48px, 6vw, 96px)` and Gua Sha `clamp(40px,
   5vw, 82px)`, because those pages are 483 to 599 words and their picture
   chapters are short. This chapter is five paragraphs and already the
   tallest copy column on the page, so it needs a nudge rather than a lift.
   **She asked for slightly, and slightly is what the number says.**

   MEASURED RESULT: the picture leads its copy by +75px at 1440 and +96px at
   1600 and above. Row 2 leads by +50 and +194. **The two rows still behave
   differently — row 1 takes its height from a padded row, row 2 sets its own
   from a fixed ratio — so the page has not collapsed into one formula.**

   AND THE ASSET WAS RE-CUT AFTER THIS, NOT BEFORE. Padding the copy changes
   the slot, so the swing moved from 0.545 / 1.057 / 1.341 to a taller set
   and the old crop was no longer at its midpoint. Cutting first and padding
   afterwards is how a `--fill` asset ends up wrong. */
@media (min-width: 901px){
  .cond-page--womens .wh-row1 .cond-alt__text{
    padding-block: clamp(28px, 2.6vw, 48px);
  }
}


/* ---- 11 · a photograph that matches its copy exactly ----------------------
   `--fill`. The figure takes its height from the row and the row is set by
   the copy, so figure height equals copy height at every width and the crop
   is taken by `object-fit` rather than by a ratio that can only be right at
   one window width.

   Two traps, both already paid for on Sleep: the image must be OUT OF FLOW
   or its own intrinsic height drives the row, and the figure needs an
   explicit width with no auto inline margin. */
@media (min-width: 901px){
  .cond-page--womens .cond-alt--fill{ align-items: stretch; }
  .cond-page--womens .cond-alt--fill .cond-alt__figure{
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .cond-page--womens .cond-alt--fill .cond-alt__figure img{
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* A <picture> wrapper would otherwise become the positioned child instead
     of the image, which is the fourth `--fill` trap. `display: contents`
     takes it out of the box tree and the <img> stays the child. */
  .cond-page--womens .cond-alt--fill .cond-alt__figure picture{ display: contents; }
}


/* ---- 12 · mobile --------------------------------------------------------
   The two stacked figures carry DIFFERENT ratios on purpose. The shared
   mobile rule forces every `.cond-alt__figure img` to 4/5, which on a page
   with two picture rows is the repeating image formula the brief rules out.
   `279` is a landscape original and reads as a band; `088` is a portrait
   original and stays tall. Each asset is cut to the ratio it is shown at, so
   `object-fit: cover` crops nothing on a phone. */
@media (max-width: 900px){
  .cond-page--womens .cond-open__intro{ margin-block-start: 26px; }
  .cond-page--womens .cond-open__list{ margin-block-start: 18px; }

  .cond-page--womens .wh-voice{ margin-block-start: 72px; }
  .cond-page--womens .wh-voice blockquote p{ font-size: 20px; max-width: none; }

  .cond-page--womens .wh-hrt{ margin-block-start: 72px; }
  .cond-page--womens .wh-hrt__h2{ max-width: none; font-size: clamp(25px, 6.6vw, 32px); }
  .cond-page--womens .wh-hrt__body{ max-width: none; margin-block-start: 24px; }
  .cond-page--womens .wh-hrt__lead{ font-size: 17px; }
  .cond-page--womens .wh-hrt__note{ font-size: 16.5px; }

  .cond-page--womens .cond-mid__intro--leadin + .cond-list{ margin-block-start: 26px; }

  .cond-page--womens .wh-abdomen img{ aspect-ratio: 16 / 9 !important; }
  .cond-page--womens .wh-attend img{ aspect-ratio: 4 / 5 !important; }
}


/* ==========================================================================
   THANK YOU · page scoped · body.ct-page.ct-page--thanks
   --------------------------------------------------------------------------
   THE EIGHTEENTH PAGE, AND IT ADDS NO SIXTH PREFIX.

   The /about test asks whether a page needs a component none of the systems
   has. /about passed and went on cond-. /book failed on a priced appointment
   row and became bk-. /contact failed hardest of all on the site's first
   form and became ct-. /treatment-centers and /womens-health both passed.

   THIS ONE DOES NOT EVEN NEED ASKING. It is a headline, a line and a link.
   It carries `ct-page` and reuses `.ct-reach` and its four children VERBATIM,
   because it is not a page of its own: it is the second page of the contact
   flow, and somebody arrives here two seconds after leaving /contact. The
   family resemblance is the point, not a saving.

   `ct-page--thanks` does one job: it CENTRES what /contact leaves left
   aligned. Nine rules, and four of them are overrides of ct- rules that are
   already on the page.

   THE PAGE IS SHORT AND IT IS MEANT TO BE. There is no photograph. Vida's
   face appears twice in the flow already, on /contact and wherever they came
   from before it, and a third portrait on a page somebody reads for four
   seconds is decoration. There is no second action either: pushing a booking
   at somebody who has just written to ask a question is the opposite of what
   this practice is.

   COLOUR. ONE Copper mark, the 46px hairline over "Reach Vida directly",
   centred here where /contact starts it at the left edge. Plus the .cta
   underline and the focus rings, which are states. Level with /contact and
   the four quietest pages on the site.
   ========================================================================== */

/* ---- the arrival --------------------------------------------------------
   CENTRED, and the reasoning is /cupping's. An opener is centred on this
   site when there is no lead photograph and no panel beneath it to carry the
   first screen. That is true here in the strongest possible form: there is
   nothing beneath it at all. Left aligned in the twelve column grid, a two
   word H1 would leave the 480px hole /about spent two rebuilds closing.

   The top padding is calc(--strip + 128px) rather than the site's usual 46px.
   Every other page has a second block arriving directly underneath to hold
   the first screen down. This one has three lines and a footer, so the quiet
   above the headline is what stops it reading as a page that failed to load. */

.ct-page--thanks .ct-thanks{
  padding: calc(var(--strip) + 128px) var(--pad) 0;
  max-width: 1600px;
  margin-inline: auto;
  text-align: center;
}

.ct-page--thanks .ct-thanks__h1{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.008em;
  color: var(--canyon-sage);
}

/* One line, and it is a statement of fact rather than a promise. The measure
   is set in ch so it holds at 2560 instead of stretching. */
.ct-page--thanks .ct-thanks__intro{
  max-width: 46ch;
  margin: 26px auto 0;
  font-size: 17px;
  line-height: 1.68;
  color: var(--dry-grass-t);
}

.ct-page--thanks .ct-thanks__actions{ margin-block-start: 52px; }
.ct-page--thanks .ct-thanks__actions .cta{ margin-inline-end: 0; }

/* ---- reach Vida directly, centred --------------------------------------
   The component is ct-'s and it is not redeclared, only re-aligned. Its own
   rules still set the type, the colour, the hairline underlines and the
   Copper focus rings; these four lines move it to the middle of the page and
   put its Copper hairline over the heading rather than beside it. */

.ct-page--thanks .ct-reach{
  margin-block-start: 108px;
  text-align: center;
}

.ct-page--thanks .ct-reach__h2{ padding-block-start: 44px; }

.ct-page--thanks .ct-reach__h2::before{
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.ct-page--thanks .ct-reach__line{ margin-block-start: 20px; }

/* ---- phone --------------------------------------------------------------
   Only the vertical rhythm moves. A centred page is already composed for a
   narrow screen, which is the one case on this site where that is true. */

@media (max-width: 900px){
  .ct-page--thanks .ct-thanks{ padding-block-start: calc(var(--strip) + 92px); }
  .ct-page--thanks .ct-thanks__actions{ margin-block-start: 44px; }
  /* THE SHARED MOBILE .cta RULE MAKES THE ACTION A BLOCK AT max-content WIDTH,
     which left aligns it inside a centred column and is the one thing on this
     page that looked wrong. Every other page wants that rule, because every
     other page's actions sit in a left aligned block. Centre it back. */
  .ct-page--thanks .ct-thanks__actions .cta{ margin-inline: auto; }
  .ct-page--thanks .ct-reach{ margin-block-start: 84px; }
  .ct-page--thanks .ct-reach__h2{ padding-block-start: 38px; }
}


/* ==========================================================================
   BOOK · COMMON QUESTIONS · page scoped · added 9 September 2026
   Body carries `class="page bk-page"`. Appended at the END of the file, which
   is the rule, so the shared prefix stays byte identical to
   _TMP/site.css.bak-prefaq (7,801 lines, a381055914b325ac497ad0bd0bf999e9).

   IT INTRODUCES NO NEW COMPONENT. The item is the appointment row's own grid
   at 1/5 and 6/12, so a visitor reads it as the same page. What separates the
   two is TYPE SCALE, not structure: an appointment name runs 25 to 34px and a
   question runs 19 to 23px, so the questions sit clearly below the four
   things the page is actually selling.

   THE LABEL IS 15px AT 0.12em IN CANYON SAGE, which is the size the site
   settled on after the /neuroacupuncture labels read light at 13px. It is
   DARKER than the 16.5px answer type beneath it rather than only smaller.

   NO ACCORDION, NO CARDS, NO BORDERS, NO PLUS SIGNS. Five questions do not
   need to be hidden behind a control, and a filled box would be the first on
   this page. One soft hairline per item, exactly as the appointment rows.
   ========================================================================== */

.bk-page .bk-faq{
  margin-block-start: 104px;
  padding-inline: var(--pad);
  max-width: 1600px;
  margin-inline: auto;
}

.bk-page .bk-faq__label{
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--canyon-sage);
}

.bk-page .bk-faq__item{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  padding-block: 38px;
  border-block-start: 1px solid var(--hair-soft);
}

.bk-page .bk-faq__item:first-of-type{ margin-block-start: 34px; }

.bk-page .bk-faq__q{
  grid-column: 1 / 5;
  font-family: var(--serif-display);
  font-weight: 450;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.24;
  letter-spacing: -0.002em;
  color: var(--canyon-sage);
}

.bk-page .bk-faq__body{ grid-column: 6 / 12; }

.bk-page .bk-faq__a{
  max-width: 64ch;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--dry-grass-t);
}

.bk-page .bk-faq__a + .bk-faq__a{ margin-block-start: 16px; }

@media (max-width: 900px){
  .bk-page .bk-faq{ margin-block-start: 72px; }
  .bk-page .bk-faq__item{ display: block; padding-block: 30px; }
  .bk-page .bk-faq__body{ margin-block-start: 14px; }
  .bk-page .bk-faq__a{ max-width: none; }
}


/* ==========================================================================
   KEYBOARD FOCUS · SHARED LAYER · added 9 September 2026
   Promoted from `.ct-page .cta:focus-visible`, which was the only focus style
   on the site. Every other .cta on all seventeen pages was falling back to
   Chromium's own 1px ring, which is not blue, which is why the "no browser
   blue" check passed on every page and nobody caught it until /contact gave
   the site something to tab to.

   Copper, 2px, offset so it never touches the type. :focus-visible only, so
   a mouse click never draws it. Nothing about the pages' appearance changes.
   ========================================================================== */

.cta:focus-visible,
a.inline:focus-visible,
.link:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 6px;
  border-radius: 1px;
}

.nav__link:focus-visible,
.nav__toggle:focus-visible,
.foot__nav a:focus-visible,
.masthead__lockup:focus-visible,
.track__arrow:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}


/* ---- the colophon line · settled 9 September 2026 ----------------------
   Everything that used to sit in the middle of the footer now runs as ONE
   line across the full width, under a Sandstone hairline, with the wordmark
   and the menu alone on the row above it.

   Rebecca rejected three placements and then three structures before this
   one, and the fault was the same every time: the contact details were
   SHARING A COLUMN and being squeezed into it. This shares nothing.

   It is a MODIFIER on .foot__practitioner, not a new component. The size,
   the Dry Grass tone and the Sandstone pipe separator already belong to that
   class. Only the column, the rule above and one size step are new, and the
   links take the hairline underline the /contact reach block uses. */

.foot__practitioner--full{
  grid-column: 1 / 13;
  margin-block-start: 34px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--hair-soft);
  font-size: 13px;
}

.foot__practitioner--full a{
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid var(--hair);
  padding-block-end: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.foot__practitioner--full a:hover{ color: var(--copper); border-block-end-color: var(--copper); }
.foot__practitioner--full a:focus-visible{ outline: 2px solid var(--copper); outline-offset: 4px; }

@media (max-width: 900px){
  .foot__practitioner--full{ margin-block-start: 26px; padding-block-start: 16px; line-height: 2; }
}


/* ==========================================================================
   BACK TO TOP · shared layer · added 9 September 2026 at Rebecca's request
   The brief rules out floating elements as a default, and this one is here
   because she asked for it by name. So it is built to disappear: it carries
   no label, no shadow, no solid brand colour and no animation beyond a fade,
   and it is not on the page at all until the reader is well past the first
   screen. Bone ground, one Sandstone hairline, Canyon Sage arrow.

   z-index 30 puts it UNDER the entrance overlay (40), the masthead (60) and
   the phone menu (70), so it can never cover the navigation and never
   appears during the homepage entrance.

   46px on a desktop and 44px on a phone, which clears the 44px touch target
   guideline the text links on this site do not.
   ========================================================================== */

.totop{
  position: fixed;
  inset-block-end: 26px;
  inset-inline-end: 26px;
  z-index: 30;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--bone);
  border: 1px solid var(--hair);
  border-radius: 50%;
  color: var(--canyon-sage);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease, color 200ms ease,
              border-color 200ms ease, visibility 0s linear 260ms;
}

/* --lift is set by site.js and is the height of the footer currently on
   screen. Without it the button sits ON TOP OF the footer navigation when the
   reader reaches the bottom, which is exactly where they are most likely to
   use it. It rides up over the footer instead of covering it. */
.totop.is-shown{
  opacity: 1;
  visibility: visible;
  transform: translateY(calc(var(--lift, 0px) * -1));
  transition-delay: 0s;
}

.totop svg{ width: 17px; height: 17px; display: block; }
.totop:hover{ color: var(--copper); border-color: var(--copper); }
.totop:focus-visible{ outline: 2px solid var(--copper); outline-offset: 4px; }

@media (max-width: 900px){
  .totop{ inset-block-end: 18px; inset-inline-end: 18px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce){
  .totop{ transition: none; transform: none; }
}