/* Block layouts added for the designs (Services: Tiles, Alternating rows;
   Coupons: Ticket; Testimonials: Cards; Featured: Promise cards, Numbers;
   People: Meet the owner; Service Area: Towns). They use the theme color
   variables, so they follow the palette of any design, including Original. */

.sbl-col { margin-bottom: 16px }

/* Services · Tiles */
.sbl-tile { display: grid; gap: 8px; justify-items: start; height: 100%; padding: 18px; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 12px; color: var(--color-primary) !important; text-decoration: none !important; transition: transform .15s, box-shadow .15s }
.sbl-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10) }
.sbl-tile svg { width: 44px; height: 44px; margin: 0 !important; padding: 0 !important }
.sbl-tile svg path { fill: var(--color-secondary, currentColor) }
.sbl-tile b { font-family: var(--typo-heading-font-family, inherit); font-size: 1.25rem; line-height: 1.15 }
.sbl-tile span { font-size: .9rem; color: var(--color-gray-dark, #5b6b77) }

/* Services · Alternating rows */
.sbl-zig { display: grid; grid-template-columns: 1fr 1.25fr; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 16px; overflow: hidden }
.sbl-col:nth-child(even) .sbl-zig__art { order: 2 }
.sbl-zig__art { display: grid; place-items: center; min-height: 220px; background: var(--color-primary) }
.sbl-col:nth-child(3n+2) .sbl-zig__art { background: var(--color-accent) }
.sbl-col:nth-child(3n+3) .sbl-zig__art { background: var(--color-secondary) }
.sbl-zig__art svg { width: 110px; height: 110px; margin: 0 !important }
.sbl-zig__art svg path { fill: var(--color-yellow, #fff) }
.sbl-col:nth-child(3n+2) .sbl-zig__art svg path { fill: #fff }
.sbl-zig__txt { padding: 28px; display: grid; gap: 10px; align-content: center }
.sbl-zig__txt h3 { margin: 0; color: var(--color-primary) }
.sbl-zig__desc p:last-child { margin-bottom: 0 }
.sbl-more { color: var(--sb-accent-text, var(--color-accent)) !important; font-weight: 800; text-decoration: none !important }
.sbl-more:hover { text-decoration: underline !important }

/* Coupons · Ticket */
.sbl-ticket { position: relative; height: 100%; display: grid; gap: 8px; align-content: start; padding: 22px; background: #fff; border: 2px dashed var(--color-accent); border-radius: 14px; color: var(--color-dark, #2b3a32) }
.sbl-ticket__amount { font: 800 2.3rem/1 var(--typo-heading-font-family, inherit); color: var(--sb-accent-text, var(--color-accent)) }
.sbl-ticket h3 { margin: 0; font-size: 1.15rem; color: var(--color-primary) }
.sbl-ticket__text { font-size: .95rem; color: var(--color-gray-dark, #5f6f66) }
.sbl-ticket__text p:last-child { margin: 0 }
.sbl-ticket__meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--color-gray, #dbe7df); font-size: .85rem; color: var(--color-gray-dark, #5f6f66) }
.sbl-ticket__meta b { padding: 2px 8px; border-radius: 6px; background: var(--color-gray-light, #eef6f1); color: var(--color-primary); letter-spacing: .06em }
.sbl-ticket__call { display: grid; gap: 6px; justify-items: center; margin-top: 6px; text-align: center }
.sbl-ticket__btn { display: block; width: 100%; padding: 12px 18px; border-radius: 10px; background: var(--color-accent); color: var(--sb-on-accent, #fff) !important; font-weight: 800; text-decoration: none !important; transition: filter .15s }
.sbl-ticket__btn:hover { filter: brightness(.93) }
.sbl-ticket__call small { font-size: .88rem; color: var(--color-gray-dark, #5f6f66) }
.sbl-ticket__call small a { font-weight: 700; color: var(--color-primary) !important; white-space: nowrap }

/* Coupons · Standard (Original look; designs restyle it in designs/_modules.css) */
.sb-coupon { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 20px; text-align: center; background: var(--color-dark, #23323d); color: #fff; border: 2px dashed var(--color-accent); border-radius: 10px }
.sb-coupon > p, .sb-coupon > h3 { margin: 0 }
.sb-coupon .coupon-offer { font: 800 2.4rem/1 var(--typo-heading-font-family, inherit); color: var(--color-accent) }
.sb-coupon .coupon-title { font-size: 1.35rem; color: inherit }
.sb-coupon .coupon-text { font-size: 1rem; opacity: .9 }
.sb-coupon .coupon-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem }
.sb-coupon .coupon-meta b { padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.14); letter-spacing: .06em }
.sb-coupon .coupon-call { display: flex !important; align-items: center; justify-content: center; gap: 8px; margin-top: auto; background: var(--color-accent); color: var(--sb-on-accent, #fff) !important; font-weight: 800; border: 0 }
.sb-coupon .coupon-call:hover { filter: brightness(.93) }
.sb-coupon .coupon-dial { font-size: .9rem; opacity: .9 }
.sb-coupon .coupon-dial a { color: inherit !important; font-weight: 700; white-space: nowrap }

/* Featured · Promise cards */
.sbl-promise { height: 100%; display: grid; gap: 6px; justify-items: start; padding: 20px; background: #fff; border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.12); color: var(--color-dark, #2b3a32) }
.sbl-promise__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--color-gray-light, #eef6f1); display: grid; place-items: center; font-style: normal }
.sbl-promise__icon svg { width: 26px; height: 26px; margin: 0 !important }
.sbl-promise__icon svg path { fill: var(--color-primary) }
.sbl-promise b { font-family: var(--typo-heading-font-family, inherit); font-size: 1.05rem; color: var(--color-primary) }
.sbl-promise span { font-size: .9rem; color: var(--color-gray-dark, #5f6f66) }

/* Featured · Numbers */
.sbl-stat { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--color-accent) }
.sbl-stat b { font: 800 1.9rem/1.1 var(--typo-heading-font-family, inherit); color: var(--color-primary) }
.sbl-stat span { font-size: .85rem; color: var(--color-gray-dark, #5b6b77) }

/* People · Meet the owner */
.sbl-owner { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; max-width: 860px; margin: 0 auto }
.sbl-owner__photo { margin: 0; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, var(--color-yellow, #ffc845), var(--color-accent)); box-shadow: 0 0 0 8px #fff, 0 0 0 10px var(--color-gray, #dbe7df) }
.sbl-owner__photo img { width: 100%; height: 100%; object-fit: cover }
.sbl-owner__photo span { font: 800 3.4rem var(--typo-heading-font-family, inherit); color: var(--color-primary) }
.sbl-owner blockquote { margin: 0 0 14px; font: 500 1.2rem/1.55 var(--typo-heading-font-family, inherit); color: var(--color-primary) }
.sbl-owner__sig { font: italic 700 1.1rem var(--typo-heading-font-family, inherit); color: var(--color-secondary) }
.sbl-owner__sig small { display: block; font: 600 .85rem var(--typo-text-font-family, inherit); font-style: normal; color: var(--color-gray-dark, #5f6f66) }

/* Service Area · Towns */
.sbl-towns { list-style: none; margin: 0; padding: 0; columns: 3 170px; column-gap: 20px }
.sbl-towns li { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--color-gray, #dbe7df); break-inside: avoid; font-weight: 600 }
.sbl-towns svg { width: 16px; height: 16px; flex: none; color: var(--sb-accent-text, var(--color-accent)) }
.sbl-towns__area a { color: var(--color-primary); text-decoration: none }

/* Testimonials · Cards */
.sbl-reviews { display: grid; gap: 18px }
.sbl-reviews--score { grid-template-columns: minmax(220px, .9fr) 2.1fr; align-items: start }
.sbl-score { display: grid; gap: 10px; padding: 24px; border-radius: 14px; background: var(--color-primary); color: #fff }
.sbl-score__label { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75 }
.sbl-score__big { font: 800 3.6rem/1 var(--typo-heading-font-family, inherit) }
.sbl-score ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; font-variant-numeric: tabular-nums }
.sbl-score li { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.15) }
.sbl-stars { color: var(--color-yellow, #f2a516); letter-spacing: 2px }
.sbl-score .sbl-stars { color: var(--sb-accent-text, var(--color-accent)) }
.sbl-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px }
.sbl-quote { position: relative; margin: 0; display: grid; gap: 10px; align-content: start; padding: 22px; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 14px }
.sbl-quote blockquote { margin: 0; font-size: .97rem; color: var(--color-dark, #2b3a32) }
.sbl-quote figcaption { font-size: .85rem; color: var(--color-primary) }

@media (max-width: 767px) {
	.sbl-zig, .sbl-owner, .sbl-reviews--score { grid-template-columns: 1fr }
	.sbl-col:nth-child(even) .sbl-zig__art { order: 0 }
	.sbl-zig__art { min-height: 150px }
	.sbl-owner { justify-items: center; text-align: center }
}

/* ---------- pattern sections (designs/patterns.php) ---------- */
.sbl-section { padding-block: clamp(40px, 6vw, 72px) !important; padding-inline: 20px !important }
/* this classic theme has no theme.json content width: keep section content in the container width */
.sbl-section > *:not(.alignfull) { max-width: 1140px; margin-left: auto !important; margin-right: auto !important }
.sbl-section .wp-block-heading { margin-top: 0 }
.sbl-kicker { margin-bottom: 4px !important; font-size: .8rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-accent-text, var(--color-accent)) }
.sbl-section > .wp-block-heading { margin-bottom: 28px }

.sbl-hero { background: var(--color-primary); color: #fff }
.sbl-hero h1, .sbl-hero .wp-block-heading, .sbl-hero p { color: #fff }
.sbl-hero :is(.pc-instant, .powercart-wrap, .sb-quote-form) :is(p, h2, h3, .wp-block-heading) { color: inherit } /* forms on white cards */
.sbl-hero .is-style-lead { opacity: .85; max-width: 48ch }
.sbl-hero--split { background: linear-gradient(110deg, var(--color-primary) 0 58%, var(--color-secondary) 58% 100%) }
.sbl-hero--centered { position: relative; text-align: center; background: radial-gradient(circle at 88% 70%, rgba(255,255,255,.10) 0 160px, transparent 161px), linear-gradient(180deg, var(--color-secondary), var(--color-primary)) }
.sbl-hero--centered .is-style-lead { margin-inline: auto }
.sbl-checks { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-weight: 600 }
.sbl-checks li { position: relative; padding-left: 26px }
.sbl-checks li::before { content: "✓"; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 12px; line-height: 18px; text-align: center; font-weight: 800 }
.sbl-form-card { background: #fff; color: var(--color-dark, #23323d); border-radius: 12px; padding: 24px !important; box-shadow: 0 24px 50px rgba(0,0,0,.25) }
.sbl-form-card .wp-block-heading, .sbl-form-card p { color: var(--color-dark, #23323d) }
.sbl-sticker { position: absolute; right: max(24px, 6vw); top: 28px; width: 124px; height: 124px; margin: 0 !important; border-radius: 50%; display: grid; place-content: center; text-align: center; transform: rotate(-10deg); background: var(--color-yellow, #ffc845); color: #3a2a00 !important; font-size: 12px; font-weight: 800; line-height: 1.2; box-shadow: 0 10px 24px rgba(0,0,0,.2); border: 3px dashed rgba(58,42,0,.35) }
.sbl-sticker strong { display: block; font: 800 32px/1 var(--typo-heading-font-family, inherit) }
.sbl-promise-row { padding-top: 0 !important; margin-top: -60px; position: relative; z-index: 2; background: transparent }
.sbl-number { margin: 0; padding-left: 14px; border-left: 3px solid var(--color-accent); font-size: .85rem; color: var(--color-gray-dark, #5b6b77) }
.sbl-number strong { font: 800 1.9rem/1.1 var(--typo-heading-font-family, inherit); color: var(--color-primary) }
.sbl-steps { counter-reset: sbl-step }
.sbl-step { counter-increment: sbl-step; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 12px; padding: 22px }
.sbl-step::before { content: counter(sbl-step); display: block; font: 800 2.4rem/1 var(--typo-heading-font-family, inherit); color: var(--sb-accent-text, var(--color-accent)) }
.sbl-hours-card { background: var(--color-primary); color: #fff; border-radius: 16px; padding: 24px !important }
.sbl-hours-card .wp-block-heading, .sbl-hours-card p { color: #fff }
.sbl-cta .wp-block-heading { margin: 0; color: #1d1400 }
@media (max-width: 767px) {
	.sbl-hero--split { background: var(--color-primary) }
	.sbl-checks { grid-template-columns: 1fr }
	.sbl-sticker { position: static; margin: 0 auto 8px !important; width: 104px; height: 104px }
	.sbl-promise-row { margin-top: -40px }
}

/* Cards in a row share the tallest card's height (Featured, Coupons, People). */
.block-featureds-loop-standard > [class*="col-"],
.block-featureds-loop-icon-text > [class*="col-"],
.block-coupons-loop-standard > [class*="col-"],
[id^="people-"] > .row > [class*="col-"] { display: flex; flex-direction: column }
.block-featureds-loop-standard > [class*="col-"] > .type-featured,
.block-featureds-loop-icon-text > [class*="col-"] > .type-featured,
.block-coupons-loop-standard > [class*="col-"] > .type-coupon,
[id^="people-"] > .row > [class*="col-"] > .type-profile { flex: 1 1 auto; width: 100% }
.sb-quote-anchor { display: block; position: relative; top: -110px; visibility: hidden }

/* ---------- About / Contact page patterns (designs/patterns-pages.php) ---------- */
.sbl-page-hero { padding-block: clamp(48px, 8vw, 96px) !important }
.sbl-page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin-bottom: 12px }
.sbl-soft { background: var(--color-gray-light, #f2f5f7) }
.sbl-muted { color: var(--color-gray-dark, #5b6b77) }
.sbl-split { gap: clamp(24px, 5vw, 64px) !important }
.sbl-photo { margin: 0 }
.sbl-photo img { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 4 / 3 }
.sbl-photo img:not([src]), .sbl-photo img[src=""] { display: block; background: linear-gradient(135deg, var(--color-gray-light, #f2f5f7), var(--color-gray, #dfe5ea)) }
.sbl-signature { font-size: 1.05rem; color: var(--color-primary) }
/* equal-height cards (values, contact) */
.sbl-cards { gap: 24px !important; align-items: stretch !important }
.sbl-cards > .wp-block-column { display: flex; flex-direction: column }
.sbl-value { padding: 28px 26px !important; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.05) }
.sbl-value .wp-block-heading { margin: 0 0 8px; font-size: 1.3rem; color: var(--color-primary) }
.sbl-value p:last-child { margin-bottom: 0 }
.sbl-card-icon { width: 52px; height: 52px; margin: 0 0 14px !important; display: grid; place-items: center; border-radius: 14px; background: var(--color-gray-light, #f2f5f7); font-size: 26px; line-height: 1 }
.sbl-hero--centered + .sbl-cards-row { padding-top: 0 !important; margin-top: -64px; position: relative; z-index: 2; background: transparent }
.sbl-cards-row .sbl-value { text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,.10) }
.sbl-cards-row .sbl-card-icon { margin-inline: auto !important }
/* timeline */
.sbl-timeline { position: relative; max-width: 760px !important; margin-inline: auto !important; padding-left: 34px }
.sbl-timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--color-gray, #dfe5ea) }
.sbl-timeline__item { position: relative; padding-bottom: 26px }
.sbl-timeline__item::before { content: ""; position: absolute; left: -32px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px #fff }
.sbl-timeline__year { margin: 0 0 2px !important; font: 800 .85rem var(--typo-heading-font-family, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-accent-text, var(--color-accent)) }
.sbl-timeline__item .wp-block-heading { margin: 0 0 6px; font-size: 1.35rem; color: var(--color-primary) }
.sbl-mission { max-width: 820px; margin: 0 auto !important; padding: 0 !important; border: 0 !important; text-align: center }
.sbl-mission p { font: 600 clamp(1.4rem, 3vw, 2rem)/1.35 var(--typo-heading-font-family, inherit); color: var(--color-primary) }
.sbl-mission cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; color: var(--sb-accent-text, var(--color-accent)) }
/* contact */
.sbl-contact-split { gap: 32px !important; align-items: flex-start !important }
.sbl-contact-card { padding: 28px !important; border-radius: 16px; background: var(--color-primary); color: #fff }
/* labels: .sbl-contact-label (headings in pages made before 2026-10-20) */
.sbl-contact-card :is(.wp-block-heading, .sbl-contact-label) { margin: 18px 0 4px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,.65) }
.sbl-contact-card :is(.wp-block-heading, .sbl-contact-label):first-child { margin-top: 0 }
.sbl-contact-card p:not(.sbl-contact-label), .sbl-contact-card a { color: #fff !important }
.sbl-contact-card .sb-social { margin-top: 16px }
.sbl-big-phone { margin: 0 0 4px; font: 800 1.8rem/1.1 var(--typo-heading-font-family, inherit) }
.sbl-big-phone a { text-decoration: none !important }
.sbl-value .sbl-big-phone { font-size: 1.5rem }
.sbl-form-col .wpcf7, .sbl-form-narrow .wpcf7 { margin-top: 8px }
.sbl-form-narrow { max-width: 760px !important; margin-inline: auto !important }
.sbl-form-placeholder { padding: 40px 24px; border: 2px dashed var(--color-gray, #dfe5ea); border-radius: 14px; text-align: center; color: var(--color-gray-dark, #5b6b77) }
.sbl-contact-simple .wp-block-buttons { margin-top: 20px }
.sbl-contact-simple .wp-block-button__link { font-size: 1.1rem; padding: 14px 26px }
@media (max-width: 781px) {
	.sbl-hero--centered + .sbl-cards-row { margin-top: -40px }
	.sbl-timeline { padding-left: 28px }
}
.sbl-card-icon svg { width: 28px; height: 28px; color: var(--sb-accent-text, var(--color-accent)) }
.sbl-card-icon svg path { fill: currentColor }

/* ---------- Breadcrumbs bar (__init/functions/breadcrumbs_bar.php) ---------- */
.sb-crumbs-bar { width: 100vw; position: relative; left: 50%; margin-left: -50vw; font-size: 14px }
.sb-crumbs-bar__inner { max-width: 1140px; margin: 0 auto; padding: 10px 20px }
.sb-crumbs-bar--bar { background: var(--color-gray-light, #f2f5f7); border-bottom: 1px solid var(--color-gray, #e3e7ea) }
.sb-crumbs-bar--plain .sb-crumbs-bar__inner { padding-top: 16px; padding-bottom: 4px }
.sb-crumbs-bar nav, .sb-crumbs-bar .breadcrumb, .sb-crumbs-bar #breadcrumbs { margin: 0 !important; padding: 0 !important; background: none !important }
.sb-crumbs-bar .breadcrumb { display: flex; flex-wrap: wrap; list-style: none }
.sb-crumbs-bar .breadcrumb-item + .breadcrumb-item::before { content: "›"; padding: 0 8px; color: var(--color-gray-dark, #8a99a5) }
.sb-crumbs-bar a { color: var(--color-primary) !important; text-decoration: none !important }
.sb-crumbs-bar a:hover { text-decoration: underline !important }
.sb-crumbs-bar .active, .sb-crumbs-bar .breadcrumb-item.active { color: var(--color-gray-dark, #5b6b77) }
.sb-crumbs-bar i.fas { display: none } /* Font Awesome isn't loaded */
/* the bar replaces the small trail inside design pages */
.sb-has-crumbs-bar .sbd-crumbs { display: none }
/* thank-you pages */
.sbl-thanks { padding-block: clamp(48px, 8vw, 96px) !important }
.sbl-done { width: 76px; height: 76px; margin: 0 auto 18px !important; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 10px var(--color-gray-light, #f2f5f7) }
.sbl-done svg { width: 40px; height: 40px; color: #fff }
.sbl-done svg path { fill: #fff }
.sbl-step-no { width: 36px; height: 36px; margin: 0 0 12px !important; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800 }

/* Accent as text on light backgrounds: a darker shade of the accent so small
   text stays readable (amber/orange on white is ~2:1). On dark sections the
   accent itself is used. */
:root { --sb-accent-text: color-mix(in srgb, var(--color-accent) 62%, #000) }
/* text on accent-colored buttons: black or white, whichever reads better */
:root { --sb-on-accent: oklch(from var(--color-accent) clamp(0, (0.7 - l) * 1000, 1) 0 0) }
.sbl-hero, .sbd-hero, .sbd-post__hero, .sbd-band, .sbl-contact-card, .sbl-hours-card, .has-primary-background-color, .has-secondary-background-color, .has-dark-background-color, .bg-dark, .bg-primary, .bg-secondary, footer { --sb-accent-text: var(--color-accent) }
/* white cards inside dark sections go back to the darker accent text */
:is(.sbl-ticket, .sbl-tile, .sbl-zig__txt, .sbl-quote, .sbl-value, .sbl-step, .sbl-form-card, .sbd-card, .sbd-tile, .sbd-side__card, .service-div, .type-coupon, .type-featured:not([class*="bg-"]), .type-profile, .sbl-promise) { --sb-accent-text: color-mix(in srgb, var(--color-accent) 62%, #000) }

/* ---------- People (templates/People/parts) ---------- */
.sb-person-initials { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, var(--color-yellow, #ffc845), var(--color-accent)); color: var(--color-primary); font: 800 1.6rem/1 var(--typo-heading-font-family, inherit) }
.sb-person-links { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 8px; margin-top: 12px }
.profile-footer .sb-person-links, .text-center .sb-person-links { justify-content: center }
.sb-person-links a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-gray-light, #f2f5f7); color: var(--color-primary) !important; transition: background .15s, color .15s }
.sb-person-links a:hover { background: var(--color-primary); color: #fff !important }
.sb-person-links svg { width: 16px; height: 16px }
.sb-person-links svg path { fill: currentColor }
.profile-title a { color: inherit !important; text-decoration: none !important }
.profile-title a:hover { text-decoration: underline !important }
/* compact */
.sbl-person-line { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 14px; color: var(--color-dark, #23323d) !important; text-decoration: none !important; transition: box-shadow .15s, transform .15s }
a.sbl-person-line:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); transform: translateY(-2px) }
.sbl-person-line__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden }
.sbl-person-line__photo img { width: 100%; height: 100%; object-fit: cover }
.sbl-person-line__photo .sb-person-initials { font-size: 1.2rem }
.sbl-person-line__text { display: grid; gap: 2px }
.sbl-person-line__text b { font: 700 1.1rem/1.2 var(--typo-heading-font-family, inherit); color: var(--color-primary) }
.sbl-person-line__text small { color: var(--color-gray-dark, #5b6b77); font-size: .88rem }
/* rows with story */
.sbl-person-row { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding: 12px 0 28px }
.sbl-col:nth-child(even) > .sbl-person-row { grid-template-columns: 1fr minmax(220px, 34%) }
.sbl-col:nth-child(even) > .sbl-person-row .sbl-person-row__photo { order: 2 }
.sbl-person-row__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--color-gray-light, #f2f5f7) }
.sbl-person-row__photo img { width: 100%; height: 100%; object-fit: cover }
.sbl-person-row__photo .sb-person-initials { font-size: 3.5rem }
.sbl-person-row h3 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--color-primary) }
.sbl-person-row__bio { color: var(--color-gray-dark, #5b6b77); font-size: 1.05rem; line-height: 1.7 }
.sbl-person-row .sb-person-links { justify-content: flex-start }
.sbl-owner .sb-person-links { justify-content: flex-start; margin: 4px 0 10px }
.sbl-owner .sbl-more { display: inline-block; margin-top: 10px }
@media (max-width: 767px) {
	.sbl-person-row, .sbl-col:nth-child(even) > .sbl-person-row { grid-template-columns: 1fr }
	.sbl-col:nth-child(even) > .sbl-person-row .sbl-person-row__photo { order: 0 }
	.sbl-person-row__photo { max-width: 320px }
}
.sbl-col { position: relative }
.sb-editor-note { padding: 10px 14px; border-left: 4px solid #3858e9; background: #f0f4ff; color: #1e1e1e; font-size: 14px }

/* ---------- Featured "Slider" / "Video slider" (assets/sb-carousel.js) ---------- */
.sbl-carousel { position: relative }
.sbl-carousel__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px }
.sbl-carousel__track::-webkit-scrollbar { display: none }
.sbl-carousel__track > * { flex: 0 0 100%; scroll-snap-align: start }
.sbl-carousel--video .sbl-carousel__track > * { flex-basis: calc(50% - 10px) }
.sbl-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px }
.sbl-carousel__arrow { width: 42px; height: 42px; border: 1px solid var(--color-gray, #dfe5ea); border-radius: 50%; background: #fff; color: var(--color-primary); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s }
.sbl-carousel__arrow:hover:not(:disabled) { background: var(--color-primary); color: #fff }
.sbl-carousel__arrow:disabled { opacity: .35; cursor: default }
.sbl-carousel__dots { display: flex; gap: 8px }
.sbl-carousel__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--color-gray, #dfe5ea); cursor: pointer }
.sbl-carousel__dots button.is-active { width: 26px; border-radius: 6px; background: var(--color-accent) }
/* slide */
.sbl-slide { display: grid; grid-template-columns: 1fr; min-height: 300px; overflow: hidden; background: var(--color-primary); color: #fff; border-radius: 18px }
.sbl-slide.has-image { grid-template-columns: 1.1fr 1fr }
.sbl-slide__image { margin: 0; min-height: 300px }
.sbl-slide__image img { width: 100%; height: 100%; object-fit: cover }
.sbl-slide__text { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(28px, 5vw, 56px) }
.sbl-slide h3 { margin: 0; color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1 }
.sbl-slide__body, .sbl-slide__body p { color: rgba(255,255,255,.85); font-size: 1.05rem }
.sbl-slide__body > :last-child { margin-bottom: 0 }
.sbl-slide__btn { align-self: flex-start; margin-top: 6px }
/* video slide */
.sbl-vslide h3 { margin: 14px 0 6px; font-size: 1.25rem; color: var(--color-primary) }
.sbl-vslide__body { color: var(--color-gray-dark, #5b6b77) }
.sbl-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0b1720 center / cover no-repeat }
.sbl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.sbl-video__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-accent); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: pointer; transition: transform .15s }
.sbl-video__play:hover { transform: scale(1.08) }
.sbl-video__play svg { width: 34px; height: 34px; margin-left: 4px }
.sbl-video--empty { display: grid; place-items: center; padding: 20px; color: #cbd5df; text-align: center; font-size: 14px }
@media (max-width: 767px) {
	.sbl-slide.has-image { grid-template-columns: 1fr }
	.sbl-slide__image { min-height: 200px }
	.sbl-carousel--video .sbl-carousel__track > * { flex-basis: 88% }
}
/* FAQ layout "Cards": two columns, answers open */
.sbl-faq-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.sbl-faq-card { position: relative; padding: 22px 22px 18px 70px; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 14px }
.sbl-faq-card::before { content: "Q"; position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--color-primary); color: #fff; font: 800 1rem/1 var(--typo-heading-font-family, inherit) }
.sbl-faq-card h3 { margin: 4px 0 8px; font-size: 1.12rem; line-height: 1.3; color: var(--color-primary); text-transform: none }
.sbl-faq-card__answer { color: var(--color-gray-dark, #5b6b77); font-size: .97rem; line-height: 1.6 }
.sbl-faq-card__answer > :last-child { margin-bottom: 0 }
@media (max-width: 767px) { .sbl-faq-cards { grid-template-columns: 1fr } }

/* ---------- Service Area "Standard" (templates/ServiceArea/parts/loop-standard.php) ---------- */
.sbl-area { --sbl-map: 42% }
.sbl-area--map-small { --sbl-map: 33% } .sbl-area--map-half { --sbl-map: 50% } .sbl-area--map-large { --sbl-map: 62% }
.sbl-area__card { display: grid; grid-template-columns: var(--sbl-map) 1fr; overflow: hidden; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 14px }
.sbl-area__card--no-map { grid-template-columns: 1fr }
.sbl-area__map { min-height: 320px; background: var(--color-gray-light, #f2f5f7) }
.sbl-area__map iframe, .sbl-area__map img { display: block; width: 100% !important; height: 100% !important; min-height: 320px; border: 0 }
.sbl-area__body { padding: 24px 28px }
.sbl-area__title { margin: 0 0 14px; font-size: 1.4rem }
.sbl-area__title a { color: var(--color-primary) !important; text-decoration: none !important }
.sbl-area__towns { margin: 0; padding: 0; list-style: none; columns: var(--sbl-cols, 2); column-gap: 24px }
.sbl-area__towns li { break-inside: avoid; position: relative; padding: 6px 0 6px 20px; border-bottom: 1px dashed var(--color-gray, #e3e7ea) }
.sbl-area__towns li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent) }
.sbl-area__zips { margin-top: 16px; text-align: center }
.sbl-area__zip-toggle .sbl-area__zip-hide, .sbl-area__zip-toggle[aria-expanded="true"] .sbl-area__zip-show { display: none }
.sbl-area__zip-toggle[aria-expanded="true"] .sbl-area__zip-hide { display: inline }
.sbl-area__zip-list { display: grid; grid-template-columns: repeat(var(--sbl-zip-cols, 4), minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 18px; list-style: none; text-align: left; background: var(--color-gray-light, #f2f5f7); border-radius: 14px }
.sbl-area__zip-list li { position: relative; padding: 9px 12px 9px 30px; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 8px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em }
.sbl-area__zip-list li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--color-accent) }
@media (max-width: 767px) {
	.sbl-area__card { grid-template-columns: 1fr }
	.sbl-area__towns { columns: 1 }
	.sbl-area__zip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px }
}

/* ---------- Featured "Icon & Text" ---------- */
.block-featureds-loop-icon-text > .sbl-col { display: flex; margin-bottom: 24px }
.sbl-icon-card { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 30px 26px 26px !important; text-align: center; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 16px; transition: box-shadow .15s, transform .15s }
.sbl-icon-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,.08); transform: translateY(-2px) }
.sbl-icon-card__icon { margin: 0 0 16px !important; padding: 0 !important; border: 0 !important }
.block-featureds .sbl-icon-card__icon svg { width: 68px !important; height: 68px !important; padding: 15px !important; margin: 0 !important }
.sbl-icon-card__title { margin: 0 0 8px; font-size: 1.25rem; color: var(--color-primary) }
.sbl-icon-card__text { color: var(--color-gray-dark, #5b6b77); font-size: .98rem; line-height: 1.6 }
.sbl-icon-card__text > :last-child, .sbl-icon-card__text p:last-child { margin-bottom: 0 }
.sbl-icon-card .sbl-more { margin-top: auto; padding-top: 12px }
/* the Original hatched pattern keeps its look */
.sbl-icon-card.is-style-column-pattern3 { border-color: transparent }
.sbl-icon-card { margin: 0 !important }

/* ---------- Block "County towns" (templates/ServiceArea/block/block-area-towns.php) ---------- */
.sbl-county { display: grid; gap: 0; margin-bottom: 24px; overflow: hidden; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 16px }
.sbl-county.has-map { grid-template-columns: minmax(260px, 38%) 1fr }
.sbl-county__map { min-height: 320px; background: var(--color-gray-light, #f2f5f7) }
.sbl-county__map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0 }
.sbl-county__body { padding: 24px 28px }
.sbl-county__title { margin: 0; font-size: 1.4rem; color: var(--color-primary) }
.sbl-county__meta { margin: 4px 0 16px; font-size: 14px; color: var(--color-gray-dark, #5b6b77) }
.sbl-county__towns { margin: 0; padding: 0; list-style: none; columns: var(--sbl-cols, 3); column-gap: 20px }
.sbl-county__towns li { break-inside: avoid; padding: 5px 0 5px 18px; position: relative; font-size: .97rem; color: var(--color-dark, #23323d) }
.sbl-county__towns li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-gray, #cfd8df) }
.sbl-county__towns li.is-linked::before { background: var(--color-accent) }
.sbl-county__towns li.is-linked a { font-weight: 700; color: var(--color-primary) !important; text-decoration: none !important; border-bottom: 2px solid color-mix(in srgb, var(--color-accent) 50%, transparent) }
.sbl-county__towns li.is-linked a:hover { border-bottom-color: var(--color-accent) }
@media (max-width: 860px) { .sbl-county.has-map { grid-template-columns: 1fr } .sbl-county__map, .sbl-county__map iframe { min-height: 240px } }
@media (max-width: 560px) { .sbl-county__towns { columns: 2 } .sbl-county__body { padding: 20px } }

/* Free Estimate form (quote form on sites without PowerCart) and the Contact page form
   (functions/quote_form.php). Fields keep the theme's form style; the theme sets input
   backgrounds with !important. */
.sb-quote-form, .sb-contact-form { background: #fafafa; color: #222; border-radius: 8px; padding: 28px 24px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.12) }
.sb-contact-form { max-width: 820px; margin: clamp(28px, 4vw, 48px) auto }
:is(.sb-quote-form, .sb-contact-form) .wpcf7-form p { margin: 0 0 12px }
:is(.sb-quote-form, .sb-contact-form) .wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) { width: 100% }
:is(.sb-quote-form, .sb-contact-form) .wpcf7-form input.wpcf7-submit { width: 100%; padding: 13px 20px; border: 0; border-radius: 6px; background: var(--color-accent, #f5a623) !important; color: var(--sb-on-accent, #fff); font-weight: 700; cursor: pointer }
:is(.sb-quote-form, .sb-contact-form) .wpcf7-form input.wpcf7-submit:hover { filter: brightness(.95) }
:is(.sb-quote-form, .sb-contact-form) .wpcf7-spinner { display: block; margin: 8px auto 0 }

/* ---------- Block "ZIP check" (designs/blocks/zip-check) ---------- */
.sb-zip { position: relative; display: flex; flex-wrap: wrap; gap: 6px; max-width: 470px; margin: 0 0 6px; padding: 6px; background: #fff; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.10) }
.sb-zip input { flex: 1 1 140px; min-width: 0; margin: 0 !important; padding: 10px 16px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 16px; color: var(--color-dark, #23323d) }
.sb-zip input:focus { outline: none }
.sb-zip:focus-within { box-shadow: 0 0 0 2px var(--color-primary), 0 10px 30px rgba(0,0,0,.10) }
.sb-zip button { flex: none; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--color-primary); color: #fff; font-weight: 700; cursor: pointer }
.sb-zip button:hover { filter: brightness(1.08) }
.sb-zip__out { position: absolute; left: 18px; top: calc(100% + 8px); margin: 0 !important; font-size: 14px; font-weight: 600; color: var(--color-primary) }
.sb-zip.is-no .sb-zip__out { color: #b3412e }
.sb-zip:has(.sb-zip__out:not(:empty)) { margin-bottom: 36px }

/* ---------- Services layout "Photo cards" (templates/Service/parts/loop-photos.php) ---------- */
.sbl-photo-card { display: grid; align-content: start; gap: 8px; height: 100%; color: var(--color-dark, #23323d) !important; text-decoration: none !important }
.sbl-photo-card__img { display: block; width: 100% !important; height: auto !important; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 !important; border-radius: 18px; transition: transform .2s }
.sbl-photo-card:hover .sbl-photo-card__img { transform: translateY(-3px) }
.sbl-photo-card__icon { display: grid; place-items: center; background: var(--color-gray-light, #f2f5f7) }
.sbl-photo-card__icon svg { width: 72px; height: 72px; margin: 0 !important } .sbl-photo-card__icon svg path { fill: var(--color-primary) }
.sbl-photo-card b { font-family: var(--typo-heading-font-family, inherit); font-size: 1.1rem; line-height: 1.2; color: var(--color-primary) }
.sbl-photo-card span { margin-top: -4px; font-size: 14px; color: var(--color-gray-dark, #5b6b77) }
.block-services .sbl-col:has(.sbl-photo-card) { margin-bottom: 24px }
.row:has(> .sbl-col > .sbl-photo-card) { justify-content: center }

/* ---------- Porch sections (designs/patterns.php: porch-hero, visit-steps, plans, guarantee, quote-card) ---------- */
.sbl-hero--porch { background: var(--color-gray-light, #f4f1ea); color: var(--color-dark, #23323d) }
.sbl-hero--porch h1, .sbl-hero--porch .wp-block-heading { color: var(--color-dark, #23323d) }
.sbl-hero--porch p { color: var(--color-gray-dark, #5b6b77) }
.sbl-hero--porch h1 em { font-style: normal; color: var(--color-primary); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--color-accent) 30%, transparent) 62%) }
.sbl-hero--porch .is-style-lead { opacity: 1; font-size: 1.12rem }
.sbl-porch-hero { gap: clamp(24px, 5vw, 64px) !important }
.sbl-trustline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px !important; font-size: 14px }
.sbl-trustline strong { color: var(--color-dark, #23323d) }
.sbl-porch-art { position: relative }
.sbl-porch-photo { margin: 0 !important }
.sbl-porch-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 28px }
.sbl-porch-photo--blob img { border-radius: 48% 52% 44% 56% / 52% 46% 54% 48% }
.sbl-porch-tag { position: absolute; margin: 0 !important; max-width: 230px; padding: 12px 16px; background: #fff; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.14); font-size: 14px; line-height: 1.35; color: var(--color-gray-dark, #5b6b77) !important }
.sbl-porch-tag strong { display: block; font-family: var(--typo-heading-font-family, inherit); font-size: 1.02rem; color: var(--color-dark, #23323d) }
.sbl-porch-tag--1 { left: -4%; bottom: 12% } .sbl-porch-tag--2 { right: -2%; top: 8% }
.sbl-sub { max-width: 60ch; margin: -16px auto 30px !important; color: var(--color-gray-dark, #5b6b77) }

.sbl-visit { counter-reset: sbl-visit; gap: 28px !important }
.sbl-visit__step { counter-increment: sbl-visit }
.sbl-visit__step::before { content: counter(sbl-visit); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--color-primary); color: #fff; font: 800 1.1rem/1 var(--typo-heading-font-family, inherit) }
.sbl-visit__step h3 { margin: 0 0 6px; font-size: 1.2rem }
.sbl-visit__step p { margin: 0; color: var(--color-gray-dark, #5b6b77) }

.sbl-plans { align-items: start !important; gap: 18px !important }
.sbl-plan { display: grid; gap: 12px; padding: 26px; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: 24px }
.sbl-plan > * { margin: 0 !important }
.sbl-plan h3 { font-size: 1.25rem }
.sbl-plan__price { font-size: .95rem; color: var(--color-gray-dark, #5b6b77) }
.sbl-plan__price strong { font: 800 2.2rem/1 var(--typo-heading-font-family, inherit); letter-spacing: -.02em; color: var(--color-dark, #23323d) }
.sbl-plan .sbl-checks { grid-template-columns: 1fr; font-weight: 500 }
.sbl-plan .wp-block-button, .sbl-plan .wp-block-button__link { width: 100% }
.sbl-plan--pick { background: var(--color-primary); border-color: transparent; color: #fff; transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,.14) }
.sbl-plan--pick h3, .sbl-plan--pick .sbl-plan__price strong { color: #fff }
.sbl-plan--pick .sbl-plan__price, .sbl-plan--pick .sbl-checks { color: rgba(255,255,255,.85) }
.sbl-plan--pick .sbl-checks li::before { background: #fff; color: var(--color-primary) }
.sbl-plan--pick .wp-block-button__link { background: #fff !important; color: var(--color-primary) !important }
.sbl-plan__flag { justify-self: start; padding: 3px 12px; border-radius: 999px; background: var(--color-accent); color: var(--color-dark, #23323d); font-size: 13px; font-weight: 700 }

.sbl-guarantee { gap: 24px 32px !important; justify-content: space-between; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: color-mix(in srgb, var(--color-primary) 10%, #fff) }
.sbl-guarantee::before { content: ""; flex: none; width: 72px; height: 72px; background: var(--color-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath d='M36 4 62 14v20c0 16-11 28-26 34C21 62 10 50 10 34V14z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath d='M36 4 62 14v20c0 16-11 28-26 34C21 62 10 50 10 34V14z'/%3E%3C/svg%3E") center / contain no-repeat }
.sbl-guarantee__text { flex: 1 1 320px }
.sbl-guarantee__text > * { margin: 0 !important } .sbl-guarantee__text h2 { margin-bottom: 6px !important }

.sbl-quote-split { gap: clamp(24px, 4vw, 56px) !important }
.sbl-big-phone a { font-weight: 800; white-space: nowrap }

@media (max-width: 781px) {
	.sbl-porch-art { max-width: 460px; margin-inline: auto }
	.sbl-porch-tag--1 { left: 0 } .sbl-porch-tag--2 { right: 0 }
	.sbl-plan--pick { transform: none }
}
#sb-quote, .sb-quote-anchor { scroll-margin-top: 110px }

/* ---------- Dispatch sections (designs/patterns.php: dispatch-hero, compare-plans, tech-card, zip-areas) ---------- */
.sbl-hero--dispatch { background: var(--color-primary) }
.sbl-hero--dispatch h1 { text-wrap: balance }
.sbl-hero--dispatch .sbl-hi { padding: 0; margin: 0; background: none; color: var(--color-accent) }
.sbl-dispatch-hero { gap: clamp(24px, 4vw, 56px) !important }
.sbl-proof { gap: 12px !important; margin-top: 8px }
.sbl-proof p { margin: 0; padding-top: 10px; border-top: 2px solid rgba(255,255,255,.25); font-size: 13px; opacity: .9 }
.sbl-proof strong { display: block; font: 800 1.6rem/1.1 var(--typo-heading-font-family, inherit) }
.sbl-hero--dispatch :is(.sb-quote-form, .pc-instant) { box-shadow: 0 20px 40px rgba(0,0,0,.25) }

.sbl-compare { margin: 0 0 20px; overflow-x: auto; border: 1.5px solid var(--color-gray, #d6e3e6); border-radius: 12px }
.sbl-compare table { width: 100%; min-width: 600px; margin: 0; border-collapse: collapse; border: 0 }
.sbl-compare :is(th, td) { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--color-gray, #d6e3e6); text-align: left }
.sbl-compare tbody tr:last-child td { border-bottom: 0 }
.sbl-compare thead th { background: var(--color-gray-light, #e6f0f2); font-size: 1.05rem; color: var(--color-dark, #10242a) }
.sbl-compare thead th:nth-child(3) { background: var(--color-primary); color: #fff }
.sbl-compare td:nth-child(3) { background: color-mix(in srgb, var(--color-primary) 5%, #fff) }
.sbl-compare td:first-child { font-weight: 600; color: var(--color-gray-dark, #557078) }
.sbl-compare tbody tr:first-child td:not(:first-child) { font-weight: 700; font-variant-numeric: tabular-nums }
.sbl-compare td strong { color: #2a9d5c }
.sbl-compare figcaption { margin: 0; padding: 10px 16px; font-size: 13px; color: var(--color-gray-dark, #557078); text-align: left }

.sbl-tech { gap: 28px !important; padding: clamp(18px, 3vw, 28px); border-radius: 16px; background: var(--color-gray-light, #e6f0f2) }
.sbl-tech > .wp-block-column > * { margin-top: 0; margin-bottom: 6px }
.sbl-tech__photo { margin: 0 !important } .sbl-tech__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px }
.sbl-tech h3 { font-size: 1.5rem }
.sbl-tech__lic { font-size: 13px; color: var(--color-gray-dark, #557078) }
.sbl-tech .sbl-checks { margin-top: 12px !important; font-weight: 500 }
.sbl-zip-areas { gap: 28px !important }
.sbl-zip-areas .sb-zip { box-shadow: none; border: 2px solid var(--color-dark, #10242a); border-radius: 12px }
.sbl-zip-areas .sb-zip button { border-radius: 8px; background: var(--color-dark, #10242a) }
.sbl-compare thead { border-bottom: 0 }
/* towns as chips next to the ZIP check */
.sbl-zip-areas .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 }
.sbl-zip-areas .sbl-col { flex: 0 1 auto; width: auto; max-width: 100%; padding: 0 }
.sbl-zip-areas .sbl-towns { display: flex; flex-wrap: wrap; gap: 8px; columns: auto }
.sbl-zip-areas .sbl-towns li { padding: 6px 12px; border: 1.5px solid var(--color-gray, #d6e3e6); border-radius: 999px; background: #fff; font-size: 14px }
.sbl-zip-areas .sbl-towns__area { border-color: var(--color-primary) !important }

/* Problem picker block: chips + button (any design) */
.sb-picker { display: grid; gap: 12px; margin-block: 8px 16px }
.sb-picker__label { margin: 0 !important; font-weight: 700 }
.sb-picker__chips { display: flex; flex-wrap: wrap; gap: 8px }
.sb-picker__chips button { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--color-gray, #d6e3e6); border-radius: 999px; background: #fff; color: var(--color-dark, #10242a); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s }
.sb-picker__chips button:hover { border-color: var(--color-primary) }
.sb-picker__chips button[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff }
.sb-picker__chips button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }
.sb-picker__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px }
.sb-picker__actions .wp-element-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--sbd-button-radius, 8px); font-weight: 700; text-decoration: none !important }
.sb-picker__go { background: var(--color-primary); color: #fff !important }
.sb-picker__go::after { content: "→"; margin-left: 8px }
.sb-picker__call { background: transparent; color: var(--color-dark, #10242a) !important; box-shadow: inset 0 0 0 1.5px currentColor }
.sbl-hero:not(.sbl-hero--light) .sb-picker__call { color: #fff !important }
.sb-picker__empty, .sb-season__empty { padding: 12px 16px; border: 1px dashed var(--color-gray, #d6e3e6); border-radius: 8px; font-size: 14px }

/* Season calendar block */
.sb-season { padding: clamp(14px, 2.5vw, 22px); background: #fff; border: 1px solid var(--color-gray, #d6e3e6); border-radius: var(--sbd-radius, 12px) }
.sb-season__scroll { position: relative; overflow-x: auto } /* keeps the absolute screen-reader labels inside the scroller */
.sb-season table { width: 100%; min-width: 620px; margin: 0; border: 0; border-collapse: separate; border-spacing: 5px; table-layout: fixed }
.sb-season :is(th, td) { padding: 0; border: 0; background: none }
.sb-season thead td:first-child, .sb-season tbody th { width: 130px }
.sb-season thead th { padding: 4px 0; border-radius: 6px; font-size: 13px; text-align: center; color: var(--color-gray-dark, #557078) }
.sb-season thead th.is-now { background: var(--color-primary); color: #fff }
.sb-season abbr { text-decoration: none }
.sb-season tbody th { padding-right: 8px; text-align: left; font-weight: 600; font-size: 15px }
.sb-season tbody th a { color: inherit; text-decoration: none } .sb-season tbody th a:hover { text-decoration: underline }
.sb-season tbody td { height: 34px; border: 1px solid var(--color-gray, #d6e3e6); border-radius: 8px }
.sb-season td.is-active { background: color-mix(in srgb, var(--color-accent) 55%, #fff); border-color: transparent }
.sb-season td.is-peak { background: var(--color-primary); border-color: transparent }
.sb-season td.is-now { box-shadow: 0 0 0 2px var(--color-dark, #10242a) }
.sb-season__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0 !important; font-size: 14px; color: var(--color-gray-dark, #557078) }
.sb-season__legend span::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; border-radius: 4px }
.sb-season__legend .is-active::before { background: color-mix(in srgb, var(--color-accent) 55%, #fff) }
.sb-season__legend .is-peak::before { background: var(--color-primary) }
.sb-season__legend .is-now::before { box-shadow: inset 0 0 0 2px var(--color-dark, #10242a) }

/* Perimeter sections (any design) */
.sbl-hero--light { background: linear-gradient(180deg, #fff 0 72%, var(--color-gray-light, #eef4ef) 72%); color: var(--color-dark, #10242a) }
.sbl-hero--light h1, .sbl-hero--light .wp-block-heading { color: var(--color-dark, #10242a) }
.sbl-hero--light p { color: var(--color-gray-dark, #557078) }
.sbl-hero--light .is-style-lead { opacity: 1; font-size: 1.15rem }
.sbl-hero--light .sbl-trustline { color: var(--color-secondary) ; font-weight: 600 }
.sbl-perimeter-art { position: relative }
.sbl-perimeter-art .wp-block-image { margin: 0 } .sbl-perimeter-art img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; border-radius: 28px }
.sbl-badge-card { position: absolute; left: -12px; bottom: 28px; max-width: 300px; margin: 0 !important; padding: 14px 18px 14px 64px !important; border-radius: 16px; background: var(--color-primary); color: #fff !important; font-size: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.22) }
.sbl-badge-card::before { content: ""; position: absolute; left: 16px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 2px solid var(--color-accent); background: radial-gradient(circle, var(--color-accent) 0 5px, transparent 6px) }
.sbl-badge-card strong { display: block; font-size: 15px }
.sbl-trust-cards { gap: 12px !important }
.sbl-trust-cards > .wp-block-column { display: grid; align-content: center; padding: 16px 20px; background: #fff; border: 1px solid var(--color-gray, #d6e3e6); border-radius: var(--sbd-radius, 12px) }
.sbl-trust-cards p { margin: 0 !important; font-size: 14px; color: var(--color-gray-dark, #557078) }
.sbl-trust-cards p strong { display: block; font-size: 16px; color: var(--color-dark, #10242a) }
.sbl-trust-row { padding-top: 0 !important }
.sbl-zones { background: var(--color-primary); color: rgba(255,255,255,.85) }
.sbl-zones .wp-block-heading { color: #fff }
.sbl-zones__list { list-style: none; padding: 0 !important; margin: 20px 0 0 !important; display: grid; gap: 12px; counter-reset: zone }
.sbl-zones__list li { position: relative; padding: 16px 18px 16px 64px; border-radius: 14px; background: rgba(255,255,255,.07); counter-increment: zone }
.sbl-zones__list li::before { content: counter(zone); position: absolute; left: 16px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark, #10242a); font-weight: 800; display: grid; place-items: center }
.sbl-zones__list strong { color: #fff }
.sbl-zones__art svg { display: block; width: 100%; max-width: 440px; margin: 0 auto }
@media (max-width: 781px) { .sbl-badge-card { left: 12px } }
.sbl-zones__art circle { fill: color-mix(in srgb, var(--color-accent) 10%, transparent); stroke: var(--color-accent); stroke-width: 3 }
.sbl-zones__art .sbl-zones__yard { fill: none; stroke-width: 2; stroke-dasharray: 6 8; stroke-opacity: .4 }
.sbl-zones__art .sbl-zones__in { fill: color-mix(in srgb, var(--color-accent) 16%, transparent); stroke-width: 2; stroke-opacity: .7 }
.sbl-zones__house { fill: #fff } .sbl-zones__door { fill: var(--color-primary) }
.sbl-zones__art text { fill: #fff; font: 700 14px var(--typo-text-font-family, sans-serif); letter-spacing: 2px; text-anchor: middle }
.sbl-zones__art text:first-of-type { fill: var(--color-accent) }
.sbl-hero--light .sb-picker__label { color: var(--color-dark, #10242a) }
.sb-picker__call { background: transparent !important }
.sbl-hero--light + .sbl-trust-row { margin-top: 0 !important }
.sbl-hero--light { padding-bottom: 28px !important }

/* Service Area · Town chips (names only) */
.block-service-area-loop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 }
.sbl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--color-gray, #d6e3e6); border-radius: 999px; background: #fff; color: var(--color-dark, #10242a) !important; font-size: 14px; font-weight: 600; text-decoration: none !important }
.sbl-chip:hover { border-color: var(--color-primary) }
.sbl-chip svg { width: 15px; height: 15px; flex: none; color: var(--sb-accent-text, var(--color-accent)) }
.sbl-more-link { margin: 14px 0 0 !important; font-weight: 700 }
.sbl-more-link a { color: var(--color-primary) }

/* Pricing · Plan cards (same look as the Plans pattern) */
.block-pricing-table-loop-plans { align-items: flex-start; row-gap: 18px; padding-top: 12px }
.block-pricing-table-loop-plans .sbl-plan { height: 100%; text-align: left }
.block-pricing-table-loop-plans .sbl-plan > * { margin: 0 }
.sbl-plan__sub { font-size: .95rem; color: var(--color-gray-dark, #5b6b77) }
.sbl-plan--pick .sbl-plan__sub { color: rgba(255,255,255,.8) }
.block-pricing-table-loop-plans .wp-block-buttons { margin-top: auto }
.sbl-plan__note { display: block; font-size: 13px; color: var(--color-gray-dark, #5b6b77) }
.sbl-plan--pick .sbl-plan__note { color: rgba(255,255,255,.75) }

/* Pricing · Standard and Compact (templates/Pricing/parts). Colors come from the
   palette, radius and shadows from the design tokens when a design is active. */
.block-pricing-table-loop-standard, .block-pricing-table-loop-compact { row-gap: 18px; justify-content: center }
.sb-price { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; margin: 0; overflow: hidden; text-align: center; background: var(--sbd-card-bg, #fff); border: var(--sbd-card-border, 1px solid var(--color-gray, #e3e7ea)); border-radius: var(--sbd-radius, 12px); color: var(--color-dark, #23323d) }
.sb-price > * { margin: 0 }
.sb-price__head { display: grid; gap: 4px; padding: 22px 20px 18px; background: var(--color-primary); color: #fff }
.sb-price__head > * { margin: 0 }
.sb-price__title { font-size: 1.35rem; color: inherit !important; text-transform: var(--sbd-heading-transform, none) }
.sb-price__sub { font-size: .92rem; opacity: .85 }
.sb-price__flag { justify-self: center; align-self: center; padding: 3px 12px; border-radius: 999px; background: var(--color-accent); color: var(--sb-on-accent, #fff); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.sb-price__image img { width: auto; max-height: 80px }
.sb-price__price { padding: 0 20px; font-size: .95rem; color: var(--color-gray-dark, #5b6b77) }
.sb-price__price strong { font: 800 2.6rem/1 var(--typo-heading-font-family, inherit); letter-spacing: -.02em; color: var(--color-dark, #23323d) }
.sb-price__desc { padding: 0 20px; font-size: .95rem; color: var(--color-gray-dark, #5b6b77) }
.sb-price__desc > :last-child { margin-bottom: 0 }
.sb-price__list { margin: 0 20px !important; padding: 0 !important; list-style: none; text-align: left }
.sb-price__list li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--color-gray, #e3e7ea); list-style: none }
.sb-price__list li:last-child { border-bottom: 0 }
.sb-price__list li.is-yes::before, .sb-price__list li.is-no::before { position: absolute; left: 0; top: 9px; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center }
.sb-price__list li.is-yes::before { content: "✓"; background: var(--color-accent); color: var(--sb-on-accent, #fff) }
.sb-price__list li.is-no { color: var(--color-gray-dark, #8a99a5); text-decoration: line-through }
.sb-price__list li.is-no::before { content: "✕"; background: var(--color-gray-light, #f2f5f7); color: var(--color-gray-dark, #8a99a5) }
.sb-price__btn { margin: auto 20px 0 !important; background: var(--color-accent); color: var(--sb-on-accent, #fff) !important; font-weight: 800; border: 0; border-radius: var(--sbd-button-radius, 8px) }
.sb-price__btn:hover { filter: brightness(.93) }
.sb-price__dial, .sb-price__note { display: block; padding: 0 20px; font-size: .88rem; color: var(--color-gray-dark, #5b6b77) }
.sb-price__dial a { font-weight: 700; color: var(--color-primary) !important; white-space: nowrap }
.sb-price > :last-child { margin-bottom: 20px }
.sb-price.is-pick { box-shadow: 0 0 0 3px var(--color-accent), 0 18px 40px rgba(0,0,0,.12) }
.sb-price--compact { padding-top: 22px }
.sb-price--compact .sb-price__title { color: var(--color-primary) !important }
.sb-price--compact .sb-price__sub { padding: 0 20px; opacity: 1; color: var(--color-gray-dark, #5b6b77) }

/* Service pages: "How we handle it" steps (demo service text) */
ol.sbl-procedure, .sbd-content ol.sbl-procedure { list-style: none; padding: 0 !important; margin: 18px 0 28px !important; display: grid; gap: 10px; counter-reset: step }
ol.sbl-procedure > li, .sbd-content ol.sbl-procedure > li { list-style: none !important; margin: 0; position: relative; padding: 14px 16px 14px 58px; border: 1px solid var(--color-gray, #e3e7ea); border-radius: var(--sbd-radius, 12px); background: #fff; counter-increment: step }
ol.sbl-procedure > li::before { content: counter(step); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center }
ol.sbl-procedure strong { color: var(--color-dark, #10242a) }
ol.sbl-procedure > li::marker { content: none }

/* Problem picker · clues ("What are you noticing?") */
.sb-picker--clues { gap: 10px }
.sb-picker--clues .sb-picker__label { font: 800 1.6rem/1.1 var(--typo-heading-font-family, inherit) }
.sb-picker__clues { display: grid; gap: 8px }
.sb-picker__clues button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--color-gray, #ddd8cc); border-radius: 8px; background: transparent; color: var(--color-dark, #121d16); font: inherit; font-weight: 600; text-align: left; cursor: pointer }
.sb-picker__clues button[aria-checked="true"] { border-color: var(--color-primary); background: #fff }
.sb-picker__clues button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }
.sb-picker__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-gray-dark, #585c52); display: grid; place-items: center }
.sb-picker__clues [aria-checked="true"] .sb-picker__dot { border-color: var(--color-primary) }
.sb-picker__clues [aria-checked="true"] .sb-picker__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent) }
.sb-picker__result { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; padding: 12px; border-radius: 10px; background: var(--color-gray-light, #f2f0ea) }
.sb-picker__photo { width: 64px; height: 64px; border-radius: 8px; object-fit: cover }
.sb-picker__result p { flex: 1 1 120px; margin: 0 !important; line-height: 1.2 }
.sb-picker__result p span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--color-gray-dark, #585c52) }
.sb-picker__name { font: 800 1.35rem/1.1 var(--typo-heading-font-family, inherit); color: var(--color-dark, #121d16) }
.sb-picker--clues .sb-picker__go { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: var(--sbd-button-radius, 8px); background: var(--color-accent); color: var(--color-dark, #121d16) !important; font-weight: 800; text-decoration: none !important }

/* Timberline hero: topographic lines on the dark brand color */
.sbl-hero--topo { position: relative; background-color: var(--color-dark, #121d16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%239fb48c' stroke-opacity='.22' stroke-width='1.5'%3E%3Cpath d='M-50 600C200 520 300 640 520 560S900 420 1250 520'/%3E%3Cpath d='M-50 540C180 460 320 580 520 500S880 360 1250 460'/%3E%3Cpath d='M-50 480C160 400 340 520 540 440S860 300 1250 400'/%3E%3Cpath d='M-50 420C140 340 360 460 560 380S840 240 1250 340'/%3E%3Cpath d='M-50 360C120 280 380 400 580 320S820 180 1250 280'/%3E%3Cpath d='M-50 300C100 220 400 340 600 260S800 120 1250 220'/%3E%3Cpath d='M-50 240C80 160 420 280 620 200S780 60 1250 160'/%3E%3Cpath d='M700 140C760 100 840 110 860 160S800 240 740 220 660 170 700 140'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center }
.sbl-hero--topo .sbl-kicker { color: var(--color-accent) !important }
.sbl-hero--topo .is-style-outline .wp-block-button__link { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55) }
.sbl-hero--topo .sbl-trustline { color: rgba(255,255,255,.8) }
.sbl-hero--topo .sbl-trustline span::before { content: "• "; color: var(--color-accent) }
.sbl-picker-card { padding: clamp(18px, 3vw, 28px); border-radius: 12px; background: var(--color-gray-light, #f2f0ea); color: var(--color-dark, #121d16); box-shadow: 0 24px 50px rgba(0,0,0,.3) }
.sbl-picker-card p { color: inherit }

/* Inspect · Remove · Seal · Restore */
.sbl-steps4 { gap: 14px !important; counter-reset: none }
.sbl-step4 { padding: 22px; border: 1px solid var(--color-gray, #ddd8cc); border-radius: var(--sbd-radius, 10px); background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s }
.sbl-step4:hover { transform: translateY(-3px); border-color: var(--color-accent); box-shadow: 0 14px 30px rgba(0,0,0,.08) }
.sbl-step4 > * { margin: 0 0 6px !important }
.sbl-step4__n { font: 800 2.4rem/1 var(--typo-heading-font-family, inherit); color: var(--color-accent) }
.sbl-step4 p:last-child { color: var(--color-gray-dark, #585c52) }

/* Signs checklist */
.sbl-signs { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px }
.sbl-signs li { position: relative; padding: 14px 14px 14px 40px; border: 1px solid var(--color-gray, #ddd8cc); border-radius: 10px; background: #fff }
.sbl-signs li::before { content: ""; position: absolute; left: 16px; top: 20px; width: 12px; height: 12px; background: var(--color-accent) }

/* Warranty band */
.sbl-warranty-row, .sbl-warranty-row .wp-block-heading { color: #fff }
.sbl-warranty-row p { color: rgba(255,255,255,.85) }
.sbl-warranty { gap: 28px !important }
.sbl-warranty__badge { display: grid; place-content: center; width: 140px; height: 140px; margin: 0 !important; padding: 0 18px; border: 3px solid var(--color-accent); border-radius: 50%; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: #fff !important }
.sbl-warranty__badge strong { display: block; font: 800 3rem/1 var(--typo-heading-font-family, inherit); letter-spacing: 0; color: var(--color-accent) }

/* Town chips: response time */
.sbl-chip small { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--color-gray-light, #eef1f3); font-size: 11px; font-weight: 700; color: var(--color-gray-dark, #557078) }
.sbl-chip--same-day small { background: var(--color-accent); color: var(--color-dark, #10242a) }
.sbd-hero__response { font-weight: 700 }

/* Emergency switch */
.sb-emergency { display: grid; gap: 14px }
.sb-emergency__q { margin: 0 !important; font: 800 1.35rem/1.2 var(--typo-heading-font-family, inherit) }
.sb-emergency__choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.sb-emergency__choice button { min-height: 52px; padding: 8px 14px; border: 2px solid var(--color-gray, #ddd8cc); border-radius: 8px; background: #fff; color: var(--color-dark, #121d16); font: inherit; font-weight: 800; cursor: pointer }
.sb-emergency__choice [data-state="yes"][aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent) }
.sb-emergency__choice [data-state="no"][aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: #fff }
.sb-emergency__choice button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }
.sb-emergency__yes { padding: clamp(18px, 3vw, 28px); border-radius: 12px; background: var(--color-dark, #121d16); color: #fff }
.sb-emergency__yes h3 { margin: 0 0 10px; color: #fff }
.sb-emergency__phone { display: inline-block; margin-bottom: 14px; font: 800 clamp(2rem, 5vw, 2.8rem)/1 var(--typo-heading-font-family, inherit); color: var(--color-accent) !important; text-decoration: none !important }
.sb-emergency__until { margin: 0 0 6px !important; font-weight: 800; color: #fff }
.sb-emergency__yes ol { margin: 0; padding-left: 1.3em; color: rgba(255,255,255,.88) }
.sb-emergency.is-editor .sb-emergency__yes { opacity: .85 }
@media (max-width: 560px) { .sb-emergency__choice { grid-template-columns: 1fr } }
/* the big phone number on the dark contact card */
.sb-design .sbl-contact-card .sbl-big-phone a, .sbl-contact-card .sbl-big-phone a { color: var(--color-accent) !important }

/* Offer Catalog (service price list): row | stack | compact */
.sbl-offers { display: grid; gap: 16px; margin-bottom: 8px }
.sbl-offers--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) }
.sbl-offers--row:has(> :nth-child(1):last-child) { max-width: 420px; margin-inline: auto }
.sbl-offers--row:has(> :nth-child(2):last-child) { max-width: 820px; margin-inline: auto }
.sbl-offer { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: #fff; border: 1px solid var(--color-gray, #e3e7ea); border-radius: var(--sbd-radius, 14px); text-align: left }
.sbl-offer__main { flex: 1; display: grid; gap: 6px; align-content: start }
.sbl-offer__title { margin: 0 !important; font-size: 1.3rem; line-height: 1.2; color: var(--color-dark, #10242a) }
.sbl-offer__text { margin: 0 0 -4px !important; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-gray-dark, #5b6b77) }
.sbl-offer__list { margin: 6px 0 0 !important; grid-template-columns: 1fr !important; font-weight: 500 }
.sbl-offer__side { display: grid; gap: 8px }
.sbl-offer__price { margin: 0 !important; display: flex; align-items: flex-start; gap: 2px; line-height: 1; color: var(--color-dark, #10242a) }
.sbl-offer__price sup { top: 0; margin-top: 6px; font-size: 1.1rem; font-weight: 700 }
.sbl-offer__price strong { font: 800 2.6rem/1 var(--typo-heading-font-family, inherit); letter-spacing: -.02em }
.sbl-offer__price span { align-self: flex-end; margin: 0 0 4px 4px; font-size: 14px; color: var(--color-gray-dark, #5b6b77) }
.sbl-offer__button { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: var(--sbd-button-radius, 8px); background: var(--color-accent); color: var(--color-dark, #10242a) !important; font-weight: 800; text-decoration: none !important }
.sbl-offer__button:hover { filter: brightness(1.06) }
.sbl-offer__dial { margin: 0 !important; font-size: 13px; text-align: center; color: var(--color-gray-dark, #5b6b77) }
.sbl-offers--stack { max-width: 760px; margin-inline: auto }
.sbl-offers--compact { gap: 0; border: 1px solid var(--color-gray, #e3e7ea); border-radius: var(--sbd-radius, 14px); overflow: hidden; background: #fff }
.sbl-offers--compact .sbl-offer { flex-direction: row; align-items: center; gap: 24px; border: 0; border-radius: 0; border-top: 1px solid var(--color-gray, #e3e7ea) }
.sbl-offers--compact .sbl-offer:first-child { border-top: 0 }
.sbl-offers--compact .sbl-offer__side { flex: 0 0 220px; justify-items: stretch }
.sbl-offers--compact .sbl-offer__list { display: flex; flex-wrap: wrap; gap: 4px 18px }
@media (max-width: 700px) { .sbl-offers--compact .sbl-offer { flex-direction: column; align-items: stretch } .sbl-offers--compact .sbl-offer__side { flex-basis: auto } }
.sbl-offer a.sbl-offer__button { background: var(--color-accent) !important; color: var(--color-dark, #10242a) !important; border: 0 }

/* Services · category tabs (Pests | Wildlife): first category in the brand color, second in the accent */
.sbl-cat-tabs { display: inline-flex; gap: 4px; margin: 0 0 18px; padding: 4px; border-radius: 999px; background: var(--color-gray-light, #f2f2ee) }
.sbl-cat-tabs button { min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--color-dark, #14171b); font: inherit; font-weight: 700; cursor: pointer }
.sbl-cat-tabs button[aria-selected="true"]:nth-child(odd) { background: var(--color-primary); color: #fff }
.sbl-cat-tabs button[aria-selected="true"]:nth-child(even) { background: var(--color-accent); color: var(--color-dark, #14171b) }
.sbl-cat-tabs button:focus-visible { outline: 2px solid var(--color-dark, #14171b); outline-offset: 2px }

/* Two-Track: two service tracks (brand color = pests, accent = wildlife) */
.sbl-hero--tracks { background: var(--color-gray-light, #f6f5f2) }
.sbl-split-head { max-width: 760px !important; margin: 0 auto 28px !important; text-align: center }
.sbl-split-head .is-style-lead { margin-inline: auto }
.sbl-tracks { gap: 18px !important }
.sbl-track { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 0 24px !important; overflow: hidden; border-radius: var(--sbd-radius, 18px); background: #fff; border: 1px solid var(--color-gray, #e3e1db); transition: transform .2s, box-shadow .2s }
.sbl-track:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.10) }
.sbl-track__photo img { transition: transform .4s }
.sbl-track:hover .sbl-track__photo img { transform: scale(1.04) }
.sbl-track > :not(.sbl-track__photo) { margin: 0 24px !important }
.sbl-track__photo { margin: 0 0 6px !important } .sbl-track__photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block }
.sbl-track .wp-block-heading { font-size: clamp(1.6rem, 3vw, 2.2rem) }
.sbl-track--pests .sbl-kicker { color: var(--color-primary) !important }
.sbl-track--wildlife .sbl-kicker { color: color-mix(in srgb, var(--color-accent) 70%, #000) !important }
.sbl-track__chips { display: flex; flex-wrap: wrap; gap: 6px }
.sbl-track__chips span { padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--color-primary) 12%, #fff) }
.sbl-track--wildlife .sbl-track__chips span { background: color-mix(in srgb, var(--color-accent) 18%, #fff) }
.sbl-track .wp-block-buttons { margin-top: auto !important }
.sbl-track--pests .sbl-track__btn .wp-block-button__link { background: var(--color-primary) !important; color: #fff !important }
.sbl-track--wildlife .sbl-track__btn .wp-block-button__link { background: var(--color-accent) !important; color: var(--color-dark, #14171b) !important }

.sbl-legend { display: flex; gap: 18px; font-weight: 700 }
.sbl-legend span::before, .sbl-spots li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: var(--color-primary) }
.sbl-legend .is-wildlife::before { background: var(--color-accent) }
.sbl-house { display: block; width: 100%; height: auto }
.sbl-house__ground { stroke: var(--color-gray, #c9c6bd); stroke-width: 2 }
.sbl-house :is(.sbl-house__roof, .sbl-house__body, .sbl-house__chimney) { fill: #fff; stroke: var(--color-dark, #14171b); stroke-width: 3; stroke-linejoin: round }
.sbl-house__chimney { fill: var(--color-gray-light, #e8e6e0) !important }
.sbl-house__wall { stroke: var(--color-dark, #14171b); stroke-width: 2 }
.sbl-house__crawl { fill: none; stroke: var(--color-dark, #14171b); stroke-width: 2; stroke-dasharray: 6 6 }
.sbl-house circle.is-pests { fill: var(--color-primary) } .sbl-house circle.is-wildlife { fill: var(--color-accent) }
.sbl-house text { font: 800 15px var(--typo-heading-font-family, sans-serif); text-anchor: middle; fill: #fff }
.sbl-house text.is-wildlife { fill: var(--color-dark, #14171b) }
.sbl-spots { list-style: none; padding: 0 !important; margin: 14px 0 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; counter-reset: spot; font-size: 15px }
.sbl-spots li { counter-increment: spot }
.sbl-spots li::before { content: counter(spot); width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 12px; font-weight: 800; color: #fff; vertical-align: 1px }
.sbl-spots li.is-wildlife::before { background: var(--color-accent); color: var(--color-dark, #14171b) }
.sbl-cta--dark, .sbl-cta--dark .wp-block-heading { color: #fff !important }
.sbl-cta--dark .sbl-more-link a { color: var(--color-accent) }
@media (max-width: 600px) { .sbl-spots { grid-template-columns: 1fr } }
.sbl-section + .sbl-section { margin-top: 0 !important } /* sections stack without a gap */

@media (prefers-reduced-motion: reduce) { .sbl-step4, .sbl-track, .sbl-track__photo img { transition: none } .sbl-step4:hover, .sbl-track:hover { transform: none } .sbl-track:hover .sbl-track__photo img { transform: none } }

/* Slanted hero: the photo fills the section, a color panel with a slanted edge holds the text */
.sbl-section.sbl-hero--slant { position: relative; overflow: hidden; padding: 0 !important; background: var(--color-dark, #0b0f14) }
.sbl-section.sbl-hero--slant > .wp-block-group__inner-container { max-width: none !important; margin: 0 !important; padding: 0 }
.sbl-hero--slant .sbl-slant__photo { position: absolute; inset: 0; margin: 0 !important; max-width: none !important }
.sbl-hero--slant .sbl-slant__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20% }
.sbl-hero--slant .sbl-slant__panel { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; box-sizing: border-box; width: max(56%, 600px); max-width: none !important; min-height: clamp(460px, 62vh, 640px); margin: 0 !important; padding: clamp(40px, 6vw, 80px) 140px clamp(40px, 6vw, 80px) max(20px, calc((100vw - 1140px) / 2)); background: var(--color-primary); clip-path: polygon(0 0, 100% 0, calc(100% - 120px) 100%, 0 100%) }
.sbl-hero--slant .sbl-slant__panel > * { margin: 0 !important; max-width: 540px !important }
.sbl-hero--slant h1 { font-size: clamp(2.6rem, 6vw, 4.8rem) !important; line-height: .95 }
.sbl-hero--slant .sbl-kicker { color: var(--color-accent) !important }
.sbl-facts { list-style: none; padding: 0 !important; display: grid; gap: 6px; font-size: 1.1rem; color: rgba(255,255,255,.88) }
.sbl-facts li { position: relative; padding-left: 22px }
.sbl-facts li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--color-accent); transform: skewX(-18deg) }
.sbl-facts strong { color: #fff }
.sbl-hero--slant .is-style-outline .wp-block-button__link { color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6) }
@media (max-width: 781px) {
	.sbl-hero--slant .sbl-slant__photo { position: relative; height: 220px }
	.sbl-hero--slant .sbl-slant__panel { width: 100%; min-height: 0; margin-top: -18px !important; padding: 34px 20px 40px; clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%) }
}

/* Facts bar: four short numbers separated by slanted lines */
.sbl-facts-row { padding-block: 28px !important }
.sbl-facts-bar { gap: 0 !important }
.sbl-facts-bar > .wp-block-column { position: relative; padding-inline: 18px }
.sbl-facts-bar > .wp-block-column + .wp-block-column::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 2px; background: var(--color-accent); transform: skewX(-18deg) }
.sbl-fact { margin: 0 !important; color: rgba(255,255,255,.75); font-size: 14px; text-transform: uppercase; letter-spacing: .08em }
.sbl-fact strong { display: block; font: 800 clamp(2rem, 4vw, 2.8rem)/1 var(--typo-heading-font-family, inherit); letter-spacing: 0; color: #fff; text-transform: none }
@media (max-width: 781px) { .sbl-facts-bar > .wp-block-column + .wp-block-column::before { display: none } }

/* Slanted call to action band */
.sbl-cta--slant { position: relative; clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(40px, 6vw, 72px) + 24px) !important }
@media (max-width: 781px) { .sbl-facts-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px 0 !important } }

/* ---------- Projects (templates/Projects, single-project.php, archive-project.php) ---------- */
.sbp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px }
.sbp-grid { display: grid; gap: 24px }
.sbp-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.sbp-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.sbp-card, .sbp-pair { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--sbd-card-bg, #fff); border: var(--sbd-card-border, 1px solid var(--color-gray, #e3e7ea)); border-radius: var(--sbd-radius, 14px); transition: box-shadow .15s, transform .15s }
.sbp-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.10); transform: translateY(-2px) }
.sbp-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-gray-light, #f2f5f7) }
.sbp-card__media img { width: 100%; height: 100%; object-fit: cover }
.sbp-card__badge { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 700 }
.sbp-card__body, .sbp-pair__body { display: grid; gap: 8px; padding: 18px 20px 20px }
.sbp-card__title { margin: 0; font-size: 1.2rem; line-height: 1.25; text-transform: var(--sbd-heading-transform, none) }
.sbp-card__title a { color: var(--sbd-title, var(--color-primary)) !important; text-decoration: none !important }
.sbp-card__title a::after { content: ""; position: absolute; inset: 0 } /* whole card opens the project */
.sbp-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px }
.sbp-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--color-gray-light, #f2f5f7); color: var(--color-primary) !important; font-size: 12px; font-weight: 700; text-decoration: none !important }
a.sbp-chip:hover, .sbp-chip.is-active { background: var(--color-primary); color: #fff !important }
.sbp-chip--date { background: transparent; color: var(--color-gray-dark, #5b6b77) !important; font-weight: 600 }
.sbp-card__result, .sbp-pair__text { margin: 0; color: var(--color-gray-dark, #5b6b77); font-size: .95rem }
.sbp-all { margin: 20px 0 0; text-align: center; font-weight: 700 }
.sbp-all a { color: var(--color-primary) }
/* before / after */
.sbp-compare { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #111; user-select: none }
.sbp-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0 }
.sbp-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0) }
.sbp-compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); pointer-events: none }
.sbp-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize }
.sbp-compare__tag { position: absolute; top: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none }
.sbp-compare__tag--before { left: 12px } .sbp-compare__tag--after { right: 12px }
.sbp-photo { margin: 0 } .sbp-photo img { width: 100%; border-radius: var(--sbd-radius, 14px) }
/* project page */
.sbp-page__head { padding: clamp(32px, 6vw, 64px) 0 24px; background: var(--color-gray-light, #f2f5f7) }
.sbp-page__head h1 { margin: 6px 0 12px; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; color: var(--sbd-title, var(--color-primary)) }
.sbp-crumbs { display: flex; gap: 6px; font-size: 13px; color: var(--color-gray-dark, #5b6b77) } .sbp-crumbs a { color: inherit }
.sbp-page__result { max-width: 62ch; margin: 12px 0 0; font-size: 1.1rem; color: var(--color-gray-dark, #5b6b77) }
.sbp-page__body { display: grid; gap: clamp(28px, 4vw, 44px); padding-top: 32px; padding-bottom: clamp(40px, 6vw, 72px) }
.sbp-page__body > .sbp-compare, .sbp-page__body > .sbp-photo { border-radius: var(--sbd-radius, 14px); aspect-ratio: 16 / 9 }
.sbp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
.sbp-step { padding: 24px; border-radius: var(--sbd-radius, 14px); background: var(--color-gray-light, #f2f5f7) }
.sbp-step h2 { margin: 0 0 8px; font-size: 1.3rem; color: var(--sbd-title, var(--color-primary)) }
.sbp-step p { margin: 0; line-height: 1.65 }
.sbp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px }
.sbp-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--sbd-radius, 14px) - 4px) }
.sbp-quote { margin: 0; padding: 28px 32px; border-left: 5px solid var(--color-accent); border-radius: var(--sbd-radius, 14px); background: var(--sbd-card-bg, #fff); box-shadow: 0 10px 28px rgba(0,0,0,.06) }
.sbp-quote blockquote { margin: 0 } .sbp-quote p { margin: 0; font-size: 1.2rem; line-height: 1.55; color: var(--color-dark, #23323d) }
.sbp-quote figcaption { margin-top: 10px; font-weight: 700; color: var(--color-primary) }
.sbp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; border-radius: var(--sbd-radius, 14px); background: var(--color-primary); color: #fff }
.sbp-cta h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem) }
.sbp-cta > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.sbp-btn { padding: 12px 22px; border-radius: var(--sbd-button-radius, 8px); font-weight: 800 }
.sbp-btn--accent { background: var(--color-accent); color: var(--sb-on-accent, #fff) !important }
.sbp-btn--outline { box-shadow: inset 0 0 0 2px #fff; color: #fff !important }
.sbp-link { color: #fff !important; font-weight: 700 }
.sbp-more h2 { margin: 0 0 18px; color: var(--sbd-title, var(--color-primary)) }
.sbp-filter { display: flex; flex-wrap: wrap; gap: 8px } .sbp-filter .sbp-chip { padding: 7px 14px; font-size: 13px }
@media (max-width: 991px) { .sbp-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .sbp-grid--cols-2, .sbp-grid--cols-3, .sbp-steps { grid-template-columns: 1fr } .sbp-cta, .sbp-quote { padding: 22px } }