/* =================================================================
   SECTION LIBRARY — shared, token-driven styles for reusable sections
   (template-parts/sections/*). Loaded site-wide; every value reads a
   --suds-* token so sections re-skin with the active archetype.
   ================================================================= */

/* ---- Story / about intro ---- */
/* Editorial two-column: a heading rail beside the prose so the About intro fills the
   container instead of a bare left text block. Band-safe — no forced panel background,
   so prose keeps its band-aware color on every skin (light band = dark text, dark band =
   light text). Collapses to one column on small screens. */
.suds-s-story .suds-story-grid { display: grid; grid-template-columns: 1fr 1.85fr; gap: clamp(1.6rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 820px) { .suds-s-story .suds-story-grid { grid-template-columns: 1fr; gap: 1.3rem; } }
.suds-s-story .suds-story-head h2 { margin: .45rem 0 0; }
.suds-s-story .suds-story-body { max-width: 62ch; }
.suds-s-story .suds-prose { max-width: none; }
.suds-s-story .suds-lead { font-size: clamp(1.2rem, 2vw, 1.5rem); font-family: var(--suds-font-header); line-height: 1.45; margin-bottom: 1rem; }
.suds-story-areas { margin-top: 1.9rem; }
.suds-story-areas-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suds-muted); margin-bottom: .7rem; font-family: var(--suds-font-header); }
/* subtle lift so the chips read as pills even where their --surface fill matches the band */
.suds-s-story .suds-area-chip { box-shadow: 0 1px 3px color-mix(in srgb, var(--suds-ink) 9%, transparent); }
.suds-s-story .suds-area-chip .bi { color: var(--suds-primary); }

/* ---- Story — split: knob-driven variants (emit only when non-default) ---- */
.suds-story-cta { margin-top: 1.6rem; }
.suds-s-story-split[data-opt-media="left"] .suds-split > :last-child { order: -1; }

/* ---- Service-area chips ---- */
.suds-area-chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.suds-area-chip {
	display: inline-flex; align-items: center; gap: .45em;
	padding: .5rem .9rem;
	border-radius: var(--suds-chip-radius, 999px);
	background: var(--suds-surface); color: var(--suds-ink);
	font-family: var(--suds-font-header); font-weight: 600; font-size: .95rem;
	border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent);
}
.suds-area-chip i { color: var(--suds-primary); }

/* ---- Pricing / payment fallback card ---- */
.suds-payment-card {
	background: var(--suds-surface);
	border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px));
	padding: clamp(1.5rem, 3vw, 2.6rem);
	max-width: 60ch;
}
.suds-payment-card h2 { margin: .4rem 0 .6rem; }
.suds-payment-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.3rem; }

/* ---- Hours card ---- */
.suds-hours-card {
	max-width: 32rem;
	background: var(--suds-surface);
	border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent);
	border-radius: var(--suds-radius, 16px);
	padding: .4rem 1.2rem;
}

/* ---- Commercial / B2B card ---- */
.suds-commercial-card {
	background: var(--suds-ink); color: var(--suds-bg);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px));
	padding: clamp(1.6rem, 3.4vw, 3rem);
}
.suds-commercial-card h2 { color: var(--suds-bg); margin: .4rem 0 .6rem; }
.suds-commercial-card .suds-text-muted { color: color-mix(in srgb, var(--suds-bg) 78%, var(--suds-ink)); }
.suds-commercial-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* ---- Reviews — embed (also used off the home page, so kept site-wide here) ---- */
/* Center the widget under the centered heading: compact widgets sit centered;
   a full-width iframe (Elfsight/Google) still fills because its own width wins. */
.suds-reviews-embed { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.suds-reviews-embed > * { max-width: 100%; }

/* ---- Services — list (alternating rows) ---- */
.suds-svc-rows { display: flex; flex-direction: column; gap: var(--suds-svc-row-gap, clamp(1.6rem, 3.5vw, 3rem)); }
.suds-svc-row {
	display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.2rem); align-items: center;
	padding: var(--suds-card-pad, 1.8rem);
	background: var(--suds-surface);
	border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px));
}
.suds-svc-row .ic {
	flex: none; width: var(--suds-icon-box, 54px); height: var(--suds-icon-box, 54px);
	border-radius: var(--suds-icon-radius, 14px); display: grid; place-items: center;
	background: var(--suds-icon-bg); color: var(--suds-icon-fg);
	font-size: calc(var(--suds-icon-box, 54px) * .5);
}
.suds-svc-row h3 { font-size: var(--suds-fs-card-head, 1.3rem); margin-bottom: .4rem; }
.suds-svc-row p { color: var(--suds-muted); margin-bottom: .7rem; }
.suds-svc-row .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; }
@media (min-width: 721px) {
	.suds-svc-row.alt { grid-template-columns: 1fr auto; }
	.suds-svc-row.alt .ic { order: 2; }
	.suds-svc-row.alt .suds-svc-row-body { order: 1; text-align: right; }
	.suds-svc-row.alt .more { flex-direction: row-reverse; }
}
@media (max-width: 720px) {
	.suds-svc-row, .suds-svc-row.alt { grid-template-columns: 1fr; }
	.suds-svc-row.alt .suds-svc-row-body { text-align: left; }
}

