/* The public landing page at maidthisnwsa.com.
 *
 * **Every colour here is a literal, and brand.css is deliberately not loaded on this page.**
 * brand.css carries a dark-mode remap gated on html.dark-ready, and a customer-facing page should
 * not depend on that gate staying where it is: a token that flips under a surface that does not is
 * exactly the bug documented at length in CLAUDE.md. The values below are the same brand colours,
 * pinned.
 *
 * The palette and the type are matched to the franchise site at maidthis.com/nw-sanantonio so the
 * two read as one company: the cyan-to-ocean band, the green booking button, the gold guarantee
 * badge, and heavy italic Montserrat on every section heading. What is deliberately different is
 * the density. The franchise page is long and repeats its booking widget; this one is short, makes
 * one argument per screen, and sends every action to /book.
 */

:root {
  --ld-cyan: #5AB3C9;
  --ld-cyan-deep: #3E95AC;
  --ld-ocean: #0C85C2;
  --ld-ocean-deep: #085E8A;
  --ld-teal-900: #1E5464;

  --ld-green: #6FBF4E;
  --ld-green-deep: #5AA83D;

  --ld-gold: #FFB600;
  --ld-gold-deep: #E0A000;

  --ld-navy: #2C3E50;
  --ld-ink: #33475B;
  --ld-ink-soft: #5B6F80;
  --ld-white: #FFFFFF;

  --ld-page: #FFFFFF;
  --ld-soft: #F2F9FB;
  --ld-line: #DCE9EE;

  --ld-shadow-sm: 0 2px 10px rgba(30, 84, 100, 0.07);
  --ld-shadow-md: 0 14px 34px rgba(30, 84, 100, 0.12);
  --ld-shadow-lg: 0 30px 64px rgba(30, 84, 100, 0.18);

  --ld-r: 16px;
  --ld-r-sm: 10px;
}

* { box-sizing: border-box; }

.ld-body {
  margin: 0;
  background: var(--ld-page);
  color: var(--ld-ink);
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.ld-body img { max-width: 100%; display: block; }

.ld-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Heavy italic headings are the franchise site's single most recognisable typographic move, so
   every section heading on this page carries it. Body copy stays upright, or the page turns into
   a novelty. */
.ld-body h1, .ld-body h2, .ld-body h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--ld-navy);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ buttons */
/* The lighting model documented in CLAUDE.md's "button finish": a translucent white-to-dark wash
   over a flat background-colour (never a gradient between two hex values, so the colour underneath
   can still transition), two shadows, and a real press. */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.05) 42%, rgba(0,0,0,0.06));
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.ld-btn svg { width: 15px; height: 15px; flex: none; }
.ld-btn-lg { padding: 16px 30px; font-size: 16.5px; }
.ld-btn-sm { padding: 10px 18px; font-size: 14px; }

.ld-btn-green {
  background-color: var(--ld-green);
  color: var(--ld-white);
  box-shadow: 0 1px 2px rgba(30, 84, 100, 0.18), 0 10px 22px rgba(111, 191, 78, 0.34);
}
.ld-btn-green:hover {
  background-color: var(--ld-green-deep);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(30, 84, 100, 0.2), 0 16px 32px rgba(111, 191, 78, 0.42);
}
.ld-btn-green:active {
  transform: translateY(1px);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.22);
}

.ld-btn-navy {
  background-color: var(--ld-navy);
  color: var(--ld-white);
  box-shadow: 0 1px 2px rgba(30, 84, 100, 0.2), 0 10px 22px rgba(44, 62, 80, 0.26);
}
.ld-btn-navy:hover { background-color: #22303E; transform: translateY(-2px); }
.ld-btn-navy:active { transform: translateY(1px); box-shadow: inset 0 3px 7px rgba(0,0,0,0.26); }

.ld-btn-white {
  background-color: var(--ld-white);
  color: var(--ld-teal-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 12px 26px rgba(0, 0, 0, 0.18);
}
.ld-btn-white:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.14), 0 18px 34px rgba(0,0,0,0.22); }
.ld-btn-white:active { transform: translateY(1px); box-shadow: inset 0 3px 7px rgba(44, 62, 80, 0.18); }

