/*
 * FixMove core-service content integrity layer
 * Keeps appended guides readable, restores complete mobile content and
 * normalises touch targets without changing the individual page templates.
 */
body.core-service-hub-en {
  --fm-integrity-ink: #0f172a;
  --fm-integrity-copy: #334155;
  --fm-integrity-muted: #475569;
  --fm-integrity-link: #075985;
  --fm-integrity-line: #cbd5e1;
  --fm-integrity-surface: #ffffff;
  --fm-integrity-soft: #f8fafc;
  --fm-integrity-focus: #f97316;
}

body.core-service-hub-en *,
body.core-service-hub-en *::before,
body.core-service-hub-en *::after {
  box-sizing: border-box;
}

/* The long-form sections were appended after the dark hub theme was built.
   Give them an explicit light surface and their own accessible colour system. */
body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh),
body.core-service-hub-en #fm-areas-directory {
  width: min(1100px, calc(100% - 32px)) !important;
  max-width: 1100px !important;
  margin: 28px auto !important;
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px solid var(--fm-integrity-line) !important;
  border-radius: 18px !important;
  background: var(--fm-integrity-surface) !important;
  color: var(--fm-integrity-ink) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .12) !important;
}

/* Utility hubs apply their mobile panel skin directly to each section with
   greater specificity. Keep long-form guides on the intended light surface. */
body.core-service-hub-en--utility .content > .container > section.fm-depth-expand {
  width: min(1100px, calc(100% - 32px)) !important;
  max-width: 1100px !important;
  margin: 28px auto !important;
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px solid var(--fm-integrity-line) !important;
  border-radius: 18px !important;
  background: var(--fm-integrity-surface) !important;
  color: var(--fm-integrity-ink) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .12) !important;
}

body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh, #fm-areas-directory)
  :is(h1, h2, h3, h4, strong, summary) {
  color: var(--fm-integrity-ink) !important;
}

body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh, #fm-areas-directory)
  :is(p, li, td, th, div, span) {
  color: var(--fm-integrity-copy) !important;
}

body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh, #fm-areas-directory) p,
body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh, #fm-areas-directory) li {
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.72;
}

body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh, #fm-areas-directory)
  a:not(.btn):not([class*="btn"]):not([role="button"]):not([class*="button"]) {
  color: var(--fm-integrity-link) !important;
  text-decoration-thickness: .09em;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}

body.core-service-hub-en .fm-depth-expand > :first-child,
body.core-service-hub-en .fm-related-quality > :first-child,
body.core-service-hub-en .fm-region-mesh > :first-child,
body.core-service-hub-en #fm-areas-directory > :first-child {
  margin-top: 0 !important;
}

body.core-service-hub-en .fm-depth-expand :is(h2, h3) {
  margin-top: 1.35em;
  line-height: 1.22;
  text-wrap: balance;
}

body.core-service-hub-en .fm-depth-expand table {
  width: 100% !important;
  margin: 18px 0 !important;
  border-collapse: collapse !important;
  border: 1px solid var(--fm-integrity-line) !important;
  background: #fff !important;
}

body.core-service-hub-en .fm-depth-expand :is(th, td) {
  padding: 12px 14px !important;
  border: 1px solid var(--fm-integrity-line) !important;
  text-align: left;
  vertical-align: top;
  line-height: 1.48 !important;
}

body.core-service-hub-en .fm-depth-expand th {
  background: #e0f2fe !important;
  color: #0c4a6e !important;
  font-weight: 850;
}

body.core-service-hub-en .fm-depth-expand :is(.notice-card, details) {
  border: 1px solid #bae6fd !important;
  border-radius: 14px !important;
  background: #f0f9ff !important;
  color: var(--fm-integrity-ink) !important;
}

/* Quick-answer cards are intentionally light. A few legacy dark hero themes
   colour nested <strong> and links after the card's inline light colours,
   which can leave near-white copy on #f8fafc. Keep the whole answer readable. */
body.core-service-hub-en .fm-answer-target :is(p, li, strong, span) {
  color: var(--fm-integrity-copy) !important;
}

body.core-service-hub-en .fm-answer-target
  a:not(.btn):not([class*="btn"]):not([role="button"]):not([class*="button"]) {
  color: var(--fm-integrity-link) !important;
  text-decoration-thickness: .09em;
  text-underline-offset: .18em;
}

/* The original conversion green was just below WCAG AA for normal white
   button copy. The deeper green preserves the visual role at AA contrast. */
body.core-service-hub-en.fullhouse-page .btn.b2 {
  background: #047857 !important;
  color: #fff !important;
}

body.core-service-hub-en.fullhouse-page .btn.b1 {
  background: #c2410c !important;
  color: #fff !important;
}

