/* Treatments page: uses the colour variables from style.css */

.treatments-intro {
  background: linear-gradient(115deg, #e3d1c0, #f8f0e9);
  text-align: center;
  padding: 72px 6%;
}
.treatments-intro h1 {
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  margin: 16px 0 20px;
}
.treatments-intro p {
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 15px;
}

/* ---------- One treatment ----------
   1. centred title
   2. photo (same size every time) with "Service provided" beside it
   3. Benefits and Best for clients side by side underneath
   4. (repair only) K18 or Fusion guide across the full width
   5. centred Book button                                            */
.treatment-list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 6%;
}
.treatment {
  padding: 64px 0;
  border-bottom: 1px solid #dfc5a5;
}
.treatment:last-child {
  border-bottom: 0;
}
.treatment-title {
  text-align: center;
  font-size: clamp(34px, 3.6vw, 48px);
  margin: 0 0 36px;
}

/* photo + service provided, centred as a pair */
.treatment-top {
  display: grid;
  grid-template-columns: 340px minmax(0, 560px);
  gap: 56px;
  justify-content: center;
  align-items: center;
}
.treatment-service {
  text-align: left;
}
.treatment-service p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 14px;
}
.treatment-service strong {
  font-weight: 500;
}

/* Benefits | Best for clients */
.treatment-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 44px;
}
.tx-card,
.choose-col {
  background: #fffaf5;
  border: 1px solid #dfc5a5;
  border-radius: 8px;
  padding: 24px 28px 18px;
  text-align: left;
}
.tx-sub {
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.tx-list {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.8;
}
.tx-list li {
  margin-bottom: 8px;
}

/* K18 or Fusion guide: full width, centred heading, two columns, note */
.choose {
  margin-top: 56px;
  text-align: center;
}
.choose-title {
  font-size: clamp(28px, 3vw, 38px);
  margin: 0 0 28px;
}
.choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.choose-col h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 14px;
}
.choose-col .tx-list {
  font-size: 14px;
}
.choose-note {
  width: 100%;
  margin: 30px 0 0;
  padding: 20px 28px;
  background: #f5e6d3;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.9;
}
.choose-note a {
  color: var(--gold);
  text-decoration: underline;
}

.treatment-time {
  text-align: center;
  margin: 36px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.treatment-time .tx-sub {
  display: block;
  margin-bottom: 6px;
}
.treatment-time small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.7;
}
.treatment-book {
  text-align: center;
  margin-top: 24px;
}
.treatment-book .btn {
  border-radius: 5px;
}

/* ---------- Before / after slider: fixed size, never stretches ---------- */
.ba-slider {
  position: relative;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  background: #d6bba6;
  box-shadow: 0 8px 22px #432b1726;
  --pos: 50%;
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.ba-before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  z-index: 3;
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
.ba-handle::after {
  content: "\2039 \203A";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  border: 3px solid #fff;
  display: grid;
  place-items: center;
  font:
    500 22px/1 Montserrat,
    sans-serif;
  letter-spacing: 2px;
  box-shadow: 0 2px 8px rgba(64, 40, 22, 0.3);
}
.ba-slider input:focus-visible ~ .ba-handle::after {
  outline: 3px solid #382b20;
  outline-offset: 3px;
}
.ba-label {
  position: absolute;
  top: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(56, 43, 32, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  pointer-events: none;
}
.ba-l {
  left: 14px;
}
.ba-r {
  right: 14px;
}

/* ---------- Bottom call to action ---------- */
.treatments-cta {
  background: #e9d6c5;
  text-align: center;
  padding: 64px 6%;
}
.treatments-cta h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  margin: 0 0 14px;
}
.treatments-cta p {
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.9;
  font-size: 14px;
}
.treatments-cta .btn {
  border-radius: 5px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .treatment-top {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 36px;
  }
  .ba-slider {
    width: 300px;
  }
}

/* ---------- Phone: everything stacks, still centred and tidy ---------- */
@media (max-width: 760px) {
  .treatments-intro {
    padding: 48px 6%;
  }
  .treatment {
    padding: 44px 0;
  }
  .treatment-title {
    margin-bottom: 26px;
  }
  .treatment-top {
    grid-template-columns: 1fr;
    gap: 26px;
    justify-items: center;
  }
  .ba-slider {
    width: 100%;
    max-width: 320px;
  }
  .treatment-details,
  .choose-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .treatment-details {
    margin-top: 32px;
  }
  .choose {
    margin-top: 40px;
  }
  .tx-card,
  .choose-col {
    padding: 20px 20px 14px;
  }
  .choose-note {
    padding: 18px 20px;
  }
}