/* ==========================================================================
   SAN DIEGO BBQ CLEANERS - SERVICE PAGES
   A sixth sheet, loaded after organisms on the three service pages and, since
   2026-09-18, on contact and showroom, which are built from the same parts
   (inc/service-pages.php). These components appear nowhere else, so they do
   not belong in the weight every page carries.

   Block names here never reuse .sdb-svc or .sdb-gallery. .sdb-svc is the
   front page service card, and the parity-era service section shared the
   name: the card rules stretched a photo behind the whole section and
   reveal.js observed it. .sdb-gallery is still live on the replacement page.
   ========================================================================== */

/* Shared two-tone heading, same ramp as the front page. */
.sdb-h-ember {
	width: fit-content;
	margin: 0;
	color: var(--sdb-white);
	background: linear-gradient(100deg, #FFFFFF 0%, #FFF4EF 34%, #F0BFAE 66%, #CC5944 100%);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.sdb-h-ember { -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* Text affordance, same as the cards: a rule and a label, no arrow. */
.sdb-go {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--sdb-small); font-weight: var(--sdb-w-semi);
	color: var(--sdb-white); text-decoration: none;
}
.sdb-go i { display: block; width: 26px; height: 1px; background: var(--sdb-red-hot); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.sdb-go:hover i, .sdb-go:focus-visible i { width: 40px; }
.sdb-go:hover { color: var(--sdb-white); }

/* ---- Hero ----------------------------------------------------------- */
.sdb-shero { position: relative; padding-block: var(--sdb-s7) var(--sdb-s7); overflow: clip; }
.sdb-shero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 70% at 88% 60%, rgba(168,35,51,.16) 0%, rgba(168,35,51,.05) 45%, transparent 72%);
}
.sdb-shero__inner { position: relative; display: grid; grid-template-columns: minmax(0,11fr) minmax(0,13fr); gap: var(--sdb-s6); align-items: center; }
.sdb-shero__when { margin: 0 0 var(--sdb-s2); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-shero__title { max-width: 15ch; font-size: clamp(2.125rem, 3.9vw, 3.25rem); line-height: 1.04; letter-spacing: -.015em; }
.sdb-shero__lede { max-width: 44ch; margin: var(--sdb-s3) 0 0; font-size: var(--sdb-lead); color: var(--sdb-text); }
.sdb-shero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sdb-s3) var(--sdb-s4); margin: var(--sdb-s4) 0 0; }
/* Secondary hero button: same size as the primary, hairline instead of ember. */
.sdb-btn--line { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgba(15, 17, 19, .35); box-shadow: inset 0 0 0 1px rgba(244, 247, 249, .28); transition: box-shadow .25s ease, background .25s ease, transform .18s ease; }
.sdb-btn--line:hover, .sdb-btn--line:focus-visible { background: rgba(15, 17, 19, .55); box-shadow: inset 0 0 0 1px var(--sdb-red-hot); }
.sdb-btn--line .sdb-icon { width: 18px; height: 18px; stroke: var(--sdb-red-hot); }
@media (max-width: 600px) {
	.sdb-shero__actions { gap: var(--sdb-s2); }
	.sdb-shero__actions .sdb-btn { flex: 1 1 100%; }
}
.sdb-shero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sdb-s5) 0 0; }
.sdb-shero__meta .sdb-chip { background: rgba(244,247,249,.04); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sdb-chip__stars { display: inline-flex; gap: 1px; margin-left: 6px; color: var(--sdb-red-hot); vertical-align: 1px; }
.sdb-chip__stars .sdb-icon { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.sdb-shero__media .sdb-compare { border-radius: var(--sdb-radius-img); }
.sdb-shero__cap { display: flex; justify-content: space-between; gap: var(--sdb-s3); margin: 12px 0 0; font-size: var(--sdb-tiny); color: var(--sdb-cr-3); }

@media (max-width: 960px) {
	.sdb-shero { padding-block: var(--sdb-s5) var(--sdb-s6); }
	.sdb-shero__inner { grid-template-columns: 1fr; gap: var(--sdb-s5); }
	.sdb-shero__title { max-width: 16ch; }
}

/* ---- Offer ----------------------------------------------------------------
   The offer is said three times, each where a decision happens: beside the
   first button, above the prices, and on each price. One ember surface only
   (the panel button); everything else is ember text or a dot, so the primary
   action stays the brightest thing on the page. */
.sdb-offerline { display: inline-flex; align-items: center; gap: 10px; margin: var(--sdb-s3) 0 0; padding: 8px 16px 8px 12px; border-radius: 999px;
	background: rgba(204,89,68,.10); box-shadow: inset 0 0 0 1px rgba(204,89,68,.45);
	font-size: var(--sdb-small); color: var(--sdb-white); text-decoration: none; transition: background-color .35s ease, box-shadow .35s ease; }
.sdb-offerline:hover { background: rgba(204,89,68,.18); box-shadow: inset 0 0 0 1px rgba(204,89,68,.8); color: var(--sdb-white); }
.sdb-offerline b { font-weight: var(--sdb-w-semi); }
.sdb-offerline span { color: var(--sdb-cr-2); }
.sdb-offerline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sdb-red-hot); animation: sdb-ember 2.4s ease-in-out infinite; }
body.sdb-motion-paused .sdb-offerline::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sdb-offerline::before { animation: none; } }

.sdb-offer { position: relative; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); min-height: 300px; margin-bottom: var(--sdb-s5); border-radius: 10px; overflow: hidden; isolation: isolate; background: var(--sdb-raised); }
.sdb-offer__img { position: absolute; top: 0; right: 0; z-index: -2; width: 62%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.sdb-offer::after { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(32,35,39,1) 0%, rgba(32,35,39,1) 38%, rgba(32,35,39,.82) 52%, rgba(32,35,39,.25) 78%, rgba(32,35,39,.05) 100%); }
.sdb-offer__body { display: flex; flex-direction: column; justify-content: center; padding: var(--sdb-s6); }
.sdb-offer__when { margin: 0 0 var(--sdb-s2); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-offer__title { margin: 0; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.02; letter-spacing: -.015em; color: var(--sdb-white); }
.sdb-offer__amt { color: var(--sdb-red-hot); background: linear-gradient(100deg, #E8907C 0%, #CC5944 45%, #C23A36 100%); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .sdb-offer__amt { -webkit-background-clip: text; background-clip: text; color: transparent; } }
.sdb-offer__copy { max-width: 40ch; margin: var(--sdb-s2) 0 0; color: var(--sdb-text); }
.sdb-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sdb-s2) var(--sdb-s4); margin: var(--sdb-s4) 0 0; }
.sdb-offer__ends { font-size: var(--sdb-small); color: var(--sdb-cr-2); }
.sdb-offer__ends b { color: var(--sdb-white); font-weight: var(--sdb-w-semi); }

.sdb-tier__save { margin: 10px 0 0; font-size: var(--sdb-tiny); font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }

@media (max-width: 800px) {
	.sdb-offer { display: block; min-height: 0; }
	.sdb-offer__img { position: relative; z-index: 0; width: 100%; height: 180px; }
	.sdb-offer::after { display: none; }
	.sdb-offer__body { padding: var(--sdb-s4); }
	.sdb-tier__save { grid-column: 1; margin-top: 4px; }
}
@media (max-width: 480px) {
	.sdb-offerline { display: grid; grid-template-columns: 8px 1fr; column-gap: 12px; row-gap: 2px; width: 100%; padding: 12px 16px; border-radius: 14px; }
	.sdb-offerline::before { grid-row: span 2; align-self: center; }
	.sdb-offerline span { grid-column: 2; }
}

/* ==========================================================================
   PROCESS, second version. One composite panel: photo banner, then the
   cutaway beside the steps.
   The panel uses overflow: clip, not hidden. hidden makes it a scroll
   container and the sticky drawing would stop sticking.
   ========================================================================== */
.sdb-proc__panel { border-radius: 10px; overflow: hidden; overflow: clip; background: var(--sdb-raised); }
.sdb-proc__banner { position: relative; height: 280px; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sdb-s4); padding: var(--sdb-s5) var(--sdb-s6) var(--sdb-s4); }
.sdb-proc__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.sdb-proc__banner::after { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(0deg, rgba(32,35,39,1) 0%, rgba(32,35,39,.72) 32%, rgba(32,35,39,.18) 70%, rgba(32,35,39,.05) 100%); }
.sdb-proc__title { max-width: 16ch; }
.sdb-proc__banner .sdb-ask { background: rgba(15,17,19,.45); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }

.sdb-proc__body { display: grid; grid-template-columns: minmax(0,13fr) minmax(0,11fr); gap: var(--sdb-s5); align-items: start; padding: var(--sdb-s4) var(--sdb-s6) var(--sdb-s6); }
.sdb-proc__draw { position: sticky; top: 96px; align-self: start; padding: var(--sdb-s4) var(--sdb-s4) var(--sdb-s3); border-radius: 8px; background: var(--sdb-well); }
.sdb-proc__hint { margin: var(--sdb-s2) 0 0; padding: 0; font-size: var(--sdb-tiny); color: var(--sdb-cr-3); text-align: center; }

.sdb-grill { display: block; width: 100%; height: auto; overflow: visible; }
.sdb-grill__part { fill: none; stroke: #848B95; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s ease, opacity .5s ease; }
.sdb-grill__part .f { fill: url(#sdb-grill-steel); transition: fill .5s ease; }
.sdb-grill__part .dot { fill: #848B95; stroke: none; }
.sdb-grill__part .dash { stroke-dasharray: 4 6; }
.sdb-grill.has-active .sdb-grill__part { opacity: .5; }
.sdb-grill.has-active .sdb-grill__part.is-on { opacity: 1; stroke: var(--sdb-red-hot); }
.sdb-grill__part.is-on .f { fill: rgba(204,89,68,.16); }
.sdb-grill__part.is-on .dot { fill: var(--sdb-red-hot); }
.sdb-steps { display: flex; flex-direction: column; gap: 4px; }
.sdb-step { border-radius: 8px; transition: background-color .4s ease; }
.sdb-step[open] { background: rgba(244,247,249,.045); }
.sdb-step__sum { display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: var(--sdb-s2); padding: 12px var(--sdb-s2); cursor: pointer; list-style: none; border-radius: 8px; }
.sdb-step__sum::-webkit-details-marker { display: none; }
.sdb-step__sum:focus-visible { outline: var(--sdb-focus); outline-offset: 2px; }
.sdb-step__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(244,247,249,.04); box-shadow: inset 0 0 0 1px rgba(244,247,249,.14); color: var(--sdb-cr-2); transition: box-shadow .4s ease, color .4s ease; }
.sdb-step__icon .sdb-icon { width: 18px; height: 18px; stroke-width: 1.6; }
.sdb-step[open] .sdb-step__icon, .sdb-step__sum:hover .sdb-step__icon { box-shadow: inset 0 0 0 1px rgba(204,89,68,.6); color: var(--sdb-red-hot); }
.sdb-step__name { font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: var(--sdb-h6); color: var(--sdb-white); }
.sdb-step__chev { width: 18px; height: 18px; color: var(--sdb-cr-3); transition: transform .3s ease; }
.sdb-step[open] .sdb-step__chev { width: 18px; height: 18px; color: var(--sdb-cr-3); transition: transform .3s ease; }
.sdb-step__body { padding: 0 var(--sdb-s3) var(--sdb-s3) calc(40px + var(--sdb-s2) * 2); }
.sdb-step__body p { margin: 0; font-size: var(--sdb-small); line-height: 1.6; color: var(--sdb-cr-2); }
.sdb-step__checks { columns: 2; column-gap: var(--sdb-s4); margin: var(--sdb-s2) 0 0; padding: 0; list-style: none; }
.sdb-step__checks li { break-inside: avoid; display: grid; grid-template-columns: 12px 1fr; gap: 8px; padding: 5px 0; font-size: var(--sdb-tiny); line-height: 1.4; color: var(--sdb-white); }
.sdb-step__mark { width: 8px; height: 16px; margin-top: 1px; }
.sdb-step__mark path { fill: var(--sdb-red-hot); }

@media (max-width: 960px) {
	.sdb-proc__banner { height: 240px; padding: var(--sdb-s4); flex-direction: column; align-items: flex-start; justify-content: flex-end; }
	.sdb-proc__banner .sdb-ask { display: none; }
	.sdb-proc__body { grid-template-columns: 1fr; gap: var(--sdb-s2); padding: 0 var(--sdb-s2) var(--sdb-s3); }
	/* Stays in view while the steps are tapped, or the drawing is scrolled
	   away by the time anything lights up. Margins are cropped because the
	   labels are off at this size. */
	.sdb-proc__draw { top: 76px; z-index: 3; padding: var(--sdb-s2) 0 var(--sdb-s1); overflow: hidden; }
	.sdb-grill { height: min(36vh, 300px); }
	.sdb-step__body { padding-left: var(--sdb-s3); }
	.sdb-step__checks { columns: 1; }
}

/* Part names. Each one isolates its part on the drawing, on hover, focus or
   tap, so the list is also the legend. */
.sdb-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sdb-s2) 0 0; padding: 0; list-style: none; }
.sdb-partbtn { appearance: none; border: 0; cursor: pointer; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: var(--sdb-tiny); line-height: 1.2; color: var(--sdb-cr-1);
	background: rgba(244,247,249,.05); box-shadow: inset 0 0 0 1px rgba(244,247,249,.14); transition: box-shadow .3s ease, background-color .3s ease, color .3s ease; }
.sdb-partbtn:hover, .sdb-partbtn:focus-visible, .sdb-partbtn.is-on { background: rgba(204,89,68,.14); box-shadow: inset 0 0 0 1px rgba(204,89,68,.7); color: var(--sdb-white); outline: none; }
.sdb-step__checks .sdb-partbtn { display: grid; grid-template-columns: 12px 1fr; gap: 8px; width: 100%; padding: 6px 8px; margin-left: -8px; border-radius: 6px; text-align: left; background: none; box-shadow: none; color: var(--sdb-white); }
.sdb-step__checks .sdb-partbtn:hover, .sdb-step__checks .sdb-partbtn:focus-visible, .sdb-step__checks .sdb-partbtn.is-on { background: rgba(204,89,68,.12); box-shadow: none; }
.sdb-step__checks li { display: block; padding: 0; }
@media (max-width: 960px) { .sdb-proc__draw { padding: var(--sdb-s2); } .sdb-proc__hint { display: none; } }

/* ---- Pricing -------------------------------------------------------- */
.sdb-price { padding-top: 0; }
.sdb-price__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sdb-s5); margin-bottom: var(--sdb-s5); }
.sdb-price__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sdb-price__lede { max-width: 40ch; margin: 0; font-size: var(--sdb-small); color: var(--sdb-cr-3); text-align: right; }

