/* ============================================================================
   MLHS Brand Design System — Montalvo Landscaping & Handyman Services

   Fortune-500 premium-services refresh (2026-07).
   Reference visual language: BrightView Landscapes, TruGreen (2025 refresh),
   Cintas. Design principles:
     - White + light neutrals; no editorial cream backgrounds.
     - One brand color (modernized MLHS green) reserved for CTAs, headings,
       and accents. Gold retired to micro-accents (logo underline, review
       stars) only.
     - Modern geometric sans (Inter) throughout. No serif display face.
     - Tight 8pt grid, generous whitespace, 1px hairline borders in place
       of shadows wherever possible.
     - Near-black body text (#0a0f14) for maximum contrast on white.

   The public class API is unchanged (.mlhs, .mlhs-container, .mlhs-hero,
   .mlhs-btn, .mlhs-card, .mlhs-section, .mlhs-nav, .mlhs-footer, etc.) so
   every page picks up the new look with no HTML edits.

   Legacy palette variables (--mlhs-cream, --mlhs-sage) are retained as
   aliases that now point to neutral values so any inline styles or older
   CSS files that reference them degrade gracefully instead of breaking.
   ============================================================================ */

:root {
  /* Core palette — Fortune-500 premium-services refresh */
  --mlhs-white:      #ffffff;
  --mlhs-off:        #fafafa;   /* app background / alternating section */
  --mlhs-surface:    #ffffff;   /* card fill */
  --mlhs-surface-2:  #f5f6f7;   /* subtle raised surface / hover */
  --mlhs-ink:        #0a0f14;   /* body text — near-black, not blue */
  --mlhs-ink-2:      #1f2933;   /* strong secondary text */
  --mlhs-muted:      #556270;   /* muted body */
  --mlhs-dim:        #5a6a7a;   /* labels, meta — darkened from #8a97a5 (was 2.98 on white, now 5.3, passes AA) */
  --mlhs-border:     #e5e7eb;   /* hairline border */
  --mlhs-border-2:   #d1d5db;   /* stronger hairline */

  /* Brand accent — modernized crisp green (was #1e3a2e) */
  --mlhs-green:      #0f5132;
  --mlhs-green-2:    #146c43;
  --mlhs-green-dark: #0a3d24;
  --mlhs-green-tint: #ecf5f0;

  /* Gold — reserved for micro-accents only (logo underline, review stars) */
  --mlhs-gold:       #b8860b;
  --mlhs-gold-2:     #a87700;

  /* Legacy aliases — do not use in new code. Kept so existing rules keep
     working after the refresh instead of falling back to unset. */
  --mlhs-cream:     var(--mlhs-white);
  --mlhs-cream-2:   var(--mlhs-off);
  --mlhs-sage:      var(--mlhs-green-2);
  --mlhs-sage-tint: var(--mlhs-green-tint);

  /* Typography — Inter throughout. --font-serif kept as an alias to sans so
     legacy `font-family: var(--font-serif)` calls fall back cleanly. */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono:  ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  /* 8pt spacing scale (multiples of 4) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  /* Shadows kept minimal — F500 leans on hairline borders instead */
  --shadow-sm: 0 1px 2px rgba(10,15,20,0.04);
  --shadow:    0 4px 12px rgba(10,15,20,0.06);
  --shadow-lg: 0 12px 32px rgba(10,15,20,0.08);

  --container: 1200px;
}

/* ------------------------------------------------------------------ reset */
.mlhs *,
.mlhs *::before,
.mlhs *::after { box-sizing: border-box; }

.mlhs {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--mlhs-ink);
  background: var(--mlhs-white);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

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

/* Type system — Inter throughout, tighter tracking on big sizes, weight
   escalates instead of family swapping (F500 discipline). */
