/* SAVCHENKOO — theme styles.
   Every value below comes from the design system tokens in assets/ds/.
   Breakpoints are written as literals because custom properties cannot be used
   inside @media; they match tokens/breakpoints.css — 480 / 760 / 1024 / 1280. */

:root {
	/* Band width: 1312 − 2×56px gutter = the system's 1200px container. */
	--sv-band-max: 1312px;
	--sv-gutter: 56px;
	/* Hairline on carbon for a control outline — the system has no .30 white alpha. */
	--sv-border-inverse: rgba(255, 255, 255, .3);
	/* Row hover wash, lighter than --alpha-green-15 so 32px display type stays readable. */
	--sv-service-hover: rgba(34, 197, 94, .05);
	/* Hairline inside a jade band — carbon at 40%, the only rule that reads there. */
	--sv-rule-on-brand: rgba(24, 26, 25, .4);
	/* Decorative watermark type. Never used for text that carries meaning. */
	--sv-ghost-green: rgba(34, 197, 94, .22);
}

/* ---------------------------------------------------------------- base --- */

/* In-page anchors must clear the sticky header. */
html {
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-strong);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

/* Links: green ink, underlined only on hover, per the interaction rules.
   theme.json says the same thing for the editor; this covers the front end
   whatever order the global stylesheet lands in. */
a {
	color: var(--text-link);
	text-decoration: none;
}

a:hover {
	color: var(--text-link-hover);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.sv-wrap {
	max-width: var(--sv-band-max);
	margin-inline: auto;
}

/* Every band is full-bleed; the wrap inside it holds the 1200px column. */
.sv-band {
	border-bottom: var(--border-hairline) solid var(--border-subtle);
}

.sv-band--dark {
	background: var(--surface-inverse);
	color: var(--text-inverse);
	border-bottom: 0;
}

.sv-band--brand {
	background: var(--surface-brand);
	color: var(--carbon-black);
	border-bottom: 0;
}

/* Skip link — keyboard users shouldn't tab the whole nav on every page. */
.sv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--space-3) var(--space-4);
	background: var(--carbon-black);
	color: var(--white);
	font: var(--weight-bold) var(--text-2xs) / 1 var(--font-mono);
	text-transform: uppercase;
	letter-spacing: var(--tracking-kicker);
}

.sv-skip:focus {
	left: var(--space-4);
	top: var(--space-4);
}

/* ------------------------------------------------- WordPress plumbing --- */

/* Flow layout puts a 24px margin between every sibling. This page sets its own
   rhythm on each element, so the default is neutralised inside the bands, on
   the bands themselves, and between the bands stacked inside <main> — that
   last one collapses out of the page and opens a gap under the header.
   Kept at zero specificity with :where() so the component rules below win. */
:where(.sv-page) > *,
:where(.sv-band) > *,
:where(.sv-band) :where(.is-layout-flow) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Image and list blocks arrive with browser margins. */
.sv-logo,
.sv-about__media,
.sv-footer__brand img {
	margin: 0;
}

.sv-about__media,
.sv-about__media img {
	display: block;
	height: 100%;
}

.sv-case__table,
.sv-case__row dd,
.sv-footer p {
	margin: 0;
}

.sv-case__table {
	margin-top: 34px;
}

/* The navigation block switches to its overlay at 600px; the design switches
   at the system's 760px breakpoint. */
@media (max-width: 759px) {
	.sv-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.sv-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--touch-target-min);
		height: var(--touch-target-min);
		border: var(--border-regular) solid var(--border-default);
		color: var(--text-strong);
	}
}

/* ------------------------------------------------------------ type ------- */

.sv-h1,
.sv-h2,
.sv-h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-display-caps);
	text-transform: uppercase;
}

.sv-h1 {
	font-size: clamp(41px, 5.9vw, var(--text-6xl));
	line-height: var(--leading-flat);
}

.sv-h2 {
	font-size: clamp(32px, 3.2vw, 41px);
	line-height: var(--leading-tight);
}

.sv-h3 {
	font-size: clamp(30px, 2.5vw, var(--text-2xl));
	line-height: var(--leading-tight);
}

