/* ============================================================
   AVANT GARDE DENTAL — services page
   Loads AFTER css/styles.css.

   Scoped with :has(.service-index) so it only affects the services
   page — no body class, no change to page()'s signature.

   Fixing three things:
   1. ~11rem of dead white between the title and the first service,
      from page-head padding stacking on section padding.
   2. The category name scrolls away while its own list runs on for
      another 800px.
   3. Four identical blocks with no sense of position or progress.
   ============================================================ */

/* --------------------------- compact head ------------------------------- */
body:has(.service-index) .page-head {
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.5rem);
}
body:has(.service-index) .page-head .lead { max-width: 46ch; }

/* --------------------------- sticky index ------------------------------- */
/* Occupies the gap the head used to waste, and gives the page a spine. */
.service-index {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
}
.service-index ol {
  display: flex;
  gap: clamp(1.1rem, 3vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.service-index ol::-webkit-scrollbar { display: none; }

.service-index a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: 1.05rem 0;
  font-family: var(--display);
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.service-index a .n {
  font-size: .75rem;
  letter-spacing: .1em;
  color: #94A6B5;
  transition: color var(--t-fast);
}
.service-index a:hover { color: var(--navy); }
.service-index a.is-active {
  color: var(--navy);
  border-bottom-color: var(--azure);
}
.service-index a.is-active .n { color: var(--azure); }

/* ------------------------- groups as chapters ---------------------------- */
/* Only the section that actually holds the groups — the CTA band below it
   keeps its own padding. */
body:has(.service-index) .section:has(.service-group) {
  padding-block: 0;
  counter-reset: svc;
}

body:has(.service-index) .service-group {
  counter-increment: svc;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr 1.45fr;
  scroll-margin-top: calc(var(--header-h) + 58px);
}
body:has(.service-index) .service-group:first-of-type { border-top: 0; }

/* The category name follows its own treatments down the screen instead of
   scrolling off and leaving a column of nothing. */
body:has(.service-index) .service-group > div:first-child {
  position: sticky;
  top: calc(var(--header-h) + 4.5rem);
  align-self: start;
}

body:has(.service-index) .service-group h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
body:has(.service-index) .service-group h2::before {
  content: "0" counter(svc);
  display: block;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--azure);
  margin-bottom: .9rem;
}
body:has(.service-index) .service-group > div:first-child p {
  font-size: .9375rem;
  max-width: 30ch;
}

/* A quiet count, so the reader knows how long the list is before reading it. */
.svc-count {
  display: inline-block;
  margin-top: 1.5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ------------------------------ the rows -------------------------------- */
/* The coloured dot was identical on all seventeen rows, so it carried no
   information. Replaced with a rule that draws across on hover. */
body:has(.service-index) .service-list li {
  padding: 1.1rem 0;
  position: relative;
}
body:has(.service-index) .service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-gradient);
  transition: width var(--t-slow);
}
body:has(.service-index) .service-list li:hover::before { width: 100%; }

body:has(.service-index) .service-list strong {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: .3rem;
}
body:has(.service-index) .service-list span {
  display: block;
  font-size: .9375rem;
  max-width: 56ch;
}

/* ----------------------------- responsive ------------------------------- */
@media (max-width: 900px) {
  body:has(.service-index) .service-group { grid-template-columns: 1fr; }
  body:has(.service-index) .service-group > div:first-child { position: static; }
  body:has(.service-index) .service-group > div:first-child p { max-width: none; }
  .svc-count { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.service-index) .service-list li::before { transition: none; }
}

/* Browsers without :has() (Firefox before 121) simply keep the current
   services page. The index bar and counts still render and still work. */

/* ============================================================
   Category picker (added by js/main.js section 8)
   Everything scoped to body.svc-tabs, so the no-JS page is
   untouched. These rules sit last on purpose — several tie with
   the :has() selectors above and win on source order.
   ============================================================ */

body.svc-tabs .service-index { display: none; }

body.svc-tabs .page-head { padding-bottom: clamp(1.25rem, 3vw, 2rem); }

.svc-picker { padding-block: clamp(1.5rem, 3.5vw, 2.75rem) 0; }

