/* =========================================================
   Deep Office Cleaning Page Layer
   Loaded after core CSS and service-page.css.
   Keep only office-cleaning-specific refinements here.
   ========================================================= */

/* ------------------------------
   Office page hero treatment
   ------------------------------ */
.hero-ultra-luxe {
  background:
    radial-gradient(circle at 16% 16%, rgba(212, 175, 55, 0.16) 0, rgba(212, 175, 55, 0) 32%),
    radial-gradient(circle at 86% 18%, rgba(96, 165, 250, 0.12) 0, rgba(96, 165, 250, 0) 34%),
    linear-gradient(135deg, #031022 0%, #071a36 46%, #102744 100%);
}

.hero-image-wrap::before {
  background: rgba(212, 175, 55, 0.06);
  border-color: rgba(212, 175, 55, 0.14);
}

/* ------------------------------
   Office diagnosis / comparison refinements
   ------------------------------ */
#office-diagnosis .compare-card {
  border-color: rgba(11, 30, 58, 0.075);
}

#office-diagnosis .side-lgc {
  background:
    radial-gradient(circle at 92% 10%, rgba(212, 175, 55, 0.14) 0, rgba(212, 175, 55, 0) 38%),
    linear-gradient(135deg, #071a36 0%, #102b52 100%);
}

#office-diagnosis .comp-title {
  color: #ffffff;
}

#office-diagnosis .comp-desc {
  color: #d7e0ec;
}

/* ------------------------------
   Office-specific service-page refinements
   ------------------------------ */
.services-editorial .service-row {
  border-color: rgba(11, 30, 58, 0.07);
}

.services-editorial .service-img-wrapper {
  box-shadow: 0 22px 56px rgba(7, 26, 54, 0.12);
}

.services-editorial .img-badge {
  background: linear-gradient(135deg, #d4af37 0%, #f2d574 100%);
}

/* Office-specific emphasis boxes can be added here only when the HTML uses them. */

/* Office-specific related-card styles can be added here only when the HTML uses them. */

@media (max-width: 991px) {
  .hero-ultra-luxe {
    background:
      radial-gradient(circle at 18% 12%, rgba(212, 175, 55, 0.14) 0, rgba(212, 175, 55, 0) 34%),
      linear-gradient(135deg, #031022 0%, #071a36 54%, #102744 100%);
  }
}

@media (max-width: 767px) {
  #office-diagnosis .compare-card {
    gap: 14px;
  }

  .services-editorial .service-img-wrapper {
    box-shadow: 0 16px 38px rgba(7, 26, 54, 0.10);
  }
}

/* ------------------------------
   Office page dark callouts
   Used by deep-office pages only.
   ------------------------------ */
.services-dark-callout {
  position: relative;
  overflow: hidden;
  margin: 42px 0 70px;
  padding: 54px 42px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 86% 0%, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0) 34%),
    linear-gradient(135deg, #071a36 0%, #102b52 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 74px rgba(11, 30, 58, 0.16);
}

.services-dark-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.36;
  pointer-events: none;
}

.services-dark-callout > * {
  position: relative;
  z-index: 1;
}

.services-dark-callout .lux-h2-white {
  color: #ffffff;
}

.services-dark-callout .lux-p-center-light {
  color: #d7e0ec;
}

.services-dark-callout .services-local-note-box {
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

.services-dark-callout .services-local-note-box p {
  color: #edf3f9 !important;
}

/* ------------------------------
   Best-fit office reset section
   Office-specific full-width scenario cards.
   ------------------------------ */

#best-fit-office-reset .services-header {
  max-width: 980px;
  margin: 0 auto 48px;
  text-align: center;
}

#best-fit-office-reset .services-header .lux-eyebrow-gold {
  display: inline-flex;
  width: fit-content;
  margin: 0 auto 22px;
}

#best-fit-office-reset .services-header .lux-h2-dark {
  display: block;
  max-width: 920px;
  margin: 0 auto 18px;
  background: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#best-fit-office-reset .services-header .lux-p-center {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

#best-fit-office-reset .comparison-grid {
  display: grid;
  gap: 24px;
  max-width: 1120px;
  margin: 48px auto 0;
}

#best-fit-office-reset .compare-card {
  display: block;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 0%, rgba(212, 175, 55, 0.09), rgba(212, 175, 55, 0) 34%),
    linear-gradient(135deg, #071a36 0%, #102b52 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 58px rgba(11, 30, 58, 0.12);
}

#best-fit-office-reset .compare-card .side-lgc {
  width: 100% !important;
  min-height: auto;
  padding: 34px 40px;
  border-radius: 28px;
  background: transparent;
  color: #ffffff;
}

#best-fit-office-reset .compare-card .lgc-content {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

#best-fit-office-reset .compare-card .comp-icon-box {
  margin: 0;
}

#best-fit-office-reset .compare-card .comp-title {
  margin-bottom: 10px;
  color: #ffffff;
}

#best-fit-office-reset .compare-card .comp-desc {
  max-width: 820px;
  color: #cbd5e1;
}

#best-fit-office-reset .compare-card .comp-label {
  color: var(--gold-light);
}

@media (max-width: 767px) {
  .services-dark-callout {
    margin: 32px 0 52px;
    padding: 32px 20px;
    border-radius: 24px;
  }

  #best-fit-office-reset .comparison-grid {
    margin-top: 34px;
    gap: 18px;
  }

  #best-fit-office-reset .compare-card .side-lgc {
    padding: 26px 22px;
    border-radius: 22px;
  }

  #best-fit-office-reset .compare-card .lgc-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ------------------------------
   Ownership note
   ------------------------------
   This file should only contain office-cleaning-specific overrides:
   office hero colour treatment, office diagnosis refinements,
   office-specific dark callouts, and office-specific scenario cards.

   Shared service-page layouts now belong in service-page.css:
   hero cards, context cards, context panels, CTA bridges, and FAQ layout.

   Shared section systems belong in core/sections.css.
*/