/* ---------------------------------------------------------------------------
   sections.css — page section components (hero, trust bar, grids, steps,
   FAQ accordion, pricing table, blog cards)

   Elementor traps encoded here:
   - A CSS grid on an Elementor container must be `.sld-site .sld-x.e-con` to
     beat `.e-con.e-flex { display:flex }` (0,2,0).
   - Grid children must not carry a builder `width`, or the inline width fights
     the track.
   - Responsive overrides must MATCH the base rule's specificity, including
     `:first-child`/`:last-child`, or they silently lose and nothing stacks.
   --------------------------------------------------------------------------- */

/* --- Hero ----------------------------------------------------------------- */

.sld-hero { padding-block: clamp(52px, 8vw, 96px); }
.sld-hero__lede {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--sld-muted);
  max-width: 56ch;
}
.sld-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Two-column rows outside the grid helpers need explicit flex AND max-width,
   because Elementor writes an inline width on each child. */
.sld-site .sld-split.e-con {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.sld-site .sld-split.e-con > .e-con:first-child { flex: 1 1 440px; max-width: 100%; min-width: 0; }
.sld-site .sld-split.e-con > .e-con:last-child  { flex: 1 1 380px; max-width: 100%; min-width: 0; }

@media (max-width: 880px) {
  /* Both selectors listed so the override matches the base specificity. */
  .sld-site .sld-split.e-con > .e-con:first-child,
  .sld-site .sld-split.e-con > .e-con:last-child { flex: 1 1 100%; }
}

/* --- Trust bar ------------------------------------------------------------ */

.sld-site .sld-trust.e-con {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.sld-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: var(--sld-mist);
  border-radius: var(--sld-radius);
}
.sld-trust__item strong { display: block; font-size: .98rem; }
.sld-trust__item span   { color: var(--sld-muted); font-size: .89rem; }
.sld-trust__icon { flex: 0 0 22px; color: var(--sld-khaki); margin-top: 2px; }

@media (max-width: 780px) {
  .sld-site .sld-trust.e-con { grid-template-columns: 1fr; }
}

/* --- Card grids ----------------------------------------------------------- */

.sld-site .sld-grid-2.e-con,
.sld-site .sld-grid-3.e-con,
.sld-site .sld-grid-4.e-con {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
}
.sld-site .sld-grid-2.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sld-site .sld-grid-3.e-con { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sld-site .sld-grid-4.e-con { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .sld-site .sld-grid-4.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sld-site .sld-grid-3.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .sld-site .sld-grid-2.e-con,
  .sld-site .sld-grid-3.e-con,
  .sld-site .sld-grid-4.e-con { grid-template-columns: 1fr; }
}

/* Service card */
.sld-svc { display: flex; flex-direction: column; gap: 10px; }
.sld-svc h3 { margin: 0; }
.sld-svc p  { color: var(--sld-muted); font-size: .96rem; flex: 1; }
.sld-site .sld-svc__link {
  align-self: flex-start;
  color: var(--sld-khaki);
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sld-site .sld-svc__link:hover { border-bottom-color: var(--sld-khaki); }

/* --- Steps (how it works) ------------------------------------------------- */

.sld-step { position: relative; padding-top: 6px; }

/* The Elementor class lands on the WRAPPER, and Elementor's kit repaints the
   inner <p> with the global text colour — so a white number on the khaki circle
   came out muted grey (1.5:1, effectively invisible). State colour and font on
   BOTH the wrapper and its inner heading element. */
.sld-step__num,
.sld-step__num .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sld-white) !important;
  line-height: 1;
  margin: 0;
}
.sld-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  min-width: 40px;
  border-radius: 999px;
  background: var(--sld-khaki);
  margin-bottom: 14px;
}
.sld-step h3 { margin: 0 0 6px; font-size: 1.15rem; }
.sld-step p  { color: var(--sld-muted); font-size: .95rem; }

/* --- FAQ accordion (native <details>, so it works without JS) ------------- */

