/*
Theme Name: SEOcrypto Signal
Theme URI: https://seocrypto.org/
Author: SEO.Casino
Author URI: https://seo.casino/
Description: Signal Desk - a block theme for SEOcrypto: a crypto SEO agency site built around a rising rank line, ink data bands on warm paper, and a disciplined violet / signal-lime accent system. Full Site Editing, no page builder, self-hosted variable fonts.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 2.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seocrypto-signal
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks, block-styles
*/

/* ==========================================================================
   1. Fonts
   ========================================================================== */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("assets/fonts/bricolage-latin-wght.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("assets/fonts/geist-latin-wght.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("assets/fonts/plexmono-latin-400.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url("assets/fonts/plexmono-latin-500.woff2") format("woff2");
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
	--sc-paper: #f6f5f1;
	--sc-card: #ffffff;
	--sc-ink: #0b0e14;
	--sc-surface: #141926;
	--sc-slate: #5a6172;
	--sc-slate-dim: #8d94a5;
	--sc-hairline: #e3e1da;
	--sc-hairline-dark: #242b3b;
	--sc-violet: #5b2bff;
	--sc-accent: #5b2bff;
	--sc-art-casebars: url("assets/img/case-bars.svg");
	--sc-art-casecurve: url("assets/img/case-curve.svg");
	--sc-violet-deep: #431fc4;
	--sc-violet-soft: #ece6ff;
	--sc-lime: #c8ff4d;
	--sc-amber: #ffb03a;

	--sc-font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
	--sc-font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sc-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

	--sc-radius: 6px;
	--sc-radius-lg: 14px;
	--sc-gutter: clamp(20px, 5vw, 56px);
	--sc-section-y: clamp(64px, 8vw, 128px);
	--sc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	background: var(--sc-paper);
	color: var(--sc-ink);
	font-family: var(--sc-font-body);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sc-font-display);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

h3, h4 {
	line-height: 1.18;
	letter-spacing: -0.014em;
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible,
:where(input, textarea):focus-visible {
	outline: 2px solid var(--sc-violet);
	outline-offset: 3px;
	border-radius: 3px;
}

.sc-mono {
	font-family: var(--sc-font-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Ink bands ---------------------------------------------------------------- */

.sc-dark {
	background: var(--sc-ink);
	color: #f1f2f6;
	position: relative;
}

.sc-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(var(--sc-hairline-dark) 1px, transparent 1px),
		linear-gradient(90deg, var(--sc-hairline-dark) 1px, transparent 1px);
	background-size: 72px 72px;
	opacity: 0.35;
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 15%, transparent 78%);
}

.sc-dark > * {
	position: relative;
	z-index: 1;
}

.sc-dark h1, .sc-dark h2, .sc-dark h3, .sc-dark h4 {
	color: #ffffff;
}

.sc-dark p {
	color: #b9bfcd;
}

.sc-section {
	padding-top: var(--sc-section-y);
	padding-bottom: var(--sc-section-y);
}

.sc-head {
	max-width: 760px;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.sc-head p {
	color: var(--sc-slate);
	font-size: 18px;
	margin-top: 16px;
}

.sc-dark .sc-head p {
	color: #a7aebe;
}

h2.sc-h2 {
	font-size: clamp(32px, 4.2vw, 50px);
}

/* Buttons ------------------------------------------------------------------ */

.wp-block-button__link,
.sc-btn {
	font-family: var(--sc-font-body);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.01em;
	padding: 15px 26px;
	border-radius: var(--sc-radius);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: background 0.2s var(--sc-ease), color 0.2s var(--sc-ease),
		border-color 0.2s var(--sc-ease), transform 0.2s var(--sc-ease);
}

.sc-btn-primary .wp-block-button__link,
a.sc-btn-primary {
	background: var(--sc-violet);
	color: #fff;
	border: 1px solid var(--sc-violet);
}

.sc-btn-primary .wp-block-button__link:hover,
a.sc-btn-primary:hover {
	background: var(--sc-violet-deep);
	border-color: var(--sc-violet-deep);
	transform: translateY(-2px);
}

.sc-btn-ghost .wp-block-button__link,
a.sc-btn-ghost {
	background: transparent;
	color: var(--sc-ink);
	border: 1px solid var(--sc-ink);
}

.sc-btn-ghost .wp-block-button__link:hover,
a.sc-btn-ghost:hover {
	background: var(--sc-ink);
	color: var(--sc-paper);
	transform: translateY(-2px);
}

.sc-dark .sc-btn-ghost .wp-block-button__link,
.sc-dark a.sc-btn-ghost {
	color: #fff;
	border-color: #3a4256;
}

.sc-dark .sc-btn-ghost .wp-block-button__link:hover,
.sc-dark a.sc-btn-ghost:hover {
	background: #fff;
	color: var(--sc-ink);
	border-color: #fff;
}

.sc-arrow {
	transition: transform 0.2s var(--sc-ease);
}

.wp-block-button__link:hover .sc-arrow,
.sc-btn:hover .sc-arrow {
	transform: translateX(4px);
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.sc-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(246, 245, 241, 0.82);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--sc-hairline);
}

.sc-header-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	min-height: 72px;
}

.sc-header-row > :last-child {
	justify-self: end;
}

.sc-logo a,
.sc-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-family: var(--sc-font-display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.03em;
	color: var(--sc-ink);
}

.sc-logo .sc-logo-accent {
	color: var(--sc-violet);
}

/* ==========================================================================
   5. Rank Line (signature)
   ========================================================================== */

.sc-rank-line {
	display: block;
	width: 100%;
	height: auto;
}

.sc-rank-line .sc-track {
	fill: none;
	stroke: var(--sc-hairline);
	stroke-width: 1;
}

.sc-rank-line .sc-curve {
	fill: none;
	stroke: var(--sc-lime);
	stroke-width: 3;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.sc-rank-line .sc-node {
	fill: var(--sc-ink);
	stroke: var(--sc-lime);
	stroke-width: 2.5;
}

.sc-rank-line .sc-label {
	font-family: var(--sc-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	fill: #9aa2b4;
	text-transform: uppercase;
}

.sc-rank-line .sc-value {
	font-family: var(--sc-font-mono);
	font-size: 14px;
	font-weight: 500;
	fill: var(--sc-lime);
}

.sc-divider {
	height: 1px;
	background: var(--sc-hairline);
	position: relative;
}

.sc-divider::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -3px;
	width: 7px;
	height: 7px;
	background: var(--sc-violet);
	border-radius: 50%;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.sc-hero {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(48px, 6vw, 96px);
	position: relative;
	overflow: hidden;
}

.sc-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.sc-hero h1 {
	font-size: clamp(42px, 6.2vw, 76px);
	margin: 0 0 22px;
}

.sc-hero-lead {
	font-size: clamp(17px, 1.4vw, 20px);
	color: var(--sc-slate);
	max-width: 54ch;
	margin: 0 0 30px;
}

.sc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
	padding: 0;
	list-style: none;
}

.sc-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--sc-hairline);
	border-radius: 999px;
	padding: 8px 16px 8px 12px;
	font-size: 14px;
	font-weight: 500;
	transition: border-color 0.2s var(--sc-ease), transform 0.2s var(--sc-ease);
}