/* ---- Services rows WITH media (service featured images) ---- */
.suds-svc-row.has-media { grid-template-columns: minmax(0, .82fr) 1fr; align-items: stretch; padding: 0; overflow: hidden; }
.suds-svc-row.has-media .suds-svc-row-body { align-self: center; padding: clamp(1.4rem, 3vw, 2.4rem); }
.suds-svc-row-media { position: relative; min-height: 100%; }
.suds-svc-row-media img { display: block; width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
/* claim-safe striped placeholder fills the media column flush when no real photo is set */
.suds-svc-row-media .suds-ph { height: 100%; min-height: 230px; border: 0; border-radius: 0; box-shadow: none; }
.suds-svc-row-media .ic { position: absolute; top: .9rem; left: .9rem; width: 46px; height: 46px; border-radius: var(--suds-icon-radius, 8px); display: grid; place-items: center; background: var(--suds-icon-bg); color: var(--suds-icon-fg); font-size: 1.2rem; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--suds-ink) 70%, transparent); }
@media (min-width: 721px) {
	.suds-svc-row.has-media.alt { grid-template-columns: 1fr minmax(0, .82fr); }
	.suds-svc-row.has-media.alt .suds-svc-row-media { order: 2; }
	.suds-svc-row.has-media.alt .suds-svc-row-body { text-align: left; }
}
@media (max-width: 720px) {
	.suds-svc-row.has-media, .suds-svc-row.has-media.alt { grid-template-columns: 1fr; }
	.suds-svc-row.has-media .suds-svc-row-media img { min-height: 190px; }
}

/* ---- Pricing — plan cards (extends the shared .suds-price card) ---- */
/* True 3-column grid spanning the full container (board flag): each card takes equal
   available space and the first card's left edge lines up with the section heading (both
   are children of .suds-wrap). minmax(0,1fr) keeps long plan copy from blowing out a
   track. Collapses to one column on small screens (inherited from .suds-price-grid). */
.suds-price-grid.suds-pricing-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Responsive collapse — this selector out-specifies the base .suds-price-grid mobile
   rule, so it must set its own breakpoints (3 → 2 → 1). */
@media (max-width: 900px) { .suds-price-grid.suds-pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .suds-price-grid.suds-pricing-cards { grid-template-columns: 1fr; } }
.suds-plan-card { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.suds-plan-from { font-size: .62em; font-weight: 600; color: var(--suds-muted); text-transform: uppercase; letter-spacing: .06em; }
.suds-plan-benefits { list-style: none; margin: .4rem 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.suds-plan-benefits li { display: flex; gap: .5em; align-items: flex-start; font-size: .95rem; color: var(--suds-muted); }
.suds-plan-benefits li i { color: var(--suds-primary); margin-top: .15em; }
.suds-plan-card .btn { margin-top: auto; align-self: flex-start; }

/* ---- CTA — split (two-column variant inside the shared .suds-cta-band) ---- */
/* The split variant carries .suds-cta-split on the band element itself (no .inner
   child), so it inherits the band's background/radius but NOT the .inner padding. Restore
   the inset here, reusing the shared --suds-cta-pad token so it tracks the archetype. */
.suds-cta-band.suds-cta-split { padding: var(--suds-cta-pad, clamp(2.4rem, 5vw, 4rem)); }
.suds-cta-split { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.suds-cta-split-action { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
@media (max-width: 760px) { .suds-cta-split { grid-template-columns: 1fr; } }

/* ---- Page hero — image (background image + readability scrim) ---- */
.suds-pagehero { position: relative; overflow: hidden; }
.suds-pagehero.has-image { isolation: isolate; }
.suds-pagehero-bg { position: absolute; inset: 0; z-index: -2; }
.suds-pagehero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suds-pagehero-scrim {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient( to right, color-mix(in srgb, var(--suds-ink) 82%, transparent), color-mix(in srgb, var(--suds-ink) 45%, transparent) );
}
.suds-pagehero-copy { max-width: 62ch; }
.suds-pagehero.has-image .suds-pagehero-copy,
.suds-pagehero.has-image .suds-pagehero-copy h1,
.suds-pagehero.has-image .suds-eyebrow { color: var(--suds-bg); }
.suds-pagehero.has-image .suds-lead { color: color-mix(in srgb, var(--suds-bg) 82%, transparent); }
/* No image: a finished-looking branded banner instead of a bare title (claim-safe — decorative tint only). */
.suds-pagehero.no-image {
	background:
		radial-gradient( 120% 140% at 100% 0%, color-mix(in srgb, var(--suds-primary) 12%, transparent), transparent 60% ),
		linear-gradient( 135deg, color-mix(in srgb, var(--suds-surface) 70%, var(--suds-bg)), var(--suds-surface) );
	border-bottom: var(--suds-ph-border);
}

/* ===== Batch B ===== */

/* ---- Steps — icon row (compact horizontal flow) ---- */
.suds-steprow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.2rem); }
.suds-steprow-item { display: flex; gap: .9rem; align-items: flex-start; flex: 1 1 14rem; }
.suds-steprow-num {
	flex: none; width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center;
	background: var(--suds-primary); color: var(--suds-on-primary);
	font-family: var(--suds-font-header); font-weight: 700;
}
.suds-steprow-body { display: flex; flex-direction: column; gap: .2rem; }
.suds-steprow-body b { font-size: 1.05rem; }
.suds-steprow-body span { color: var(--suds-muted); font-size: .92rem; }

/* ---- Service areas — columns ---- */
.suds-area-cols { list-style: none; margin: 0; padding: 0; columns: 3 13rem; gap: 1.4rem; }
.suds-area-cols li { display: flex; gap: .5em; align-items: center; padding: .4rem 0; break-inside: avoid; font-family: var(--suds-font-header); font-weight: 600; }
.suds-area-cols li i { color: var(--suds-primary); }

/* ---- Map — split (info column beside the embed) ---- */
.suds-map-info { display: flex; flex-direction: column; gap: .7rem; align-self: center; }
.suds-map-name { font-size: 1.4rem; }
.suds-map-addr, .suds-map-phone { display: flex; gap: .5em; align-items: flex-start; color: var(--suds-muted); margin: 0; }
.suds-map-addr i, .suds-map-phone i { color: var(--suds-primary); margin-top: .15em; }
.suds-map-phone a { color: inherit; }
.suds-map-hours { margin: .4rem 0 .6rem; }
.suds-map-info .btn { align-self: flex-start; margin-top: .4rem; }

/* ---- Pickup & delivery — form card ---- */
.suds-pickup-card {
	display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center;
	background: var(--suds-surface);
	border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px));
	padding: clamp(1.6rem, 3.4vw, 3rem);
}
.suds-pickup-card h2 { margin: .4rem 0 .6rem; }
.suds-pickup-phone { margin-top: 1rem; }
.suds-pickup-phone a { color: var(--suds-primary); font-weight: 600; }
.suds-pickup-fields { display: flex; flex-direction: column; gap: .6rem; }
.suds-pickup-fields label { font-family: var(--suds-font-header); font-weight: 600; font-size: .9rem; }
.suds-pickup-fields input {
	padding: .8rem 1rem; font: inherit;
	border-radius: var(--suds-radius, 12px);
	border: 1px solid color-mix(in srgb, var(--suds-ink) 18%, transparent);
	background: var(--suds-bg); color: var(--suds-ink);
}
.suds-pickup-fields .btn { margin-top: .4rem; }
@media (max-width: 760px) { .suds-pickup-card { grid-template-columns: 1fr; } }