/* The ruler is the table header: the two column joins are the two
   measurements that decide the price, so they carry the numbers. */
.sdb-price__ruler { position: relative; height: 34px; margin: 0 0 var(--sdb-s2);
	background:
		repeating-linear-gradient(90deg, rgba(244,247,249,.30) 0 1px, transparent 1px calc(100% / 60)) bottom / 100% 8px no-repeat,
		repeating-linear-gradient(90deg, rgba(244,247,249,.55) 0 1px, transparent 1px calc(100% / 12)) bottom / 100% 14px no-repeat;
	border-bottom: 1px solid rgba(244,247,249,.30);
}
.sdb-price__mark { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
	font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: 13px; line-height: 1; color: var(--sdb-white); }
.sdb-price__mark::after { content: ""; width: 1px; height: 20px; background: var(--sdb-red-hot); }
.sdb-price__mark--a { left: 33.333%; } .sdb-price__mark--b { left: 66.666%; }

/* ---- Ruler that reads the tier under the pointer --------------------------
   Hover or focus a size and the ruler measures it: an ember tape runs along
   that third, its ticks light, and the reading appears above. Jumbo has no
   upper limit, so its tape ends in an arrow. CSS only (:has); without it the
   ruler is simply what it was. */
.sdb-price__span { position: absolute; bottom: -1px; height: 100%; width: 33.333%; pointer-events: none; }
.sdb-price__span--1 { left: 0; } .sdb-price__span--2 { left: 33.333%; } .sdb-price__span--3 { left: 66.666%; }
.sdb-price__span::before { content: ""; position: absolute; inset: auto 0 0 0; height: 14px; opacity: 0; transition: opacity .35s ease;
	background:
		repeating-linear-gradient(90deg, #CC5944 0 1px, transparent 1px calc(100% / 20)) bottom / 100% 8px no-repeat,
		repeating-linear-gradient(90deg, #E8907C 0 1px, transparent 1px calc(100% / 4)) bottom / 100% 14px no-repeat; }
.sdb-price__span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #A82333, #CC5944); transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.3,.7,.2,1); }
.sdb-price__span--3::after { right: 10px; }
.sdb-price__span--3 i { position: absolute; right: 0; bottom: -4px; width: 0; height: 0; border-left: 11px solid #CC5944; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; opacity: 0; transition: opacity .3s ease .35s; }
.sdb-price__span b { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 6px); padding: 5px 12px; border-radius: 999px; white-space: nowrap; font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: 13px; line-height: 1; color: var(--sdb-white); background: #A82333; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.sdb-price__ruler { margin-top: var(--sdb-s5); }

.sdb-price:has(.sdb-tier:nth-child(1):is(:hover, :focus-visible)) .sdb-price__span--1::before,
.sdb-price:has(.sdb-tier:nth-child(2):is(:hover, :focus-visible)) .sdb-price__span--2::before,
.sdb-price:has(.sdb-tier:nth-child(3):is(:hover, :focus-visible)) .sdb-price__span--3::before { opacity: 1; }
.sdb-price:has(.sdb-tier:nth-child(1):is(:hover, :focus-visible)) .sdb-price__span--1::after,
.sdb-price:has(.sdb-tier:nth-child(2):is(:hover, :focus-visible)) .sdb-price__span--2::after,
.sdb-price:has(.sdb-tier:nth-child(3):is(:hover, :focus-visible)) .sdb-price__span--3::after { transform: scaleX(1); }
.sdb-price:has(.sdb-tier:nth-child(1):is(:hover, :focus-visible)) .sdb-price__span--1 b,
.sdb-price:has(.sdb-tier:nth-child(2):is(:hover, :focus-visible)) .sdb-price__span--2 b,
.sdb-price:has(.sdb-tier:nth-child(3):is(:hover, :focus-visible)) .sdb-price__span--3 b { opacity: 1; transform: translate(-50%, 0); }
.sdb-price:has(.sdb-tier:nth-child(3):is(:hover, :focus-visible)) .sdb-price__span--3 i { opacity: 1; }
/* The two fixed marks step back while a reading is showing, so labels never collide. */
.sdb-price__mark { transition: opacity .3s ease; }
.sdb-price:has(.sdb-tier:is(:hover, :focus-visible)) .sdb-price__mark { opacity: .35; }
/* The tier being measured lifts a touch. */
.sdb-tier { position: relative; }
.sdb-tier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #A82333, #CC5944); transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.3,.7,.2,1); }
.sdb-tier:is(:hover, :focus-visible)::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .sdb-price__span::after, .sdb-price__span b, .sdb-tier::before { transition: none; } }

.sdb-price__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; padding: 1px; border-radius: 10px; overflow: hidden;
	background: linear-gradient(135deg, rgba(244,247,249,.22) 0%, rgba(244,247,249,.06) 30%, rgba(244,247,249,.06) 70%, rgba(244,247,249,.16) 100%); }
.sdb-tier { display: flex; flex-direction: column; padding: var(--sdb-s4) var(--sdb-s4) var(--sdb-s4); background: var(--sdb-raised); text-decoration: none; transition: background-color .5s ease; }
.sdb-tier:hover, .sdb-tier:focus-visible { background: #24282C; }
.sdb-tier__name { margin: 0; font-weight: 700; font-size: var(--sdb-h5); color: var(--sdb-white); }
.sdb-tier__width { margin: 6px 0 0; font-size: var(--sdb-small); color: var(--sdb-cr-2); }
.sdb-tier__price { display: flex; align-items: baseline; gap: 12px; margin: var(--sdb-s5) 0 0;
	font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; line-height: 1; }
.sdb-tier__now { font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -.02em; color: var(--sdb-white); }
.sdb-tier__now sup { font-size: .45em; vertical-align: .75em; margin-right: 2px; color: var(--sdb-cr-2); }
.sdb-tier__was { font-size: 1rem; color: var(--sdb-cr-3); text-decoration: line-through; text-decoration-color: var(--sdb-red-hot); }
.sdb-tier .sdb-go { margin-top: var(--sdb-s4); }
.sdb-price__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sdb-s2) var(--sdb-s4); margin: var(--sdb-s3) 0 0; font-size: var(--sdb-small); color: var(--sdb-cr-3); }
.sdb-price__offer { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--sdb-ember); font-weight: var(--sdb-w-semi); font-size: var(--sdb-tiny); color: var(--sdb-white); }

@media (max-width: 800px) {
	.sdb-price__head { display: block; } .sdb-price__lede { margin-top: var(--sdb-s2); text-align: left; }
	.sdb-price__grid { grid-template-columns: 1fr; }
	.sdb-tier { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--sdb-s3); padding: var(--sdb-s3) var(--sdb-s4); }
	.sdb-tier__price { grid-column: 2; grid-row: 1 / span 2; margin: 0; flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
	.sdb-tier__now { font-size: 2rem; }
	.sdb-tier .sdb-go { display: none; }
}

/* ---- Pull quote under the prices ---------------------------------------- */
.sdb-pquote { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sdb-s4); margin: var(--sdb-s3) 0 0; padding: var(--sdb-s3) var(--sdb-s4); border-radius: 10px; background: var(--sdb-well); }
.sdb-pquote__stars { display: flex; gap: 2px; color: var(--sdb-red-hot); }
.sdb-pquote__stars .sdb-icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.sdb-pquote blockquote { margin: 0; font-size: var(--sdb-lead); line-height: 1.4; color: var(--sdb-white); }
.sdb-pquote figcaption { font-size: var(--sdb-tiny); color: var(--sdb-cr-3); white-space: nowrap; }
.sdb-pquote figcaption b { display: block; font-family: var(--sdb-font-display); font-size: var(--sdb-small); font-weight: 600; color: var(--sdb-white); }
@media (max-width: 800px) { .sdb-pquote { grid-template-columns: 1fr; gap: var(--sdb-s2); padding: var(--sdb-s3); } }

/* ---- Before you book: tiles ------------------------------------------- */
/* The icon tiles that lived here are gone: see the ledger, at the end of this sheet. */

/* ---- Gallery -------------------------------------------------------- */
.sdb-ba__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sdb-s4); margin-bottom: var(--sdb-s4); }
.sdb-ba__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 18ch; }
.sdb-ba__note { margin: 0; font-size: var(--sdb-small); color: var(--sdb-cr-3); }
.sdb-ba__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sdb-s4) var(--sdb-s3); }
.sdb-ba__item { margin: 0; }
.sdb-ba__item .sdb-compare { border-radius: var(--sdb-radius-img); }
.sdb-ba__item figcaption { margin-top: 10px; font-size: var(--sdb-tiny); color: var(--sdb-cr-3); }
@media (max-width: 700px) { .sdb-ba__head { display: block; } .sdb-ba__grid { grid-template-columns: 1fr; } }

/* ---- FAQ -------------------------------------------------------------------
   Not an accordion. Each answer leads with the fact somebody is scanning for,
   set in the display face, so the section reads at a glance and every answer
   is on the page for search and for FAQPage schema. */
.sdb-faq__head { margin-bottom: var(--sdb-s5); }
.sdb-faq__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sdb-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--sdb-s3); }
.sdb-fact { position: relative; grid-column: span 4; display: flex; flex-direction: column; padding: var(--sdb-s4); border-radius: 10px; background: var(--sdb-raised); overflow: hidden; }
.sdb-fact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--sdb-chrome-edge); opacity: .7; }
.sdb-fact--wide { grid-column: span 7; }
.sdb-fact--mid { grid-column: span 5; }
.sdb-fact__q { margin: 0 0 var(--sdb-s3); font-family: var(--sdb-font-body); font-variation-settings: normal; font-weight: var(--sdb-w-med); font-size: var(--sdb-small); letter-spacing: 0; color: var(--sdb-cr-3); }
.sdb-fact__a { margin: 0 0 10px; font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; letter-spacing: -.01em; color: var(--sdb-white); }
.sdb-fact__a em { font-style: normal; color: var(--sdb-red-hot); }
.sdb-fact__more { margin: 0; max-width: 52ch; font-size: var(--sdb-small); line-height: 1.6; color: var(--sdb-cr-2); }

