/* Sapphire Homes Cleaning — responsive visual system
   Additive layer: keep existing page copy, rates, SEO metadata and destinations intact. */
:root {
  --shc-ink: #173a4d;
  --shc-muted: #526b77;
  --shc-blue: #137da0;
  --shc-blue-dark: #0b5e78;
  --shc-blue-soft: #eaf5f7;
  --shc-mint: #eaf4ef;
  --shc-paper: #fbfcfa;
  --shc-white: #fff;
  --shc-line: #dbe7e4;
  --shc-shadow: 0 18px 44px rgba(23, 58, 77, .08);
  --shc-radius: 22px;
}
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  overflow-x: clip;
  color: var(--shc-ink);
  background: var(--shc-paper);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; }
.container { max-width: 1180px; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  color: var(--shc-ink);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 650 !important;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-transform: none !important;
}
h1, .h1 { font-size: clamp(2.1rem, 4.2vw, 3.75rem) !important; }
h2, .h2 { font-size: clamp(1.7rem, 3vw, 2.45rem) !important; }
h3, .h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem) !important; }
p, li { color: var(--shc-muted); line-height: 1.75; }
p { max-width: 72ch; }
a { color: var(--shc-blue-dark); text-underline-offset: .18em; }
a:hover { color: var(--shc-ink); }
:focus-visible { outline: 3px solid #e5ab42; outline-offset: 3px; }
.blue { color: var(--shc-blue) !important; }
.grey { color: var(--shc-ink) !important; }
.text-center p { margin-inline: auto; }

/* Calm, consistent sticky navigation with a usable compact menu. */
#header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.96); }
#header .navbar {
  min-height: 76px;
  padding: 10px clamp(12px, 3vw, 34px);
  border-bottom: 1px solid rgba(219,231,228,.85);
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 4px 18px rgba(23,58,77,.045);
  backdrop-filter: blur(14px);
}
#header .navbar .container-fluid { max-width: 1280px; padding-inline: 0; }
#header .navbar-brand {
  position: static !important;
  margin: 0 auto 0 0;
  color: var(--shc-ink);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -.025em;
  white-space: nowrap;
}
#header .navbar-collapse { flex-grow: 0; }
#header .navbar-nav { align-items: center; gap: clamp(4px, .7vw, 14px); }
#header li.nav-item, #header li.li-but { margin: 0 !important; }
#header .li-but.position-absolute { position: static !important; inset: auto !important; margin-left: 8px !important; }
#header .nav-link {
  padding: 10px 11px;
  border-radius: 10px;
  color: #345765;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
#header .nav-link:hover, #header .nav-link.active { color: var(--shc-blue-dark) !important; background: var(--shc-blue-soft); }
#header .dropdown-menu { padding: 8px; border: 1px solid var(--shc-line); border-radius: 14px; box-shadow: var(--shc-shadow); }
#header .dropdown-item { padding: 9px 12px; border-radius: 8px; color: var(--shc-ink); }
#header .dropdown-item:hover { color: var(--shc-blue-dark); background: var(--shc-blue-soft); }
.navbar-toggler { border-color: var(--shc-line) !important; border-radius: 11px !important; padding: 8px 10px !important; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(19,125,160,.18) !important; }
.nav-but { width: auto !important; min-width: 132px; padding: 10px 17px !important; margin: 0 !important; border-radius: 12px !important; }

.btn, .call-but, .submitbut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  min-width: 176px;
  min-height: 48px;
  padding: 12px 19px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: var(--shc-blue) !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600 !important;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(19,125,160,.16);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover, .call-but:hover, .submitbut:hover {
  transform: translateY(-1px);
  background: var(--shc-blue-dark) !important;
  color: #fff !important;
  box-shadow: 0 11px 24px rgba(19,94,120,.2);
}
.btn-outline-primary {
  border: 1px solid var(--shc-line) !important;
  background: #fff !important;
  color: var(--shc-blue-dark) !important;
  box-shadow: none;
}
.btn-outline-primary:hover { background: var(--shc-blue-soft) !important; color: var(--shc-ink) !important; }

