/* SEO Showcase — client growth chart.
   Two SVGs are stacked on purpose. The chart itself uses a 0-100 viewBox with
   preserveAspectRatio="none" so the curve stretches to whatever box the card
   gives it, which keeps the maths in one unit regardless of size. A dot drawn
   in that space would stretch into an ellipse, so the dot lives in a second,
   unscaled SVG on top and is positioned in real pixels by the script. */

.sg-seo { position: relative; }

.sg-seo__stage { position: relative; }

.sg-seo__slide { display: none; }
.sg-seo__slide.is-active { display: block; }

/* ── card ── */
.sg-seo__card {
	background-color: #000;
	padding: 26px 30px 30px;
	overflow: hidden;
}

.sg-seo__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
}

/* Square crop, whatever the uploaded file is. */
.sg-seo__logo {
	width: 84px;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	object-position: center;
	flex: 0 0 auto;
	display: block;
}

.sg-seo__headings { min-width: 0; }

.sg-seo__title {
	color: #fff;
	font-size: clamp(22px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: .01em;
}

.sg-seo__subtitle {
	color: #fff;
	font-size: clamp(11px, 1.5vw, 16px);
	font-weight: 500;
	letter-spacing: .04em;
	margin-top: 4px;
}

/* ── chart ── */
.sg-seo__chart {
	position: relative;
	height: 360px;
}

.sg-seo__svg,
.sg-seo__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.sg-seo__grid { stroke: rgba(255, 255, 255, .22); stroke-width: 1; fill: none; }

.sg-seo__axis {
	stroke: var(--sg-seo-line, #F5B301);
	stroke-width: 1.5;
	fill: none;
}

/* Lives on the unscaled overlay, so the stroke is already even and must NOT
   use non-scaling-stroke -- that would put the dash pattern back into screen
   units while getTotalLength() stayed in user units, which is what broke the
   reveal into separate pieces. */
.sg-seo__line {
	stroke: var(--sg-seo-line, #F5B301);
	stroke-width: 2.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sg-seo__dot {
	fill: var(--sg-seo-dot, var(--sg-seo-line, #F5B301));
	r: 7;
}

/* The number rides the curve -- the script sets left/top in pixels, clamped so
   it cannot hang off either edge of the card. The month does NOT: it stays
   centred under the chart, because a date sliding along with the dot reads as
   part of the animation rather than as an axis label. */
.sg-seo__value,
.sg-seo__date {
	position: absolute;
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, 0);
}

.sg-seo__date {
	left: 50%;
}

.sg-seo__value {
	font-size: clamp(14px, 1.8vw, 20px);
	font-weight: 700;
	letter-spacing: .02em;
}

.sg-seo__date {
	font-size: clamp(11px, 1.4vw, 15px);
	font-weight: 500;
	letter-spacing: .02em;
	bottom: 10px;
}

/* ── month change: RGB-split glitch ──
   Same visual language as the glitch image widget -- a red and a cyan copy of
   the text shoved apart and jittered -- rather than a second, unrelated
   effect. The copies come from data-text, which the script keeps in step.

   Only the pseudo-elements are transformed. The element itself carries
   translate(-50%) for centring, so animating ITS transform would throw the
   label off-centre for the length of the glitch; it gets clip-path instead,
   which composites independently. */
.sg-seo__date::before,
.sg-seo__date::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

.sg-seo__date::before { color: #ff2d2d; }
.sg-seo__date::after  { color: #2de1ff; }

.sg-seo__date.is-glitching            { animation: sg-seo-glitch-clip .42s steps(2, end) 1; }
.sg-seo__date.is-glitching::before    { animation: sg-seo-glitch-r .42s steps(2, end) 1; }
.sg-seo__date.is-glitching::after     { animation: sg-seo-glitch-c .42s steps(2, end) 1; }

@keyframes sg-seo-glitch-r {
	0%   { opacity: 0;   transform: translate(0, 0); }
	10%  { opacity: 1;   transform: translate(-7px, 1px); }
	28%  { opacity: .65; transform: translate(4px, -1px); }
	46%  { opacity: 1;   transform: translate(-9px, 0); }
	64%  { opacity: .45; transform: translate(3px, 1px); }
	82%  { opacity: .8;  transform: translate(-2px, 0); }
	100% { opacity: 0;   transform: translate(0, 0); }
}

@keyframes sg-seo-glitch-c {
	0%   { opacity: 0;   transform: translate(0, 0); }
	10%  { opacity: 1;   transform: translate(7px, -1px); }
	28%  { opacity: .65; transform: translate(-4px, 1px); }
	46%  { opacity: 1;   transform: translate(9px, 0); }
	64%  { opacity: .45; transform: translate(-3px, -1px); }
	82%  { opacity: .8;  transform: translate(2px, 0); }
	100% { opacity: 0;   transform: translate(0, 0); }
}

@keyframes sg-seo-glitch-clip {
	0%, 100% { clip-path: none; }
	14%      { clip-path: inset(18% 0 58% 0); }
	30%      { clip-path: inset(62% 0 12% 0); }
	44%      { clip-path: none; }
	60%      { clip-path: inset(38% 0 42% 0); }
	78%      { clip-path: none; }
}

.sg-seo__num { font-variant-numeric: tabular-nums; }

/* ── month tag ──
   Sits directly above the month, centred with it. Every tag is rendered at
   load and hidden with opacity rather than display:none: the redacted script
   measures the text to size its bars, and a display:none element has no
   measurable width, so it would defer to a ResizeObserver and pop in late. */
.sg-seo__tag {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* Clear of the month. The redacted SVG is roughly the tag's own font size
	   plus the bar's padding, so this leaves room for the bar's overshoot
	   rather than just the glyphs. */
	bottom: 46px;
	width: 230px;
	max-width: 80%;
	padding: 0 !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
}

.sg-seo__tag.is-on { opacity: 1; }

/* ── domain ── */
.sg-seo__domain {
	text-align: center;
	margin-top: 18px;
	font-size: clamp(11px, 1.4vw, 15px);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .28);
}

/* ── arrows ──
   Kit-armored like the review slider: theme and Elementor kit `button` rules
   are broad enough to repaint these, so every property they touch is stated
   here and the paint properties are forced. */
.sg-seo__nav {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: absolute;
	bottom: 0;
	width: 34px;
	height: 34px;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(0, 0, 0, .35);
	border-radius: 6px;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: rgba(0, 0, 0, .35);
	cursor: pointer;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color .15s ease, border-color .15s ease;
}

.sg-seo__nav--prev { left: 0; }
.sg-seo__nav--next { right: 0; }
.sg-seo__nav svg { width: 55%; height: 55%; display: block; }

.sg-seo__nav:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.screen-reader-text.sg-seo__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.sg-seo__card { padding: 18px 18px 22px; }
	.sg-seo__head { gap: 12px; margin-bottom: 14px; }
	.sg-seo__chart { height: 260px; }
	.sg-seo__tag { bottom: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.sg-seo__line,
	.sg-seo__dot,
	.sg-seo__value,
	.sg-seo__date { transition: none !important; }
	.sg-seo__date.is-glitching,
	.sg-seo__date.is-glitching::before,
	.sg-seo__date.is-glitching::after { animation: none !important; }
}