/*
Theme Name: Studio
Description: Design engine for generated local-business sites. Palette, fonts, shapes, textures, and section layouts come from each site's studio_design option; pages are ordinary editable blocks.
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: studio
*/

/* Tokens (radii, button shape, texture) are set per site in inc/design.php. */
:root {
	--cs-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--cs-primary: var(--wp--preset--color--primary);
	--cs-secondary: var(--wp--preset--color--secondary);
	--cs-accent: var(--wp--preset--color--accent);
	--cs-border: var(--wp--preset--color--border);
	--cs-muted: var(--wp--preset--color--muted);
	--cs-base: var(--wp--preset--color--base);
	--cs-contrast: var(--wp--preset--color--contrast);
	--cs-on-primary: var(--wp--preset--color--on-primary);
	--cs-header-h: 118px;
	--st-radius-sm: 10px;
	--st-radius-md: 16px;
	--st-radius-lg: 24px;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* No stranded last words: balance headings, avoid orphans in paragraphs. */
h1, h2, h3, h4, .cs-card-heading, .cs-big-quote, .cs-stat-num { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--cs-accent); color: var(--wp--preset--color--on-accent); }

/* Sections sit flush; each section owns its spacing. */
.wp-site-blocks > * + *,
.wp-site-blocks .wp-block-post-content > * + * { margin-block-start: 0; }

