/* ==========================================================================
   The Reset Studio — homepage
   Implemented from the Claude Design mockup "Reset Studio Homepage.dc.html".
   Every colour, size and timing below is carried over from that file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --cream:      #f6f2ea;  /* page ground, light type on dark */
  --sand:       #eae4d8;  /* alternating section ground */
  --ink:        #4b4a43;  /* headings and body copy */
  --stone:      #707067;  /* muted copy, link base, hero + footer ground */
  --sage:       #868776;  /* primary action, promise band */
  --sage-dark:  #6f7061;  /* primary action hover */
  --tan:        #c9ad93;  /* eyebrows, rules, service band */
  --bark:       #40372e;  /* copy on the tan band */
  --spark:      #fffdf8;  /* head of the converging lines */

  --rule-stone-18: rgba(112, 112, 103, .18);
  --rule-stone-14: rgba(112, 112, 103, .14);
  --rule-sand-25:  rgba(234, 228, 216, .25);
  --sand-70:       rgba(234, 228, 216, .7);

  /* Type */
  --font-serif: 'Libre Baskerville', serif;
  --font-sans:  'Josefin Sans', sans-serif;

  /* Layout */
  --shell:   1280px;
  --gutter:  48px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html, body { margin: 0; padding: 0; background: var(--cream); }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

a {
  color: var(--stone);
  text-decoration: none;
  transition: color .2s, background-color .2s, border-color .2s;
}
a:hover { color: var(--sage); }

a:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px;
}

img { display: block; max-width: 100%; }

figure { margin: 0; }

address { font-style: normal; }

::selection { background: var(--tan); color: var(--cream); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cream);
  color: var(--ink);
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes hoverWave {
  0%, 100% { transform: translateY(7px); }
  50%      { transform: translateY(-7px); }
}