.sld-faq { display: grid; gap: 12px; max-width: 860px; }
.sld-faq details {
  background: var(--sld-white);
  border: 1px solid var(--sld-hairline);
  border-radius: var(--sld-radius);
  overflow: hidden;
}
.sld-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  min-height: 44px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.sld-faq summary::-webkit-details-marker { display: none; }
.sld-faq summary::after {
  content: '';
  flex: 0 0 10px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--sld-khaki);
  border-bottom: 2px solid var(--sld-khaki);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.sld-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sld-faq__body { padding: 0 22px 20px; color: var(--sld-muted); }
.sld-faq__body p { font-size: .97rem; }

/* --- Pricing table -------------------------------------------------------- */

.sld-price-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sld-price {
  width: 100%;
  min-width: 620px;          /* scrolls horizontally BY DESIGN inside the wrap —
                                exclude .sld-price-wrap/.sld-price when counting
                                overflowing elements, or it reports false hits */
  border-collapse: collapse;
  background: var(--sld-white);
  border: 1px solid var(--sld-hairline);
  border-radius: var(--sld-radius);
  overflow: hidden;
}
.sld-price th, .sld-price td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--sld-hairline);
  vertical-align: top;
}
.sld-price thead th {
  background: var(--sld-mist);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sld-muted);
}
.sld-price tbody tr:last-child td { border-bottom: 0; }

/* Elementor's reset.css zebra-stripes every table with
   `rgba(128,128,128,.07)` — a COLD grey that clashes with the warm palette and,
   being semi-transparent, defeats any contrast check that reads the computed
   background. Replace it with a warm tint from the palette, stated opaquely.
   The selector must match Elementor's own (0,0,3 + pseudo-class) to win. */
.sld-site .sld-price tbody > tr:nth-child(2n+1) > td,
.sld-site .sld-price tbody > tr:nth-child(2n+1) > th {
  background-color: var(--sld-cream);
}
.sld-site .sld-price tbody > tr:nth-child(2n) > td,
.sld-site .sld-price tbody > tr:nth-child(2n) > th {
  background-color: var(--sld-white);
}
.sld-price__name { font-weight: 600; }
.sld-price__note { display: block; color: var(--sld-muted); font-size: .88rem; font-weight: 400; }

/* Prices must never break mid-figure ("£65 0"). Elementor resets typography on
   the inner <p>, so state it on BOTH the wrapper and its p. */
.sld-price__fig, .sld-price__fig p { white-space: nowrap; font-weight: 600; }

/* --- Blog cards ----------------------------------------------------------- */

.sld-post { display: flex; flex-direction: column; gap: 8px; }
.sld-post__meta { color: var(--sld-muted); font-size: .84rem; }
.sld-post h3 { font-size: 1.16rem; margin: 0; }
.sld-site .sld-post h3 a { color: var(--sld-ink); text-decoration: none; }
.sld-site .sld-post h3 a:hover { color: var(--sld-khaki-dk); }
.sld-post p { color: var(--sld-muted); font-size: .95rem; }

/* Image stand-in is a <span>: it needs display:block before aspect-ratio and
   object-fit do anything. */
.sld-post__shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--sld-radius-sm);
  margin-bottom: 6px;
}

/* --- Prose (single post / legal pages) ------------------------------------ */

/* Legal/long-form text. 72ch is the readable measure, but when this class lands
   on an Elementor container the cap alone leaves it hard left, because
   Elementor sets `margin-left: 0` per element — so centre it explicitly. */
.sld-prose { max-width: 72ch; }
.sld-site .sld-prose.e-con,
.sld-site .sld-prose.e-con > .e-con-inner { margin-inline: auto; }
.sld-prose h2 { margin: 1.8em 0 .5em; }
.sld-prose h3 { margin: 1.5em 0 .4em; }
.sld-prose ul, .sld-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.sld-prose li { margin-bottom: .45em; }
.sld-prose blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--sld-khaki);
  color: var(--sld-muted);
  font-style: italic;
}