:where(a, button, summary, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--cs-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------- Dark sections (is-dark) ---------- */
.is-dark a:where(:not(.wp-element-button)) { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.is-style-card a:where(:not(.wp-element-button)) { color: var(--cs-secondary); text-decoration: none; }
.is-style-card a:where(:not(.wp-element-button)):hover { text-decoration: underline; }
.is-dark .is-style-card { color: var(--cs-contrast); }

/* ---------- Textures ---------- */
.cs-textured { position: relative; isolation: isolate; }
.cs-textured::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--st-texture, none);
	background-size: var(--st-texture-size, auto);
	-webkit-mask-image: radial-gradient(ellipse 75% 85% at 75% 20%, #000 15%, transparent 78%);
	mask-image: radial-gradient(ellipse 75% 85% at 75% 20%, #000 15%, transparent 78%);
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	border-radius: var(--st-btn-radius, 10px);
	transition: transform 0.2s var(--cs-ease), box-shadow 0.2s var(--cs-ease), filter 0.2s, background-color 0.2s, color 0.2s;
	line-height: 1.2;
}
/* Hover darkening, elevation and the press are the interaction baseline (assets/css/style-layer.css, @interact). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
	box-shadow: none;
	padding: calc(0.95em - 2px) calc(1.5em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.wp-block-button.is-style-light > .wp-block-button__link { background: var(--cs-base); color: var(--cs-primary); border: 1px solid var(--cs-border); box-shadow: none; }
.wp-block-button.is-style-dark > .wp-block-button__link { background: var(--cs-primary); color: var(--cs-on-primary); }
.wp-block-button.is-style-text-link > .wp-block-button__link { background: none; color: inherit; padding: 0; box-shadow: none; border-radius: 0; font-weight: 700; }
.wp-block-button.is-style-text-link > .wp-block-button__link:hover { transform: none; filter: none; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.cs-stack { flex-direction: column; align-items: stretch; }
.cs-stack .wp-block-button, .cs-stack .wp-block-button__link { width: 100%; text-align: center; }

/* ---------- Paragraph styles ---------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cs-secondary);
	margin-bottom: 0.6rem;
}
.is-dark .is-style-eyebrow { color: var(--cs-accent); }
.is-dark .is-style-card .is-style-eyebrow { color: var(--cs-secondary); }
.is-style-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--cs-muted); }
.is-dark .is-style-lead, .has-accent-background-color .is-style-lead { color: inherit; opacity: 0.86; }
.is-style-stars { color: var(--cs-accent); letter-spacing: 0.12em; font-size: 1.05rem; margin: 0; }
.cs-small { font-size: var(--wp--preset--font-size--small); color: var(--cs-muted); }
.cs-display { letter-spacing: -0.035em; line-height: 1.02; }
.cs-display-xl { font-size: clamp(2.75rem, 7.5vw, 6.5rem) !important; max-width: 16ch; }
.cs-center-text { text-align: center; }

/* ---------- List styles ---------- */
:where(.is-style-checklist, .is-style-inline, .is-style-chips) { list-style: none; padding-left: 0; }
.is-style-checklist li { position: relative; padding-left: 2rem; margin-block: 0.6rem; font-weight: 500; }
.is-style-checklist li::before,
.is-style-inline li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cs-secondary) 14%, transparent);
}
.is-style-checklist li::after,
.is-style-inline li::after {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: calc(0.2em + 0.25rem);
	width: 0.8rem;
	height: 0.8rem;
	background: var(--cs-secondary);
	-webkit-mask: url(assets/icons/check.svg) center / contain no-repeat;
	mask: url(assets/icons/check.svg) center / contain no-repeat;
}
.is-dark .is-style-checklist li::before, .is-dark .is-style-inline li::before { background: color-mix(in srgb, var(--cs-accent) 24%, transparent); }
.is-dark .is-style-checklist li::after, .is-dark .is-style-inline li::after { background: var(--cs-accent); }
.is-dark .is-style-card .is-style-checklist li::before { background: color-mix(in srgb, var(--cs-secondary) 14%, transparent); }
.is-dark .is-style-card .is-style-checklist li::after { background: var(--cs-secondary); }
.is-style-inline { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 2rem; font-size: 0.95rem; font-weight: 600; }
.is-style-inline li { position: relative; padding-left: 1.75rem; margin: 0; }
.is-style-chips { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 0; }
.is-style-chips li {
	margin: 0;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: var(--cs-base);
	color: var(--cs-contrast);
	border: 1px solid color-mix(in srgb, var(--cs-accent) 45%, transparent);
	font-weight: 600;
	box-shadow: var(--wp--preset--shadow--sm);
}
/* A chip that links to its own page (city pages link themselves in once published). */
.is-style-chips li:has(> a) { padding: 0; }
.is-style-chips li > a { display: block; padding: 0.6rem 1.1rem; border-radius: inherit; color: inherit; text-decoration: none; transition: background 0.2s var(--cs-ease), color 0.2s var(--cs-ease); }
.is-style-chips li > a:hover, .is-style-chips li > a:focus-visible { background: var(--cs-accent); color: var(--cs-on-accent, #fff); }

/* ---------- Group styles ---------- */
.is-style-card {
	position: relative;
	background: var(--cs-base);
	color: var(--cs-contrast);
	border: 1px solid var(--cs-border);
	border-radius: var(--st-radius-md);
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: var(--wp--preset--shadow--sm);
}
.is-style-card > :first-child { margin-top: 0; }
.is-style-card-dark { border-radius: var(--st-radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--wp--preset--shadow--lg); }

/* ---------- Images ---------- */
.wp-block-image.is-style-icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 0 1.1rem;
	border-radius: calc(var(--st-radius-sm) + 4px);
	background: color-mix(in srgb, var(--cs-secondary) 11%, var(--cs-base));
}
.wp-block-image.is-style-icon img { width: 1.6rem; height: 1.6rem; }
.cs-rounded-photo img, .cs-hero-photo img, .cs-hero-wide-photo img, .cs-cta-photo img, .cs-gallery-photo img { border-radius: var(--st-radius-lg); width: 100%; }
.cs-gallery-photo { margin: 0; }
.cs-gallery-photo img { transition: transform 0.4s var(--cs-ease); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.cs-topbar { padding-block: 0.5rem; font-size: 0.85rem; }
.cs-topbar p { margin: 0; }
.cs-topbar-note { opacity: 0.85; }
.cs-topbar-call .wp-block-button__link { font-size: 0.9rem; color: var(--cs-accent); }
.cs-mainbar {
	background: color-mix(in srgb, var(--cs-base) 94%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--cs-border);
	padding-block: 0.85rem;
	box-shadow: 0 6px 24px rgb(15 23 42 / 0.05);
}
.cs-brand { gap: 0.75rem; min-width: 0; }
.cs-brand .wp-block-site-title { margin: 0; font-size: 1.3rem; line-height: 1.15; }
.cs-brand .wp-block-site-title a { color: var(--cs-primary); text-decoration: none; }
.cs-brand:not(:has(.wp-block-site-logo img)) .wp-block-site-title a { display: inline-flex; align-items: center; gap: 0.7rem; }
.cs-brand:not(:has(.wp-block-site-logo img)) .wp-block-site-title a::before {
	content: "";
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: calc(var(--st-radius-sm) + 2px);
	background: var(--cs-accent) var(--st-mark, none) center / 58% no-repeat;
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cs-accent) 60%, #fff);
}
/* A text logo (src/pipeline/wordmark.ts) already carries the name and the mark. */
.cs-brand:has(.wp-block-site-logo img[src*="logo-wordmark"]) .wp-block-site-title { display: none; }
.cs-brand .wp-block-site-logo img[src*="logo-wordmark"] { width: auto !important; height: 2.6rem !important; max-width: min(64vw, 420px); object-fit: contain; object-position: left center; }
.cs-header-actions { gap: clamp(0.75rem, 2vw, 1.75rem); }
.cs-nav a { color: var(--cs-contrast); }
.cs-nav .wp-block-navigation-item__content:hover { color: var(--cs-secondary); }
.cs-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--cs-border) !important;
	border-radius: var(--st-radius-sm);
	padding: 0.5rem !important;
	box-shadow: var(--wp--preset--shadow--md);
	min-width: 230px !important;
}
.cs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.55rem 0.8rem !important; border-radius: 8px; }
.cs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--surface); }
.cs-header-call .wp-block-button__link { padding: 0.7em 1.2em; font-size: 0.95rem; white-space: nowrap; }
.cs-header-phone .wp-block-button__link { color: var(--cs-primary); font-size: 0.95rem; white-space: nowrap; }
.cs-header-centered { padding-block: 1rem 0.5rem; }
.cs-header-centered .cs-header-row { align-items: center; }
.cs-header-centered .cs-brand { justify-content: center; }
.cs-header-centered .cs-brand .wp-block-site-title { font-size: 1.6rem; }
.cs-header-centered .cs-nav-row { border-top: 1px solid var(--cs-border); margin-top: 0.85rem; padding-top: 0.5rem; }

