/* ==========================================================================
   DMT - components. Reference: concept sheet 1a.
   Every component is driven by a class, so Elementor widgets only ever carry
   structure and content. Free Elementor has no per-widget Custom CSS field,
   which is exactly why the design lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   Sharp corners, 2px border, outline at rest, fills on hover.
   The » is added by CSS so it can never be dropped from a widget label.
   -------------------------------------------------------------------------- */
.dmt-btn,
.elementor-widget-button .dmt-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: var(--dmt-space-1);
  border-radius: 0;
  border: 2px solid transparent;
  background: transparent;
  padding: 17px 26px;
  font-family: var(--dmt-font-display);
  font-size: var(--dmt-button);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.dmt-btn::after { content: "\00BB"; font-size: 1.15em; line-height: 0; }

/* Primary on light: olive outline, fills olive, label goes white. */
.dmt-btn--primary {
  border-color: var(--dmt-olive);
  color: var(--dmt-text);
}
.dmt-btn--primary:hover,
.dmt-btn--primary:focus-visible {
  background: var(--dmt-olive);
  color: var(--dmt-white);
}

/* Secondary on light: border darkens to navy, nothing fills. */
.dmt-btn--secondary {
  border-color: var(--dmt-border-strong);
  color: var(--dmt-text);
}
.dmt-btn--secondary:hover,
.dmt-btn--secondary:focus-visible { border-color: var(--dmt-navy); }

/* Primary on navy: green outline, fills green. */
.dmt-btn--primary-navy {
  border-color: var(--dmt-green);
  color: var(--dmt-on-navy);
}
.dmt-btn--primary-navy:hover,
.dmt-btn--primary-navy:focus-visible {
  background: var(--dmt-green);
  color: var(--dmt-white);
}

/* Secondary on navy. */
.dmt-btn--secondary-navy {
  border-color: var(--dmt-border-navy-btn);
  color: var(--dmt-on-navy);
}
.dmt-btn--secondary-navy:hover,
.dmt-btn--secondary-navy:focus-visible { border-color: var(--dmt-on-navy); }

/* Text link variant: green, 2px transparent underline that fills in. */
.dmt-btn--text {
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 4px;
  font-size: var(--dmt-button);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--dmt-green);
}
.dmt-btn--text:hover,
.dmt-btn--text:focus-visible { border-bottom-color: var(--dmt-green); }

.dmt-btn-row { display: flex; flex-wrap: wrap; gap: var(--dmt-space-2); align-items: center; }

@media (max-width: 767px) {
  .dmt-btn { min-height: 52px; padding: 18px 26px; justify-content: center; }
  .dmt-btn--text { min-height: 0; padding: 0 0 4px; }
  .dmt-btn-row { flex-direction: column; align-items: stretch; gap: var(--dmt-space-2); }
  .dmt-btn-row .dmt-btn { width: 100%; }
  .dmt-btn-row .dmt-btn--text { width: auto; align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.dmt-card {
  background: var(--dmt-white);
  border: 1px solid var(--dmt-border-card);
  border-radius: 0;
  box-shadow: none;
  padding: 26px 28px;
}

/* Marks the one card in a group carrying a caution or a distinction. */
.dmt-card--accent { border-top: 3px solid var(--dmt-olive); }

.dmt-card--on-navy {
  background: var(--dmt-navy-lift);
  border-color: var(--dmt-border-navy);
  color: var(--dmt-on-navy-body);
}
.dmt-card--on-navy h3 { color: var(--dmt-on-navy); }

.dmt-card__num {
  display: block;
  font-family: var(--dmt-font-display);
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  color: var(--dmt-olive);
  margin-bottom: var(--dmt-space-2);
}
.dmt-card__num--xl { font-size: 64px; }
.dmt-card__num--lg { font-size: 56px; }

.dmt-card h3 { margin-bottom: var(--dmt-space-2); }
.dmt-card p { font-size: var(--dmt-small); margin-bottom: var(--dmt-space-2); }
.dmt-card p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.dmt-chip-row { display: flex; flex-wrap: wrap; gap: var(--dmt-space-2); }

.dmt-chip {
  display: inline-block;
  border: 1px solid var(--dmt-border-strong);
  border-radius: 0;
  padding: 10px 17px;
  font-family: var(--dmt-font-body);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dmt-text);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.dmt-chip:hover,
.dmt-chip.is-active {
  border-color: var(--dmt-olive);
  background: rgba(120, 140, 22, .10);
}

/* --------------------------------------------------------------------------
   Credential strip
   -------------------------------------------------------------------------- */
.dmt-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dmt-space-2) var(--dmt-space-5);
  padding-bottom: var(--dmt-space-3);
  border-bottom: 1px solid var(--dmt-border-navy);
  list-style: none;
  margin: 0;
}
.dmt-credentials li {
  font-family: var(--dmt-font-body);
  font-size: var(--dmt-eyebrow);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dmt-on-navy-body);
}
.dmt-credentials--on-light { border-bottom-color: var(--dmt-border-card); }
.dmt-credentials--on-light li { color: var(--dmt-text-meta); }

