/* ==========================================================================
   AUM Service Card

   Five layouts on one set of fields. Prices are pulled out of the description
   into their own rows -- the two things a visitor chooses between should not
   be running text inside a paragraph.
   ========================================================================== */

.aum-sv {
  width: 100%;
  font-family: var(--aum-font, Lato, sans-serif);
  background: var(--aum-sv-bg, transparent);
  padding-block: var(--aum-sv-pad-y, 88px);
}

.aum-sv__nocontainer { width: 100%; padding-inline: var(--aum-container-padding, 24px); }

.aum-sv.is-background-contained {
  max-width: var(--aum-container, 1140px);
  margin-inline: auto;
}

.aum-sv.has-divider { border-bottom: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8)); }

/* --- Copy ----------------------------------------------------------------- */

.aum-sv__eyebrow {
  font-size: var(--aum-sv-eyebrow, 12px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aum-sv-eyebrow-color, var(--aum-accent-deep, #7b6a58));
  margin: 0 0 12px;
}

.aum-sv__title {
  font-size: clamp(20px, 3vw, var(--aum-sv-title, 30px));
  font-weight: 300;
  letter-spacing: var(--aum-sv-title-track, .14em);
  text-transform: uppercase;
  color: var(--aum-sv-title-color, var(--aum-gray, #9b9b9b));
  line-height: 1.25;
  margin: 0 0 18px;
}

.aum-sv__rule {
  border: 0;
  border-top: 2px solid var(--aum-sv-rule-color, var(--aum-accent, #d7c6b2));
  width: 44px;
  margin: 0 0 22px;
  opacity: 1;
}

.aum-sv__body {
  font-size: var(--aum-sv-body, 16px);
  line-height: var(--aum-sv-body-leading, 1.75);
  color: var(--aum-sv-body-color, var(--aum-text, #2b2b2b));
  margin: 0 0 30px;
}

.aum-sv__body strong { color: var(--aum-black, #000); font-weight: 700; }

/* --- Media ---------------------------------------------------------------- */

.aum-sv__media {
  position: relative;
  overflow: hidden;
  background: var(--aum-soft, #f7f7f7);
  aspect-ratio: var(--aum-sv-aspect, 4/3);
}

.aum-sv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}

.aum-sv.has-zoom:hover .aum-sv__media img { transform: scale(1.03); }

/* --- Prices ---------------------------------------------------------------- */

.aum-sv__prices { list-style: none; margin: 0 0 30px; padding: 0; }

.aum-sv__prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8));
}

.aum-sv__prices li:first-child {
  border-top: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8));
}

.aum-sv__dur {
  font-size: var(--aum-sv-dur, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aum-sv-dur-color, var(--aum-gray, #9b9b9b));
}

.aum-sv__amt {
  font-size: var(--aum-sv-price, 26px);
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--aum-sv-price-color, var(--aum-black, #000));
  line-height: 1;
}

.aum-sv__pricerow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 0 0 28px;
  align-items: baseline;
}

.aum-sv__pair { display: flex; align-items: baseline; gap: 10px; }
.aum-sv__pricerow .aum-sv__amt { font-size: calc(var(--aum-sv-price, 26px) * .85); }

/* --- Button --------------------------------------------------------------- */

.aum-sv__btn {
  display: inline-block;
  text-decoration: none;
  font-size: var(--aum-fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 19px 44px;
  border-radius: 0;
  border: 1px solid var(--aum-sv-btn-bg, var(--aum-black, #000));
  background: var(--aum-sv-btn-bg, var(--aum-black, #000));
  color: var(--aum-sv-btn-color, var(--aum-white, #fff));
  transition: background var(--aum-transition, .25s ease),
              border-color var(--aum-transition, .25s ease),
              color var(--aum-transition, .25s ease);
}

.aum-sv__btn.is-block { display: block; width: 100%; text-align: center; }

.aum-sv__btn:hover,
.aum-sv__btn:focus-visible {
  background: var(--aum-accent-deep, #7b6a58);
  border-color: var(--aum-accent-deep, #7b6a58);
  color: var(--aum-white, #fff);
}

.aum-sv__btn.is-ghost {
  background: transparent;
  color: var(--aum-sv-btn-color, var(--aum-gray, #9b9b9b));
  border-color: var(--aum-sv-line, var(--aum-border, #e8e8e8));
}

.aum-sv__btn.is-ghost:hover {
  background: var(--aum-black, #000);
  border-color: var(--aum-black, #000);
  color: var(--aum-white, #fff);
}

.aum-sv__btn.is-white {
  background: var(--aum-sv-btn-bg, var(--aum-white, #fff));
  color: var(--aum-sv-btn-color, var(--aum-black, #000));
  border-color: var(--aum-sv-btn-bg, var(--aum-white, #fff));
}

.aum-sv__btn.is-white:hover {
  background: var(--aum-accent, #d7c6b2);
  border-color: var(--aum-accent, #d7c6b2);
  color: var(--aum-black, #000);
}

.aum-sv__note {
  font-size: var(--aum-fs-xs);
  letter-spacing: .04em;
  color: var(--aum-sv-dur-color, var(--aum-gray, #9b9b9b));
  margin: 14px 0 0;
}

/* --- Rail ----------------------------------------------------------------
   Booking separated from the description, so reading and deciding are two
   distinct areas rather than one column of mixed content.
   -------------------------------------------------------------------------- */

.aum-sv__rail {
  border: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8));
  padding: 30px;
  background: var(--aum-sv-panel-bg, var(--aum-white, #fff));
}

.aum-sv__rail .aum-sv__prices { margin-bottom: 24px; }
.aum-sv__rail .aum-sv__prices li:first-child { border-top: 0; padding-top: 0; }

.aum-sv__rail-title {
  font-size: var(--aum-fs-2xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aum-gray, #9b9b9b);
  margin: 0 0 16px;
}

.aum-sv.is-layout-rail .aum-sv__media { margin-bottom: 44px; }

/* --- Overlay -------------------------------------------------------------- */

.aum-sv.is-layout-overlay { padding-block: 0; }
.aum-sv__stage { position: relative; }

.aum-sv.is-layout-overlay .aum-sv__media {
  aspect-ratio: auto;
  height: clamp(420px, 55vw, 640px);
}

.aum-sv__panel-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 40px 0;
}

.aum-sv__panel {
  background: var(--aum-sv-panel-bg, rgba(255, 255, 255, .96));
  padding: 44px;
}

.aum-sv__panel > *:last-child { margin-bottom: 0; }

/* --- Compact row ---------------------------------------------------------- */

.aum-sv.is-layout-row { padding-block: 0; }

.aum-sv__compact {
  padding-block: 36px;
  border-bottom: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8));
}

.aum-sv.is-layout-row .aum-sv__eyebrow { margin-bottom: 8px; }
.aum-sv.is-layout-row .aum-sv__title { font-size: clamp(18px, 2vw, 22px); margin-bottom: 12px; }
.aum-sv.is-layout-row .aum-sv__rule { display: none; }
.aum-sv.is-layout-row .aum-sv__body { font-size: calc(var(--aum-sv-body, 16px) * .94); margin-bottom: 0; }
.aum-sv.is-layout-row .aum-sv__media { aspect-ratio: 16/10; }

.aum-sv__compact-book .aum-sv__prices { margin-bottom: 20px; }
.aum-sv__compact-book .aum-sv__prices li { padding: 9px 0; }
.aum-sv__compact-book .aum-sv__amt { font-size: calc(var(--aum-sv-price, 26px) * .8); }

/* --- Band ----------------------------------------------------------------
   Only the colours change; the arrangement is the split layout.
   -------------------------------------------------------------------------- */

.aum-sv.is-layout-band .aum-sv__prices li {
  border-color: var(--aum-sv-line, rgba(255, 255, 255, .16));
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 991.98px) {
  .aum-sv { padding-block: var(--aum-sv-pad-y-m, 60px); }
  .aum-sv .row > [class*="col-"] + [class*="col-"] { margin-top: 8px; }

  /* The panel cannot sit on the image at this width without covering it. */
  .aum-sv__panel-wrap { position: static; padding: 0; }
  .aum-sv__panel { margin-top: -60px; position: relative; }
  .aum-sv.is-layout-overlay .aum-sv__media { height: 360px; }
  .aum-sv.is-layout-overlay { padding-bottom: var(--aum-sv-pad-y-m, 60px); }
}

@media (max-width: 767.98px) {
  .aum-sv__panel { padding: 28px; }
  .aum-sv__rail { padding: 24px; }
  .aum-sv__compact-book { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .aum-sv__media img { transition: none; }
  .aum-sv.has-zoom:hover .aum-sv__media img { transform: none; }
}


/* ==========================================================================
   TEXT-ONLY LAYOUTS

   Same fields, no image. The price takes over the visual weight the picture
   used to carry, which is why the lead price is set larger than any other
   type in the card.
   ========================================================================== */

/* --- Lead price ------------------------------------------------------------ */

.aum-sv__lead-price {
  font-size: calc(var(--aum-sv-price, 26px) * 1.35);
  font-weight: 300;
  letter-spacing: .01em;
  color: var(--aum-sv-price-color, var(--aum-black, #000));
  line-height: 1;
  margin: 0 0 6px;
}

.aum-sv__lead-dur {
  font-size: var(--aum-sv-dur, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aum-sv-dur-color, var(--aum-gray, #9b9b9b));
  margin: 0 0 24px;
}

/* --- Panel ---------------------------------------------------------------- */

.aum-sv.is-layout-panel,
.aum-sv.is-layout-panel-dark { padding-block: 0; }

.aum-sv__panel {
  border: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8));
  background: var(--aum-sv-panel-bg, var(--aum-white, #fff));
  padding: var(--aum-sv-panel-pad, 44px);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color var(--aum-transition, .25s ease);
}

.aum-sv__panel:hover { border-color: var(--aum-accent-deep, #7b6a58); }

/* Pinned, so buttons align across a row of panels with uneven copy. */
.aum-sv__panel .aum-sv__btn { margin-top: auto; }
.aum-sv__panel .aum-sv__note { margin-top: 14px; }

.aum-sv.is-layout-panel-dark .aum-sv__panel {
  background: var(--aum-sv-panel-bg, transparent);
  border-color: var(--aum-sv-line, rgba(255, 255, 255, .18));
}

/* A panel is one service. Several sit side by side by placing them in a row
   on the page, which keeps this block a single item rather than a list. */
.aum-bootstrap-column-block > .aum-sv.is-layout-panel,
.aum-bootstrap-column-block > .aum-sv.is-layout-panel-dark,
.col > .aum-sv.is-layout-panel,
.col > .aum-sv.is-layout-panel-dark { height: 100%; }

/* --- Price list row -------------------------------------------------------
   Both prices sit in one right-hand column: a price list wants one row per
   treatment, not one row per duration.
   -------------------------------------------------------------------------- */

.aum-sv.is-layout-list { padding-block: 0; }

.aum-sv__trow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8));
  transition: background var(--aum-transition, .25s ease);
}

.aum-sv.is-layout-list:first-of-type .aum-sv__trow {
  border-top: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8));
}

.aum-sv__trow:hover { background: rgba(0, 0, 0, .014); }

.aum-sv__tname { min-width: 0; }
.aum-sv__tname .aum-sv__eyebrow { margin-bottom: 6px; }
.aum-sv__tname .aum-sv__title { font-size: clamp(17px, 2vw, 20px); margin-bottom: 8px; }
.aum-sv__tname .aum-sv__rule { display: none; }
.aum-sv__tname .aum-sv__body { font-size: calc(var(--aum-sv-body, 16px) * .94); margin: 0; }

.aum-sv__tprice { text-align: right; white-space: nowrap; }

.aum-sv__tprice .aum-sv__amt {
  display: block;
  font-size: calc(var(--aum-sv-price, 26px) * .85);
}

.aum-sv__tprice .aum-sv__dur { display: block; margin: 5px 0 14px; }
.aum-sv__tprice .aum-sv__dur:last-child { margin-bottom: 0; }

.aum-sv__taction { white-space: nowrap; }
.aum-sv__taction .aum-sv__note { margin-top: 10px; white-space: normal; }

/* --- Centred -------------------------------------------------------------- */

.aum-sv__centred {
  max-width: var(--aum-sv-centred-max, 640px);
  margin-inline: auto;
  text-align: center;
}

.aum-sv__centred .aum-sv__rule { margin-inline: auto; }
.aum-sv__centred .aum-sv__prices li { justify-content: center; gap: 14px; }
.aum-sv__centred .aum-sv__pricerow { justify-content: center; }
.aum-sv__centred .aum-sv__lead-price,
.aum-sv__centred .aum-sv__lead-dur { text-align: center; }

/* --- Stack ---------------------------------------------------------------- */

.aum-sv.is-layout-stack { padding-block: 0; }

.aum-sv__srow {
  padding: 34px 0;
  border-top: 1px solid var(--aum-sv-line, var(--aum-border, #e8e8e8));
}

.aum-sv.is-layout-stack:first-of-type .aum-sv__srow { border-top: 0; }

.aum-sv__srow .aum-sv__title { font-size: clamp(19px, 2.4vw, 24px); margin-bottom: 10px; }
.aum-sv__srow .aum-sv__eyebrow { margin-bottom: 6px; }
.aum-sv__srow .aum-sv__rule { display: none; }
.aum-sv__srow .aum-sv__body { margin-bottom: 0; }
.aum-sv__srow .aum-sv__prices { margin-bottom: 20px; }
.aum-sv__srow .aum-sv__pricerow { margin-bottom: 22px; }

@media (min-width: 992px) {
  .aum-sv__srow-book { text-align: right; }
  .aum-sv__srow-book .aum-sv__pricerow { justify-content: flex-end; }
  .aum-sv__srow-book .aum-sv__prices li { justify-content: flex-end; gap: 16px; }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 767.98px) {
  .aum-sv__trow { grid-template-columns: 1fr; gap: 16px; }
  .aum-sv__tprice { text-align: left; }
  .aum-sv__taction { white-space: normal; }
  .aum-sv__trow .aum-sv__btn { display: block; text-align: center; }
  .aum-sv__panel { padding: calc(var(--aum-sv-panel-pad, 44px) * .66); }
}