@keyframes breatheRing {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes convergeLine {
  0%   { transform: rotate(var(--a)) translateX(720px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: .9; }
  100% { transform: rotate(var(--a)) translateX(8px); opacity: 0; }
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes convergeRing {
  0%   { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
  18%  { opacity: .38; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */
.shell,
.site-header__inner,
.triad__inner,
.services__inner,
.site-footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
}

.kicker {
  margin: 0;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.kicker--tan   { color: var(--tan); }
.kicker--cream { color: var(--cream); }

.btn {
  display: inline-block;
  padding: 16px 38px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.btn--sage { background: var(--sage); color: var(--cream); }
.btn--sage:hover { background: var(--sage-dark); color: var(--cream); }

.btn--cream { background: var(--cream); color: var(--ink); padding: 17px 42px; letter-spacing: .26em; }
.btn--cream:hover { background: var(--tan); color: var(--cream); }

.btn--outline { border: 1px solid var(--sage); color: var(--stone); padding: 15px 38px; }
.btn--outline:hover { background: rgba(134, 135, 118, .12); color: var(--stone); }

/* Matches the nav's own 12.5px, which this button inherited in the mockup. */
.btn--compact { padding: 13px 30px; letter-spacing: .22em; font-size: 12.5px; }

.link-underline {
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tan);
  padding-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--rule-stone-18);
}

.site-header__inner {
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-header__brand { display: flex; align-items: center; }
.site-header__brand img { height: 46px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 38px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Two-word items break mid-label long before the row runs out of room, so the
   nav is allowed to wrap between items and never inside one. */
.site-nav a { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Services dropdown

   No JavaScript: the trigger is a real link to the services index, so a tap
   or a click always lands somewhere useful, and the panel is revealed by
   :hover / :focus-within for pointer and keyboard. Below 900px the panel is
   dropped entirely and the link alone carries the menu.
   -------------------------------------------------------------------------- */
.nav-drop { position: relative; display: flex; align-items: center; }

/* Bridges the gap between the link and the panel so the pointer can cross it
   without the panel closing under it. */
.nav-drop::after {
  content: '';
  position: absolute;
  left: -24px;
  right: -24px;
  top: 100%;
  height: 26px;
}

.nav-drop__panel {
  position: absolute;
  top: calc(100% + 26px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  min-width: 272px;
  padding: 22px 26px 20px;
  background: var(--cream);
  border: 1px solid var(--rule-stone-18);
  box-shadow: 0 18px 40px rgba(75, 74, 67, .10);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s;
}
.nav-drop:hover .nav-drop__panel,
.nav-drop:focus-within .nav-drop__panel { opacity: 1; visibility: visible; }

.nav-drop__heading {
  margin: 0 0 16px;
  font-size: 10.5px;
  letter-spacing: .28em;
  color: var(--tan);
}

.nav-drop__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-align: left;
}
.nav-drop__list a { display: block; font-size: 12px; letter-spacing: .16em; }
.nav-drop__list a[aria-current="page"] { color: var(--sage); }

/* Two columns sized to their longest label: the service names are set in
   letter-spaced caps and cannot reflow, so equal fractions would overflow. */
.nav-drop__panel--wide { min-width: 0; }

.nav-drop__groups {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 34px;
}

.nav-drop__group .nav-drop__heading { margin-bottom: 14px; }

.nav-drop__all {
  margin: 20px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--rule-stone-14);
}
.nav-drop__all a {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--tan);
}
.nav-drop__all a:hover { color: var(--sage); }

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

   Desktop is untouched: both controls below are hidden until the header
   breakpoint in the responsive section, where the same nav markup becomes a
   drawer. The 900px step is mirrored in nav.js.
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle__box {
  display: block;
  position: relative;
  width: 24px;
  height: 16px;
}
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .22s ease, opacity .16s ease;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 50%; margin-top: -.75px; }
.nav-toggle__bar:nth-child(3) { bottom: 0; }

.is-nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.is-nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.is-nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

/* The Services row is a link plus its own disclosure, so tapping the label
   still goes to the index and the chevron alone opens the sub-list. */
.nav-drop__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--stone);
  cursor: pointer;
}
.nav-drop__toggle span {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.nav-drop.is-open .nav-drop__toggle span { transform: rotate(-135deg); margin-top: 3px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 82vh;
  min-height: 560px;
  overflow: hidden;
}

.hero__ground { position: absolute; inset: 0; background: var(--stone); }

.hero__rings { position: absolute; inset: 0; pointer-events: none; }

.hero__ring {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: breatheRing 10s ease-in-out infinite;
}
.hero__ring--1 { width:  260px; height:  260px; border: 1px solid rgba(246, 242, 234, .50); }
.hero__ring--2 { width:  520px; height:  520px; border: 1px solid rgba(246, 242, 234, .42); }
.hero__ring--3 { width:  800px; height:  800px; border: 1px solid rgba(246, 242, 234, .34); }
.hero__ring--4 { width: 1100px; height: 1100px; border: 1px solid rgba(246, 242, 234, .26); }
.hero__ring--5 { width: 1420px; height: 1420px; border: 1px solid rgba(246, 242, 234, .18); }

.hero__content {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.hero__content .kicker {
  font-size: 12px;
  letter-spacing: .34em;
  margin-bottom: 26px;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(52px, 6.5vw, 92px);
  line-height: 1.04;
  color: var(--cream);
  margin: 0 0 22px;
  max-width: 14ch;
}

.hero__lede {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--sand);
  max-width: 52ch;
  margin: 0 0 38px;
}

.hero__content .btn { pointer-events: auto; }

/* --------------------------------------------------------------------------
   Services ticker — a quiet, continuous index of what the studio offers,
   carrying the eye from the hero into the page.
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  background: var(--sand);
  border-bottom: 1px solid var(--rule-stone-14);
  padding: 19px 0;
}

/* The names run edge to edge, so both ends dissolve rather than being cut off
   square. The fade sits on this frame rather than on the band, which keeps the
   sand ground solid from margin to margin, and rather than on the track, which
   would carry its own fade along as it travels. */
.ticker__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* max-content so the track is as wide as both rows laid end to end; the
   translate below is a percentage of that width. */
.ticker__track {
  display: flex;
  width: max-content;
  animation: tickerScroll 66s linear infinite;
}

/* Hover to read a name, focus to tab the row — either one stops the travel. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

.ticker__row {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker__item { display: inline-flex; align-items: center; }

/* Every item carries its own trailing diamond, so the seam between the two
   rows is spaced exactly like every other join. */
.ticker__item::after {
  content: '';
  width: 5px;
  height: 5px;
  margin: 0 30px;
  background: var(--tan);
  transform: rotate(45deg);
}

.ticker__item a {
  display: block;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--stone);
}
.ticker__item a:hover { color: var(--sage); }

/* --------------------------------------------------------------------------
   Philosophy
   -------------------------------------------------------------------------- */
.philosophy {
  padding: 130px 24px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.philosophy .kicker { margin-bottom: 34px; }

.philosophy__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.28;
  color: var(--ink);
  margin: 0;
  max-width: 26ch;
}
.philosophy__title em { font-style: italic; }

.philosophy__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--stone);
  max-width: 58ch;
  margin: 36px 0 0;
}

/* --------------------------------------------------------------------------
   Founding memberships

   Deliberately not a sale band: the two benefits are set as a ruled list in
   the same register as the rest of the page, with no percentage treatment
   larger than the copy around it.
   -------------------------------------------------------------------------- */
.founding {
  background: var(--sand);
  border-top: 1px solid var(--rule-stone-14);
  border-bottom: 1px solid var(--rule-stone-14);
}

.founding__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 110px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.founding__title {
  margin: 30px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.26;
  color: var(--ink);
  max-width: 22ch;
}

.founding__copy {
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--stone);
  max-width: 54ch;
}