/* ---------- Sections ---------- */
.cs-section { padding-block: var(--wp--preset--spacing--xl); }
.cs-section-tight { padding-block: var(--wp--preset--spacing--l); }
.cs-section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.cs-section-head h2 { margin-block: 0 0.75rem; }
.cs-section-head .is-style-lead { margin: 0; }
.cs-center { text-align: center; }
.cs-center.is-layout-constrained > * { margin-inline: auto !important; }
.cs-center .wp-block-buttons, .cs-center-buttons { justify-content: center; }
.cs-split { gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center !important; }
.cs-split-top { align-items: flex-start !important; }
.cs-map { margin-top: clamp(2rem, 5vw, 3.5rem) !important; }
.cs-map:empty, .cs-map:not(:has(iframe)) { display: none; }
.cs-sticky-head { position: sticky; top: calc(var(--cs-header-h) + 2rem); }

/* Hero (all variants) */
.cs-hero { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.cs-has-stats-overlap { padding-bottom: clamp(7rem, 12vw, 9.5rem); }
.cs-hero-cols { gap: clamp(2rem, 5vw, 4.5rem); align-items: center !important; }
.cs-hero h1 { margin-block: 0 1.25rem; max-width: 16ch; }
.cs-hero .is-style-lead { max-width: 38rem; margin-bottom: 2rem; }
.cs-hero-card { padding: clamp(1.75rem, 3vw, 2.25rem); border: 0; box-shadow: var(--wp--preset--shadow--lg); border-radius: var(--st-radius-lg); }
.cs-hero-card .cs-card-title { font-size: 1.65rem; margin-block: 0.35rem 0.5rem; }
.cs-hero-card .is-style-checklist { margin-block: 1.25rem 1.5rem; }
.cs-hero-card .cs-small { margin: 1rem 0 0; text-align: center; }
.cs-live {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: #e8f7ee;
	color: #146c3a;
	font-size: 0.8rem;
	font-weight: 700;
}
.cs-live::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; animation: cs-pulse 2s infinite; }
@keyframes cs-pulse {
	0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0.6); }
	70% { box-shadow: 0 0 0 8px rgb(34 197 94 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); }
}
.cs-hero-centered { text-align: center; }
.cs-hero-centered h1 { max-width: 18ch; margin-inline: auto; }
.cs-hero-centered .is-style-lead { margin-inline: auto; }
.cs-hero-centered .wp-block-buttons, .cs-hero-centered .is-style-inline { justify-content: center; }
.cs-hero-centered.has-photo { padding-bottom: 0; }
.cs-hero-photo-wrap { margin-top: clamp(2.5rem, 5vw, 4rem) !important; }
.cs-hero-wide-photo { margin: 0; }
.cs-hero-wide-photo img { border-radius: var(--st-radius-lg) var(--st-radius-lg) 0 0; box-shadow: var(--wp--preset--shadow--lg); }
.cs-hero-cover .wp-block-cover__inner-container { color: var(--cs-on-primary); }
.cs-hero-cover h1 { max-width: 14ch; }
.cs-hero-split h1 { max-width: 14ch; }
.cs-hero-photo-stack { position: relative; }
.cs-hero-photo { margin: 0; }
.cs-hero-photo img { box-shadow: var(--wp--preset--shadow--lg); }
.cs-float-badge { position: absolute; left: -1.5rem; bottom: 2rem; padding: 1rem 1.25rem !important; box-shadow: var(--wp--preset--shadow--lg); max-width: 15rem; }
.cs-float-badge p { margin: 0; }
.cs-badge-text { font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.cs-hero-editorial h1 { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.cs-editorial-bottom { gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.cs-hero-stats .cs-stat-num { color: inherit; }
.cs-hero-stats .cs-stat-label { color: inherit; opacity: 0.75; }
.cs-stat-left { text-align: left !important; }

/* Page hero */
.cs-page-hero { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cs-page-hero .wp-block-post-title { margin-block: 0 1rem; }
.cs-page-hero .is-style-lead { margin-bottom: 1.75rem; }

/* Stats */
.cs-stats-overlap { padding-block: 0; margin-top: calc(-1 * clamp(4rem, 8vw, 5.5rem)) !important; position: relative; z-index: 2; }
.cs-stats.is-style-card { padding: clamp(1.25rem, 3vw, 2rem) !important; box-shadow: var(--wp--preset--shadow--md); border-radius: var(--st-radius-lg); }
.cs-stat { text-align: center; padding: 0.5rem; }
.cs-stat-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(1.8rem, 3.2vw, 2.5rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--cs-primary);
}
.is-dark .cs-stat-num { color: var(--cs-accent); }
.cs-stat-label { margin: 0.3rem 0 0; font-size: 0.9rem; font-weight: 500; color: var(--cs-muted); }
.is-dark .cs-stat-label { color: inherit; opacity: 0.8; }
@media (min-width: 900px) { .cs-stats .cs-stat + .cs-stat { border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent); } }

/* Services */
.cs-service-card { display: flex; flex-direction: column; transition: transform 0.25s var(--cs-ease), box-shadow 0.25s var(--cs-ease), border-color 0.25s; }
.cs-service-card:hover { border-color: color-mix(in srgb, var(--cs-secondary) 35%, var(--cs-border)); }
.cs-card-heading { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.cs-service-card .cs-card-heading a, .cs-service-row .cs-card-heading a { color: inherit; }
.cs-service-card .cs-card-heading a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cs-service-card p:not(.cs-card-heading):not(.cs-more) { color: var(--cs-muted); margin-top: 0; }
.cs-service-card.is-style-card-dark p:not(.cs-card-heading):not(.cs-more) { color: inherit; opacity: 0.82; }
.cs-more { margin-top: auto; padding-top: 0.5rem; font-weight: 700; font-size: 0.95rem; }
.cs-help-card .wp-block-image.is-style-icon { background: color-mix(in srgb, currentColor 12%, transparent); }
.cs-help-card .wp-block-image.is-style-icon img { filter: brightness(0) invert(1); }
.cs-help-card .wp-block-button__link { color: var(--cs-accent); }
.cs-service-rows { border-top: 1px solid var(--cs-border); }
.cs-service-row { position: relative; gap: 1.25rem !important; padding-block: 1.4rem; border-bottom: 1px solid var(--cs-border); transition: background 0.25s; }
.cs-service-row:hover { background: color-mix(in srgb, var(--cs-secondary) 5%, transparent); }
.cs-service-row .wp-block-image.is-style-icon { margin: 0; flex: none; }
.cs-service-row-text { flex: 1; }
.cs-service-row-text p { margin: 0.2rem 0 0; color: var(--cs-muted); }
.cs-service-row .cs-card-heading { margin: 0; }
.cs-service-row .cs-card-heading a::after { content: ""; position: absolute; inset: 0; }
.cs-row-arrow { margin: 0; font-size: 1.5rem; color: var(--cs-secondary); transition: transform 0.25s var(--cs-ease); }
.cs-photo-tile { padding: 0 !important; overflow: hidden; }
.cs-photo-tile > .wp-block-image.is-style-icon { margin: 1.75rem 1.75rem 0; }
.cs-tile-photo { margin: 0; }
.cs-tile-photo img, .cs-bento-photo img { border-radius: 0; transition: transform 0.5s var(--cs-ease); }
.cs-tile-body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
.cs-tile-body > :first-child { margin-top: 0; }
@media (min-width: 900px) {
	.cs-bento > .cs-bento-feature { grid-column: span 2; grid-row: span 2; }
	.cs-bento-feature .cs-card-heading { font-size: 1.75rem; }
}
.cs-bento-feature.has-photo { padding: 0 !important; overflow: hidden; }
.cs-bento-photo { margin: 0; }

/* Why us */
.cs-feature h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.cs-feature p { margin: 0; color: var(--cs-muted); font-size: 0.95rem; }
@media (min-width: 782px) { .cs-stagger > :nth-child(even) { transform: translateY(1.5rem); } }
.cs-mini-features { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--cs-border); }
.cs-mini-feature h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.cs-mini-feature p { margin: 0; color: var(--cs-muted); font-size: 0.95rem; }
.cs-numbered { border-top: 2px solid var(--cs-primary); padding-top: 1.25rem; }
.is-dark .cs-numbered { border-top-color: var(--cs-accent); }
.cs-big-num { margin: 0 0 0.75rem; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 2.75rem; line-height: 1; color: var(--cs-accent); letter-spacing: -0.04em; }
.cs-numbered h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.cs-numbered p:last-child { margin: 0; color: var(--cs-muted); }
.is-dark .cs-numbered p:last-child { color: inherit; opacity: 0.8; }

/* Process */
.cs-step { background: var(--cs-base); color: var(--cs-contrast); border: 1px solid var(--cs-border); border-radius: var(--st-radius-md); padding: clamp(1.5rem, 3vw, 2rem); }
.cs-step-num {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 0 1.25rem;
	border-radius: calc(var(--st-radius-sm) + 2px);
	background: var(--cs-primary);
	color: var(--cs-accent);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
}
.cs-step h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.cs-step p:last-child { margin: 0; color: var(--cs-muted); }
.cs-timeline { position: relative; }
@media (min-width: 782px) {
	.cs-timeline::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 1.5rem; height: 2px; background: repeating-linear-gradient(90deg, var(--cs-border) 0 8px, transparent 8px 14px); }
}
.cs-timeline-step { position: relative; }
.cs-dot {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0 0 1.25rem;
	border-radius: 50%;
	background: var(--cs-accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	box-shadow: 0 0 0 6px var(--cs-base);
}
.has-surface-background-color .cs-dot { box-shadow: 0 0 0 6px var(--wp--preset--color--surface); }
.cs-timeline-step h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.cs-timeline-step p:last-child { margin: 0; color: var(--cs-muted); }
.is-dark .cs-timeline-step p:last-child, .is-dark .cs-step-text { color: inherit; opacity: 0.8; }
.is-dark .cs-dot { box-shadow: 0 0 0 6px var(--cs-primary); }
.has-accent-soft-background-color .cs-dot { box-shadow: 0 0 0 6px var(--wp--preset--color--accent-soft); }
.is-dark .cs-timeline::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 30%, transparent) 0 8px, transparent 8px 14px); }

