/* Services — editorial index (layout "B", chosen by the user; type system from
   design-refs/design-md/oura.md: "serif for feeling, sans for facts").
   Desktop: a numbered list of large Newsreader names on the left; a sticky preview on
   the right (photo + category + description) follows the hovered/focused row, with a
   crossfade and a slow settle-zoom. The active row nudges right and draws a gold rule.
   Mobile: plain vertical list, each row = thumbnail + name + two-line description,
   so normal vertical scrolling is all it needs. Logic: assets/js/svc.js. */
.svc { background: var(--sand, #F6ECD8); }

.svc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr);
  gap: clamp(40px, 5.5vw, 104px);
  align-items: start;
}
.svc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 20px;
  padding: clamp(18px, 1.7vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none;
}
.svc__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.svc__num {
  font-size: var(--fs-eyebrow, 12px);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-faint);
  transition: color .3s ease;
}
.svc__thumb { display: none; }
.svc__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.svc__name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(28px, 2.7vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  transition: translate .6s cubic-bezier(.16, 1, .3, 1), color .3s ease;
}
/* desktop: the description lives in the preview; keep it for screen readers */
.svc__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.svc__cat {
  font-size: var(--fs-eyebrow, 12px);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* the arrow chip = the booking pill's icon: the logo tooth slides out to the top-right
   and an arrow slides in from the bottom-left on hover/focus (same motion as .book-pill__icon) */
.svc__arrow {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(206, 158, 69, .5), 0 10px 24px -14px rgba(var(--shadow-tint), .5);
  overflow: hidden;
  transition: background-color .35s ease;
}
.svc__arrow img {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 30px;
  margin: auto;
  object-fit: contain;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.svc__arrow svg {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-36px, 36px);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.svc__row:hover .svc__arrow img,
.svc__row:focus-visible .svc__arrow img { transform: translate(36px, -36px); }
.svc__row:hover .svc__arrow svg,
.svc__row:focus-visible .svc__arrow svg { transform: none; }

.svc__row.is-active::after,
.svc__row:focus-visible::after { transform: scaleX(1); }
.svc__row.is-active .svc__num,
.svc__row:focus-visible .svc__num { color: var(--gold); }
.svc__row.is-active .svc__name,
.svc__row:focus-visible .svc__name { translate: 14px 0; }
.svc__row.is-active .svc__arrow,
.svc__row:focus-visible .svc__arrow { background: var(--light-yellow); }
.svc__row:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

/* sticky preview */
.svc__preview {
  position: sticky;
  top: 112px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.svc__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg, 32px);
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 40px 70px -50px rgba(var(--shadow-tint), .6);
}
.svc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.08;
  transition: opacity .7s ease, scale 1.6s cubic-bezier(.16, 1, .3, 1);
}
.svc__img.is-on { opacity: 1; scale: 1; }
.svc__tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(253, 247, 235, .82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.svc__caption {
  margin: 0;
  max-width: 40ch;
  min-height: 3.3em;
  font-size: var(--fs-body, 16px);
  line-height: 1.65;
  color: var(--ink-soft);
  transition: opacity .35s ease;
}
.svc__caption.is-swapping { opacity: 0; }


/* Home: one row per category (client round, 2026-10-26). Under the big name, a quiet line
   naming what the category holds, so the four-way split reads at a glance. */
.svc__incl {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  transition: translate .6s cubic-bezier(.16, 1, .3, 1);
}
.svc__row.is-active .svc__incl,
.svc__row:focus-visible .svc__incl { translate: 14px 0; }

/* /services: the full list in the same four groups, each opened by its category name */
.svc__group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(36px, 3.4vw, 52px) 0 14px;
  border-bottom: 1px solid var(--line);
}
.svc__group:first-child { padding-top: 18px; }
.svc__group-title {
  margin: 0;
  font-size: var(--fs-eyebrow, 12px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.svc__group .link-arrow { font-size: 14px; }
/* the group heading (or a one-category hub page) already names the category; the preview tag still shows it */
.svc__list--grouped .svc__cat { visibility: hidden; }

/* stagger the rows on reveal */
.js .svc__list[data-reveal] .svc__item,
.js .svc__list[data-reveal] .svc__group { opacity: 0; translate: 0 24px; transition: opacity .8s ease calc(var(--i) * 70ms + .1s), translate 1s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 70ms + .1s); }
.js .svc__list.is-revealed .svc__item,
.js .svc__list.is-revealed .svc__group { opacity: 1; translate: 0 0; }

/* tablet & phone: a plain vertical list with thumbnails, no hover dependency */
@media (max-width: 899.98px) {
  .svc__body { grid-template-columns: 1fr; }
  .svc__preview { display: none; }
  .svc__row {
    grid-template-columns: 76px minmax(0, 1fr) 40px;
    gap: 16px;
    padding: 16px 0;
  }
  .svc__num, .svc__cat { display: none; }
  .svc__thumb {
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
  }
  .svc__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .svc__name { font-size: clamp(22px, 5.6vw, 28px); }
  .svc__text {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip-path: none;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .svc__arrow { width: 40px; height: 40px; }
  .svc__arrow img { width: 30px; height: 27px; }
  .svc__row.is-active::after { transform: scaleX(0); }
  .svc__row.is-active .svc__name { translate: none; }
  .svc__row.is-active .svc__num { color: inherit; }
  .svc__row.is-active .svc__arrow { background: var(--cream); }
  .svc__row.is-active .svc__incl { translate: none; }
  /* category rows: the treatment line says more than the blurb (single treatments keep it) */
  .svc__incl + .svc__text { display: none; }
  .svc__incl { font-size: 13px; }
  .svc__group { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .svc__img, .svc__name, .svc__row::after, .svc__caption, .svc__arrow img, .svc__arrow svg { transition: none; }
  .js .svc__list[data-reveal] .svc__item, .js .svc__list[data-reveal] .svc__group { opacity: 1; translate: none; transition: none; }
}