/* ---- Pickup & delivery — steps trailing CTA ---- */
.suds-pickup-steps-cta { margin-top: 2.4rem; }

/* ===== Batch C ===== */

/* ---- Services — icon row ---- */
.suds-svc-iconrow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(.8rem, 2.5vw, 1.6rem); }
.suds-svc-icon { flex: 1 1 9rem; }
.suds-svc-icon a, .suds-svc-icon { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; color: inherit; }
.suds-svc-icon .ic {
	width: var(--suds-icon-box, 54px); height: var(--suds-icon-box, 54px);
	border-radius: var(--suds-icon-radius, 14px); display: grid; place-items: center;
	background: var(--suds-icon-bg); color: var(--suds-icon-fg);
	font-size: calc(var(--suds-icon-box, 54px) * .5);
}
.suds-svc-icon .lbl { font-family: var(--suds-font-header); font-weight: 600; font-size: .95rem; }
.suds-svc-icon a:hover .lbl { color: var(--suds-primary); }
/* `display=cards` knob: bare icons → tappable cards (gradient icon tile + hover
   lift). Token-bound; hover motion is reduced-motion-gated. */
.suds-s-services-iconrow[data-opt-display="cards"] .suds-svc-icon a {
	padding: 1.6rem 1rem 1.4rem;
	background: var(--suds-card-bg, var(--suds-bg));
	border: 1px solid color-mix(in srgb, var(--suds-primary) 12%, transparent);
	border-radius: var(--suds-radius-lg, 18px);
	box-shadow: 0 6px 22px color-mix(in srgb, var(--suds-secondary) 7%, transparent);
	text-decoration: none;
	transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.suds-s-services-iconrow[data-opt-display="cards"] .suds-svc-icon .ic {
	width: 64px; height: 64px; font-size: 1.6rem;
	border-radius: var(--suds-icon-radius, 18px);
	color: var(--suds-primary);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--suds-accent) 16%, var(--suds-bg)) 0%,
		color-mix(in srgb, var(--suds-primary) 12%, var(--suds-bg)) 100%);
	border: 1px solid color-mix(in srgb, var(--suds-primary) 14%, transparent);
	transition: transform .25s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.suds-s-services-iconrow[data-opt-display="cards"] .suds-svc-icon a:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--suds-accent) 55%, transparent);
		box-shadow: 0 16px 34px color-mix(in srgb, var(--suds-secondary) 14%, transparent);
	}
	.suds-s-services-iconrow[data-opt-display="cards"] .suds-svc-icon a:hover .ic {
		transform: scale(1.08) translateY(-2px);
	}
}

/* ---- Reviews — quote wall (masonry columns) ---- */
.suds-quotewall { columns: 3 18rem; gap: var(--suds-gap); }
.suds-quotewall .suds-quote { break-inside: avoid; margin-bottom: var(--suds-gap); }

/* ---- CTA — boxed ---- */
.suds-cta-boxed {
	text-align: center; max-width: 48rem; margin-inline: auto;
	background: var(--suds-surface);
	border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px));
	padding: clamp(2rem, 5vw, 3.4rem);
}
.suds-cta-boxed h2 { margin-bottom: .6rem; }
.suds-cta-boxed-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }

/* ---- FAQ — two columns ---- */
.suds-faq-twocol { columns: 2 22rem; gap: clamp(1.6rem, 4vw, 3rem); }
.suds-faq-qa { break-inside: avoid; margin-bottom: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent); }
.suds-faq-q { font-size: 1.1rem; margin-bottom: .4rem; }
.suds-faq-a { color: var(--suds-muted); }
.suds-faq-a p:last-child { margin-bottom: 0; }

/* ---- Amenities — feature cards ---- */
.suds-amen-feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--suds-gap); }
@media (max-width: 820px) { .suds-amen-feature { grid-template-columns: 1fr; } }
.suds-amen-feature-card {
	background: var(--suds-card-bg, var(--suds-surface)); border: var(--suds-card-border, 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent));
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px)); padding: clamp(1.4rem, 3vw, 2rem);
}
.suds-amen-feature-card .ic {
	width: 56px; height: 56px; border-radius: var(--suds-icon-radius, 14px); display: grid; place-items: center;
	background: var(--suds-icon-bg); color: var(--suds-icon-fg); font-size: 1.6rem; margin-bottom: 1.1rem;
}
.suds-amen-feature-card h3 { font-size: var(--suds-fs-card-head, 1.25rem); margin-bottom: .4rem; }
.suds-amen-feature-card p { color: var(--suds-muted); }

/* ---- Steps — vertical timeline ---- */
.suds-steps-vert { list-style: none; margin: 0; padding: 0; max-width: 40rem; display: flex; flex-direction: column; gap: 1.6rem; }
/* Optional supporting-image column (media knob). Default DOM order = steps / image;
   flip for left. Steps top-align with the image and fill their column. */