.sc-pill:hover {
	border-color: var(--sc-violet);
	transform: translateY(-2px);
}

.sc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.sc-hero-panel {
	background: var(--sc-ink);
	border-radius: var(--sc-radius-lg);
	padding: clamp(22px, 3vw, 34px);
	box-shadow: 0 40px 80px -50px rgba(11, 14, 20, 0.8);
}

.sc-hero-panel .sc-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 18px;
	color: #7d859a;
	font-family: var(--sc-font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sc-hero-panel .sc-panel-head strong {
	color: var(--sc-lime);
	font-weight: 500;
}

.sc-hero-panel .sc-track {
	stroke: #222a3a;
}

.sc-panel-foot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--sc-hairline-dark);
}

.sc-panel-foot div {
	font-family: var(--sc-font-mono);
	font-size: 12px;
	color: #7d859a;
	letter-spacing: 0.04em;
}

.sc-panel-foot b {
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 2px;
}

/* ==========================================================================
   7. Metrics band
   ========================================================================== */

.sc-metrics {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--sc-hairline-dark);
	border: 1px solid var(--sc-hairline-dark);
	border-radius: var(--sc-radius-lg);
	overflow: hidden;
}

.sc-metric {
	background: var(--sc-ink);
	padding: clamp(22px, 2.6vw, 34px);
}

.sc-metric-value {
	font-family: var(--sc-font-mono);
	font-weight: 500;
	font-size: clamp(34px, 3.6vw, 54px);
	line-height: 1;
	color: var(--sc-lime);
	letter-spacing: -0.03em;
	margin: 0 0 10px;
}

.sc-metric-label {
	font-size: 14px;
	color: #99a1b2;
	margin: 0;
	line-height: 1.4;
}

/* ==========================================================================
   8. About
   ========================================================================== */

.sc-about-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.sc-about-media {
	position: relative;
	border-radius: var(--sc-radius-lg);
	overflow: hidden;
	background: var(--sc-ink);
	aspect-ratio: 4 / 5;
}

.sc-about-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.08);
	mix-blend-mode: luminosity;
	opacity: 0.9;
}

.sc-about-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(91, 43, 255, 0.42), rgba(11, 14, 20, 0.55));
	pointer-events: none;
}

.sc-about-body p {
	color: var(--sc-slate);
	margin: 0 0 18px;
	font-size: 18px;
}

.sc-about-body p:last-child {
	margin-bottom: 0;
}

.sc-mark {
	color: var(--sc-ink);
	font-weight: 600;
	box-shadow: inset 0 -0.5em 0 var(--sc-violet-soft);
}

/* ==========================================================================
   9. Workflow stepper
   ========================================================================== */

.sc-flow {
	position: relative;
}

.sc-flow-rail {
	position: relative;
	height: 2px;
	background: var(--sc-hairline);
	margin: 0 0 0;
}

.sc-flow-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(18px, 2.4vw, 34px);
	grid-auto-rows: 1fr;
}

.sc-step {
	position: relative;
	padding-top: 34px;
}

.sc-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	right: -34px;
	height: 1px;
	background: var(--sc-hairline);
}

.sc-step:last-child::before {
	right: 0;
}

.sc-step-num {
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sc-violet);
	color: #fff;
	font-family: var(--sc-font-mono);
	font-size: 13px;
	font-weight: 500;
	display: grid;
	place-items: center;
	z-index: 1;
	box-shadow: 0 0 0 6px var(--sc-paper);
}

.sc-step h3 {
	font-size: 21px;
	margin: 0 0 10px;
}

.sc-step p {
	color: var(--sc-slate);
	font-size: 16px;
	margin: 0;
}

/* ==========================================================================
   10. Services
   ========================================================================== */

.sc-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	grid-auto-rows: 1fr;
}

.sc-card {
	background: var(--sc-card);
	border: 1px solid var(--sc-hairline);
	border-radius: var(--sc-radius-lg);
	padding: 26px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	transition: transform 0.24s var(--sc-ease), border-color 0.24s var(--sc-ease),
		box-shadow 0.24s var(--sc-ease);
}

.sc-card:hover {
	transform: translateY(-4px);
	border-color: var(--sc-violet);
	box-shadow: 0 26px 48px -34px rgba(91, 43, 255, 0.55);
}

.sc-card-icon {
	width: 34px;
	height: 34px;
	color: var(--sc-violet);
}

.sc-card h3 {
	font-size: 20px;
	margin: 0;
}

.sc-card p {
	color: var(--sc-slate);
	font-size: 15.5px;
	margin: 0;
	flex: 1;
}

.sc-card-more {
	font-family: var(--sc-font-mono);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sc-violet);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sc-card:hover .sc-arrow {
	transform: translateX(4px);
}