/* Reviews */
.cs-review { display: flex; flex-direction: column; gap: 0.9rem; }
.cs-review-text { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.cs-review-author { margin: auto 0 0; font-weight: 700; font-size: 0.95rem; }
.cs-review .cs-review-author { color: var(--cs-primary); }
.cs-big-quote { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; margin: 0.5rem 0 1.5rem; }
.cs-rating-line { margin-top: 1.5rem; color: var(--cs-accent); font-weight: 700; }
.cs-review-stack { display: flex; flex-direction: column; gap: 1rem; }
.cs-wall { columns: 3 18rem; column-gap: 1.25rem; }
.cs-wall-item { break-inside: avoid; margin: 0 0 1.25rem !important; }

/* FAQ */
.cs-faq .wp-block-details {
	background: var(--cs-base);
	color: var(--cs-contrast);
	border: 1px solid var(--cs-border);
	border-radius: var(--st-radius-sm);
	margin-block: 0.75rem;
	transition: box-shadow 0.2s, border-color 0.2s;
}
.cs-faq .wp-block-details[open] { box-shadow: var(--wp--preset--shadow--sm); border-color: color-mix(in srgb, var(--cs-secondary) 30%, var(--cs-border)); }
.cs-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	cursor: pointer;
	list-style: none;
}
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--cs-secondary);
	font-size: 1.2rem;
	font-weight: 700;
	transition: transform 0.25s var(--cs-ease);
}
.cs-faq details[open] summary::after { transform: rotate(45deg); }
.cs-faq .wp-block-details > p { margin: 0; padding: 0 1.35rem 1.25rem; color: var(--cs-muted); }