.suds-s-steps-vertical.has-media .suds-split { align-items: start; }
.suds-s-steps-vertical.has-media .suds-steps-vert { max-width: none; }
.suds-s-steps-vertical.has-media .suds-section-head { margin-bottom: 1.8rem; }
.suds-s-steps-vertical[data-opt-media="left"] .suds-split > :last-child { order: -1; }
.suds-steps-vert-item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; }
.suds-steps-vert-num {
	flex: none; width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center;
	background: var(--suds-primary); color: var(--suds-on-primary);
	font-family: var(--suds-font-header); font-weight: 700;
}
.suds-steps-vert-body h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.suds-steps-vert-body p { color: var(--suds-muted); }

/* ---- Story — value cards ---- */
.suds-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--suds-gap); }
@media (max-width: 820px) { .suds-values-grid { grid-template-columns: 1fr; } }
.suds-value-card {
	/* Shared card recipe (like svc/quote/price/infocard) so the card foreground reads
	   distinctly against the story band — the band is often painted --suds-surface,
	   so a --suds-surface card would disappear. --suds-card-bg + shadow separate it
	   per-archetype (board flag). */
	background: var(--suds-card-bg); border: var(--suds-card-border);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px)); padding: clamp(1.4rem, 3vw, 2rem);
	box-shadow: var(--suds-card-shadow);
}
.suds-value-card .ic {
	width: 52px; height: 52px; border-radius: var(--suds-icon-radius, 14px); display: grid; place-items: center;
	background: var(--suds-icon-bg); color: var(--suds-icon-fg); font-size: 1.5rem; margin-bottom: 1rem;
}
/* Explicit card-interior colors so the title/body never inherit a dark BAND's light
   foreground (e.g. basecamp sets the story-values band text to --on-band-fg, which would
   turn the title white-on-white inside the light card). */
.suds-value-card h3 { font-size: var(--suds-fs-card-head, 1.2rem); margin-bottom: .4rem; color: var(--suds-ink); }
.suds-value-card p { color: var(--suds-muted); }

/* ---- Hours — summary strip ---- */
/* Hours — summary band: a centered, self-contained callout (heading + summary +
   location + directions) so it reads as a finished section, not a floating chip.
   Interior text pinned to --ink/--muted so a --card-bg panel stays legible on any band. */
.suds-hours-band {
	max-width: 640px; margin-inline: auto; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: .35rem;
	background: var(--suds-card-bg); border: var(--suds-card-border, 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent));
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px));
	box-shadow: var(--suds-card-shadow); padding: clamp(2rem, 5vw, 3.2rem);
}
.suds-hours-band-title { color: var(--suds-ink); margin: .2rem 0 .5rem; }
.suds-hours-band-summary { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--suds-ink); }
.suds-hours-band-summary i { color: var(--suds-primary); }
.suds-hours-band-place { display: inline-flex; align-items: center; gap: .4rem; margin: .3rem 0 0; color: var(--suds-muted); }
.suds-hours-band-place i { color: var(--suds-primary); }
.suds-hours-band-cta { margin: 1.2rem 0 0; }
/* Ship the hours band on a dark, softly-patterned section so the light card reads as an
   intentional foreground panel. Deliberately NOT data-opt-tone="dark" — that engine would
   rebind --card-bg dark and flip the card's h2/p text light (invisible on the light card).
   Here only the SECTION goes dark + textured; the card keeps --card-bg + --ink/--muted text. */
/* Dark band + archetype texture: the ::before mask + wrap-position come from the shared
   band-texture group in base.css; here we just paint the band dark and opt its texture
   visible via the token (so the operator's texture-off override can still zero it). */
.suds-s-hours-strip { background: var(--suds-ink); --suds-band-texture-opacity: .07; }

/* ---- Pickup & delivery — promo card ---- */
.suds-promo-card {
	background: var(--suds-ink); color: var(--suds-bg);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px)); padding: clamp(2.2rem, 5vw, 3.6rem); text-align: center;
	/* dark panel: rebind ghost buttons light so they don't vanish (ink-on-ink) */
	--suds-btn-ghost-border: color-mix(in srgb, #fff 32%, transparent);
	--suds-btn-ghost-hover-bg: color-mix(in srgb, #fff 12%, transparent);
}
.suds-promo-card h2 { color: var(--suds-bg); margin: .4rem 0 .6rem; }
/* keep the body at a readable measure while the band itself spans fluid-width */
.suds-promo-card .suds-lead { max-width: 46rem; margin-inline: auto; }
.suds-promo-card .suds-text-muted { color: color-mix(in srgb, var(--suds-bg) 78%, var(--suds-ink)); }
.suds-promo-card .suds-btn-ghost { color: var(--suds-bg); }
.suds-promo-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }

/* ---- Commercial / Wash & fold — split trailing CTA ---- */
.suds-commercial-split-cta, .suds-washfold-split-cta { margin-top: 1.8rem; }

/* ---- Trust — badges ---- */
/* Compact reassurance strip: ships very tight (10px block) so it reads as a slim accent
   between full sections, across every skin (operator-directed, all archetypes). */
.suds-s-trust-badges { --suds-pad-section: 10px; }
.suds-trust-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.suds-trust-badge {
	display: inline-flex; align-items: center; gap: .5em; padding: .6rem 1.1rem;
	background: var(--suds-surface); border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent);
	border-radius: var(--suds-chip-radius, 999px);
	font-family: var(--suds-font-header); font-weight: 600;
}
.suds-trust-badge i { color: var(--suds-primary); }

/* ---- Trust — stats ---- */
/* Even, full-width columns (one per stat, capped at 4 via inline --suds-stat-cols)
   with hairline dividers between them — reads as an intentional stat bar, not a
   center-bunched cluster. Drops to 2-up (no dividers) on narrow screens. */