.mlhs h1, .mlhs h2, .mlhs h3, .mlhs h4 {
  font-family: var(--font-sans);
  color: var(--mlhs-ink);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.02em;
}
.mlhs h1 { font-size: clamp(36px, 4.8vw, 60px); letter-spacing: -0.03em; }
.mlhs h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.025em; }
.mlhs h3 { font-size: clamp(20px, 2.0vw, 24px); font-weight: 600; letter-spacing: -0.015em; }
.mlhs h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.mlhs p { margin: 0 0 1em; color: var(--mlhs-ink-2); }
.mlhs a { color: var(--mlhs-green); text-decoration: none; font-weight: 500; }
.mlhs a:hover { color: var(--mlhs-green-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

.mlhs :focus-visible {
  outline: 2px solid var(--mlhs-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- containers */
.mlhs-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) { .mlhs-container { padding: 0 18px; } }

/* --------------------------------------------------------- announcement bar
   Retired the dark-green pill above the nav (looked heavy and 2018-era).
   Replaced with a quiet neutral strip — near-black text on off-white,
   1px hairline below. Reads like an enterprise site banner (Cintas /
   ServiceTitan / BrightView), not a marketing template. */
.mlhs-announce {
  background: var(--mlhs-off);
  color: var(--mlhs-ink-2);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mlhs-border);
  letter-spacing: -0.005em;
}
.mlhs-announce strong { color: var(--mlhs-green); font-weight: 600; }
.mlhs-announce a { color: var(--mlhs-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* --------------------------------------------------------------------- nav */
.mlhs-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.90);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--mlhs-border);
}
.mlhs-nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.mlhs-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.mlhs-wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--mlhs-green);
  line-height: 1;
  position: relative;
  display: inline-block;
}
.mlhs-wordmark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 26px;
  height: 2px;
  background: var(--mlhs-gold);
  border-radius: 2px;
}
.mlhs-fullname {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--mlhs-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 900px) { .mlhs-fullname { display: none; } }

.mlhs-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.mlhs-nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--mlhs-ink);
  letter-spacing: 0.005em;
}
.mlhs-nav-links a:hover { color: var(--mlhs-green); }

.mlhs-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--mlhs-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--mlhs-green);
}
.mlhs-nav-sheet {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: var(--mlhs-white);
  border-bottom: 1px solid var(--mlhs-border);
  padding: 8px 24px 18px;
}
.mlhs-nav-sheet a {
  padding: 12px 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--mlhs-ink);
  border-bottom: 1px solid var(--mlhs-border);
}
.mlhs-nav-sheet a:last-child { border-bottom: none; }
.mlhs-nav-sheet.open { display: flex; }

@media (max-width: 820px) {
  .mlhs-nav-links { display: none; }
  .mlhs-nav-toggle { display: inline-flex; }
}

/* ----------------------------------------------------------------- buttons
   Fortune-500 refresh: solid brand-green primary, no gradients, no lift
   transforms (translate on hover was 2019-era startup). Corners tightened
   from 14px to 10px — reads more corporate. Gold button retired from the
   marketing pages but the .mlhs-btn-gold class is kept as a benign alias
   so any HTML still referencing it doesn't break the layout. */
.mlhs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  background: var(--mlhs-green);
  color: var(--mlhs-white);
  box-shadow: none;
}
.mlhs-btn:hover { background: var(--mlhs-green-dark); color: var(--mlhs-white); text-decoration: none; }
.mlhs-btn:active { background: var(--mlhs-green-dark); }

/* .mlhs-btn-gold — alias to primary green now that gold is retired from CTAs.
   Kept the class name so existing HTML doesn't need to change. */
.mlhs-btn-gold { background: var(--mlhs-green); color: var(--mlhs-white); }
.mlhs-btn-gold:hover { background: var(--mlhs-green-dark); color: var(--mlhs-white); }

.mlhs-btn-ghost {
  background: var(--mlhs-white);
  color: var(--mlhs-ink);
  border-color: var(--mlhs-border-2);
  box-shadow: none;
}
.mlhs-btn-ghost:hover { background: var(--mlhs-surface-2); color: var(--mlhs-ink); border-color: var(--mlhs-ink); }