/* How long: two bars on one scale, so "about half the time" is visible. */
.sdb-bars { display: grid; gap: 10px; margin: var(--sdb-s3) 0 0; }
.sdb-bar { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: var(--sdb-s2); font-size: var(--sdb-tiny); color: var(--sdb-cr-2); }
.sdb-bar__track { position: relative; height: 10px; border-radius: 5px; background: var(--sdb-well); }
.sdb-bar__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: var(--sdb-ember); transform-origin: left; }
.sdb-bar--light .sdb-bar__fill { background: linear-gradient(90deg, #4A5058, #8A9099); }
.sdb-bars__scale { display: grid; grid-template-columns: 96px 1fr; gap: var(--sdb-s2); font-size: 11px; color: var(--sdb-cr-4); }
.sdb-bars__scale span { display: flex; justify-content: space-between; }

/* The last tile is the way out for anyone still unsure. */
.sdb-fact--ask { justify-content: center; background: linear-gradient(135deg, #2B2225 0%, var(--sdb-raised) 62%); }
.sdb-fact--ask .sdb-fact__a { margin-bottom: 8px; }
.sdb-fact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sdb-s2) var(--sdb-s4); margin: var(--sdb-s3) 0 0; }

@media (max-width: 960px) { .sdb-fact, .sdb-fact--wide, .sdb-fact--mid { grid-column: span 6; } .sdb-fact--wide, .sdb-fact--ask { grid-column: span 12; } }
@media (max-width: 600px) { .sdb-fact, .sdb-fact--mid { grid-column: span 12; } .sdb-bar, .sdb-bars__scale { grid-template-columns: 78px 1fr; } }

/* ---- Other services ------------------------------------------------- */
.sdb-also__head { margin-bottom: var(--sdb-s4); }
.sdb-also__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sdb-also__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sdb-s3); }
@media (max-width: 700px) { .sdb-also__grid { grid-template-columns: 1fr; } }

/* ---- Articles -------------------------------------------------------
   Every featured image is 841x430 with the headline set in the left 60% and
   the subject in the right 40%. A 5:7 frame pinned to the right edge shows
   only the subject, so the card can carry the headline as real text without
   printing it twice. */
.sdb-reads { padding-top: 0; }
.sdb-reads__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sdb-s3); margin: 0; padding: 0; list-style: none; }
.sdb-read { position: relative; display: flex; align-items: flex-end; aspect-ratio: 5 / 7; border-radius: var(--sdb-radius-img); overflow: hidden; isolation: isolate; text-decoration: none; }
.sdb-read__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%;
	filter: saturate(.5) brightness(.5) contrast(1.05); transform: scale(1.04);
	transition: filter 1800ms cubic-bezier(.2,.7,.2,1), transform 1800ms cubic-bezier(.2,.7,.2,1); }
.sdb-read.is-lit .sdb-read__img { filter: saturate(.95) brightness(.78); transform: scale(1); }
.sdb-read:hover .sdb-read__img, .sdb-read:focus-visible .sdb-read__img { filter: saturate(1) brightness(.92); transform: scale(1.045); transition-duration: 1100ms; }
.sdb-read::after { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(0deg, rgba(15,17,19,.96) 0%, rgba(15,17,19,.78) 30%, rgba(15,17,19,.15) 66%, transparent 100%); }
.sdb-read__txt { padding: var(--sdb-s3); }
.sdb-read__cat { margin: 0 0 var(--sdb-s1); font-size: 12px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-read__title { margin: 0; font-size: 1.0625rem; line-height: 1.22; color: var(--sdb-white); }
.sdb-read .sdb-go { margin-top: var(--sdb-s2); }
@media (max-width: 1000px) { .sdb-reads__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .sdb-read__img { filter: saturate(.95) brightness(.78); transform: none; transition: none; } }

/* Phones: a portrait tile cannot hold a twelve-word headline at half width, so
   the card turns on its side. Same 5:7 crop, text beside it instead of on it. */
@media (max-width: 700px) {
	.sdb-reads__grid { grid-template-columns: 1fr; gap: var(--sdb-s2); }
	.sdb-read { display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: center; aspect-ratio: auto; border-radius: 10px; background: var(--sdb-raised); }
	.sdb-read::after { display: none; }
	.sdb-read__img { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 5 / 7; }
	.sdb-read__txt { padding: var(--sdb-s2) var(--sdb-s3); }
	.sdb-read__title { font-size: 1rem; }
	.sdb-read .sdb-go { display: none; }
}

/* ---- Sticky booking bar, phones only ---------------------------------------
   On once the hero has gone, off again when the close or footer is showing,
   so there are never two book buttons stacked. */
.sdb-bookbar { display: none; }
@media (max-width: 800px) {
	.sdb-bookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--sdb-s2);
		padding: 10px var(--sdb-s3) calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(15,17,19,.88); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
		box-shadow: inset 0 1px 0 rgba(244,247,249,.14);
		transform: translateY(110%); visibility: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s; }
	.sdb-bookbar.is-on { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s; }
	.sdb-bookbar__txt { display: flex; flex-direction: column; line-height: 1.2; }
	.sdb-bookbar__txt b { font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: 1.0625rem; color: var(--sdb-white); }
	.sdb-bookbar__txt span { font-size: 12px; color: var(--sdb-red-hot); font-weight: var(--sdb-w-semi); }
	.sdb-bookbar .sdb-btn { padding: 12px 20px; font-size: 15px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .sdb-bookbar, .sdb-bookbar.is-on { transition: none; } }

/* The header's Book button stays put while the bar is up (2026-10-15): hiding
   it read as a bug. */
.sdb-bars__scale i { font-style: normal; }

/* ==========================================================================
   REPAIR PAGE
   ========================================================================== */

/* Hero with a single photo instead of a compare. The "repair" before/after
   pair is two different grills shot from two angles; a slider between them
   reads as broken. */
.sdb-shero__photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--sdb-radius-img); overflow: hidden; }
.sdb-shero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Symptoms panel has no photo banner; the head sits on the panel. */
.sdb-proc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sdb-s4); padding: var(--sdb-s6) var(--sdb-s6) var(--sdb-s2); }
.sdb-proc__note { margin: var(--sdb-s3) 0 0; font-size: var(--sdb-tiny); color: var(--sdb-cr-3); }
.sdb-step--alert .sdb-step__icon { color: var(--sdb-red-hot); box-shadow: inset 0 0 0 1px rgba(204,89,68,.6); }
@media (max-width: 960px) { .sdb-proc__head { display: block; padding: var(--sdb-s4) var(--sdb-s3) var(--sdb-s2); } .sdb-proc__head .sdb-ask { display: none; } }

/* ---- Repair or restore --------------------------------------------------- */
.sdb-paths__head { margin-bottom: var(--sdb-s5); }
.sdb-paths__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 22ch; }
.sdb-paths__grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--sdb-s3); align-items: stretch; }
.sdb-path { position: relative; display: flex; flex-direction: column; padding: var(--sdb-s5); border-radius: 10px; background: var(--sdb-raised); overflow: hidden; isolation: isolate; }
.sdb-path::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--sdb-chrome-edge); opacity: .7; z-index: 1; }
.sdb-path__when { margin: 0 0 var(--sdb-s1); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-path__title { margin: 0 0 var(--sdb-s2); font-size: var(--sdb-h3); color: var(--sdb-white); }
.sdb-path__copy { margin: 0; max-width: 46ch; color: var(--sdb-text); }
.sdb-path__parts { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sdb-s3) 0 0; padding: 0; list-style: none; }
.sdb-path__parts li { padding: 6px 12px; border-radius: 999px; font-size: var(--sdb-tiny); color: var(--sdb-cr-1); background: rgba(244,247,249,.05); box-shadow: inset 0 0 0 1px rgba(244,247,249,.14); }
.sdb-path__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sdb-s4) 0 0; }
.sdb-path .sdb-go { margin-top: auto; padding-top: var(--sdb-s4); }

/* The restoration panel: photo on top, fading into the panel. Text over
   the photograph was tried first; with a quote and chips there is too much
   of it, and the top lines sat on bright sky. */
.sdb-path--lead { padding: 0; }
.sdb-path__media { position: relative; height: 250px; }
.sdb-path__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; }
.sdb-path__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(32,35,39,1) 0%, rgba(32,35,39,.35) 40%, transparent 75%); }
.sdb-path__body { display: flex; flex-direction: column; flex: 1; padding: var(--sdb-s2) var(--sdb-s5) var(--sdb-s5); }
.sdb-path__quote { margin: var(--sdb-s4) 0 0; padding: var(--sdb-s3) 0 0; border-top: 1px solid var(--sdb-hairline); }
.sdb-path__quote blockquote { margin: 0; font-size: var(--sdb-small); line-height: 1.6; color: var(--sdb-cr-1); max-width: 56ch; }
.sdb-path__quote figcaption { margin-top: 8px; font-size: var(--sdb-tiny); color: var(--sdb-cr-3); }
@media (max-width: 900px) { .sdb-paths__grid { grid-template-columns: 1fr; } .sdb-path { padding: var(--sdb-s4); } .sdb-path--lead { padding: 0; } .sdb-path__body { padding: var(--sdb-s2) var(--sdb-s4) var(--sdb-s4); } .sdb-path__media { height: 210px; } }

/* ---- Photo form ---------------------------------------------------------- */
.sdb-photo__panel { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); border-radius: 10px; overflow: hidden; background: var(--sdb-raised); }
.sdb-photo__side { display: flex; flex-direction: column; padding: var(--sdb-s6); background: linear-gradient(150deg, #2B2225 0%, var(--sdb-raised) 70%); }
.sdb-photo__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sdb-photo__copy { margin: var(--sdb-s3) 0 0; color: var(--sdb-text); max-width: 40ch; }
.sdb-photo__tel { margin-top: auto; padding-top: var(--sdb-s5); font-size: var(--sdb-small); color: var(--sdb-cr-2); }
.sdb-photo__tel a { color: var(--sdb-white); font-weight: var(--sdb-w-semi); text-decoration: none; }
.sdb-photo__form { padding: var(--sdb-s6); }
@media (max-width: 900px) { .sdb-photo__panel { grid-template-columns: 1fr; } .sdb-photo__side, .sdb-photo__form { padding: var(--sdb-s4); } .sdb-photo__tel { padding-top: var(--sdb-s4); } }

/* ---- WPForms inside the photo panel -------------------------------------------
   WPForms ships its own sheet. With its Modern markup most of the look is
   custom properties on the container, so set those first and only reach for
   selectors where there is no property. Scoped to the panel: any other
   WPForms form on the site is untouched. */
.sdb-photo__form .wpforms-container {
	margin: 0;
	--wpforms-field-border-radius: 6px;
	--wpforms-field-border-style: solid;
	--wpforms-field-border-size: 1px;
	--wpforms-field-background-color: #0F1113;
	--wpforms-field-border-color: rgba(244, 247, 249, .14);
	--wpforms-field-text-color: #FFFFFF;
	--wpforms-field-menu-color: #0F1113;
	--wpforms-label-color: #F4F7F9;
	--wpforms-label-sublabel-color: #8A9099;
	--wpforms-label-error-color: #E8907C;
	--wpforms-button-border-radius: 28px;
	--wpforms-button-background-color: #A82333;
	--wpforms-button-text-color: #FFFFFF;
	--wpforms-field-size-input-height: 50px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-label-size-font-size: 14px;
	--wpforms-button-size-font-size: 17px;
	--wpforms-button-size-height: 56px;
	--wpforms-button-size-padding-h: 32px;
}
.sdb-photo__form .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sdb-s3); }
.sdb-photo__form .wpforms-form .wpforms-field { grid-column: 1 / -1; width: auto; margin: 0; padding: 0 0 var(--sdb-s3); float: none; clear: none; }
/* WPForms gives the second half-width field margin-left: 20px for its float
   layout. The grid gap does that job here, and on a phone it indented the
   field. Seen on staging 2026-09-18 with the real markup. */