.sv-lead {
	margin: var(--space-8) 0 0;
	max-width: 520px;
	font-size: 17.5px;
	line-height: var(--leading-relaxed);
	color: var(--text-body);
	text-wrap: pretty;
}

.sv-prose {
	color: var(--text-body);
	text-wrap: pretty;
}

.sv-note {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: var(--leading-relaxed);
	color: var(--text-muted);
}

/* Line breaks authored for the desktop headline only. */
@media (max-width: 1023px) {
	.sv-br-desktop {
		display: none;
	}
}

/* ----------------------------------------------------------- kicker ------ */

.sv-kicker {
	margin: 0;
	font-family: var(--font-mono);
	font-weight: var(--weight-bold);
	font-size: var(--text-2xs);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--tracking-kicker);
	color: var(--green-700);
}

.sv-kicker--inverse {
	color: var(--green-400);
}

.sv-kicker--strong {
	color: var(--text-strong);
}

.sv-kicker--muted {
	color: var(--text-muted);
}

/* Brand green needs one step deeper on the sunken surface to clear 4.5:1. */
.sv-kicker--deep {
	color: var(--green-800);
}

.sv-kicker--sm {
	font-size: var(--text-3xs);
}

/* The measure-tick rule lifted from the logo frame: 14 orange ticks, every
   fourth one taller. Two repeating gradients rather than 14 elements. */
.sv-kicker--ticks::before {
	content: "";
	display: block;
	width: 158px;
	height: 12px;
	margin-bottom: var(--space-3);
	background-image:
		repeating-linear-gradient(90deg, var(--accent-measure) 0 var(--tick-width), transparent var(--tick-width) 48px),
		repeating-linear-gradient(90deg, var(--accent-measure) 0 var(--tick-width), transparent var(--tick-width) 12px);
	background-size: 100% 12px, 100% 7px;
	background-position: left bottom, left bottom;
	background-repeat: no-repeat;
}

/* --------------------------------------------------------- buttons ------- */

.sv-btn .wp-block-button__link,
a.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: var(--control-height-md);
	padding: 0 18px;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: var(--border-regular) solid transparent;
	border-radius: var(--control-radius);
	background: var(--action-primary-bg);
	color: var(--action-primary-fg);
	cursor: pointer;
	transition: var(--transition-control);
}

.sv-btn--sm .wp-block-button__link {
	height: var(--control-height-sm);
	padding: 0 12px;
	font-size: var(--text-xs);
}

.sv-btn--lg .wp-block-button__link {
	height: var(--control-height-lg);
	padding: 0 24px;
	font-size: var(--text-base);
}

.sv-btn .wp-block-button__link:hover {
	background: var(--action-primary-bg-hover);
	color: var(--action-primary-fg);
	text-decoration: none;
}

.sv-btn .wp-block-button__link:active {
	background: var(--action-primary-bg-active);
	transform: var(--press-shift);
}

.sv-btn .wp-block-button__link:focus-visible {
	box-shadow: var(--focus-ring);
	border-color: var(--border-focus);
	outline: none;
}

.sv-btn--secondary .wp-block-button__link {
	background: var(--action-secondary-bg);
	color: var(--action-secondary-fg);
	border: var(--border-strong) solid var(--action-secondary-border);
}

.sv-btn--secondary .wp-block-button__link:hover,
.sv-btn--secondary .wp-block-button__link:active {
	background: var(--action-secondary-bg-hover);
	color: var(--action-secondary-fg);
}

.sv-btn--ghost .wp-block-button__link {
	background: transparent;
	color: var(--action-ghost-fg);
}

.sv-btn--ghost .wp-block-button__link:hover,
.sv-btn--ghost .wp-block-button__link:active {
	background: var(--action-ghost-bg-hover);
	color: var(--action-ghost-fg);
}

.sv-btn--inverse .wp-block-button__link {
	background: var(--action-inverse-bg);
	color: var(--action-inverse-fg);
}

.sv-btn--inverse .wp-block-button__link:hover {
	background: var(--action-inverse-bg-hover);
	color: var(--action-inverse-fg);
}

