/* =================================================================
   COMPONENT LIBRARY — reusable, token-driven blocks. Every visual
   property reads a --suds-* token, so swapping [data-arch] /
   [data-hero] on <html> re-skins every component. No colors, fonts,
   or shapes are hardcoded here — that is the archetype layer's job.
   Used site-wide (home + service/location + pages).
   ================================================================= */

/* ---- media placeholder / image frame ---- */
.suds-ph {
	position: relative; overflow: hidden;
	border-radius: var(--suds-radius-lg);
	background: repeating-linear-gradient(135deg, var(--suds-ph-stripe-a) 0 14px, var(--suds-ph-stripe-b) 14px 28px);
	border: var(--suds-ph-border);
	display: grid; place-items: center;
	min-height: 220px;
	color: var(--suds-muted);
	box-shadow: var(--suds-media-shadow);
}
.suds-ph > img { width: 100%; height: 100%; object-fit: cover; filter: var(--suds-img-grade, none); }
.suds-areas-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.suds-ph[data-label]::after {
	content: attr(data-label);
	font-family: var(--suds-font-mono); font-size: .72rem; letter-spacing: .04em;
	color: color-mix(in srgb, var(--suds-ink) 55%, transparent);
	background: color-mix(in srgb, var(--suds-bg) 78%, transparent);
	padding: .35em .7em; border-radius: 6px; max-width: 80%; text-align: center; backdrop-filter: blur(2px);
}
.suds-ph.tall { min-height: 440px; }
.suds-ph.hero-ph { min-height: var(--suds-hero-ph-h, 460px); }

/* ---- image slider (reuses the .suds-ph frame; CSS scroll-snap + app.js controls) ---- */
.suds-slider { padding: 0; }
.suds-slider-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.suds-slider-track::-webkit-scrollbar { width: 0; height: 0; }
.suds-slider-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.suds-slider-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suds-slider::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(8, 12, 20, .42), transparent); }
.suds-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.1rem; color: var(--suds-ink); background: color-mix(in srgb, var(--suds-bg) 86%, transparent); backdrop-filter: blur(4px); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55); transition: background var(--suds-dur) var(--suds-ease), transform var(--suds-dur) var(--suds-ease); }
.suds-slider-arrow:hover { background: var(--suds-bg); transform: translateY(-50%) scale(1.06); }
.suds-slider-arrow.prev { left: 14px; }
.suds-slider-arrow.next { right: 14px; }
.suds-slider-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; gap: 7px; justify-content: center; }
.suds-slider-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: color-mix(in srgb, var(--suds-bg) 55%, transparent); transition: width var(--suds-dur) var(--suds-ease), background var(--suds-dur) var(--suds-ease); }
.suds-slider-dot.is-active { width: 22px; border-radius: 5px; background: var(--suds-bg); }
@media (prefers-reduced-motion: reduce) { .suds-slider-track { scroll-behavior: auto; } }

/* ---- accessibility layer -------------------------------------------------
   Focus ring: token-tinted :focus-visible so keyboard users always see where
   they are (mouse clicks stay ring-free). Reduced motion: the reveal entrance,
   hover lifts, and smooth scrolling all collapse to instant — content is never
   hidden or moved for motion-sensitive visitors. (The skip link itself comes
   from the BCB parent — see the note in inc/theme-setup.php.) */