.ld-btn-ghost {
  background-color: var(--ld-white);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(44,62,80,0.03));
  border-color: var(--ld-line);
  color: var(--ld-navy);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(30, 84, 100, 0.08);
}
.ld-btn-ghost:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #FFF, 0 8px 18px rgba(30, 84, 100, 0.14); }
.ld-btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(44, 62, 80, 0.14); }

.ld-btn-ghost-light {
  background-color: rgba(255, 255, 255, 0.1);
  background-image: none;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--ld-white);
}
.ld-btn-ghost-light:hover { background-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.ld-btn-ghost-light:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .ld-btn, .ld-btn:hover, .ld-btn:active { transform: none; }
}

/* ------------------------------------------------------------------ nav */
.ld-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(100deg, var(--ld-cyan) 0%, var(--ld-ocean) 100%);
  box-shadow: 0 2px 14px rgba(30, 84, 100, 0.18);
}
.ld-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.ld-brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; flex: none; }
.ld-brand img { height: 34px; width: auto; align-self: flex-start; }
.ld-brand-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  padding-left: 2px;
}

.ld-nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.ld-nav-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ld-white);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.14s ease;
}
.ld-nav-links a:hover { border-bottom-color: rgba(255, 255, 255, 0.85); }

.ld-nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.ld-nav-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--ld-white);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.14s ease;
}
.ld-nav-call:hover { background: rgba(255, 255, 255, 0.26); }
.ld-nav-call svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ hero */
.ld-hero {
  position: relative;
  background: linear-gradient(170deg, #EAF6FA 0%, #F7FCFD 52%, #FFFFFF 100%);
  padding: 76px 0 96px;
  overflow: hidden;
}
/* A soft aqua wash behind the artwork, so the hero has depth without a second band of colour
   competing with the nav directly above it. */
.ld-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 720px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 179, 201, 0.22) 0%, rgba(90, 179, 201, 0) 68%);
  pointer-events: none;
}
.ld-hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.ld-kicker {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ld-ocean);
  margin-bottom: 16px;
}
.ld-kicker-light { color: rgba(255, 255, 255, 0.85); }

.ld-hero h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  font-weight: 900;
  line-height: 1.04;
  margin-bottom: 20px;
}
/* The one italic accent in the headline. The franchise site colours its location phrase; this
   does the same job on the word that actually carries the promise. */
.ld-hero h1 em {
  font-style: italic;
  color: var(--ld-ocean);
}

.ld-lede {
  font-size: 18px;
  line-height: 1.66;
  color: var(--ld-ink-soft);
  max-width: 34em;
  margin: 0 0 30px;
}

.ld-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }

.ld-hero-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.ld-hero-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ld-navy);
}
.ld-hero-ticks svg { width: 16px; height: 16px; color: var(--ld-green); flex: none; }

.ld-hero-art { position: relative; }
.ld-hero-frame {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--ld-shadow-lg);
  transform: rotate(0.6deg);
}
.ld-hero-frame img { width: 100%; height: auto; }

/* The gold guarantee seal, drawn rather than an image, matching the franchise badge's role in the
   same corner of its own hero. */
.ld-badge {
  position: absolute;
  top: -26px;
  left: -26px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background-color: var(--ld-gold);
  background-image: linear-gradient(165deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 46%, rgba(0,0,0,0.12));
  border: 4px solid #FFFFFF;
  box-shadow: 0 12px 30px rgba(224, 160, 0, 0.42);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #4A3200;
  padding-top: 4px;
}
.ld-badge-num { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 900; line-height: 0.92; }
.ld-badge-unit {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ld-badge-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ld-float-card {
  position: absolute;
  right: -14px;
  bottom: -26px;
  background: var(--ld-white);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: var(--ld-shadow-md);
  border: 1px solid var(--ld-line);
}
.ld-stars { display: flex; gap: 2px; color: var(--ld-gold); margin-bottom: 4px; }
.ld-stars svg { width: 15px; height: 15px; }
.ld-float-card strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--ld-navy);
  line-height: 1.2;
}
.ld-float-card span { font-size: 12.5px; color: var(--ld-ink-soft); }

/* ------------------------------------------------------------------ trust strip */
.ld-trust {
  background: var(--ld-navy);
  padding: 22px 0;
}
.ld-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.ld-trust-item { display: flex; align-items: center; gap: 13px; }
.ld-trust-item svg { width: 26px; height: 26px; color: var(--ld-cyan); flex: none; }
.ld-trust-item strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ld-white);
  line-height: 1.3;
}
.ld-trust-item span { font-size: 12.5px; color: rgba(255, 255, 255, 0.66); }