.sdb-photo__form .wpforms-container .wpforms-form .wpforms-field.wpforms-one-half { grid-column: auto; width: auto !important; margin-left: 0 !important; padding-left: 0 !important; float: none !important; }
@media (max-width: 720px) { .sdb-photo__form .wpforms-container .wpforms-form .wpforms-field.wpforms-one-half { grid-column: 1 / -1; } }
.sdb-photo__form .wpforms-form .wpforms-field-label { margin-bottom: 8px; font-family: var(--sdb-font-body); font-weight: var(--sdb-w-med); font-size: var(--sdb-small); color: var(--sdb-cr-1); }
.sdb-photo__form .wpforms-form .wpforms-required-label { color: var(--sdb-red-hot); }
.sdb-photo__form .wpforms-form .wpforms-field-description { font-size: var(--sdb-tiny); color: var(--sdb-cr-3); }
/* components.css styles every WPForms input white with !important, on
   purpose: "a form is always a bright surface to fill in". That holds for the
   contact page. Inside this panel the signed-off design is recessed wells, so
   these answer in kind, scoped to the panel and nowhere else. */
.sdb-photo__form .wpforms-container .wpforms-field input:not([type="checkbox"]):not([type="radio"]),
.sdb-photo__form .wpforms-container .wpforms-field textarea {
	width: 100%; max-width: 100%; padding: 14px 16px !important; border: 0 !important; border-radius: 6px !important;
	font-family: var(--sdb-font-body) !important; font-size: 1rem !important; color: var(--sdb-white) !important;
	background: var(--sdb-well) !important; box-shadow: inset 0 0 0 1px rgba(244, 247, 249, .14); transition: box-shadow .3s ease;
}
.sdb-photo__form .wpforms-container .wpforms-field textarea { min-height: 112px; }
.sdb-photo__form .wpforms-form input::placeholder,
.sdb-photo__form .wpforms-form textarea::placeholder { color: var(--sdb-cr-4); opacity: 1; }
.sdb-photo__form .wpforms-container .wpforms-field input:focus,
.sdb-photo__form .wpforms-container .wpforms-field textarea:focus { outline: none !important; box-shadow: inset 0 0 0 1px var(--sdb-red-hot); }
.sdb-photo__form .wpforms-container .wpforms-field input.wpforms-error,
.sdb-photo__form .wpforms-container .wpforms-field textarea.wpforms-error { box-shadow: inset 0 0 0 1px #E8907C; }
.sdb-photo__form .wpforms-form label.wpforms-error,
.sdb-photo__form .wpforms-form em.wpforms-error { font-size: var(--sdb-tiny); font-style: normal; color: #E8907C; }

/* The modern uploader: a dashed well, the same object as the prototype. */
.sdb-photo__form .wpforms-form .wpforms-uploader {
	padding: var(--sdb-s3); border: 1px dashed rgba(244, 247, 249, .28); border-radius: 6px;
	background: var(--sdb-well); color: var(--sdb-cr-2); transition: background-color .3s ease, border-color .3s ease;
}
.sdb-photo__form .wpforms-form .wpforms-uploader:hover,
.sdb-photo__form .wpforms-form .wpforms-uploader.dz-drag-hover { background: #15181B; border-color: var(--sdb-red-hot); }
.sdb-photo__form .wpforms-form .wpforms-uploader .dz-message { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--sdb-s2); align-items: center; margin: 0; text-align: left; }
.sdb-photo__form .wpforms-form .wpforms-uploader .dz-message svg { grid-row: span 2; width: 32px; height: 32px; fill: var(--sdb-red-hot); opacity: 1; }
.sdb-photo__form .wpforms-form .wpforms-uploader .modern-title,
.sdb-photo__form .wpforms-form .wpforms-uploader .modern-hint { display: block; font-size: var(--sdb-small); }
.sdb-photo__form .wpforms-form .wpforms-uploader .modern-title { font-weight: var(--sdb-w-semi); color: var(--sdb-white); }
.sdb-photo__form .wpforms-form .wpforms-uploader .modern-hint { color: var(--sdb-cr-3); }

/* Submit: the theme's primary button, ember and all. */
.sdb-photo__form .wpforms-form .wpforms-submit-container { padding: var(--sdb-s1) 0 0; }
.sdb-photo__form .wpforms-container .wpforms-submit {
	min-height: 56px; padding: 0 32px !important; font-size: 1.0625rem !important; font-weight: var(--sdb-w-semi) !important;
	background: var(--sdb-ember) !important; cursor: pointer; transition: filter .3s ease, transform .3s ease;
}
.sdb-photo__form .wpforms-container .wpforms-submit:hover { background: var(--sdb-ember) !important; filter: brightness(1.12); transform: translateY(-1px); }
.sdb-photo__form .wpforms-container .wpforms-submit:focus-visible { outline: var(--sdb-focus); outline-offset: var(--sdb-focus-offset); }

.sdb-photo__form .wpforms-confirmation-container-full {
	margin: 0; padding: var(--sdb-s4); border: 0; border-radius: 8px; color: var(--sdb-white);
	background: rgba(204, 89, 68, .10); box-shadow: inset 0 0 0 1px rgba(204, 89, 68, .45);
}
.sdb-photo__form .wpforms-confirmation-container-full p { margin: 0; color: inherit; }

/* No form yet, or no WPForms: never an empty box. */
.sdb-photo__fallback { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.sdb-photo__fallback p { margin: 0 0 var(--sdb-s2); color: var(--sdb-text); max-width: 44ch; }
.sdb-photo__fallback-lead { font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: var(--sdb-h4); color: var(--sdb-white) !important; }
.sdb-photo__fallback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sdb-s2) var(--sdb-s4); margin-top: var(--sdb-s3) !important; }

/* Brands band sits between two sections here; give it air the front page
   gets from its neighbours. */
.sdb-brands--page { padding-block: var(--sdb-s5) var(--sdb-s6); }

.sdb-path__aside { margin-top: var(--sdb-s4); padding-top: var(--sdb-s3); border-top: 1px solid var(--sdb-hairline); font-size: var(--sdb-small); color: var(--sdb-cr-2); }

.sdb-proc__sub { margin: var(--sdb-s2) 0 0; color: var(--sdb-cr-2); max-width: 44ch; }
.sdb-proc__head .sdb-proc__title { max-width: 20ch; }
/* The three shots, as objects. As a small flame list they were lost in a
   column this tall. */
.sdb-photo__label { margin: var(--sdb-s5) 0 var(--sdb-s2); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-shots { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sdb-shot { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: var(--sdb-s2); padding: 14px var(--sdb-s2); border-radius: 8px; background: rgba(15,17,19,.45); box-shadow: inset 0 0 0 1px rgba(244,247,249,.10); }
.sdb-shot__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--sdb-red-hot); background: rgba(244,247,249,.04); box-shadow: inset 0 0 0 1px rgba(244,247,249,.14); }
.sdb-shot__icon .sdb-icon { width: 20px; height: 20px; stroke-width: 1.6; }
.sdb-shot b { display: block; font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: 1rem; color: var(--sdb-white); }
.sdb-shot span span { display: block; margin-top: 2px; font-size: var(--sdb-small); line-height: 1.45; color: var(--sdb-cr-2); }
.sdb-proc__head .sdb-ask { flex: none; }

/* ==========================================================================
   REPLACEMENT PAGE
   ========================================================================== */

/* Hero: the finished job large, the old grill inset. The pairs on this page
   were shot from different angles, so a slider between them misregisters. */
.sdb-duo { position: relative; }
.sdb-duo__after { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sdb-radius-img); }
.sdb-duo__before { position: absolute; left: var(--sdb-s3); bottom: var(--sdb-s3); width: 34%; margin: 0; border-radius: var(--sdb-radius-img); overflow: hidden; box-shadow: 0 0 0 1px rgba(244,247,249,.35), 0 0 0 5px rgba(15,17,19,.55); }
.sdb-duo__before img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.8) brightness(.9); }
.sdb-duo__tag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: var(--sdb-w-semi); color: var(--sdb-white); background: rgba(15,17,19,.78); }
.sdb-duo__tag--after { top: var(--sdb-s2); left: auto; right: var(--sdb-s2); font-size: 12px; padding: 4px 10px; }

/* ---- Fit drawing: states swap, they do not dim ---------------------------- */
.sdb-grill--fit .sdb-fit__base,
.sdb-grill--fit.has-active .sdb-fit__base.is-on { fill: none; stroke: #5C636C; stroke-width: 1.5; stroke-linejoin: round; }
.sdb-grill--fit .sdb-fit__base .f { fill: url(#sdb-grill-steel-fit); fill: rgba(244,247,249,.035); }
.sdb-grill--fit .sdb-fit__base .slab { fill: rgba(244,247,249,.10); stroke: #848B95; }
.sdb-grill--fit .sdb-fit__base .stone { stroke: rgba(244,247,249,.07); stroke-width: 1; }
.sdb-grill--fit .sdb-grill__part,
.sdb-grill--fit.has-active .sdb-grill__part { opacity: 0; stroke: var(--sdb-cr-1); transition: opacity .55s ease; }
.sdb-grill--fit.has-active .sdb-grill__part.is-on { opacity: 1; stroke: var(--sdb-cr-1); }
.sdb-grill--fit .sdb-grill__part.is-on .f { fill: #1B1E22; }
.sdb-grill--fit .acc { stroke: var(--sdb-red-hot); stroke-width: 2; }
.sdb-grill--fit .acc.thin { stroke-width: 1; opacity: .8; }
.sdb-grill--fit .acc.dash { stroke-dasharray: 5 6; }
.sdb-grill--fit .fit { fill: rgba(204,89,68,.22); stroke: var(--sdb-red-hot); stroke-width: 1.5; }
.sdb-step__aside { margin-top: var(--sdb-s2) !important; color: var(--sdb-cr-3) !important; font-size: var(--sdb-tiny) !important; }

/* ---- Installs: tap the inset to swap -------------------------------------- */
.sdb-installs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sdb-s4); margin-bottom: var(--sdb-s4); }
.sdb-installs__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 20ch; }
.sdb-installs__note { margin: 0; font-size: var(--sdb-small); color: var(--sdb-cr-3); }
.sdb-installs__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sdb-s4) var(--sdb-s3); }
.sdb-swap { margin: 0; }
.sdb-swap__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--sdb-radius-img); overflow: hidden; background: var(--sdb-well); }
.sdb-swap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.sdb-swap__img--before { opacity: 0; }
.sdb-swap.is-before .sdb-swap__img--before { opacity: 1; }
.sdb-swap__state { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 3px; font-size: 12px; font-weight: var(--sdb-w-semi); color: var(--sdb-white); background: rgba(15,17,19,.78); }
.sdb-swap__btn { position: absolute; left: 12px; bottom: 12px; width: 30%; padding: 0; border: 0; border-radius: 5px; overflow: hidden; cursor: pointer; background: none; box-shadow: 0 0 0 1px rgba(244,247,249,.4), 0 0 0 4px rgba(15,17,19,.5); transition: box-shadow .3s ease, transform .3s ease; }
.sdb-swap__btn:hover, .sdb-swap__btn:focus-visible { box-shadow: 0 0 0 1px var(--sdb-red-hot), 0 0 0 4px rgba(15,17,19,.5); transform: translateY(-2px); outline: none; }
.sdb-swap__btn img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sdb-swap__btn span { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: var(--sdb-w-semi); color: var(--sdb-white); background: rgba(15,17,19,.78); }
.sdb-swap figcaption { margin-top: 10px; font-size: var(--sdb-tiny); color: var(--sdb-cr-3); }
@media (max-width: 900px) { .sdb-installs__head { display: block; } .sdb-installs__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .sdb-installs__grid { grid-template-columns: 1fr; } }

