/* =========================================================
   Blog Core Layer
   Shared blog article and blog hub styling.

   This file owns shared blog systems only:
   article shell, article grid, article typography, sticky aside,
   generic article cards, comparison tables, mini charts,
   blog hub sections, blog topic clusters, and shared blog CTAs.

   Article-specific styling belongs in article-specific CSS files,
   such as /assets/css/pages/blog/carpet-process.css.
   ========================================================= */
.article-shell {
  background: #ffffff;
}

.article-intro-card {
  margin-top: 28px;
  padding: 26px 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 760px;
  color: #d7e0ee;
  font-size: 15px;
  line-height: 1.85;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}

.article-intro-card strong {
  color: #ffffff;
}

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}

.article-content {
  min-width: 0;
}

.article-content h2,
.article-content h3 {
  font-family: "Montserrat", sans-serif;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.article-content h2 {
  font-size: clamp(30px, 3vw, 40px);
  margin-top: 0;
}

.article-content h3 {
  font-size: 22px;
  margin-top: 0;
}

.article-content p {
  font-size: 16px;
  line-height: 1.9;
  color: #4f607d;
  margin: 0 0 18px;
}

.article-content strong {
  color: var(--navy-deep);
}

.article-block {
  margin-bottom: 72px;
}

.article-block:last-child {
  margin-bottom: 0;
}

.article-aside {
  position: sticky;
  top: 110px;
}

.aside-card {
  background: #fff;
  border: 1px solid rgba(11, 30, 58, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(11, 30, 58, 0.08);
  padding: 28px 24px;
  margin-bottom: 20px;
}

.aside-card:last-child {
  margin-bottom: 0;
}

.aside-title {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy-deep);
  margin: 0 0 16px;
}

.aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aside-list a {
  color: #4f607d;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.aside-list a:hover,
.aside-list a:focus {
  color: var(--navy-deep);
  border-bottom-color: rgba(11, 30, 58, 0.2);
}

.insight-note {
  border-left: 3px solid var(--gold);
  padding: 18px 20px;
  background: #f8fafc;
  border-radius: 0 14px 14px 0;
  margin: 26px 0;
}

.insight-note p {
  margin: 0;
  font-size: 15px;
  color: #43526d;
}

.comparison-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}

.comparison-column {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(11, 30, 58, 0.08);
  box-shadow: 0 14px 34px rgba(11, 30, 58, 0.06);
  background: #fff;
}

.comparison-column.highlight {
  border-color: rgba(212, 175, 55, 0.36);
  box-shadow: 0 18px 40px rgba(11, 30, 58, 0.08);
}

.comparison-head {
  padding: 20px 22px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  background: #0b1e3a;
}

.comparison-column.highlight .comparison-head {
  background: linear-gradient(135deg, #d4af37 0%, #b89628 100%);
  color: #051329;
}

.comparison-body {
  padding: 22px;
}

.comparison-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comparison-body li {
  position: relative;
  padding-left: 26px;
  color: #465876;
  font-size: 15px;
  line-height: 1.7;
}

.comparison-body li::before {
  content: "•";
  position: absolute;
  left: 8px;
  top: 0;
  color: var(--gold);
  font-size: 18px;
  line-height: 1.4;
}

.mini-chart-wrap {
  margin-top: 28px;
  background: #fff;
  border: 1px solid rgba(11, 30, 58, 0.08);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(11, 30, 58, 0.06);
  padding: 24px;
}

.mini-chart-title {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy-deep);
  margin: 0 0 18px;
}

.chart-rows {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chart-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 56px;
  gap: 14px;
  align-items: center;
}

.chart-label {
  font-size: 14px;
  font-weight: 700;
  color: #31415d;
}

.chart-track {
  height: 14px;
  border-radius: 999px;
  background: #e8edf5;
  overflow: hidden;
  position: relative;
}

.chart-fill {
  height: 100%;
  border-radius: 999px;
}

.chart-fill.regular {
  width: 42%;
  background: linear-gradient(90deg, #6d84b8 0%, #4f6696 100%);
}

.chart-fill.deep {
  width: 78%;
  background: linear-gradient(90deg, #d4af37 0%, #b89628 100%);
}

.chart-fill.reno {
  width: 96%;
  background: linear-gradient(90deg, #0b2347 0%, #071a36 100%);
}

.chart-value {
  font-size: 13px;
  font-weight: 800;
  color: #31415d;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.article-cta-box {
  padding: 34px 30px;
  border-radius: 22px;
  background: linear-gradient(180deg, #0b2347 0%, #071a36 100%);
  color: #d9e3f3;
  box-shadow: 0 20px 48px rgba(5, 19, 41, 0.18);
}

.article-cta-box h3 {
  color: #fff;
  margin-bottom: 14px;
  font-size: 28px;
}

.article-cta-box p {
  color: #d9e3f3;
  margin-bottom: 24px;
}

.faq-answer ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.faq-answer li {
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .article-grid {
    grid-template-columns: 1fr;
  }

  .article-aside {
    position: static;
  }
}

@media (max-width: 768px) {
  .article-intro-card {
    padding: 20px 18px;
    font-size: 14px;
  }

  .comparison-table {
    grid-template-columns: 1fr;
  }

  .chart-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .chart-value {
    text-align: left;
  }
}

/* Premium dark bridge styling on blog article pages */
.article-shell .service-links-bridge {
  position: relative;
  margin-top: -18px;
  padding: 0 0 22px;
  background: linear-gradient(180deg, #051329 0%, #0b1e3a 64%, #eef2f7 82%, #f5f7fb 100%) !important;
}

.article-shell .service-links-bridge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(245, 247, 251, 0) 0%, rgba(245, 247, 251, 0.72) 58%, #f5f7fb 100%);
  pointer-events: none;
}

.article-shell .service-links-bridge::after,
.article-shell .service-links-bridge::before {
  content: none !important;
  display: none !important;
}

.article-shell .service-links-bridge .lux-container {
  position: relative;
  z-index: 2;
  transform: translateY(10px);
}

.article-shell .service-links-bridge-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(11, 30, 58, 0.94) 0%, rgba(7, 24, 50, 0.98) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.16) !important;
  box-shadow: 0 20px 46px rgba(5, 19, 41, 0.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.article-shell .service-links-bridge-text {
  max-width: 620px;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #d9e3f3 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.article-shell .service-links-bridge-text a,
.article-shell .service-links-bridge-text a:visited {
  color: #f2d574 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(242, 213, 116, 0.36) !important;
}

.article-shell .service-links-bridge-text a:hover,
.article-shell .service-links-bridge-text a:focus {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.58) !important;
}

@media (max-width: 768px) {
  .article-shell .service-links-bridge {
    margin-top: -10px;
    padding: 0 0 16px;
    background: linear-gradient(180deg, #051329 0%, #0b1e3a 66%, #eef2f7 86%, #f5f7fb 100%) !important;
  }

  .article-shell .service-links-bridge::after {
    height: 72px;
    background: linear-gradient(180deg, rgba(245, 247, 251, 0) 0%, rgba(245, 247, 251, 0.78) 62%, #f5f7fb 100%);
  }

  .article-shell .service-links-bridge-card {
    max-width: 100%;
    padding: 18px 18px;
    border-radius: 16px;
  }

  .article-shell .service-links-bridge-text {
    max-width: 100%;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .article-shell .service-links-bridge .lux-container {
    transform: translateY(6px);
  }
}
/* Practical content additions for deep-cleaning-vs-regular-cleaning */
.practical-checklist {
  margin: 22px 0 0;
  padding-left: 20px;
}

.practical-checklist li {
  margin-bottom: 10px;
  color: #465876;
  line-height: 1.75;
}

.at-a-glance-box,
.signs-box,
.not-included-box,
.real-examples-box {
  margin-top: 34px;
  padding: 26px 24px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 58, 0.08);
  box-shadow: 0 14px 34px rgba(11, 30, 58, 0.06);
}

.at-a-glance-box h3,
.signs-box h3,
.not-included-box h3,
.real-examples-box h3 {
  margin-bottom: 12px;
}

.at-a-glance-box p,
.signs-box p,
.not-included-box p,
.real-examples-box p {
  margin-bottom: 0;
}

.comparison-overview-table-wrap {
  margin-top: 18px;
  overflow-x: auto;
}

.comparison-overview-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.comparison-overview-table th,
.comparison-overview-table td {
  text-align: left;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(11, 30, 58, 0.08);
  vertical-align: top;
  font-size: 14px;
  line-height: 1.6;
  color: #465876;
}

.comparison-overview-table th {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0b1e3a;
  background: #f8fafc;
}

.comparison-overview-table td strong {
  color: #0b1e3a;
}

@media (max-width: 768px) {
  .at-a-glance-box,
  .signs-box,
  .not-included-box,
  .real-examples-box {
    padding: 20px 18px;
  }

  .comparison-overview-table th,
  .comparison-overview-table td {
    padding: 12px 12px;
    font-size: 13px;
  }
}
/* ================= BLOG HUB PAGE OVERRIDES ================= */
body .blog-hub-intro-strip {
  position: relative;
  margin-top: -22px;
  padding: 0 0 34px;
  background: linear-gradient(180deg, #051329 0%, #0b1e3a 54%, #f8fafc 54%, #f8fafc 100%);
}

body .blog-hub-intro-card {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11, 30, 58, 0.96) 0%, rgba(7, 24, 50, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.16);
  box-shadow: 0 18px 42px rgba(5, 19, 41, 0.20);
}

body .blog-hub-intro-text {
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: #d9e3f3;
}

body .blog-hub-intro-text a {
  color: #f2d574;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 213, 116, 0.36);
}

body .blog-hub-intro-text a:hover,
body .blog-hub-intro-text a:focus {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.58);
}

body .blog-start-here-strip,
body section.blog-start-here-strip,
body .combined-executive-wrapper .blog-start-here-strip {
  position: relative;
  padding: 8px 0 44px;
  background: #f8fafc;
}

body .blog-start-here-strip .lux-container,
body section.blog-start-here-strip .lux-container,
body .combined-executive-wrapper .blog-start-here-strip .lux-container {
  max-width: 1240px;
}

body .blog-start-here-card,
body .blog-start-here-strip .blog-start-here-card,
body .combined-executive-wrapper .blog-start-here-strip .blog-start-here-card {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 34px 30px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
  border: 1px solid rgba(11, 30, 58, 0.08) !important;
  box-shadow: 0 22px 50px rgba(11, 30, 58, 0.08) !important;
  box-sizing: border-box;
}

body .blog-start-here-card .lux-eyebrow-gold,
body .blog-start-here-strip .blog-start-here-card .lux-eyebrow-gold {
  display: inline-flex;
  margin-bottom: 16px;
}

body .blog-start-here-card .lux-h2-navy,
body .blog-start-here-strip .blog-start-here-card .lux-h2-navy {
  margin: 0 0 14px;
}

body .blog-start-here-text,
body .blog-start-here-strip .blog-start-here-text {
  max-width: 760px;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.8;
  color: #4f607d;
}

body .blog-start-here-grid,
body .blog-start-here-strip .blog-start-here-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

body .blog-start-here-item,
body .blog-start-here-strip .blog-start-here-item {
  min-width: 0;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: #ffffff !important;
  border: 1px solid rgba(11, 30, 58, 0.08) !important;
  box-shadow: 0 12px 30px rgba(11, 30, 58, 0.05) !important;
  box-sizing: border-box;
}

body .blog-start-here-item h3,
body .blog-start-here-strip .blog-start-here-item h3 {
  margin: 0 0 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #0b1e3a;
  letter-spacing: -0.01em;
}

body .blog-start-here-item p,
body .blog-start-here-strip .blog-start-here-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #5c6c88;
}

body .blog-start-here-item a,
body .blog-start-here-strip .blog-start-here-item a {
  color: #0b1e3a;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 30, 58, 0.16);
}

body .blog-start-here-item a:hover,
body .blog-start-here-item a:focus,
body .blog-start-here-strip .blog-start-here-item a:hover,
body .blog-start-here-strip .blog-start-here-item a:focus {
  border-bottom-color: rgba(11, 30, 58, 0.34);
}

body .featured-article-hub {
  padding: 56px 0 34px;
  background: transparent;
}

body .featured-article-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 34px;
  align-items: center;
  padding: 34px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 58, 0.08);
  box-shadow: 0 24px 54px rgba(11, 30, 58, 0.08);
}

body .featured-article-copy .lux-eyebrow-gold {
  margin-bottom: 18px;
}

body .featured-article-copy .lux-h2-navy {
  margin: 0 0 16px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  color: #0b1e3a;
  letter-spacing: -0.02em;
}

body .featured-article-text {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.85;
  color: #4f607d;
}

body .featured-article-image-wrap {
  position: relative;
}

body .featured-article-image {
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: 0 20px 44px rgba(11, 30, 58, 0.12);
}

body .blog-topic-clusters {
  padding: 14px 0 26px;
}

body .topic-clusters-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
}

body .topic-clusters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

body .topic-cluster-card {
  padding: 28px 24px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 58, 0.08);
  box-shadow: 0 14px 34px rgba(11, 30, 58, 0.06);
}

body .topic-cluster-title {
  margin: 0 0 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #0b1e3a;
}

body .topic-cluster-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.75;
  color: #5c6c88;
}