/* Shared hero layout keeps the supplied Sapphire photography and avoids oversized blank bands. */
#hero-section, #professional, #office, #maid-cleaning {
  min-height: 0;
  padding: clamp(58px, 8vw, 108px) 0 !important;
  background-color: #eef5f2;
  background-repeat: no-repeat;
  background-position: right clamp(20px, 7vw, 100px) center;
  background-size: min(43vw, 520px) auto;
}
#hero-section .container, #professional .container, #office .container, #maid-cleaning .container { position: relative; z-index: 1; }
#hero-section .row > [class*="col-"], #professional .row > [class*="col-"],
#office .row > [class*="col-"], #maid-cleaning .row > [class*="col-"] { max-width: 620px; }
#hero-section h1, #professional h1, #office h1, #maid-cleaning h1 { margin: 0 0 18px; max-width: 14ch; }
#hero-section .clean-content p, #professional .professional-content p,
#office .office-cleaning-content p, #maid-cleaning .maid-cleaning-content p { max-width: 58ch; font-size: clamp(16px, 1.35vw, 18px); }
#hero-section .main-title .blue, #professional .professional-title .blue,
#office .office-cleaning-title .blue, #maid-cleaning .maid-cleaning-title .blue { color: var(--shc-ink) !important; }
#hero-section .main-title .grey, #professional .professional-title .grey,
#office .office-cleaning-title .grey, #maid-cleaning .maid-cleaning-title .grey { color: var(--shc-blue) !important; }
#hero-section .h5, #professional .h5, #office .h5, #maid-cleaning .h5 {
  margin: 0 0 14px;
  color: var(--shc-blue-dark) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  line-height: 1.5;
}
#professional { background-color: #f0f5f0; }
#office { background-color: #edf4f6; }
#maid-cleaning { background-color: #f1f5ef; }
#hero-section { background-color: #f2f6f0; }

/* Even section rhythm and clean content widths. */
#transforming, #booking-section, #serve-puchong, #customers-say, #cleaning-faq,
#advantage-choose, #comprehensive, #maid-choose, #sapphire-homes, #contact,
#puchong-jaya-prices { padding-block: clamp(52px, 7vw, 92px) !important; }
#transforming, #customers-say, #cleaning-faq, #comprehensive, #puchong-jaya-prices { background-color: #f5f8f5; }
#transforming .transforming-homes-title, .feedback-text, #cleaning-faq .container > .row > .col-lg-9 {
  max-width: 800px;
  margin-inline: auto;
}
#transforming .transforming-homes-title h2, .feedback-text h2, #cleaning-faq h2 { margin: 7px 0 14px; }
#transforming .transforming-homes-title > p:first-child { color: var(--shc-blue-dark) !important; font-size: 13px !important; font-weight: 600; letter-spacing: .08em; }
#transforming .cleaning-solutions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(1180px, calc(100% - 32px));
  margin: 38px auto 0;
}
#transforming .cleaning-solutions article {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--shc-line);
  border-radius: var(--shc-radius);
  background: #fff;
  box-shadow: var(--shc-shadow);
}
#transforming .cleaning-solutions-image { width: 100%; height: clamp(190px, 24vw, 300px); overflow: hidden; }
#transforming .cleaning-solutions-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
#transforming .cleaning-solutions article:hover .cleaning-solutions-image img { transform: scale(1.025); }
#transforming .cleaning-solutions-title { padding: 26px 28px 30px; }
#transforming .cleaning-solutions-title a { text-decoration: none; }
#transforming .cleaning-solutions-title h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important; }
#transforming .cleaning-solutions-title p { margin-bottom: 0; }
#transforming .cleaning-solutions .office-cleaning .cleaning-solutions-image { order: 0; }