/* ------------------------------------------------------------------ sections */
.ld-section { padding: 88px 0; }
.ld-section-soft { background: var(--ld-soft); }

.ld-head { text-align: center; max-width: 660px; margin: 0 auto 52px; }
.ld-rule {
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--ld-cyan);
  margin: 0 auto 18px;
}
.ld-head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 900;
  font-style: italic;
  margin-bottom: 14px;
}
.ld-head p { margin: 0; font-size: 17px; color: var(--ld-ink-soft); }

/* ------------------------------------------------------------------ services */
/* Flex-wrap rather than a grid, on purpose: five cards in an auto-fit grid puts four across the
   top row and strands the fifth alone under an otherwise empty three-column row, which read as a
   broken layout rather than a fifth service. A wrapping flex row with justify-content: center
   settles the same five cards as three-then-two, and centers that shorter second row instead of
   pinning it to the left edge. Revisit the fixed basis below if a sixth service is ever added. */
.ld-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
.ld-card {
  background: var(--ld-white);
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ld-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  flex: 1 1 330px;
  max-width: 372px;
}
.ld-card:hover { transform: translateY(-5px); box-shadow: var(--ld-shadow-md); }
.ld-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: #EAF3F6; }
.ld-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.ld-card:hover .ld-card-img img { transform: scale(1.05); }
.ld-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
/* Two lines' worth of space whether the title needs it or not. "Recurring home cleaning" wraps at
   card width and the other three do not, which started every card's body copy at a different
   height and made an evenly sized row look accidental. */
.ld-card-body h3 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 9px;
  line-height: 1.26;
  min-height: calc(2 * 1.26em);
}
.ld-card-body p { margin: 0 0 16px; font-size: 14.8px; color: var(--ld-ink-soft); flex: 1; }
.ld-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--ld-ocean);
  text-decoration: none;
  align-self: flex-start;
}
.ld-card-link svg { width: 13px; height: 13px; transition: transform 0.16s ease; }
.ld-card-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ steps */
.ld-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
}
.ld-step {
  background: var(--ld-white);
  border: 1px solid var(--ld-line);
  border-radius: var(--ld-r);
  padding: 30px 26px 28px;
  text-align: center;
  box-shadow: var(--ld-shadow-sm);
}
.ld-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--ld-cyan);
  background-image: linear-gradient(170deg, rgba(255,255,255,0.32), rgba(0,0,0,0.08));
  color: var(--ld-white);
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 16px;
  box-shadow: 0 8px 18px rgba(90, 179, 201, 0.38);
}
.ld-step h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.ld-step p { margin: 0; font-size: 14.8px; color: var(--ld-ink-soft); }

.ld-steps-cta {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.ld-steps-cta span { font-size: 14px; color: var(--ld-ink-soft); }

/* ------------------------------------------------------------------ hosts */
.ld-hosts {
  position: relative;
  padding: 92px 0;
  background: linear-gradient(140deg, var(--ld-teal-900) 0%, #17414E 46%, #123540 100%);
  overflow: hidden;
}
.ld-hosts::before {
  content: "";
  position: absolute;
  top: -160px;
  left: -120px;
  width: 560px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 179, 201, 0.24) 0%, rgba(90, 179, 201, 0) 70%);
  pointer-events: none;
}
.ld-hosts-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 62px;
  align-items: center;
}
.ld-hosts-copy h2 {
  color: var(--ld-white);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 900;
  font-style: italic;
  margin-bottom: 16px;
}
.ld-hosts-copy > p { color: rgba(255, 255, 255, 0.76); font-size: 17px; margin: 0 0 28px; max-width: 34em; }

.ld-hosts-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 20px; }
.ld-hosts-list li { display: flex; gap: 15px; align-items: flex-start; }
.ld-hosts-list svg { width: 24px; height: 24px; color: var(--ld-cyan); flex: none; margin-top: 3px; }
.ld-hosts-list div { color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.6; }
.ld-hosts-list strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--ld-white);
  margin-bottom: 3px;
}