.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 1.4vw, 1.15rem);
}

/* ------------------------------ the card -------------------------------- */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: .55rem;
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  min-height: 15rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast);
}
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.svc-card:hover {
  border-color: #C8D2DC;
  box-shadow: 0 10px 28px rgba(10, 37, 64, .09);
  transform: translateY(-2px);
}
.svc-card:hover::before,
.svc-card.is-open::before { transform: scaleX(1); }
.svc-card:focus-visible { outline: 3px solid var(--azure); outline-offset: 3px; }

.svc-card.is-open {
  border-color: var(--navy);
  box-shadow: 0 10px 28px rgba(10, 37, 64, .12);
}

.svc-card-n {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--azure);
}
.svc-card-title {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.svc-card-desc {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--slate);
}
.svc-card-foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid var(--line);
}
.svc-card-count {
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #94A6B5;
}
.svc-card-go {
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--azure);
  border-bottom: 1.5px solid var(--azure);
  rotate: -45deg;
  transition: translate var(--t-fast);
}
.svc-card:hover .svc-card-go { translate: 3px 0; }
.svc-card.is-open .svc-card-go { rotate: 45deg; }

/* Once a panel is open the cards step back so the content leads. */
.svc-picker.is-compact .svc-card { min-height: 0; }
.svc-picker.is-compact .svc-card-desc { display: none; }
.svc-picker.is-compact .svc-card-foot { padding-top: .7rem; }

/* ------------------------------ the panel ------------------------------- */
/* .service-group is display:grid, which outranks the hidden attribute. */
body.svc-tabs .service-group[hidden] { display: none !important; }

body.svc-tabs .section.svc-panels { padding-block: 0 clamp(2rem, 4vw, 3rem); }

body.svc-tabs .svc-panels .service-group {
  border-top: 0;
  padding-block: clamp(2rem, 4vw, 3rem) 0;
  scroll-margin-top: calc(var(--header-h) + 20px);
  animation: svc-in 340ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes svc-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.svc-close {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 2rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--slate);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.svc-close:hover { border-color: var(--navy); color: var(--navy); }

/* ----------------------------- responsive ------------------------------- */
@media (max-width: 1000px) {
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-cards { grid-template-columns: 1fr; }
  .svc-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card::before, .svc-card-go { transition: none; }
  .svc-card:hover { transform: none; }
  body.svc-tabs .svc-panels .service-group { animation: none; }
}
/* ============================================================
   Panel interior — heading, media, numbered treatment cards
   ============================================================ */

body.svc-tabs .svc-panels .service-group {
  grid-template-columns: 1fr 1.15fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}

body.svc-tabs .svc-panels .service-group > div:first-child {
  position: static;
}

body.svc-tabs .svc-panels .service-group h2::before {
  content: attr(data-n) " / Services";
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
body.svc-tabs .svc-panels .service-group h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.03em;
}
body.svc-tabs .svc-panels .service-group h2::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 3px;
  border-radius: 3px;
  margin-top: 1.4rem;
  background: var(--brand-gradient);
}
body.svc-tabs .svc-panels .service-group > div:first-child p {
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.7;
}

.svc-media {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #F2F5F8 0%, #E4EAF0 100%);
  box-shadow: 0 2px 6px rgba(10, 37, 64, .05),
              0 18px 44px rgba(10, 37, 64, .09);
}
.svc-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% center;
}

body.svc-tabs .svc-panels .service-list {
  counter-reset: row;
  display: grid;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.svc-tabs .svc-panels .service-list li {
  counter-increment: row;
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 2rem;
  row-gap: .35rem;
  align-items: center;
  padding: 1.35rem 1.6rem;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .04),
              0 10px 26px rgba(10, 37, 64, .055);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
body.svc-tabs .svc-panels .service-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(10, 37, 64, .05),
              0 16px 36px rgba(10, 37, 64, .1);
}

body.svc-tabs .svc-panels .service-list li::before {
  content: counter(row, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  background: none;
  border-radius: 0;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--azure);
  transition: none;
}
body.svc-tabs .svc-panels .service-list li:hover::before { width: auto; }