:focus-visible { outline: 2px solid var(--suds-primary, #2563eb); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.suds-reveal, .suds-reveal.in { transition: none !important; transform: none !important; }
	.suds-btn-primary, .suds-btn-light, .suds-btn-accent, .suds-btn-ghost,
	.suds-svc, .suds-loc-card, .suds-gal-item img, .suds-quote, .suds-amen { transition: none !important; }
	.suds-btn-primary:hover, .suds-btn-light:hover, .suds-btn-accent:hover, .suds-btn-ghost:hover,
	.suds-svc:hover, .suds-loc-card:hover, .suds-gal-item:hover img, .suds-quote:hover, .suds-amen:hover { transform: none !important; }
	html { scroll-behavior: auto !important; }
}

/* ---- hero (one markup; layout flips per [data-hero] via grid tokens) ---- */
.suds-hero { position: relative; overflow: hidden; background: var(--suds-hero-bg); color: var(--suds-hero-fg); }
/* Statpanel hero with a featured image: the foreground media is hidden, so the
   photo becomes the section background behind a semi-transparent brand-gradient
   scrim (keeps it on-brand + keeps the copy readable). Other [data-hero] layouts
   show the photo as foreground media and are unaffected. The image url is set as
   an inline --suds-hero-bg-image custom property by template-parts/home/home-hero.php. */
[data-hero="statpanel"] .suds-hero.has-hero-bg {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--suds-ink) 88%, transparent) 0%, color-mix(in srgb, var(--suds-secondary) 72%, transparent) 100%),
		var(--suds-hero-bg-image) center / cover no-repeat,
		var(--suds-hero-bg);
}
/* Optional full-bleed hero BACKGROUND photo — works with ANY [data-hero] layout.
   The chosen photo (--suds-hero-bg-image, set inline by home-hero.php) fills the
   section behind a readability scrim with light text. The split/centered foreground
   framed photo stays layered ON TOP (background scene + foreground shot), and each
   layout's float/stat/form card still overlays. */
.suds-hero.has-bg-photo {
	--suds-hero-fg: #fff;
	--suds-hero-h1: #fff;
	--suds-hero-lead: #E7ECF4;
	background:
		linear-gradient(90deg, rgba(8, 12, 20, .82) 0%, rgba(8, 12, 20, .62) 52%, rgba(8, 12, 20, .42) 100%),
		var(--suds-hero-bg-image) center / cover no-repeat,
		var(--suds-hero-bg);
}
.suds-hero.has-bg-photo .suds-eyebrow { color: #fff; }
/* Fullbleed paints the FOREGROUND photo as its OWN full-bleed bg + scrim, which would
   cover the dedicated background — so on fullbleed hide that foreground and drop the
   now-duplicate scrim, letting the dedicated background show through. */
[data-hero="fullbleed"] .suds-hero.has-bg-photo .suds-hero-media .suds-ph { display: none; }
[data-hero="fullbleed"] .suds-hero.has-bg-photo::after { display: none; }
.suds-hero .suds-wrap { display: grid; gap: var(--suds-hero-gap); align-items: center; padding-block: var(--suds-hero-pad); grid-template-columns: var(--suds-hero-cols); }
.suds-hero-copy { position: relative; z-index: 2; max-width: var(--suds-hero-copy-max, none); }
.suds-hero h1 { font-size: var(--suds-h1); margin-bottom: 1.3rem; color: var(--suds-hero-h1, inherit); }
.suds-hero .suds-lead { font-size: var(--suds-lead); line-height: 1.5; color: var(--suds-hero-lead, inherit); max-width: 46ch; margin-bottom: 2rem; }
.suds-hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.suds-hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 2.4rem; align-items: center; }
.suds-hero-trust .ht { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; font-family: var(--suds-font-header); }
.suds-hero-trust .ht b { font-size: 1.55rem; line-height: 1; }
.suds-hero-trust .stars { color: var(--suds-accent); letter-spacing: .1em; }
.suds-hero-trust a.ht { color: inherit; text-decoration: none; }
.suds-hero-trust a.ht:hover { text-decoration: underline; text-underline-offset: 3px; }
.suds-hero-media { position: relative; z-index: 1; }
/* hero photo is frameless across every layout + skin (board flag): drop the shared
   --suds-ph-border on hero media only; other media frames keep their border. The
   soft --suds-media-shadow still lifts the photo. */
.suds-hero-media .suds-ph { border: 0; }
/* why_panel image is frameless too (board flag) — the shared --suds-ph-border reads
   as a hard outline on the why band; drop it (the media shadow still lifts the photo).
   Only the why_panel uses .suds-ph inside .suds-s-why; why_tiles uses its own tiles. */
.suds-s-why .suds-ph { border: 0; }
/* ghost buttons in the hero adopt the hero foreground so they stay legible on dark/light bands */
.suds-hero .suds-btn-ghost { --_fg: var(--suds-hero-fg, var(--suds-ink)); color: var(--suds-hero-fg, var(--suds-ink)); border-color: color-mix(in srgb, var(--suds-hero-fg, var(--suds-ink)) 48%, transparent); }
.suds-hero .suds-btn-ghost:hover { background: color-mix(in srgb, var(--suds-hero-fg, var(--suds-ink)) 14%, transparent); }

