/* Bailey & Bear Cleaning — brand system for the service-page template (2026-10-17).
   Visual only: no copy, links, forms or schema change. Owner request: "high end branding on the blank backdrops". */
html, body { overflow-x: clip; }
body { background: #fbf9f5; }

/* 1. Full-bleed hero (was boxed inside main with white gutters) */
main > .hero {
  margin-inline: calc(50% - 50vw);
  padding: 112px max(20px, calc(50vw - 580px)) 96px;
  background-position: center 40%;
  border-bottom: 4px solid var(--accent, #0a6b55);
}
main > .hero > :not(img) { width: auto; }
main > .hero .eyebrow { color: #9fe0c9; }
main > .hero::after {
  content: ""; position: absolute; right: max(20px, calc(50vw - 560px)); bottom: 28px;
  width: 150px; height: 150px; opacity: .22; pointer-events: none;
  background: url('/assets/cleaning-brand/bb-seal-light.svg') center/contain no-repeat;
}

/* 2. Section rhythm: full-bleed warm stone bands on alternating sections */
main > .section { position: relative; padding: 72px 0; }
main > .section:nth-of-type(odd):not(.faq) {
  background: #f3efe8;
  box-shadow: 0 0 0 100vmax #f3efe8;
  clip-path: inset(0 -100vmax);
}

/* 3. Accent rule + eyebrow treatment on every section headline */
main > .section > h2::before, main > .section > .answer-block > h2::before {
  content: ""; display: block; width: 46px; height: 3px; margin: 0 0 18px;
  background: linear-gradient(90deg, var(--accent, #0a6b55), #2fa37f);
  border-radius: 2px;
}
main > .section:not(.hero) > h2, main > .section:not(.hero) > .answer-block > h2 { color: #11151c; }
main > .section > h3 { font-size: 1.25rem; margin: 1.6em 0 .4em; }

/* 4. Answer block becomes a framed brand card */
main .answer-block {
  background: #ffffff; border: 1px solid #e7e1d6; border-left: 4px solid var(--accent, #0a6b55);
  border-radius: 10px; padding: 34px 36px; box-shadow: 0 14px 40px -24px rgba(17,21,28,.35);
}

/* 5. Dark signature band every 6th section, with the bear emblem watermark */
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) {
  background: #12151b;
  box-shadow: 0 0 0 100vmax #12151b; clip-path: inset(0 -100vmax);
}
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form))::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 300px; height: 300px; opacity: .09; pointer-events: none;
  background: url('/assets/cleaning-brand/bb-seal-light.svg') center/contain no-repeat;
}
/* Text recolor applies ONLY to text sitting directly on the dark band; nested cards/tables/author boxes keep their own light styling. */
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > h2, main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > h3, main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > p strong, main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > ul strong { color: #ffffff; }
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > p, main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > ul > li, main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > ol > li { color: #d9e0dc; }
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > p a:not(.button), main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > ul a:not(.button), main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > ol a:not(.button) { color: #9fe0c9; text-decoration: underline; text-underline-offset: 3px; }
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > .answer-block { background: #1b2029; border-color: #2a313c; }
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > .answer-block h2, main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > .answer-block strong { color: #ffffff; }
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > .answer-block p { color: #eef2ef; }
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > .answer-block a:not(.button) { color: #9fe0c9; }
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > .includes li { color: #d9e0dc; }
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form)) > .includes li::before { background: #2fa37f; }

/* 6. Tables and grids read as cards */
main table { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(17,21,28,.06); }

/* 7. FAQ as cards on a stone band */
main > .section.faq { background: #f3efe8; box-shadow: 0 0 0 100vmax #f3efe8; clip-path: inset(0 -100vmax); }
main .faq-item {
  background: #fff; border: 1px solid #e7e1d6; border-radius: 10px;
  padding: 18px 22px; margin: 0 0 12px; box-shadow: 0 1px 2px rgba(17,21,28,.05);
}

/* 8. Lead card: dark branded frame */
main > .lead-card { border-radius: 12px; box-shadow: 0 24px 60px -30px rgba(17,21,28,.55); border-top: 4px solid var(--accent, #0a6b55); }

@media (max-width: 720px) {
  main > .hero { padding: 76px 20px 64px; }
  main > .hero::after { width: 84px; height: 84px; bottom: 16px; opacity: .18; }
  main > .section { padding: 52px 0; }
  main > .section:nth-of-type(6n+4):not(.faq):not(:has(form))::after { width: 140px; height: 140px; opacity: .05; }
  main .answer-block { padding: 24px 22px; }
}

/* 9. Logo system (2026-10-17): vector bear marks, monogram pattern and seal on the light backdrops */
main > .section { isolation: isolate; }
/* stone bands: faint full-bleed monogram texture fading toward the content */
main > .section:nth-of-type(odd):not(.faq)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none;
  background: url('/assets/cleaning-brand/bb-pattern-ink.svg') 0 0/180px 180px repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 28%, transparent 72%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 28%, transparent 72%, #000 100%);
}
main > .section:nth-of-type(6n+4):not(.faq):not(:has(form))::before { display: none; }
/* white sections: alternate a large bear watermark at the right edge */
main > .section:nth-of-type(4n+2):not(.faq)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: calc(50% - 50vw); bottom: 24px; width: 230px; height: 280px; opacity: .05; background-position: right bottom;
  background: url('/assets/cleaning-brand/bb-bear-mark-ink.svg') right bottom/contain no-repeat;
}
/* FAQ: oversized seal watermark */
main > .section.faq { position: relative; isolation: isolate; overflow: hidden; }
main > .section.faq::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -120px; top: 40px; width: 460px; height: 460px; opacity: .06; transform: rotate(10deg);
  background: url('/assets/cleaning-brand/bb-seal-ink.svg') center/contain no-repeat;
}
/* answer card: brass bear mark in the corner */
main .answer-block { position: relative; }
main .answer-block > h2 { padding-right: 44px; }
main .answer-block::after {
  content: ""; position: absolute; right: 22px; top: 20px; width: 34px; height: 41px; opacity: .7; pointer-events: none;
  background: url('/assets/cleaning-brand/bb-bear-mark-brass.svg') center/contain no-repeat;
}
@media (max-width: 720px) {
  main > .section:nth-of-type(odd):not(.faq)::before { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 18%, transparent 82%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 18%, transparent 82%, #000 100%); }
  main > .section:nth-of-type(4n+2):not(.faq)::after { width: 130px; height: 158px; right: -20px; }
  main > .section.faq::before { width: 300px; height: 300px; right: -130px; }
  main .answer-block::after { width: 26px; height: 32px; right: 14px; top: 14px; }
}

/* 10. Readability fixes found by full-page contrast audit (2026-10-17) */
main > .hero > p a:not(.button), main > .hero p.intro a:not(.button) { color: #9fe0c9; text-decoration: underline; text-underline-offset: 3px; }
main > .hero .os1-cro-card a.button.primary, main .os1-cro-card a.button:not(.alt):not(.secondary) { color: #12151b; }