.founding__list {
  width: 100%;
  max-width: 880px;
  margin: 54px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  text-align: left;
}

.founding__item {
  border-top: 1px solid var(--rule-stone-18);
  padding-top: 26px;
}

.founding__item dt {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
}

.founding__item dd {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--stone);
}

.founding__inner .btn { margin-top: 52px; }

/* --------------------------------------------------------------------------
   Relax / Refresh / Renew
   -------------------------------------------------------------------------- */
.triad {
  background: var(--sand);
  border-top: 1px solid var(--rule-stone-14);
  border-bottom: 1px solid var(--rule-stone-14);
}

.triad__inner {
  padding: 96px var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.triad__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  align-items: center;
  animation: hoverWave 7s ease-in-out infinite;
}
.triad__item:nth-child(2) { animation-delay: -5.83s; }
.triad__item:nth-child(3) { animation-delay: -4.66s; }

.triad__word {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 400;
  color: var(--sage);
}

.triad__rule { width: 34px; height: 1px; background: var(--tan); }

.triad__copy {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--stone);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Split sections (Experience / Visit)
   -------------------------------------------------------------------------- */
.split {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 130px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}

.split__media { position: relative; overflow: hidden; }
.split__media--portrait  { aspect-ratio: 4 / 5; }
.split__media--landscape { aspect-ratio: 5 / 4; }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.split__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.split__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}

.split__copy {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--stone);
  margin: 0;
}

.split__actions { display: flex; gap: 18px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Services intro (converging lines)
   -------------------------------------------------------------------------- */
.services-intro {
  position: relative;
  overflow: hidden;
  background: var(--tan);
  padding: 150px var(--gutter) 110px;
}

/* Everything except the converging lines is centred inside the same shell the
   rest of the page uses, so the intro keeps the site's left/right rhythm
   instead of running to its own 24px edge. */
.services-intro__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

/* A grid rather than a wrapping flex row: three even columns hold their own
   centres, and below the step they drop to one instead of leaving a stray
   item alone on the first line. */
.intro-facts {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 20px 0 0;
  padding-top: 30px;
  border-top: 1px solid rgba(64, 55, 46, .18);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 40px;
  text-align: center;
}
.intro-facts dt {
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bark);
  opacity: .72;
}
.intro-facts dd { margin: 9px 0 0; font-size: 14.5px; color: var(--ink); }

.converge { position: absolute; inset: 0; pointer-events: none; }

.converge__dot {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--cream);
  border-radius: 50%;
}

.converge__line {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 300px;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, var(--spark), rgba(246, 242, 234, 0));
  transform-origin: 0 50%;
  animation: convergeLine 24s linear infinite;
}
.converge__line--1 { --a:   0deg; }
.converge__line--2 { --a: 180deg; animation-delay:  -4s; }
.converge__line--3 { --a:  28deg; animation-delay:  -8s; }
.converge__line--4 { --a: 152deg; animation-delay: -12s; }
.converge__line--5 { --a:  65deg; animation-delay: -16s; }
.converge__line--6 { --a: 115deg; animation-delay: -20s; }

.services-intro__title,
.services-intro__copy { margin: 0; }

.services-intro__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.2;
  color: var(--ink);
}

.services-intro__copy {
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--bark);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Services grid
   -------------------------------------------------------------------------- */
.services {
  background: var(--sand);
  border-top: 1px solid var(--rule-stone-14);
}

.services__inner { padding: 110px var(--gutter) 130px; }

/* The listing page introduces each category above its grid. The home page
   band has no head, so this only ever renders on services/. */
.services--cream { background: var(--cream); border-top: none; }

/* The chiropractic grid is headed by the band directly above it rather than
   by a `services__head`, so it opens tight against that band instead of
   floating a full section's padding below it. */
.services--continued .services__inner { padding-top: 66px; }

.services__head { margin-bottom: 62px; max-width: 62ch; }

.services__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.25;
  color: var(--ink);
}

.services__copy {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--stone);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

.service { display: flex; flex-direction: column; gap: 18px; }

.service__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.service__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.service__title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.service__copy {
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--stone);
}

.service__meta {
  margin: 0;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tan);
}

.services__action { display: flex; justify-content: center; margin-top: 64px; }

/* A whole card as a link — used on the service pages and the index. */
.service--link { color: inherit; }
.service--link:hover { color: inherit; }
.service__title { transition: color .2s; }
.service--link .service__media img { transition: transform .8s ease; }
.service--link:hover .service__media img { transform: scale(1.04); }
.service--link:hover .service__title { color: var(--sage); }

