/* ==========================================================================
   GLOBAL THEME & COLOR VARIABLES
   ========================================================================== */
:root {
  /* Core Theme Colors */
  --primary-blue: #2061b7;   /* Dark blue for text, solid buttons, dark quick-nav */
  --light-blue: #BDE9FB;     /* Light blue for header, light quick-nav, promo bg */
  --accent-flesh: #EAE0DA;   /* Accent Flesh */
  --accent-yellow: #FEF3C7;  /* Accent Yellow */
  /* Surface Defaults */
  --text-dark: #2061b7;
  --text-white: #ffffff;
  --bg-white: #ffffff;
  /* Global Typography */
  --font-family-base: Helvetica, Arial, sans-serif;
}
/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base) !important;
}
body {
  font-family: var(--font-family-base);
  color: var(--primary-blue);
  background-color: var(--bg-white);
  line-height: 1.6;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
}
/* Dynamic Hover Effects */
.btn-solid:hover,
.btn-yellow:hover,
.quick-nav-btn:hover {
  opacity: 0.88;
}

/* ==========================================================================
   CIRCLES & LEADERSHIP / RECRUITMENT ACCENT SPECIFICATIONS
   ========================================================================== */

/* Meet the Cleaners / Profile Circle Backgrounds (#FEF3C7) */
.cleaner-circle,
.accent-circle,
.profile-circle,
.icon-box {
  background-color: var(--accent-yellow) !important;
  border-radius: 50%;
}

/* Leadership Section Background Box (#FEF3C7) */
.leadership-banner,
.leadership-section,
.leadership-container,
.leadership-card {
  background-color: var(--accent-yellow) !important;
  background-image: none !important;
  color: var(--primary-blue) !important;
}

.leadership-banner h2,
.leadership-banner p,
.leadership-section h2,
.leadership-section p {
  color: var(--primary-blue) !important;
}

/* Recruitment Principle Section Background Box (#FEF3C7) */
.recruitment-section,
.recruitment-container,
.recruitment-card,
.recruitment-grid > div:last-child {
  background-color: var(--accent-yellow) !important;
  color: var(--primary-blue) !important;
}

.recruitment-section h2,
.recruitment-section p {
  color: var(--primary-blue) !important;
}

/* ==========================================================================
   RESPONSIVE DIRECTIVES (Mobile, Tablet, iPads, Kindle)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .hero-section {
    flex-direction: column !important;
    text-align: center !important;
  }
  .hero-content, 
  .hero-image-container {
    max-width: 100% !important;
  }
  .btn-group {
    justify-content: center !important;
  }
  .features-grid,
  .promos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}
@media screen and (max-width: 768px) {
  .site-header {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 20px 15px !important;
  }
  .main-nav ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .quick-nav-row {
    flex-direction: column !important;
  }
  .quick-nav-btn {
    width: 100% !important;
  }
  .features-grid,
  .promos-grid {
    grid-template-columns: 1fr !important;
  }
  .service-card {
    flex-direction: column !important;
    height: auto !important;
  }
  .service-image-side {
    min-height: 180px !important;
  }
}
/* ==========================================================================
   SCOPED UTILITIES FOR ABOUT PAGE (PREVENTS OVERRIDING INDEX.HTML)
   ========================================================================== */

/* Page-Specific Utility Classes */
.about-page .text-primary {
  color: var(--primary-blue) !important;
}
.about-page .text-muted {
  opacity: 0.75;
  color: var(--primary-blue) !important;
}
.about-page .bg-white {
  background-color: var(--bg-white) !important;
}
.about-page .bg-light-blue {
  background-color: var(--light-blue) !important;
}
.about-page .bg-accent-yellow {
  background-color: var(--accent-yellow) !important;
}
.about-page .bg-accent-flesh {
  background-color: var(--accent-flesh) !important;
}

/* About Page Specific Buttons (Renamed to prevent index.html conflict) */
.btn-about-solid {
  background-color: var(--primary-blue);
  color: var(--text-white);
  padding: 12px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-block;
  border: none;
  margin-top: 15px;
  transition: opacity 0.2s ease;
}
.btn-about-solid:hover {
  opacity: 0.88;
}
.about-page .underline {
  text-decoration: underline;
}

/* Background Overlays */
.banner-bg-graphic {
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url('images/bedsheet-bg.jpg') center/cover no-repeat;
}
.bg-dustpan-graphic {
  background: url('images/dustpan-broom.jpg') center/cover no-repeat;
}