.suds-trust-stats { display: grid; grid-template-columns: repeat(var(--suds-stat-cols, 4), minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.2rem); align-items: center; text-align: center; }
.suds-trust-stat { padding-inline: clamp(.4rem, 2vw, 1.4rem); }
.suds-trust-stat + .suds-trust-stat { border-inline-start: 1px solid color-mix(in srgb, var(--suds-ink) 12%, transparent); }
.suds-trust-stat b { display: block; font-family: var(--suds-font-header); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; color: var(--suds-primary); }
.suds-trust-stat b .u { font-size: .45em; margin-left: .15em; color: var(--suds-muted); }
.suds-trust-stat span { display: block; margin-top: .5rem; color: var(--suds-muted); font-size: .95rem; }
@media (max-width: 780px) {
	.suds-trust-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.6rem, 5vw, 2.4rem); }
	.suds-trust-stat + .suds-trust-stat { border-inline-start: 0; }
}

/* ---- Trust — guarantee ---- */
.suds-guarantee {
	background: var(--suds-surface); border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px)); padding: clamp(1.6rem, 3.4vw, 2.8rem);
}
/* Check sits inline before the heading, sized to the heading line. */
.suds-guarantee-icon { color: var(--suds-primary); font-size: .82em; margin-right: .45em; vertical-align: -.04em; line-height: 1; }
.suds-guarantee-body h2 { margin: .3rem 0 .5rem; }
.suds-guarantee-body .btn { margin-top: 1.1rem; }

/* ---- Locations — grid (multi-location "our locations" cards) ---- */
.suds-loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--suds-gap, 1.4rem); }
.suds-loc-card {
	background: var(--suds-card-bg, var(--suds-bg)); border: var(--suds-card-border, 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent));
	border-radius: var(--suds-radius, 14px); box-shadow: var(--suds-card-shadow, none); padding: var(--suds-card-pad, 1.8rem);
	display: flex; flex-direction: column; gap: .55rem;
	transition: transform var(--suds-dur, .2s) var(--suds-ease, ease), box-shadow var(--suds-dur, .2s) var(--suds-ease, ease);
}
.suds-loc-card:hover { transform: var(--suds-card-hover-t, none); box-shadow: var(--suds-card-shadow-hover, var(--suds-card-shadow, none)); }
/* Locations — photo variant: featured image (or claim-safe placeholder) flush at the
   card top, existing branch details in a padded body below. */
.suds-loc-photo { padding: 0; overflow: hidden; gap: 0; }
.suds-loc-photo-media { border-radius: 0; min-height: 0; aspect-ratio: 3 / 2; width: 100%; box-shadow: none; border: 0; border-bottom: var(--suds-card-border); }
.suds-loc-photo-media img { width: 100%; height: 100%; object-fit: cover; }
.suds-loc-photo-body { padding: var(--suds-card-pad, 1.8rem); display: flex; flex-direction: column; gap: .55rem; }
.suds-loc-top { display: flex; align-items: center; gap: .6rem; }
.suds-loc-top .ic {
	width: 40px; height: 40px; flex: none; display: grid; place-items: center;
	border-radius: var(--suds-icon-radius, 12px); background: var(--suds-icon-bg, var(--suds-surface)); color: var(--suds-icon-fg, var(--suds-primary));
}
.suds-loc-top h3 { margin: 0; font-size: var(--suds-fs-card-head, 1.12rem); }
.suds-loc-primary {
	margin-left: auto; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	background: var(--suds-chip-bg, var(--suds-surface)); color: var(--suds-chip-fg, var(--suds-secondary));
	border: var(--suds-chip-border, 0); border-radius: var(--suds-chip-radius, 999px); padding: .25em .7em;
}
.suds-loc-addr { margin: 0; color: var(--suds-muted); }
.suds-loc-phone { margin: 0; }
.suds-loc-phone a { color: var(--suds-ink); text-decoration: none; font-weight: 600; }
.suds-loc-phone a:hover { color: var(--suds-primary); }
.suds-loc-phone i { color: var(--suds-primary); margin-right: .3em; }
.suds-loc-actions { margin-top: auto; padding-top: .6rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.suds-loc-actions a { font-weight: 700; text-decoration: none; color: var(--suds-primary); }
.suds-loc-actions a:hover { text-decoration: underline; }
.suds-loc-actions .dir { color: var(--suds-secondary); }
.suds-loc-actions i { font-size: .85em; }

/* ---- Gallery — grid (photo-rich standalone gallery; first photo leads) ---- */
/* Wider heading measure so a long gallery title (esp. large serif skins) doesn't wrap
   awkwardly: at least the shared 60ch, up to 3/4 of the wrap on desktop. max() keeps
   narrow screens at 60ch (no extra mobile wrapping). */
.suds-s-gallery .suds-section-head,
.suds-s-gallery-strip .suds-section-head { max-width: max(60ch, 75%); }
.suds-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 220px; gap: var(--suds-gap, 1.4rem); grid-auto-flow: dense; }
.suds-gal-item { margin: 0; overflow: hidden; border-radius: var(--suds-radius, 14px); border: var(--suds-ph-border, 0); }
.suds-gal-item img { width: 100%; height: 100%; object-fit: cover; filter: var(--suds-img-grade, none); transition: transform var(--suds-dur, .2s) var(--suds-ease, ease); }
.suds-gal-item:hover img { transform: scale(1.03); }
.suds-gal-lead { grid-column: span 2; grid-row: span 2; }
@media (max-width: 620px) { .suds-gal-lead { grid-column: span 1; grid-row: span 1; } .suds-gal-grid { grid-auto-rows: 180px; } }

/* ---- Locations — map (branch list beside the primary map embed) ---- */
.suds-locmap-list { display: flex; flex-direction: column; gap: 1rem; }
.suds-locmap-solo { max-width: 720px; }
.suds-locmap-row {
	display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
	background: var(--suds-card-bg, var(--suds-bg)); border: var(--suds-card-border, 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent));
	border-radius: var(--suds-radius, 14px); padding: 1rem 1.2rem;
}
.suds-locmap-row .ic {
	width: 36px; height: 36px; display: grid; place-items: center; margin-top: .1rem;
	border-radius: var(--suds-icon-radius, 12px); background: var(--suds-icon-bg, var(--suds-surface)); color: var(--suds-icon-fg, var(--suds-primary));
}
.suds-locmap-body h3 { margin: 0 0 .15rem; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.suds-locmap-body p { margin: 0 0 .35rem; color: var(--suds-muted); font-size: .95rem; }
.suds-locmap-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.suds-locmap-links a { font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--suds-primary); }
.suds-locmap-links a:hover { text-decoration: underline; }
.suds-locmap-links i { font-size: .85em; }

