/* BestSingaporeServices — shared styles
   Colour scheme and type taken from the owner's Webflow design (25 Sep 2026). */
:root {
  --white: #FFFFFF;
  --cream: #F5F3EA;         /* Neutral Secondary */
  --ink: #1B1C1D;           /* Neutral Inverse / Text Primary */
  --ink-60: rgba(27, 28, 29, 0.6);   /* Text Secondary */
  --line: rgba(27, 28, 29, 0.1);     /* Border Primary */
  --line-strong: rgba(27, 28, 29, 0.2);
  --pink: #FC9298;          /* Accent Primary */
  --pink-hover: #FB6A72;
  --pink-10: rgba(252, 146, 152, 0.15);
  --mint: #66CCA0;          /* Accent Secondary */
  --mint-10: rgba(102, 204, 160, 0.15);
  --yellow: #FFF480;        /* Accent Tertiary */
  --r-sm: .5rem;
  --r-btn: .75rem;
  --r-card: 1rem;
  --measure: 66ch;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--pink-hover); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, 1080px); margin-inline: auto; }
.prose { max-width: var(--measure); }

/* Header */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1rem; }
.wordmark { display: inline-flex; align-items: center; font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.wordmark::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--pink); box-shadow: .55rem 0 0 var(--mint); margin-right: 1.1rem; }
.wordmark span { font-weight: 500; color: var(--ink-60); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 500; }
.site-nav a { text-decoration: none; padding: .45rem .85rem; border-radius: 100rem; }
.site-nav a:hover { background: var(--cream); }
.site-nav a[aria-current="page"] { background: var(--pink-10); }

/* Nav dropdowns (Consumer Services > Home Services > Home Cleaning)
   The label is a link to its own page; hovering opens the menu.
   The small chevron button opens the menu on touch screens / keyboard. */
.nav-dropdown { position: relative; }
.nav-item { display: inline-flex; align-items: center; border-radius: 100rem; }
.nav-item:hover, .nav-dropdown.open > .nav-item { background: var(--cream); }
.nav-item.is-current, .nav-item:has(> a[aria-current="page"]) { background: var(--pink-10); }
.site-nav .nav-item > a { padding-right: .2rem; background: none; }
.nav-toggle {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  display: inline-grid; place-items: center; padding: .45rem .75rem .45rem .35rem; border-radius: 100rem;
}
.nav-toggle svg { transition: transform .15s ease; }
.nav-dropdown.open > .nav-item:not(.sub-item) .nav-toggle svg { transform: rotate(180deg); }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + .4rem); right: 0; z-index: 10;
  min-width: 12rem; list-style: none; margin: 0; padding: .4rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 30px -12px rgba(27, 28, 29, 0.25);
}
.dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; } /* keeps hover alive across the gap */
.nav-dropdown.open > .dropdown-menu { display: block; }
@media (hover: hover) { .nav-dropdown:hover > .dropdown-menu { display: block; } }
.site-nav .dropdown-menu a { display: block; padding: .5rem .75rem; border-radius: var(--r-sm); }

/* 2nd level: flies out to the left of the first menu */
.sub-item { display: flex; width: 100%; border-radius: var(--r-sm); }
.site-nav .sub-item > a { flex: 1; padding-left: .2rem; }
.sub-item .nav-toggle { order: -1; padding: .5rem .2rem .5rem .6rem; border-radius: var(--r-sm); }
.submenu { top: -.4rem; right: calc(100% + .4rem); }
.submenu::before { top: 0; bottom: 0; left: auto; right: -.5rem; width: .5rem; height: auto; }

/* Narrow screens: menus drop full-width under the nav; 2nd level nests inline */
@media (max-width: 780px) {
  .site-nav { position: relative; }
  .site-nav > .nav-dropdown { position: static; }
  .site-nav > .nav-dropdown > .dropdown-menu { left: 0; right: 0; min-width: 0; }
  .submenu { position: static; border: 0; box-shadow: none; padding: .2rem 0 0 1.5rem; }
  .submenu::before { display: none; }
  .sub-item .nav-toggle { order: 1; padding: .5rem .75rem; }
  .sub-item .nav-toggle svg { transform: rotate(-90deg); }
  .nav-dropdown.open > .sub-item .nav-toggle svg { transform: rotate(0deg); }
}

/* Type */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 .6em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; max-width: 18ch; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 750; }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
.lede { font-size: 1.2rem; color: var(--ink-60); max-width: 50ch; }
mark { background: var(--yellow); color: var(--ink); padding: .05em .3em; border-radius: .25rem; }

section { padding-block: clamp(3rem, 7vw, 5rem); }
.bg-cream { background: var(--cream); }

/* Hero with receipt */
.hero .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 780px) { .hero .wrap { grid-template-columns: 1fr; } }