/* ---- services grid ---- */
.suds-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--suds-gap); }
@media (max-width: 980px) { .suds-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .suds-svc-grid { grid-template-columns: 1fr; } }

/* ---- locations grid: count-adaptive -------------------------------------
   The locations archive sizes its columns to the number of PUBLISHED locations
   automatically — two locations → two equal-width columns filling the row, three
   → three, and so on — so a small count never sits in a half-empty 3/4-column
   grid. auto-fit collapses the unused tracks and the remaining cards share the
   width equally; the minmax floor wraps them to fewer columns as the viewport
   narrows (one per row on phones) with no per-count media queries. A site with a
   SINGLE location skips this archive entirely — see the template_redirect in
   inc/template-router.php. Reusable canonical behaviour across every Suds site. */
.suds-loc-grid { display: grid; gap: var(--suds-gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* ---- count-adaptive service listings -------------------------------------
   Opt-in modifier for the service LISTINGS whose item count varies per site —
   the /services/ archive and the "More services" related grid. Same behaviour
   as .suds-loc-grid: as many equal-width columns as there are cards, filling the
   row (2 services → 2 columns, 3 → 3), collapsing responsively via the minmax
   floor. Compound selector (.suds-svc-grid.suds-grid-auto) so it overrides the
   base grid's fixed columns AND its ≤980/≤560 media rules at every width without
   depending on source order. Home service sections keep the fixed grid — they're
   curated, not count-driven — unless they add this class. A single published
   service skips the archive (redirect in inc/template-router.php). */
.suds-svc-grid.suds-grid-auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* ---- section option knobs ----------------------------------------------
   Operator-chosen, constrained values emitted as data-opt-* on the section root
   by sbs_section_opts_attr(). Every value maps to an archetype-token state, so a
   knob re-skins WITHIN the system and can never break it. Absent attribute = the
   archetype default (no rule applies), so default sections render unchanged. */
.suds-section[data-opt-density="compact"]  { --suds-pad-section: clamp(2.25rem, 4.5vw, 3.25rem); }
.suds-section[data-opt-density="spacious"] { --suds-pad-section: clamp(5.5rem, 9vw, 8.5rem); }
.suds-section[data-opt-align="center"] .suds-section-head { margin-inline: auto; text-align: center; }
.suds-section[data-opt-columns="2"] .suds-svc-grid { grid-template-columns: repeat(2, 1fr); }
.suds-section[data-opt-columns="3"] .suds-svc-grid { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 561px) { .suds-section[data-opt-columns="4"] .suds-svc-grid { grid-template-columns: repeat(4, 1fr); } }
/* Reviews grid honors the same columns knob; gated above the panel's 860px collapse so mobile still stacks. */
@media (min-width: 861px) {
	.suds-section[data-opt-columns="2"] .suds-quotes { grid-template-columns: repeat(2, 1fr); }
	.suds-section[data-opt-columns="4"] .suds-quotes { grid-template-columns: repeat(4, 1fr); }
}
.suds-svc {
	background: var(--suds-card-bg); border: var(--suds-card-border); border-radius: var(--suds-radius);
	padding: var(--suds-card-pad); box-shadow: var(--suds-card-shadow);
	transition: transform var(--suds-dur) var(--suds-ease), box-shadow var(--suds-dur) var(--suds-ease), border-color var(--suds-dur) var(--suds-ease);
	position: relative; overflow: hidden;
}
.suds-svc:hover { transform: var(--suds-card-hover-t); box-shadow: var(--suds-card-shadow-hover); border-color: var(--suds-card-hover-border, var(--suds-primary)); }
.suds-svc .ic { width: var(--suds-icon-box); height: var(--suds-icon-box); border-radius: var(--suds-icon-radius); display: grid; place-items: center; background: var(--suds-icon-bg); color: var(--suds-icon-fg); font-size: calc(var(--suds-icon-box) * .5); margin-bottom: 1.3rem; }
.suds-svc h3 { font-size: var(--suds-fs-card-head, 1.32rem); margin-bottom: .55rem; }
.suds-svc p { color: var(--suds-muted); font-size: .98rem; margin-bottom: 1.1rem; }
.suds-svc .more { font-family: var(--suds-font-header); font-weight: 700; font-size: .9rem; color: var(--suds-primary); display: inline-flex; gap: .4em; align-items: center; }
.suds-svc .badge { position: absolute; top: var(--suds-card-pad); right: var(--suds-card-pad); font-family: var(--suds-font-header); font-weight: 700; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: .3em .6em; border-radius: 999px; background: var(--suds-accent); color: var(--suds-on-accent); }

/* ---- how-it-works steps ---- */
/* auto-fit so N steps fill the row as N equal columns (3 steps span full width instead
   of leaving an empty 4th) — 220px min caps it at 4 across, matching the old max. */
.suds-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--suds-gap); counter-reset: step; }
@media (max-width: 860px) { .suds-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .suds-steps { grid-template-columns: 1fr; } }
.suds-step { position: relative; padding-top: 1rem; }
.suds-step .n { counter-increment: step; font-family: var(--suds-font-header); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--suds-step-num-color); -webkit-text-stroke: var(--suds-step-num-stroke); margin-bottom: .8rem; display: block; }
.suds-step .n::before { content: counter(step, decimal-leading-zero); }
.suds-step h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.suds-step p { color: var(--suds-muted); font-size: .95rem; }
.suds-step:not(:last-child)::after { content: var(--suds-step-connector, ""); position: absolute; top: 1.6rem; right: -.6rem; color: var(--suds-primary); opacity: .35; font-size: 1.4rem; }