.sc-services-foot {
	margin-top: 34px;
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   11. Cases
   ========================================================================== */

.sc-case {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(26px, 4vw, 56px);
	align-items: center;
	padding: clamp(26px, 3.4vw, 44px);
	border: 1px solid var(--sc-hairline-dark);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-surface);
}

.sc-case + .sc-case {
	margin-top: 22px;
}

.sc-case:nth-child(even) .sc-case-media {
	order: 2;
}

.sc-case-media {
	border-radius: var(--sc-radius);
	overflow: hidden;
	background: var(--sc-ink);
	border: 1px solid var(--sc-hairline-dark);
}

.sc-case-media svg {
	display: block;
	width: 100%;
	height: auto;
}

.sc-case h3 {
	font-size: clamp(24px, 2.4vw, 32px);
	margin: 0 0 14px;
}

.sc-case p {
	margin: 0 0 22px;
}

.sc-results {
	list-style: none;
	padding: 0;
	margin: 0 0 26px;
	display: grid;
	gap: 10px;
}

.sc-results li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 16px;
	color: #dfe3ec;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sc-hairline-dark);
}

.sc-results li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sc-results b {
	font-family: var(--sc-font-mono);
	color: var(--sc-lime);
	font-weight: 500;
}

.sc-results svg {
	width: 18px;
	height: 18px;
	color: var(--sc-lime);
	margin-top: 3px;
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

.sc-quotes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	grid-auto-rows: 1fr;
}

.sc-quote {
	background: var(--sc-card);
	border: 1px solid var(--sc-hairline);
	border-radius: var(--sc-radius-lg);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.sc-quote::before {
	content: "\201C";
	font-family: var(--sc-font-display);
	font-size: 74px;
	line-height: 1;
	color: var(--sc-amber);
	position: absolute;
	top: 14px;
	right: 20px;
	opacity: 0.6;
}

.sc-quote p {
	font-size: 16px;
	color: var(--sc-slate);
	margin: 0 0 22px;
	flex: 1;
	position: relative;
	z-index: 1;
}

.sc-author {
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--sc-hairline);
	padding-top: 16px;
}

.sc-author img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.sc-author > span {
	display: block;
	min-width: 0;
}

.sc-author strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
}

.sc-author > span > span {
	font-family: var(--sc-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sc-slate-dim);
}

/* ==========================================================================
   13. Start steps
   ========================================================================== */

.sc-start {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	grid-auto-rows: 1fr;
}

.sc-start-card {
	position: relative;
	background: var(--sc-card);
	border: 1px solid var(--sc-hairline);
	border-radius: var(--sc-radius-lg);
	padding: 26px 24px;
	overflow: hidden;
}

.sc-start-card::before {
	content: attr(data-step);
	position: absolute;
	right: 10px;
	bottom: -18px;
	font-family: var(--sc-font-mono);
	font-size: 92px;
	font-weight: 500;
	line-height: 1;
	color: var(--sc-hairline);
	pointer-events: none;
}

.sc-start-card h3 {
	font-size: 20px;
	margin: 0 0 10px;
	position: relative;
}

.sc-start-card p {
	color: var(--sc-slate);
	font-size: 15.5px;
	margin: 0;
	position: relative;
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.sc-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 clamp(24px, 3vw, 48px);
	align-items: start;
}

.sc-faq details {
	border-top: 1px solid var(--sc-hairline);
	padding: 18px 0;
	position: relative;
}

.sc-faq details[open] {
	box-shadow: inset 2px 0 0 var(--sc-violet);
	padding-left: 16px;
}

.sc-faq summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--sc-font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;
}

.sc-faq summary::-webkit-details-marker {
	display: none;
}

.sc-faq summary::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	background-image: linear-gradient(var(--sc-violet), var(--sc-violet)),
		linear-gradient(var(--sc-violet), var(--sc-violet));
	background-size: 16px 1.5px, 1.5px 16px;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: transform 0.25s var(--sc-ease);
}

.sc-faq details[open] summary::after {
	transform: rotate(45deg);
}

.sc-faq details p {
	color: var(--sc-slate);
	font-size: 16px;
	margin: 12px 0 0;
	max-width: 62ch;
}

/* ==========================================================================
   15. Contact
   ========================================================================== */

.sc-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(30px, 4vw, 64px);
	align-items: start;
}

.sc-expert {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	padding: 18px;
	border: 1px solid var(--sc-hairline-dark);
	border-radius: var(--sc-radius-lg);
	background: var(--sc-surface);
	max-width: 400px;
}