/* ---- Gallery — strip (slim scroll-snap filmstrip; no JS) ---- */
.suds-gal-strip {
	display: flex; gap: var(--suds-gap, 1.4rem); overflow-x: auto;
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	padding-bottom: .6rem; /* room for the scrollbar so it never overlaps photos */
	scrollbar-width: thin;
}
.suds-gal-strip:focus-visible { outline: 2px solid var(--suds-primary, #2563eb); outline-offset: 4px; }
.suds-gal-strip-item {
	margin: 0; flex: 0 0 auto; height: 240px; scroll-snap-align: start;
	overflow: hidden; border-radius: var(--suds-radius, 14px); border: var(--suds-ph-border, 0);
	min-height: 0; /* override the .suds-ph frame min-height for the slim strip */
}
.suds-gal-strip-item img { height: 100%; width: auto; max-width: 70vw; object-fit: cover; display: block; filter: var(--suds-img-grade, none); }
/* placeholder strip items have no <img> to set their width — give them a landscape width */
.suds-gal-strip-item[data-label] { width: clamp(260px, 40vw, 360px); }
@media (max-width: 620px) { .suds-gal-strip-item { height: 180px; } }

/* ---- Why us — tiles (media-free home why variant) ---- */
.suds-s-why--tiles .suds-why-tiles-head { max-width: 640px; margin-inline: auto; text-align: center; }
.suds-why-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--suds-gap, 1.4rem); margin-top: .4rem; }
.suds-why-tile {
	display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: center;
	background: var(--suds-card-bg, var(--suds-bg)); border: var(--suds-card-border, 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent));
	border-radius: var(--suds-radius, 14px); padding: 1rem 1.2rem;
}
.suds-why-tile .ic {
	width: 38px; height: 38px; display: grid; place-items: center;
	border-radius: var(--suds-tick-radius, 10px); background: var(--suds-icon-bg, var(--suds-surface)); color: var(--suds-icon-fg, var(--suds-primary));
}
.suds-why-tile p { margin: 0; font-weight: 600; color: var(--suds-ink); }
.suds-why-tiles-cta { text-align: center; margin: 1.8rem 0 .4rem; }
/* `align` knob (default center): left aligns the head + CTA with the other
   left-aligned section heads on the page. */
.suds-s-why--tiles[data-opt-align="left"] .suds-why-tiles-head { margin-inline: 0; text-align: left; }
.suds-s-why--tiles[data-opt-align="left"] .suds-why-tiles-cta { text-align: left; }

/* ---- Services — photo grid (image-led cards; extends the shared .suds-svc card) ---- */
/* Media leads the card flush at the top; body padded below. A service with no featured
   image shows the shared .suds-ph striped "add a photo" placeholder (claim-safe). */
.suds-svc-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.suds-svc-photo-media { border-radius: 0; min-height: 0; aspect-ratio: 3 / 2; width: 100%; box-shadow: none; border: 0; border-bottom: var(--suds-card-border); }
.suds-svc-photo-media img { width: 100%; height: 100%; object-fit: cover; }
.suds-svc-photo-body { padding: var(--suds-card-pad); display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.suds-svc-photo-body h3 { margin: 0; }
.suds-svc-photo-body .more { margin-top: auto; }
.suds-svc-photo .badge { position: static; align-self: flex-start; }

/* ---- Services — featured (flagship service + compact rows) ---- */
.suds-svcfeat { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--suds-gap, 1.4rem); align-items: stretch; }
.suds-svcfeat-lead {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--suds-card-bg, var(--suds-bg)); border: var(--suds-card-border, 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent));
	border-radius: var(--suds-radius-lg, var(--suds-radius, 16px)); box-shadow: var(--suds-card-shadow, none);
}
.suds-svcfeat-media { min-height: 260px; border: 0; border-radius: 0; }
.suds-svcfeat-media img { width: 100%; height: 100%; object-fit: cover; }
.suds-svcfeat-panel {
	min-height: 200px; display: grid; place-items: center; font-size: 3.4rem;
	background: var(--suds-ph-stripe-a, var(--suds-surface)); color: var(--suds-icon-fg, var(--suds-primary));
}
.suds-svcfeat-body { padding: var(--suds-card-pad, 1.8rem); display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.suds-svcfeat-body h3 { margin: 0; font-size: 1.45rem; }
.suds-svcfeat-body p { margin: 0; color: var(--suds-muted); }
.suds-svcfeat-body .btn { margin-top: .5rem; }
.suds-svcfeat-body .badge { align-self: flex-start; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; background: var(--suds-chip-bg, var(--suds-surface)); color: var(--suds-chip-fg, var(--suds-secondary)); border-radius: var(--suds-chip-radius, 999px); padding: .3em .8em; }
.suds-svcfeat-rest { display: flex; flex-direction: column; gap: var(--suds-gap, 1.4rem); }
.suds-svcfeat-row {
	flex: 1; display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center;
	background: var(--suds-card-bg, var(--suds-bg)); border: var(--suds-card-border, 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent));
	border-radius: var(--suds-radius, 14px); padding: 1rem 1.2rem;
}
.suds-svcfeat-row .ic {
	width: 42px; height: 42px; display: grid; place-items: center;
	border-radius: var(--suds-icon-radius, 12px); background: var(--suds-icon-bg, var(--suds-surface)); color: var(--suds-icon-fg, var(--suds-primary));
}
.suds-svcfeat-row h4 { margin: 0 0 .15rem; font-size: var(--suds-fs-card-head, 1.02rem); }
.suds-svcfeat-row h4 .badge { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; background: var(--suds-chip-bg, var(--suds-surface)); color: var(--suds-chip-fg, var(--suds-secondary)); border-radius: var(--suds-chip-radius, 999px); padding: .25em .7em; margin-left: .4em; }
.suds-svcfeat-row p { margin: 0; font-size: .9rem; color: var(--suds-muted); }
.suds-svcfeat-row .more { color: var(--suds-primary); font-size: 1.05rem; }
@media (max-width: 880px) { .suds-svcfeat { grid-template-columns: 1fr; } }