.sv-btn--inverse .wp-block-button__link:active {
	background: var(--ink-100);
}

/* An inverse button on carbon needs an edge or it floats. */
.sv-band--dark .sv-btn--inverse .wp-block-button__link {
	border-color: var(--sv-border-inverse);
}

.sv-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: 34px;
}

/* ---------------------------------------------------------- header ------- */

.sv-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--surface-page);
	border-bottom: var(--border-hairline) solid var(--border-subtle);
	transition: box-shadow var(--duration-fast) var(--ease-out);
}

.sv-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.sv-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	max-width: var(--sv-band-max);
	margin-inline: auto;
	padding: 22px var(--sv-gutter);
}

.sv-logo img {
	display: block;
	width: 149px;
	height: auto;
}

.sv-header__nav {
	flex: 1 1 auto;
	justify-content: center;
}

.sv-header__nav .wp-block-navigation__container {
	gap: 22px;
	flex-wrap: nowrap;
}

.sv-header__nav a {
	font-family: var(--font-mono);
	font-size: var(--text-3xs);
	font-weight: var(--weight-medium);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}

.sv-header__nav a:hover {
	color: var(--text-strong);
	text-decoration: none;
}

.sv-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.sv-phone {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	color: var(--text-strong);
}

.sv-phone:hover {
	color: var(--text-strong);
}

/* ------------------------------------------------------------ hero ------- */

.sv-hero .sv-wrap {
	display: grid;
	grid-template-columns: 1fr 420px;
}

.sv-hero__main {
	padding: 64px 48px 64px var(--sv-gutter);
	border-right: var(--border-hairline) solid var(--border-subtle);
}

.sv-hero__main .sv-kicker {
	margin-bottom: 26px;
}

.sv-hero__aside {
	padding: 34px 32px;
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

.sv-hero__aside .sv-kicker {
	margin-bottom: 22px;
}

.sv-accent {
	color: var(--green-700);
}

/* Same highlight on a carbon band, where the fill-grade green is legible. */
.sv-accent-inverse {
	color: var(--jade-green);
}

/* Problem list — "start where it hurts" */

.sv-problem__row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: var(--space-5) 0;
	border-top: var(--border-hairline) solid var(--border-inverse);
	text-decoration: none;
	color: inherit;
	min-height: 44px;
	transition: var(--transition-control);
}

.sv-problem__row:hover {
	background: var(--alpha-white-08);
	color: inherit;
}

.sv-problem__num {
	font-family: var(--font-mono);
	font-size: var(--text-3xs);
	font-weight: var(--weight-medium);
	color: var(--jade-green);
}

.sv-problem__body {
	flex: 1;
}

.sv-problem__title {
	display: block;
	font-size: 19px;
	font-weight: var(--weight-semibold);
	line-height: 1.2;
}

.sv-problem__link {
	display: block;
	margin-top: 5px;
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--ink-300);
}

.sv-problem__foot {
	padding-top: var(--space-5);
	border-top: var(--border-hairline) solid var(--border-inverse);
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: var(--leading-relaxed);
	color: var(--ink-300);
}

/* ----------------------------------------------------------- stats ------- */

.sv-stats .sv-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.sv-stat {
	padding: 34px 40px;
	border-right: var(--border-hairline) solid var(--border-subtle);
}

.sv-stat:first-child {
	padding-inline: var(--sv-gutter) 40px;
}

.sv-stat:last-child {
	border-right: 0;
}

.sv-stat__num {
	font-family: var(--font-display);
	font-size: clamp(40px, 3.8vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-flat);
	letter-spacing: var(--tracking-display-caps);
	text-transform: uppercase;
}

.sv-stat--brand .sv-stat__num {
	color: var(--green-700);
}

.sv-stat__label {
	margin: var(--space-2) 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-500);
}

/* ----------------------------------------------------------- about ------- */

.sv-about .sv-wrap {
	display: grid;
	grid-template-columns: 420px 1fr;
}