/* The canonical water-leak landing page uses a dark standalone template.
   Its muted lead and FAQ colour came from a light-page palette. */
body.core-service-hub-en.water-leak-page :is(.lead, .faq-item p) {
  color: #cbd5e1 !important;
}

body.core-service-hub-en .fm-depth-expand .notice-card {
  margin: 18px 0 !important;
  padding: 16px 18px !important;
}

body.core-service-hub-en .fm-depth-expand details {
  margin: 10px 0 !important;
  overflow: clip;
}

body.core-service-hub-en .fm-depth-expand details > summary {
  display: flex !important;
  align-items: center;
  min-height: 48px;
  padding: 12px 16px !important;
  cursor: pointer;
}

body.core-service-hub-en .fm-depth-expand details > :not(summary) {
  padding-inline: 16px;
  padding-bottom: 16px;
}

/* Related guides should read as intentional tap targets, not a loose word list. */
body.core-service-hub-en .fm-related-quality > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body.core-service-hub-en .fm-related-quality > div > a {
  display: inline-flex !important;
  flex: 1 1 210px;
  align-items: center;
  min-height: 46px;
  padding: 10px 13px !important;
  border: 1px solid #bae6fd;
  border-radius: 11px;
  background: #f0f9ff;
  color: #075985 !important;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none !important;
}

body.core-service-hub-en .fm-related-quality > div > a:hover {
  border-color: #38bdf8;
  background: #e0f2fe;
}

/* Regional directories inherit the same readable surface. */
body.core-service-hub-en .fm-region-mesh {
  padding-inline: clamp(18px, 3vw, 30px) !important;
}

body.core-service-hub-en .fm-region-mesh :is(.fm-rm-group, .fm-rm-svc),
body.core-service-hub-en #fm-areas-directory :is(details, .areas-collapsible) {
  border-color: var(--fm-integrity-line) !important;
  background: var(--fm-integrity-soft) !important;
}

body.core-service-hub-en .fm-region-mesh summary,
body.core-service-hub-en #fm-areas-directory summary {
  min-height: 48px;
  padding-block: 12px !important;
}

body.core-service-hub-en .fm-region-mesh .fm-rm-count {
  color: var(--fm-integrity-copy) !important;
  opacity: 1 !important;
}

/* Keep the native disclosure state explicit. Chromium can retain layout
   rectangles for descendants of an off-screen, closed <details> element;
   explicitly removing those descendants from layout keeps the collapsed
   directory genuinely concise. Toggling the keyboard-accessible summary
   removes this rule automatically because the browser adds [open]. */
body.core-service-hub-en .fm-region-mesh details:not([open]) > :not(summary) {
  display: none !important;
}

body.core-service-hub-en .areas-collapsible[open] .areas-toggle::after {
  content: "\2212" !important;
}

/* Some utility templates supplied dark page chrome but no readable mover
   section-header colours. The page marker lets us repair only that family. */
body.movers-page main > .sec > .w {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 20px;
  background: rgba(15, 23, 42, .72);
  box-shadow: 0 18px 44px rgba(2, 6, 23, .2);
}

body.movers-page main > .sec > .w > .hd :is(h2, h3) {
  color: #f8fafc !important;
}

body.movers-page main > .sec > .w > .hd p,
body.movers-page main > .sec > .w > p {
  color: #dbeafe !important;
}

body.movers-page main > .sec > .w > .hd a,
body.movers-page main > .sec > .w > p a {
  color: #7dd3fc !important;
}

/* Restore content suppressed by presentation-only template rules. */
body.fullhouse-page .fm-svc-strip[aria-label="All FixMove services"],
body.handyman-page #faq + .sec,
body.handyman-page #faq + .sec + .sec,
body.handyman-page .sec-area-grid,
body.installation-page main > section.sec:nth-of-type(n+8):not(#faq):not(.cov),
body.installation-page #faq + .sec,
body.installation-page #faq + .sec + .sec {
  display: block !important;
}

body.handyman-page .sec-area-grid {
  display: grid !important;
}

/* Keyboard users need a focus state on every interactive route. */
body.core-service-hub-en :is(a, button, summary, select, input, textarea):focus-visible {
  outline: 3px solid var(--fm-integrity-focus) !important;
  outline-offset: 3px !important;
}

/* The legacy two-button bottom bar duplicates the floating contact control. */
html body.core-service-hub-en .sticky-bottom-bar {
  display: none !important;
}

html body.core-service-hub-en:has(> .sticky-bottom-bar) {
  padding-bottom: 0 !important;
}

html body.core-service-hub-en .floating-cta {
  top: auto !important;
  right: 14px !important;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
}