/* ---- Per-branch hours disclosure (locations grid + map rows) ---- */
.suds-loc-hours { margin: 0; }
.suds-loc-hours summary {
	cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4em;
	font-weight: 700; font-size: .9rem; color: var(--suds-secondary);
}
.suds-loc-hours summary::-webkit-details-marker { display: none; }
.suds-loc-hours summary::after { content: "\25BE"; font-size: .8em; transition: transform var(--suds-dur, .2s) var(--suds-ease, ease); }
.suds-loc-hours[open] summary::after { transform: rotate(180deg); }
.suds-loc-hours-rows { margin-top: .5rem; display: grid; gap: .25rem; }
.suds-loc-hours-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; border-bottom: 1px dashed color-mix(in srgb, var(--suds-ink) 10%, transparent); padding-bottom: .25rem; }
.suds-loc-hours-row span { color: var(--suds-muted); }
.suds-loc-hours-row b { color: var(--suds-ink); font-weight: 600; }

/* ---- Tone knob (data-opt-tone) — dark "floating panel" treatment shared by the
   split/panel family (why_panel, commercial_split, story_split, washfold_split,
   cta_split) and the steps/services/story-values families. Rebinds tokens on
   identical markup; reuses the on-band engine.
   NOT offered on reviews_panel: it can render a third-party reviews embed whose
   inline colours can't be re-toned (see inc/sections/reviews-panel.php). ---- */