.sv-about__media {
	border-right: var(--border-hairline) solid var(--border-subtle);
	background: var(--surface-sunken);
	min-height: 400px;
}

/* The portrait is a circular cut-out on a transparent ground — contain keeps
   the whole circle rather than cropping it to the column. */
.sv-about__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 400px;
	object-fit: contain;
}

.sv-about__body {
	padding: 54px var(--sv-gutter);
}

.sv-about__body .sv-kicker {
	margin-bottom: 22px;
}

.sv-about__body .sv-h2 {
	max-width: 640px;
}

.sv-about__body .sv-prose {
	margin: 22px 0 0;
	max-width: 620px;
	line-height: 1.65;
}

.sv-creds {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.sv-creds li {
	border: var(--border-regular) solid var(--border-default);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-3xs);
	font-weight: var(--weight-medium);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ----------------------------------------------------- value props ------- */

.sv-props .sv-wrap {
	padding: var(--space-14) var(--sv-gutter) var(--space-6);
}

.sv-props .sv-kicker {
	margin-bottom: 14px;
}

.sv-props .sv-h2 {
	margin-bottom: 34px;
}

.sv-props__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 44px;
}

.sv-prop {
	padding: var(--space-5) 0 26px;
	border-top: var(--border-hairline) solid var(--border-default);
}

.sv-props__grid--lead .sv-prop {
	border-top: var(--border-strong) solid var(--carbon-black);
}

.sv-prop__label {
	font-family: var(--font-mono);
	font-size: var(--text-3xs);
	font-weight: var(--weight-medium);
	letter-spacing: .14em;
	color: var(--green-700);
}

.sv-prop__title {
	margin: var(--space-3) 0 var(--space-2);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: 1.25;
}

.sv-prop__text {
	margin: 0;
	font-size: 14.5px;
	line-height: var(--leading-relaxed);
	color: var(--text-body);
}

/* -------------------------------------------------------- services ------- */

.sv-services .sv-wrap {
	padding: var(--space-8) var(--sv-gutter) var(--space-18);
}

.sv-services__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-10);
	padding-top: var(--space-8);
	border-top: var(--border-hairline) solid var(--border-subtle);
}

.sv-services__head .sv-kicker {
	margin-bottom: 14px;
}

.sv-services__head .sv-note {
	max-width: 280px;
	text-align: right;
}

.sv-services__list {
	margin-top: 34px;
}

.sv-service {
	border-top: var(--border-hairline) solid var(--border-default);
}

.sv-service:last-child {
	border-bottom: var(--border-hairline) solid var(--border-default);
}

.sv-service > summary {
	display: grid;
	grid-template-columns: 70px 1fr 200px 40px;
	align-items: center;
	padding: 26px 0;
	cursor: pointer;
	list-style: none;
	transition: var(--transition-control);
}

.sv-service > summary::-webkit-details-marker {
	display: none;
}

.sv-service > summary:hover {
	background: var(--sv-service-hover);
}

.sv-service > summary:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.sv-service > summary::after {
	content: "+";
	justify-self: end;
	font-family: var(--font-body);
	font-size: var(--text-xl);
	line-height: 1;
	color: var(--green-700);
}

.sv-service[open] > summary::after {
	content: "\2212";
}

.sv-service__num {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-medium);
	color: var(--green-700);
}

.sv-service__title {
	font-family: var(--font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: var(--weight-bold);
	line-height: var(--leading-flat);
	letter-spacing: var(--tracking-display-caps);
	text-transform: uppercase;
}

.sv-service__meta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.sv-service__panel {
	display: grid;
	grid-template-columns: 70px 1fr 1fr;
	gap: 0 var(--space-10);
	padding-bottom: 34px;
}

.sv-service__panel > :first-child {
	grid-column: 2;
}

.sv-service__summary {
	margin: 0;
	max-width: 460px;
	line-height: 1.65;
	color: var(--text-body);
}

.sv-service__points {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	color: var(--text-body);
}

.sv-service__points li::before {
	content: "\2014\00a0";
}

.sv-service__panel .sv-btn {
	margin-top: var(--space-5);
}

/* ------------------------------------------------------ case study ------- */

.sv-case .sv-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-14);
	align-items: start;
	padding: var(--space-18) var(--sv-gutter);
}