/* ---- Lines we sell --------------------------------------------------------- */
.sdb-sell__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sdb-s4); margin-bottom: var(--sdb-s4); }
.sdb-sell__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 18ch; }
.sdb-sell__sub { margin: 0; max-width: 38ch; font-size: var(--sdb-small); color: var(--sdb-cr-3); text-align: right; }
.sdb-sell__grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sdb-s2); margin: 0; padding: 0; list-style: none; }
.sdb-sell__tile { display: grid; place-items: center; aspect-ratio: 16 / 7; padding: 10px 18px; border-radius: 8px; background: var(--sdb-white); }
.sdb-sell__tile img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .sdb-sell__head { display: block; } .sdb-sell__sub { margin-top: var(--sdb-s2); text-align: left; } .sdb-sell__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 520px) { .sdb-sell__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- Showroom --------------------------------------------------------------- */
.sdb-room { padding-top: 0; }
.sdb-room__panel { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); border-radius: 10px; overflow: hidden; background: var(--sdb-raised); }
.sdb-room__media { position: relative; min-height: 360px; }
.sdb-room__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdb-room__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(32,35,39,.6) 86%, rgba(32,35,39,1) 100%); }
.sdb-room__body { display: flex; flex-direction: column; justify-content: center; padding: var(--sdb-s6) var(--sdb-s6) var(--sdb-s6) var(--sdb-s4); }
.sdb-room__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sdb-room__copy { margin: var(--sdb-s2) 0 0; color: var(--sdb-text); }
.sdb-room__facts { display: grid; gap: 10px; margin: var(--sdb-s4) 0 0; padding: 0; list-style: none; font-size: var(--sdb-small); color: var(--sdb-cr-1); }
.sdb-room__facts li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.sdb-room__facts .sdb-icon { width: 18px; height: 18px; margin-top: 2px; stroke: var(--sdb-red-hot); stroke-width: 1.7; }
.sdb-room__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sdb-s2) var(--sdb-s4); margin: var(--sdb-s4) 0 0; }
@media (max-width: 900px) { .sdb-room__panel { grid-template-columns: 1fr; } .sdb-room__media { min-height: 240px; } .sdb-room__media::after { background: linear-gradient(0deg, rgba(32,35,39,1) 0%, rgba(32,35,39,.4) 26%, transparent 62%); } .sdb-room__body { padding: var(--sdb-s4); } }

.sdb-grill--fit .sdb-fit__dim path, .sdb-grill--fit.has-active .sdb-fit__dim.is-on path { fill: none; stroke: var(--sdb-cr-3); stroke-width: 1.2; }
.sdb-grill--fit .sdb-fit__dim text { fill: var(--sdb-cr-2); stroke: none; font-family: var(--sdb-font-body); font-size: 13px; }
.sdb-grill--fit { overflow: hidden; border-radius: 4px; }

.sdb-grill--fit .ground { stroke: #5C636C; }
.sdb-grill--fit .sdb-grill__part.is-on.sdb-fit__base .f { fill: rgba(244,247,249,.035); }
.sdb-grill--fit .sdb-grill__part.is-on.sdb-fit__base .slab { fill: rgba(244,247,249,.10); }
.sdb-room__facts a { color: inherit; text-decoration: none; }
.sdb-room__facts a:hover { color: var(--sdb-red-hot); }

/* ---- Rail: a sequence, set in type -------------------------------------------
   Replaces icon tiles for anything that happens in order. One chrome rail, a
   node per step, the step named in one word in the display face. When the
   section scrolls in, an ember line runs the rail once and each node and word
   lights as it passes; it ends on the flame. One-shot, so it needs no motion
   control, and under reduced motion everything is simply lit. */
.sdb-rail__head { margin-bottom: var(--sdb-s6); }
.sdb-rail__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 22ch; }
.sdb-rail__track { --sdb-rail-t: 2400ms; position: relative; display: grid; grid-template-columns: repeat(var(--sdb-rail-n, 4), minmax(0, 1fr)); gap: var(--sdb-s5); margin: 0; padding: 44px 56px 0 0; list-style: none; }
.sdb-rail__track::before,
.sdb-rail__track::after { content: ""; position: absolute; top: 7px; left: 0; right: 28px; height: 1px; }
.sdb-rail__track::before { background: rgba(244, 247, 249, .16); }
.sdb-rail__track::after { background: linear-gradient(90deg, #8E1B2A 0%, #A82333 40%, #CC5944 100%); transform: scaleX(0); transform-origin: left center; transition: transform var(--sdb-rail-t) linear; }
.sdb-rail__track.is-lit::after { transform: scaleX(1); }

.sdb-rail__step { position: relative; }
.sdb-rail__step::before { content: ""; position: absolute; top: -44px; left: 0; width: 15px; height: 15px; border-radius: 50%; z-index: 1;
	background: var(--sdb-ink); box-shadow: inset 0 0 0 1px var(--sdb-cr-3);
	transition: background-color .5s ease, box-shadow .5s ease; transition-delay: calc(var(--sdb-rail-t) * var(--sdb-rail-at, 0)); }
.sdb-rail__track.is-lit .sdb-rail__step::before { background: var(--sdb-red-hot); box-shadow: inset 0 0 0 1px var(--sdb-red-hot), 0 0 0 5px rgba(204, 89, 68, .16); }

.sdb-rail__word { margin: 0 0 10px; font-size: clamp(1.75rem, 2.9vw, 2.5rem); line-height: 1; letter-spacing: -.015em; color: var(--sdb-white); opacity: .38; transition: opacity .7s ease; transition-delay: calc(var(--sdb-rail-t) * var(--sdb-rail-at, 0)); }
.sdb-rail__track.is-lit .sdb-rail__word { opacity: 1; }
.sdb-rail__line { margin: 0; max-width: 27ch; font-size: var(--sdb-small); line-height: 1.55; color: var(--sdb-cr-2); }

/* The terminus. An absolutely placed list item, so it takes no grid cell. */
.sdb-rail__end-wrap { position: absolute; top: -12px; right: 0; margin: 0; padding: 0; list-style: none; line-height: 0; }
.sdb-rail__end { width: 18px; height: 38px; opacity: .3; transition: opacity .8s ease; transition-delay: calc(var(--sdb-rail-t) * .96); }
.sdb-rail__end path { fill: var(--sdb-red-hot); }
.sdb-rail__track.is-lit .sdb-rail__end { opacity: 1; }

@media (max-width: 860px) {
	.sdb-rail__track { grid-template-columns: 1fr; gap: var(--sdb-s4); padding: 0 0 52px 40px; }
	.sdb-rail__track::before, .sdb-rail__track::after { top: 10px; bottom: 30px; left: 7px; right: auto; width: 1px; height: auto; }
	.sdb-rail__track::after { background: linear-gradient(180deg, #8E1B2A 0%, #A82333 40%, #CC5944 100%); transform: scaleY(0); transform-origin: center top; }
	.sdb-rail__track.is-lit::after { transform: scaleY(1); }
	.sdb-rail__step::before { top: 8px; left: -40px; }
	.sdb-rail__line { max-width: 40ch; }
	.sdb-rail__end-wrap { top: auto; bottom: 0; right: auto; left: -1px; }
}
@media (prefers-reduced-motion: reduce) {
	.sdb-rail__track::after, .sdb-rail__step::before, .sdb-rail__word, .sdb-rail__end { transition: none; }
}

/* ==========================================================================
   CONTACT AND SHOWROOM
   ========================================================================== */

/* ---- Page hero, no media -------------------------------------------------- */
.sdb-phero { position: relative; padding-block: var(--sdb-s7) var(--sdb-s5); overflow: clip; }
.sdb-phero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 90% at 90% 20%, rgba(168,35,51,.14) 0%, rgba(168,35,51,.04) 50%, transparent 75%); }
.sdb-phero__inner { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sdb-s5); }
.sdb-phero__when { margin: 0 0 var(--sdb-s2); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-phero__title { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.015em; max-width: 14ch; }
.sdb-phero__lede { max-width: 46ch; margin: var(--sdb-s3) 0 0; font-size: var(--sdb-lead); color: var(--sdb-text); }
.sdb-phero__call { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-decoration: none; }
.sdb-phero__call span { font-size: var(--sdb-small); color: var(--sdb-cr-3); }
.sdb-phero__call b { font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--sdb-white); transition: color .3s ease; }
.sdb-phero__call:hover b { color: var(--sdb-red-hot); }
@media (max-width: 800px) { .sdb-phero { padding-block: var(--sdb-s5) var(--sdb-s3); } .sdb-phero__inner { display: block; } .sdb-phero__call { align-items: flex-start; margin-top: var(--sdb-s4); } }

/* ---- Lanes: the contact page is a router ------------------------------------ */
.sdb-lanes { padding-top: var(--sdb-s4); }
.sdb-lanes__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sdb-s3); }
.sdb-lanes .sdb-svc--side { min-height: 360px; }
.sdb-lanes .sdb-svc__txt { padding: var(--sdb-s3); }
.sdb-lanes .sdb-svc__title { font-size: var(--sdb-h4); margin-bottom: 8px; }
.sdb-lanes .sdb-svc__copy { font-size: var(--sdb-small); line-height: 1.5; color: rgba(255,255,255,.82); }
.sdb-lanes .sdb-svc__go { opacity: 1; transform: none; margin-top: var(--sdb-s3); }
@media (max-width: 1100px) { .sdb-lanes__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .sdb-lanes .sdb-svc--side { min-height: 280px; } }
@media (max-width: 560px) { .sdb-lanes__grid { grid-template-columns: 1fr; } .sdb-lanes .sdb-svc--side { min-height: 230px; } }

/* Details as objects, in the message panel's left column. */
.sdb-shots li:has(> .sdb-shot--link) { display: block; }
.sdb-shot--link { text-decoration: none; transition: box-shadow .3s ease, background-color .3s ease; }
.sdb-shot--link:hover { box-shadow: inset 0 0 0 1px rgba(204,89,68,.6); background: rgba(15,17,19,.6); }
/* ---- Showroom hero: the room itself ------------------------------------------ */
.sdb-vhero { position: relative; display: flex; align-items: flex-end; min-height: min(78vh, 720px); isolation: isolate; overflow: clip; }
.sdb-vhero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; }
.sdb-vhero::after { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(0deg, rgba(24,26,29,1) 0%, rgba(24,26,29,.82) 26%, rgba(24,26,29,.25) 58%, rgba(24,26,29,.35) 100%), linear-gradient(90deg, rgba(24,26,29,.86) 0%, rgba(24,26,29,.6) 32%, transparent 68%); }
.sdb-vhero__inner { width: 100%; padding-block: var(--sdb-s8) var(--sdb-s6); }
.sdb-vhero__title { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1; letter-spacing: -.02em; max-width: 12ch; }
.sdb-vhero__lede { max-width: 44ch; margin: var(--sdb-s3) 0 0; font-size: var(--sdb-lead); color: var(--sdb-text); }
.sdb-vhero .sdb-shero__actions { margin-top: var(--sdb-s4); }
.sdb-vhero .sdb-shero__meta { margin-top: var(--sdb-s5); }
@media (max-width: 800px) { .sdb-vhero { min-height: 560px; } .sdb-vhero__inner { padding-block: var(--sdb-s7) var(--sdb-s5); } .sdb-vhero__img { object-position: 30% 40%; } }

/* ---- Bring your measurements: split panel -------------------------------------- */
.sdb-split__panel { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr); border-radius: 10px; overflow: hidden; background: var(--sdb-raised); }
.sdb-split__media { position: relative; min-height: 420px; order: 2; }
.sdb-split__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sdb-focus-pos, 50% 50%); }
.sdb-split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, transparent 55%, rgba(32,35,39,.6) 84%, rgba(32,35,39,1) 100%); }
.sdb-split__body { padding: var(--sdb-s6); }
.sdb-split__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 16ch; }
.sdb-split__copy { margin: var(--sdb-s3) 0 var(--sdb-s4); max-width: 44ch; color: var(--sdb-text); }
@media (max-width: 900px) { .sdb-split__panel { grid-template-columns: 1fr; } .sdb-split__media { order: -1; min-height: 280px; } .sdb-split__media::after { background: linear-gradient(0deg, rgba(32,35,39,1) 0%, rgba(32,35,39,.4) 26%, transparent 62%); } .sdb-split__body { padding: var(--sdb-s4); } }

/* ---- Visit: map beside the details ----------------------------------------------- */
.sdb-visit__panel { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); border-radius: 10px; overflow: hidden; background: var(--sdb-raised); }
.sdb-visit__map { position: relative; min-height: 400px; background: var(--sdb-well); }
.sdb-visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9) brightness(.95); }
.sdb-visit__body { display: flex; flex-direction: column; justify-content: center; padding: var(--sdb-s6); }
.sdb-visit__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
@media (max-width: 900px) { .sdb-visit__panel { grid-template-columns: 1fr; } .sdb-visit__map { min-height: 280px; } .sdb-visit__body { padding: var(--sdb-s4); } }