.mlhs-btn-ghost-light {
  background: transparent;
  color: var(--mlhs-white);
  border-color: rgba(255,255,255,0.75);
  box-shadow: none;
}
.mlhs-btn-ghost-light:hover { background: var(--mlhs-white); color: var(--mlhs-ink); border-color: var(--mlhs-white); }

/* Light-on-dark ghost button for photo heroes. Scoped with .mlhs to beat the
   generic `.mlhs a { color: var(--mlhs-green-2) }` link rule that otherwise
   overrides the button color and makes the label unreadable on photos. */
.mlhs a.mlhs-btn-ghost-on-dark,
.mlhs-btn-ghost-on-dark {
  background: transparent;
  color: var(--mlhs-cream);
  border-color: var(--mlhs-cream);
  box-shadow: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.mlhs a.mlhs-btn-ghost-on-dark:hover,
.mlhs-btn-ghost-on-dark:hover {
  background: rgba(247,243,232,0.16);
  color: var(--mlhs-cream);
  border-color: var(--mlhs-cream);
  text-shadow: none;
}

/* ─── Anchor button contrast fix ───
   The generic `.mlhs a { color: var(--mlhs-green-2) }` rule bleeds into every
   button-styled anchor (`<a class="mlhs-btn">Book Now</a>`) and paints the
   label dark green on a dark green background — near invisible. Re-apply the
   correct label color for each button variant with higher specificity so the
   anchor rule can't win. Keep the hover styles too, otherwise `.mlhs a:hover`
   flips the label to gold on a green button (still low contrast).

   These rules must live AFTER the base .mlhs-btn* rules so they override
   them cleanly when the button happens to be an <a>. */
.mlhs a.mlhs-btn,
.mlhs a.mlhs-btn:visited { color: var(--mlhs-white); }
.mlhs a.mlhs-btn:hover { color: var(--mlhs-white); }
.mlhs a.mlhs-btn-gold,
.mlhs a.mlhs-btn-gold:visited,
.mlhs a.mlhs-btn-gold:hover { color: var(--mlhs-white); }
.mlhs a.mlhs-btn-ghost,
.mlhs a.mlhs-btn-ghost:visited { color: var(--mlhs-ink); }
.mlhs a.mlhs-btn-ghost:hover { color: var(--mlhs-ink); }
.mlhs a.mlhs-btn-ghost-light,
.mlhs a.mlhs-btn-ghost-light:visited { color: var(--mlhs-white); }
.mlhs a.mlhs-btn-ghost-light:hover { color: var(--mlhs-ink); }

.mlhs-btn.sm { padding: 10px 18px; font-size: 14px; }
.mlhs-btn.lg { padding: 17px 34px; font-size: 17px; }

/* ------------------------------------------------------------------ cards
   Flat white cards with a 1px hairline border. No drop shadow at rest —
   F500 leans on borders, not shadows. Radius pulled in from 22px to 14px. */
.mlhs-card {
  background: var(--mlhs-white);
  border: 1px solid var(--mlhs-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 32px;
}
.mlhs-card-featured { border: 1px solid var(--mlhs-green); box-shadow: 0 0 0 3px var(--mlhs-green-tint); }

.mlhs-service-card {
  background: var(--mlhs-white);
  border: 1px solid var(--mlhs-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 28px 28px 24px;
  transition: border-color .15s ease, background .15s ease;
}
.mlhs-service-card:hover { border-color: var(--mlhs-ink); background: var(--mlhs-off); }
.mlhs-service-ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--mlhs-green-tint);
  display: grid; place-items: center;
  color: var(--mlhs-green);
  margin-bottom: 20px;
}
.mlhs-service-ico svg { width: 22px; height: 22px; }
.mlhs-service-card h3 { margin-bottom: 6px; font-size: 18px; }
.mlhs-service-card p { color: var(--mlhs-muted); font-size: 15px; margin-bottom: 14px; line-height: 1.55; }
.mlhs-learn { font-weight: 600; color: var(--mlhs-green); font-size: 14.5px; }
.mlhs-learn:hover { color: var(--mlhs-green-dark); }

/* --------------------------------------------------------------- sections
   Default section background is pure white. --cream / --cream-2 legacy
   modifiers now map to the neutral off-white so old markup falls into a
   clean two-tier white/off-white rhythm instead of the old warm cream. */
.mlhs-section { padding-block: 96px; background: var(--mlhs-white); }
.mlhs-section--cream   { background: var(--mlhs-off); }
.mlhs-section--cream-2 { background: var(--mlhs-off); }
.mlhs-section--green   { background: var(--mlhs-ink); color: var(--mlhs-white); }
.mlhs-section--green h1,
.mlhs-section--green h2,
.mlhs-section--green h3 { color: var(--mlhs-white); }
.mlhs-section--sage { background: var(--mlhs-green-tint); }
@media (max-width: 720px) { .mlhs-section { padding-block: 56px; } }

.mlhs-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.mlhs-section-head.left { margin-left: 0; text-align: left; }
.mlhs-section-head p { color: var(--mlhs-muted); font-size: 17px; line-height: 1.6; }
.mlhs-section--green .mlhs-section-head p { color: rgba(255,255,255,0.78); }

/* ------------------------------------------------------------ kicker/eyebrow
   Kept the uppercase micro-label pattern (it's an F500 staple) but recolored
   from gold to the muted dim tone. Reads as classification, not decoration. */
.mlhs-kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mlhs-dim);
  margin-bottom: 18px;
}