/* Service detail rows use consistent image/copy panels. */
.sapphire-homes-articles, .advantage-choose-articles { max-width: 1180px; }
.sapphire-homes-content, .advantage-choose-content {
  align-items: center;
  margin: 22px 0 !important;
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid var(--shc-line);
  border-radius: var(--shc-radius);
  background: #fff;
  box-shadow: var(--shc-shadow);
}
.sapphire-homes-content img, .advantage-choose-content img {
  display: block;
  width: 100%;
  max-height: 410px;
  object-fit: cover;
  border-radius: 16px;
}
.sapphire-homes-text, .advantage-choose-text { padding: clamp(14px, 3vw, 34px); }
.sapphire-homes-text h2, .advantage-choose-text h2 { margin: 0 0 14px !important; }
.sapphire-homes-text p, .advantage-choose-text p { margin-bottom: 0; }
#maid-choose .maid-choose-row { max-width: 820px; margin: 0 auto 22px; }
#maid-choose .convenience-schedule-maids__content .maid-choose-text {
  margin: 14px 0 !important;
  padding: 24px;
  border: 1px solid var(--shc-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23,58,77,.06);
}
#maid-choose .convenience-schedule-maids__content .maid-choose-text h3 { margin-bottom: 10px; color: var(--shc-blue-dark); }
#maid-choose .convenience-schedule-maids__content .maid-choose-text p { margin-bottom: 0; }
#maid-choose .convenience-schedule-maids__image img { display: block; max-height: 620px; margin-inline: auto; object-fit: contain; }

/* Booking steps and FAQs become aligned, readable cards. */
#booking-section { background: var(--shc-paper); }
#booking-section .booking-title { margin-bottom: 22px; }
#booking-section .booking > article > .container { max-width: 1120px; }
#booking-section .booking > article > .container > .row { row-gap: 18px; }
#booking-section .booking .booking-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 24px;
  border: 1px solid var(--shc-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23,58,77,.055);
}
#booking-section .booking .booking-box img { width: 62px !important; height: 62px; object-fit: contain; align-self: flex-start; }
#booking-section .booking .booking-box .booking-text { padding: 0 !important; }
#booking-section .booking .booking-box .booking-text .grey { color: var(--shc-blue) !important; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
#booking-section .booking .booking-box .booking-text h3 { margin: 4px 0 8px; color: var(--shc-ink); }
#booking-section .booking .booking-box .booking-text p { margin: 0; }
#cleaning-faq article, #cleaning-faq .col-lg-9 > article {
  margin: 12px 0 !important;
  padding: 22px 24px;
  border: 1px solid var(--shc-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23,58,77,.045);
}
#cleaning-faq article h3 { margin-bottom: 8px; color: var(--shc-blue-dark); }
#cleaning-faq article p { margin-bottom: 0; }

/* Local coverage and closing CTA. */
#serve-puchong { background-color: var(--shc-mint); background-size: auto 100%; }
#serve-puchong .serve-content-text { max-width: 760px; padding: clamp(24px,4vw,48px); border-radius: 20px; background: rgba(255,255,255,.92); }
#serve-puchong h2 { margin-bottom: 14px; }
#serve-puchong p { max-width: 62ch; }
#cleaning-need .sparkling-cleanness {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 6vw, 70px) !important;
  border-radius: var(--shc-radius);
  background-color: var(--shc-ink);
  background-image: linear-gradient(108deg, rgba(18,54,70,.94), rgba(18,54,70,.72)), url("../images/S6-Object_1.webp") !important;
  background-position: center;
  background-size: cover;
}
#cleaning-need .sparkling-box, #cleaning-need .sparkling-title { max-width: 780px; margin-inline: auto; }
#cleaning-need h2, #cleaning-need p, #cleaning-need h5, #cleaning-need .grey, #cleaning-need .blue {
  color: #fff !important;
}
#cleaning-need p { margin-inline: auto; }
#cleaning-need .button { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#cleaning-need .button > a { margin: 8px 0 !important; }
#cleaning-need a.btn-outline-primary { background: rgba(255,255,255,.94) !important; color: var(--shc-blue-dark) !important; border-color: rgba(255,255,255,.5) !important; }