.ld-hosts-art { position: relative; }
.ld-hosts-frame {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.38);
}
.ld-hosts-frame img { width: 100%; height: auto; }
.ld-hosts-chip {
  position: absolute;
  left: -18px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 13px 16px;
  background: var(--ld-white);
  border-radius: 13px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
}
.ld-hosts-chip svg {
  width: 20px;
  height: 20px;
  color: var(--ld-white);
  background: var(--ld-green);
  border-radius: 50%;
  padding: 4px;
  flex: none;
}
.ld-hosts-chip strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--ld-navy);
  line-height: 1.25;
}
.ld-hosts-chip span { font-size: 12.5px; color: var(--ld-ink-soft); }

/* ------------------------------------------------------------------ guarantee */
.ld-guarantee { padding: 70px 0; background: linear-gradient(180deg, #FFF8E6 0%, #FFFDF7 100%); }
.ld-guarantee-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
  text-align: left;
}
.ld-badge-static { position: static; flex: none; width: 140px; height: 140px; }
.ld-guarantee h2 { font-size: clamp(25px, 3vw, 34px); font-weight: 900; font-style: italic; margin-bottom: 12px; }
.ld-guarantee p { margin: 0; font-size: 16.5px; color: var(--ld-ink-soft); max-width: 46em; }

/* ------------------------------------------------------------------ partner */
.ld-partner {
  background: var(--ld-white);
  border: 1px solid var(--ld-line);
  border-radius: 22px;
  padding: 52px 48px;
  box-shadow: var(--ld-shadow-sm);
  border-left: 6px solid var(--ld-cyan);
}
.ld-partner-copy { max-width: 46em; }
.ld-partner h2 { font-size: clamp(27px, 3.2vw, 38px); font-weight: 900; font-style: italic; margin-bottom: 14px; }
.ld-partner p { font-size: 16.5px; color: var(--ld-ink-soft); margin: 0 0 22px; }
.ld-partner-points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.ld-partner-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ld-navy);
}
.ld-partner-points svg { width: 16px; height: 16px; color: var(--ld-green); flex: none; }

/* ------------------------------------------------------------------ final CTA */
.ld-final {
  padding: 86px 0;
  background: linear-gradient(105deg, var(--ld-cyan) 0%, var(--ld-ocean) 100%);
  text-align: center;
}
.ld-final h2 {
  color: var(--ld-white);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  font-style: italic;
  margin-bottom: 12px;
}
.ld-final p { color: rgba(255, 255, 255, 0.88); font-size: 17.5px; margin: 0 0 30px; }
.ld-final-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ------------------------------------------------------------------ footer */
.ld-footer { background: #17222D; color: rgba(255, 255, 255, 0.64); padding: 50px 0 0; }
.ld-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 36px;
}
.ld-footer-about img { height: 32px; width: auto; align-self: flex-start; margin-bottom: 14px; }
.ld-footer-about strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ld-white);
  margin-bottom: 7px;
}
.ld-footer-about p { margin: 0 0 4px; font-size: 14px; }
.ld-footer-about a { color: var(--ld-cyan); text-decoration: none; }
.ld-footer-about a:hover { text-decoration: underline; }
.ld-footer-areas { font-size: 13px !important; color: rgba(255, 255, 255, 0.44); }

.ld-footer-links { display: flex; flex-direction: column; gap: 10px; }
.ld-footer-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.ld-footer-links a:hover { color: var(--ld-white); }

.ld-footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 24px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
}

/* ------------------------------------------------------------------ reveal */
/* The hiding half only exists under .ld-js, which the script adds, so a blocked script can never
   leave the page invisible. Same rule as the STR client report's own reveal. */
.ld-js .ld-reveal { opacity: 0; transform: translateY(18px); }
.ld-js .ld-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ld-js .ld-reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .ld-nav-links { gap: 18px; }
  .ld-nav-links a { font-size: 13.5px; }
  .ld-hero-inner, .ld-hosts-inner { gap: 44px; }
}

@media (max-width: 940px) {
  /* The links row is what was pushing the actions to the right end, so once it is gone the
     actions have to claim that space themselves or they sit against the brand. */
  .ld-nav-links { display: none; }
  .ld-nav-actions { margin-left: auto; }
  .ld-hero { padding: 56px 0 76px; }
  .ld-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .ld-hosts-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ld-trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .ld-guarantee-inner { flex-direction: column; text-align: center; gap: 26px; }
  .ld-partner { padding: 40px 30px; }
}