/* Call to action */
.cs-cta-wrap { padding-block: var(--wp--preset--spacing--l); }
.cs-cta { position: relative; overflow: hidden; border-radius: var(--st-radius-lg); padding: clamp(2rem, 5vw, 3.75rem) !important; gap: 2rem !important; box-shadow: var(--wp--preset--shadow--lg); }
.cs-cta-copy { max-width: 38rem; }
.cs-cta h2 { margin: 0 0 0.5rem; }
.cs-cta p { margin: 0; opacity: 0.85; font-size: 1.1rem; }
.cs-cta-band { padding-block: var(--wp--preset--spacing--l); }
.cs-cta-band .cs-cta-copy h2 { margin: 0 0 0.5rem; }
.cs-cta-band .cs-cta-copy p { margin: 0; font-size: 1.1rem; }
.cs-cta-photo { padding: 0 !important; }
.cs-cta-photo-cols { gap: 0 !important; align-items: stretch !important; margin: 0; }
.cs-cta-photo .cs-cta-photo img { border-radius: 0; height: 100%; }
.cs-cta-photo figure { margin: 0; height: 100%; }
.cs-cta-photo-copy { padding: clamp(2rem, 5vw, 3.5rem); }
.cs-cta-photo-copy p { opacity: 0.85; font-size: 1.1rem; }