.sv-case .sv-kicker {
	margin-bottom: 22px;
}

.sv-case .sv-h2 {
	font-size: clamp(32px, 3.6vw, 46px);
}

.sv-case__meta {
	margin: var(--space-4) 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--ink-300);
}

.sv-case__table {
	margin-top: 34px;
	border-top: var(--border-hairline) solid var(--border-inverse);
}

.sv-case__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-4) 0;
	border-bottom: var(--border-hairline) solid var(--border-inverse);
	font-size: 14.5px;
}

.sv-case__row:last-child {
	border-bottom: 0;
}

.sv-case__row dt {
	color: var(--ink-300);
}

.sv-case__row dd {
	margin: 0;
	text-align: right;
}

.sv-case__row--after dd {
	color: var(--jade-green);
}

.sv-case .sv-buttons {
	margin-top: var(--space-8);
}

.sv-case__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 260px;
	background: var(--surface-inverse-raised);
	border: var(--border-regular) solid var(--border-inverse);
	font-family: var(--font-mono);
	font-size: var(--text-3xs);
	font-weight: var(--weight-medium);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-300);
}

.sv-quote {
	margin: 30px 0 0;
	padding: var(--space-1) 0 var(--space-1) 22px;
	border-left: var(--border-strong) solid var(--jade-green);
}

.sv-quote p {
	margin: 0;
	font-size: 19px;
	line-height: var(--leading-relaxed);
	color: var(--white);
	text-wrap: pretty;
}

.sv-quote cite {
	display: block;
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-style: normal;
	color: var(--ink-300);
}

/* --------------------------------------------------------- process ------- */

.sv-process .sv-wrap {
	padding: var(--space-18) var(--sv-gutter);
}

.sv-process .sv-kicker {
	margin-bottom: 14px;
}

.sv-process .sv-h2 {
	margin-bottom: 38px;
}

.sv-process__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: var(--border-strong) solid var(--carbon-black);
}

.sv-step {
	padding: 26px var(--space-10) 0;
	border-right: var(--border-hairline) solid var(--border-subtle);
}

.sv-step:first-child {
	padding-left: 0;
}

.sv-step:last-child {
	padding-right: 0;
	border-right: 0;
}

.sv-step__num {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: var(--weight-bold);
	line-height: var(--leading-flat);
	letter-spacing: var(--tracking-display-caps);
	color: var(--green-700);
}

.sv-step__title {
	margin: 14px 0 var(--space-2);
	font-size: 21px;
	font-weight: var(--weight-semibold);
}

.sv-step__text {
	margin: 0;
	font-size: 14.5px;
	line-height: var(--leading-relaxed);
	color: var(--ink-500);
}

/* --------------------------------------------------------- pricing ------- */

.sv-pricing .sv-wrap {
	padding: var(--space-18) var(--sv-gutter);
}

.sv-pricing__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-10);
	margin-bottom: var(--space-8);
}

.sv-pricing__head .sv-kicker {
	margin-bottom: 14px;
}

.sv-pricing__head .sv-note {
	max-width: 300px;
	text-align: right;
	font-size: 12.5px;
	color: var(--ink-500);
}

.sv-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: var(--border-hairline) solid var(--border-default);
}

.sv-price {
	padding: 26px 36px;
	border-right: var(--border-hairline) solid var(--border-subtle);
}

.sv-price:first-child {
	padding-left: 0;
}

.sv-price:last-child {
	padding-right: 0;
	border-right: 0;
}

.sv-price__label {
	font-family: var(--font-mono);
	font-size: var(--text-3xs);
	font-weight: var(--weight-medium);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.sv-price__figure {
	margin: 14px 0 var(--space-15);
	font-family: var(--font-display);
	font-size: clamp(34px, 3.2vw, 40px);
	font-weight: var(--weight-bold);
	line-height: var(--leading-flat);
	letter-spacing: var(--tracking-display-caps);
	text-transform: uppercase;
}

.sv-price__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-500);
}