/* --- Consent-gated map ---------------------------------------------------- */

/* The map iframe is NEVER printed until the visitor consents — see
   templates/map.php. This is the pre-consent placeholder. */
.sld-map__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  min-height: 320px;
  padding: 28px;
  background: var(--sld-mist);
  border: 1px solid var(--sld-hairline);
  border-radius: var(--sld-radius);
}
.sld-map__gate p { color: var(--sld-muted); font-size: .94rem; max-width: 46ch; }
.sld-map iframe { width: 100%; min-height: 340px; border: 0; border-radius: var(--sld-radius); }


/* ---------------------------------------------------------------------------
   Equal-height cards in a grid row.

   Elementor grid cells default to align-items: normal, so each card is only as
   tall as its own text and a row of three ends up ragged (measured 145 / 89 /
   117px on the About stats block). The cell AND the card both need height:100%
   — stretching only the cell leaves the card floating inside it.

   `.e-con` is required on both selectors to beat `.e-con.e-flex{display:flex}`
   and the per-element rules Elementor writes.
   ------------------------------------------------------------------------ */
.sld-site [class*="sld-grid-"].e-con > .e-con { height: 100%; }
.sld-site .sld-card.e-con { height: 100%; }


/* ---------------------------------------------------------------------------
   Offices grid — [sld_offices] on /locations/
   ------------------------------------------------------------------------ */

.sld-site .sld-offices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 1024px) { .sld-site .sld-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .sld-site .sld-offices { grid-template-columns: 1fr; } }

.sld-site .sld-office {
  display: flex;
  flex-direction: column;
  background: var(--sld-white);
  border: 1px solid var(--sld-hairline);
  border-radius: var(--sld-radius);
  overflow: hidden;              /* clips the map to the card's rounded corners */
  box-shadow: var(--sld-shadow);
}

/* The wrapper is a <div> and the image a block, so aspect-ratio has something
   to apply to. Without display:block on the img, object-fit does nothing. */
.sld-site .sld-office__shot {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--sld-sand);
  border-bottom: 1px solid var(--sld-hairline);
}
.sld-site .sld-office__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sld-site .sld-office__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 24px;
  flex: 1 1 auto;                /* equal-height cards, actions pinned to the base */
}

/* The kit styles h3 as italic serif for page headlines and it bleeds into card
   headings, so the city name is forced back to Inter. */