.sdb-vhero__pill { display: inline-block; margin: 0 0 var(--sdb-s2); font-size: 13px; font-weight: var(--sdb-w-semi); padding: 6px 12px; border-radius: 999px; color: var(--sdb-white); background: rgba(15,17,19,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(244,247,249,.16); }
.sdb-vhero__pill::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--sdb-red-hot); vertical-align: 1px; }
@media (max-width: 800px) {
	.sdb-vhero::after { background: linear-gradient(0deg, rgba(24,26,29,1) 0%, rgba(24,26,29,.9) 40%, rgba(24,26,29,.72) 100%); }
}

/* ---- What is in the room: photo bento ------------------------------------------ */
.sdb-inroom__head { margin-bottom: var(--sdb-s4); }
.sdb-inroom__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sdb-inroom__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-rows: 300px; gap: var(--sdb-s3); }
.sdb-inroom__grid figure { position: relative; margin: 0; border-radius: var(--sdb-radius-img); overflow: hidden; isolation: isolate; }
.sdb-inroom__grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdb-inroom__grid figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,17,19,.92) 0%, rgba(15,17,19,.35) 34%, transparent 62%); }
.sdb-inroom__grid figcaption { position: absolute; left: var(--sdb-s3); right: var(--sdb-s3); bottom: var(--sdb-s3); z-index: 1; }
.sdb-inroom__grid figcaption b { display: block; font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: var(--sdb-h5); color: var(--sdb-white); }
.sdb-inroom__grid figcaption span { display: block; margin-top: 4px; font-size: var(--sdb-small); color: var(--sdb-cr-2); }
.sdb-inroom__a { grid-column: span 7; } .sdb-inroom__b { grid-column: span 5; } .sdb-inroom__c { grid-column: span 5; } .sdb-inroom__d { grid-column: span 7; }
@media (max-width: 800px) { .sdb-inroom__grid { grid-auto-rows: 240px; } .sdb-inroom__grid figure { grid-column: span 12; } }

/* ---- Lines, in the tiers Dan sells them in ---------------------------------------- */
.sdb-sell__tiers { display: grid; gap: var(--sdb-s4); }
.sdb-sell__tier { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: var(--sdb-s4); align-items: start; padding-top: var(--sdb-s4); border-top: 1px solid var(--sdb-hairline); }
.sdb-sell__tier:first-child { border-top: 0; padding-top: 0; }
.sdb-sell__tiername { margin: 10px 0 0; font-size: var(--sdb-h5); color: var(--sdb-white); }
.sdb-sell__tier .sdb-sell__grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
.sdb-sell__tier .sdb-sell__tile { display: grid; }
.sdb-sell__name { display: block; margin-top: 8px; font-size: var(--sdb-tiny); color: var(--sdb-cr-3); }
@media (max-width: 900px) { .sdb-sell__tier { grid-template-columns: 1fr; gap: var(--sdb-s2); } .sdb-sell__tiername { margin-top: 0; } .sdb-sell__tier .sdb-sell__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 520px) { .sdb-sell__tier .sdb-sell__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- Find us: the door, not a map --------------------------------------------------- */
.sdb-visit__door { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.sdb-visit__map { min-height: 460px; }
.sdb-visit__tag { position: absolute; left: var(--sdb-s3); bottom: var(--sdb-s3); padding: 8px 14px; border-radius: 999px; font-size: var(--sdb-small); font-weight: var(--sdb-w-semi); color: var(--sdb-white); background: rgba(15,17,19,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(244,247,249,.16); }

/* Appointment panel: photo on the left this time. */
.sdb-split__panel--flip .sdb-split__media { order: 0; }
.sdb-split__panel--flip .sdb-split__media::after { background: linear-gradient(90deg, transparent 55%, rgba(32,35,39,.6) 84%, rgba(32,35,39,1) 100%); }
.sdb-split__panel--flip .sdb-split__body { display: flex; flex-direction: column; justify-content: center; }
.sdb-split__body .sdb-phero__when { margin-bottom: var(--sdb-s2); }
.sdb-split__body .sdb-room__actions { margin-top: var(--sdb-s4); }

/* Lanes without eyebrows: a title, a line, a way in. */
.sdb-lanes .sdb-svc__title { font-size: var(--sdb-h4); margin-bottom: 6px; }
.sdb-lanes .sdb-svc__copy { font-size: var(--sdb-body); }

/* Topic hint: inline, not a pop-up. It informs and gets out of the way; the
   message can still be sent. The markup lives in the WPForms form as HTML
   fields shown by conditional logic, so it is plain HTML with no inline SVG
   (WPForms strips it); the mark is a CSS dot. */
.sdb-hint { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sdb-s2) var(--sdb-s3); padding: 14px var(--sdb-s3) 14px calc(var(--sdb-s3) + 18px); border-radius: 8px; background: rgba(204,89,68,.10); box-shadow: inset 0 0 0 1px rgba(204,89,68,.45); }
.sdb-hint::before { content: ""; position: absolute; left: var(--sdb-s3); top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--sdb-red-hot); }
.sdb-hint p { margin: 0; font-size: var(--sdb-small); line-height: 1.5; color: var(--sdb-cr-1); }
.sdb-hint p b { display: block; color: var(--sdb-white); font-weight: var(--sdb-w-semi); }
.sdb-hint .sdb-btn { padding: 10px 18px; font-size: 14px; white-space: nowrap; color: var(--sdb-white); text-decoration: none; }
.sdb-hint .sdb-go { white-space: nowrap; }
@media (max-width: 600px) { .sdb-hint { grid-template-columns: 1fr; } .sdb-hint .sdb-btn, .sdb-hint .sdb-go { justify-self: start; } }

/* "What is it about?" as chips. WPForms renders a radio field as a list with
   the input before its label, so :checked + label does the work. */
.sdb-photo__form .wpforms-form .wpforms-field-radio ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sdb-photo__form .wpforms-form .wpforms-field-radio li { position: relative; margin: 0 !important; padding: 0 !important; }
.sdb-photo__form .wpforms-form .wpforms-field-radio li input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.sdb-photo__form .wpforms-form .wpforms-field-radio li label { display: block; margin: 0; padding: 10px 16px !important; border-radius: 999px; cursor: pointer; font-size: var(--sdb-small) !important; font-weight: var(--sdb-w-body) !important; color: var(--sdb-cr-1); background: var(--sdb-well); box-shadow: inset 0 0 0 1px rgba(244,247,249,.14); transition: box-shadow .3s ease, background-color .3s ease, color .3s ease; }
.sdb-photo__form .wpforms-form .wpforms-field-radio li label:hover { box-shadow: inset 0 0 0 1px rgba(244,247,249,.35); }
.sdb-photo__form .wpforms-form .wpforms-field-radio li input:checked + label { color: var(--sdb-white); background: rgba(204,89,68,.16); box-shadow: inset 0 0 0 1px var(--sdb-red-hot); }
.sdb-photo__form .wpforms-form .wpforms-field-radio li input:focus-visible + label { outline: var(--sdb-focus); outline-offset: 2px; }
.sdb-photo__form .wpforms-form .wpforms-field-html { padding-top: 0; margin-top: calc(var(--sdb-s2) * -1); }

/* Address in the showroom hero: a pin and a line, not a stat chip. */
.sdb-pinline { display: inline-flex; align-items: center; gap: 10px; margin: var(--sdb-s4) 0 0; font-size: var(--sdb-body); color: var(--sdb-white); text-decoration: none; }
.sdb-pinline .sdb-icon { width: 20px; height: 20px; stroke: var(--sdb-red-hot); stroke-width: 1.8; }
.sdb-pinline span { border-bottom: 1px solid rgba(244,247,249,.35); transition: border-color .3s ease; }
.sdb-pinline:hover span { border-color: var(--sdb-red-hot); }
.sdb-vhero .sdb-pinline + .sdb-shero__meta { margin-top: var(--sdb-s3); }
.sdb-room__facts address { font-style: normal; }

/* Seen against the real WPForms markup on staging, 2026-09-18. WPForms lays a
   radio list out as a grid and resets background, padding, radius and shadow
   on everything inside a form (div.wpforms-container-full .wpforms-form *),
   so the chips stacked and the hint lost its box. These answer at the same
   weight, scoped to the photo panel. */
.sdb-photo__form .wpforms-container .wpforms-form .wpforms-field-radio ul { display: flex !important; flex-wrap: wrap; gap: 8px; grid-template-columns: none !important; }
.sdb-photo__form .wpforms-container .wpforms-form .wpforms-field-radio li label { padding: 10px 16px !important; border-radius: 999px !important; background: var(--sdb-well) !important; box-shadow: inset 0 0 0 1px rgba(244,247,249,.14) !important; }
.sdb-photo__form .wpforms-container .wpforms-form .wpforms-field-radio li label:hover { box-shadow: inset 0 0 0 1px rgba(244,247,249,.35) !important; }
.sdb-photo__form .wpforms-container .wpforms-form .wpforms-field-radio li input:checked + label { color: var(--sdb-white); background: rgba(204,89,68,.16) !important; box-shadow: inset 0 0 0 1px var(--sdb-red-hot) !important; }
.sdb-photo__form .wpforms-container .wpforms-form .sdb-hint { padding: 14px var(--sdb-s3) 14px calc(var(--sdb-s3) + 18px) !important; border-radius: 8px !important; background: rgba(204,89,68,.10) !important; box-shadow: inset 0 0 0 1px rgba(204,89,68,.45) !important; }
.sdb-photo__form .wpforms-container .wpforms-form .sdb-hint::before { background: var(--sdb-red-hot) !important; border-radius: 50% !important; }
.sdb-photo__form .wpforms-container .wpforms-form .sdb-hint .sdb-btn { padding: 10px 18px !important; border-radius: var(--sdb-radius-btn) !important; background: var(--sdb-ember) !important; color: var(--sdb-white) !important; font-weight: var(--sdb-w-semi); }
.sdb-photo__form .wpforms-container .wpforms-form .sdb-hint .sdb-go i { display: block !important; width: 26px !important; height: 1px !important; background: var(--sdb-red-hot) !important; }
.sdb-photo__form .wpforms-container .wpforms-form .wpforms-field-html { padding-top: 0 !important; margin-top: calc(var(--sdb-s2) * -1) !important; padding-bottom: var(--sdb-s3) !important; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.sdb-people__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sdb-s4); margin-bottom: var(--sdb-s5); }
.sdb-people__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 18ch; }
.sdb-people__sub { margin: 0; max-width: 38ch; font-size: var(--sdb-small); color: var(--sdb-cr-3); text-align: right; }
.sdb-people__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sdb-s3); }
.sdb-person { position: relative; display: flex; align-items: flex-end; min-height: 560px; margin: 0; border-radius: 10px; overflow: hidden; isolation: isolate; background: var(--sdb-raised); }
.sdb-person__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--sdb-focus-pos, 50% 20%); }
.sdb-person::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(15,17,19,.96) 0%, rgba(15,17,19,.82) 30%, rgba(15,17,19,.15) 62%, transparent 100%); }
.sdb-person__body { padding: var(--sdb-s5); }
.sdb-person__quote { margin: 0 0 var(--sdb-s3); font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.2; color: var(--sdb-white); }
.sdb-person__cite { display: flex; align-items: center; gap: 12px; }
.sdb-person__cite::before { content: ""; width: 26px; height: 1px; background: var(--sdb-red-hot); }
.sdb-person__cite b { font-weight: var(--sdb-w-semi); color: var(--sdb-white); }
.sdb-person__cite span { font-size: var(--sdb-small); color: var(--sdb-cr-3); }
@media (max-width: 800px) { .sdb-people__head { display: block; } .sdb-people__sub { margin-top: var(--sdb-s2); text-align: left; } .sdb-people__grid { grid-template-columns: 1fr; } .sdb-person { min-height: 480px; } .sdb-person__body { padding: var(--sdb-s4); } }

.sdb-also__grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .sdb-also__grid--three { grid-template-columns: 1fr; } }

/* ---- The record, as a sentence ------------------------------------------------
   Three stat boxes in a row is the oldest pattern on the web (Vince: "a website
   from 2010"). The same three facts as one line of display type, the figures
   in ember, each clause lighting in turn when it scrolls in. One-shot. */
