/* Bailey & Bear — homepage logo system (2026-10-17). Visual only: pseudo-elements and backgrounds, no text or links.
   Marks are vector traces of the real Bailey & Bear bear (from 09-bailey-and-bear-commercial-cleaning-logo.png). */
:root {
  --bbl-brass: #b89b6a;
  --bbl-brass-soft: rgba(184, 155, 106, .35);
}

/* Shared: plain light sections become a positioned canvas */
#commercial-cleaning-austin-answer, #neighborhoods, #vacant-homes, #spaces, #faq, #bb-service-standard, #more-services {
  position: relative; isolation: isolate; overflow: hidden;
}

/* 1. Answer section: seal medallion bridging the hero and a large bear watermark on the right */
#commercial-cleaning-austin-answer { overflow: visible; }
#commercial-cleaning-austin-answer::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 132px; height: 132px; z-index: 2; pointer-events: none; border-radius: 50%;
  background: #efece7 url('/assets/cleaning-brand/bb-seal-ink.svg') center/118px no-repeat;
  box-shadow: 0 18px 40px -18px rgba(20, 20, 22, .45), 0 0 0 6px #efece7;
}
#commercial-cleaning-austin-answer::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: max(-40px, calc(50vw - 760px)); bottom: -30px; width: 380px; height: 462px; opacity: .06;
  background: url('/assets/cleaning-brand/bb-bear-mark-ink.svg') right bottom/contain no-repeat;
}

/* 2. Neighborhoods: monogram pattern that fades in from the edges */
#neighborhoods::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/cleaning-brand/bb-pattern-ink.svg') 0 0/180px 180px repeat;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, transparent 30%, #000 85%);
          mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, transparent 30%, #000 85%);
}

/* 3. Vacant homes: brass bear on the left edge with a hairline frame */
#vacant-homes::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: max(-60px, calc(50vw - 820px)); top: 50%; transform: translateY(-50%);
  width: 300px; height: 365px; opacity: .14;
  background: url('/assets/cleaning-brand/bb-bear-mark-brass.svg') center/contain no-repeat;
}
#vacant-homes::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bbl-brass-soft) 20%, var(--bbl-brass) 50%, var(--bbl-brass-soft) 80%, transparent);
}

/* 4. Spaces: pattern band behind the grid and a seal in the top-right */
#spaces::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/cleaning-brand/bb-pattern-ink.svg') 90px 90px/180px 180px repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
#spaces::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 56px; right: max(24px, calc(50vw - 600px)); width: 168px; height: 168px; opacity: .55;
  background: url('/assets/cleaning-brand/bb-seal-ink.svg') center/contain no-repeat;
}

/* 5. FAQ: oversized seal watermark, left */
#faq::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: max(-180px, calc(50vw - 940px)); top: 50%; transform: translateY(-50%) rotate(-8deg);
  width: 620px; height: 620px; opacity: .05;
  background: url('/assets/cleaning-brand/bb-seal-ink.svg') center/contain no-repeat;
}
#faq::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bbl-brass-soft) 20%, var(--bbl-brass) 50%, var(--bbl-brass-soft) 80%, transparent);
}

/* 6. Service standard: brass bear mark beside the cards */
#bb-service-standard::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: max(16px, calc(50vw - 600px)); top: 34px; width: 74px; height: 90px; opacity: .55;
  background: url('/assets/cleaning-brand/bb-bear-mark-brass.svg') center/contain no-repeat;
}

/* 7. More services: closing signature — hairline, seal, hairline */
#more-services { padding-bottom: 196px !important; }
#more-services::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0;
  background: url('/assets/cleaning-brand/bb-pattern-ink.svg') 0 0/180px 180px repeat;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 60%);
          mask-image: linear-gradient(0deg, #000 0%, transparent 60%);
}
#more-services::after {
  content: ""; position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  width: min(560px, calc(100% - 48px)); height: 108px; pointer-events: none;
  background:
    url('/assets/cleaning-brand/bb-seal-ink.svg') center/108px 108px no-repeat,
    linear-gradient(90deg, transparent, var(--bbl-brass) 30%, transparent 30%, transparent 70%, var(--bbl-brass) 70%, transparent) center/100% 1px no-repeat;
}

@media (max-width: 900px) {
  #commercial-cleaning-austin-answer::before { width: 96px; height: 96px; background-size: 86px; }
  #commercial-cleaning-austin-answer::after { width: 220px; height: 268px; right: -50px; opacity: .05; }
  #vacant-homes::before { width: 180px; height: 220px; left: -70px; opacity: .10; }
  #spaces::after { display: none; }
  #spaces::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 28%); mask-image: linear-gradient(180deg, #000 0%, transparent 28%); }
  #faq::before { width: 420px; height: 420px; left: -200px; }
  #bb-service-standard::before { width: 48px; height: 58px; top: 26px; }
  #more-services { padding-bottom: 168px !important; }
  #more-services::after { height: 92px; background-size: 92px 92px, 100% 1px; bottom: 36px; }
}
@media (prefers-reduced-transparency: reduce) {
  #neighborhoods::before, #spaces::before, #more-services::before { display: none; }
}