@media (max-width: 620px) {
  .ld-wrap, .ld-nav-inner, .ld-hero-inner, .ld-trust-inner, .ld-footer-base { padding-left: 16px; padding-right: 16px; }
  .ld-section { padding: 62px 0; }
  .ld-hosts { padding: 68px 0; }
  /* Measured at 375px: the brand block, the call pill and the booking button together ran to
     397px and put a horizontal scrollbar on the whole page. The number plate collapses to its
     icon, the gaps tighten, and the brand's own strapline gives back the ~40px that closed it. */
  .ld-nav-inner { gap: 10px; }
  .ld-nav-actions { gap: 8px; }
  .ld-nav-call span { display: none; }
  .ld-nav-call { padding: 9px 11px; }
  .ld-brand img { height: 28px; }
  .ld-brand-sub { font-size: 8px; letter-spacing: 0.08em; }
  .ld-btn-sm { padding: 10px 14px; font-size: 13px; }
  .ld-hero h1 { font-size: 36px; }
  .ld-lede { font-size: 16.5px; }
  .ld-hero-cta .ld-btn, .ld-final-cta .ld-btn { width: 100%; }
  /* The badge and the rating card move inside the frame's own bounds on a phone, where an
     overhanging element would otherwise push the page sideways. */
  .ld-badge { width: 92px; height: 92px; top: -16px; left: -6px; border-width: 3px; }
  .ld-badge-num { font-size: 25px; }
  .ld-badge-unit { font-size: 8.5px; margin-bottom: 3px; }
  .ld-badge-label { font-size: 7.6px; }
  .ld-float-card { right: 0; bottom: -18px; padding: 11px 15px; }
  .ld-hosts-chip { left: 0; right: 0; bottom: -18px; justify-content: center; }
  .ld-trust-inner { grid-template-columns: minmax(0, 1fr); }
  .ld-badge-static { width: 116px; height: 116px; }
  .ld-footer-inner { flex-direction: column; gap: 26px; }
}

/* ================================================================== September 2026 additions */

/* ------------------------------------------------------------------ hero video over the still */
.ld-hero-frame { position: relative; aspect-ratio: 1344 / 752; background: #E7EEF0; }
.ld-hero-frame img, .ld-hero-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.ld-hero-video.is-playing { opacity: 1; }

/* ------------------------------------------------------------------ savings finder */
.ld-finder {
  margin-top: 28px; padding: 18px 18px 16px; max-width: 520px;
  background: var(--ld-white); border: 1px solid var(--ld-line); border-radius: 18px;
  box-shadow: var(--ld-shadow-md);
}
.ld-finder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ld-finder-kicker { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ld-ocean); }
.ld-finder-best { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; color: #3F7D22; }
.ld-finder-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 10px; }
.ld-finder-label { font-size: 12.5px; font-weight: 700; color: var(--ld-ink-soft); }
.ld-seg { display: flex; padding: 3px; gap: 3px; border-radius: 11px; background: var(--ld-soft); border: 1px solid var(--ld-line); }
.ld-seg button {
  flex: 1; border: 0; background: none; cursor: pointer; padding: 8px 6px; border-radius: 8px;
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--ld-ink-soft); white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ld-seg button:hover { color: var(--ld-navy); }
.ld-seg button.is-on { background: var(--ld-white); color: var(--ld-navy); box-shadow: 0 2px 8px rgba(30, 84, 100, 0.14); }
.ld-seg button:focus-visible { outline: 2px solid var(--ld-ocean); outline-offset: 1px; }
.ld-finder-result {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "save text" "go go";
  gap: 4px 14px; align-items: center; margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--ld-line);
}
.ld-finder-save { grid-area: save; display: flex; align-items: baseline; gap: 4px; }
.ld-finder-pct {
  font-family: 'Montserrat', sans-serif; font-size: 44px; font-weight: 900; font-style: italic; line-height: 1;
  color: #3F7D22; font-variant-numeric: tabular-nums;
}
.ld-finder-pct.is-bump { animation: ld-bump 0.4s ease; }
@keyframes ld-bump { 40% { transform: scale(1.08); } }
.ld-finder-off { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; color: #3F7D22; }
.ld-finder-text { grid-area: text; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ld-ink-soft); }
.ld-finder-go { grid-area: go; margin-top: 10px; justify-content: center; }