@media (prefers-reduced-motion: reduce) {
  .service--link:hover .service__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   Promise band
   -------------------------------------------------------------------------- */
.promise {
  position: relative;
  overflow: hidden;
  background: var(--sage);
  padding: 130px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}

.promise__rings { position: absolute; inset: 0; pointer-events: none; }

.promise__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
}
.promise__ring--static {
  transform: translate(-50%, -50%);
  border: 1px solid rgba(246, 242, 234, .35);
}
.promise__ring--1,
.promise__ring--2,
.promise__ring--3 {
  border: 1px solid rgba(246, 242, 234, .45);
  animation: convergeRing 12s linear infinite;
}
.promise__ring--2 { animation-delay: -4s; }
.promise__ring--3 { animation-delay: -8s; }

.promise > .kicker,
.promise__quote { position: relative; }

.promise__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.18;
  color: var(--cream);
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   Service pages — hero
   -------------------------------------------------------------------------- */
.page-hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 80px var(--gutter) 96px;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 76px;
  align-items: center;
}

.page-hero__body { display: flex; flex-direction: column; align-items: flex-start; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.crumbs__sep { color: var(--tan); }

.page-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1.14;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
}

.page-hero__tagline {
  margin: 20px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--stone);
  max-width: 34ch;
}

.page-hero__lede {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--stone);
  max-width: 52ch;
}

.facts {
  width: 100%;
  margin: 36px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--rule-stone-18);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 52px;
}
.facts dt {
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tan);
}
.facts dd { margin: 9px 0 0; font-size: 14.5px; color: var(--ink); }

.page-hero__body .btn { margin-top: 38px; }

.page-hero__media { aspect-ratio: 4 / 5; overflow: hidden; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* --------------------------------------------------------------------------
   Service pages — narrative and outcomes rail
   -------------------------------------------------------------------------- */
.detail {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 92px var(--gutter) 110px;
  border-top: 1px solid var(--rule-stone-18);
}

.detail__inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 88px;
  align-items: start;
}

.prose .kicker { margin-bottom: 28px; }
.prose p {
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--stone);
  max-width: 60ch;
}
.prose p:last-child { margin-bottom: 0; }

/* Story column: a lead, a few emphasised single lines and a closing couplet.
   They carry the beats of the copy and, stacked on mobile, break what would
   otherwise be one long block of text. */
.prose .prose__lead {
  margin-bottom: 30px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.62;
  color: var(--ink);
  max-width: 42ch;
}

.prose .prose__line {
  margin: 34px 0;
  padding-left: 22px;
  border-left: 2px solid var(--tan);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 34ch;
}

.prose__close {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-stone-18);
}
.prose .prose__close p {
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 36ch;
}
.prose .prose__close p:last-child { margin-bottom: 0; font-style: italic; }

/* The independent-practice note sits under the bio as a footnote, not as
   another paragraph of it. */
.prose .prose__note {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-stone-18);
  font-size: 14px;
  line-height: 1.8;
  color: var(--stone);
  max-width: 62ch;
}
.prose .prose__note strong { font-weight: 500; color: var(--ink); }

.rail { border-left: 1px solid var(--rule-stone-18); padding-left: 44px; }

.rail__title {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}
.rail__title--second { margin-top: 46px; }

.rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.rail__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--stone);
}
.rail__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 13px;
  height: 1px;
  background: var(--tan);
}

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tags li {
  padding: 9px 16px;
  border: 1px solid var(--rule-stone-18);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --------------------------------------------------------------------------
   Service pages — what the session is like
   -------------------------------------------------------------------------- */
.steps {
  background: var(--sand);
  border-top: 1px solid var(--rule-stone-14);
  border-bottom: 1px solid var(--rule-stone-14);
}

.steps__inner { max-width: var(--shell); margin: 0 auto; padding: 100px var(--gutter); }

.steps__title {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.22;
  color: var(--ink);
  max-width: 18ch;
}

.steps__list {
  list-style: none;
  counter-reset: step;
  margin: 54px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-stone-18);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: .34fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule-stone-18);
}

.step__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}
.step__title::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--tan);
}

.step__copy {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--stone);
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   Service pages — pairs with
   -------------------------------------------------------------------------- */
.related__inner { max-width: var(--shell); margin: 0 auto; padding: 100px var(--gutter) 116px; }

.related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 50px;
}

.related__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.25;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   CTA band — the promise band's rings, carrying an action
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--sage);
  padding: 120px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

.cta-band__rings { position: absolute; inset: 0; pointer-events: none; }