/* Service detail */
.cs-service-cols { gap: clamp(2rem, 5vw, 4.5rem); }
.cs-prose > h2:first-child { margin-top: 0; }
.cs-prose h3 { margin-top: 2.5rem; }
.cs-prose p { font-size: 1.075rem; }
.cs-sticky { position: sticky; top: calc(var(--cs-header-h) + 1.5rem); box-shadow: var(--wp--preset--shadow--md); }
.admin-bar .cs-sticky { top: calc(var(--cs-header-h) + 32px + 1.5rem); }
.cs-sticky h3 { margin-block: 0.2rem 0.5rem; font-size: 1.4rem; }
.cs-sticky .wp-block-buttons { margin-block: 1.25rem; gap: 0.6rem; }
.cs-sticky .cs-small { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--cs-border); }

/* About */
.cs-about-card { border-radius: var(--st-radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--wp--preset--shadow--lg); }
.cs-about-card .cs-stat { text-align: left; padding: 1rem 0.5rem; }
.cs-about-card .cs-stat-num { color: var(--cs-accent); }
.cs-about-card .cs-stat-label { color: inherit; opacity: 0.8; }

/* Contact */
.cs-contact-item { gap: 1rem !important; margin-top: 1.5rem; }
.cs-contact-item .wp-block-image.is-style-icon { margin: 0; flex: none; }
.cs-contact-label { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-muted); }
.cs-contact-value > * { margin-block: 0.15rem 0 !important; }
.cs-contact-value p:not(.cs-contact-label) { font-weight: 600; }
.cs-contact-phone .wp-block-button__link { font-size: 1.3rem; color: var(--cs-primary); }
.cs-form-card { padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--wp--preset--shadow--md); border-radius: var(--st-radius-lg); }
.cs-form-card h3 { margin-top: 0; font-size: 1.6rem; }
.cs-ghl-form iframe { width: 100%; min-height: 620px; border: 0; }
.cs-form-placeholder {
	display: grid;
	place-items: center;
	min-height: 320px;
	padding: 2rem;
	border: 2px dashed var(--cs-border);
	border-radius: var(--st-radius-sm);
	background: var(--wp--preset--color--surface);
	color: var(--cs-muted);
	text-align: center;
	line-height: 1.7;
}