.sc-expert img {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.sc-expert > span {
	display: block;
	min-width: 0;
}

.sc-expert strong {
	display: block;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
}

.sc-expert > span > span {
	font-family: var(--sc-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sc-lime);
}

.sc-form {
	background: var(--sc-surface);
	border: 1px solid var(--sc-hairline-dark);
	border-radius: var(--sc-radius-lg);
	padding: clamp(24px, 3vw, 36px);
	display: grid;
	gap: 16px;
}

.sc-form .sc-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.sc-form label {
	display: block;
	font-family: var(--sc-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #8d94a5;
	margin-bottom: 7px;
}

.sc-form input,
.sc-form textarea {
	width: 100%;
	background: #0d121c;
	border: 1px solid var(--sc-hairline-dark);
	border-radius: var(--sc-radius);
	color: #fff;
	font-family: var(--sc-font-body);
	font-size: 15px;
	padding: 13px 14px;
	transition: border-color 0.2s var(--sc-ease);
}

.sc-form input::placeholder,
.sc-form textarea::placeholder {
	color: #59617a;
}

.sc-form input:focus,
.sc-form textarea:focus {
	border-color: var(--sc-violet);
	outline: none;
}

.sc-form textarea {
	min-height: 118px;
	resize: vertical;
}

.sc-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13.5px;
	color: #8d94a5;
	line-height: 1.5;
}

.sc-consent input {
	width: auto;
	margin-top: 3px;
	accent-color: var(--sc-violet);
}

.sc-form button {
	background: var(--sc-violet);
	color: #fff;
	border: 0;
	border-radius: var(--sc-radius);
	font-family: var(--sc-font-body);
	font-size: 16px;
	font-weight: 600;
	padding: 15px 26px;
	cursor: pointer;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: background 0.2s var(--sc-ease), transform 0.2s var(--sc-ease);
}

.sc-form button:hover {
	background: var(--sc-violet-deep);
	transform: translateY(-2px);
}

.sc-form-note {
	font-size: 13.5px;
	color: #8d94a5;
	margin: 0;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.sc-footer {
	background: var(--sc-ink);
	color: #b9bfcd;
	padding-top: clamp(48px, 6vw, 80px);
	padding-bottom: 30px;
}

.sc-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: clamp(24px, 3vw, 48px);
}

.sc-footer h4 {
	font-family: var(--sc-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6f7688;
	margin: 0 0 16px;
}

.sc-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.sc-footer a {
	color: #b9bfcd;
	text-decoration: none;
	font-size: 15px;
	transition: color 0.18s var(--sc-ease);
}

.sc-footer a:hover {
	color: var(--sc-lime);
}

.sc-footer-about p {
	font-size: 15px;
	max-width: 42ch;
	margin: 16px 0 0;
	color: #8d94a5;
}

.sc-footer-bottom {
	margin-top: clamp(34px, 4vw, 56px);
	padding-top: 22px;
	border-top: 1px solid var(--sc-hairline-dark);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--sc-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: #6f7688;
}

/* ==========================================================================
   17. Motion
   ========================================================================== */

.sc-js .sc-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s var(--sc-ease), transform 0.6s var(--sc-ease);
}

.sc-js .sc-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.sc-js .sc-draw {
	stroke-dasharray: var(--sc-len, 1200);
	stroke-dashoffset: var(--sc-len, 1200);
}

.is-visible .sc-draw,
.sc-draw.is-visible {
	animation: sc-draw 1.25s var(--sc-ease) forwards;
}

@keyframes sc-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.sc-js .sc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sc-js .sc-draw {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		animation: none;
	}

	* {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.sc-grid-4,
	.sc-quotes,
	.sc-start {
		grid-template-columns: repeat(2, 1fr);
	}

	.sc-metrics {
		grid-template-columns: repeat(3, 1fr);
	}

	.sc-footer-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.sc-footer-about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 980px) {
	.sc-hero-grid,
	.sc-about-grid,
	.sc-case,
	.sc-contact-grid {
		grid-template-columns: 1fr;
	}

	.sc-case:nth-child(even) .sc-case-media {
		order: 0;
	}

	.sc-about-media {
		aspect-ratio: 16 / 9;
	}

	.sc-faq {
		grid-template-columns: 1fr;
	}

	.sc-flow-steps {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sc-step {
		padding: 0 0 26px 52px;
	}

	.sc-step::before {
		left: 14px;
		top: 30px;
		right: auto;
		bottom: 0;
		width: 1px;
		height: calc(100% - 30px);
	}

	.sc-step:last-child::before {
		display: none;
	}

	.sc-step-num {
		top: 2px;
	}
}

@media (max-width: 782px) {
	.sc-header-row {
		grid-template-columns: auto 1fr auto;
	}

	.sc-header-row > :last-child {
		order: 3;
	}
}

@media (max-width: 720px) {
	body {
		font-size: 16px;
	}

	.sc-metrics {
		grid-template-columns: repeat(2, 1fr);
	}

	.sc-metrics .sc-metric:last-child {
		grid-column: 1 / -1;
	}

	.sc-grid-4,
	.sc-quotes,
	.sc-start {
		grid-template-columns: 1fr;
	}

	.sc-footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sc-form .sc-field-row {
		grid-template-columns: 1fr;
	}

	.sc-hero-actions .wp-block-button {
		width: 100%;
	}

	.sc-hero-actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}



/* ==========================================================================
   19. Layout normalisation
   Keeps spacing identical whether WordPress block gap is present or not.
   ========================================================================== */

.sc-head > h2,
.sc-head > h3 {
	margin: 0;
}

.sc-about-body > h2 {
	margin: 0 0 20px;
}

.sc-contact-grid h2 {
	margin: 0 0 18px;
}

.sc-hero-copy > .wp-block-buttons {
	margin-top: 0;
}

.sc-metrics-section {
	padding-top: 0;
}

.sc-cases {
	display: block;
}

/* ==========================================================================
   20. Statement block (homepage)
   ========================================================================== */

.sc-statement-inner {
	border-left: 3px solid var(--sc-violet);
	padding-left: clamp(20px, 3vw, 40px);
	max-width: 980px;
}

.sc-statement-inner h2 {
	margin: 0 0 20px;
}

.sc-statement-inner p {
	color: var(--sc-slate);
	font-size: 18px;
	margin: 0;
}

.sc-expert-note {
	margin-top: 20px;
	max-width: 46ch;
}

/* ==========================================================================
   21. Inner pages
   ========================================================================== */

.sc-page-hero {
	padding-top: clamp(44px, 5vw, 76px);
	padding-bottom: clamp(40px, 5vw, 72px);
	border-bottom: 1px solid var(--sc-hairline);
}

.sc-page-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(30px, 5vw, 64px);
	align-items: center;
}

.sc-page-hero h1 {
	font-size: clamp(38px, 5.4vw, 66px);
	margin: 0 0 20px;
}

.sc-page-hero .sc-page-lead {
	font-size: clamp(17px, 1.4vw, 20px);
	color: var(--sc-slate);
	max-width: 52ch;
	margin: 0 0 28px;
}

.sc-page-art {
	background: var(--sc-ink);
	border-radius: var(--sc-radius-lg);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: 0 40px 80px -50px rgba(11, 14, 20, 0.8);
}

.sc-page-art svg {
	display: block;
	width: 100%;
	height: auto;
}

.sc-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	grid-auto-rows: 1fr;
}