/* ---- amenities / why-us icon grid ---- */
.suds-amen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--suds-amen-gap, var(--suds-gap)); }
@media (max-width: 820px) { .suds-amen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .suds-amen-grid { grid-template-columns: 1fr; } }
.suds-amen { display: flex; gap: 1rem; align-items: flex-start; padding: var(--suds-amen-pad, 1.3rem); border-radius: var(--suds-radius); background: var(--suds-amen-bg, transparent); border: var(--suds-amen-border, none); transition: transform var(--suds-dur) var(--suds-ease), background-color var(--suds-dur) var(--suds-ease); }
.suds-amen:hover { transform: var(--suds-amen-hover-t, none); background: var(--suds-amen-hover-bg, var(--suds-amen-bg, transparent)); }
.suds-amen .ic { flex: none; width: 46px; height: 46px; border-radius: var(--suds-icon-radius); display: grid; place-items: center; background: var(--suds-icon-bg); color: var(--suds-icon-fg); font-size: 1.3rem; }
.suds-amen h4 { font-size: var(--suds-fs-card-head, 1.04rem); margin-bottom: .2rem; }
.suds-amen p { font-size: .9rem; color: var(--suds-muted); }

/* ---- feature split (why choose) ---- */
.suds-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 880px) { .suds-split { grid-template-columns: 1fr; } }
.suds-feat-list { display: grid; gap: 1.1rem; margin-top: 1.8rem; padding: 0; }
.suds-feat-list li { list-style: none; display: flex; gap: .8rem; align-items: flex-start; font-size: 1.02rem; }
.suds-feat-list .tick { flex: none; width: 26px; height: 26px; border-radius: var(--suds-tick-radius, 50%); background: var(--suds-primary); color: var(--suds-on-primary); display: grid; place-items: center; font-size: .8rem; font-weight: 800; margin-top: 2px; }

/* ---- service-area chips ---- */
.suds-areas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.suds-chip { font-family: var(--suds-font-header); font-weight: 600; font-size: .92rem; padding: .5em 1em; border-radius: var(--suds-chip-radius, 999px); background: var(--suds-chip-bg); color: var(--suds-chip-fg); border: var(--suds-chip-border, none); transition: transform var(--suds-dur) var(--suds-ease), background-color var(--suds-dur) var(--suds-ease), color var(--suds-dur) var(--suds-ease); }
.suds-chip:hover { transform: translateY(-2px); background: var(--suds-primary); color: var(--suds-on-primary); }
.suds-chip.lead-chip { background: var(--suds-primary); color: var(--suds-on-primary); }