body.svc-tabs .svc-panels .service-list li::after {
  content: "";
  position: absolute;
  left: calc(1.6rem + 3.5rem + 1rem);
  top: 1.35rem;
  bottom: 1.35rem;
  width: 1px;
  background: var(--line);
}

body.svc-tabs .svc-panels .service-list strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin-bottom: 0;
}
body.svc-tabs .svc-panels .service-list span {
  grid-column: 2;
  grid-row: 2;
  font-size: .9rem;
  line-height: 1.55;
  max-width: 44ch;
}

@media (max-width: 900px) {
  body.svc-tabs .svc-panels .service-group { grid-template-columns: 1fr; }
  .svc-media { max-width: 34rem; }
  body.svc-tabs .svc-panels .service-list li {
    grid-template-columns: 2.75rem 1fr;
    column-gap: 1.25rem;
    padding: 1.15rem 1.25rem;
  }
  body.svc-tabs .svc-panels .service-list li::after {
    left: calc(1.25rem + 2.75rem + .625rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.svc-tabs .svc-panels .service-list li { transition: none; }
  body.svc-tabs .svc-panels .service-list li:hover { transform: none; }
}

/* ============================================================
   Spacing pass — rhythm, column balance, compact rows
   Appended last so these win over the values above.
   ============================================================ */

/* --- room above and below the picker --- */
.svc-picker {
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(.5rem, 1.5vw, 1rem);
}
.svc-cards { gap: clamp(.85rem, 1.2vw, 1.1rem); }
.svc-card { min-height: 13rem; }

body.svc-tabs .section.svc-panels {
  padding-block: 0 clamp(3rem, 6vw, 5rem);
}
body.svc-tabs .svc-panels .service-group {
  padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}

/* --- column balance ---
   The image column was 1fr against 1.15fr, which on a wide screen made
   the picture nearly as wide as the list it was supporting. Fixed to a
   readable measure instead, so the list gets the remaining room. */
body.svc-tabs .svc-panels .service-group {
  grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* Title and image follow the list down instead of leaving a tall gap. */
@media (min-width: 1001px) {
  body.svc-tabs .svc-panels .service-group > div:first-child {
    position: sticky;
    top: calc(var(--header-h) + 1.75rem);
  }
}

body.svc-tabs .svc-panels .service-group h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.06;
}
body.svc-tabs .svc-panels .service-group h2::after { margin-top: 1.1rem; }
body.svc-tabs .svc-panels .service-group > div:first-child p {
  max-width: 32ch;
  font-size: .9375rem;
  line-height: 1.65;
  margin-top: 1.25rem !important;
}

/* --- media: shorter crop, so the column isn't 600px tall --- */
.svc-media { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.svc-media img {
  aspect-ratio: 5 / 4;
  max-height: 22rem;
}

/* --- treatment rows: compact and consistently filled --- */
body.svc-tabs .svc-panels .service-list { gap: .6rem; }

body.svc-tabs .svc-panels .service-list li {
  grid-template-columns: 3rem 1fr;
  column-gap: 1.75rem;
  row-gap: .25rem;
  padding: 1.15rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .035),
              0 6px 18px rgba(10, 37, 64, .05);
}
body.svc-tabs .svc-panels .service-list li::before { font-size: 1.45rem; }
body.svc-tabs .svc-panels .service-list li::after {
  left: calc(1.5rem + 3rem + .875rem);
  top: 1.15rem;
  bottom: 1.15rem;
}
body.svc-tabs .svc-panels .service-list strong { font-size: 1rem; }

/* The 44ch cap left a wide empty margin inside every card. Let the text
   use the row, and the row itself provides the measure. */
body.svc-tabs .svc-panels .service-list span {
  font-size: .875rem;
  line-height: 1.5;
  max-width: none;
}

/* --- reclaim the outer margins on very wide screens --- */
@media (min-width: 1400px) {
  body.svc-tabs .svc-panels .service-group {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  }
  body.svc-tabs .svc-panels .service-list span { max-width: 62ch; }
}

@media (max-width: 1000px) {
  body.svc-tabs .svc-panels .service-group > div:first-child {
    position: static;
  }
  .svc-media img { max-height: 20rem; }
}

/* The X-ray is a self-contained plate with its own glow border — cropping
   it cuts the frame off, so this one gets contained and a darker ground. */
#preventive .svc-media {
  background: linear-gradient(160deg, #E8EDF2 0%, #D8E0E8 100%);
}
#preventive .svc-media img {
  object-fit: contain;
  aspect-ratio: 3 / 2;
  padding: 1.25rem;
}

/* ============================================================
   "What brings you in?" finder
   ============================================================ */
.svc-finder { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }

.svc-finder-box {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: 18px;
  background: linear-gradient(150deg, #F4F7FA 0%, #E9EFF5 100%);
  border: 1px solid var(--line);
}

.svc-finder-q {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
}
.svc-finder-sub {
  margin: .6rem 0 0;
  font-size: .9375rem;
  color: var(--slate);
  max-width: 52ch;
}

.svc-finder-form {
  display: flex;
  gap: .65rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.svc-finder-form input {
  flex: 1 1 22rem;
  min-width: 0;
  padding: .95rem 1.2rem;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.svc-finder-form input::placeholder { color: #9AAAB8; }
.svc-finder-form input:focus {
  outline: none;
  border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(10, 132, 232, .14);
}
.svc-finder-form .btn { flex: 0 0 auto; }

.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.svc-chip {
  padding: .5rem 1rem;
  font: inherit;
  font-size: .8125rem;
  color: var(--slate);
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast),
              background var(--t-fast);
}
.svc-chip:hover {
  color: var(--navy);
  border-color: #B9C6D2;
  background: #fff;
}
.svc-chip:focus-visible { outline: 3px solid var(--azure); outline-offset: 2px; }

.svc-finder-result:empty { display: none; }
.svc-finder-result {
  margin: 1.25rem 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--navy);
}
.svc-finder-result strong { font-weight: 600; }
.svc-finder-note {
  display: block;
  margin-top: .4rem;
  font-size: .8125rem;
  color: var(--slate);
}

/* --- matched treatment rows --- */
body.svc-tabs .svc-panels .service-list li.is-match {
  box-shadow: 0 0 0 2px var(--azure),
              0 6px 22px rgba(10, 132, 232, .16);
}
.svc-tag {
  position: absolute;
  top: .7rem;
  right: .9rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #fff;
  font-family: var(--display);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .svc-finder-form input { flex: 1 1 100%; }
  .svc-finder-form .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-finder-form input, .svc-chip { transition: none; }
}

/* Book-this-service button under the finder result */
.svc-finder-cta {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.svc-finder-cta .btn { font-size: .9375rem; }
.svc-cta-note {
  font-size: .8125rem;
  color: var(--slate);
}

/* ============================================================
   Treatment selection tray
   ============================================================ */

/* Booking now lives in the tray. */
.svc-finder-cta { display: none !important; }

/* --- selectable rows --- */
body.svc-tabs .svc-panels .service-list li {
  cursor: pointer;
  padding-right: 7.5rem;
}
body.svc-tabs .svc-panels .service-list li.is-picked {
  box-shadow: 0 0 0 2px var(--azure),
              0 8px 24px rgba(10, 132, 232, .16);
}

.svc-add {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  translate: 0 -50%;
  padding: .45rem 1rem;
  font: inherit;
  font-family: var(--display);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), background var(--t-fast);
}
.service-list li:hover .svc-add,
.service-list li:focus-within .svc-add { opacity: 1; }
.svc-add:hover { color: var(--navy); border-color: var(--navy); }
.svc-add:focus-visible { opacity: 1; outline: 3px solid var(--azure); outline-offset: 2px; }

.service-list li.is-picked .svc-add {
  opacity: 1;
  color: #fff;
  border-color: transparent;
  background: var(--brand-gradient);
}

/* The Relevant tag would collide with the Add pill. */
.svc-tag { top: .55rem; right: 1.1rem; }
body.svc-tabs .svc-panels .service-list li .svc-add { top: auto; bottom: .7rem; translate: none; }
body.svc-tabs .svc-panels .service-list li:not(:has(.svc-tag)) .svc-add {
  top: 50%; bottom: auto; translate: 0 -50%;
}

/* --- the tray --- */
.svc-tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgba(10, 37, 64, .1);
  transform: translateY(110%);
  transition: transform 280ms cubic-bezier(.22,.61,.36,1);
}
.svc-tray.is-open { transform: none; }
body.has-tray { padding-bottom: 7rem; }

.svc-tray-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.svc-tray-main { flex: 1 1 auto; min-width: 0; }

.svc-tray-title {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #94A6B5;
}
.svc-tray-items {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-tray-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .38rem .5rem .38rem .85rem;
  font-size: .8125rem;
  color: var(--navy);
  background: #F1F5F9;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.svc-tray-x {
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  color: #94A6B5;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.svc-tray-chip:hover .svc-tray-x { opacity: 1; }
.svc-tray-x:hover { color: #fff; background: #C0392B; }
.svc-tray-x:focus-visible { opacity: 1; outline: 2px solid var(--azure); }

.svc-tray-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.svc-tray-clear {
  font: inherit;
  font-size: .8125rem;
  color: var(--slate);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.svc-tray-clear:hover { color: var(--navy); }

@media (max-width: 760px) {
  .svc-tray-inner { flex-direction: column; align-items: stretch; gap: .85rem; }
  .svc-tray-actions { justify-content: space-between; }
  .svc-tray-book { flex: 1 1 auto; text-align: center; }
  .svc-tray-x { opacity: 1; }        /* no hover on touch */
  .svc-add { opacity: 1; }
  body.has-tray { padding-bottom: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-tray { transition: none; }
}

/* Check mark instead of "Added"; smaller Relevant tag */
.service-list li.is-picked .svc-add { display: none; }
.svc-check {
  position: absolute;
  top: .6rem;
  right: .7rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 2px 6px rgba(10, 132, 232, .3);
  opacity: 0;
  scale: .6;
  transition: opacity var(--t-fast), scale var(--t-fast);
  pointer-events: none;
}
.svc-check svg { width: .75rem; height: .75rem; display: block; }
.service-list li.is-picked .svc-check { opacity: 1; scale: 1; }
.svc-tag {
  top: .72rem;
  right: .7rem;
  padding: .15rem .45rem;
  font-size: .5625rem;
  letter-spacing: .1em;
  background: rgba(10, 132, 232, .1);
  color: var(--azure);
  box-shadow: none;
}
.service-list li.is-picked .svc-tag { right: 2.5rem; }
body.svc-tabs .svc-panels .service-list li { padding-right: 6.5rem; }

/* ============================================================
   Badge positions, corrected. Three things wanted the same
   corner — this gives each its own place.
     check      top-right, always
     Relevant   bottom-right
     Add        right edge, vertically centred, hover only
   ============================================================ */

body.svc-tabs .svc-panels .service-list li {
  padding-right: 8rem;
  padding-bottom: 2.4rem;
}

/* --- check: pinned to the top-right corner --- */
body.svc-tabs .svc-panels .service-list li .svc-check,
.svc-check {
  position: absolute !important;
  top: .55rem !important;
  right: .55rem !important;
  bottom: auto !important;
  left: auto !important;
  translate: none !important;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-gradient);
  box-shadow: 0 2px 6px rgba(10, 132, 232, .3);
  opacity: 0;
  scale: .6;
  pointer-events: none;
  transition: opacity var(--t-fast), scale var(--t-fast);
}
.service-list li.is-picked .svc-check { opacity: 1; scale: 1; }

/* --- Relevant: bottom-right, out of the check's way --- */
body.svc-tabs .svc-panels .service-list li .svc-tag,
.svc-tag {
  position: absolute !important;
  top: auto !important;
  bottom: .55rem !important;
  right: .7rem !important;
  padding: .12rem .45rem;
  font-size: .5625rem;
  letter-spacing: .1em;
  background: rgba(10, 132, 232, .1);
  color: var(--azure);
  box-shadow: none;
}

/* --- Add: middle-right, and gone once the row is picked --- */
body.svc-tabs .svc-panels .service-list li .svc-add,
body.svc-tabs .svc-panels .service-list li:not(:has(.svc-tag)) .svc-add,
.svc-add {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  right: 1rem !important;
  translate: 0 -50% !important;
}
body.svc-tabs .svc-panels .service-list li.is-picked .svc-add {
  display: none !important;
}

/* Video panels match the still they replace */
.svc-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  max-height: 22rem;
  object-fit: cover;
  object-position: 62% center;
}
#restorative .svc-media video,
#cosmetic .svc-media video { object-position: center center; }

/* The X-ray plate has its own frame — contain it rather than crop, same
   as the still it replaces. */
#preventive .svc-media video {
  object-fit: contain;
  aspect-ratio: 3 / 2;
  max-height: none;
  padding: 1.25rem;
  object-position: center center;
}

.svc-tray-contact { display: flex; gap: .6rem; flex-wrap: wrap; }
.svc-tray-contact .btn { font-size: .9375rem; }
.svc-sms-note {
  flex-basis: 100%;
  margin: .6rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--slate);
}
@media (max-width: 760px) {
  .svc-tray-contact { width: 100%; }
  .svc-tray-contact .btn { flex: 1 1 auto; text-align: center; }
}

/* Schedule page: composed-message box */
.sched-copy {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #F4F7FA;
}
.sched-copy-head {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--navy);
}
.sched-copy-msg {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--slate);
}