.sld-site .sld-office__city {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

.sld-site .sld-office__addr {
  font-style: normal;            /* <address> is italic by default */
  color: var(--sld-muted);
  line-height: 1.55;
  /* A long street line must wrap rather than widen the grid track. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.sld-site .sld-office__note {
  margin: 0;
  color: var(--sld-ink);
  font-size: .95rem;
}

.sld-site .sld-office__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;              /* bottom-align regardless of note length */
  padding-top: 6px;
}
.sld-site .sld-office__actions .sld-btn {
  padding: 11px 18px;
  font-size: .92rem;
  min-height: 44px;              /* WCAG 2.2 AA 2.5.8 */
}

.sld-site .sld-office__credit {
  margin: 18px 0 0;
  font-size: .82rem;
  color: var(--sld-muted);
}


/* Main-office feature card: one office, laid out wide with the map beside the
   details instead of above them, so it reads as the head office rather than as
   the first of seven identical cards. */
.sld-site .sld-offices--feature { grid-template-columns: 1fr; }
.sld-site .sld-offices--feature .sld-office { flex-direction: row; }
.sld-site .sld-offices--feature .sld-office__shot {
  flex: 0 0 46%;
  aspect-ratio: auto;            /* height comes from the body beside it */
  border-bottom: 0;
  border-right: 1px solid var(--sld-hairline);
}
.sld-site .sld-offices--feature .sld-office__body { padding: 30px 32px 32px; gap: 12px; }
.sld-site .sld-offices--feature .sld-office__city { font-size: 1.5rem; }
@media (max-width: 760px) {
  /* Below this the two columns are too narrow to read; fall back to the
     stacked card used everywhere else. */
  .sld-site .sld-offices--feature .sld-office { flex-direction: column; }
  .sld-site .sld-offices--feature .sld-office__shot {
    flex: 0 0 auto;
    aspect-ratio: 3 / 2;
    border-right: 0;
    border-bottom: 1px solid var(--sld-hairline);
  }
}

/* ---------------------------------------------------------------------------
   Numbered process steps.

   THE BUG THIS FIXES: the number was rendering outside its circle, at the top
   left, effectively invisible. `.sld-step__num` is the Elementor WIDGET
   WRAPPER, and Elementor's own widget rule sets `display:flex` on it at a
   higher specificity than a single project class — so `align-items` and
   `justify-content` computed as `normal` and the digit sat flush left in a
   40px box. The centring therefore has to out-rank Elementor, hence the
   !important. Measured, not guessed: computed ai/jc were `normal`.
   ------------------------------------------------------------------------ */
.sld-site .sld-step {
  padding: 26px 24px 28px;
  height: 100%;                  /* equal heights across the row */
}
.sld-site .sld-step__num {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px;
  height: 46px;
  min-width: 46px;
  flex: 0 0 46px;
  border-radius: 999px;
  background: var(--sld-khaki);
  margin-bottom: 16px;
}
/* Elementor resets typography on the inner element, so the number's font and
   colour must be stated on the child as well as the wrapper. */
.sld-site .sld-step__num .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--sld-white) !important;
  margin: 0 !important;
}
.sld-site .sld-step h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 8px;
}
.sld-site .sld-step p { color: var(--sld-muted); font-size: .96rem; }


/* ---------------------------------------------------------------------------
   LatePoint booking form.

   LatePoint ships bright blue (#2563eb-ish) buttons, links and tabs, and its
   own sans-serif. Dropped into this site it reads as a third-party widget
   bolted onto the page rather than part of it — which on a booking form, where
   the visitor is about to type their name and card details, undermines exactly
   the confidence the rest of the page is trying to build.

   LatePoint exposes four custom properties, so most of this is just handing it
   the site palette rather than fighting its stylesheet. The rest covers
   elements it paints with hard-coded colours.
   ------------------------------------------------------------------------ */
.sld-site .latepoint-w,
.sld-site .latepoint-booking-form-element {
  --latepoint-brand-primary: var(--sld-khaki);
  --latepoint-headings-color: var(--sld-ink);
  --latepoint-body-color: var(--sld-muted);
  --latepoint-side-panel-bg: var(--sld-cream);
  --latepoint-border-radius: 10px;
  --latepoint-border-radius-md: 8px;
  --latepoint-border-radius-lg: 14px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Headings inside the form follow the site's display face. */
.sld-site .latepoint-w h1,
.sld-site .latepoint-w h2,
.sld-site .latepoint-w h3,
.sld-site .latepoint-w h4,
.sld-site .latepoint-w .os-step-title,
.sld-site .latepoint-w .latepoint-side-panel-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--sld-ink);
}

/* Primary actions: Next / Checkout. LatePoint hard-codes the blue. */
.sld-site .latepoint-w .latepoint-btn,
.sld-site .latepoint-w .latepoint-btn-primary,
.sld-site .latepoint-w .latepoint-next-btn,
.sld-site .latepoint-w button[type="submit"] {
  background-color: var(--sld-khaki);
  border-color: var(--sld-khaki);
  color: var(--sld-white);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
}
.sld-site .latepoint-w .latepoint-btn:hover,
.sld-site .latepoint-w .latepoint-btn-primary:hover,
.sld-site .latepoint-w .latepoint-next-btn:hover,
.sld-site .latepoint-w button[type="submit"]:hover {
  background-color: var(--sld-khaki-dk);
  border-color: var(--sld-khaki-dk);
}