.cta-band > .kicker,
.cta-band__title,
.cta-band__copy,
.cta-band__actions { position: relative; }

.cta-band__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--cream);
  max-width: 20ch;
}

.cta-band__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--sand);
  max-width: 56ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}

.btn--ghost {
  border: 1px solid rgba(246, 242, 234, .55);
  color: var(--cream);
  padding: 15px 38px;
}
.btn--ghost:hover { background: rgba(246, 242, 234, .14); color: var(--cream); }

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

/* The service hero carries a photograph alongside its copy; the about hero
   is copy alone, so it takes the full shell and its measures open up. */
.page-hero--solo .page-hero__inner { grid-template-columns: 1fr; }
.page-hero--solo .page-hero__title { max-width: 20ch; }
.page-hero--solo .page-hero__lede { max-width: 62ch; }
.page-hero--solo .kicker { margin-bottom: 26px; }

.about-split {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 92px var(--gutter) 110px;
  border-top: 1px solid var(--rule-stone-18);
  display: grid;
  gap: 88px;
  align-items: start;
}

/* Copy leads, the field sits alongside it. */
.about-split--story { grid-template-columns: 1.1fr .9fr; }

/* The story column runs long, so the portrait follows the reader down the
   page rather than leaving a well of empty ground beside the copy. */
.about-split--story .about-split__media {
  position: sticky;
  top: 40px;
  align-self: start;
}

/* The portrait leads, and carries the credentials under it. */
.about-split--prac { grid-template-columns: .78fr 1.22fr; }

.about-split__title {
  margin: 0 0 30px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.22;
  color: var(--ink);
}
.about-split__title--tight { margin-bottom: 12px; }

.about-split__role {
  margin: 0 0 30px;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tan);
}

.about-split__media { aspect-ratio: 4 / 5; overflow: hidden; }
.about-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.creds {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-stone-18);
}
.creds li {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-stone-18);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
}

.about-actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}

/* --- Why we exist: the sage band, set left rather than centred ------------- */
.why {
  background: var(--sage);
  padding: 110px var(--gutter);
}

.why__inner { max-width: var(--shell); margin: 0 auto; }

.why__eyebrow { margin: 0; }

/* On services/ the band opens with its heading rather than an eyebrow. */
.why__lead:first-child { margin-top: 0; }

.why__action { margin: 40px 0 0; }

.link-underline--cream { color: var(--cream); border-bottom-color: var(--sand-70); }
.link-underline--cream:hover { color: var(--sand); }

.why__lead {
  margin: 28px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.24;
  color: var(--cream);
  max-width: 26ch;
}

.why__body {
  margin: 30px 0 0;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--sand-70);
  max-width: 62ch;
}

.why__sig {
  margin: 46px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--rule-sand-25);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--stone); color: var(--sand); }

.site-footer__inner {
  padding: 80px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  gap: 40px;
  align-items: start;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.site-footer__wordmark {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 30px;
  letter-spacing: .14em;
  color: var(--cream);
}

.site-footer__tagline {
  margin: 0;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tan);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13.5px;
  font-weight: 300;
}
.site-footer__col p,
.site-footer__col address { margin: 0; }
.site-footer__col a { color: var(--sand); }
.site-footer__col a:hover { color: var(--tan); }

.site-footer__col .site-footer__heading {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 4px;
  min-height: 3em;
}

.site-footer__legal {
  margin: 0;
  max-width: 92ch;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--sand-70);
}

.site-footer__bottom {
  border-top: 1px solid var(--rule-sand-25);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  font-weight: 300;
  color: var(--sand-70);
}
.site-footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   First visit — how the visit goes

   The arc of a visit reuses the service pages' step rows. The counter is
   swapped for the moment in the visit, so the two-column rhythm carries over
   unchanged and only the label in the left column is new.
   -------------------------------------------------------------------------- */
.steps--plain { background: var(--cream); border-bottom: none; }

.steps__list--timed { counter-reset: none; }
.steps__list--timed .step__title::before { content: none; }

.step__time {
  margin: 0;
  padding-top: 4px;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tan);
}

.step__body .step__title { margin-bottom: 14px; }
.step__body .step__copy { max-width: 58ch; }

/* --- Preparing: four short lists rather than one long one ----------------- */
.prep {
  background: var(--sand);
  border-top: 1px solid var(--rule-stone-14);
  border-bottom: 1px solid var(--rule-stone-14);
}

.prep__inner { max-width: var(--shell); margin: 0 auto; padding: 100px var(--gutter); }

.prep__title {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.22;
  color: var(--ink);
  max-width: 20ch;
}

.prep__copy {
  margin: 24px 0 0;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--stone);
  max-width: 58ch;
}

.prep__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 54px;
}