@media (max-width: 767px) {
  .dmt-credentials { background: var(--dmt-navy-lift); padding: var(--dmt-space-3) var(--dmt-gutter); gap: var(--dmt-space-2) var(--dmt-space-3); border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Quotes
   -------------------------------------------------------------------------- */
.dmt-quote-rule {
  border-left: 3px solid var(--dmt-olive);
  padding-left: var(--dmt-space-3);
  margin: var(--dmt-space-4) 0;
  font-size: var(--dmt-lead);
  line-height: var(--dmt-lead-lh);
  max-width: var(--dmt-measure);
}

.dmt-pullquote {
  background: var(--dmt-navy);
  color: var(--dmt-on-navy);
  padding: var(--dmt-space-4) var(--dmt-space-5);
  font-family: var(--dmt-font-display);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: var(--dmt-space-4) 0;
}

/* --------------------------------------------------------------------------
   Review card
   -------------------------------------------------------------------------- */
.dmt-review {
  background: var(--dmt-navy-lift);
  border: 1px solid var(--dmt-border-navy);
  padding: var(--dmt-space-3) 26px;
  display: flex;
  flex-direction: column;
  gap: var(--dmt-space-3);
}
.dmt-review--on-light { background: var(--dmt-white); border-color: var(--dmt-border-card); }

.dmt-review__stars { color: var(--dmt-olive); font-size: 15px; line-height: 1; letter-spacing: .1em; }

.dmt-review__quote {
  font-family: var(--dmt-font-body);
  font-size: var(--dmt-small);
  line-height: var(--dmt-body-lh);
  font-style: italic;
  color: var(--dmt-on-navy-body);
  margin: 0;
  flex: 1;
}
.dmt-review--on-light .dmt-review__quote { color: var(--dmt-text-body); }

/* Real Google reviews vary from 77 to 692 characters. Cards share a row, so
   the longest would set the height of every card and the band would run to
   most of a screen. Clamp instead of cutting the text: nothing is lost, and
   Read more reveals it in place. sabav2v.js only shows the button on cards
   that are actually overflowing, so short reviews are untouched. */
.dmt-review__quote--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dmt-review__more {
  align-self: flex-start;
  margin-top: var(--dmt-space-2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--dmt-font-body);
  font-size: var(--dmt-meta);
  color: var(--dmt-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dmt-review__more:hover { color: var(--dmt-on-navy); }
.dmt-review--on-light .dmt-review__more { color: var(--dmt-olive); }

.dmt-review__by {
  display: flex;
  align-items: center;
  gap: var(--dmt-space-2);
  border-top: 1px solid var(--dmt-border-navy);
  padding-top: var(--dmt-space-3);
}
.dmt-review--on-light .dmt-review__by { border-top-color: var(--dmt-border-card); }

/* The one exception to zero radius on the whole site. */
.dmt-review__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--dmt-on-navy-fine);
  flex: none;
}
.dmt-review__name { font-family: var(--dmt-font-display); font-size: var(--dmt-button); font-weight: 600; color: var(--dmt-on-navy); }
.dmt-review--on-light .dmt-review__name { color: var(--dmt-text); }
.dmt-review__source { font-family: var(--dmt-font-body); font-size: var(--dmt-meta); color: var(--dmt-on-navy-meta); display: block; }

/* Reviews carousel */
.dmt-reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--dmt-space-3); margin-bottom: var(--dmt-space-5); }
.dmt-reviews__nav { display: flex; gap: var(--dmt-space-1); flex: none; }
.dmt-reviews__btn {
  width: 44px; height: 44px;
  border: 2px solid var(--dmt-border-navy-btn);
  background: transparent;
  color: var(--dmt-on-navy);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.dmt-reviews__btn:hover { border-color: var(--dmt-on-navy); }
.dmt-reviews__btn[disabled] { opacity: .35; cursor: default; }
.dmt-reviews__btn[disabled]:hover { border-color: var(--dmt-border-navy-btn); }

/* Three up at desktop, scrolling one card at a time.
   This used to be `grid-template-columns: repeat(3, 1fr)` with no overflow,
   which meant the prev/next buttons called scrollTo() on an element that
   could not scroll. With exactly three cards there was nothing to scroll to,
   so it looked fine; with the real review set it would have silently wrapped
   onto extra rows instead of paging. */
.dmt-reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (2 * var(--dmt-gap-card))) / 3);
  gap: var(--dmt-gap-card);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dmt-reviews__track::-webkit-scrollbar { display: none; }
