/* =================================================================
   ARCHETYPE LAYER — the "knobs". Each [data-arch] block is a complete
   design PERSONALITY expressed as STRUCTURAL tokens (shape, type,
   density, motion, hero recipe, section order). Switching [data-arch]
   on <html> re-skins the whole page; switching [data-hero] changes the
   hero LAYOUT independently (6 skins x 5 layouts).

   IMPORTANT: brand COLOR values are NOT set here. They live in
   style.css :root (the shipped default) and are overridden per client
   by the ACF Theme Settings emitter (inc/dynamic-css.php) and by
   /suds:bootstrap (logo-derived). Archetype blocks only REFERENCE the
   --suds-* color tokens (in shadow/icon/hero recipes) so a site
   re-skins to the client's brand while keeping the archetype's shape.
   See docs/archetypes.md for the full library + selection logic.
   ================================================================= */

:root {
	/* structural fallbacks shared by all archetypes */
	--suds-container: 1180px;
	--suds-header-h: 78px;
	--suds-logo-size: 46px;
	--suds-logo-maxw: 300px;
	--suds-icon-box: 54px;
	--suds-dur: .28s;
	--suds-ease: cubic-bezier(.4, 0, .2, 1);
	--suds-reveal-y: 26px;
	--suds-eyebrow-mark-w: 26px;
	--suds-hero-gap: clamp(2rem, 5vw, 4.5rem);
	--suds-hero-stat-gap: 1px;
	--suds-fw-btn: 700;
	--suds-btn-pad: .92em 1.5em;
	--suds-btn-pad-lg: 1.05em 1.9em;
	--suds-ls-btn: 0;
	--suds-tt-btn: none;
	--suds-o-hero: 1; --suds-o-services: 2; --suds-o-how: 3;
	--suds-o-why: 4; --suds-o-areas: 5; --suds-o-quotes: 6; --suds-o-cta: 7;
	/* hero layout fallbacks (overridden by [data-hero]) */
	--suds-hero-cols: 1.08fr .92fr;
	--suds-hero-ph-h: 440px;
	/* on-dark-band text derivations (band engine — see base.css). Client-token
	   based so any brand stays WCAG-comfortable on an ink band.
	   The eyebrow was `--suds-secondary 55%` and measured 4.34:1 on the ink band
	   (needs 4.5:1 — it is small bold text) on every archetype except basecamp,
	   which renders the eyebrow as a chip with its own background. A brand whose
	   secondary is dark (catalog's is near-ink) landed worst. Lightened to 40% —
	   verified ≥4.5:1 across all 7 archetypes with a computed-contrast sweep. */
	--suds-on-band-fg: color-mix(in srgb, var(--suds-bg) 90%, #fff);
	--suds-on-band-muted: color-mix(in srgb, var(--suds-bg) 74%, var(--suds-ink));
	--suds-on-band-eyebrow: color-mix(in srgb, var(--suds-secondary) 40%, #fff);
}

/* hero sub-elements — hidden by default, shown per [data-hero] variant */
.suds-hero-floatcard,
.suds-hero-statpanel { display: none; }

/* ============================================================== */
/* 1 · EXPRESS — tech-forward, app-first, fast & crisp (default)   */
/* ============================================================== */
[data-arch="express"] {
	/* navbar link voice (shell.css consumes; see docs/navbar-buildout-plan.md) */
	--suds-nav-link-fs: .92rem; --suds-nav-link-fw: 600;
	/* band texture (asset-free art direction; tinted via mask — see base.css) */
	--suds-band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
	--suds-band-texture-size: 22px 22px;
	--suds-img-grade: saturate(1.04) contrast(1.05); /* art-direction photo grade (docs/archetypes.md §3) */
	--suds-fw-head: 700; --suds-ls-head: -.015em; --suds-tt-head: none;
	--suds-h1: clamp(2.6rem, 5.4vw, 4.3rem); --suds-h2: clamp(2rem, 3.6vw, 2.9rem); --suds-lead: 1.22rem;
	--suds-radius: 14px; --suds-radius-lg: 20px; --suds-btn-radius: 999px; --suds-btn-border-w: 2px;
	--suds-btn-shadow: 0 10px 24px -12px var(--suds-primary); --suds-btn-shadow-hover: 0 16px 30px -12px var(--suds-primary);
	--suds-btn-hover-t: translateY(-2px); --suds-btn-ghost-border: color-mix(in srgb, var(--suds-ink) 16%, transparent); --suds-btn-ghost-hover-bg: var(--suds-surface);
	--suds-card-bg: var(--suds-bg); --suds-card-border: 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent); --suds-card-shadow: 0 1px 2px color-mix(in srgb, var(--suds-ink) 5%, transparent);
	--suds-card-shadow-hover: 0 22px 50px -28px color-mix(in srgb, var(--suds-primary) 45%, transparent); --suds-card-hover-t: translateY(-6px); --suds-card-pad: 1.8rem;
	--suds-icon-radius: 14px; --suds-icon-bg: var(--suds-surface); --suds-icon-fg: var(--suds-primary);
	--suds-chip-bg: var(--suds-surface); --suds-chip-fg: var(--suds-secondary); --suds-chip-radius: 999px;
	--suds-media-shadow: 0 40px 80px -45px color-mix(in srgb, var(--suds-primary) 50%, transparent); --suds-ph-border: 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent);
	--suds-ph-stripe-a: var(--suds-surface); --suds-ph-stripe-b: color-mix(in srgb, var(--suds-surface) 80%, var(--suds-primary));
	--suds-header-border: 1px solid color-mix(in srgb, var(--suds-ink) 8%, transparent); --suds-logo-radius: 13px; --suds-logo-shadow: 0 8px 18px -8px var(--suds-primary);
	--suds-step-num-color: var(--suds-primary); --suds-step-num-stroke: 0; --suds-step-connector: "\2192";
	--suds-tick-radius: 8px;
	--suds-pad-section: clamp(4rem, 8vw, 7rem); --suds-gap: 1.4rem; --suds-container: 1200px;
	--suds-dur: .2s; --suds-ease: cubic-bezier(.16, 1, .3, 1); --suds-reveal-y: 22px;
	--suds-hero-bg: linear-gradient(135deg, var(--suds-secondary) 0%, color-mix(in srgb, var(--suds-secondary) 78%, #000) 100%);
	--suds-hero-fg: color-mix(in srgb, var(--suds-bg) 92%, var(--suds-primary)); --suds-hero-h1: var(--suds-bg);
	--suds-hero-lead: color-mix(in srgb, var(--suds-bg) 74%, var(--suds-secondary)); --suds-hero-pad: clamp(3.5rem, 7vw, 6rem);
	--suds-o-hero: 1; --suds-o-services: 3; --suds-o-how: 2; --suds-o-why: 4; --suds-o-areas: 6; --suds-o-quotes: 5; --suds-o-cta: 7;
	/* band rhythm: hero › HOW(tint) › services › why › QUOTES(ink) › areas › cta */
	--suds-band-how: var(--suds-surface);
	--suds-band-quotes: var(--suds-ink);
	--suds-band-payment: var(--suds-surface);
}
[data-arch="express"] .suds-eyebrow,
[data-arch="express"] .suds-hero .suds-eyebrow { color: var(--suds-accent); }

/* ============================================================== */
/* 2 · WARM — family, neighborhood, soft & welcoming               */
/* ============================================================== */
[data-arch="warm"] {
	/* navbar link voice */
	--suds-nav-link-fs: .98rem;
	/* band texture (asset-free art direction; tinted via mask — see base.css) */
	--suds-band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='24' cy='30' r='11' fill='%23fff'/%3E%3Ccircle cx='86' cy='82' r='17' fill='%23fff' fill-opacity='.6'/%3E%3Ccircle cx='62' cy='10' r='5' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E");
	--suds-band-texture-size: 120px 120px;
	--suds-img-grade: saturate(1.06) sepia(.08) brightness(1.02); /* art-direction photo grade (docs/archetypes.md §3) */
	--suds-fw-head: 400; --suds-ls-head: 0; --suds-tt-head: none;
	--suds-h1: clamp(2.7rem, 5.6vw, 4.5rem); --suds-h2: clamp(2.1rem, 3.8vw, 3.1rem); --suds-lead: 1.24rem;
	--suds-radius: 22px; --suds-radius-lg: 30px; --suds-btn-radius: 999px; --suds-btn-border-w: 2px; --suds-fw-btn: 800;
	--suds-btn-shadow: 0 12px 26px -14px color-mix(in srgb, var(--suds-primary) 60%, transparent); --suds-btn-shadow-hover: 0 18px 34px -14px color-mix(in srgb, var(--suds-primary) 60%, transparent);
	--suds-btn-hover-t: translateY(-2px); --suds-btn-ghost-border: color-mix(in srgb, var(--suds-ink) 18%, transparent); --suds-btn-ghost-hover-bg: var(--suds-surface);
	--suds-card-bg: var(--suds-bg); --suds-card-border: 1px solid color-mix(in srgb, var(--suds-ink) 12%, transparent); --suds-card-shadow: 0 16px 40px -30px color-mix(in srgb, var(--suds-ink) 50%, transparent);
	--suds-card-shadow-hover: 0 26px 56px -30px color-mix(in srgb, var(--suds-primary) 40%, transparent); --suds-card-hover-t: translateY(-5px); --suds-card-pad: 2rem; --suds-card-hover-border: color-mix(in srgb, var(--suds-ink) 12%, transparent);
	--suds-icon-radius: 50%; --suds-icon-bg: var(--suds-surface); --suds-icon-fg: var(--suds-primary);
	--suds-chip-bg: var(--suds-bg); --suds-chip-fg: var(--suds-secondary); --suds-chip-radius: 999px; --suds-chip-border: 1px solid color-mix(in srgb, var(--suds-ink) 14%, transparent);
	--suds-media-shadow: 0 40px 80px -40px color-mix(in srgb, var(--suds-ink) 45%, transparent); --suds-ph-border: 1px solid color-mix(in srgb, var(--suds-ink) 12%, transparent);
	--suds-ph-stripe-a: var(--suds-surface); --suds-ph-stripe-b: color-mix(in srgb, var(--suds-surface) 85%, var(--suds-primary));
	--suds-header-border: 1px solid color-mix(in srgb, var(--suds-ink) 12%, transparent); --suds-logo-radius: 50%; --suds-logo-shadow: 0 10px 22px -10px color-mix(in srgb, var(--suds-primary) 55%, transparent);
	--suds-step-num-color: transparent; --suds-step-num-stroke: 1.5px var(--suds-primary); --suds-step-connector: "";
	--suds-tick-radius: 50%;
	--suds-pad-section: clamp(4.5rem, 8.5vw, 7.5rem); --suds-gap: 1.7rem; --suds-container: 1140px;
	--suds-dur: .4s; --suds-ease: cubic-bezier(.4, 0, .2, 1); --suds-reveal-y: 30px;
	--suds-quote-font: var(--suds-font-header); --suds-quote-style: normal;
	--suds-hero-bg: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--suds-bg) 92%, #fff) 0%, var(--suds-surface) 75%);
	--suds-hero-fg: var(--suds-ink); --suds-hero-pad: clamp(4rem, 8vw, 6.5rem);
	--suds-o-hero: 1; --suds-o-services: 2; --suds-o-why: 3; --suds-o-quotes: 4; --suds-o-how: 5; --suds-o-areas: 6; --suds-o-cta: 7;
	/* band rhythm: hero › services › WHY(ink) › quotes › HOW(tint) › areas › cta */
	--suds-band-why: var(--suds-ink);
	--suds-band-how: var(--suds-surface);
	--suds-band-story: var(--suds-surface);
	--suds-band-payment: var(--suds-surface);
}

/* ============================================================== */
/* 3 · VALUE — bright, budget, high-energy, chunky (neo-brutalist) */
/* ============================================================== */
[data-arch="value"] {
	/* navbar link voice */
	--suds-nav-link-tt: uppercase; --suds-nav-link-fs: .88rem; --suds-nav-link-ls: .04em; --suds-nav-link-fw: 700;
	/* band texture (asset-free art direction; tinted via mask — see base.css) */
	--suds-band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-3 3l6-6M0 14L14 0M11 17l6-6' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
	--suds-band-texture-size: 14px 14px;
	--suds-img-grade: saturate(1.15) contrast(1.06); /* art-direction photo grade (docs/archetypes.md §3) */
	--suds-fw-head: 800; --suds-ls-head: -.02em; --suds-tt-head: none;
	--suds-h1: clamp(2.8rem, 6vw, 4.8rem); --suds-h2: clamp(2.1rem, 4.2vw, 3.2rem); --suds-lead: 1.2rem;
	--suds-radius: 12px; --suds-radius-lg: 16px; --suds-btn-radius: 10px; --suds-btn-border-w: 2.5px;
	--suds-btn-shadow: 5px 5px 0 var(--suds-ink); --suds-btn-shadow-hover: 2px 2px 0 var(--suds-ink);
	--suds-btn-hover-t: translate(3px, 3px); --suds-btn-ghost-border: var(--suds-ink); --suds-btn-ghost-hover-bg: var(--suds-accent);
	--suds-fw-btn: 800; --suds-tt-btn: uppercase; --suds-ls-btn: .02em;
	--suds-card-bg: var(--suds-bg); --suds-card-border: 2.5px solid var(--suds-ink); --suds-card-shadow: 6px 6px 0 var(--suds-ink);
	--suds-card-shadow-hover: 3px 3px 0 var(--suds-ink); --suds-card-hover-t: translate(3px, 3px); --suds-card-pad: 1.7rem; --suds-card-hover-border: var(--suds-ink);
	--suds-icon-radius: 12px; --suds-icon-bg: var(--suds-accent); --suds-icon-fg: var(--suds-ink);
	--suds-chip-bg: var(--suds-bg); --suds-chip-fg: var(--suds-ink); --suds-chip-radius: 8px; --suds-chip-border: 2px solid var(--suds-ink);
	--suds-media-shadow: 8px 8px 0 var(--suds-ink); --suds-ph-border: 2.5px solid var(--suds-ink);
	--suds-ph-stripe-a: var(--suds-surface); --suds-ph-stripe-b: color-mix(in srgb, var(--suds-surface) 78%, var(--suds-accent));
	--suds-header-border: 2.5px solid var(--suds-ink); --suds-logo-radius: 10px; --suds-logo-shadow: 3px 3px 0 var(--suds-ink);
	--suds-step-num-color: var(--suds-accent); --suds-step-num-stroke: 1.5px var(--suds-ink); --suds-step-connector: "";
	--suds-tick-radius: 6px;
	--suds-pad-section: clamp(3.8rem, 7.5vw, 6.5rem); --suds-gap: 1.4rem; --suds-container: 1200px;
	--suds-dur: .18s; --suds-ease: cubic-bezier(.34, 1.56, .64, 1); --suds-reveal-y: 18px;
	--suds-hero-bg: var(--suds-accent); --suds-hero-fg: var(--suds-ink); --suds-hero-h1: var(--suds-ink); --suds-hero-pad: clamp(3.5rem, 7vw, 5.5rem);
	--suds-o-hero: 1; --suds-o-services: 2; --suds-o-how: 3; --suds-o-areas: 4; --suds-o-why: 5; --suds-o-quotes: 6; --suds-o-cta: 7;
	/* band rhythm: hero › SERVICES(tint) › how › areas › WHY(ink) › quotes › cta */
	--suds-band-services: var(--suds-surface);
	--suds-band-why: var(--suds-ink);
	--suds-band-payment: var(--suds-surface);
}
[data-arch="value"] .suds-hero .suds-eyebrow { color: var(--suds-primary); }
[data-arch="value"] .btn:not(.suds-btn-ghost):not(.suds-btn-light):not(.suds-btn-accent) { color: var(--suds-on-primary); }
[data-arch="value"] .suds-logo { border: 2.5px solid var(--suds-ink); }
[data-arch="value"] .suds-hero-floatcard { box-shadow: 6px 6px 0 var(--suds-ink); border: 2.5px solid var(--suds-ink); }
/* value's services band is --surface, so a --surface svc-row would vanish into it.
   Lift the list rows onto value's foreground card treatment (like the services grid card)
   so they read as distinct cards. Scoped to value — the other 6 archetypes keep a --bg
   services band, where the default --surface row already contrasts (don't regress them). */
[data-arch="value"] .suds-svc-row { background: var(--suds-card-bg); border: var(--suds-card-border); box-shadow: var(--suds-card-shadow); }

/* ============================================================== */
/* 4 · COMMERCIAL — B2B, industrial, structured, capable           */
/* ============================================================== */
[data-arch="commercial"] {
	/* navbar link voice */
	--suds-nav-link-tt: uppercase; --suds-nav-link-fs: .85rem; --suds-nav-link-ls: .06em; --suds-nav-link-fw: 700;
	/* band texture (asset-free art direction; tinted via mask — see base.css) */
	--suds-band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M36 .5H.5V36' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
	--suds-band-texture-size: 36px 36px;
	--suds-img-grade: saturate(.94) contrast(1.04); /* art-direction photo grade (docs/archetypes.md §3) */
	--suds-fw-head: 700; --suds-ls-head: -.01em; --suds-tt-head: uppercase;
	--suds-h1: clamp(2.5rem, 5vw, 4rem); --suds-h2: clamp(1.9rem, 3.4vw, 2.7rem); --suds-lead: 1.18rem;
	--suds-radius: 4px; --suds-radius-lg: 6px; --suds-btn-radius: 3px; --suds-btn-border-w: 2px;
	--suds-btn-shadow: none; --suds-btn-shadow-hover: 0 10px 22px -12px color-mix(in srgb, var(--suds-primary) 60%, transparent);
	--suds-btn-hover-t: translateY(-1px); --suds-btn-ghost-border: color-mix(in srgb, var(--suds-ink) 25%, transparent); --suds-btn-ghost-hover-bg: var(--suds-surface);
	--suds-fw-btn: 700; --suds-tt-btn: uppercase; --suds-ls-btn: .04em;
	--suds-card-bg: var(--suds-bg); --suds-card-border: 1px solid color-mix(in srgb, var(--suds-ink) 16%, transparent); --suds-card-shadow: 0 1px 0 color-mix(in srgb, var(--suds-ink) 16%, transparent);
	--suds-card-shadow-hover: 0 18px 40px -26px color-mix(in srgb, var(--suds-ink) 50%, transparent); --suds-card-hover-t: translateY(-3px); --suds-card-pad: 1.7rem; --suds-card-hover-border: var(--suds-primary);
	--suds-icon-radius: 4px; --suds-icon-bg: var(--suds-primary); --suds-icon-fg: var(--suds-on-primary);
	--suds-chip-bg: var(--suds-bg); --suds-chip-fg: var(--suds-ink); --suds-chip-radius: 3px; --suds-chip-border: 1px solid color-mix(in srgb, var(--suds-ink) 20%, transparent);
	--suds-media-shadow: 0 30px 60px -40px color-mix(in srgb, var(--suds-ink) 60%, transparent); --suds-ph-border: 1px solid color-mix(in srgb, var(--suds-ink) 18%, transparent);
	--suds-ph-stripe-a: var(--suds-surface); --suds-ph-stripe-b: color-mix(in srgb, var(--suds-surface) 82%, var(--suds-ink));
	--suds-header-border: 1px solid color-mix(in srgb, var(--suds-ink) 16%, transparent); --suds-logo-radius: 4px; --suds-logo-shadow: none;
	--suds-step-num-color: var(--suds-primary); --suds-step-num-stroke: 0; --suds-step-connector: "";
	--suds-tick-radius: 3px; --suds-eyebrow-mark-w: 30px;
	--suds-pad-section: clamp(3.8rem, 7vw, 6rem); --suds-gap: 1.1rem; --suds-container: 1220px;
	--suds-dur: .22s; --suds-ease: cubic-bezier(.4, 0, .2, 1); --suds-reveal-y: 16px;
	--suds-hero-bg: linear-gradient(180deg, var(--suds-ink) 0%, var(--suds-secondary) 100%);
	--suds-hero-fg: color-mix(in srgb, var(--suds-bg) 88%, var(--suds-secondary)); --suds-hero-h1: var(--suds-bg);
	--suds-hero-lead: color-mix(in srgb, var(--suds-bg) 70%, var(--suds-secondary)); --suds-hero-pad: clamp(3.2rem, 6vw, 5rem);
	--suds-o-hero: 1; --suds-o-why: 2; --suds-o-services: 3; --suds-o-how: 4; --suds-o-quotes: 5; --suds-o-areas: 6; --suds-o-cta: 7;
	/* band rhythm: hero › WHY(ink statement) › services › HOW(tint) › quotes › areas › cta */
	--suds-band-why: var(--suds-ink);
	--suds-band-how: var(--suds-surface);
	--suds-band-payment: var(--suds-surface);
}
[data-arch="commercial"] .suds-hero .suds-eyebrow { color: var(--suds-accent); }

/* ============================================================== */
/* 5 · PREMIUM — boutique, editorial, calm, lots of air            */
/* ============================================================== */
[data-arch="premium"] {
	/* navbar link voice */
	--suds-nav-link-fs: .95rem; --suds-nav-link-ls: .02em; --suds-nav-link-fw: 500; --suds-nav-link-gap: 2.1rem;
	--suds-img-grade: saturate(.85) contrast(1.03); /* art-direction photo grade (docs/archetypes.md §3) */
	--suds-fw-head: 600; --suds-ls-head: .005em; --suds-tt-head: none;
	--suds-h1: clamp(3rem, 6.2vw, 5.4rem); --suds-h2: clamp(2.3rem, 4.2vw, 3.5rem); --suds-lead: 1.14rem;
	--suds-radius: 2px; --suds-radius-lg: 3px; --suds-btn-radius: 2px; --suds-btn-border-w: 1.5px;
	--suds-btn-shadow: none; --suds-btn-shadow-hover: none;
	--suds-btn-hover-t: translateY(-1px); --suds-btn-ghost-border: var(--suds-ink); --suds-btn-ghost-hover-bg: var(--suds-ink);
	--suds-fw-btn: 500; --suds-tt-btn: uppercase; --suds-ls-btn: .16em; --suds-btn-pad: 1.05em 2em; --suds-btn-pad-lg: 1.15em 2.4em;
	--suds-card-bg: color-mix(in srgb, var(--suds-bg) 70%, #fff); --suds-card-border: 1px solid color-mix(in srgb, var(--suds-ink) 14%, transparent); --suds-card-shadow: none;
	--suds-card-shadow-hover: 0 30px 60px -40px color-mix(in srgb, var(--suds-ink) 40%, transparent); --suds-card-hover-t: translateY(-4px); --suds-card-pad: 2.2rem; --suds-card-hover-border: var(--suds-accent);
	--suds-icon-radius: 2px; --suds-icon-bg: transparent; --suds-icon-fg: var(--suds-accent); --suds-icon-box: 46px;
	--suds-chip-bg: transparent; --suds-chip-fg: var(--suds-ink); --suds-chip-radius: 2px; --suds-chip-border: 1px solid color-mix(in srgb, var(--suds-ink) 18%, transparent);
	--suds-media-shadow: 0 50px 90px -50px color-mix(in srgb, var(--suds-ink) 55%, transparent); --suds-ph-border: 1px solid color-mix(in srgb, var(--suds-ink) 14%, transparent);
	--suds-ph-stripe-a: var(--suds-surface); --suds-ph-stripe-b: color-mix(in srgb, var(--suds-surface) 88%, var(--suds-ink));
	--suds-header-border: 1px solid color-mix(in srgb, var(--suds-ink) 12%, transparent); --suds-logo-radius: 2px; --suds-logo-shadow: none;
	--suds-step-num-color: transparent; --suds-step-num-stroke: 1px var(--suds-accent); --suds-step-connector: "";
	--suds-tick-radius: 2px; --suds-eyebrow-mark-w: 40px;
	--suds-pad-section: clamp(5rem, 10vw, 9rem); --suds-gap: 2rem; --suds-container: 1120px;
	--suds-dur: .5s; --suds-ease: cubic-bezier(.22, 1, .36, 1); --suds-reveal-y: 34px;
	--suds-quote-font: var(--suds-font-header); --suds-quote-style: italic;
	--suds-hero-bg: var(--suds-bg); --suds-hero-fg: var(--suds-ink); --suds-hero-pad: clamp(5rem, 9vw, 7.5rem);
	--suds-o-hero: 1; --suds-o-why: 2; --suds-o-services: 3; --suds-o-quotes: 4; --suds-o-how: 5; --suds-o-areas: 6; --suds-o-cta: 7;
	/* band rhythm: hero › why › services › QUOTES(ink editorial) › how › areas › cta */
	--suds-band-quotes: var(--suds-ink);
	--suds-band-story: var(--suds-surface);
	--suds-band-payment: var(--suds-surface);
}
[data-arch="premium"] .suds-eyebrow { color: var(--suds-accent); letter-spacing: .24em; }

/* ============================================================== */
/* 6 · ECO — green, sustainable, fresh, organic                    */
/* ============================================================== */
[data-arch="eco"] {
	/* navbar link voice */
	--suds-nav-link-fs: .95rem;
	/* band texture (asset-free art direction; tinted via mask — see base.css) */
	--suds-band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='26'%3E%3Cpath d='M0 13Q22.5 2 45 13T90 13' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
	--suds-band-texture-size: 90px 26px;
	--suds-img-grade: saturate(1.03) brightness(1.02); /* art-direction photo grade (docs/archetypes.md §3) */
	--suds-fw-head: 700; --suds-ls-head: -.018em; --suds-tt-head: none;
	--suds-h1: clamp(2.7rem, 5.6vw, 4.4rem); --suds-h2: clamp(2rem, 3.8vw, 3rem); --suds-lead: 1.22rem;
	--suds-radius: 18px; --suds-radius-lg: 26px; --suds-btn-radius: 14px; --suds-btn-border-w: 2px; --suds-fw-btn: 700;
	--suds-btn-shadow: 0 12px 26px -14px color-mix(in srgb, var(--suds-primary) 60%, transparent); --suds-btn-shadow-hover: 0 18px 32px -14px color-mix(in srgb, var(--suds-primary) 60%, transparent);
	--suds-btn-hover-t: translateY(-2px); --suds-btn-ghost-border: color-mix(in srgb, var(--suds-ink) 16%, transparent); --suds-btn-ghost-hover-bg: var(--suds-surface);
	--suds-card-bg: color-mix(in srgb, var(--suds-bg) 70%, #fff); --suds-card-border: 1px solid color-mix(in srgb, var(--suds-ink) 12%, transparent); --suds-card-shadow: 0 14px 36px -28px color-mix(in srgb, var(--suds-ink) 50%, transparent);
	--suds-card-shadow-hover: 0 24px 52px -30px color-mix(in srgb, var(--suds-primary) 40%, transparent); --suds-card-hover-t: translateY(-5px); --suds-card-pad: 1.9rem; --suds-card-hover-border: color-mix(in srgb, var(--suds-primary) 40%, transparent);
	--suds-icon-radius: 16px; --suds-icon-bg: var(--suds-surface); --suds-icon-fg: var(--suds-primary);
	--suds-chip-bg: color-mix(in srgb, var(--suds-bg) 70%, #fff); --suds-chip-fg: var(--suds-secondary); --suds-chip-radius: 999px; --suds-chip-border: 1px solid color-mix(in srgb, var(--suds-ink) 14%, transparent);
	--suds-media-shadow: 0 40px 80px -45px color-mix(in srgb, var(--suds-ink) 45%, transparent); --suds-ph-border: 1px solid color-mix(in srgb, var(--suds-ink) 12%, transparent);
	--suds-ph-stripe-a: var(--suds-surface); --suds-ph-stripe-b: color-mix(in srgb, var(--suds-surface) 84%, var(--suds-primary));
	--suds-header-border: 1px solid color-mix(in srgb, var(--suds-ink) 12%, transparent); --suds-logo-radius: 16px; --suds-logo-shadow: 0 10px 22px -10px color-mix(in srgb, var(--suds-primary) 50%, transparent);
	--suds-step-num-color: var(--suds-primary); --suds-step-num-stroke: 0; --suds-step-connector: "";
	--suds-tick-radius: 50%;
	--suds-pad-section: clamp(4.2rem, 8vw, 7rem); --suds-gap: 1.6rem; --suds-container: 1160px;
	--suds-dur: .34s; --suds-ease: cubic-bezier(.34, 1.2, .64, 1); --suds-reveal-y: 28px;
	--suds-hero-bg: radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--suds-surface) 80%, #fff) 0%, var(--suds-bg) 60%);
	--suds-hero-fg: var(--suds-ink); --suds-hero-pad: clamp(3.8rem, 7vw, 6rem);
	--suds-o-hero: 1; --suds-o-why: 2; --suds-o-services: 3; --suds-o-how: 4; --suds-o-areas: 5; --suds-o-quotes: 6; --suds-o-cta: 7;
	/* band rhythm: hero › WHY(ink) › services › how › AREAS(tint) › quotes › cta */
	--suds-band-why: var(--suds-ink);
	--suds-band-areas: var(--suds-surface);
	--suds-band-payment: var(--suds-surface);
}
/* organic media frame for eco split/centered heroes */
[data-hero="split"][data-arch="eco"] .suds-hero-media .suds-ph,
[data-hero="centered"][data-arch="eco"] .suds-hero-media .suds-ph { border-radius: 140px 30px 140px 30px; }

/* ============================================================== */
/* 7 · BASECAMP — outdoor/lodge, warm & rugged, torn-paper bands   */
/* ============================================================== */
[data-arch="basecamp"] {
	/* navbar link voice */
	--suds-nav-link-tt: uppercase; --suds-nav-link-fs: .9rem; --suds-nav-link-ls: .05em; --suds-nav-link-fw: 800;
	/* band texture (asset-free art direction; tinted via mask — see base.css): topo contour lines */
	--suds-band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cpath d='M0 18Q30 4 60 18T120 18M0 42Q30 28 60 42T120 42' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");
	--suds-band-texture-size: 120px 60px;
	--suds-img-grade: saturate(1.06) contrast(1.02); /* atmospheric outdoor grade (docs/archetypes.md §3) */
	/* warm surface (cream): --warm-anchor is an archetype art-direction CONSTANT
	   (same allowance class as the texture SVGs' fixed #fff). Flip to a cool tint
	   by retargeting the anchor (e.g. var(--suds-secondary)) — one token. */
	--suds-warm-anchor: #E8C87A;
	--suds-surface-warm: color-mix(in srgb, var(--suds-bg) 86%, var(--suds-warm-anchor));
	--suds-fw-head: 800; --suds-ls-head: -.01em; --suds-tt-head: none;
	--suds-h1: clamp(2.7rem, 5.6vw, 4.4rem); --suds-h2: clamp(2rem, 3.8vw, 3rem); --suds-lead: 1.2rem;
	/* ALL-CAPS smaller card headings (display headings stay title-case) */
	--suds-tt-card-head: uppercase; --suds-fs-card-head: .95rem; --suds-ls-card-head: .05em;
	--suds-radius: 16px; --suds-radius-lg: 22px; --suds-btn-radius: 12px; --suds-btn-border-w: 2px;
	--suds-fw-btn: 800; --suds-tt-btn: uppercase; --suds-ls-btn: .06em; --suds-btn-pad: 1em 1.6em;
	--suds-btn-shadow: 0 10px 22px -12px color-mix(in srgb, var(--suds-ink) 55%, transparent); --suds-btn-shadow-hover: 0 16px 30px -12px color-mix(in srgb, var(--suds-ink) 55%, transparent);
	--suds-btn-hover-t: translateY(-2px); --suds-btn-ghost-border: color-mix(in srgb, var(--suds-ink) 18%, transparent); --suds-btn-ghost-hover-bg: var(--suds-surface-warm);
	--suds-card-bg: var(--suds-bg); --suds-card-border: 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent); --suds-card-shadow: 0 2px 6px color-mix(in srgb, var(--suds-ink) 7%, transparent);
	--suds-card-shadow-hover: 0 24px 48px -26px color-mix(in srgb, var(--suds-ink) 40%, transparent); --suds-card-hover-t: translateY(-5px); --suds-card-pad: 1.9rem;
	--suds-icon-radius: 12px; --suds-icon-bg: var(--suds-surface-warm); --suds-icon-fg: var(--suds-primary);
	/* gold chips — fg pinned to ink for WCAG on a warm accent */
	--suds-chip-bg: var(--suds-accent); --suds-chip-fg: var(--suds-ink); --suds-chip-radius: 8px;
	--suds-media-shadow: 0 34px 70px -40px color-mix(in srgb, var(--suds-ink) 50%, transparent); --suds-ph-border: 0;
	--suds-ph-stripe-a: var(--suds-surface-warm); --suds-ph-stripe-b: color-mix(in srgb, var(--suds-surface-warm) 82%, var(--suds-primary));
	--suds-header-border: 0; --suds-logo-radius: 12px; --suds-logo-shadow: none;
	--suds-step-num-color: var(--suds-accent); --suds-step-num-stroke: 0; --suds-step-connector: "";
	--suds-tick-radius: 8px;
	--suds-pad-section: clamp(4.2rem, 8vw, 7rem); --suds-gap: 1.5rem; --suds-container: 1180px;
	--suds-svc-row-gap: 2.75rem; /* alternating media rows breathe more than card grids */
	--suds-dur: .3s; --suds-ease: cubic-bezier(.25, .9, .35, 1); --suds-reveal-y: 28px;
	--suds-hero-bg: linear-gradient(180deg, color-mix(in srgb, var(--suds-ink) 88%, var(--suds-secondary)) 0%, var(--suds-ink) 100%);
	--suds-hero-fg: var(--suds-on-band-fg); --suds-hero-h1: var(--suds-bg);
	--suds-hero-lead: var(--suds-on-band-muted); --suds-hero-pad: clamp(4rem, 8vw, 6.5rem);
	--suds-o-hero: 1; --suds-o-services: 2; --suds-o-why: 3; --suds-o-how: 4; --suds-o-quotes: 5; --suds-o-areas: 6; --suds-o-cta: 7;
	/* band rhythm: hero(ink) › services › WHY(ink panel moment) › HOW(cream) › quotes › AREAS(cream) › cta */
	--suds-band-how: var(--suds-surface-warm);
	--suds-band-why: var(--suds-ink);
	--suds-band-areas: var(--suds-surface-warm);
	--suds-band-story: var(--suds-ink);
	--suds-band-payment: var(--suds-surface-warm);
	--suds-band-newsletter: var(--suds-surface-warm);
	/* band-edge axis (see base.css engine): torn-paper dividers on band
	   transitions — the skin's signature. sbs_edge_patterns() (dynamic-css.php)
	   KNOWINGLY DUPLICATES this URI; edit both together. */
	--suds-edge-display: block;
	--suds-edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='40'%3E%3Cpath d='M0 0H600V18L582 27 564 16 541 30 522 19 497 33 473 21 448 29 426 15 401 31 379 20 352 34 330 22 305 28 281 14 256 30 233 18 207 32 186 21 161 27 138 15 112 29 88 19 64 31 42 17 21 26 0 16Z' fill='%23fff'/%3E%3C/svg%3E");
	--suds-edge-size: 600px 100%;
	--suds-edge-h: clamp(16px, 3vw, 34px);
	--suds-edge-hero-bg: var(--suds-ink);
	/* eyebrow renders as a gold CHIP (mark suppressed below); fg pinned to ink for WCAG */
	--suds-eyebrow-bg: var(--suds-chip-bg);
	--suds-eyebrow-fg: var(--suds-chip-fg);
	--suds-eyebrow-pad: .34em .9em;
	--suds-eyebrow-mark-w: 0;
	/* fullbleed hero scrim: heavier + brand-ink so copy reads over bright photos */
	--suds-hero-scrim: linear-gradient(90deg,
		color-mix(in srgb, var(--suds-ink) 92%, transparent) 0%,
		color-mix(in srgb, var(--suds-ink) 78%, transparent) 45%,
		color-mix(in srgb, var(--suds-ink) 42%, transparent) 100%);
}
/* chip mode: kill the dash mark entirely (width 0 still leaves flex gap) */
[data-arch="basecamp"] .suds-eyebrow::before { display: none; }
/* dark bands + hero: the chip keeps its gold bg/ink fg — override the band
   engine's on-band eyebrow TEXT recolor, which assumes a bg-less eyebrow. */
[data-arch="basecamp"] .suds-s-why .suds-eyebrow,
[data-arch="basecamp"] .suds-s-story .suds-eyebrow,
[data-arch="basecamp"] .suds-s-story-split .suds-eyebrow,
[data-arch="basecamp"] .suds-hero .suds-eyebrow,
[data-arch="basecamp"] .suds-section[data-opt-tone="dark"] .suds-eyebrow {
	background: var(--suds-chip-bg);
	color: var(--suds-chip-fg);
}

/* ============================================================== */
/* Hero float card + commercial stat panel + form card (shared)    */
/* ============================================================== */
.suds-hero-floatcard {
	position: absolute; bottom: 1.4rem; left: 1.4rem;
	align-items: center; gap: .85rem;
	background: var(--suds-bg); color: var(--suds-ink);
	padding: .85rem 1.1rem; border-radius: var(--suds-radius);
	box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .5);
	border: var(--suds-card-border); max-width: 78%;
}
.suds-hero-floatcard .dot { width: 38px; height: 38px; border-radius: var(--suds-icon-radius); background: var(--suds-primary); color: var(--suds-on-primary); display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.suds-hero-floatcard b { font-family: var(--suds-font-header); font-size: .95rem; display: block; line-height: 1.1; }
.suds-hero-floatcard span { font-size: .8rem; color: var(--suds-muted); }

.suds-hero-statpanel { grid-template-columns: 1fr 1fr; gap: 1px; background: color-mix(in srgb, var(--suds-hero-fg) 24%, transparent); border: 1px solid color-mix(in srgb, var(--suds-hero-fg) 28%, transparent); border-radius: var(--suds-radius-lg); overflow: hidden; }
.suds-hero-statpanel .st { background: color-mix(in srgb, var(--suds-hero-fg) 10%, transparent); backdrop-filter: blur(2px); padding: 1.6rem 1.4rem; }
.suds-hero-statpanel .st b { font-family: var(--suds-font-header); font-weight: 700; font-size: 2.1rem; color: var(--suds-hero-fg); display: block; line-height: 1; letter-spacing: -.01em; }
.suds-hero-statpanel .st span { font-size: .86rem; color: color-mix(in srgb, var(--suds-hero-fg) 66%, transparent); text-transform: uppercase; letter-spacing: .05em; margin-top: .4rem; display: block; }
.suds-hero-statpanel .st .u { color: var(--suds-accent); }

/* ============================================================== */
/* HERO VARIANT LAYER — [data-hero], INDEPENDENT of archetype.     */
/* Rules appear after archetype blocks so the variant wins on the  */
/* shared hero tokens — the decoupling we want.                    */
/* ============================================================== */

/* 1 · SPLIT — copy left, photo right, floating pickup card */
[data-hero="split"] { --suds-hero-cols: 1.08fr .92fr; --suds-hero-ph-h: 440px; }
[data-hero="split"] .suds-hero-floatcard { display: flex; }

/* 2 · CENTERED — copy centered, wide photo band beneath */
[data-hero="centered"] { --suds-hero-cols: 1fr; --suds-hero-ph-h: 380px; }
[data-hero="centered"] .suds-hero .suds-wrap { text-align: center; justify-items: center; }
[data-hero="centered"] .suds-hero-copy { max-width: 820px; }
[data-hero="centered"] .suds-hero .suds-lead { margin-inline: auto; }
[data-hero="centered"] .suds-hero-cta,
[data-hero="centered"] .suds-hero-trust { justify-content: center; }
[data-hero="centered"] .suds-hero-media { width: 100%; margin-top: .5rem; }

/* 3 · STATPANEL — copy left, capacity stat grid right (B2B) */
[data-hero="statpanel"] { --suds-hero-cols: 1.05fr .95fr; }
[data-hero="statpanel"] .suds-hero-media .suds-ph { display: none; }
[data-hero="statpanel"] .suds-hero-statpanel { display: grid; }

/* 4 · FULLBLEED — photo fills the hero, copy overlaid on a scrim */
[data-hero="fullbleed"] { --suds-hero-cols: 1fr; --suds-hero-fg: #fff; --suds-hero-h1: #fff; --suds-hero-lead: #E7ECF4; --suds-hero-pad: clamp(5rem, 11vw, 8.5rem); }
[data-hero="fullbleed"] .suds-hero { position: relative; }
[data-hero="fullbleed"] .suds-hero-media { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: 0; }
[data-hero="fullbleed"] .suds-hero-media .suds-ph { width: 100%; height: 100%; min-height: 100%; border-radius: 0 !important; box-shadow: none; border: 0; }
[data-hero="fullbleed"] .suds-hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: 1; background: var(--suds-hero-scrim, linear-gradient(90deg, rgba(8, 12, 20, .84) 0%, rgba(8, 12, 20, .6) 48%, rgba(8, 12, 20, .32) 100%)); }
[data-hero="fullbleed"] .suds-hero .suds-wrap { position: relative; z-index: 2; }
[data-hero="fullbleed"] .suds-hero-copy { max-width: 680px; }
[data-hero="fullbleed"] .suds-hero .suds-eyebrow { color: #fff; }

/* responsive: collapse hero to single column on small screens */
@media (max-width: 880px) {
	[data-hero] .suds-hero .suds-wrap { grid-template-columns: 1fr !important; }
	.suds-hero-media { margin-top: 2rem; }
}

/* ============================================================== */
/* Band engine — dark "brand moment" text flips (see base.css).   */
/* Scoped per archetype so unbanded sections are never touched.   */
/* ============================================================== */
[data-arch="warm"] .suds-s-why,
[data-arch="value"] .suds-s-why,
[data-arch="commercial"] .suds-s-why,
[data-arch="eco"] .suds-s-why,
[data-arch="basecamp"] .suds-s-why,
[data-arch="basecamp"] .suds-s-story,
[data-arch="basecamp"] .suds-s-story-split,
[data-arch="basecamp"] .suds-s-story-values { color: var(--suds-on-band-fg); }
[data-arch="warm"] .suds-s-why .suds-eyebrow,
[data-arch="value"] .suds-s-why .suds-eyebrow,
[data-arch="commercial"] .suds-s-why .suds-eyebrow,
[data-arch="eco"] .suds-s-why .suds-eyebrow,
[data-arch="basecamp"] .suds-s-story .suds-eyebrow,
[data-arch="basecamp"] .suds-s-story-split .suds-eyebrow,
[data-arch="basecamp"] .suds-s-story-values .suds-eyebrow { color: var(--suds-on-band-eyebrow); }
[data-arch="warm"] .suds-s-why .suds-text-muted,
[data-arch="value"] .suds-s-why .suds-text-muted,
[data-arch="commercial"] .suds-s-why .suds-text-muted,
[data-arch="eco"] .suds-s-why .suds-text-muted,
[data-arch="basecamp"] .suds-s-why .suds-text-muted,
[data-arch="basecamp"] .suds-s-story .suds-text-muted,
[data-arch="basecamp"] .suds-s-story-split .suds-text-muted,
[data-arch="basecamp"] .suds-s-story-split .suds-prose,
[data-arch="basecamp"] .suds-s-story-split .suds-prose p,
[data-arch="basecamp"] .suds-s-story .suds-prose p,
[data-arch="basecamp"] .suds-s-story-values .suds-prose p,
[data-arch="basecamp"] .suds-s-story-values .suds-text-muted { color: var(--suds-on-band-muted); }
/* the story lead is the primary intro line — keep it at full on-band strength (the muted
   rule above would dim it). Higher specificity (.suds-prose .suds-lead) to win. */
[data-arch="basecamp"] .suds-s-story .suds-prose .suds-lead { color: var(--suds-on-band-fg); }

[data-arch="express"] .suds-s-quotes,
[data-arch="premium"] .suds-s-quotes { color: var(--suds-on-band-fg); }
[data-arch="express"] .suds-s-quotes .suds-eyebrow,
[data-arch="premium"] .suds-s-quotes .suds-eyebrow { color: var(--suds-on-band-eyebrow); }
[data-arch="express"] .suds-s-quotes .suds-sample-note,
[data-arch="premium"] .suds-s-quotes .suds-sample-note { color: var(--suds-on-band-muted); }
[data-arch="express"] .suds-s-quotes .suds-google-badge .stars,
[data-arch="express"] .suds-s-quotes .suds-google-badge a,
[data-arch="premium"] .suds-s-quotes .suds-google-badge .stars,
[data-arch="premium"] .suds-s-quotes .suds-google-badge a { color: var(--suds-on-band-eyebrow); }
/* quote cards keep their own light surface — restore readable ink inside */
[data-arch="express"] .suds-s-quotes .suds-quote,
[data-arch="premium"] .suds-s-quotes .suds-quote { color: var(--suds-ink); }
[data-arch="express"] .suds-s-quotes .suds-quote .who span,
[data-arch="premium"] .suds-s-quotes .suds-quote .who span { color: var(--suds-muted); }

/* Band textures fire ONLY on each archetype's dark brand-moment band
   (the root-level texture/size tokens are inert until opacity is scoped in).
   Operator override: Theme Settings → Design (suds_texture_mode / opacity),
   emitted over this layer by inc/dynamic-css.php — sbs_texture_patterns()
   KNOWINGLY DUPLICATES the five SVG data-URIs above; edit both together. */
[data-arch="warm"] .suds-s-why,
[data-arch="eco"] .suds-s-why,
[data-arch="basecamp"] .suds-s-why { --suds-band-texture-opacity: .05; }
[data-arch="basecamp"] .suds-s-story,
[data-arch="basecamp"] .suds-s-story-split,
[data-arch="basecamp"] .suds-s-story-values,
[data-arch="basecamp"] .suds-section[data-opt-tone="dark"],
[data-arch="basecamp"] .suds-site-footer { --suds-band-texture-opacity: .05; }
[data-arch="basecamp"] .suds-cta-band { --suds-band-texture-opacity: .07; }
[data-arch="value"] .suds-s-why { --suds-band-texture-opacity: .05; }
[data-arch="commercial"] .suds-s-why { --suds-band-texture-opacity: .06; }
[data-arch="express"] .suds-s-quotes { --suds-band-texture-opacity: .06; }

/* ---- effects layer tuning (the --suds-fx-* tokens; defaults in effects.css) ----
   Effects are agent-opt-in per site (no archetype defaults); these tokens keep an
   enabled effect ON-SKIN: premium reads quiet/slow, value brighter/punchier. */
[data-arch="premium"] { --suds-fx-opacity: .4; --suds-fx-tempo: 1.6; }
[data-arch="commercial"] { --suds-fx-opacity: .55; --suds-fx-tempo: 1.25; }
[data-arch="value"] { --suds-fx-opacity: .95; }
/* Value's hard-outline skin fights glassmorphism: keep the ink border language
   even when glass is on, so the combination degrades coherently instead of
   breaking the skin. (Docs still steer agents away from value+glass.) */
[data-arch="value"] .suds-hero[data-opt-surface="glass"] .suds-hero-floatcard,
[data-arch="value"] .suds-hero[data-opt-surface="glass"] .suds-hero-statpanel {
	border: 2.5px solid var(--suds-ink);
	box-shadow: 6px 6px 0 var(--suds-ink);
}