.suds-section[data-opt-tone="dark"] {
	background: var(--suds-ink);
	color: var(--suds-on-band-fg);
	/* Rebind --suds-muted at the TOKEN level so every component that colours its
	   secondary text with it (step bodies, card copy, list rows — often bare
	   <span>/<div>, which no element-level rule below would reach) flips with the
	   band instead of staying dark-on-dark. --suds-ink is deliberately NOT rebound:
	   --suds-card-bg mixes from it just below. */
	--suds-muted: var(--suds-on-band-muted);
	/* Some cards paint themselves from --suds-surface rather than --suds-card-bg
	   (e.g. .suds-svc-row in services_list). Left alone they stay a WHITE card on
	   the dark band while the on-band text flips to near-white — measured 1.11:1,
	   the documented "white card on a dark band" trap. Rebind the surface too so
	   every card in a toned section is dark and its text flip is correct. */
	--suds-surface: color-mix(in srgb, var(--suds-ink) 84%, #fff);
	--suds-card-bg: color-mix(in srgb, var(--suds-ink) 84%, #fff);
	--suds-card-border: 1px solid color-mix(in srgb, #fff 14%, transparent);
	--suds-btn-ghost-border: color-mix(in srgb, #fff 30%, transparent);
	--suds-btn-ghost-hover-bg: color-mix(in srgb, #fff 10%, transparent);
	--suds-icon-bg: color-mix(in srgb, var(--suds-ink) 78%, #fff);
	--suds-icon-fg: var(--suds-on-band-eyebrow);
}
.suds-section[data-opt-tone="dark"] .suds-eyebrow { color: var(--suds-on-band-eyebrow); }
.suds-section[data-opt-tone="dark"] .suds-text-muted,
.suds-section[data-opt-tone="dark"] p { color: var(--suds-on-band-muted); }
.suds-section[data-opt-tone="dark"] h1,
.suds-section[data-opt-tone="dark"] h2,
.suds-section[data-opt-tone="dark"] h3,
.suds-section[data-opt-tone="dark"] h4,
.suds-section[data-opt-tone="dark"] h5,
.suds-section[data-opt-tone="dark"] h6 { color: var(--suds-on-band-fg); }

/* tone=light — the dark treatment's mirror: an explicit LIGHT override for
   sections whose ARCHETYPE band paints them dark (e.g. basecamp's ink story
   moment). Forces the page background + standard ink/muted text, silences the
   band texture, and repaints the band edge in the page bg so the torn divider
   stays coherent. [data-arch]-prefixed so it out-cascades the archetype's
   dark-band text flips at equal specificity. */
[data-arch] .suds-section[data-opt-tone="light"] {
	background: var(--suds-bg);
	color: var(--suds-ink);
	--suds-band-texture-opacity: 0;
}
[data-arch] .suds-section[data-opt-tone="light"]::after { background: var(--suds-bg); }
[data-arch] .suds-section[data-opt-tone="light"] .suds-text-muted,
[data-arch] .suds-section[data-opt-tone="light"] p,
[data-arch] .suds-section[data-opt-tone="light"] .suds-prose p { color: var(--suds-muted); }
[data-arch] .suds-section[data-opt-tone="light"] h1,
[data-arch] .suds-section[data-opt-tone="light"] h2,
[data-arch] .suds-section[data-opt-tone="light"] h3,
[data-arch] .suds-section[data-opt-tone="light"] h4,
[data-arch] .suds-section[data-opt-tone="light"] h5,
[data-arch] .suds-section[data-opt-tone="light"] h6 { color: var(--suds-ink); }
/* "Learn more" style links are --suds-primary, which is a mid-tone brand colour:
   on the ink band it measured 3.07:1 (needs 4.5:1). Pin to the on-band foreground,
   exactly as the ghost-button label below. The arrow + bold weight still read it
   as a link. */
.suds-section[data-opt-tone="dark"] .more { color: var(--suds-on-band-fg); }
/* Ghost buttons on a dark band: the border/hover were already re-toned above, but
   the LABEL fell back to --suds-ink → invisible on dark (e.g. the "Call" CTA on a
   dark service/location single hero). Pin it to the on-band foreground. */
.suds-section[data-opt-tone="dark"] .suds-btn-ghost { color: var(--suds-on-band-fg); }

/* pagehero CTA (optional args) */
.suds-pagehero-copy .btn { margin-top: 1.2rem; }

/* ---- Page header (page_header) — per-page background styles.
   The class + data-opt-bg appear only for a non-default choice; ink/gradient/
   image also carry data-opt-tone="dark", inheriting the on-band engine above.
   These rules sit AFTER the tone block so bg specifics win the order tie. ---- */
.suds-s-page-header { position: relative; --suds-pad-section: 50px; } /* tight opener — keep sub-page content above the fold (all skins) */
.suds-s-page-header[data-opt-bg="surface"] { background: var(--suds-surface); }
.suds-s-page-header[data-opt-bg="gradient"] { background: linear-gradient(135deg, var(--suds-ink) 0%, var(--suds-secondary) 100%); }
.suds-s-page-header[data-opt-bg="image"] {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--suds-ink) 80%, transparent) 0%, color-mix(in srgb, var(--suds-ink) 62%, transparent) 100%),
		var(--suds-hero-bg-image) center / cover no-repeat,
		var(--suds-ink);
}
.suds-s-page-header[data-opt-bg="image"]::before { content: none; } /* a real photo needs no texture mask */

/* ---- Newsletter — signup band ---- */
.suds-s-newsletter { background: var(--suds-band-newsletter, var(--suds-surface)); }
.suds-newsletter { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 820px) { .suds-newsletter { grid-template-columns: 1fr; } }
.suds-newsletter-copy h2 { margin-bottom: .5rem; }
.suds-newsletter-action .wpforms-container { margin: 0; }
/* token-restyle the embedded WPForms so the band never shows plugin defaults */
.suds-s-newsletter .wpforms-form input[type="email"],
.suds-s-newsletter .wpforms-form input[type="text"] {
	width: 100%; max-width: 100%; padding: .72rem .95rem; font: inherit;
	color: var(--suds-ink); background: var(--suds-bg);
	border: 1px solid color-mix(in srgb, var(--suds-ink) 20%, transparent);
	border-radius: var(--suds-btn-radius, 10px);
}
.suds-s-newsletter .wpforms-form input:focus {
	outline: none; border-color: var(--suds-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--suds-accent) 22%, transparent);
}
.suds-s-newsletter .wpforms-field-label { font-family: var(--suds-font-header); font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.suds-s-newsletter .wpforms-form button[type="submit"] {
	display: inline-flex; align-items: center; gap: .6em;
	font-family: var(--suds-font-header); font-weight: var(--suds-fw-btn, 700);
	font-size: .98rem; letter-spacing: var(--suds-ls-btn, 0); text-transform: var(--suds-tt-btn, none);
	padding: var(--suds-btn-pad, .92em 1.5em); border-radius: var(--suds-btn-radius, 10px);
	background: var(--suds-primary); color: var(--suds-on-primary);
	border: var(--suds-btn-border-w, 2px) solid var(--suds-primary);
	cursor: pointer; margin-top: .4rem;
	transition: transform var(--suds-dur, .25s) var(--suds-ease, ease);
}
.suds-s-newsletter .wpforms-form button[type="submit"]:hover { transform: var(--suds-btn-hover-t, translateY(-2px)); background: var(--suds-primary); color: var(--suds-on-primary); }

/* ---- Team — spotlight ---- */
.suds-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--suds-gap, 1.5rem); }
@media (max-width: 980px) { .suds-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .suds-team-grid { grid-template-columns: 1fr; } }
.suds-team-card {
	background: var(--suds-card-bg); border: var(--suds-card-border);
	border-radius: var(--suds-radius-lg, 20px); box-shadow: var(--suds-card-shadow);
	padding: var(--suds-card-pad, 1.8rem);
}
.suds-team-photo { border-radius: var(--suds-radius-lg, 20px); overflow: hidden; margin-bottom: 1rem; }
.suds-team-name { margin: .2rem 0 .45rem; }
.suds-team-role {
	display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	background: var(--suds-chip-bg, var(--suds-surface)); color: var(--suds-chip-fg, var(--suds-secondary));
	border-radius: var(--suds-chip-radius, 999px); padding: .3em .85em; margin-bottom: .7rem;
}
.suds-team-monogram {
	display: grid; place-items: center; aspect-ratio: 1; max-width: 220px; margin-bottom: 1rem;
	border-radius: var(--suds-radius-lg, 20px);
	background: var(--suds-icon-bg, var(--suds-surface)); color: var(--suds-icon-fg, var(--suds-primary));
	font-family: var(--suds-font-header); font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.4rem);
}

/* ---- Laundry card — balance check (cardbalance_panel) --------------------
   Compact utility band (half the section rhythm so it reads as a strip, not a
   story section). Token-only. Ported from the t2-laundry fork. */
.suds-s-cardbalance { padding-block: calc(var(--suds-pad-section, 5rem) * .5); }
.suds-cardbalance-card {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem 2.5rem;
	background: var(--suds-surface);
	border: 1px solid color-mix(in srgb, var(--suds-primary) 14%, transparent);
	border-radius: var(--suds-radius-lg, var(--suds-radius, 18px));
	padding: clamp(1.6rem, 3vw, 2.6rem);
}
.suds-cardbalance-copy { max-width: 58ch; }
.suds-cardbalance-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .2rem 0 .5rem; }
.suds-cardbalance-copy p { margin: 0; }
.suds-cardbalance-cta { display: grid; gap: .5rem; justify-items: start; }
.suds-cardbalance-note { font-size: .82rem; color: var(--suds-muted); }