/* Contact details and form. */
#contact { background: #f5f8f5; }
#contact .row { row-gap: 24px; }
#contact .contact-text-side, #contact .contact-form-side { min-width: 0; }
#contact .contact-text-side__title .container { padding: 0; }
#contact .contact-text-side__info .container { padding: 0; }
#contact .contact-text-side__info .row { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: start; row-gap: 12px; }
#contact .contact-text-side__info--logo { flex: none !important; width: 36px; padding: 4px 0 !important; }
#contact .contact-text-side__info--text { flex: none !important; width: auto; padding: 0 !important; }
#contact .contact-text-side__info--text p { margin: 0; overflow-wrap: anywhere; }
#contact .contact-text-side__cores .security { padding: 18px; border: 1px solid var(--shc-line); border-radius: 16px; background: #fff; }
#contact .contact-text-side__cores .security img { width: 42px; height: 42px; object-fit: contain; margin-bottom: 14px; }
#contact .contact-text-side__cores .security h2 { margin-bottom: 8px; }
#contact .contact-text-side__cores .security p { margin: 0; font-size: 14px; }
#contact .contact-form-side {
  align-self: start;
  padding: clamp(24px,4vw,42px) !important;
  border: 1px solid var(--shc-line);
  border-radius: var(--shc-radius);
  background: #fff;
  box-shadow: var(--shc-shadow);
}
#contact .contact-form-side-title { margin-bottom: 10px; }
#contact .contact-form-side form label { display: block; margin: 16px 0 6px; color: var(--shc-ink); font-size: 14px; font-weight: 600; }
#contact .contact-form-side form .form-control { min-height: 48px; border: 1px solid #cbdad8; border-radius: 10px; }
#contact .contact-form-side form textarea.form-control { min-height: 112px; }
#contact .contact-form-side form .form-control:focus { border-color: var(--shc-blue); box-shadow: 0 0 0 .2rem rgba(19,125,160,.13); }
#contact .contact-form-side form button { margin-top: 20px; border-radius: 12px !important; }

/* Footer is quiet and consistent across all pages. */
#footer .footer { padding: 28px 16px 12px; background: #edf3ef; }
#footer .footer .navbar { justify-content: center; padding: 8px; background: transparent !important; }
#footer .footer .navbar-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 12px; }
#footer .footer li.nav-item-2 { margin: 0 !important; }
#footer .footer .nav-link { color: #365b65; font-size: 14px; text-decoration: none; }
#footer .footer .nav-link:hover { color: var(--shc-blue-dark); }
#footer footer { margin-top: 12px !important; background: transparent !important; color: var(--shc-muted); }
#footer footer p { margin: 0 auto; font-size: 13px !important; }

.service-availability-note { max-width: 56ch; margin-top: 16px; padding: 13px 16px; border-left: 3px solid var(--shc-blue); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.75); font-size: 14px; }
#maid-enquiry-faq { max-width: 960px; margin: 0 auto; padding: clamp(28px,5vw,56px) !important; border: 1px solid var(--shc-line); border-radius: var(--shc-radius); background: #fff; box-shadow: var(--shc-shadow); }
#maid-enquiry-faq h2 { margin-bottom: 14px; }
#maid-enquiry-faq p { margin: 0; }