.prep__block {
  background: var(--cream);
  border: 1px solid var(--rule-stone-18);
  padding: 34px 36px;
}

.prep__heading {
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-stone-18);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Policy pages reuse the prep card: a lead paragraph above a list of tiers
   needs the gap the heading rule already gives the list on its own. */
.prep__block .step__copy + .rail__list { margin-top: 22px; }

/* The privacy policy runs several paragraphs to a card, and closes on an
   address the contact card sets on its own line. */
.prep__block .step__copy + .step__copy { margin-top: 18px; }
.prep__block .step__copy + address { margin-top: 22px; }
.prep__block--wide { grid-column: 1 / -1; }

.policy__address {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--stone);
}
.policy__address a { color: var(--ink); }

/* The screening paragraph, set quieter than the lists it follows. */
.prep__note {
  margin: 44px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--stone);
  max-width: 76ch;
}

/* --------------------------------------------------------------------------
   First visit — questions

   Native <details>, so the accordion needs no JavaScript and each answer is
   still in the page for search engines and for find-on-page.
   -------------------------------------------------------------------------- */
.faqs__inner { max-width: var(--shell); margin: 0 auto; padding: 100px var(--gutter) 116px; }

.faqs__title {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.22;
  color: var(--ink);
  max-width: 18ch;
}

.faq-group { margin-top: 54px; }

.faq-group__list { margin-top: 20px; border-top: 1px solid var(--rule-stone-18); }

.faq { border-bottom: 1px solid var(--rule-stone-18); }

.faq__q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 26px 48px 26px 0;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  transition: color .2s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--sage); }

/* A chevron rather than a plus: it rotates through to point up when open. */
.faq__q::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 1px solid var(--tan);
  border-bottom: 1px solid var(--tan);
  transform: rotate(45deg);
  transition: transform .25s;
}
.faq[open] .faq__q::after { margin-top: -3px; transform: rotate(-135deg); }

.faq__a {
  margin: 0 0 30px;
  padding-right: 48px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--stone);
  max-width: 76ch;
}

/* --------------------------------------------------------------------------
   Memberships — the three tiers
   -------------------------------------------------------------------------- */
.tiers {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 92px var(--gutter) 110px;
  border-top: 1px solid var(--rule-stone-18);
}

.tiers__grid {
  display: grid;
  grid-template-columns: 1fr 1.06fr 1fr;
  gap: 32px;
  align-items: start;
}

.tier {
  border: 1px solid var(--rule-stone-18);
  padding: 46px 44px;
  display: flex;
  flex-direction: column;
}

/* The higher tier sits proud of the other rather than matching it. */
.tier--lift {
  margin-top: -36px;
  background: var(--sage);
  border-color: transparent;
}

.tier__name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.25;
  color: var(--ink);
}

.tier__position {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--stone);
  max-width: 40ch;
}

.tier__price {
  margin: 34px 0 0;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule-stone-18);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.tier__amount {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
}

.tier__per {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
}

.tier__founding {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bark);
  max-width: 34ch;
}

.tier .rail__list { margin: 34px 0 40px; flex: 1; }
.tier .btn { align-self: flex-start; }

/* On the sage tier the tan dash and the stone copy both fall away, so the
   list and its rules step up to sand. */
.tier--lift .tier__name,
.tier--lift .tier__amount { color: var(--cream); }
.tier--lift .tier__position,
.tier--lift .tier__per,
.tier--lift .tier__founding,
.tier--lift .rail__list li { color: var(--sand); }
.tier--lift .tier__price { border-bottom-color: var(--rule-sand-25); }
.tier--lift .rail__list li::before { background: var(--sand-70); }

/* The credits explainer sits between the tiers and the fine print, on sand so
   it reads as a clarification rather than another tier. */
.credits {
  margin: 54px 0 0;
  background: var(--sand);
  border: 1px solid var(--rule-stone-18);
  padding: 38px 40px;
}

.credits__title {
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-stone-18);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
}

.credits__copy {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  max-width: 72ch;
}

.credits__list { margin: 24px 0 0; }

.tiers__note {
  margin: 44px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--stone);
  max-width: 68ch;
}

/* --- What membership changes --------------------------------------------- */
.benefits {
  background: var(--sand);
  border-top: 1px solid var(--rule-stone-14);
  border-bottom: 1px solid var(--rule-stone-14);
}

.benefits__inner { max-width: var(--shell); margin: 0 auto; padding: 100px var(--gutter); }

.benefits__title {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.22;
  color: var(--ink);
  max-width: 18ch;
}

.benefits__grid {
  list-style: none;
  margin: 54px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 64px;
}

.benefit__title {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule-stone-18);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
}

.benefit__copy {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--stone);
  max-width: 46ch;
}