/* ------------------------------------------------------------- cta ------- */

.sv-cta .sv-wrap {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-10);
	padding: 78px var(--sv-gutter);
}

.sv-cta .sv-kicker {
	margin-bottom: var(--space-5);
}

.sv-cta .sv-h2 {
	font-size: clamp(34px, 4.6vw, var(--text-5xl));
	line-height: var(--leading-flat);
}

.sv-cta .sv-prose {
	margin: var(--space-5) 0 0;
	max-width: 480px;
	font-size: 17px;
	line-height: var(--leading-relaxed);
	color: var(--carbon-black);
}

.sv-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-3);
	flex: none;
}

.sv-cta__actions .sv-buttons {
	margin-top: 0;
}

.sv-cta__call {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--carbon-black);
}

.sv-cta__call a {
	color: inherit;
}

/* ---------------------------------------------------------- footer ------- */

.sv-footer .sv-wrap {
	padding: 52px var(--sv-gutter) var(--space-8);
	color: var(--ink-200);
}

.sv-footer__cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
	gap: 0 44px;
}

.sv-footer__brand img {
	display: block;
	width: 140px;
	height: auto;
}

.sv-footer__brand p {
	margin: var(--space-4) 0 0;
	font-size: 14.5px;
	line-height: var(--leading-relaxed);
}

.sv-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.sv-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	background: var(--alpha-white-16);
	color: var(--ink-200);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
}

.sv-footer__social a:hover {
	background: var(--jade-green);
	color: var(--carbon-black);
	text-decoration: none;
}

.sv-footer__col h2 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-heading);
	text-transform: none;
	color: var(--white);
}

.sv-footer__col--brand a {
	color: var(--jade-green);
}

.sv-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
	line-height: 1.4;
}

.sv-footer__col a {
	color: var(--ink-200);
}

.sv-footer__col a:hover {
	color: var(--jade-green);
	text-decoration: none;
}

.sv-footer__col p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.sv-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: 36px;
	padding-top: var(--space-5);
	border-top: var(--border-hairline) solid var(--border-inverse);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	color: var(--ink-300);
}

/* ---------------------------------------------------------- reveal ------- */

/* Entrance per the system's motion rules: 8px rise + fade, once per band.
   Only applied when JS is running, so the content is never hidden by a
   stylesheet that no script will ever un-hide. */
.sv-js .sv-reveal {
	opacity: 0;
	transform: translateY(8px);
}

.sv-js .sv-reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.sv-js .sv-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------ responsive ------- */

/* Tablet and below: the three-column bands become one column and the
   vertical hairlines become horizontal ones. */
@media (max-width: 1023px) {
	:root {
		--sv-gutter: 32px;
	}

	.sv-hero .sv-wrap,
	.sv-about .sv-wrap,
	.sv-case .sv-wrap {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sv-hero__main {
		border-right: 0;
		border-bottom: var(--border-hairline) solid var(--border-subtle);
		padding: var(--space-10) var(--sv-gutter);
	}

	.sv-about__media {
		border-right: 0;
		border-bottom: var(--border-hairline) solid var(--border-subtle);
		min-height: 0;
	}

	.sv-about__media img {
		min-height: 0;
		height: 300px;
	}

	.sv-about__body {
		padding: var(--space-10) var(--sv-gutter);
	}

	.sv-props__grid,
	.sv-process__grid,
	.sv-pricing__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sv-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8) 44px;
	}

	.sv-step,
	.sv-price {
		padding-inline: var(--space-6);
	}

	.sv-step:nth-child(odd),
	.sv-price:nth-child(odd) {
		padding-left: 0;
	}

	.sv-step:nth-child(even),
	.sv-price:nth-child(even) {
		padding-right: 0;
		border-right: 0;
	}

	.sv-case .sv-wrap {
		row-gap: var(--space-10);
	}

	.sv-cta .sv-wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-8);
	}

	.sv-cta__actions {
		align-items: flex-start;
	}
}