/* ------------------------------------------------------------- hero title
   Was italic Fraunces (wedding-invitation vibe). Now: Inter, 700 weight,
   tightly tracked, no italic. .italic modifier neutered so old markup
   doesn't render italic anymore. */
.mlhs-h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.6vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
}
.mlhs-h1.italic { font-style: normal; }

/* --------------------------------------------------------------- tagline */
.mlhs-tagline {
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--mlhs-muted);
  font-size: 17px;
  font-weight: 500;
}

/* ---------------------------------------------------------- grid helpers */
.mlhs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.mlhs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mlhs-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 980px) {
  .mlhs-grid-3, .mlhs-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mlhs-grid-2, .mlhs-grid-3, .mlhs-grid-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- hero
   Cleaner, tighter hero. Overlay is now a bottom-weighted dark gradient
   (rather than a heavy diagonal green wash) so the photograph reads more
   like a real product/services shot and less like a colored tint. Height
   trimmed from 92vh to 78vh — F500 heroes are impactful but not full-screen. */
.mlhs-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: var(--mlhs-white);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.mlhs-hero::before {
  content: "";
  position: absolute; inset: 0;
  /* Left-anchored dark scrim so the copy over the photo always has legible contrast
     regardless of what the underlying image is doing (bright grass, sky, etc.).
     Two stacked gradients: horizontal darkens the left column where copy sits,
     vertical adds a subtle bottom weight for CTAs. */
  background:
    linear-gradient(90deg,  rgba(10,15,20,0.72) 0%, rgba(10,15,20,0.55) 30%, rgba(10,15,20,0.20) 65%, rgba(10,15,20,0.05) 100%),
    linear-gradient(180deg, rgba(10,15,20,0.10) 0%, rgba(10,15,20,0.05) 55%, rgba(10,15,20,0.55) 100%);
}
.mlhs-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 112px 24px 96px;
}
.mlhs-hero-copy { max-width: 680px; }
.mlhs-hero .mlhs-h1 { color: var(--mlhs-white); text-shadow: 0 2px 24px rgba(0,0,0,0.28); }
.mlhs-hero .mlhs-kicker { color: rgba(255,255,255,0.86); text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.mlhs-hero-sub,
.mlhs .mlhs-hero-sub,
.mlhs-hero .mlhs-hero-sub,
.mlhs-hero p.mlhs-hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: #ffffff;
  max-width: 560px;
  margin-bottom: 32px;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.mlhs-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

/* ------------------------------------------------------------ trust pills
   Retired the sage-tint pill. On white surfaces: white pill with a hairline
   border. On hero: quiet translucent white. No colored fills. */
.mlhs-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mlhs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--mlhs-white);
  color: var(--mlhs-ink-2);
  border: 1px solid var(--mlhs-border);
}
.mlhs-pill--gold { background: var(--mlhs-white); color: var(--mlhs-ink-2); border-color: var(--mlhs-border); }
.mlhs-pill--gold .mlhs-star { color: var(--mlhs-gold); }
.mlhs-pill--onhero {
  background: rgba(255,255,255,0.10);
  color: var(--mlhs-white);
  border-color: rgba(255,255,255,0.24);
  backdrop-filter: blur(6px);
  font-weight: 500;
}
.mlhs-pill--onhero .mlhs-star { color: var(--mlhs-gold); }