/* Text inside a primary button must take the button's colour, not the link
   colour. On /customer-cabinet/ the "Forgot?" link sits inside a primary pill
   and inherited khaki — khaki text on a khaki button, a contrast ratio of
   exactly 1.0, i.e. completely invisible. */
.sld-site .latepoint-w .latepoint-btn-primary,
.sld-site .latepoint-w .latepoint-btn-primary span,
.sld-site .latepoint-w .latepoint-btn-primary a,
.sld-site .latepoint-w .latepoint-btn-primary i { color: var(--sld-white) !important; }

/* Links, the active tab underline, and the selected day. */
.sld-site .latepoint-w a,
.sld-site .latepoint-w .os-trigger-text,
.sld-site .latepoint-w .latepoint-side-panel-value a { color: var(--sld-khaki-dk); }
.sld-site .latepoint-w .os-tab.active,
.sld-site .latepoint-w .os-tabs .active { border-bottom-color: var(--sld-khaki); color: var(--sld-ink); }

.sld-site .latepoint-w .os-day.os-day-selected,
.sld-site .latepoint-w .os-day.selected {
  background-color: var(--sld-khaki) !important;
  color: var(--sld-white) !important;
}
/* The small bar under a bookable day. LatePoint paints it a bright lime
   (rgb(143,226,134)) that belongs to no part of this palette. The track behind
   it is a cool grey, so that gets the site's hairline colour too. Class names
   confirmed in the DOM — `.day-available` sits alongside `.os-day-status`, it
   is not a child of it. */
.sld-site .latepoint-w .os-day .day-available { background-color: var(--sld-khaki-lt); }
.sld-site .latepoint-w .os-day .os-day-status { background-color: var(--sld-sand); }
.sld-site .latepoint-w .os-available-slots-tooltip { background-color: var(--sld-ink); }

/* Time slots. */
.sld-site .latepoint-w .dp-timepicker-trigger,
.sld-site .latepoint-w .dp-timebox {
  background-color: var(--sld-mist);
  border-color: var(--sld-hairline);
  color: var(--sld-ink);
  font-family: 'Inter', system-ui, sans-serif;
}
.sld-site .latepoint-w .dp-timepicker-trigger:hover,
.sld-site .latepoint-w .dp-timebox.selected {
  background-color: var(--sld-khaki);
  border-color: var(--sld-khaki);
  color: var(--sld-white);
}

/* Payment-portion cards (Full Amount / Deposit Only). */
.sld-site .latepoint-w .lp-option-w:hover,
.sld-site .latepoint-w .lp-payment-portion-option:hover { border-color: var(--sld-khaki); }

/* Validation messages: LatePoint's pink fails contrast on this background. */
.sld-site .latepoint-w .latepoint-message-error,
.sld-site .latepoint-w .os-form-errors {
  background-color: #F6E3E1;
  color: #8A2B20;
  border: 1px solid #E3BDB7;
}

/* ---------------------------------------------------------------------------
   Contrast fixes for the booking form.

   LatePoint uses three muted blue-greys for its form chrome, none of which
   reaches WCAG AA on this site's cream and white:

     rgb(124,133,163)  3.33:1 on cream, 3.66:1 on white   (needs 4.5:1)
     rgb(149,154,174)  2.80:1                             (field labels)
     rgb(213,110,103)  3.36:1                             (error-state labels)

   Every value above was measured in the browser on the real page, not read off
   the stylesheet — several only appear on later steps of the form, which a
   single page load never reaches.

   !important is needed, not laziness: LatePoint's own selectors have the same
   specificity as these and its stylesheet loads after ours, so it wins ties.

   DELIBERATELY NOT FIXED: unavailable calendar dates (2.24:1) and the
   weekend/past-date numbers. Those are disabled controls, which WCAG 1.4.3
   exempts, and lifting their contrast would make unbookable days look bookable
   — a worse outcome for the user than the low contrast.
   ------------------------------------------------------------------------ */