/* Responsive Rules Scoped to About Page */
@media screen and (max-width: 1024px) {
  .about-page .cleaners-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 768px) {
  .about-page .cleaners-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .about-page .quality-head-container {
    flex-direction: column !important;
    text-align: center !important;
  }
  .about-page .recruitment-grid {
    grid-template-columns: 1fr !important;
  }
  .about-page .contact-container {
    flex-direction: column !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 480px) {
  .about-page .cleaners-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ==========================================================================
   SCOPED UTILITIES & RESPONSIVENESS FOR FAQS PAGE
   ========================================================================== */

/* Theme & Color Bindings Scoped to FAQ Page */
.faq-page .bg-light-blue {
  background-color: var(--light-blue) !important;
}
.faq-page .text-primary {
  color: var(--primary-blue) !important;
}
.faq-page .underline {
  text-decoration: underline;
}
.faq-page .border-bottom-blue {
  border-bottom: 1px solid rgba(32, 97, 183, 0.2) !important;
}
.faq-page .border-top-blue {
  border-top: 1px solid rgba(32, 97, 183, 0.15) !important;
}

/* FAQ Page Gadget & Mobile Responsive Rules */
@media screen and (max-width: 768px) {
  .faq-page .faq-page-wrapper {
    padding: 40px 5% 50px 5% !important;
  }
  .faq-page .faq-page-title {
    font-size: 2.5rem !important;
    margin-bottom: 30px !important;
  }
  .faq-page .faq-item {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 25px 0 !important;
  }
  .faq-page .faq-question,
  .faq-page .faq-answer {
    flex: none !important;
    width: 100% !important;
  }
  .faq-page .faq-contact-bar {
    flex-direction: column !important;
    gap: 25px !important;
    text-align: center !important;
    padding: 30px 5% !important;
  }
}
/* ==========================================================================
   SCOPED UTILITIES & RESPONSIVENESS FOR REQUEST / BOOKING PAGE
   ========================================================================== */

/* Request Page Surface & Text Color Bindings */
.request-page .bg-light-blue {
  background-color: var(--light-blue) !important;
}
.request-page .bg-accent-yellow {
  background-color: var(--accent-yellow) !important;
}
.request-page .text-primary {
  color: var(--primary-blue) !important;
}
.request-page .border-bottom-dark {
  border-bottom-color: var(--primary-blue) !important;
}
.request-page .border-top-blue {
  border-top-color: rgba(32, 97, 183, 0.2) !important;
}

/* Button & Border Styles */
.request-page .btn-outline-primary {
  border-color: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
}
.request-page .btn-outline-primary:hover {
  background-color: var(--primary-blue) !important;
  color: var(--text-white) !important;
}

/* Request Page Gadget & Mobile Responsive Rules */
@media screen and (max-width: 768px) {
  .request-page .booking-page-wrapper {
    padding: 40px 4% 50px 4% !important;
  }
  .request-page .booking-header-text h1 {
    font-size: 2rem !important;
  }
  .request-page .booking-card {
    padding: 30px 5% !important;
  }
  .request-page .form-row.two-col {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .request-page .datetime-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .request-page .step-row,
  .request-page .step-row.reverse {
    flex-direction: column !important;
    gap: 20px !important;
    text-align: center !important;
  }
  .request-page .step-media {
    max-width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  .request-page .datetime-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ==========================================================================
   SCOPED UTILITIES & RESPONSIVENESS FOR SAFETY / LATEST PAGE
   ========================================================================== */

/* Surface and Text Bindings Scoped to Safety Page */
.safety-page {
  background-color: var(--bg-white) !important;
}
.safety-page .text-primary {
  color: var(--primary-blue) !important;
}
.safety-page .text-white {
  color: var(--text-white) !important;
}
.safety-page .underline {
  text-decoration: underline;
}

/* Card Themes */
.safety-page .card-light {
  background-color: var(--bg-white) !important;
}
.safety-page .card-dark {
  background-color: var(--primary-blue) !important;
  color: var(--text-white) !important;
  border-color: var(--primary-blue) !important;
}
.safety-page .border-blue {
  border-color: rgba(32, 97, 183, 0.2) !important;
}

/* Safety Page Mobile and Tablet Responsive Directives */
@media screen and (max-width: 768px) {
  .safety-page .grid-wrapper {
    grid-template-columns: 1fr !important;
  }
  .safety-page .latest-container {
    padding: 20px 15px 50px 15px !important;
  }
  .safety-page .page-main-title {
    font-size: 1.8rem !important;
  }
  .safety-page .article-card {
    padding: 20px 15px !important;
  }
}
/* ==========================================================================
   SCOPED UTILITIES & RESPONSIVENESS FOR REWARDS / AFFILIATES PAGE
   ========================================================================== */

/* Surface & Text Bindings Scoped to Rewards Page */
.rewards-page .bg-light-blue {
  background-color: var(--light-blue) !important;
}
.rewards-page .bg-white {
  background-color: var(--bg-white) !important;
}
.rewards-page .text-primary {
  color: var(--primary-blue) !important;
}
.rewards-page .text-muted {
  opacity: 0.75;
  color: var(--primary-blue) !important;
}
.rewards-page .border-blue {
  border-top-color: rgba(32, 97, 183, 0.2) !important;
}

/* Rewards Page Mobile and Tablet Responsive Directives */
@media screen and (max-width: 768px) {
  .rewards-page .affiliate-hero-section {
    padding: 40px 15px !important;
  }
  .rewards-page .affiliate-hero-card {
    padding: 30px 25px !important;
  }
  .rewards-page .affiliate-hero-card h1 {
    font-size: 1.7rem !important;
  }
  .rewards-page .instructions-section {
    padding: 40px 15px !important;
  }
  .rewards-page .step-row,
  .rewards-page .step-row.reverse {
    flex-direction: column !important;
    gap: 25px !important;
    text-align: left !important;
  }
  .rewards-page .step-image, 
  .rewards-page .step-text {
    width: 100% !important;
  }
  .rewards-page .step-image img {
    max-height: 320px !important;
  }
}
/* ==========================================================================
   SCOPED UTILITIES & RESPONSIVENESS FOR CONTACT PAGE
   ========================================================================== */

/* Surface & Text Bindings Scoped to Contact Page */
.contact-page .bg-dark-blue {
  background-color: var(--primary-blue) !important;
}
.contact-page .bg-light-blue {
  background-color: var(--light-blue) !important;
}
.contact-page .bg-white {
  background-color: var(--bg-white) !important;
}
.contact-page .text-primary {
  color: var(--primary-blue) !important;
}
.contact-page .border-bottom-blue {
  border-bottom-color: var(--primary-blue) !important;
}
.contact-page .underline {
  text-decoration: underline;
}

/* Button & Outline Styling */
.contact-page .btn-outline-blue {
  border-color: rgba(32, 97, 183, 0.4) !important;
  color: var(--primary-blue) !important;
}
.contact-page .btn-outline-blue:hover {
  background-color: var(--primary-blue) !important;
  color: var(--text-white) !important;
}

/* Contact Page Mobile & Gadget Responsive Rules */
@media screen and (max-width: 900px) {
  .contact-page .contact-split-hero {
    grid-template-columns: 1fr !important;
  }
  .contact-page .contact-hero-image-col {
    padding: 40px 5% !important;
  }
  .contact-page .contact-hero-form-col {
    padding: 40px 5% !important;
  }
  .contact-page .contact-container {
    flex-direction: column !important;
    text-align: center !important;
  }
  .contact-page .advisory-card {
    padding: 30px 25px !important;
  }
}

@media screen and (max-width: 480px) {
  .contact-page .form-row.two-col {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}
/* ==========================================================================
   GLOBAL HEADER & FOOTER DARK BLUE THEME OVERRIDE
   ========================================================================== */

/* Header Container & Navigation Elements */
.site-header,
header,
#header-placeholder > div,
#header-placeholder nav,
.header-container {
  background-color: var(--primary-blue) !important;
  color: var(--text-white) !important;
}

/* Header Links & Text */
.site-header a,
header a,
#header-placeholder a,
.main-nav a,
.nav-link {
  color: var(--text-white) !important;
}

.site-header a:hover,
header a:hover,
#header-placeholder a:hover {
  opacity: 0.85;
}

/* Footer Container & Layout Elements */
.site-footer,
footer,
#footer-placeholder,
#footer-placeholder > div,
.footer-container {
  background-color: var(--primary-blue) !important;
  color: var(--text-white) !important;
}

/* Footer Headings, Paragraphs, Lists & Links */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
#footer-placeholder h1, #footer-placeholder h2, #footer-placeholder h3, #footer-placeholder h4, #footer-placeholder h5, #footer-placeholder h6,
.site-footer p, footer p, #footer-placeholder p,
.site-footer li, footer li, #footer-placeholder li,
.site-footer span, footer span, #footer-placeholder span,
.site-footer a, footer a, #footer-placeholder a {
  color: var(--text-white) !important;
}

/* Footer Link Hover State */
.site-footer a:hover,
footer a:hover,
#footer-placeholder a:hover {
  opacity: 0.85;
  text-decoration: underline;
}