/* --- Packages ------------------------------------------------------------- */
.packages--sand { background: var(--sand); border-top: 1px solid var(--rule-stone-14); }

.packages__inner { max-width: var(--shell); margin: 0 auto; padding: 100px var(--gutter); }

.packages__title {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.25;
  color: var(--ink);
  max-width: 22ch;
}

.packages__copy {
  margin: 24px 0 0;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--stone);
  max-width: 58ch;
}

.packages__grid {
  list-style: none;
  margin: 54px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* --- Together pricing ------------------------------------------------------
   A price list rather than a card grid: two columns of plain rows, ruled the
   same way the rest of the fine print on the site is. */
.together {
  margin: 48px 0 0;
  border-top: 1px solid var(--rule-stone-18);
  max-width: 760px;
}

.together__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-stone-18);
}

.together dt {
  font-size: 15.5px;
  color: var(--ink);
}
.together dt a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-stone-18); }
.together dt a:hover { border-bottom-color: var(--tan); }

.together dd {
  margin: 0;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--stone);
}

.pk { border: 1px solid var(--rule-stone-18); padding: 34px 36px; }

.pk__count {
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 1;
  color: var(--tan);
}
.pk__count span {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stone);
}

.pk__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}

.pk__copy { margin: 14px 0 0; font-size: 15.5px; line-height: 1.8; color: var(--stone); }

.pk__note {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule-stone-18);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--stone);
}

/* --------------------------------------------------------------------------
   Responsive — the mockup is a desktop composition; these steps fold it down
   without changing the desktop rendering.
   -------------------------------------------------------------------------- */
/* Three tiers rather than two: the cards give up padding before they give up
   the row. */
@media (max-width: 1180px) {
  .tier { padding: 38px 32px; }
  .tier__amount { font-size: 38px; }
}

@media (max-width: 1040px) {
  :root { --gutter: 32px; }

  /* Six items and a button no longer clear a 1040px row; the nav wraps under
     the logo rather than squashing, until the header stacks at 900px. */
  .site-nav { gap: 26px; flex-wrap: wrap; justify-content: flex-end; }

  .split {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 96px var(--gutter);
  }

  .page-hero {
    padding: 56px var(--gutter) 72px;
  }
  .page-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .page-hero__media { aspect-ratio: 5 / 4; }

  .detail { padding: 72px var(--gutter) 88px; }
  .detail__inner { grid-template-columns: 1fr; gap: 56px; }
  .together__row { justify-content: flex-start; }
  .rail {
    border-left: none;
    border-top: 1px solid var(--rule-stone-18);
    padding-left: 0;
    padding-top: 44px;
  }

  .about-split { padding: 72px var(--gutter) 88px; grid-template-columns: 1fr; gap: 56px; }

  /* Stacked, the emphasised lines are the only thing breaking the column up,
     so they get more air around them, not less. */
  .prose .prose__lead { font-size: 20px; max-width: none; }
  .prose .prose__line { margin: 32px 0; font-size: 18px; padding-left: 18px; max-width: none; }
  .prose .prose__close p { font-size: 18px; max-width: none; }

  /* Stacked, a 4/5 frame at full shell width is a wall. The field goes
     landscape and the portrait keeps a sensible column of its own. */
  .about-split--story .about-split__media { aspect-ratio: 5 / 4; position: static; }
  .about-split--prac .about-split__aside { max-width: 440px; }

  /* Stacked, the raised tier has nothing to sit proud of. */
  .tiers { padding: 72px var(--gutter) 88px; }
  .tiers__grid { grid-template-columns: 1fr; gap: 28px; }
  .tier--lift { margin-top: 0; }

  .site-footer__top { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col .site-footer__heading { min-height: 0; }
}

@media (max-width: 900px) {
  /* Six items and a button will not sit in a phone-width row at any gap, so
     the nav folds into a drawer under a hamburger. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .site-header__inner {
    padding: 16px var(--gutter);
    gap: 16px;
  }
  .site-header__brand img { height: 40px; }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    padding: 8px var(--gutter) 32px;
    background: var(--cream);
    border-bottom: 1px solid var(--rule-stone-18);
    box-shadow: 0 24px 40px rgba(75, 74, 67, .12);
  }
  .is-nav-open .site-nav { display: flex; }

  .site-nav > a {
    padding: 17px 0;
    border-bottom: 1px solid var(--rule-stone-14);
  }
  .site-nav .btn {
    margin-top: 24px;
    padding: 17px 28px;
    text-align: center;
    border-bottom: 0;
  }

  /* The hover panel becomes an in-flow accordion; its ::after hover bridge
     and the desktop caret have nothing to do here. */
  .nav-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--rule-stone-14);
  }
  .nav-drop::after { display: none; }
  .nav-drop__link { padding: 17px 0; }
  .nav-drop__toggle { display: inline-flex; }

  .nav-drop__panel {
    position: static;
    transform: none;
    display: none;
    width: 100%;
    min-width: 0;
    padding: 4px 0 22px;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-drop.is-open .nav-drop__panel { display: block; }
  /* :hover must not reopen the accordion under a stray touch-hover. */
  .nav-drop:hover .nav-drop__panel,
  .nav-drop:focus-within .nav-drop__panel { opacity: 1; visibility: visible; }

  .nav-drop__groups { grid-template-columns: 1fr; gap: 26px; }
  .nav-drop__list { gap: 15px; }
  .nav-drop__list a { padding-left: 14px; }
  .nav-drop__heading { margin-bottom: 0; }
  .nav-drop__group .nav-drop__heading { margin-bottom: 14px; }
  .nav-drop__all { margin-top: 22px; }
  .nav-drop__all a { padding-left: 14px; }

  body.has-nav-open { overflow: hidden; }
}