.sld-site .latepoint-w .latepoint-desc-content,
.sld-site .latepoint-w .os-item-desc,
.sld-site .latepoint-w .sld-lp-support,
.sld-site .latepoint-w .latepoint-side-panel-desc,
.sld-site .latepoint-w .os-form-sub-label,
.sld-site .latepoint-w .os-step-tab,
.sld-site .latepoint-w .sbc-highlighted-item,
.sld-site .latepoint-w .sbh-item,
.sld-site .latepoint-w .pbh-label,
.sld-site .latepoint-w .sbc-sub-item,
.sld-site .latepoint-w .latepoint-customer-box-desc,
.sld-site .latepoint-w .latepoint-customer-otp-sub,
.sld-site .latepoint-w .os-day-name,
.sld-site .latepoint-w .os-week-day,
.sld-site .latepoint-w .os-calendar-week-days > * { color: var(--sld-muted) !important; }

/* Field labels (the floating ones that rise above a filled input).

   These need the full selector, not just `label`. LatePoint sets the colour at
   `.latepoint-w .os-form-group.os-form-textfield-group label` WITH !important —
   specificity (0,4,1) — so a shorter selector loses the tie no matter how many
   !importants it carries. Matching their structure and adding `.sld-site` wins
   it properly. */
.sld-site .latepoint-w .os-form-group.os-form-textfield-group label,
.sld-site .latepoint-w .os-form-group.os-form-select-group label,
.sld-site .latepoint-w .os-form-group label { color: var(--sld-muted) !important; }

.sld-site .latepoint-w input::placeholder,
.sld-site .latepoint-w textarea::placeholder { color: #6E6A5C !important; opacity: 1; }

/* Invalid state: LatePoint's #d56e67 is 3.36:1. This red holds 5.9:1 on white. */
.sld-site .latepoint-w .os-form-group.os-form-textfield-group.os-invalid label,
.sld-site .latepoint-w .os-form-group.os-form-select-group.os-invalid label,
.sld-site .latepoint-w .os-form-group.os-invalid label { color: #8A2B20 !important; }
.sld-site .latepoint-w .os-invalid input::placeholder { color: #8A2B20 !important; }

/* Weekday column headers above the calendar. Informational text, not a
   disabled control, so this one does have to pass. */
.sld-site .latepoint-w .weekday { color: var(--sld-muted) !important; }

/* Secondary buttons. The earlier .latepoint-btn rule painted EVERY button
   khaki, including "Back", which LatePoint ships as `.latepoint-btn-white` —
   that left near-black text on khaki at 3.05:1 and made Back look like the
   primary action. Restore it as a quiet secondary control. */
.sld-site .latepoint-w .latepoint-btn.latepoint-btn-white,
.sld-site .latepoint-w .latepoint-prev-btn {
  background-color: transparent !important;
  border-color: var(--sld-hairline) !important;
  color: var(--sld-khaki-dk) !important;
}
.sld-site .latepoint-w .latepoint-btn.latepoint-btn-white span,
.sld-site .latepoint-w .latepoint-btn.latepoint-btn-white i,
.sld-site .latepoint-w .latepoint-prev-btn span,
.sld-site .latepoint-w .latepoint-prev-btn i { color: var(--sld-khaki-dk) !important; }
.sld-site .latepoint-w .latepoint-btn.latepoint-btn-white:hover {
  background-color: var(--sld-mist) !important;
}

/* Inputs. */
.sld-site .latepoint-w input[type="text"],
.sld-site .latepoint-w input[type="tel"],
.sld-site .latepoint-w input[type="email"],
.sld-site .latepoint-w textarea {
  font-family: 'Inter', system-ui, sans-serif;
  border-color: var(--sld-hairline);
  color: var(--sld-ink);
}
.sld-site .latepoint-w input:focus,
.sld-site .latepoint-w textarea:focus {
  border-color: var(--sld-khaki);
  outline: 2px solid var(--sld-khaki-lt);
  outline-offset: 1px;
}