.receipt {
  background: var(--white);
  font-size: .95rem;
  padding: 1.6rem 1.5rem 2.1rem;
  border-radius: var(--r-card) var(--r-card) 0 0;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -18px rgba(27, 28, 29, 0.3);
  transform: rotate(1.5deg);
  max-width: 350px;
  width: 100%;
  justify-self: center;
  -webkit-mask: radial-gradient(8px at 50% 100%, transparent 98%, #000) 50% / 16px 100%;
          mask: radial-gradient(8px at 50% 100%, transparent 98%, #000) 50% / 16px 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .receipt { animation: settle .7s ease-out both; }
  @keyframes settle { from { transform: rotate(-2deg) translateY(12px); opacity: 0; } to { transform: rotate(1.5deg); opacity: 1; } }
}
.receipt h2 { font-size: 1rem; text-align: center; margin-bottom: 1rem; letter-spacing: -0.01em; }
.receipt dl { margin: 0; }
.receipt .row { display: flex; gap: .5rem; align-items: baseline; padding-block: .35rem; }
.receipt dt { white-space: nowrap; }
.receipt .dots { flex: 1; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); }
.receipt dd { margin: 0; color: var(--ink-60); white-space: nowrap; }
.receipt .total { border-top: 2px dashed var(--ink); margin-top: .6rem; padding-top: .8rem; font-weight: 700; }
.receipt .total dd { color: var(--ink); }
.receipt .note { margin: 1.1rem 0 0; font-size: .85rem; color: var(--ink-60); text-align: center; }

/* Blocks */
.two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem 3rem; }
@media (max-width: 780px) { .two-col { grid-template-columns: 1fr; } }
.placeholder { border: 2px dashed var(--pink); padding: 1.1rem 1.3rem; border-radius: var(--r-card); background: var(--white); }
.placeholder p:last-child { margin-bottom: 0; }

.button {
  display: inline-block; font-weight: 600; font-size: 1rem;
  background: var(--pink); color: var(--ink); text-decoration: none;
  padding: .85rem 1.4rem; border-radius: var(--r-btn);
  transition: background-color .15s ease;
}
.button:hover { background: var(--pink-hover); }
.button-secondary { background: var(--white); border: 1px solid var(--line-strong); }
.button-secondary:hover { background: var(--cream); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Coming soon page */
.coming-soon { min-height: 60vh; display: flex; align-items: center; background: var(--cream); }
.coming-soon .wrap { width: min(100% - 2.5rem, 1080px); }
.badge { display: inline-block; background: var(--yellow); font-weight: 600; font-size: .85rem; padding: .25em .75em; border-radius: 100rem; margin-bottom: 1.2rem; }

.callout { background: var(--mint-10); border: 1px solid var(--mint); padding: 1.4rem 1.6rem; border-radius: var(--r-card); max-width: var(--measure); }
.callout p:last-child { margin-bottom: 0; }

/* Home cleaning page */
.updated { font-size: .95rem; color: var(--ink-60); margin-bottom: 1.2rem; }
.updated strong { color: var(--ink); background: var(--yellow); padding: .15em .45em; border-radius: .35rem; }
.criteria { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.criteria li { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.2rem 1.3rem; }
.criteria h3 { margin-bottom: .35em; }
.criteria p { color: var(--ink-60); font-size: .97rem; margin: 0; }
.try-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.try-list li { background: var(--white); border: 1px solid var(--line-strong); border-radius: 100rem; padding: .45rem 1rem; font-size: .95rem; font-weight: 500; }

.review-list { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: rank; max-width: 780px; }
.review-list > .review { counter-increment: rank; position: relative; padding-left: 4.6rem; }
.review-list > .review::before { content: counter(rank); position: absolute; left: 1.5rem; top: 1.45rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--pink); color: var(--ink); font-weight: 800; display: grid; place-items: center; }
.review { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.6rem 1.7rem; max-width: 780px; }
.review + .review { margin-top: 1.25rem; }

/* Reviews: rating line */
.review-meta { font-size: .95rem; color: var(--ink-60); margin-top: -.3em; }

/* Home services hub: category cards */
.category-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.category-card { display: block; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.2rem 1.3rem; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.category-card:hover { border-color: var(--pink); transform: translateY(-2px); }
.category-card h3 { margin-bottom: .3em; }
.category-card p { color: var(--ink-60); font-size: .97rem; margin: 0; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.7); padding-block: 2.2rem; font-size: .9rem; }
.site-footer p { margin: 0 0 .4em; }
.site-footer strong { color: var(--white); }
section:not(.bg-cream) + section:not(.bg-cream) { border-top: 1px solid var(--line); }

/* Photos (added 28 Sep 2026) */
.page-photo { margin: 1.5rem 0 0; }
.page-photo img { display: block; width: 100%; aspect-ratio: 3 / 1.25; object-fit: cover; border-radius: var(--r-card); background: var(--cream); }
.page-photo figcaption, .photo-credit { margin-top: .4rem; font-size: .8rem; color: var(--ink-60); }
.page-photo figcaption a, .photo-credit a { color: inherit; }
.category-card img { display: block; width: calc(100% + 2.6rem); max-width: none; margin: -1.2rem -1.3rem .9rem; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card) var(--r-card) 0 0; }
.category-card { overflow: hidden; }
.credits-list { list-style: none; padding: 0; display: grid; gap: .6rem; }