.dmt-reviews__track > .dmt-review { scroll-snap-align: start; }

@media (max-width: 767px) {
  .dmt-reviews__nav { display: none; }
  /* Horizontal swipe strip, ~88px of the next card visible as a hint. */
  .dmt-reviews__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 88px;
    margin-right: calc(var(--dmt-gutter) * -1);
  }
  .dmt-reviews__track::-webkit-scrollbar { display: none; }
  .dmt-reviews__track > .dmt-review { flex: 0 0 250px; scroll-snap-align: start; }
  .dmt-reviews__bars { display: flex; gap: 6px; margin-top: var(--dmt-space-3); }
  .dmt-reviews__bars span { width: 22px; height: 2px; background: var(--dmt-on-navy-fine); }
  .dmt-reviews__bars span.is-active { background: var(--dmt-green); }
}
.dmt-reviews__bars { display: none; }

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */
.dmt-accordion { background: var(--dmt-white); border: 1px solid var(--dmt-border-card); }
.dmt-accordion__item + .dmt-accordion__item { border-top: 1px solid var(--dmt-border-card); }

.dmt-accordion__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--dmt-space-3);
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 22px 26px;
  font-family: var(--dmt-font-display);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--dmt-text);
  cursor: pointer;
}
.dmt-accordion__icon { color: var(--dmt-olive); font-size: 19px; line-height: 1; flex: none; }
.dmt-accordion__a { padding: 0 26px 22px; display: none; }
.dmt-accordion__a p { font-size: 16px; line-height: 1.75; max-width: var(--dmt-measure-tight); }
.dmt-accordion__item.is-open .dmt-accordion__a { display: block; }

/* --------------------------------------------------------------------------
   Image slots. No radius, no shadow.
   -------------------------------------------------------------------------- */
.dmt-image { display: block; width: 100%; border-radius: 0; }
.dmt-image-slot {
  background: var(--dmt-navy-lift);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  color: var(--dmt-on-navy-meta);
  font-family: var(--dmt-font-mono);
  font-size: var(--dmt-meta);
  text-align: center;
  padding: var(--dmt-space-3);
}
.dmt-image-slot--light { background: #E4E4E7; color: var(--dmt-text-meta); }

/* --------------------------------------------------------------------------
   Embed frame. Matches the live site's Cliniko framing.
   -------------------------------------------------------------------------- */
.dmt-embed {
  background: var(--dmt-white);
  border: 1px solid var(--dmt-border-card);
  padding: 14px;
  box-shadow: none;
  border-radius: 0;
}
.dmt-embed iframe { display: block; width: 100%; border: 0; min-height: 620px; }

/* Until the Cliniko snippet is pasted in, the frame holds an empty div and
   collapses to a hairline. Keep it at the height the real widget will occupy
   so the section reads correctly during the build. */
.dmt-embed:empty { min-height: 620px; }

/* Cliniko sets the real height by postMessage once its app boots (see
   sabav2v.js). 620px is the floor so the card does not collapse before that
   message arrives, or if scripts are blocked. */
.dmt-cliniko { display: block; width: 100%; border: 0; min-height: 620px; }

@media (max-width: 767px) {
  .dmt-embed { padding: 0; border-left: 0; border-right: 0; margin-inline: calc(var(--dmt-gutter) * -1); }
}