@media (max-width: 860px) {
  .triad__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 72px var(--gutter);
  }

  /* Two up rather than one: a full-width 4/5 card is a slab at this width and
     turns fifteen services into an unreadable amount of scrolling. */
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
  .services__head { margin-bottom: 44px; }
  .intro-facts { gap: 20px 28px; }
  .services__inner { padding: 80px var(--gutter) 96px; }
  .services--continued .services__inner { padding-top: 56px; }
  .services__action { margin-top: 48px; }

  .philosophy { padding: 96px 24px 88px; }
  .founding__inner { padding: 88px 24px; }
  .founding__list { grid-template-columns: 1fr; gap: 0; }
  .founding__item + .founding__item { margin-top: 28px; }
  .services-intro { padding: 110px var(--gutter) 88px; }
  .promise { padding: 96px 24px; }
  .why { padding: 88px 24px; }


  .steps__inner { padding: 72px var(--gutter); }
  .steps__list { margin-top: 40px; }
  .step { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }

  .related__inner { padding: 72px var(--gutter) 88px; }
  .related__head { margin-bottom: 40px; }

  .cta-band { padding: 96px 24px; }

  .prep__inner { padding: 72px var(--gutter); }
  .prep__grid { grid-template-columns: 1fr; margin-top: 40px; }

  .faqs__inner { padding: 72px var(--gutter) 88px; }
  .faq-group { margin-top: 40px; }

  .benefits__inner { padding: 72px var(--gutter); }
  .benefits__grid { grid-template-columns: 1fr; margin-top: 40px; gap: 36px; }

  .packages__inner { padding: 72px var(--gutter); }
  .packages__grid { grid-template-columns: 1fr; margin-top: 40px; }

  .tier { padding: 38px 30px; }
  .credits { padding: 32px 30px; }
}

@media (max-width: 640px) {
  :root { --gutter: 24px; }

  .services__grid { grid-template-columns: 1fr; gap: 44px; }
  .intro-facts { grid-template-columns: 1fr; gap: 22px; }
  .service__title { font-size: 23px; }

  .ticker { padding: 16px 0; }
  .ticker__item a { font-size: 11px; letter-spacing: .2em; }
  .ticker__item::after { margin: 0 20px; }

  /* Let the hero grow with its copy instead of holding 82vh. `relative`, not
     `static` — the ground and rings are absolute and would paint over
     unpositioned in-flow content. */
  .hero { height: auto; min-height: 0; padding: 120px 0 130px; }
  .hero__content { position: relative; inset: auto; }

  .split__actions { width: 100%; }
  .split__actions .btn { flex: 1 1 auto; text-align: center; }

  .facts { gap: 22px 36px; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 auto; text-align: center; }

  .site-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__inner { padding: 64px var(--gutter) 32px; gap: 48px; }
  .site-footer__bottom { flex-direction: column; gap: 12px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — the page's ambient loops are decorative, so settle them.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* The loops resolve to a settled frame rather than reverting to their
     untransformed base, which would stack all six lines flat on the dot. */
  .converge__line {
    animation: none;
    transform: rotate(var(--a)) translateX(56px);
    opacity: .55;
  }
  .promise__ring--1,
  .promise__ring--2,
  .promise__ring--3 { display: none; }

  /* A stopped marquee is a row cut off mid-name at both ends, so the names
     wrap into a settled, centred index instead. Nothing is clipped, so the
     edge fade goes with it; the second copy exists only for the loop. */
  .ticker { padding: 26px var(--gutter); }
  .ticker__viewport {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ticker__track { animation: none; transform: none; width: auto; }
  .ticker__row { flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  .ticker__row + .ticker__row { display: none; }
}