/* ------------------------------------------------------------------ before and after */
.ld-ba {
  --pos: 50%;
  position: relative; max-width: 960px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  box-shadow: var(--ld-shadow-lg); aspect-ratio: 1024 / 688; background: #E7EEF0; user-select: none;
}
.ld-ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ld-ba-tag {
  position: absolute; top: 16px; padding: 6px 12px; border-radius: 9px; pointer-events: none;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(23, 34, 45, 0.72); color: #fff; backdrop-filter: blur(4px);
}
.ld-ba-tag.is-before { left: 16px; }
.ld-ba-tag.is-after { right: 16px; background: rgba(79, 168, 60, 0.9); }
.ld-ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none;
}
.ld-ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); }
.ld-ba-handle svg {
  position: absolute; top: 50%; left: 0; width: 46px; height: 46px; padding: 11px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; color: var(--ld-navy); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.ld-ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.ld-ba-range:focus-visible + * , .ld-ba:focus-within .ld-ba-handle svg { outline: 3px solid var(--ld-ocean); outline-offset: 2px; }
.ld-ba-note { margin: 14px auto 0; text-align: center; font-size: 12.5px; color: var(--ld-ink-soft); }

/* ------------------------------------------------------------------ savings, worked example */
.ld-sv {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; align-items: center;
  max-width: 980px; margin: 0 auto; padding: 32px; border-radius: 22px;
  background: linear-gradient(150deg, #1E5464 0%, #2B7387 55%, #3E95AC 100%); color: #fff; box-shadow: var(--ld-shadow-lg);
}
.ld-sv-kicker { font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #A9DCE9; }
.ld-sv-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.ld-sv-price span { font-family: 'Montserrat', sans-serif; font-size: 60px; font-weight: 900; font-style: italic; line-height: 1; font-variant-numeric: tabular-nums; }
.ld-sv-price small { font-size: 15px; color: rgba(255, 255, 255, 0.8); }
.ld-sv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 22px; min-height: 30px; }
.ld-sv-pct { padding: 5px 10px; border-radius: 8px; background: var(--ld-green); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; }
.ld-sv-year { font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.ld-sv-range { width: 100%; accent-color: var(--ld-green); height: 28px; cursor: pointer; }
.ld-sv-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); }
.ld-sv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 5px solid var(--ld-green); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.ld-sv-range::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); }
.ld-sv-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 5px solid var(--ld-green); }
.ld-sv-range { -webkit-appearance: none; appearance: none; background: none; }
.ld-sv-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
.ld-sv-ticks span.is-on { color: #fff; }
.ld-sv-bars { display: flex; flex-direction: column; gap: 10px; }
.ld-sv-bar {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 118px; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.06);
  color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease;
}
.ld-sv-bar:hover { background: rgba(255, 255, 255, 0.1); }
.ld-sv-bar.is-on { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); }
.ld-sv-bar-name { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; }
.ld-sv-bar-track { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.ld-sv-bar-track i { display: block; height: 100%; border-radius: 5px; background: rgba(255, 255, 255, 0.55); transition: background 0.2s ease; }
.ld-sv-bar.is-on .ld-sv-bar-track i { background: var(--ld-green); }
.ld-sv-bar-val { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ld-sv-bar-val em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: #B9EBA5; }
.ld-sv-note { max-width: 720px; margin: 16px auto 0; text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--ld-ink-soft); }

/* ------------------------------------------------------------------ what's included */
.ld-inc { max-width: 980px; margin: 0 auto; background: var(--ld-white); border: 1px solid var(--ld-line); border-radius: 22px; box-shadow: var(--ld-shadow-md); overflow: hidden; }
.ld-inc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ld-line); }
.ld-inc-tabs button {
  border: 0; background: none; cursor: pointer; padding: 18px 12px 16px; border-bottom: 3px solid transparent;
  font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; color: var(--ld-ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ld-inc-tabs button small { font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--ld-ink-soft); opacity: 0.8; }
.ld-inc-tabs button:hover { background: var(--ld-soft); }
.ld-inc-tabs button.is-on { color: var(--ld-navy); border-bottom-color: var(--ld-ocean); background: var(--ld-soft); }
.ld-inc-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 360px; }
.ld-inc-rooms { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-right: 1px solid var(--ld-line); background: #FBFDFE; }
.ld-inc-rooms button {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0; cursor: pointer; text-align: left;
  padding: 11px 12px; border-radius: 11px; background: none; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--ld-ink);
}
.ld-inc-rooms button span { font-size: 11.5px; font-weight: 800; color: var(--ld-ink-soft); background: var(--ld-soft); padding: 2px 8px; border-radius: 7px; }
.ld-inc-rooms button:hover { background: var(--ld-soft); }
.ld-inc-rooms button.is-on { background: var(--ld-navy); color: #fff; }
.ld-inc-rooms button.is-on span { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ld-inc-panel { padding: 22px 28px 26px; }
.ld-inc-tagline { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; color: var(--ld-ocean); }
.ld-inc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.ld-inc-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ld-ink); }
.ld-inc-list svg { width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: #EAF7E4; color: #3F7D22; }
.ld-inc-list.is-in li { animation: ld-rise 0.35s ease both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes ld-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ FAQ */
.ld-faq-wrap { max-width: 820px; }
.ld-faq { display: flex; flex-direction: column; gap: 10px; }
.ld-faq-item { border: 1px solid var(--ld-line); border-radius: 16px; background: var(--ld-white); transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.ld-faq-item[open] { border-color: #BFE3EC; box-shadow: var(--ld-shadow-sm); }
.ld-faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; color: var(--ld-navy);
}
.ld-faq-item summary::-webkit-details-marker { display: none; }
.ld-faq-icon { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--ld-soft); }
.ld-faq-icon::before, .ld-faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 1px; background: var(--ld-ocean); transition: transform 0.2s ease; }
.ld-faq-icon::after { transform: rotate(90deg); }
.ld-faq-item[open] .ld-faq-icon::after { transform: rotate(0deg); }
.ld-faq-item p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.65; color: var(--ld-ink-soft); }
.ld-head p a { color: var(--ld-ocean); font-weight: 700; }