.mlhs-chip {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--mlhs-white);
  color: var(--mlhs-ink);
  border: 1px solid var(--mlhs-border);
  cursor: default;
  transition: border-color .15s ease, background .15s ease;
}
.mlhs-chip:hover { border-color: var(--mlhs-ink); background: var(--mlhs-surface-2); color: var(--mlhs-ink); }
.mlhs-chip.active { background: var(--mlhs-ink); color: var(--mlhs-white); border-color: var(--mlhs-ink); }

/* ------------------------------------------------------------ trust strip */
.mlhs-trustbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 44px;
  padding: 26px 24px;
  border-top: 1px solid var(--mlhs-border);
  border-bottom: 1px solid var(--mlhs-border);
  background: var(--mlhs-off);
}
.mlhs-trustbar-item {
  font-size: 13px;
  font-weight: 600;
  color: var(--mlhs-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 9px;
}
.mlhs-trustbar-item svg { color: var(--mlhs-green); width: 18px; height: 18px; }

/* --------------------------------------------------------------- process
   Was serif italic gold numerals — read as decorative. Now: heavy sans in
   brand green, sitting flush with the step title. Reads like a real numbered
   process step (Cintas / TruGreen). */
.mlhs-step { position: relative; padding-top: 8px; }
.mlhs-step-num {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  color: var(--mlhs-green);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.mlhs-section--green .mlhs-step-num { color: var(--mlhs-white); }
.mlhs-step h3 { font-size: 19px; margin-bottom: 6px; }
.mlhs-step p { color: var(--mlhs-muted); font-size: 15px; }
.mlhs-section--green .mlhs-step p { color: rgba(255,255,255,0.72); }

/* ------------------------------------------------------------- guarantee */
.mlhs-guarantee-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 720px) { .mlhs-guarantee-list { grid-template-columns: 1fr; } }
.mlhs-guarantee-item {
  text-align: left;
  padding: 24px 22px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
}
.mlhs-guarantee-item svg { width: 26px; height: 26px; color: var(--mlhs-white); margin-bottom: 14px; opacity: .85; }
.mlhs-guarantee-item h3 { color: var(--mlhs-white); font-size: 17px; margin-bottom: 4px; }
.mlhs-guarantee-item p { color: rgba(255,255,255,0.72); font-size: 14.5px; margin: 0; }

/* ------------------------------------------------------------ testimonial */
.mlhs-testimonial {
  background: var(--mlhs-white);
  border: 1px solid var(--mlhs-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 28px 28px 24px;
  position: relative;
}
.mlhs-quote-mark { display: none; }  /* dropped: decorative serif quote mark reads dated */
.mlhs-testimonial p { color: var(--mlhs-ink); font-size: 16px; font-style: normal; line-height: 1.6; }
.mlhs-stars { color: var(--mlhs-gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.mlhs-attrib { font-weight: 600; color: var(--mlhs-ink); font-size: 15px; }
.mlhs-attrib span { display: block; font-weight: 500; color: var(--mlhs-muted); font-size: 13px; margin-top: 2px; letter-spacing: 0.02em; }

/* ----------------------------------------------------------- gallery tile
   Radius tightened, hairline border added at rest, overlay label now sans. */
.mlhs-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--mlhs-border);
  box-shadow: none;
}
.mlhs-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mlhs-tile:hover img { transform: scale(1.04); }
.mlhs-tile-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px;
  background: linear-gradient(0deg, rgba(10,15,20,0.82) 0%, rgba(10,15,20,0) 60%);
  color: var(--mlhs-white);
  opacity: 0;
  transition: opacity .2s ease;
}
.mlhs-tile:hover .mlhs-tile-overlay { opacity: 1; }
.mlhs-tile-overlay strong { font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.mlhs-tile-overlay span { font-size: 13px; color: rgba(255,255,255,0.80); margin-top: 2px; }

/* ----------------------------------------------------------------- FAQ
   Was rounded card FAQ w/ gold plus glyph. Now flat rows separated by
   hairlines (Cintas / IBM style). Much less visual noise. */
.mlhs-faq { max-width: 760px; margin: 0 auto; }
.mlhs-faq details {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mlhs-border);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.mlhs-faq details:first-child { border-top: 1px solid var(--mlhs-border); }
.mlhs-faq summary {
  cursor: pointer;
  padding: 22px 4px;
  font-weight: 600;
  font-size: 17px;
  color: var(--mlhs-ink);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  letter-spacing: -0.01em;
}
.mlhs-faq summary::-webkit-details-marker { display: none; }
.mlhs-faq summary::after {
  content: "+";
  font-size: 22px; font-weight: 400; color: var(--mlhs-muted);
  transition: transform .2s ease;
  line-height: 1;
}
.mlhs-faq details[open] summary::after { content: "\2013"; }
.mlhs-faq details p { padding: 0 4px 22px; margin: 0; color: var(--mlhs-muted); font-size: 15.5px; line-height: 1.6; }

/* --------------------------------------------------------------- footer
   Was dark-green + gold italic tagline (marketing-template look). Now:
   near-black background with white text, muted section labels, and a
   subtle gold underline that only appears under the wordmark. */
.mlhs-footer { background: var(--mlhs-ink); color: var(--mlhs-white); padding: 72px 0 0; }
.mlhs-footer .mlhs-footer-tag,
body.mlhs2028 .mlhs-footer .mlhs-footer-tag,
body.book-2028 .mlhs-footer .mlhs-footer-tag {
  /* Contrast fix: same 'body.mlhs2028 p' cascade issue that hit the
     column headings. Without body-scoped selectors, the tagline
     collapsed to var(--m28-ink-soft) (dark ink on the dark footer,
     ratio 1.30). Force a bright but not-shouty white here. */
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  margin-bottom: 44px;
  text-align: center;
  max-width: 520px;
  margin-left: auto; margin-right: auto;
  line-height: 1.5;
}
.mlhs-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 52px;
}
@media (max-width: 820px) { .mlhs-footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .mlhs-footer-cols { grid-template-columns: 1fr; } }
.mlhs-footer .mlhs-footer-col h4,
body.mlhs2028 .mlhs-footer .mlhs-footer-col h4,
body.book-2028 .mlhs-footer .mlhs-footer-col h4 {
  /* Fortune-500 legibility: was rgba(255,255,255,0.52) which was borderline
     invisible on the dark footer. Full white at slightly larger size and
     tighter tracking so the section labels have real presence without
     shouting against the body links. Multiple selectors so this beats
     body.mlhs2028 h4 in mlhs-2028.css (loaded later) and any other
     page-scoped heading resets. */
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.mlhs-footer .mlhs-footer-col a,
.mlhs-footer .mlhs-footer-col p,
body.mlhs2028 .mlhs-footer .mlhs-footer-col a,
body.mlhs2028 .mlhs-footer .mlhs-footer-col p,
body.book-2028 .mlhs-footer .mlhs-footer-col a,
body.book-2028 .mlhs-footer .mlhs-footer-col p {
  /* Same cascade fix as the tagline: without body-scoped selectors,
     the intro paragraph in the first footer column ('Montalvo
     Landscaping & Handyman Services...') collapsed to dark ink on
     dark footer (ratio 1.49). Body-scoped selectors here beat the
     'body.mlhs2028 p' rule in mlhs-2028.css. */
  display: block;
  color: rgba(255,255,255,0.82);
  font-size: 14.5px;
  margin-bottom: 12px;
  font-weight: 400;
}
.mlhs-footer-col a:hover { color: var(--mlhs-white); text-decoration: underline; text-underline-offset: 3px; }
.mlhs-footer-bar {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 22px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.52);
}
.mlhs-footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mlhs-footer-brand .mlhs-wordmark { color: var(--mlhs-white); }
.mlhs-footer-brand .mlhs-wordmark::after { background: var(--mlhs-gold); }

/* ------------------------------------------------------- two-col layouts */
.mlhs-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 820px) { .mlhs-split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- booking layout */
.mlhs-book-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 980px) { .mlhs-book-grid { grid-template-columns: 1fr; } }
.mlhs-side-panel { position: sticky; top: 90px; }
.mlhs-stepper { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.mlhs-stepper-item {
  flex: 1; min-width: 90px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--mlhs-white);
  border: 1px solid var(--mlhs-border);
  font-size: 13px; font-weight: 600; color: var(--mlhs-muted);
  text-align: center;
}
.mlhs-stepper-item.active { background: var(--mlhs-ink); color: var(--mlhs-white); border-color: var(--mlhs-ink); }