/* Phone: single column everywhere, tighter gutters, taller tap targets. */
@media (max-width: 759px) {
	:root {
		--sv-gutter: 20px;
	}

	html {
		scroll-padding-top: 74px;
	}

	.sv-header__inner {
		padding: 14px var(--sv-gutter);
		gap: var(--space-4);
	}

	.sv-logo img {
		width: 140px;
	}

	/* Phone and CTA move into the overlay menu's reach; the toggle takes the
	   right edge, as the mobile artboard shows. */
	.sv-header__actions {
		display: none;
	}

	.sv-header__nav {
		flex: none;
		margin-left: auto;
	}

	.sv-hero__main {
		padding: 28px var(--sv-gutter) var(--space-8);
	}

	.sv-hero__aside {
		padding: var(--space-6) var(--sv-gutter);
	}

	/* Full-width stacked actions in the two places the mobile artboard shows
	   them; a service panel's ghost link stays inline. */
	.sv-hero .sv-buttons,
	.sv-cta .sv-buttons {
		flex-direction: column;
		align-items: stretch;
		margin-top: 22px;
		gap: 10px;
	}

	.sv-hero .sv-buttons .wp-block-button__link,
	.sv-cta .sv-buttons .wp-block-button__link {
		width: 100%;
		height: var(--control-height-lg);
	}

	.sv-cta__actions {
		width: 100%;
	}

	/* The problem rows are the main mobile entry point — make them tappable
	   rows with a visible arrow, as the mobile artboard shows. */
	.sv-problem__row {
		align-items: center;
	}

	.sv-problem__row::after {
		content: "\2192";
		font-size: var(--text-lg);
		color: var(--jade-green);
	}

	.sv-stats .sv-wrap,
	.sv-props__grid,
	.sv-process__grid,
	.sv-pricing__grid {
		grid-template-columns: 1fr;
	}

	.sv-stat {
		padding: 26px var(--sv-gutter);
		border-right: 0;
		border-bottom: var(--border-hairline) solid var(--border-subtle);
	}

	.sv-stat:first-child {
		padding-inline: var(--sv-gutter);
	}

	.sv-stat:last-child {
		border-bottom: 0;
	}

	.sv-props .sv-wrap,
	.sv-services .sv-wrap,
	.sv-process .sv-wrap,
	.sv-pricing .sv-wrap,
	.sv-case .sv-wrap {
		padding: var(--space-12) var(--sv-gutter);
	}

	.sv-services__head,
	.sv-pricing__head {
		flex-direction: column;
		gap: var(--space-4);
	}

	.sv-services__head .sv-note,
	.sv-pricing__head .sv-note {
		max-width: none;
		text-align: left;
	}

	.sv-service > summary {
		grid-template-columns: 44px 1fr 32px;
		grid-template-areas:
			"num title plus"
			".   meta  .";
		row-gap: var(--space-2);
		padding: var(--space-5) 0;
	}

	.sv-service__num {
		grid-area: num;
	}

	.sv-service__title {
		grid-area: title;
	}

	.sv-service__meta {
		grid-area: meta;
	}

	.sv-service > summary::after {
		grid-area: plus;
		align-self: center;
	}

	.sv-service__panel {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		padding-left: 44px;
	}

	.sv-service__panel > :first-child {
		grid-column: 1;
	}

	.sv-step,
	.sv-price {
		padding: var(--space-6) 0;
		border-right: 0;
		border-bottom: var(--border-hairline) solid var(--border-subtle);
	}

	.sv-step:first-child,
	.sv-price:first-child {
		padding-top: var(--space-6);
	}

	.sv-step:last-child,
	.sv-price:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.sv-case__row {
		flex-direction: column;
		gap: var(--space-1);
	}

	.sv-case__row dd {
		text-align: left;
	}

	.sv-case__figure {
		height: 200px;
	}

	.sv-cta .sv-wrap {
		padding: var(--space-12) var(--sv-gutter);
	}

	.sv-footer .sv-wrap {
		padding: var(--space-10) var(--sv-gutter) var(--space-6);
	}

	.sv-footer__cols {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.sv-footer__bar {
		flex-direction: column;
		gap: var(--space-2);
	}
}