/* /services/small-bathroom-remodeling/ — mockup polish overlay.
   Keep original sbr.css layouts intact. Only visual polish + contrast fixes.
   Scoped to body.page-sbr.page-sbr-mk */
body.page-sbr.page-sbr-mk {
  --mk-navy: #102A43;
  --mk-brass: #C08A3E;
  --mk-brass-ink: #8A5F24;
  --mk-cream: #F6F2EB;
  --mk-muted: #55616B;
}

/* ----- Hero ----- */
body.page-sbr.page-sbr-mk main .hero-page { min-height: 0; }
body.page-sbr.page-sbr-mk main .hero-page .hero-image-wrap img { filter: none; object-position: 60% 45%; }
body.page-sbr.page-sbr-mk main .hero-page .hero-overlay {
  background:
    linear-gradient(90deg, rgba(16,42,67,.97) 0%, rgba(16,42,67,.93) 30%, rgba(16,42,67,.62) 44%, rgba(16,42,67,.12) 58%, rgba(16,42,67,0) 70%),
    linear-gradient(0deg, rgba(16,42,67,.35) 0%, transparent 30%);
}
body.page-sbr.page-sbr-mk main .hero-page .hero-inner { padding-top: 128px; padding-bottom: 56px; }
body.page-sbr.page-sbr-mk main .hero-page .hero-content { max-width: 560px; }
body.page-sbr.page-sbr-mk main .hero-page .hero-title { margin: 0 0 20px; line-height: 1.02; }
body.page-sbr.page-sbr-mk main .hero-page .hero-title-serif,
body.page-sbr.page-sbr-mk main .hero-page .hero-title-accent {
  display: block; font-family: var(--sbr-serif, var(--font-display)); font-style: normal; font-weight: 600; color: #fff;
  font-size: clamp(2.5rem, 4.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.012em; margin: 0;
}
body.page-sbr.page-sbr-mk main .hero-page .hero-title-accent { color: var(--mk-brass); font-style: italic; font-weight: 500; }
body.page-sbr.page-sbr-mk main .hero-page .hero-intro { color: rgba(255,255,255,.90); font-size: 16px; line-height: 1.65; max-width: 52ch; margin: 0 0 26px; }
body.page-sbr.page-sbr-mk main .hero-page .hero-actions { gap: 14px; }
body.page-sbr.page-sbr-mk main .hero-page .hero-actions .btn-primary:nth-child(n) {
  background: var(--mk-brass); border-color: var(--mk-brass); color: var(--mk-navy); border-radius: 6px; padding: 14px 26px; font-weight: 700;
}
body.page-sbr.page-sbr-mk main .hero-page .hero-actions .btn-outline-light[href^="tel:"]:nth-child(n) {
  border: 1.5px solid rgba(255,255,255,.9); border-radius: 6px; padding: 13px 24px; min-height: 0; color: #fff; background: transparent; font-weight: 700;
}
@media (max-width: 760px) {
  body.page-sbr.page-sbr-mk main .hero-page .hero-overlay { background: linear-gradient(180deg, rgba(16,42,67,.80) 0%, rgba(16,42,67,.86) 55%, rgba(16,42,67,.94) 100%); }
  body.page-sbr.page-sbr-mk main .hero-page .hero-inner { padding-top: 7rem; padding-bottom: 2.4rem; }
  body.page-sbr.page-sbr-mk main .hero-page .hero-title-serif,
  body.page-sbr.page-sbr-mk main .hero-page .hero-title-accent { font-size: clamp(2.3rem, 10vw, 2.9rem); }
  body.page-sbr.page-sbr-mk main .hero-page .hero-actions { flex-direction: column; align-items: stretch; }
  body.page-sbr.page-sbr-mk main .hero-page .hero-actions a { width: 100%; justify-content: center; text-align: center; }
}

/* ----- Form section polish (keep structure) ----- */
body.page-sbr.page-sbr-mk main .sbr-form-section { background: var(--mk-cream); }
body.page-sbr.page-sbr-mk main .sbr-form-bg { opacity: .1; }
body.page-sbr.page-sbr-mk main .sbr-form-left {
  background: #fff; border: 1px solid #E8E2D7; border-radius: 12px; padding: 28px;
  box-shadow: 0 10px 28px rgba(16,42,67,.08);
}
body.page-sbr.page-sbr-mk main .sbr-form-heading { color: var(--mk-navy); }
body.page-sbr.page-sbr-mk main .sbr-form-lead { color: var(--mk-muted); }
body.page-sbr.page-sbr-mk main .sbr-form-card {
  background: var(--mk-navy); border-radius: 12px; box-shadow: 0 18px 40px rgba(16,42,67,.22);
}
body.page-sbr.page-sbr-mk main .sbr-form-card::before { display: none; }
body.page-sbr.page-sbr-mk main .sbr-form-card-top .form-heading { color: #fff; }
body.page-sbr.page-sbr-mk main .sbr-form-card-top .form-subhead { color: rgba(255,255,255,.86); }

/* Stats: cream box needs DARK labels (original assumed dark panel) */
body.page-sbr.page-sbr-mk main .sbr-form-stats {
  background: var(--mk-cream); border: 1px solid #E6DFD3; border-radius: 10px; max-width: 100%;
}
body.page-sbr.page-sbr-mk main .sbr-form-stat::after { background: #DCD3C4 !important; }
body.page-sbr.page-sbr-mk main .sbr-stat-num { color: var(--mk-navy) !important; }
body.page-sbr.page-sbr-mk main .sbr-stat-label { color: var(--mk-muted) !important; }

body.page-sbr.page-sbr-mk main .sbr-form-trust li {
  border: 1px solid #E6DFD3; background: #fff; color: var(--mk-navy);
}
body.page-sbr.page-sbr-mk main .sbr-form-trust li::before { background: var(--mk-brass); }

/* ----- Section heads (light sections only) ----- */
body.page-sbr.page-sbr-mk main .eyebrow { color: var(--mk-brass-ink); }
body.page-sbr.page-sbr-mk main .sbr-head h2 { color: var(--mk-navy); }

/* Dark night section: keep white heading, kill any blue/highlight box */
body.page-sbr.page-sbr-mk main #lighting.sbr-night .sbr-head h2,
body.page-sbr.page-sbr-mk main .sbr-night .sbr-head h2,
body.page-sbr.page-sbr-mk main .sbr-night h2 {
  color: #fff !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-box-decoration-break: initial;
  box-decoration-break: initial;
  display: block;
  padding: 0 !important;
  border: 0 !important;
}
body.page-sbr.page-sbr-mk main .sbr-night .eyebrow { color: var(--mk-brass) !important; }
body.page-sbr.page-sbr-mk main .sbr-night .intro-text,
body.page-sbr.page-sbr-mk main .sbr-night .sbr-head p {
  color: rgba(255,255,255,.88) !important;
}
body.page-sbr.page-sbr-mk main .sbr-night .lighting-card h4 { color: #fff !important; }
body.page-sbr.page-sbr-mk main .sbr-night .lighting-card p { color: rgba(255,255,255,.8) !important; }
body.page-sbr.page-sbr-mk main .sbr-night .lighting-icon-wrap { color: var(--mk-brass) !important; }

/* ----- Why difficult: 4-col cards without breaking mobile ----- */
body.page-sbr.page-sbr-mk main #why-difficult { background: #fff; }
body.page-sbr.page-sbr-mk main #why-difficult .sbr-layout-hero {
  display: block !important; height: 240px !important; border-radius: 12px; overflow: hidden; margin-bottom: 36px !important;
}
body.page-sbr.page-sbr-mk main #why-difficult .sbr-layout-hero img { width: 100%; height: 100%; object-fit: cover; }
body.page-sbr.page-sbr-mk main .sbr-problems { display: block; }
body.page-sbr.page-sbr-mk main .sbr-problems-photo { display: none; }
body.page-sbr.page-sbr-mk main .problems-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: none;
}
body.page-sbr.page-sbr-mk main .problem-card {
  display: flex; flex-direction: column; gap: 0; padding: 20px 16px;
  background: var(--mk-cream); border: 1px solid #E6DFD3; border-radius: 12px; border-bottom-color: #E6DFD3;
}
body.page-sbr.page-sbr-mk main .problem-card:first-child { border-top-color: #E6DFD3; }
body.page-sbr.page-sbr-mk main .problem-card::before { display: none !important; content: none !important; }
body.page-sbr.page-sbr-mk main .problem-card .problem-icon {
  display: inline-flex !important; color: var(--mk-brass); margin-bottom: 10px;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  border: 1px solid #EBDDC6; border-radius: 10px; background: #FBF6EE;
}
body.page-sbr.page-sbr-mk main .problem-card h4,
body.page-sbr.page-sbr-mk main .problem-card p,
body.page-sbr.page-sbr-mk main .problem-impact { grid-column: auto; }
body.page-sbr.page-sbr-mk main .problem-impact {
  margin-top: auto; background: transparent; color: var(--mk-brass-ink); padding: 10px 0 0; border-radius: 0;
}

/* ----- Shower compare cards polish only ----- */
body.page-sbr.page-sbr-mk main .compare-card {
  border-radius: 12px; border: 1px solid #E8E2D7; box-shadow: 0 10px 26px rgba(16,42,67,.08); overflow: hidden; background: #fff;
}
body.page-sbr.page-sbr-mk main .compare-label { color: var(--mk-brass-ink); }
body.page-sbr.page-sbr-mk main .consider-icon { color: var(--mk-brass); }

/* ----- Process: DO NOT override grid — only step number polish ----- */
body.page-sbr.page-sbr-mk main .process-step .step-num {
  background: #fff !important; color: var(--mk-navy) !important; border: 2px solid var(--mk-brass) !important;
}
body.page-sbr.page-sbr-mk main .process-step:hover .step-num {
  background: var(--mk-brass) !important; color: var(--mk-navy) !important; border-color: var(--mk-brass) !important;
}
body.page-sbr.page-sbr-mk main .sbr-note-card { border-top-color: var(--mk-navy); }
body.page-sbr.page-sbr-mk main .sbr-note-warn { background: #FBF6EE; border-color: #EBDDC6; }

/* ----- Concepts: DO NOT override featured first-child layout ----- */
body.page-sbr.page-sbr-mk main .concept-card { border-radius: 12px; }
body.page-sbr.page-sbr-mk main .concept-tag {
  background: var(--mk-cream); color: var(--mk-navy); border-color: #E6DFD3;
}

/* ----- Service areas: keep original DARK section readable ----- */
body.page-sbr.page-sbr-mk main #service-areas.sbr-service-areas,
body.page-sbr.page-sbr-mk main .sbr-service-areas {
  background: linear-gradient(150deg, #102A43 0%, #102A43 100%) !important;
  color: rgba(255,255,255,.88) !important;
}
body.page-sbr.page-sbr-mk main .sbr-service-areas .sbr-head h2 { color: #fff !important; }
body.page-sbr.page-sbr-mk main .sbr-service-areas .eyebrow { color: var(--mk-brass) !important; }
body.page-sbr.page-sbr-mk main .sbr-service-areas .sbr-head p,
body.page-sbr.page-sbr-mk main .sbr-service-areas .intro-text { color: rgba(255,255,255,.7) !important; }
body.page-sbr.page-sbr-mk main .sbr-area-group {
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 12px;
}
body.page-sbr.page-sbr-mk main .sbr-area-region { color: #fff !important; }
body.page-sbr.page-sbr-mk main .sbr-area-list li,
body.page-sbr.page-sbr-mk main .sbr-area-list a {
  color: rgba(255,255,255,.88) !important;
}
body.page-sbr.page-sbr-mk main .sbr-areas-cta p { color: rgba(255,255,255,.7) !important; }
body.page-sbr.page-sbr-mk main .sbr-areas-cta a { color: var(--mk-brass) !important; }

/* ----- Cost contrast fix ----- */
body.page-sbr.page-sbr-mk main .audit-cost-guide {
  background: linear-gradient(90deg, #E9E1D3 0%, #F3EEE6 30%, #F3EEE6 70%, #E9E1D3 100%);
  padding: clamp(48px, 6vw, 72px) 0; margin: 0;
}
body.page-sbr.page-sbr-mk main .audit-cost-guide-shell {
  background: #fff !important; border: 1px solid #E8E2D7 !important; border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(16,42,67,.10) !important; max-width: 880px; margin: 0 auto; text-align: center;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 48px) !important; overflow: visible;
}
body.page-sbr.page-sbr-mk main .audit-cost-guide-shell::before,
body.page-sbr.page-sbr-mk main .audit-cost-guide-shell::after { display: none !important; content: none !important; }
body.page-sbr.page-sbr-mk main .audit-cost-guide h2 { color: var(--mk-navy) !important; max-width: none; }
body.page-sbr.page-sbr-mk main .audit-cost-guide h2::after { display: none !important; }
body.page-sbr.page-sbr-mk main .audit-cost-guide-panel { background: none !important; padding: 0 !important; max-width: none; text-align: center; }
body.page-sbr.page-sbr-mk main .audit-cost-guide-panel p { color: var(--mk-muted) !important; }
body.page-sbr.page-sbr-mk main .audit-cost-guide-panel p:first-child,
body.page-sbr.page-sbr-mk main .audit-cost-guide-panel p:first-child:has(> strong:only-child) {
  border: 1px solid #EBDDC6 !important; background: #FBF6EE !important; border-radius: 10px !important;
  padding: 16px 20px !important; margin-bottom: 16px !important; color: var(--mk-navy) !important; box-shadow: none !important;
}
body.page-sbr.page-sbr-mk main .audit-cost-guide-panel p:first-child:has(> strong:only-child)::before { display: none !important; content: none !important; }
body.page-sbr.page-sbr-mk main .audit-cost-guide-panel strong,
body.page-sbr.page-sbr-mk main .audit-cost-guide-panel p:first-child:has(> strong:only-child) strong {
  color: var(--mk-navy) !important; font-weight: 700;
}
body.page-sbr.page-sbr-mk main .audit-cost-guide-panel a { color: var(--mk-brass-ink) !important; }

/* ----- CTA: keep original split layout; restore dark-on-white text ----- */
body.page-sbr.page-sbr-mk main .cta-section {
  background: var(--mk-navy);
  /* do not force flex/block — keep original CSS grid split */
}
body.page-sbr.page-sbr-mk main .cta-section .container {
  background: #fff !important;
}
body.page-sbr.page-sbr-mk main .cta-section h2 {
  color: var(--mk-navy) !important;
}
body.page-sbr.page-sbr-mk main .cta-section p {
  color: var(--mk-muted) !important;
}
body.page-sbr.page-sbr-mk main .cta-section .btn-primary {
  background: var(--mk-brass); border-color: var(--mk-brass); color: var(--mk-navy); border-radius: 6px;
}
body.page-sbr.page-sbr-mk main .cta-section .btn-outline-light {
  /* on white panel, outline-light needs dark border */
  border: 1.5px solid var(--mk-navy) !important; color: var(--mk-navy) !important; background: transparent; border-radius: 6px;
}
@media (max-width: 760px) {
  body.page-sbr.page-sbr-mk main .cta-section h2 { color: #fff !important; }
  body.page-sbr.page-sbr-mk main .cta-section p { color: rgba(255,255,255,.8) !important; }
  body.page-sbr.page-sbr-mk main .cta-section .btn-outline-light {
    border-color: #fff !important; color: #fff !important;
  }
}

/* ----- FAQ slight polish ----- */
body.page-sbr.page-sbr-mk main #faqs .faq-q,
body.page-sbr.page-sbr-mk main #faqs .faq-question { color: var(--mk-navy); }

@media (max-width: 1100px) {
  body.page-sbr.page-sbr-mk main .problems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body.page-sbr.page-sbr-mk main .problems-grid { grid-template-columns: minmax(0, 1fr); }
}