body .topic-cluster-links {
  margin: 0;
  padding-left: 18px;
}

body .topic-cluster-links li {
  margin-bottom: 10px;
  color: #465876;
}

body .topic-cluster-links a {
  color: #0b1e3a;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

body .topic-cluster-links a:hover,
body .topic-cluster-links a:focus {
  border-bottom-color: rgba(11, 30, 58, 0.2);
}

body .combined-executive-wrapper .insights-executive {
  padding-top: 72px;
}

body .cta-pretext {
  margin: 0 auto 16px;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.75;
  color: #d9e3f3;
}

body .combined-executive-wrapper .featured-article-card,
body .combined-executive-wrapper .topic-cluster-card,
body .combined-executive-wrapper .blog-hub-intro-card {
  box-sizing: border-box;
}

body .combined-executive-wrapper .topic-clusters-grid,
body .combined-executive-wrapper .featured-article-card {
  width: 100%;
}

@media (max-width: 991px) {
  body .featured-article-card {
    grid-template-columns: 1fr;
  }

  body .blog-start-here-grid,
  body .blog-start-here-strip .blog-start-here-grid {
    grid-template-columns: 1fr;
  }

  body .topic-clusters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body .blog-hub-intro-strip {
    margin-top: -10px;
    padding-bottom: 18px;
  }

  body .blog-hub-intro-card {
    padding: 18px 16px;
    border-radius: 16px;
  }

  body .blog-hub-intro-text {
    font-size: 14px;
    line-height: 1.75;
  }

  body .blog-start-here-strip,
  body section.blog-start-here-strip,
  body .combined-executive-wrapper .blog-start-here-strip {
    padding: 4px 0 26px;
  }

  body .blog-start-here-card,
  body .blog-start-here-strip .blog-start-here-card {
    padding: 22px 18px 18px;
    border-radius: 18px;
  }

  body .blog-start-here-text,
  body .blog-start-here-strip .blog-start-here-text {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.75;
  }

  body .blog-start-here-item,
  body .blog-start-here-strip .blog-start-here-item {
    padding: 18px 16px 16px;
    border-radius: 16px;
  }

  body .blog-start-here-item h3,
  body .blog-start-here-strip .blog-start-here-item h3 {
    font-size: 18px;
  }

  body .blog-start-here-item p,
  body .blog-start-here-strip .blog-start-here-item p {
    font-size: 14px;
    line-height: 1.7;
  }

  body .featured-article-hub {
    padding: 46px 0 24px;
  }

  body .featured-article-card {
    padding: 22px 18px;
    border-radius: 20px;
    gap: 22px;
  }

  body .topic-cluster-card {
    padding: 22px 18px;
  }

  body .topic-clusters-grid {
    grid-template-columns: 1fr;
  }
}
/* Move-out cleaning article enhancements */
.seller-responsibility-strip {
  padding: 8px 0 0;
  background: #ffffff;
}

.seller-responsibility-card,
.seller-checklist-box {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 28px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(11, 30, 58, 0.08);
  box-shadow: 0 14px 34px rgba(11, 30, 58, 0.06);
}

.seller-responsibility-title,
.seller-checklist-box h3 {
  margin: 0 0 14px;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #0b1e3a;
  letter-spacing: -0.01em;
}

.seller-responsibility-text {
  margin: 0 0 14px;
  color: #4f607d;
  line-height: 1.85;
}

.seller-responsibility-text:last-child {
  margin-bottom: 0;
}

.seller-checklist-box {
  margin-top: 28px;
}


@media (max-width: 768px) {
  .seller-responsibility-card,
  .seller-checklist-box {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .seller-responsibility-title,
  .seller-checklist-box h3 {
    font-size: 21px;
  }
}

/* ------------------------------
   Ownership note
   ------------------------------
   blog.css owns shared blog and article systems only:
   article shell, article grid, article typography, sticky aside,
   generic insight notes, generic comparison tables, mini charts,
   generic article CTA boxes, blog hub sections, topic clusters,
   and shared blog responsive refinements.

   Article-specific systems should live in dedicated article files.
   Carpet process article styling belongs in pages/blog/carpet-process.css.
   Page-specific service styles belong in assets/css/pages/.
   Shared section systems belong in core/sections.css.
   Reusable UI primitives belong in core/components.css.
*/