.sdb-record { padding-block: var(--sdb-s7) var(--sdb-s5); }
.sdb-record__line { margin: 0; max-width: 20ch; font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: clamp(2.25rem, 5.6vw, 4.75rem); line-height: 1.02; letter-spacing: -.025em; color: var(--sdb-white); }
.sdb-record__line span { display: block; opacity: .22; transition: opacity .9s ease; }
.sdb-record__line span:nth-child(2) { transition-delay: .45s; }
.sdb-record__line span:nth-child(3) { transition-delay: .9s; }
.sdb-record__line.is-lit span { opacity: 1; }
.sdb-record__line em { font-style: normal; color: var(--sdb-red-hot); background: linear-gradient(100deg, #E8907C 0%, #CC5944 45%, #C23A36 100%); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .sdb-record__line em { -webkit-background-clip: text; background-clip: text; color: transparent; } }
.sdb-record__note { margin: var(--sdb-s4) 0 0; max-width: 52ch; color: var(--sdb-cr-2); }
@media (prefers-reduced-motion: reduce) { .sdb-record__line span { opacity: 1; transition: none; } }

/* ---- The crew, in customers' words ---------------------------------------------- */
.sdb-crew__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sdb-s4); margin-bottom: var(--sdb-s5); }
.sdb-crew__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 18ch; }
.sdb-crew__sub { margin: 0; max-width: 36ch; font-size: var(--sdb-small); color: var(--sdb-cr-3); text-align: right; }
.sdb-crew__grid { columns: 3; column-gap: var(--sdb-s3); margin: 0; padding: 0; list-style: none; }
.sdb-crew__item { break-inside: avoid; margin: 0 0 var(--sdb-s3); padding: var(--sdb-s4); border-radius: 10px; background: var(--sdb-raised); }
.sdb-crew__item blockquote { margin: 0; font-size: var(--sdb-lead); line-height: 1.45; color: var(--sdb-white); }
.sdb-crew__item blockquote b { font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; color: var(--sdb-red-hot); }
.sdb-crew__item figcaption { margin-top: var(--sdb-s2); font-size: var(--sdb-tiny); color: var(--sdb-cr-3); }
.sdb-crew__item--big blockquote { font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }
@media (max-width: 900px) { .sdb-crew__head { display: block; } .sdb-crew__sub { margin-top: var(--sdb-s2); text-align: left; } .sdb-crew__grid { columns: 2; } }
@media (max-width: 600px) { .sdb-crew__grid { columns: 1; } }

/* Venue hero options. */
/* Only where a page sets a focus; the showroom hero keeps its own, including
   the different one it uses on phones. */
.sdb-vhero[style*="--sdb-focus-pos"] .sdb-vhero__img { object-position: var(--sdb-focus-pos); }
.sdb-vhero--wide .sdb-vhero__title { max-width: 14ch; }

/* ==========================================================================
   SAN DIEGO COUNTY (service locations) and city pages
   ========================================================================== */
.sdb-cover__panel { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); border-radius: 10px; overflow: hidden; background: var(--sdb-raised); }
.sdb-cover__map { position: relative; min-height: 560px; background: var(--sdb-well); overflow: hidden; }
/* Covers the column edge to edge (slice), so there is never a gap above or
   below it whatever height the text column makes the panel. */
.sdb-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sdb-map__reach { stroke: rgba(204, 89, 68, .38); stroke-width: 1; stroke-dasharray: 3 7; }
.sdb-map__border { fill: none; stroke: var(--sdb-cr-4); stroke-width: 1; stroke-dasharray: 2 6; }
.sdb-map__sea { fill: rgba(244,247,249,.035); }
.sdb-map__coast { fill: none; stroke: var(--sdb-cr-3); stroke-width: 1.5; stroke-linejoin: round; }
.sdb-map__label { fill: var(--sdb-cr-4); font-family: var(--sdb-font-body); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.sdb-map__city circle { fill: var(--sdb-ink); stroke: var(--sdb-cr-2); stroke-width: 1.5; transition: fill .4s ease, stroke .4s ease, r .4s ease; }
.sdb-map__city text { fill: var(--sdb-cr-2); font-family: var(--sdb-font-body); font-size: 13px; transition: fill .4s ease; }
.sdb-map__city.is-on circle { fill: var(--sdb-red-hot); stroke: var(--sdb-red-hot); r: 8; }
.sdb-map__city.is-on text { fill: var(--sdb-white); font-weight: 600; }
.sdb-map__city--base circle { fill: var(--sdb-red-hot); stroke: var(--sdb-red-hot); }
.sdb-map__city--base .halo { fill: rgba(204,89,68,.16); stroke: none; }
.sdb-map__city--base text { fill: var(--sdb-white); font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: 15px; }
.sdb-map__city--base text.sub { fill: var(--sdb-cr-3); font-family: var(--sdb-font-body); font-weight: 400; font-size: 12px; }

.sdb-cover__body { padding: var(--sdb-s6); display: flex; flex-direction: column; }
.sdb-cover__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sdb-cover__copy { margin: var(--sdb-s2) 0 var(--sdb-s4); max-width: 46ch; color: var(--sdb-text); }
.sdb-check { display: flex; gap: 10px; margin: 0; }
.sdb-check .sdb-btn { flex: none; padding-inline: 26px; }
.sdb-check input { flex: 1; min-width: 0; padding: 16px 18px; border: 0; border-radius: 6px; font: inherit; font-size: 1.0625rem; color: var(--sdb-white); background: var(--sdb-well); box-shadow: inset 0 0 0 1px rgba(244,247,249,.16); }
.sdb-check input::placeholder { color: var(--sdb-cr-4); }
.sdb-check input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--sdb-red-hot); }
.sdb-check__out { min-height: 76px; margin: var(--sdb-s3) 0 0; }
.sdb-check__out[hidden] { display: block; visibility: hidden; }
.sdb-answer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sdb-s2) var(--sdb-s3); padding: 14px var(--sdb-s3); border-radius: 8px; background: rgba(204,89,68,.10); box-shadow: inset 0 0 0 1px rgba(204,89,68,.45); }
.sdb-answer p { margin: 0; font-size: var(--sdb-small); color: var(--sdb-cr-1); }
.sdb-answer p b { display: block; font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: var(--sdb-h5); color: var(--sdb-white); }
.sdb-answer .sdb-btn { padding: 10px 18px; font-size: 14px; white-space: nowrap; }
.sdb-answer--no { background: rgba(244,247,249,.04); box-shadow: inset 0 0 0 1px rgba(244,247,249,.16); }

.sdb-regions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sdb-s4) var(--sdb-s5); margin-top: auto; padding-top: var(--sdb-s4); border-top: 1px solid var(--sdb-hairline); }
.sdb-region h3 { margin: 0 0 10px; font-family: var(--sdb-font-body); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-region ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sdb-region li > * { display: block; padding: 6px 12px; border-radius: 999px; font-size: var(--sdb-small); color: var(--sdb-cr-1); background: var(--sdb-well); box-shadow: inset 0 0 0 1px rgba(244,247,249,.12); text-decoration: none; cursor: default; transition: box-shadow .3s ease, color .3s ease; }
.sdb-region li > a { cursor: pointer; color: var(--sdb-white); box-shadow: inset 0 0 0 1px rgba(244,247,249,.3); }
.sdb-region li > *:hover, .sdb-region li > .is-on { box-shadow: inset 0 0 0 1px var(--sdb-red-hot); color: var(--sdb-white); }
@media (max-width: 900px) { .sdb-cover__panel { grid-template-columns: 1fr; } .sdb-cover__map { order: 2; min-height: 440px; } .sdb-cover__body { padding: var(--sdb-s4); } }
@media (max-width: 560px) { .sdb-regions { grid-template-columns: 1fr; } .sdb-check { flex-direction: column; } .sdb-answer { grid-template-columns: 1fr; } .sdb-answer .sdb-btn { justify-self: start; } }

/* Two services, written for a person, with structure */
.sdb-duo2__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sdb-s3); }
.sdb-svcpanel { display: flex; flex-direction: column; padding: var(--sdb-s5); border-radius: 10px; background: var(--sdb-raised); }
.sdb-svcpanel__when { margin: 0 0 var(--sdb-s2); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-svcpanel__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); max-width: 16ch; }
.sdb-svcpanel__copy { margin: var(--sdb-s3) 0; color: var(--sdb-text); }
/* The facts as a sentence in the display face, figures in ember, under a
   hairline. It replaced a three-cell stat grid (Vince: "so simple and
   WordPress-like"), the same objection as the step tiles and the about page's
   stat boxes. Boxes of numbers are out across the site. */
.sdb-svcpanel__line { margin: 0 0 var(--sdb-s4); padding-top: var(--sdb-s3); border-top: 1px solid var(--sdb-hairline); font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.3; letter-spacing: -.01em; color: var(--sdb-white); }
.sdb-svcpanel__line em { font-style: normal; color: var(--sdb-flame-text); }
.sdb-svcpanel .sdb-room__actions { margin-top: auto; }
@media (max-width: 900px) { .sdb-duo2__grid { grid-template-columns: 1fr; } .sdb-svcpanel { padding: var(--sdb-s4); } }

.sdb-near { padding-top: 0; }
.sdb-near__title { margin: 0 0 10px; font-family: var(--sdb-font-body); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }

/* ==========================================================================
   BOOK ONLINE
   The form is ServiceM8's, in a cross-origin iframe: its fields, its blue
   button and its white page cannot be styled from here, and ServiceM8 offers
   no appearance settings worth the name. It is also built like an app: it
   fills whatever height it is given, scrolls inside itself, and pins "Select
   a time" to its own bottom edge.

   Three layouts were tried. A very tall frame (to stop it scrolling) pushed
   the pinned button a screen and a half down. A window-sized frame in a
   normal page gave a scrolling form inside a scrolling page, which Vince
   called a conversion killer, and he is right: on a phone the two scrolls
   fight. So the page itself no longer scrolls. It is laid out as an app: the
   header, then the form filling the rest of the window. There is exactly one
   thing to scroll, the form, which is how ServiceM8 designed it to be used.
   The footer is dropped on this page, as checkouts do.

   body:has() does the page-level work with no template or PHP changes. A
   browser without :has() gets a normal scrolling page with a fixed-height
   frame, which is the previous behaviour.
   ========================================================================== */
.sdb-book { padding: 0; }
.sdb-book__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sdb-s7); align-items: start; padding-block: var(--sdb-s5); }
.sdb-book__when { margin: 0 0 var(--sdb-s2); font-size: 13px; font-weight: var(--sdb-w-semi); color: var(--sdb-flame-text); }
.sdb-book__title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.02; letter-spacing: -.015em; }
.sdb-book__lede { margin: var(--sdb-s3) 0 0; max-width: 40ch; font-size: var(--sdb-lead); color: var(--sdb-text); }
.sdb-book__line { margin: var(--sdb-s4) 0 0; padding-top: var(--sdb-s3); border-top: 1px solid var(--sdb-hairline); font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.3; color: var(--sdb-white); }
.sdb-book__line em { font-style: normal; color: var(--sdb-red-hot); }

.sdb-book__next { position: relative; display: grid; gap: var(--sdb-s3); margin: var(--sdb-s5) 0 0; padding: 0 0 0 28px; list-style: none; }
.sdb-book__next::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 1px; background: linear-gradient(180deg, #A82333, #CC5944); }
.sdb-book__next li { position: relative; }
.sdb-book__next li::before { content: ""; position: absolute; left: -28px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--sdb-red-hot); box-shadow: 0 0 0 4px rgba(204, 89, 68, .16); }
.sdb-book__next b { display: block; font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; color: var(--sdb-white); }
.sdb-book__next span { display: block; margin-top: 2px; font-size: var(--sdb-small); color: var(--sdb-cr-2); }

.sdb-book__else { margin: var(--sdb-s5) 0 0; padding-top: var(--sdb-s3); border-top: 1px solid var(--sdb-hairline); display: grid; gap: 10px; }
.sdb-book__else p { margin: 0; font-size: var(--sdb-small); color: var(--sdb-cr-3); }