.sched-copy.is-flash {
  animation: sched-flash 900ms ease-out;
}
@keyframes sched-flash {
  0%   { border-color: var(--azure); box-shadow: 0 0 0 4px rgba(10,132,232,.18); }
  100% { border-color: var(--line);  box-shadow: 0 0 0 0 rgba(10,132,232,0); }
}
@media (prefers-reduced-motion: reduce) {
  .sched-copy.is-flash { animation: none; }
}

/* The tray's copy note was easy to miss beside the buttons. */
.svc-sms-note {
  padding: .55rem .8rem;
  border-radius: 8px;
  background: #F1F5F9;
  border: 1px solid var(--line);
}
.svc-sms-note.is-flash {
  animation: sched-flash 900ms ease-out;
}
@media (min-width: 761px) {
  .svc-sms-note { flex-basis: auto; max-width: 32rem; }
}

/* ============================================================
   MOBILE PASS — appended last so it wins.
   The spacing pass set the panel grid outside a media query,
   which overrode the one-column mobile layout below it.
   ============================================================ */
@media (max-width: 1000px) {
  body.svc-tabs .svc-panels .service-group {
    grid-template-columns: 1fr !important;
    column-gap: 0;
    row-gap: 1.75rem;
  }
  body.svc-tabs .svc-panels .service-group > div:first-child {
    position: static !important;
  }
  body.svc-tabs .svc-panels .service-list { align-self: auto; }
  .svc-media { max-width: 100%; }
  .svc-media img,
  .svc-media video { max-height: 15rem; }
}