/* --------------------------------------------------------- success check */
.mlhs-success-check {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--mlhs-green-tint);
  display: grid; place-items: center;
  margin: 0 auto 24px;
}
.mlhs-success-check svg { width: 44px; height: 44px; color: var(--mlhs-green); }

/* --------------------------------------------------------------- promos
   Retired the gradient banner (aged fast). Solid near-black promo banner
   with generous type. Promo code chip now uses a hairline border, no dash. */
.mlhs-promo-banner {
  background: var(--mlhs-ink);
  color: var(--mlhs-white);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.mlhs-promo-banner h2 { color: var(--mlhs-white); }
.mlhs-promo-card {
  background: var(--mlhs-white);
  border: 1px solid var(--mlhs-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 28px;
}
.mlhs-promo-card .code {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--mlhs-surface-2);
  color: var(--mlhs-ink);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--mlhs-border);
  margin: 8px 0;
}
.mlhs-promo-card .expiry { color: var(--mlhs-muted); font-size: 13px; }

/* ------------------------------------------------------------- utilities */
.mlhs-center { text-align: center; }
.mlhs-mt-lg { margin-top: 40px; }
.mlhs-mono { font-variant-numeric: tabular-nums; }
.mlhs-included { list-style: none; padding: 0; margin: 0; }
.mlhs-included li { display: flex; gap: 10px; padding: 8px 0; font-size: 14.5px; color: var(--mlhs-ink); align-items: flex-start; }
.mlhs-included li svg { color: var(--mlhs-green); width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* summary aggregate card (reviews) */
.mlhs-agg {
  display: flex; align-items: center; gap: 24px;
  background: var(--mlhs-white);
  border: 1px solid var(--mlhs-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px;
  max-width: 560px;
  margin: 0 auto 44px;
}
.mlhs-agg-score { font-family: var(--font-sans); font-size: 48px; font-weight: 700; color: var(--mlhs-ink); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mlhs-agg .mlhs-stars { font-size: 18px; margin-bottom: 4px; }