/* Footer */
.cs-footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.cs-footer h3 { margin: 0 0 1rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-accent); }
.cs-footer p { margin-block: 0.4rem; opacity: 0.82; font-size: 0.95rem; }
.cs-footer .wp-block-site-title { font-size: 1.35rem; margin: 0 0 0.75rem; }
.cs-footer .wp-block-site-title a { color: inherit; text-decoration: none; }
.cs-footer-tagline { max-width: 24rem; }
.cs-footer-centered .cs-footer-tagline { margin-inline: auto; }
.cs-footer-cta { margin-top: 1.5rem; }
.cs-footer-links { list-style: none; padding: 0; margin: 0; }
.cs-footer-links li { margin-block: 0.5rem; }
.cs-footer-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; list-style: none; padding: 0; margin: 2rem 0; }
.cs-footer a:where(:not(.wp-element-button)) { color: color-mix(in srgb, currentColor 80%, transparent); text-decoration: none; }
.cs-footer a:where(:not(.wp-element-button)):hover { color: inherit; text-decoration: underline; }
.cs-footer-phone .wp-block-button__link { font-size: 1.2rem; color: inherit; }
.cs-footer-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.cs-footer-bottom p { margin: 0; font-size: 0.85rem; opacity: 0.6; }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	:root { --cs-header-h: 96px; }
	.cs-topbar-note { display: none; }
	.cs-topbar .alignwide { justify-content: center !important; }
	.cs-brand .wp-block-site-title { font-size: 1.05rem; }
	.cs-brand:not(:has(.wp-block-site-logo img)) .wp-block-site-title a::before { width: 2rem; height: 2rem; }
	.cs-header-call .wp-block-button__link { padding: 0.6em 0.9em; font-size: 0.875rem; }
	.cs-header-phone { display: none !important; }
	.cs-header-centered { padding-block: 0.75rem 0.25rem; }
	.cs-header-centered .cs-header-row { justify-content: space-between !important; }
	.cs-header-centered .cs-brand .wp-block-site-title { font-size: 1.1rem; }
	.cs-header-centered .cs-nav-row { margin-top: 0.5rem; padding-top: 0.25rem; }
	.cs-hero .wp-block-buttons .wp-block-button { flex: 1 1 auto; }
	.cs-hero .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }
	.cs-float-badge { position: static; margin-top: -2.5rem !important; margin-left: 1rem !important; }
	.cs-sticky, .cs-sticky-head { position: static; }
	.cs-cta .wp-block-buttons { width: 100%; }
	/* Tap targets (docs/research/mobile-principles.md MOB-TAP-01/02): buttons, the menu button and
	   form controls at least 44px; text-link buttons get a taller hit area without moving the layout. */
	.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	.is-style-text-link > .wp-block-button__link { min-height: 0; padding-block: 14px !important; margin-block: -14px; }
	.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	.gform_wrapper select, .gform_wrapper input:where([type=text], [type=tel], [type=email], [type=number], [type=url]) { min-height: 44px; font-size: 16px; }
	.gform_wrapper textarea { font-size: 16px; }
	/* Gravity Forms' own theme sets 14px / 38px controls per form (inline, by ID): 16px stops iOS zooming in. */
	.gform-theme--framework { --gf-ctrl-font-size: 16px !important; --gf-ctrl-size: 44px !important; }
	.gform-theme--framework .gform_button, .gform-theme--framework .gform-button { min-height: 44px !important; }
	.woocommerce-ordering select, .quantity .qty { font-size: 16px; min-height: 44px; }
	.page-numbers:where(a, span) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}