/* Nothing should ever scroll sideways. */
@media (max-width: 1000px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  body.svc-tabs .svc-panels .service-list li {
    padding-right: 3.5rem;
    padding-bottom: 2.6rem;
  }
  body.svc-tabs .svc-panels .service-list li::after { display: none; }
  body.svc-tabs .svc-panels .service-list li {
    grid-template-columns: 2.25rem 1fr;
    column-gap: .9rem;
  }
  .svc-add { display: none !important; }   /* tap the row instead */
}

/* --- tray: stack cleanly, buttons full width --- */
@media (max-width: 760px) {
  .svc-tray-inner {
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  }
  .svc-tray-title { margin-bottom: .35rem; }
  .svc-tray-items { max-height: 5.5rem; overflow-y: auto; }
  .svc-tray-contact { flex-direction: column; width: 100%; }
  .svc-tray-contact .btn { width: 100%; text-align: center; }
  .svc-tray-actions { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
  .svc-tray-clear { align-self: flex-end; }
  .svc-tray-x { opacity: 1; }
  body.has-tray { padding-bottom: 15rem; }
}

/* --- finder --- */
@media (max-width: 600px) {
  .svc-finder-box { padding: 1.25rem; }
  .svc-chips { gap: .4rem; }
  .svc-chip { font-size: .75rem; padding: .45rem .8rem; }
}