.sdb-book__sheet { border-radius: 12px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(244, 247, 249, .14), 0 0 0 8px rgba(244, 247, 249, .04); }
.sdb-book__iframe { display: block; width: 100%; height: 760px; border: 0; background: #FFFFFF; }
.sdb-book__note { margin: var(--sdb-s2) 0 0; font-size: var(--sdb-tiny); color: var(--sdb-cr-4); text-align: center; }
.sdb-book__note a { color: var(--sdb-cr-2); }

/* The page as an app: nothing scrolls but the form. */
body:has(.sdb-book) { height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
body:has(.sdb-book) .sdb-header { flex: none; position: relative; }
body:has(.sdb-book) .sdb-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body:has(.sdb-book) .sdb-footer { display: none; }
body:has(.sdb-book) .sdb-book { flex: 1 1 auto; min-height: 0; display: flex; }
body:has(.sdb-book) .sdb-book__inner { flex: 1 1 auto; min-height: 0; align-items: stretch; }
body:has(.sdb-book) .sdb-book__aside { min-height: 0; overflow-y: auto; scrollbar-width: none; }
body:has(.sdb-book) .sdb-book__aside::-webkit-scrollbar { display: none; }
/* The aside scrolls on short screens, but with no scrollbar it looked cut off
   mid-link at 1440x900 (2026-10-14). Tighter rhythm on short viewports, and a
   fade at the foot so it reads as "more below"; the padding lets the last
   link clear the fade when scrolled to the end. */
@media (min-width: 901px) { body:has(.sdb-book) .sdb-book__aside { padding-bottom: 40px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); } }
@media (min-width: 901px) and (max-height: 980px) {
	.sdb-book__inner { padding-block: var(--sdb-s3); }
	.sdb-book__title { font-size: clamp(2rem, 3.6vw, 2.75rem); }
	.sdb-book__lede { margin-top: var(--sdb-s2); font-size: var(--sdb-body); }
	.sdb-book__line { margin-top: var(--sdb-s3); padding-top: var(--sdb-s2); }
	.sdb-book__next { margin-top: var(--sdb-s3); gap: var(--sdb-s2); }
	.sdb-book__else { margin-top: var(--sdb-s3); padding-top: var(--sdb-s2); gap: 6px; }
}
body:has(.sdb-book) .sdb-book__form { min-height: 0; display: flex; flex-direction: column; }
body:has(.sdb-book) .sdb-book__sheet { flex: 1 1 auto; min-height: 0; }
body:has(.sdb-book) .sdb-book__iframe { height: 100%; }

@media (max-width: 960px) {
	.sdb-book__inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: var(--sdb-s2); padding-block: var(--sdb-s2) 8px; }
	/* On a phone the window belongs to the form. The heading shrinks to one
	   line and the supporting copy goes; the phone number is in the header. */
	.sdb-book__when, .sdb-book__lede, .sdb-book__more, .sdb-book__note { display: none; }
	.sdb-book__title { font-size: 1.5rem; }
	.sdb-book__sheet { border-radius: 10px; }
	body:has(.sdb-book) .sdb-book__aside { overflow: visible; }
}

/* The offer pill in the front page hero, which is centred. */
.sdb-offerline--hero { margin-top: var(--sdb-s4); background: rgba(15, 17, 19, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---- Pricing, with room to breathe ---------------------------------------------
   Six things were stacked at one spacing: offer, heading, ruler, tiers, quote,
   small print. Now the offer stands apart, the tiers are larger and quieter
   (the strike-through already says "you save"), and the quote is set free of
   its box. Tiers turn into rows earlier, because three columns at tablet
   width is where it looked squeezed. */
.sdb-offer { margin-bottom: var(--sdb-s8); }
.sdb-price__head { margin-bottom: var(--sdb-s6); }
.sdb-price__ruler { margin-bottom: var(--sdb-s3); }
.sdb-tier { padding: var(--sdb-s5) var(--sdb-s5) var(--sdb-s5); }
.sdb-tier__name { font-size: var(--sdb-h4); }
.sdb-tier__price { margin-top: var(--sdb-s6); }
.sdb-tier__now { font-size: clamp(2.75rem, 4.6vw, 3.75rem); }
.sdb-tier .sdb-go { margin-top: var(--sdb-s5); }
.sdb-pquote { display: block; margin: var(--sdb-s7) auto 0; padding: 0; max-width: 46rem; text-align: center; background: none; border-radius: 0; }
.sdb-pquote__stars { display: flex; justify-content: center; gap: 3px; margin-bottom: var(--sdb-s3); }
.sdb-pquote blockquote { font-family: var(--sdb-font-display); font-variation-settings: "wdth" var(--sdb-display-wide); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.25; }
.sdb-pquote figcaption { margin-top: var(--sdb-s3); white-space: normal; }
.sdb-pquote figcaption b { display: inline; margin-right: 8px; }
.sdb-price__foot { margin: var(--sdb-s3) 0 0; }
/* Below 860px the tiers stack, so the ruler turns with them: a tape measure
   down the left edge, 35 and 42 marked where one size becomes the next. The
   ruler idea survives at every width, phones included. */
@media (max-width: 860px) {
	.sdb-price__measure { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 var(--sdb-s2); }
	.sdb-price__ruler { display: block !important; height: auto; width: 44px; margin: 0; border-bottom: 0; border-right: 1px solid rgba(244,247,249,.30);
		background:
			repeating-linear-gradient(180deg, rgba(244,247,249,.30) 0 1px, transparent 1px calc(100% / 30)) right / 8px 100% no-repeat,
			repeating-linear-gradient(180deg, rgba(244,247,249,.55) 0 1px, transparent 1px calc(100% / 6)) right / 14px 100% no-repeat; }
	.sdb-price__mark { left: auto !important; right: 0; bottom: auto; transform: translateY(-50%); flex-direction: row; gap: 4px; font-size: 11px; }
	.sdb-price__mark::after { width: 18px; height: 1px; }
	.sdb-price__mark--a { top: 33.333%; } .sdb-price__mark--b { top: 66.666%; }
	.sdb-price__span { left: auto !important; right: -1px; bottom: auto; width: 100%; height: 33.333%; }
	.sdb-price__span--1 { top: 0; } .sdb-price__span--2 { top: 33.333%; } .sdb-price__span--3 { top: 66.666%; }
	.sdb-price__span::before { inset: 0 0 0 auto; width: 14px; height: auto;
		background:
			repeating-linear-gradient(180deg, #CC5944 0 1px, transparent 1px calc(100% / 10)) right / 8px 100% no-repeat,
			repeating-linear-gradient(180deg, #E8907C 0 1px, transparent 1px calc(100% / 2)) right / 14px 100% no-repeat; }
	.sdb-price__span::after { left: auto; right: 0; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, #A82333, #CC5944); transform: scaleY(0); transform-origin: center top; }
	.sdb-price__span--3::after { bottom: 10px; right: 0; }
	.sdb-price__span--3 i { right: -4px; bottom: 0; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; border-top: 11px solid #CC5944; border-bottom: 0; }
	.sdb-price__span b { display: none; }
	.sdb-price:has(.sdb-tier:nth-child(1):is(:hover, :focus-visible)) .sdb-price__span--1::after,
	.sdb-price:has(.sdb-tier:nth-child(2):is(:hover, :focus-visible)) .sdb-price__span--2::after,
	.sdb-price:has(.sdb-tier:nth-child(3):is(:hover, :focus-visible)) .sdb-price__span--3::after { transform: scaleY(1); }
	.sdb-tier::before { width: 2px; height: 100%; right: auto; transform: scaleY(0); transform-origin: center top; background: linear-gradient(180deg, #A82333, #CC5944); }
	.sdb-tier:is(:hover, :focus-visible)::before { transform: scaleY(1); }
	.sdb-price__grid { grid-template-columns: 1fr; }
	.sdb-tier { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--sdb-s3); padding: var(--sdb-s4); }
	.sdb-tier__price { grid-column: 2; grid-row: 1 / span 2; margin: 0; flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
	.sdb-tier__now { font-size: 2.25rem; }
	.sdb-tier .sdb-go { display: none; }
	.sdb-offer { margin-bottom: var(--sdb-s6); }
}

/* ---- Ledger: three things worth knowing, set as type ------------------------------
   These were icon tiles, the pattern that has now been turned down four times.
   A heading on the left, three ruled rows on the right: a title in the
   display face, one sentence beside it. On hover the rule above the row runs
   ember and the title warms, the same gesture as the links. */
.sdb-ledger { padding-top: 0; }
.sdb-ledger__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sdb-s7); align-items: start; }
.sdb-ledger__title { font-size: clamp(1.6rem, 3vw, 2.25rem); max-width: 12ch; position: sticky; top: 120px; }
.sdb-ledger__rows { margin: 0; padding: 0; list-style: none; }
.sdb-ledger__row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sdb-s5); align-items: baseline; padding: var(--sdb-s5) 0; border-top: 1px solid var(--sdb-hairline); }
.sdb-ledger__row:last-child { border-bottom: 1px solid var(--sdb-hairline); }
.sdb-ledger__row::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #A82333, #CC5944 60%, transparent); transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.3,.7,.2,1); }
.sdb-ledger__row:hover::before { transform: scaleX(1); }
.sdb-ledger__row h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; color: var(--sdb-white); transition: color .4s ease, transform .5s cubic-bezier(.3,.7,.2,1); }
.sdb-ledger__row:hover h3 { color: var(--sdb-red-hot); transform: translateX(6px); }
.sdb-ledger__row p { margin: 0; color: var(--sdb-text); max-width: 46ch; }
@media (max-width: 860px) { .sdb-ledger__inner { grid-template-columns: 1fr; gap: var(--sdb-s4); } .sdb-ledger__title { position: static; max-width: none; } .sdb-ledger__row { grid-template-columns: 1fr; gap: var(--sdb-s2); padding: var(--sdb-s4) 0; } }
@media (prefers-reduced-motion: reduce) { .sdb-ledger__row::before, .sdb-ledger__row h3 { transition: none; } }
/* Part chips on touch screens: 44px tall (were 28px). */
@media (pointer: coarse) {
	.sdb-partbtn { min-height: 44px; padding: 10px 14px; }
	.sdb-step__checks .sdb-partbtn { min-height: 44px; align-items: center; }
}

/* Photo and consultation forms on phones: heading and one line, then the
   fields, then the shot tips. Tips first put the form two screens down. */
@media (max-width: 900px) {
  .sdb-photo__panel { display: flex; flex-direction: column; background: linear-gradient(170deg, #2B2225 0%, var(--sdb-raised) 40%); }
  .sdb-photo__side { display: contents; }
  .sdb-photo__title, .sdb-photo__copy { order: 1; padding: 0 var(--sdb-s4); }
  .sdb-photo__title { padding-top: var(--sdb-s4); }
  .sdb-photo__form { order: 2; }
  .sdb-photo__label { order: 3; margin-top: 0; padding: 0 var(--sdb-s4); }
  .sdb-shots { order: 4; padding: 0 var(--sdb-s4); }
  .sdb-photo__tel { order: 5; padding: var(--sdb-s4); }
  .sdb-photo__side > :last-child:not(.sdb-photo__tel) { margin-bottom: var(--sdb-s4); }
}

/* Repair visit card: the photo is the way to a price, so it gets the button,
   pinned to the bottom so the two cards end level. */
.sdb-path__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sdb-s2) var(--sdb-s4); margin-top: auto; padding-top: var(--sdb-s4); }
.sdb-path__actions .sdb-go { margin-top: 0; padding-top: 0; }

/* FAQ fold on phones (assets/js/facts.js). The question becomes the
   button; the headline answer stays visible, the detail opens on tap. */
.sdb-fact__toggle { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: var(--sdb-s2); width: 100%; min-height: 44px; cursor: pointer; font: inherit; color: inherit; }
.sdb-fact__toggle::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--sdb-red-hot); border-bottom: 1.5px solid var(--sdb-red-hot); transform: translateY(-2px) rotate(45deg); transition: transform .3s ease; }
.sdb-fact.is-open .sdb-fact__toggle::after { transform: translateY(2px) rotate(-135deg); }
.sdb-fact__toggle:focus-visible { outline: var(--sdb-focus); outline-offset: 4px; border-radius: 4px; }
.sdb-faq--fold .sdb-fact:not(.sdb-fact--ask) { cursor: pointer; }
.sdb-faq--fold .sdb-fact:not(.sdb-fact--ask) .sdb-fact__q { margin-bottom: var(--sdb-s1); }
.sdb-faq--fold .sdb-fact:not(.sdb-fact--ask):not(.is-open) .sdb-fact__body { display: none; }
.sdb-faq--fold .sdb-fact:not(.sdb-fact--ask):not(.is-open) .sdb-fact__a { margin-bottom: 0; }
.sdb-faq--fold .sdb-faq__grid { gap: var(--sdb-s2); }
@media (prefers-reduced-motion: reduce) { .sdb-fact__toggle::after { transition: none; } }