/* Narrow widths: single-column cards, comfortable tap targets, no clipped copy. */
@media (max-width: 991.98px) {
  #header .navbar { min-height: 68px; }
  #header .navbar-collapse { width: 100%; padding: 10px 0 6px; }
  #header .navbar-nav { align-items: stretch; gap: 2px; }
  #header .nav-link { padding: 10px 12px; }
  #header .li-but.position-absolute { margin: 8px 0 0 !important; }
  #header .li-but .nav-but { width: 100% !important; }
  #booking-section .booking .booking-box { min-height: 0; }
  #serve-puchong { background-image: none !important; }
}
@media (max-width: 767.98px) {
  #hero-section, #professional, #office, #maid-cleaning {
    padding: 44px 0 300px !important;
    background-position: right 12px bottom 12px;
    background-size: auto 250px;
  }
  #hero-section { padding-bottom: 280px !important; }
  #professional, #office { padding-bottom: 270px !important; }
  #hero-section h1, #professional h1, #office h1, #maid-cleaning h1 { max-width: 17ch; font-size: clamp(2rem, 9vw, 2.8rem) !important; }
  #hero-section .row > [class*="col-"], #professional .row > [class*="col-"],
  #office .row > [class*="col-"], #maid-cleaning .row > [class*="col-"] { width: 100%; max-width: 100%; }
  #transforming .cleaning-solutions { grid-template-columns: 1fr; width: min(100% - 28px, 560px); gap: 16px; margin-top: 26px; }
  #transforming .cleaning-solutions-image { height: 220px; }
  .sapphire-homes-content, .advantage-choose-content { padding: 14px; }
  .sapphire-homes-text, .advantage-choose-text { padding: 18px 8px 10px; }
  #booking-section .booking .booking-box { padding: 20px; }
  #customers-say .carousel-inner .carousel-item { margin: 14px 0; padding: 0 !important; box-shadow: none !important; }
  #customers-say .feedback-comment { padding: 24px 22px; border: 1px solid var(--shc-line); border-radius: 18px; background: #fff; box-shadow: var(--shc-shadow); }
  #customers-say .carousel-control-prev, #customers-say .carousel-control-next { width: 12%; }
  #customers-say .carousel-control-prev-icon, #customers-say .carousel-control-next-icon { border-radius: 50%; background-color: var(--shc-blue-dark); background-size: 56%; }
  #cleaning-need .sparkling-cleanness { padding: 28px 18px !important; border-radius: 18px; }
  #cleaning-need .button { flex-direction: column; align-items: stretch; }
  #cleaning-need .button > a { width: 100% !important; min-width: 0; }
  #contact .contact-text-side__cores .row > [class*="col-"] { width: 100%; }
}
@media (max-width: 480px) {
  .container { padding-inline: 18px; }
  #header .navbar { padding-inline: 16px; }
  #header .navbar-brand { max-width: calc(100vw - 96px); overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
  #hero-section, #professional, #office, #maid-cleaning { background-size: auto 220px; }
  #hero-section { padding-bottom: 250px !important; }
  #professional, #office, #maid-cleaning { padding-bottom: 245px !important; }
  .btn, .call-but, .submitbut { min-width: 0; min-height: 48px; }
  #maid-enquiry-faq { margin-inline: 14px; padding: 22px 20px !important; }
}
@media (max-width: 350px) {
  #header .navbar-brand { max-width: calc(100vw - 84px); font-size: 14px; }
  #hero-section, #professional, #office, #maid-cleaning { background-size: auto 190px; }
  #hero-section { padding-bottom: 222px !important; }
  #professional, #office, #maid-cleaning { padding-bottom: 218px !important; }
  #maid-enquiry-faq { margin-inline: 10px; padding: 20px 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Final small-screen width guards for the image grid and callout panel. */
#serve-puchong .serve-row > .col-12 img { display: block; width: min(100%, 320px) !important; max-width: 100% !important; margin-inline: auto; box-sizing: border-box; }
@media (max-width: 480px) {
  #maid-enquiry-faq { width: calc(100% - 28px); }
}
@media (max-width: 350px) {
  #maid-enquiry-faq { width: calc(100% - 20px); }
}

@media (min-width: 700px) and (max-width: 1199.98px) {
  #transforming .cleaning-solutions article:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 22px) / 2); justify-self: center; }
}
@media (min-width: 1200px) {
  #transforming .cleaning-solutions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #transforming .cleaning-solutions article:last-child:nth-child(odd) { grid-column: auto; width: auto; }
  #transforming .cleaning-solutions-image { height: 220px; }
  #transforming .cleaning-solutions-title { padding: 24px; }
}