.sc-why-card {
	background: var(--sc-card);
	border: 1px solid var(--sc-hairline);
	border-radius: var(--sc-radius-lg);
	padding: 26px 24px;
	transition: transform 0.24s var(--sc-ease), border-color 0.24s var(--sc-ease);
}

.sc-why-card:hover {
	transform: translateY(-4px);
	border-color: var(--sc-accent);
}

.sc-why-card svg {
	width: 34px;
	height: 34px;
	color: var(--sc-accent);
	margin-bottom: 14px;
}

.sc-why-card h3 {
	font-size: 20px;
	margin: 0 0 10px;
}

.sc-why-card p {
	color: var(--sc-slate);
	font-size: 15.5px;
	margin: 0;
}

.sc-split {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(26px, 4vw, 60px);
	align-items: start;
}

.sc-split h2 {
	margin: 0;
}

.sc-split p {
	color: var(--sc-slate);
	font-size: 18px;
	margin: 0 0 18px;
}

.sc-split p:last-child {
	margin-bottom: 0;
}

.sc-dark .sc-split p {
	color: #b9bfcd;
}

.sc-strengths {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	grid-auto-rows: 1fr;
}

.sc-strength {
	background: var(--sc-surface);
	border: 1px solid var(--sc-hairline-dark);
	border-radius: var(--sc-radius-lg);
	padding: 28px 26px;
	position: relative;
	overflow: hidden;
}

.sc-strength::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--sc-lime);
}

.sc-strength h3 {
	font-size: 21px;
	margin: 0 0 12px;
	color: #fff;
}

.sc-strength p {
	color: #b9bfcd;
	font-size: 16px;
	margin: 0;
}

.sc-strength-index {
	font-family: var(--sc-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--sc-lime);
	display: block;
	margin-bottom: 12px;
}

.sc-cta-band {
	background: var(--sc-ink);
	border-radius: var(--sc-radius-lg);
	padding: clamp(30px, 4vw, 52px);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}

.sc-cta-band h2 {
	font-size: clamp(26px, 3vw, 38px);
	margin: 0 0 12px;
	color: #fff;
}

.sc-cta-band p {
	color: #b9bfcd;
	margin: 0;
	max-width: 52ch;
}

.sc-cta-band .sc-expert {
	margin-top: 22px;
	background: var(--sc-surface);
}

@media (max-width: 1180px) {
	.sc-why-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 980px) {
	.sc-page-hero-grid,
	.sc-split,
	.sc-strengths,
	.sc-cta-band {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.sc-why-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   22. Card link behaviour
   A card can contain links inside its copy, so the card itself is never an
   anchor - the "open service" link is stretched across it instead.
   ========================================================================== */

.sc-card {
	position: relative;
}

a.sc-card-more::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--sc-radius-lg);
}

.sc-card h3,
.sc-card p,
.sc-card .sc-card-icon,
a.sc-card-more {
	position: relative;
	z-index: 1;
}