/* ---- testimonials ---- */
/* Google-listing badge (reviews panel head) — real data only, see home-quotes.php */
.suds-google-badge { text-align: center; margin: -1.4rem 0 2.2rem; font-weight: 600; font-family: var(--suds-font-header); font-size: 1.02rem; }
.suds-google-badge .stars { color: var(--suds-accent); }
.suds-google-badge a { color: var(--suds-accent); text-underline-offset: 3px; }

/* Third-party reviews widget (Elfsight/Google embed) sits on a LIGHT card so it stays
   legible on any band tone — the express/premium quotes band is dark (--band-quotes:
   --ink), and an embed's own colors are built for a light background. Mirrors the quote
   card's surface so it reads as an intentional panel. */
.suds-reviews-embed { max-width: 860px; margin-inline: auto; background: var(--suds-card-bg); border: var(--suds-card-border); border-radius: var(--suds-radius-lg); padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--suds-card-shadow); }

.suds-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--suds-gap); }
@media (max-width: 860px) { .suds-quotes { grid-template-columns: 1fr; } }
.suds-quote { background: var(--suds-card-bg); border: var(--suds-card-border); border-radius: var(--suds-radius); padding: var(--suds-card-pad); box-shadow: var(--suds-card-shadow); display: flex; flex-direction: column; gap: 1rem; }
.suds-quote .stars { color: var(--suds-accent); letter-spacing: .12em; font-size: 1.05rem; }
.suds-quote blockquote { margin: 0; font-size: 1.06rem; line-height: 1.5; font-family: var(--suds-quote-font, var(--suds-font-body)); font-style: var(--suds-quote-style, normal); }
.suds-quote .who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
/* `.suds-who .av` (not `.suds-quote .av`) so it out-specifies the sibling
   `.suds-quote .who span` rule below — otherwise the initials inherit its
   display:block + muted color and sit top-left instead of centered. */
.suds-quote .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--suds-secondary); color: var(--suds-on-secondary, #fff); display: grid; place-items: center; font-family: var(--suds-font-header); font-weight: 700; font-size: .9rem; line-height: 1; flex: none; }
.suds-quote .who b { font-family: var(--suds-font-header); font-size: .96rem; }
.suds-quote .who span { display: block; font-size: .82rem; color: var(--suds-muted); }

/* ---- final CTA band ---- */
.suds-cta-band { background: var(--suds-cta-bg, var(--suds-ink)); color: var(--suds-cta-fg, var(--suds-bg)); border-radius: var(--suds-cta-radius, var(--suds-radius-lg)); overflow: hidden; position: relative; }
.suds-cta-band .inner { display: grid; grid-template-columns: var(--suds-cta-cols, 1.3fr .7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: var(--suds-cta-pad, clamp(2.4rem, 5vw, 4rem)); }
@media (max-width: 820px) { .suds-cta-band .inner { grid-template-columns: 1fr; } }
.suds-cta-band h2 { font-size: var(--suds-h2); margin-bottom: 1rem; color: var(--suds-cta-h, inherit); }
.suds-cta-band p { font-size: 1.1rem; opacity: .9; margin-bottom: 1.8rem; max-width: 46ch; }
.suds-cta-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.suds-cta-phone { font-family: var(--suds-font-header); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.01em; display: block; color: inherit; text-decoration: none; }
.suds-cta-phone small { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-bottom: .3rem; }

/* ---- small token-referencing helpers (avoid inline styles in templates) ---- */
.suds-fs-h1 { font-size: var(--suds-h1); }
.suds-fs-h2 { font-size: var(--suds-h2); margin-bottom: 1rem; }
.suds-lead-muted { font-size: 1.08rem; color: var(--suds-muted); }
.suds-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; align-items: center; }
.suds-prose { max-width: 64ch; }
.suds-prose p { margin-bottom: 1rem; color: var(--suds-ink); }
.suds-mt-gap { margin-top: 3rem; }

/* ---- pricing cards ---- */
.suds-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--suds-gap); }
@media (max-width: 820px) { .suds-price-grid { grid-template-columns: 1fr; } }
.suds-price { background: var(--suds-card-bg); border: var(--suds-card-border); border-radius: var(--suds-radius); padding: var(--suds-card-pad); box-shadow: var(--suds-card-shadow); }
.suds-price .plan { font-family: var(--suds-font-header); font-weight: 700; font-size: 1.1rem; }
.suds-price .amount { font-family: var(--suds-font-header); font-weight: 800; font-size: 2.2rem; color: var(--suds-primary); margin: .3rem 0; }
.suds-price .note { font-size: .9rem; color: var(--suds-muted); }