/* ------------------------------------------------------------------ phone booking bar */
.ld-mbar { display: none; }
@media (max-width: 760px) {
  .ld-mbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
    display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 16px; border-radius: 16px;
    background: rgba(23, 34, 45, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32); color: #fff;
    transform: translateY(140%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .ld-mbar.is-shown { transform: none; }
  .ld-mbar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .ld-mbar-text b { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #B9EBA5; }
  .ld-mbar-text span { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
  .ld-mbar-call { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.12); color: #fff; }
  .ld-mbar-call svg { width: 19px; height: 19px; }
  .ld-mbar-book { height: 44px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 12px; background: var(--ld-green); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; text-decoration: none; }
  .ld-footer { padding-bottom: 88px; }
}

/* ------------------------------------------------------------------ additions, responsive */
@media (max-width: 940px) {
  .ld-finder { max-width: none; }
  .ld-sv { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px 22px; }
  .ld-inc-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ld-inc-rooms { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ld-line); padding: 12px; scrollbar-width: none; }
  .ld-inc-rooms::-webkit-scrollbar { display: none; }
  .ld-inc-rooms button { flex: none; }
}
@media (max-width: 620px) {
  .ld-finder { padding: 16px 14px 14px; }
  .ld-finder-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ld-seg button { font-size: 12px; padding: 8px 4px; }
  .ld-finder-pct { font-size: 38px; }
  .ld-ba { border-radius: 16px; }
  .ld-ba-tag { top: 10px; font-size: 11px; padding: 5px 9px; }
  .ld-ba-tag.is-before { left: 10px; }
  .ld-ba-tag.is-after { right: 10px; }
  .ld-ba-handle svg { width: 40px; height: 40px; padding: 9px; }
  .ld-sv-price span { font-size: 48px; }
  .ld-sv-bar { grid-template-columns: 92px minmax(0, 1fr) 84px; gap: 8px; padding: 9px 10px; }
  .ld-sv-bar-name { font-size: 12px; }
  .ld-sv-bar-val { font-size: 14px; }
  .ld-inc-tabs button { font-size: 14px; padding: 14px 6px 12px; }
  .ld-inc-panel { padding: 18px 16px 20px; }
  .ld-inc-list { grid-template-columns: minmax(0, 1fr); }
  .ld-faq-item summary { font-size: 15px; padding: 16px; }
  .ld-faq-item p { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-finder-pct.is-bump, .ld-inc-list.is-in li { animation: none; }
  .ld-mbar { transition: none; }
}