/* Phones on their side: a sticky header would take a third of the screen (MOB-VP-04). */
@media (orientation: landscape) and (max-height: 500px) {
	.site-header { position: static; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (min-width: 900px) {
	.cs-card-grid > .cs-span-2 { grid-column: span 2; }
	.cs-card-grid > .cs-span-3 { grid-column: span 3; }
}
/* No blank spots: when a grid's last row is short, its final item stretches across the gap (desktop). */
@media (min-width: 900px) {
	.cs-fill-2 > :last-child:nth-child(2n+1) { grid-column: span 2; }
	.cs-fill-3 > :last-child:nth-child(3n+1) { grid-column: span 3; }
	.cs-fill-3 > :last-child:nth-child(3n+2) { grid-column: span 2; }
	.cs-fill-4 > :last-child:nth-child(4n+1) { grid-column: span 4; }
	.cs-fill-4 > :last-child:nth-child(4n+2) { grid-column: span 3; }
	.cs-fill-4 > :last-child:nth-child(4n+3) { grid-column: span 2; }
}

/* ---------- Reserved areas (inc/areas.php) ---------- */
.cs-offer-banner { padding-block: 0.55rem; text-align: center; font-weight: 600; font-size: 0.95rem; }
.cs-offer-banner p { margin: 0; }
.cs-offer-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-left: 0.4rem; white-space: nowrap; }
/* In the editor: a small tag so the team knows the section's content comes from EZ WP. */
.cs-area-edit { position: relative; }
.cs-area-edit > .cs-area-tag { position: absolute; top: 8px; right: 8px; z-index: 5; padding: 3px 10px; border-radius: 99px; background: #1e1b4b; color: #fff; font: 600 11px/1.6 system-ui, sans-serif; letter-spacing: .02em; pointer-events: none; opacity: .85; }

/* ---------- Before/after pairs (gallery-before-after) ---------- */
.cs-ba { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.cs-ba-pair { gap: 1rem !important; margin: 0 !important; }
.cs-ba-cell { position: relative; }
.cs-ba-label { position: absolute; top: .75rem; left: .75rem; z-index: 2; margin: 0 !important; padding: .25rem .7rem; border-radius: 99px; background: var(--cs-contrast); color: var(--cs-base); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cs-ba-cell:last-child .cs-ba-label, .wp-block-column:last-child .cs-ba-label { background: var(--cs-accent); color: var(--cs-on-accent, #fff); }
.cs-ba-photo { margin: 0; }
.cs-ba-photo img { border-radius: var(--st-radius-image, 14px); }
.cs-ba-caption { margin: .6rem 0 0; text-align: center; color: color-mix(in srgb, var(--cs-contrast) 70%, transparent); font-size: .95rem; }