/* ---- info block (location) ---- */
.suds-infogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--suds-gap); }
@media (max-width: 720px) { .suds-infogrid { grid-template-columns: 1fr; } }
.suds-infocard { background: var(--suds-card-bg); border: var(--suds-card-border); border-radius: var(--suds-radius); padding: var(--suds-card-pad); box-shadow: var(--suds-card-shadow); }
.suds-infocard h3 { font-size: var(--suds-fs-card-head, 1.05rem); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.suds-infocard h3 .bi { color: var(--suds-primary); }
.suds-map { border-radius: var(--suds-radius-lg); overflow: hidden; border: var(--suds-ph-border); box-shadow: var(--suds-media-shadow); }
.suds-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---- FAQ accordion ---- */
/* Full-width 2-column accordion so the FAQ spans the container and lines up with the
   sections above/below (board flag). Grid (not multicol) keeps each item in place when
   it expands instead of reflowing across columns. Collapses to one column on small screens. */
.suds-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem clamp(1.4rem, 3vw, 2.6rem); align-content: start; }
@media (max-width: 720px) { .suds-faq { grid-template-columns: 1fr; } }
.suds-faq details { border: var(--suds-card-border); border-radius: var(--suds-radius); background: var(--suds-card-bg); padding: 1.1rem 1.3rem; align-self: start; }
.suds-faq summary { font-family: var(--suds-font-header); font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.suds-faq summary::-webkit-details-marker { display: none; }
.suds-faq summary::after { content: "\002B"; color: var(--suds-primary); font-size: 1.4rem; line-height: 1; }
.suds-faq details[open] summary::after { content: "\2212"; }
.suds-faq details > div { margin-top: .8rem; color: var(--suds-muted); }

/* ==========================================================================
   Section band engine — archetype-assigned background rhythm.
   Archetypes assign --suds-band-{category} tokens (referencing CLIENT
   colour tokens only — never raw brand hexes) to give each page an
   alternating cream/tint/ink flow instead of a flat scroll. Unset token =
   transparent = the pre-band flat background. Text flips for dark "brand
   moment" bands live in archetypes.css scoped per [data-arch]; components
   with their own surfaces (cards, chips, ticks, buttons, photos) keep their
   tokens and pop against a dark band.
   ========================================================================== */
.suds-s-services,
.suds-s-services-list,
.suds-s-services-iconrow { background: var(--suds-band-services, transparent); }
.suds-s-how,
.suds-s-steprow,
.suds-s-steps-vertical { background: var(--suds-band-how, transparent); }
.suds-s-areas,
.suds-s-areas-columns,
.suds-s-areas-map { background: var(--suds-band-areas, transparent); }
.suds-s-why      { background: var(--suds-band-why, transparent); }
.suds-s-quotes   { background: var(--suds-band-quotes, transparent); }
.suds-s-story,
.suds-s-story-split,
.suds-s-story-values { background: var(--suds-band-story, transparent); }
.suds-s-payment  { background: var(--suds-band-payment, transparent); }

/* sample-reviews footnote (home-quotes.php) — class instead of inline style so
   dark quote bands can restyle it */
.suds-sample-note { text-align: center; margin-top: 1.6rem; font-size: .8rem; color: var(--suds-muted); font-family: var(--suds-font-mono); }

/* ---- Band texture layer (asset-free art direction) ----------------------
   Archetypes may set --suds-band-texture (an SVG data-URI used as a MASK)
   on their dark brand-moment band. The pattern is tinted by -texture-color and
   kept subtle by -texture-opacity, so every client gets a designed backdrop
   with ZERO client assets — claim-safe generated brand art, never fake photos.
   Unset = no overlay (opacity defaults to 0). Premium deliberately sets none. */
.suds-s-why::before,
.suds-s-quotes::before,
.suds-s-story::before,
.suds-s-story-split::before,
.suds-s-story-values::before,
.suds-s-hours-strip::before,
.suds-section[data-opt-tone="dark"]::before,
.suds-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var(--suds-band-texture-color, #fff);
	opacity: var(--suds-band-texture-opacity, 0);
	-webkit-mask-image: var(--suds-band-texture, none);
	mask-image: var(--suds-band-texture, none);
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: var(--suds-band-texture-size, auto);
	mask-size: var(--suds-band-texture-size, auto);
}
.suds-s-why > .suds-wrap,
.suds-s-quotes > .suds-wrap,
.suds-s-story > .suds-wrap,
.suds-s-story-split > .suds-wrap,
.suds-s-story-values > .suds-wrap,
.suds-s-hours-strip > .suds-wrap,
.suds-section[data-opt-tone="dark"] > .suds-wrap { position: relative; }
/* Dark page header ships the archetype texture (bubble/dot pattern) visible by default —
   the section-scoped opacity opt-in the bands use doesn't reach page_header. The texture-off
   override ([data-arch] …[data-opt-tone="dark"], higher specificity) still zeroes it. */
.suds-s-page-header[data-opt-tone="dark"] { --suds-band-texture-opacity: .07; }
/* the dark CTA card is a rounded surface — clip its texture to the radius */
.suds-cta-band { position: relative; overflow: hidden; }
.suds-cta-band > * { position: relative; }

/* ---- reusable form (.suds-form) ----
   Wrap any embedded WPForms shortcode in .suds-form to theme it so it matches
   the site — themed inputs, labels, and a brand pill submit button. Works by
   overriding WPForms' "modern" CSS variables with the theme tokens (the form
   keeps its own markup + validation, just adopts our look). !important is needed
   to win over WPForms' per-form (#wpforms-NN) variable values. Ported from the
   t2-laundry fix — a fresh build's contact form matches the site by default. */
.suds-form .wpforms-container-full {
	--wpforms-field-border-radius: var(--suds-radius) !important;
	--wpforms-field-border-style: solid !important;
	--wpforms-field-border-size: 1.5px !important;
	--wpforms-field-border-color: color-mix(in srgb, var(--suds-ink) 16%, transparent) !important;
	--wpforms-field-background-color: var(--suds-bg) !important;
	--wpforms-field-text-color: var(--suds-ink) !important;
	--wpforms-field-menu-color: var(--suds-bg) !important;
	--wpforms-label-color: var(--suds-ink) !important;
	--wpforms-label-sublabel-color: var(--suds-muted) !important;
	--wpforms-button-background-color: var(--suds-primary) !important;
	--wpforms-button-text-color: var(--suds-on-primary, #fff) !important;
	--wpforms-button-border-radius: var(--suds-btn-radius, 999px) !important;
	--wpforms-button-border-style: solid !important;
	--wpforms-button-border-size: 0 !important;
	--wpforms-button-border-color: var(--suds-primary) !important;
	--wpforms-button-size-padding-h: 1.9rem !important;
}
.suds-form .wpforms-field-label { font-family: var(--suds-font-header); font-weight: 700; }
.suds-form .wpforms-required-label { color: var(--suds-primary); }
/* Full-width fields regardless of WPForms' size class — cleaner in our card layouts. */
.suds-form .wpforms-field { max-width: 100%; padding-left: 0; padding-right: 0; }
.suds-form .wpforms-field input:not([type="checkbox"]):not([type="radio"]),
.suds-form .wpforms-field textarea,
.suds-form .wpforms-field select,
.suds-form .wpforms-field-row { width: 100%; max-width: 100%; }
.suds-form .wpforms-field input:focus,
.suds-form .wpforms-field textarea:focus,
.suds-form .wpforms-field select:focus {
	border-color: var(--suds-primary) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--suds-primary) 18%, transparent) !important;
	outline: none;
}
.suds-form .wpforms-submit {
	font-family: var(--suds-font-header);
	font-weight: var(--suds-fw-btn, 700);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.suds-form .wpforms-submit:hover {
	transform: var(--suds-btn-hover-t, translateY(-2px));
	box-shadow: var(--suds-card-shadow-hover, 0 14px 30px -14px color-mix(in srgb, var(--suds-primary) 50%, transparent));
}

/* Card-heading treatment axis — archetype-tunable (e.g. basecamp ALL-CAPS card
   titles). Inert for archetypes that don't set the tokens. Display headings
   (h1/h2/featured titles) intentionally excluded. */
.suds-svc h3, .suds-svc-row h3, .suds-amen h4, .suds-amen-feature-card h3,
.suds-value-card h3, .suds-loc-top h3, .suds-svcfeat-row h4, .suds-infocard h3 {
	text-transform: var(--suds-tt-card-head, none);
	letter-spacing: var(--suds-ls-card-head, normal);
}

/* ==========================================================================
   Band-edge axis — organic section dividers (torn / wave / angle).
   Each banded section paints an ::after strip in its OWN band color that
   bites down into the next section through an alpha SVG mask. Neighbors
   sharing a color paint same-on-same (invisible), so transitions appear
   automatically — no adjacency logic. Inert unless an archetype or the
   operator sets --suds-edge-display + --suds-edge-mask (basecamp
   does; operator knob: Theme Settings → Design → suds_edge_mode, emitted
   by inc/dynamic-css.php — sbs_edge_patterns() KNOWINGLY DUPLICATES the
   SVG data-URIs in archetypes.css; edit both together).
   ========================================================================== */
.suds-s-services,
.suds-s-services-list,
.suds-s-services-iconrow,
.suds-s-how,
.suds-s-steprow,
.suds-s-steps-vertical,
.suds-s-areas,
.suds-s-areas-columns,
.suds-s-areas-map,
.suds-s-why,
.suds-s-quotes,
.suds-s-story,
.suds-s-story-split,
.suds-s-story-values,
.suds-s-payment,
.suds-s-newsletter,
.suds-hero { position: relative; }
.suds-s-services::after, .suds-s-services-list::after, .suds-s-services-iconrow::after { background: var(--suds-band-services, var(--suds-bg)); }
.suds-s-how::after, .suds-s-steprow::after, .suds-s-steps-vertical::after { background: var(--suds-band-how, var(--suds-bg)); }
.suds-s-areas::after, .suds-s-areas-columns::after, .suds-s-areas-map::after { background: var(--suds-band-areas, var(--suds-bg)); }
.suds-s-why::after { background: var(--suds-band-why, var(--suds-bg)); }
.suds-s-quotes::after { background: var(--suds-band-quotes, var(--suds-bg)); }
.suds-s-story::after, .suds-s-story-split::after, .suds-s-story-values::after { background: var(--suds-band-story, var(--suds-bg)); }
.suds-s-payment::after { background: var(--suds-band-payment, var(--suds-bg)); }
.suds-s-newsletter::after { background: var(--suds-band-newsletter, var(--suds-bg)); }
.suds-hero::before { background: var(--suds-edge-hero-bg, var(--suds-ink)); }
.suds-s-services::after,
.suds-s-services-list::after,
.suds-s-services-iconrow::after,
.suds-s-how::after,
.suds-s-steprow::after,
.suds-s-steps-vertical::after,
.suds-s-areas::after,
.suds-s-areas-columns::after,
.suds-s-areas-map::after,
.suds-s-why::after,
.suds-s-quotes::after,
.suds-s-story::after,
.suds-s-story-split::after,
.suds-s-story-values::after,
.suds-s-payment::after,
.suds-s-newsletter::after,
.suds-hero::before {
	content: ""; display: var(--suds-edge-display, none);
	position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
	bottom: calc(-1 * var(--suds-edge-h, 26px) + 1px);
	height: var(--suds-edge-h, 26px);
	-webkit-mask-image: var(--suds-edge-mask, none); mask-image: var(--suds-edge-mask, none);
	-webkit-mask-size: var(--suds-edge-size, auto 100%); mask-size: var(--suds-edge-size, auto 100%);
	-webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
@media print {
.suds-s-services::after,
.suds-s-services-list::after,
.suds-s-services-iconrow::after,
.suds-s-how::after,
.suds-s-steprow::after,
.suds-s-steps-vertical::after,
.suds-s-areas::after,
.suds-s-areas-columns::after,
.suds-s-areas-map::after,
.suds-s-why::after,
.suds-s-quotes::after,
.suds-s-story::after,
.suds-s-story-split::after,
.suds-s-story-values::after,
.suds-s-payment::after,
.suds-s-newsletter::after,
.suds-hero::before { display: none; }
}