body.core-service-hub-en .floating-cta :is(.fab-stack, .fab-toggle, .fab-action) {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
}

@media (max-width: 720px) {
  body.core-service-hub-en {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh),
  body.core-service-hub-en #fm-areas-directory {
    width: calc(100% - 24px) !important;
    margin: 18px auto !important;
    padding: 18px 16px !important;
    border-radius: 15px !important;
  }

  body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh, #fm-areas-directory) h2 {
    font-size: clamp(21px, 6vw, 27px) !important;
  }

  body.core-service-hub-en :is(.fm-depth-expand, .fm-related-quality, .fm-region-mesh, #fm-areas-directory) h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  body.core-service-hub-en .fm-depth-expand {
    overflow: hidden;
  }

  body.core-service-hub-en .fm-depth-expand table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.core-service-hub-en .fm-depth-expand :is(th, td) {
    min-width: 118px;
    padding: 10px 9px !important;
    font-size: 13px !important;
  }

  body.core-service-hub-en .fm-related-quality > div > a {
    flex-basis: 100%;
    width: 100%;
    min-height: 48px;
  }

  body.core-service-hub-en .fm-region-mesh .fm-rm-list {
    columns: 1 !important;
    padding-inline: 14px !important;
  }

  body.core-service-hub-en .fm-svc-strip {
    width: calc(100% - 24px) !important;
    margin: 18px auto !important;
    padding: 18px 16px !important;
  }

  body.core-service-hub-en .fm-svc-strip .fm-svc-grid {
    grid-template-columns: 1fr !important;
  }

  body.core-service-hub-en .fm-svc-strip a.fm-svc-pill {
    display: flex !important;
    min-height: 52px;
    flex-direction: column;
    justify-content: center;
  }

  /* Undo the bridge's mobile truncation: all service cards, sections, area
     directories and FAQs remain available on a phone. */
  body.core-service-hub-en--utility .features-grid > :nth-child(n+5),
  body.core-service-hub-en--utility .service-columns > :nth-child(n+5),
  body.core-service-hub-en--utility .service-rows > :nth-child(n+5),
  body.core-service-hub-en--utility .job-grid > :nth-child(n+5),
  body.core-service-hub-en--renovation .grid > :nth-child(n+5),
  .top + main .grid > :nth-child(n+5),
  .top + main .proc > :nth-child(n+5),
  .top + main .trust-grid > :nth-child(n+5),
  body.core-service-hub-en--utility .content > .container > section:nth-of-type(n+4),
  body.core-service-hub-en--renovation main > .section:nth-of-type(n+5),
  .top + main .sec:nth-of-type(n+5),
  body.core-service-hub-en--utility .cov,
  body.core-service-hub-en--renovation .cov,
  .top + main .cov,
  .top + main .sec:has(a[href="/built-in-wardrobe-cost-singapore.html"]),
  .top + main .sec:has(a[href="/renovation-cost-singapore.html"]),
  body.core-service-hub-en--utility .faq-item:not(:first-child),
  body.core-service-hub-en--renovation .faq:not(:first-child),
  .top + main .faq:not(:first-child),
  body.core-service-hub-en .fm-svc-strip,
  .top + main ~ .fm-svc-strip {
    display: block !important;
  }

  /* Match the bridge's complete selector so its :not(#...) specificity can
     no longer discard substantive sections on phones. */
  body.core-service-hub-en--utility .content > .container > section:nth-of-type(n+4):not(:has(.price-tbl)):not(#faq):not(:has(.quick)):not(:has(.area-panel)),
  body.core-service-hub-en--renovation main > .section:nth-of-type(n+5):not(#faq):not(#quote) {
    display: block !important;
  }

  body.core-service-hub-en--utility .content > .container > section.fm-depth-expand {
    width: calc(100% - 24px) !important;
    margin: 18px auto !important;
    padding: 18px 16px !important;
    border-radius: 15px !important;
    background: var(--fm-integrity-surface) !important;
  }

  .top + main .sec-area-grid {
    display: grid !important;
  }
}

@media (max-width: 560px) {
  body.core-service-hub-en .nav-wrapper :is(.dd-panel, .lang-panel) {
    grid-template-columns: 1fr !important;
  }

  body.core-service-hub-en .nav-wrapper :is(.dd-panel, .lang-panel) a {
    min-height: 48px !important;
    padding: 11px 12px !important;
  }

  body.core-service-hub-en .nav-wrapper :is(.dd-panel, .lang-panel) :is(p, small, .desc) {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body.movers-page main > .sec > .w {
    width: calc(100% - 24px) !important;
    padding: 20px 16px !important;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.core-service-hub-en *,
  body.core-service-hub-en *::before,
  body.core-service-hub-en *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}