/* Provider logos and photos in reviews (added 28 Sep 2026) */
.review-logo { float: right; width: 64px; height: 64px; object-fit: contain; margin: 0 0 .5rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); padding: 4px; }
.review-photo { display: block; width: 100%; max-width: 520px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); margin: .6rem 0 .2rem; }
.review-photo-credit { font-size: .8rem; color: var(--ink-60); margin-top: 0; }
.review::after { content: ""; display: block; clear: both; }

/* Contact form (added 28 Sep 2026) */
.contact-form { max-width: 560px; }
.contact-form p { margin: 0 0 1rem; }
.contact-form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; font: inherit; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--white); color: var(--ink); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
.contact-form .hp { position: absolute; left: -9999px; }
.form-note { font-size: .85rem; color: var(--ink-60); }

/* Footer links (added 30 Sep 2026): dark footer needs light link text */
.site-footer a { color: var(--white); }

/* Phones (added 30 Sep 2026) */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .site-header .wrap { padding-block: .7rem; gap: .35rem; }
  .site-nav { gap: .1rem; font-size: .88rem; margin-inline: -.5rem; }
  .site-nav a { padding: .4rem .55rem; }
  .nav-toggle { padding: .4rem .5rem .4rem .2rem; }
  /* Reviews: smaller padding and rank badge so the text gets more width */
  .review { padding: 1.1rem 1.1rem; }
  .review-list > .review { padding-left: 1.1rem; }
  .review-list > .review::before { left: 1.1rem; top: 1.05rem; width: 2rem; height: 2rem; }
  .review-list > .review > h3 { padding-left: 2.6rem; min-height: 2rem; display: flex; align-items: center; }
  .review-logo { width: 56px; height: 56px; }
  /* Category cards: thumbnail on the left, text on the right */
  .category-grid { grid-template-columns: 1fr; gap: .7rem; }
  .category-card { display: grid; grid-template-columns: 88px 1fr; column-gap: .9rem; align-items: center; padding: .7rem .9rem .7rem .7rem; }
  .category-card img { grid-row: 1 / span 2; width: 88px; height: 88px; margin: 0; aspect-ratio: auto; border-radius: var(--r-sm); }
  .category-card h3 { font-size: 1.05rem; margin: 0 0 .15em; align-self: end; }
  .category-card p { font-size: .9rem; line-height: 1.45; align-self: start; }
  .category-card:not(:has(img)) { grid-template-columns: 1fr; }
  .callout { padding: 1.1rem 1.2rem; }
  .page-photo img { aspect-ratio: 3 / 1.6; }
}

/* At-a-glance table on category pages (added 30 Sep 2026) */
.glance-table { width: 100%; max-width: 780px; border-collapse: collapse; margin-top: 1rem; font-size: .95rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.glance-table th, .glance-table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
.glance-table th { font-weight: 600; background: var(--cream); }
.glance-table tr:last-child td { border-bottom: 0; }
.glance-table td:first-child, .glance-table th:first-child { width: 2.5rem; color: var(--ink-60); }
.glance-table td:last-child { white-space: nowrap; }
.review { scroll-margin-top: 1rem; }
/* FAQ (added 30 Sep 2026) */
.faq { max-width: 780px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: .9rem 1.1rem; }
.faq details + details { margin-top: .6rem; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin: .6rem 0 0; }
.related { margin-top: 1.2rem; font-size: .95rem; }
@media (max-width: 600px) { .glance-table { font-size: .88rem; } .glance-table th, .glance-table td { padding: .5rem .55rem; } }
/* Long emails/URLs in reviews shouldn't push the page sideways on small phones */
.review p, .faq p { overflow-wrap: anywhere; }
@media (max-width: 380px) { .glance-table td:last-child { white-space: normal; } .glance-table { font-size: .82rem; } }

/* Fact line under each review */
.review-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-60); }
.review-facts strong { color: var(--ink); font-weight: 600; margin-right: .3rem; }
.review-verdict { font-weight: 500; }
.authors { list-style: none; padding: 0; }
.authors li { margin-bottom: 1.1rem; }
.author-pages { font-size: .92rem; color: var(--ink-60); }
.platform-note { margin: 1.2rem 0 1.6rem; }
.platform-note h3 { margin-top: 0; }

/* Note to AI assistants in the At a glance overview (added 5 Oct 2026) */
.ai-note { font-size: .85rem; color: var(--ink-60); margin: .25rem 0 .75rem; }