.sc-card p a {
	position: relative;
	z-index: 2;
	color: var(--sc-violet);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sc-card:focus-within {
	border-color: var(--sc-violet);
}

a.sc-card-more {
	margin-top: auto;
	text-decoration: none;
}

/* ==========================================================================
   23. Page identities
   Each inner page picks an accent, a hero treatment and a layout for its card
   sections, so no two service pages read the same.
   ========================================================================== */

.sc-accent-violet  { --sc-accent: #5b2bff; }
.sc-accent-cyan    { --sc-accent: #0b93c4; }
.sc-accent-magenta { --sc-accent: #cc2f86; }
.sc-accent-teal    { --sc-accent: #0c8f7b; }
.sc-accent-amber   { --sc-accent: #c96a09; }
.sc-accent-indigo  { --sc-accent: #3540c9; }

[class*="sc-accent-"] .sc-btn-primary .wp-block-button__link,
[class*="sc-accent-"] a.sc-btn-primary {
	background: var(--sc-accent);
	border-color: var(--sc-accent);
}

[class*="sc-accent-"] .sc-btn-primary .wp-block-button__link:hover,
[class*="sc-accent-"] a.sc-btn-primary:hover {
	filter: brightness(0.88);
}

[class*="sc-accent-"] .sc-faq details[open] {
	box-shadow: inset 2px 0 0 var(--sc-accent);
}

[class*="sc-accent-"] .sc-faq summary::after {
	background-image: linear-gradient(var(--sc-accent), var(--sc-accent)),
		linear-gradient(var(--sc-accent), var(--sc-accent));
}

[class*="sc-accent-"] .sc-split h2 {
	position: relative;
	padding-top: 18px;
}

[class*="sc-accent-"] .sc-split h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 3px;
	background: var(--sc-accent);
}

/* Hero treatments ---------------------------------------------------------- */

.sc-page-hero.is-mirrored .sc-page-hero-grid > :first-child {
	order: 2;
}

.sc-page-hero.is-centered .sc-page-hero-grid {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: clamp(28px, 3vw, 44px);
}

.sc-page-hero.is-centered .sc-page-lead {
	margin-left: auto;
	margin-right: auto;
}

.sc-page-hero.is-centered .sc-hero-actions {
	justify-content: center;
}

.sc-page-hero.is-centered .sc-page-art {
	width: 100%;
	max-width: 780px;
}

.sc-page-hero.is-dark {
	background: var(--sc-ink);
	border-bottom: 0;
}

.sc-page-hero.is-dark h1 {
	color: #fff;
}

.sc-page-hero.is-dark .sc-page-lead {
	color: #b9bfcd;
}

.sc-page-hero.is-dark .sc-page-art {
	background: var(--sc-surface);
	border: 1px solid var(--sc-hairline-dark);
	box-shadow: none;
}

.sc-page-hero.is-plain .sc-page-hero-grid {
	grid-template-columns: 1fr;
	max-width: 900px;
}

.sc-page-hero.is-plain .sc-page-art {
	display: none;
}

.sc-page-hero.is-plain h1 {
	font-size: clamp(40px, 6vw, 72px);
}

/* Why-block layouts -------------------------------------------------------- */

.sc-why-grid.is-rows {
	grid-template-columns: 1fr;
	gap: 0;
}

.sc-why-grid.is-rows .sc-why-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 0.8fr) minmax(0, 1.5fr);
	grid-template-rows: auto;
	gap: clamp(18px, 3vw, 40px);
	align-items: start;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--sc-hairline);
	border-radius: 0;
	padding: 28px 0;
}

.sc-why-grid.is-rows .sc-why-card:hover {
	transform: none;
	border-color: var(--sc-hairline);
}

.sc-why-grid.is-rows .sc-why-card svg {
	margin: 0;
	width: 30px;
	height: 30px;
}

.sc-why-grid.is-rows .sc-why-card h3 {
	margin: 0;
	font-size: 22px;
	grid-column: 2;
	grid-row: 1;
}

.sc-why-grid.is-rows .sc-why-card p {
	grid-column: 3;
	grid-row: 1;
	margin: 0;
}

.sc-why-grid.is-rows .sc-why-card svg {
	grid-column: 1;
	grid-row: 1;
}

.sc-why-grid.is-stack {
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.sc-why-grid.is-stack .sc-why-card {
	background: var(--sc-ink);
	border-color: var(--sc-hairline-dark);
	padding: 32px 30px;
}

.sc-why-grid.is-stack .sc-why-card h3 {
	color: #fff;
	font-size: 23px;
}

.sc-why-grid.is-stack .sc-why-card p {
	color: #b9bfcd;
}

.sc-why-grid.is-stack .sc-why-card svg {
	color: var(--sc-accent);
	width: 40px;
	height: 40px;
}

.sc-why-grid.is-tiles .sc-why-card:first-child {
	grid-column: span 2;
	background: var(--sc-ink);
	border-color: var(--sc-hairline-dark);
}

.sc-why-grid.is-tiles .sc-why-card:first-child h3 {
	color: #fff;
	font-size: 26px;
}

.sc-why-grid.is-tiles .sc-why-card:first-child p {
	color: #b9bfcd;
	max-width: 62ch;
}

/* Strength layouts --------------------------------------------------------- */

.sc-strengths.is-list {
	grid-template-columns: 1fr;
	gap: 0;
}

.sc-strengths.is-list .sc-strength {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 8px;
	align-items: start;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--sc-hairline);
	border-radius: 0;
	padding: 26px 0;
}

.sc-strengths.is-list .sc-strength::after {
	display: none;
}

.sc-strengths.is-list .sc-strength h3 {
	color: var(--sc-ink);
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 10px;
}

.sc-strengths.is-list .sc-strength p {
	color: var(--sc-slate);
	max-width: 78ch;
	grid-column: 2;
	grid-row: 2;
}

.sc-strengths.is-list .sc-strength-index {
	font-size: 30px;
	line-height: 1.1;
	color: var(--sc-accent);
	margin: 0;
	grid-column: 1;
	grid-row: 1 / span 2;
}

.sc-strengths.is-band {
	grid-template-columns: 1fr;
}

.sc-strengths.is-band .sc-strength {
	background: var(--sc-card);
	border-color: var(--sc-hairline);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 8px 26px;
	padding-left: 34px;
}

.sc-strengths.is-band .sc-strength-index {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.sc-strengths.is-band .sc-strength h3 {
	grid-column: 2;
	grid-row: 1;
}

.sc-strengths.is-band .sc-strength::after {
	background: var(--sc-accent);
	width: 4px;
}

.sc-strengths.is-band .sc-strength h3 {
	color: var(--sc-ink);
}

.sc-strengths.is-band .sc-strength p {
	color: var(--sc-slate);
	grid-column: 2;
	grid-row: 2;
}

.sc-strengths.is-band .sc-strength-index {
	color: var(--sc-accent);
	margin: 6px 0 0;
}

@media (max-width: 860px) {
	.sc-why-grid.is-rows .sc-why-card {
		grid-template-columns: 34px minmax(0, 1fr);
		grid-template-rows: auto auto;
	}

	.sc-why-grid.is-rows .sc-why-card h3 {
		grid-column: 2;
		grid-row: 1;
	}

	.sc-why-grid.is-rows .sc-why-card p {
		grid-column: 2;
		grid-row: 2;
		margin-top: 10px;
	}

	.sc-why-grid.is-rows .sc-why-card svg {
		grid-row: 1;
	}

	.sc-why-grid.is-stack,
	.sc-why-grid.is-tiles {
		grid-template-columns: 1fr;
	}

	.sc-why-grid.is-tiles .sc-why-card:first-child {
		grid-column: auto;
	}

	.sc-strengths.is-list .sc-strength {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 6px;
	}

	.sc-strengths.is-list .sc-strength-index {
		grid-column: 1;
		grid-row: 1;
	}

	.sc-strengths.is-list .sc-strength h3 {
		grid-column: 1;
		grid-row: 2;
	}

	.sc-strengths.is-list .sc-strength p {
		grid-column: 1;
		grid-row: 3;
	}

	.sc-strengths.is-band .sc-strength {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}

	.sc-strengths.is-band .sc-strength-index,
	.sc-strengths.is-band .sc-strength h3,
	.sc-strengths.is-band .sc-strength p {
		grid-column: 1;
	}

	.sc-strengths.is-band .sc-strength-index { grid-row: 1; }
	.sc-strengths.is-band .sc-strength h3 { grid-row: 2; }
	.sc-strengths.is-band .sc-strength p { grid-row: 3; }
}

/* ==========================================================================
   24. Supporting illustrations and page shell
   ========================================================================== */

.sc-page-art {
	--sc-line: #242b3b;
}

.sc-split.has-art {
	grid-template-columns: 0.7fr 1.1fr 0.9fr;
	align-items: center;
}

.sc-split-art {
	--sc-line: #e3e1da;
	background: var(--sc-card);
	border: 1px solid var(--sc-hairline);
	border-radius: var(--sc-radius-lg);
	padding: 22px;
}

.sc-dark .sc-split-art {
	--sc-line: #242b3b;
	background: var(--sc-surface);
	border-color: var(--sc-hairline-dark);
}

.sc-split-art svg {
	display: block;
	width: 100%;
	height: auto;
}

.sc-split-art .sc-label {
	fill: var(--sc-slate-dim);
	font-family: var(--sc-font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
}

.sc-split-art .sc-value {
	fill: var(--sc-accent);
	font-family: var(--sc-font-mono);
	font-size: 13px;
	font-weight: 500;
}

.sc-page-art .sc-label {
	fill: #9aa2b4;
	font-family: var(--sc-font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
}

.sc-page-art .sc-value {
	fill: #c8ff4d;
	font-family: var(--sc-font-mono);
	font-size: 13px;
	font-weight: 500;
}

.sc-main > .wp-block-post-content > *:first-child:not(.sc-page-hero):not(.sc-hero):not(.sc-section) {
	margin-top: clamp(48px, 6vw, 80px);
}

.sc-main > .wp-block-post-content > *:last-child:not(.sc-section) {
	margin-bottom: clamp(48px, 6vw, 80px);
}

@media (max-width: 1100px) {
	.sc-split.has-art {
		grid-template-columns: 0.9fr 1.1fr;
	}

	.sc-split.has-art .sc-split-art {
		grid-column: 1 / -1;
	}
}

@media (max-width: 980px) {
	.sc-split.has-art {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   25. Page shell seams and small-screen corrections
   ========================================================================== */

/*
 * WordPress puts a block gap between the top-level blocks of a page, which
 * showed as a paper-coloured strip between the dark contact section and the
 * dark footer. Sections carry their own vertical rhythm, so the gap is not
 * wanted here.
 */
.wp-site-blocks > *,
.wp-site-blocks > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
	margin: 0;
}

main > .wp-block-post-content > .sc-section:last-child,
main > .wp-block-post-content > .sc-hero:last-child {
	margin-bottom: 0;
}

/* Sticky header height differs once the navigation collapses. */
@media (max-width: 782px) {
	html {
		scroll-padding-top: 80px;
	}
}

@media (max-width: 600px) {
	.sc-hero h1 {
		font-size: clamp(34px, 9vw, 44px);
	}

	.sc-page-hero h1 {
		font-size: clamp(32px, 8.4vw, 42px);
	}

	h2.sc-h2 {
		font-size: clamp(26px, 7vw, 34px);
	}

	.sc-cta-band {
		gap: 24px;
	}

	.sc-cta-band a.sc-btn {
		width: 100%;
		justify-content: center;
	}

	.sc-case a.sc-btn,
	.sc-services-foot .wp-block-button,
	.sc-services-foot .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	.sc-form button {
		width: 100%;
		justify-content: center;
	}

	.sc-expert {
		max-width: none;
	}

	.sc-quote::before {
		font-size: 56px;
		top: 10px;
		right: 16px;
	}

	.sc-start-card::before {
		font-size: 68px;
	}

	.sc-faq summary {
		font-size: 17px;
	}
}

/* Long unbroken strings (addresses, handles) must not push the layout wide. */
.sc-split p,
.sc-card p,
.sc-why-card p,
.sc-strength p,
.sc-faq details p,
.sc-footer a,
.sc-expert,
.sc-author {
	overflow-wrap: anywhere;
}

/* Nothing inside a section may create a horizontal scrollbar. */
.sc-section,
.sc-hero,
.sc-page-hero {
	overflow-x: clip;
}

/* Sections own their spacing, so the editor's block gap must not add to it. */
main > .wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (max-width: 600px) {
	.sc-panel-foot {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.sc-panel-foot div {
		display: flex;
		align-items: baseline;
		gap: 10px;
	}

	.sc-panel-foot b {
		margin-bottom: 0;
	}
}

@media (max-width: 480px) {
	.sc-metrics {
		grid-template-columns: 1fr;
	}

	.sc-metrics .sc-metric:last-child {
		grid-column: auto;
	}

	.sc-footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.sc-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ==========================================================================
   26. Navigation: desktop menu and mobile drawer
   ========================================================================== */

.sc-nav-list {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sc-nav-list > li {
	position: relative;
}

.sc-nav-list a {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: var(--sc-ink);
	padding: 6px 0;
	position: relative;
	white-space: nowrap;
}

.sc-nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1.5px;
	background: var(--sc-violet);
	transition: width 0.24s var(--sc-ease);
}

.sc-nav-list > li > a:hover::after {
	width: 100%;
}

.sc-has-sub > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 14px;
}

.sc-sub {
	position: absolute;
	top: calc(100% + 12px);
	left: -14px;
	min-width: 232px;
	background: #fff;
	border: 1px solid var(--sc-hairline);
	border-radius: var(--sc-radius);
	box-shadow: 0 26px 50px -30px rgba(11, 14, 20, 0.5);
	padding: 8px;
	margin: 0;
	list-style: none;
	display: grid;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s var(--sc-ease), transform 0.18s var(--sc-ease), visibility 0.18s;
	z-index: 40;
}

.sc-has-sub:hover .sc-sub,
.sc-has-sub:focus-within .sc-sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sc-sub a {
	display: block;
	padding: 9px 12px;
	border-radius: 4px;
	white-space: normal;
}

.sc-sub a:hover {
	background: var(--sc-violet-soft);
	color: var(--sc-violet);
}

.sc-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sc-header-cta {
	padding: 12px 20px;
	font-size: 15px;
}

.sc-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--sc-hairline);
	border-radius: var(--sc-radius);
	background: #fff;
	color: var(--sc-ink);
	cursor: pointer;
	transition: border-color 0.2s var(--sc-ease);
}

.sc-nav-toggle:hover {
	border-color: var(--sc-violet);
}

/* Drawer ------------------------------------------------------------------- */

.sc-drawer {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100dvh;
	z-index: 120;
	background: var(--sc-ink);
	color: #fff;
	padding: 18px clamp(20px, 5vw, 32px) 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.sc-drawer[hidden] {
	display: none;
}

.sc-js .sc-drawer {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.22s var(--sc-ease), transform 0.22s var(--sc-ease);
}

.sc-js .sc-drawer.is-open {
	opacity: 1;
	transform: none;
}

.sc-drawer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
}

.sc-drawer-top .sc-logo {
	color: #fff;
}

.sc-drawer-close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--sc-hairline-dark);
	border-radius: var(--sc-radius);
	background: var(--sc-surface);
	color: #fff;
	cursor: pointer;
	transition: border-color 0.2s var(--sc-ease), background 0.2s var(--sc-ease);
}

.sc-drawer-close:hover {
	border-color: var(--sc-violet);
	background: var(--sc-violet);
}

.sc-drawer-nav h4 {
	font-family: var(--sc-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6f7688;
	margin: 22px 0 10px;
}

.sc-drawer-nav h4:first-child {
	margin-top: 4px;
}

.sc-drawer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.sc-drawer-nav a {
	display: block;
	padding: 13px 0;
	font-size: 17px;
	font-weight: 500;
	color: #e7e9ef;
	text-decoration: none;
	border-bottom: 1px solid var(--sc-hairline-dark);
}

.sc-drawer-nav a:hover,
.sc-drawer-nav a:focus-visible {
	color: var(--sc-lime);
}

.sc-drawer-cta {
	margin-top: auto;
	justify-content: center;
	text-align: center;
}

@media (max-width: 1080px) {
	.sc-nav-list {
		gap: 18px;
	}

	.sc-nav-list a {
		font-size: 14.5px;
	}
}

@media (max-width: 940px) {
	.sc-nav {
		display: none;
	}

	.sc-nav-toggle {
		display: inline-flex;
	}

	.sc-header-row {
		grid-template-columns: auto 1fr;
	}

	.sc-header-row > .sc-header-actions {
		grid-column: 2;
		justify-self: end;
	}
}

@media (max-width: 560px) {
	.sc-header-cta {
		display: none;
	}
}

body.sc-drawer-open {
	overflow: hidden;
}

/* Sit below the WordPress admin bar when it is on screen. */
body.admin-bar .sc-drawer {
	top: 46px;
	height: calc(100dvh - 46px);
}

@media (min-width: 783px) {
	body.admin-bar .sc-drawer {
		top: 32px;
		height: calc(100dvh - 32px);
	}
}

/* A long menu still scrolls inside the drawer, never behind it. */
.sc-drawer-nav {
	flex: 1 1 auto;
}

/* ==========================================================================
   27. Homepage graphics as stylesheet assets
   Kept in CSS, not in the page content: some hosts strip inline SVG from
   post_content, which left the pages with missing art and collapsed grids.
   ========================================================================== */

.sc-panel-chart {
	background-image: url("assets/img/chart-rankline.svg");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	aspect-ratio: 460 / 300;
	width: 100%;
}

.sc-art-casebars {
	background-image: var(--sc-art-casebars);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	aspect-ratio: 460 / 260;
	width: 100%;
}

.sc-art-casecurve {
	background-image: var(--sc-art-casecurve);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	aspect-ratio: 460 / 260;
	width: 100%;
}

/* Card icons and arrows, drawn from the stylesheet for the same reason. */

.sc-card-icon {
	display: block;
	width: 34px;
	height: 34px;
	background-color: currentColor;
	color: var(--sc-accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sc-card-icon-0 {
	-webkit-mask-image: url("assets/img/icon-0.svg");
	mask-image: url("assets/img/icon-0.svg");
}

.sc-card-icon-1 {
	-webkit-mask-image: url("assets/img/icon-1.svg");
	mask-image: url("assets/img/icon-1.svg");
}

.sc-card-icon-2 {
	-webkit-mask-image: url("assets/img/icon-2.svg");
	mask-image: url("assets/img/icon-2.svg");
}

.sc-card-icon-3 {
	-webkit-mask-image: url("assets/img/icon-3.svg");
	mask-image: url("assets/img/icon-3.svg");
}

/* Growth arrow in front of every result line. */
.sc-results li::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 3px;
	background-color: #c8ff4d;
	-webkit-mask: url("assets/img/arrow-up.svg") no-repeat center / contain;
	mask: url("assets/img/arrow-up.svg") no-repeat center / contain;
}

/* Trailing arrow on link-style buttons. */
.sc-btn-arrow::after {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("assets/img/arrow-right.svg") no-repeat center / contain;
	mask: url("assets/img/arrow-right.svg") no-repeat center / contain;
	transition: transform 0.2s var(--sc-ease);
}

.sc-btn-arrow:hover::after {
	transform: translateX(4px);
}

/* Grids must survive a missing icon: text always sits in its own column. */
.sc-results li > span,
.sc-results li > b {
	grid-column: 2;
}

.sc-why-card > h3 {
	grid-column: 2;
}

.sc-case-media {
	align-self: center;
}

/*
 * Fallback for a homepage still holding markup from an older theme version,
 * where the case illustration lived in the page and may have been stripped.
 */
.sc-cases .sc-case:nth-child(1) .sc-case-media:empty {
	background-image: var(--sc-art-casebars);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	aspect-ratio: 460 / 260;
}

.sc-cases .sc-case:nth-child(2) .sc-case-media:empty {
	background-image: var(--sc-art-casecurve);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	aspect-ratio: 460 / 260;
}

.sc-page-art:empty,
.sc-split-art:empty {
	min-height: 180px;
}

/*
 * The hero chart also carries the drawing inline through a shortcode, so it
 * survives a host that refuses background images. The background above is the
 * fallback for a page still holding older markup.
 */
.sc-panel-chart svg {
	display: block;
	width: 100%;
	height: auto;
}

.sc-panel-chart:not(:empty) {
	background-image: none;
	aspect-ratio: auto;
}