/*
Theme Name: Localsden
Theme URI: https://localsden.local/
Author: Localsden
Author URI: https://localsden.local/
Description: A custom WordPress theme for Localsden.
Version: 1.1.4
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: localsden
Tags: custom-theme, blog, two-columns, custom-menu, featured-images
*/

/* ===== Reset / Base ===== */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
	/* Site is light-theme with green accent and an animated mint/sage gradient
	   background driven by --bg-hue. color-scheme tells UA chrome (scrollbars,
	   form fields, default inputs) to render in light mode. */
	color-scheme: light;

	/* surfaces — warm cream palette (matches the home page reference) */
	--color-bg:        #f4f0e8;
	--color-surface:   #fbf9f4;
	--color-surface-2: #efe8da;
	--color-soft:      #f3ede1;
	--color-border:    rgba(28, 26, 23, .12);

	/* text — dark ink on cream */
	--color-text:      #1c1a17;
	--color-ink-soft:  #3a352d;
	--color-muted:     #6f6960;

	/* accents — terracotta brand (matches the rest of the site) */
	--color-accent:    #b1532e;
	--color-accent-2:  #c8643b;
	--color-accent-3:  #b1532e;
	--color-green:     #16c47f;
	--color-pink:      #ec4899;
	--color-purple:    #8b5cf6;
	--color-amber:     #f59e0b;

	/* footer + dark CTA strips stay dark on purpose */
	--color-inverse-bg:   #0c0c10;
	--color-inverse-text: #f5f5f7;

	/* legacy aliases so existing rules still resolve cleanly */
	--text-on-dark:      var(--color-inverse-text);
	--text-on-dark-soft: rgba(245, 245, 247, .7);
	--color-dark:        var(--color-inverse-bg);

	/* the ONE hue that drives the entire site-bg — change this to recolour everything
	   145 mint · 158 emerald · 196 cyan · 205 sky · 232 indigo · 256 violet */
	--bg-hue: 145;

	--radius: 12px;
	--radius-lg: 18px;
	--shadow-sm: 0 1px 2px rgba(20, 20, 30, .05);
	--shadow-md: 0 10px 40px rgba(20, 20, 30, .08);
	--container: 1440px;
	--font-sans: sans-serif;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ===== Reveal-on-scroll ===== */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ===== Keyframes ===== */
@keyframes ls-float {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50%      { transform: translateY(-14px) rotate(-1deg); }
}

@keyframes ls-pulse-glow {
	0%, 100% { box-shadow: 0 30px 60px rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .04); }
	50%      { box-shadow: 0 40px 80px rgba(99, 102, 241, .18), 0 8px 20px rgba(99, 102, 241, .15); }
}

@keyframes ls-bg-pan {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes ls-blob {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(20px, -20px) scale(1.05); }
	66%      { transform: translate(-15px, 15px) scale(.97); }
}

@keyframes ls-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: var(--color-text);
	text-decoration: none;
	transition: color .2s ease;
}

a:hover { color: var(--color-accent); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 .5em;
}

button, .button, .cta-button, .header-cta-btn, .hero__cta-pill, strong {
	font-weight: 600;
}

p { margin: 0 0 1em; }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #000;
	color: #fff;
	padding: 8px 16px;
	z-index: 100;
}

.skip-link:focus { left: 16px; top: 16px; }

/* ===== Buttons ===== */
.button {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
	transition: transform .2s ease, background .2s ease, color .2s ease;
	border: 0;
	cursor: pointer;
}

.button--dark {
	background: var(--color-dark);
	color: #fff;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.button--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
	opacity: 0;
	transition: opacity .3s ease;
	z-index: -1;
}

.button--dark:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(99, 102, 241, .25);
}

.button--dark:hover::before {
	opacity: 1;
}

.button--dark:active {
	transform: translateY(0);
}

/* ===== Header (Animated mint + skyblue gradient, no grid) ===== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	color: #0c1116;
	background:
		linear-gradient(120deg,
			#e6f9f0 0%,
			#d6f0e8 25%,
			#d8eff8 55%,
			#e2f4fa 80%,
			#e6f9f0 100%);
	background-size: 280% 100%;
	animation: ls-header-pan 18s ease-in-out infinite;
	border-bottom: 1px solid rgba(12, 17, 22, .06);
	box-shadow: 0 6px 24px rgba(22, 196, 127, .12);
	overflow: visible;
}

@keyframes ls-header-pan {
	0%   { background-position:   0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position:   0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header { animation: none; }
}

/* Header stripe pattern removed — pure solid background */
.site-header::before { display: none; }

.site-header::after {
	display: none;
}

.site-header__inner {
	max-width: var(--container-max);
	width: 100%;
	padding: 18px var(--section-pad-x);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}
.site-header .site-branding {
	justify-self: start;
}
.site-header .main-navigation {
	justify-self: center;
}
.site-header__cta {
	justify-self: end;
}

.site-header .site-branding__text {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	color: #fff;
	filter: none;
}

.site-header .site-branding__link {
	color: #fff;
}

.site-header .site-branding__mark svg {
	color: #fff;
	filter: none;
	transition: transform .3s ease, color .3s ease;
}

.site-branding__link:hover .site-branding__mark svg {
	color: #a78bfa;
	transform: rotate(-4deg) scale(1.05);
}

.site-header .main-navigation a {
	color: rgba(255, 255, 255, .92);
}

/* Purple gradient on hover and active item */
.site-header .main-navigation a:hover,
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a,
.site-header .main-navigation .current-menu-ancestor > a,
.site-header .main-navigation .current_page_ancestor > a {
	background: linear-gradient(180deg, #a78bfa 0%, #6366f1 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.site-header .main-navigation .menu > li > a::after {
	background: linear-gradient(90deg, #a78bfa, #6366f1);
}

.site-header .menu-toggle__bar { background: var(--color-text); }

.site-header .main-navigation .sub-menu {
	background: #0a0a0f;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}

.site-header .main-navigation .sub-menu a {
	color: rgba(255, 255, 255, .85);
}

.site-header .main-navigation .sub-menu a:hover {
	background: rgba(139, 92, 246, .15);
	background-clip: padding-box;
	-webkit-background-clip: padding-box;
	color: #a78bfa;
	-webkit-text-fill-color: #a78bfa;
}

/* "Let's Talk" pill CTA */
.site-header__cta {
	display: inline-flex;
	align-items: center;
}

.site-header .header-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	background: #fff;
	color: #000;
	font-weight: 600;
	font-size: 15px;
	border-radius: 999px;
	line-height: 1;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.site-header .header-cta-btn:hover,
.site-header .header-cta-btn:focus-visible {
	background: linear-gradient(135deg, #1ed692, #1bc5e8);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(22, 196, 127, .45);
}

@media (max-width: 768px) {
	.site-header__cta { margin-left: auto; }
	.site-header .header-cta-btn { padding: 10px 18px; font-size: 14px; }
}

/* Account for the WordPress admin bar so the sticky header sits below it */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

.site-branding__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
}

.site-branding__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}
.site-branding__mark svg { display: block; width: 36px; height: 36px; }
.site-branding__text { display: inline-block; line-height: 1; }

.site-branding__text {
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.main-navigation #primary-menu,
.main-navigation .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 32px;
	align-items: center;
}

.main-navigation .menu > li {
	position: relative;
}

.main-navigation a {
	font-size: 15px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: relative;
}

.main-navigation .menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
	border-radius: 2px;
}

.main-navigation .menu > li:hover > a::after,
.main-navigation .menu > li > a:focus-visible::after {
	transform: scaleX(1);
}

.main-navigation .menu-caret {
	font-size: 10px;
	transition: transform .2s ease;
	display: inline-block;
}

.main-navigation .menu-item-has-children:hover > a .menu-caret {
	transform: rotate(180deg);
}

.main-navigation .sub-menu {
	list-style: none;
	margin: 0;
	padding: 12px 0;
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 220px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 60;
}

.main-navigation .sub-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}

.main-navigation .sub-menu li {
	display: block;
}

.main-navigation .sub-menu a {
	display: block;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	white-space: nowrap;
}

.main-navigation .sub-menu a:hover {
	background: #f6f4fc;
	color: var(--color-accent-2);
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-text);
}

@media (max-width: 768px) {
	.menu-toggle { display: inline-flex; }
	.main-navigation #primary-menu,
	.main-navigation .menu {
		display: none;
		position: absolute;
		top: 100%;
		right: 24px;
		background: #fff;
		flex-direction: column;
		align-items: stretch;
		padding: 16px;
		border-radius: var(--radius);
		box-shadow: var(--shadow-md);
		min-width: 240px;
		gap: 4px;
	}
	.main-navigation.toggled #primary-menu,
	.main-navigation.toggled .menu { display: flex; }

	.main-navigation .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		box-shadow: none;
		padding: 0 0 0 12px;
		min-width: 0;
		background: transparent;
		border-radius: 0;
	}
	.main-navigation .sub-menu::before { display: none; }
	.main-navigation .sub-menu a { padding: 8px 12px; }
}

/* ===== Hero (Light mint + skyblue mesh) ===== */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 60% 50% at 15% 20%, rgba(22, 196, 127, .35), transparent 60%),
		radial-gradient(ellipse 55% 55% at 85% 25%, rgba(56, 189, 248, .35), transparent 60%),
		radial-gradient(ellipse 70% 60% at 20% 90%, rgba(14, 165, 233, .28), transparent 65%),
		radial-gradient(ellipse 60% 60% at 90% 90%, rgba(45, 212, 191, .28), transparent 65%),
		radial-gradient(ellipse 80% 70% at 50% 50%, rgba(22, 196, 127, .18), transparent 70%),
		linear-gradient(135deg, #f0faf5 0%, #e8f4fb 40%, #e0f4ee 100%);
	background-size: 240% 240%;
	animation: ls-bg-pan 22s ease-in-out infinite;
	padding: 72px 0 88px;
	color: #0c1116;
}

.hero .hero__title {
	color: #0c1116;
	text-shadow: none;
}

.hero .hero__title strong,
.hero .hero__title b {
	background: linear-gradient(90deg, #16c47f, #0bb5d6, #38bdf8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero p,
.hero .hero__desc {
	color: #2a333d;
}

.hero .button--dark {
	font-weight: 600;
}

.hero::before,
.hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .8;
	pointer-events: none;
	z-index: 0;
}

.hero::before {
	width: 480px;
	height: 480px;
	top: -140px;
	left: -120px;
	background: radial-gradient(circle, rgba(22, 196, 127, .45), rgba(45, 212, 191, .28) 50%, transparent 70%);
	animation: ls-blob 16s ease-in-out infinite;
	mix-blend-mode: multiply;
}

.hero::after {
	width: 540px;
	height: 540px;
	bottom: -200px;
	right: -160px;
	background: radial-gradient(circle, rgba(56, 189, 248, .45), rgba(14, 165, 233, .28) 50%, transparent 70%);
	animation: ls-blob 20s ease-in-out infinite reverse;
	mix-blend-mode: multiply;
}

.hero .button--dark {
	background: rgba(12, 17, 22, .92);
	color: #fff;
	border: 1px solid rgba(12, 17, 22, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.hero .button--dark:hover {
	background: linear-gradient(135deg, #16c47f, #0bb5d6, #38bdf8);
	border-color: transparent;
	box-shadow: 0 12px 32px rgba(22, 196, 127, .4);
}

.hero .button--dark::before {
	background: linear-gradient(135deg, #16c47f, #0bb5d6, #38bdf8);
}

.hero__inner { position: relative; z-index: 1; }

.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(22, 196, 127, .12);
	border: 1px solid rgba(22, 196, 127, .25);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #0fa968;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.hero__eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, #16c47f, #0bb5d6);
	box-shadow: 0 0 10px rgba(22, 196, 127, .7);
	animation: ls-pulse-dot 2s ease-in-out infinite;
}

@keyframes ls-pulse-dot {
	0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .6); }
	50%      { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); }
}

.hero__title {
	font-size: clamp(34px, 4.6vw, 54px);
	font-weight: 800;
	max-width: 600px;
	margin-bottom: 24px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.hero__eyebrow { margin-bottom: 18px; }

.hero__title::first-line {
	background: linear-gradient(90deg, #16c47f, #0bb5d6 50%, #38bdf8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__visual { position: relative; }

.hero__mockup {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .04);
	padding: 24px;
	transform: rotate(-1deg);
	animation: ls-float 6s ease-in-out infinite, ls-pulse-glow 5s ease-in-out infinite;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.hero__visual:hover .hero__mockup {
	animation-play-state: paused;
	transform: rotate(0deg) translateY(-8px) scale(1.02);
}

.hero__mockup-header {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--color-muted);
	margin-bottom: 12px;
}

.hero__mockup-score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-weight: 700;
	margin-bottom: 16px;
}

.hero__mockup-score strong { font-size: 56px; color: #f59e0b; }
.hero__mockup-score span { color: var(--color-muted); font-size: 18px; }

.hero__mockup-bar {
	height: 8px;
	border-radius: 4px;
	background: #f1f1f5;
	overflow: hidden;
	margin-bottom: 24px;
}

.hero__mockup-bar span {
	display: block;
	width: 64%;
	height: 100%;
	background: linear-gradient(90deg, #f97316, #f59e0b);
}

.hero__mockup-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.stat {
	border-radius: 10px;
	padding: 16px;
	color: #fff;
	text-align: left;
}

.stat--red { background: #ef4444; }
.stat--orange { background: #f59e0b; }
.stat--blue { background: #38bdf8; }

.stat__num {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.stat__label {
	display: block;
	font-size: 12px;
	margin-top: 6px;
	opacity: .9;
}

/* ===== Hero stack (animated marketing dashboards) ===== */
.hero-stack {
	position: relative;
	height: 520px;
	overflow: hidden;
	border-radius: 24px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.hero-stack__track {
	display: flex;
	flex-direction: column;
	gap: 20px;
	animation: hero-stack-scroll 32s linear infinite;
	will-change: transform;
}

.hero-stack:hover .hero-stack__track { animation-play-state: paused; }

@keyframes hero-stack-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

/* Dashboard card base */
.dash-card {
	background: #fff;
	border-radius: 16px;
	padding: 18px 20px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08);
	flex-shrink: 0;
	color: #1a1a2e;
	font-family: var(--font-sans);
	position: relative;
	overflow: hidden;
	animation: dash-float 7s ease-in-out infinite;
	transform-origin: center center;
}

/* Each card type bobs at a slightly different rhythm so they don't sync */
.dash-card--google   { animation-duration: 6.5s; }
.dash-card--linkedin { animation-duration: 7.5s; animation-delay: -1s; }
.dash-card--klaviyo  { animation-duration: 8s;   animation-delay: -2s; }
.dash-card--meta     { animation-duration: 7s;   animation-delay: -3s; }
.dash-card--score    { animation-duration: 8.5s; animation-delay: -1.5s; }

@keyframes dash-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
	25%      { transform: translate3d(-3px, -4px, 0) rotate(-.3deg); }
	50%      { transform: translate3d(0, -6px, 0) rotate(.2deg); }
	75%      { transform: translate3d(3px, -3px, 0) rotate(.3deg); }
}

/* Card scanline shimmer — a faint diagonal sweep crossing each card */
.dash-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(115deg, transparent 0%, rgba(99, 102, 241, .08) 45%, rgba(34, 211, 238, .12) 50%, rgba(99, 102, 241, .08) 55%, transparent 100%);
	animation: dash-shimmer 6s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

.dash-card--linkedin::before { animation-delay: -1.2s; }
.dash-card--klaviyo::before  { animation-delay: -2.4s; }
.dash-card--meta::before     { animation-delay: -3.6s; }
.dash-card--score::before    { animation-delay: -4.8s; }

@keyframes dash-shimmer {
	0%   { transform: translateX(0); }
	60%  { transform: translateX(280%); }
	100% { transform: translateX(280%); }
}

.dash-card > * { position: relative; z-index: 2; }

.dash-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.dash-card__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: #1a1a2e;
}

.dash-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
}

.dash-card__icon--google   { background: linear-gradient(135deg, #4285f4, #34a853); }
.dash-card__icon--linkedin { background: #0a66c2; font-size: 11px; }
.dash-card__icon--klaviyo  { background: linear-gradient(135deg, #1d2c50, #4a5fc1); }
.dash-card__icon--meta     { background: linear-gradient(135deg, #0866ff, #6366f1); }
.dash-card__icon--score    { background: linear-gradient(135deg, #6366f1, #22d3ee); font-size: 9px; }

.dash-card__pill {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	background: #f1f5f9;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dash-card__pill--live {
	background: rgba(16, 185, 129, .12);
	color: #059669;
}

.dash-card__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, .5);
	animation: dash-dot 1.6s ease-in-out infinite;
}

@keyframes dash-dot {
	0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
	50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.dash-card__metric {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.dash-card__metric strong {
	font-size: 26px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1;
	letter-spacing: -0.01em;
	display: inline-block;
	animation: dash-count-pulse 3.2s ease-in-out infinite;
}

@keyframes dash-count-pulse {
	0%, 100% { transform: scale(1); color: #0f172a; }
	50%      { transform: scale(1.04); color: #4338ca; }
}

.dash-card__delta {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
}

.dash-card__delta--up { color: #059669; }

.dash-card__chart {
	display: block;
	width: 100%;
	height: 60px;
	margin-bottom: 14px;
}

/* Animated draw + tracer dot for the Google line chart */
.dash-card__chart path[stroke] {
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: dash-draw 4s ease-out infinite;
}

@keyframes dash-draw {
	0%   { stroke-dashoffset: 600; }
	60%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

.dash-card__chart path[fill]:not([stroke]) {
	opacity: 0;
	animation: dash-fill-fade 4s ease-out infinite;
}

@keyframes dash-fill-fade {
	0%, 50% { opacity: 0; }
	75%     { opacity: 1; }
	100%    { opacity: 1; }
}

.dash-card__stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid #f1f5f9;
}

.dash-card__stats > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dash-card__stats span {
	font-size: 10px;
	color: #94a3b8;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.dash-card__stats strong {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}

/* LinkedIn-style bars */
.dash-card__bars {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 60px;
	gap: 6px;
	margin-bottom: 14px;
}

.dash-card__bar {
	flex: 1;
	background: linear-gradient(180deg, #0a66c2, #38bdf8);
	border-radius: 4px 4px 0 0;
	height: var(--h);
	position: relative;
	min-height: 8px;
	transform-origin: bottom;
	animation: dash-bar-breathe 3.2s ease-in-out infinite;
}

.dash-card__bar:nth-child(1) { animation-delay: 0s; }
.dash-card__bar:nth-child(2) { animation-delay: -.4s; }
.dash-card__bar:nth-child(3) { animation-delay: -.8s; }
.dash-card__bar:nth-child(4) { animation-delay: -1.2s; }
.dash-card__bar:nth-child(5) { animation-delay: -1.6s; }
.dash-card__bar:nth-child(6) { animation-delay: -2s; }
.dash-card__bar:nth-child(7) { animation-delay: -2.4s; }

@keyframes dash-bar-breathe {
	0%, 100% { transform: scaleY(1); filter: brightness(1); }
	50%      { transform: scaleY(.78); filter: brightness(1.15); }
}

/* Glow at the top of each bar that travels */
.dash-card__bar::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(255, 255, 255, .65);
	border-radius: 4px 4px 0 0;
	box-shadow: 0 0 8px rgba(56, 189, 248, .8);
}

.dash-card__bar span {
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	color: #94a3b8;
	font-weight: 600;
}

/* Klaviyo-style email rows */
.dash-card__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

.dash-card__row {
	display: grid;
	grid-template-columns: 110px 1fr 36px;
	align-items: center;
	gap: 10px;
	font-size: 12px;
}

.dash-card__row-label {
	font-weight: 600;
	color: #475569;
}

.dash-card__row-bar {
	display: block;
	height: 6px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
}

.dash-card__row-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #4a5fc1, #6366f1, #818cf8, #4a5fc1);
	background-size: 300% 100%;
	border-radius: 999px;
	position: relative;
	animation: dash-row-flow 3s linear infinite;
}

@keyframes dash-row-flow {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

.dash-card__row-bar > span::after {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 30%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
	border-radius: 999px;
	animation: dash-row-shimmer 2.4s ease-in-out infinite;
}

@keyframes dash-row-shimmer {
	0%   { left: -40%; }
	60%  { left: 110%; }
	100% { left: 110%; }
}

.dash-card__row-val {
	font-size: 12px;
	font-weight: 700;
	color: #0f172a;
	text-align: right;
}

/* Meta-style donut */
.dash-card__donut {
	position: relative;
	width: 110px;
	height: 110px;
	margin: 0 auto 14px;
}

.donut {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	animation: dash-donut-spin 14s linear infinite;
}

@keyframes dash-donut-spin {
	from { transform: rotate(-90deg); }
	to   { transform: rotate(270deg); }
}

.donut__bg {
	fill: none;
	stroke: #f1f5f9;
	stroke-width: 3.4;
}

.donut__fg {
	fill: none;
	stroke: #0866ff;
	stroke-width: 3.4;
	stroke-linecap: round;
	animation: dash-donut-fill 4s ease-in-out infinite;
	filter: drop-shadow(0 0 6px rgba(8, 102, 255, .55));
}

@keyframes dash-donut-fill {
	0%   { stroke-dasharray: 0 100; stroke: #0866ff; }
	50%  { stroke-dasharray: 78 100; stroke: #6366f1; }
	100% { stroke-dasharray: 0 100; stroke: #0866ff; }
}

.dash-card__donut-text strong {
	animation: dash-count-pulse 3s ease-in-out infinite;
}

.dash-card__donut-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.dash-card__donut-text strong {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
}

.dash-card__donut-text span {
	font-size: 10px;
	color: #64748b;
	font-weight: 600;
}

/* Site audit (score) card specifics */
.dash-card__score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 12px;
}

.dash-card__score strong {
	font-size: 38px;
	font-weight: 800;
	color: #f59e0b;
	line-height: 1;
}

.dash-card__score span {
	font-size: 13px;
	color: #94a3b8;
	font-weight: 600;
}

.dash-card__progress {
	height: 6px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 14px;
}

.dash-card__progress > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #f97316, #f59e0b, #fbbf24, #f97316);
	background-size: 300% 100%;
	position: relative;
	animation: dash-row-flow 2.5s linear infinite;
}

.dash-card__progress > span::after {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 30%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
	animation: dash-row-shimmer 2.4s ease-in-out infinite;
}

.dash-card__score strong {
	display: inline-block;
	animation: dash-count-pulse 2.6s ease-in-out infinite;
}

.stat-pill strong {
	display: inline-block;
	animation: dash-stat-tick 2.8s ease-in-out infinite;
}

.stat-pill:nth-child(2) strong { animation-delay: -.7s; }
.stat-pill:nth-child(3) strong { animation-delay: -1.4s; }

@keyframes dash-stat-tick {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}

.dash-card__stats--3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	border-top: 0;
	padding-top: 0;
}

.stat-pill {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 10px;
	color: #fff;
}

.stat-pill strong { font-size: 18px; font-weight: 800; line-height: 1; }
.stat-pill span   { font-size: 10px; opacity: .9; font-weight: 600; }

.stat-pill--red    { background: linear-gradient(135deg, #ef4444, #f87171); }
.stat-pill--orange { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.stat-pill--blue   { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }

@media (max-width: 900px) {
	.hero { padding: 56px 0 80px; }
	.hero__inner { grid-template-columns: 1fr; }
	.hero-stack { height: 420px; }
}

/* ===== Clients ===== */
.clients {
	padding: 36px 0 28px;
	background:
		radial-gradient(ellipse 70% 80% at 0% 50%, rgba(186, 230, 253, .55), transparent 60%),
		radial-gradient(ellipse 60% 80% at 100% 50%, rgba(195, 220, 255, .55), transparent 60%),
		radial-gradient(ellipse 50% 80% at 50% 50%, rgba(220, 200, 255, .35), transparent 70%),
		#fff;
}

.clients__carousel {
	position: relative;
	overflow: hidden;
}

.clients__track {
	display: flex;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

.clients__slide {
	flex: 0 0 20%;
	max-width: 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	min-height: 90px;
}

.clients__slide img {
	max-height: 80px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: none;
	transition: transform .3s ease;
}

.clients__slide:hover img { transform: scale(1.05); }

.clients__placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 70px;
	padding: 14px 18px;
	border: 1px solid rgba(99, 102, 241, .12);
	border-radius: 12px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .65));
	color: #555;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
	transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
}

.clients__slide:hover .clients__placeholder {
	transform: translateY(-3px);
	color: var(--color-accent-2);
	box-shadow: 0 12px 24px rgba(99, 102, 241, .12);
}

.clients__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.clients__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cfcfd6;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.clients__dot:hover { background: #9a9aa3; }

.clients__dot.is-active {
	background: var(--color-dark);
	transform: scale(1.2);
}

@media (max-width: 900px) {
	.clients__slide { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 600px) {
	.clients__slide { flex: 0 0 50%; max-width: 50%; min-height: 90px; }
	.clients__slide img { max-height: 60px; }
}

/* ===== Section Title ===== */
.section-title {
	text-align: center;
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 800;
	margin: 0 0 36px;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

/* ===== Spectrum ===== */
.spectrum {
	padding: 72px 0;
	background:
		radial-gradient(ellipse 60% 40% at 50% 0%, rgba(199, 210, 254, .35), transparent 70%),
		radial-gradient(ellipse 50% 40% at 90% 0%, rgba(180, 200, 255, .35), transparent 70%),
		#fff;
}

.spectrum__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
	position: relative;
	overflow: hidden;
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0), rgba(99, 102, 241, 0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .35s ease, background .35s ease;
	pointer-events: none;
}

.card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(99, 102, 241, .12), 0 4px 12px rgba(0, 0, 0, .06);
	border-color: transparent;
}

.card:hover::before {
	opacity: 1;
	background: linear-gradient(135deg, rgba(99, 102, 241, .8), rgba(139, 92, 246, .8));
}

.card:hover .card__icon {
	transform: scale(1.15) rotate(-6deg);
}

.card__icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
	margin-bottom: 14px;
	opacity: .9;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
	box-shadow: 0 6px 16px rgba(99, 102, 241, .25);
}

.card__title { margin-bottom: 8px; }

.card__title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }

.card__desc { font-size: 14px; color: var(--color-muted); margin: 0; }

.card--cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 24px;
}

.card--cta:hover { transform: none; box-shadow: none; }

.card__cta-text { font-size: 18px; font-weight: 500; margin: 0; }

.card--cta .button { align-self: flex-start; }

@media (max-width: 900px) {
	.spectrum { padding: 64px 0; }
	.spectrum__grid { grid-template-columns: 1fr; }
}

/* ===== Services ===== */
.services {
	padding: 72px 0;
	background:
		linear-gradient(135deg, rgba(220, 230, 250, .25), rgba(220, 220, 255, .25)),
		#fff;
	background-size: 200% 200%;
	animation: ls-bg-pan 22s ease-in-out infinite;
}

.services__inner {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 48px;
	align-items: start;
}

.eyebrow {
	display: inline-block;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 12px;
}

.services__title {
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 700;
	margin-bottom: 24px;
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.service-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 22px 20px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .04);
	border: 1px solid var(--color-border);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background .35s ease;
	cursor: default;
}

.service-card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 24px 48px rgba(99, 102, 241, .14);
	background: linear-gradient(135deg, #fff 0%, #faf5ff 100%);
}

.service-card:hover .service-card__icon {
	transform: scale(1.2) rotate(8deg);
}

.service-card__icon { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }

.service-card--feature {
	grid-column: span 3;
	display: flex;
	align-items: center;
	gap: 24px;
}

.service-card--feature .service-card__title { margin: 0; }

.service-card__icon {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
	margin-bottom: 12px;
	opacity: .85;
}

.service-card__title { margin-bottom: 6px; }

.service-card--feature .service-card__icon { margin-bottom: 0; flex: none; }

.service-card__title { font-size: 17px; font-weight: 700; margin-bottom: 10px; }

.service-card__desc { font-size: 14px; color: var(--color-muted); margin: 0; }

@media (max-width: 1000px) {
	.services { padding: 64px 0; }
	.services__inner { grid-template-columns: 1fr; gap: 32px; }
	.services__grid { grid-template-columns: repeat(2, 1fr); }
	.service-card--feature { grid-column: span 2; }
}

@media (max-width: 600px) {
	.services__grid { grid-template-columns: 1fr; }
	.service-card--feature { grid-column: span 1; flex-direction: column; align-items: flex-start; }
	.service-card--feature .service-card__icon { margin-bottom: 16px; }
}

/* ===== Blog feed ===== */
.blog-feed { padding: 72px 0; }

.blog-feed__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.blog-feed__card {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
}

.blog-feed__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.blog-feed__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

.blog-feed__title { font-size: 18px; font-weight: 700; margin: 0; }

.blog-feed__excerpt { font-size: 14px; color: var(--color-muted); margin: 0; flex: 1; }

.blog-feed__more {
	align-self: flex-start;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
}

.blog-feed__more:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

.blog-feed__meta {
	font-size: 12px;
	color: var(--color-muted);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 12px;
	border-top: 1px solid var(--color-border);
}

.blog-feed__meta a { color: var(--color-muted); }

.blog-feed__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--color-muted);
}

@media (max-width: 900px) {
	.blog-feed { padding: 64px 0; }
	.blog-feed__grid { grid-template-columns: 1fr; }
}

/* ===== Blog index / cards ===== */
.blog-index { padding: 80px 0; background: #fff; }

.blog-index__header { margin-bottom: 40px; text-align: center; }

.blog-index__title { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; }

.blog-index__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.blog-index__empty { text-align: center; color: var(--color-muted); padding: 60px 0; }

.blog-card {
	background: #f1eef9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(60, 30, 120, .12);
}

.blog-card__thumb {
	display: block;
	overflow: hidden;
}

.blog-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .35s ease;
}

.blog-card:hover .blog-card__thumb img { transform: scale(1.04); }

.blog-card__body {
	padding: 24px 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.blog-card__cat {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #4d3aa3;
}

.blog-card__title { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; }

.blog-card__title a { color: #1a1a2e; }

.blog-card__title a:hover { color: var(--color-accent-2); }

.blog-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #555;
}

.blog-card__avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .08);
}

.blog-card__sep { opacity: .5; }

.blog-card__excerpt {
	color: #444;
	font-size: 15px;
	margin: 0;
	flex: 1;
}

.blog-card__more {
	align-self: flex-start;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	color: #1a1a2e;
	border-bottom: 1px solid rgba(26, 26, 46, .25);
	padding-bottom: 4px;
}

.blog-card__more:hover { color: var(--color-accent-2); border-color: var(--color-accent-2); }

@media (max-width: 1000px) {
	.blog-index__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.blog-index__grid { grid-template-columns: 1fr; }
}

/* ===== Service page template ===== */
.svc-hero {
	padding: 80px 0 60px;
	background: #fff;
	overflow: hidden;
}

.svc-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.svc-hero__title {
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 800;
	line-height: 1.05;
	margin-bottom: 24px;
}

.svc-hero__desc {
	font-size: 17px;
	color: #444;
	line-height: 1.7;
	margin-bottom: 32px;
	max-width: 540px;
}

.svc-hero__visual {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.svc-hero__visual img {
	max-width: 100%;
	height: auto;
}

.svc-hero__phone {
	width: 280px;
	height: 380px;
	border-radius: 36px;
	background:
		radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .25), transparent 60%),
		linear-gradient(135deg, #2b2b3a, #15151f);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
	position: relative;
}

.svc-hero__phone::before {
	content: "";
	position: absolute;
	top: 16px; left: 16px; right: 16px; bottom: 16px;
	border-radius: 24px;
	background: linear-gradient(135deg, #5b3aa6 0%, #1a1a2e 100%);
}

.svc-split { padding: 80px 0; background: #fff; }

.svc-split__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.svc-split--reverse .svc-split__visual { order: 2; }

.svc-split__title {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	margin-bottom: 20px;
	line-height: 1.2;
}

.svc-split__copy p { color: #444; margin-bottom: 14px; line-height: 1.7; }

.svc-split__note { color: #555; font-style: italic; margin-top: 16px; }

.svc-prospect-card {
	background: #fff;
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .08);
	max-width: 460px;
	margin: 0 auto;
	position: relative;
	background:
		radial-gradient(circle at 0% 0%, rgba(199, 210, 254, .35), transparent 60%),
		radial-gradient(circle at 100% 0%, rgba(200, 200, 255, .35), transparent 60%),
		#fff;
}

.svc-prospect-card__top {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.svc-prospect-card__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #c7d2fe, #a78bfa);
}

.svc-prospect-card__pill {
	background: #1a1a2e;
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
}

.svc-prospect-card__body strong { font-size: 18px; display: block; }
.svc-prospect-card__role { color: #666; font-size: 14px; }

.svc-prospect-card__score {
	margin-top: 12px;
	font-size: 14px;
	display: flex;
	gap: 6px;
}

.svc-prospect-card__score b { color: #16a34a; }

.svc-prospect-card__body p {
	margin: 16px 0 0;
	font-size: 14px;
	color: #444;
	line-height: 1.6;
}

.svc-tablet {
	width: 100%;
	max-width: 460px;
	height: 360px;
	border-radius: 16px;
	background:
		linear-gradient(135deg, #f1f1f5 0%, #e5e7eb 100%);
	margin: 0 auto;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
}

.svc-steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: 24px 0;
	display: grid;
	gap: 16px;
}

.svc-steps li {
	counter-increment: step;
	padding-left: 40px;
	position: relative;
	color: #444;
	line-height: 1.6;
}

.svc-steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}

.svc-initiatives { padding: 80px 0; background: #fff; }

.svc-initiatives .section-title { line-height: 1.25; }

.svc-initiatives__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.svc-initiatives__card {
	padding: 8px 0;
}

.svc-initiatives__icon {
	width: 28px;
	height: 28px;
	background: #444;
	mask: linear-gradient(#000, #000);
	-webkit-mask: linear-gradient(#000, #000);
	border-radius: 4px;
	margin-bottom: 16px;
	opacity: .55;
}

.svc-initiatives__title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }

.svc-initiatives__desc { color: #555; font-size: 14px; line-height: 1.6; margin: 0; }

.svc-initiatives__card--cta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
}

.svc-initiatives__card--cta p { font-size: 18px; font-weight: 600; margin: 0; }

.svc-initiatives__card--cta .button { align-self: flex-start; }

.svc-action {
	padding: 80px 0;
	background: #fff;
	text-align: center;
}

.svc-action__title {
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 800;
	margin-bottom: 16px;
	line-height: 1.2;
}

.svc-action__desc { color: #555; margin-bottom: 32px; }

.svc-extra { padding: 60px 0; background: #fff; }
.svc-extra__content {
	max-width: 760px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
	color: #333;
}
.svc-extra__content > * + * { margin-top: 1em; }

@media (max-width: 900px) {
	.svc-hero__inner,
	.svc-split__inner { grid-template-columns: 1fr; gap: 32px; }
	.svc-split--reverse .svc-split__visual { order: 0; }
	.svc-initiatives__grid { grid-template-columns: 1fr; }
}

/* ===== [svc_row] shortcode + svc-body content area ===== */
.svc-body { padding: 56px 0; background: #fff; }

.svc-body__content {
	max-width: 980px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
	color: #222;
}

.svc-body__content > * + * { margin-top: 1em; }

.svc-row { padding: 64px 0; background: #fff; }
.svc-row--alt { background: #f5f5f7; }

.svc-row__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.svc-row--reverse .svc-row__visual { order: 2; }
.svc-row--reverse .svc-row__copy   { order: 1; }

.svc-row__title {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	margin-bottom: 20px;
	line-height: 1.2;
}

.svc-row__body p { color: #444; line-height: 1.7; }

.svc-row__visual img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
}

.svc-row__art {
	width: 100%;
	max-width: 480px;
	height: 360px;
	margin: 0 auto;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .08);
	background: #f4f6fb;
}

.svc-row__art--dev {
	background:
		radial-gradient(circle at 30% 30%, rgba(99, 102, 241, .25), transparent 60%),
		radial-gradient(circle at 80% 70%, rgba(56, 189, 248, .35), transparent 60%),
		linear-gradient(135deg, #fff, #eef0fb);
}

.svc-row__art--handshake {
	background:
		radial-gradient(circle at 30% 40%, rgba(120, 90, 60, .35), transparent 60%),
		linear-gradient(135deg, #f3e8d8, #e7d8c0);
}

.svc-row__art--team {
	background:
		radial-gradient(circle at 50% 50%, rgba(60, 80, 100, .35), transparent 70%),
		linear-gradient(135deg, #2a2a3a, #1a1a2e);
}

.svc-row__art--classroom {
	background:
		radial-gradient(circle at 30% 50%, rgba(200, 150, 100, .4), transparent 60%),
		linear-gradient(135deg, #f1e4d3, #e3d2bc);
}

.svc-row__art--desk {
	background:
		radial-gradient(circle at 50% 40%, rgba(180, 180, 180, .4), transparent 60%),
		linear-gradient(135deg, #f5f5f7, #e5e7eb);
}

.svc-hero__dev-art {
	width: 100%;
	max-width: 460px;
	height: 460px;
	margin: 0 auto;
	border-radius: 20px;
	background:
		radial-gradient(circle at 30% 30%, rgba(99, 102, 241, .25), transparent 55%),
		radial-gradient(circle at 75% 60%, rgba(56, 189, 248, .35), transparent 55%),
		radial-gradient(circle at 50% 90%, rgba(99, 102, 241, .25), transparent 55%),
		linear-gradient(135deg, #fff, #f3f0ff);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .08);
}

@media (max-width: 900px) {
	.svc-row__inner { grid-template-columns: 1fr; gap: 28px; }
	.svc-row--reverse .svc-row__visual,
	.svc-row--reverse .svc-row__copy { order: 0; }
}

/* ===== Contact page ===== */
.ct-hero {
	padding: 80px 0;
	background:
		radial-gradient(circle at 0% 50%, rgba(199, 210, 254, .35), transparent 60%),
		radial-gradient(circle at 100% 50%, rgba(180, 200, 255, .45), transparent 60%),
		linear-gradient(180deg, #fafaff 0%, #fff 100%);
}

.ct-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
}

.ct-hero__title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 20px;
}

.ct-hero__desc { font-size: 17px; color: #444; line-height: 1.7; max-width: 540px; }

.ct-hero__form {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .1);
	padding: 28px;
}

.ct-form__title { font-size: 22px; font-weight: 800; margin-bottom: 18px; }

.ct-form { display: grid; gap: 14px; }

.ct-form__field { display: grid; gap: 6px; font-size: 13px; color: #333; }
.ct-form__field em { color: #dc2626; font-style: normal; }

.ct-form__field input,
.ct-form__field select {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--color-border);
	font: inherit;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.ct-form__field input:focus,
.ct-form__field select:focus {
	outline: none;
	border-color: var(--color-accent-2);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.ct-form__submit {
	margin-top: 6px;
	padding: 12px 22px;
	border-radius: 10px;
	border: 0;
	background: var(--color-dark);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.ct-form__submit:hover { background: #222; }

.ct-split { padding: 80px 0; background: #fff; }
.ct-split__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.ct-split--reverse .ct-split__visual { order: 2; }
.ct-split--reverse .ct-split__copy   { order: 1; }

.ct-split__title {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	margin-bottom: 16px;
	line-height: 1.2;
}

.ct-split__copy p { color: #444; line-height: 1.7; }

.ct-stack {
	width: 100%;
	max-width: 480px;
	height: 360px;
	margin: 0 auto;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .08);
}

.ct-stack--plan {
	background:
		radial-gradient(circle at 0% 0%, rgba(199, 210, 254, .4), transparent 60%),
		linear-gradient(135deg, #fff, #faf6ff);
}

.ct-stack--globe {
	background:
		radial-gradient(circle at 50% 50%, rgba(180, 200, 255, .55), transparent 70%),
		linear-gradient(135deg, #fff5e6, #fff);
}

.ct-stack--journey {
	background:
		radial-gradient(circle at 0% 50%, rgba(220, 230, 250, .4), transparent 60%),
		linear-gradient(135deg, #fff, #f5f0ff);
}

.ct-grid { padding: 80px 0; background: #fff; }

.ct-grid__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 32px;
}

.ct-grid__cell { padding: 8px 0; }

.ct-grid__icon { font-size: 26px; margin-bottom: 12px; }

.ct-grid__title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }

.ct-grid__desc { color: #555; font-size: 14px; line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
	.ct-hero__inner,
	.ct-split__inner { grid-template-columns: 1fr; gap: 32px; }
	.ct-split--reverse .ct-split__visual,
	.ct-split--reverse .ct-split__copy { order: 0; }
	.ct-grid__items { grid-template-columns: 1fr; }
}

/* ===== Single post ===== */
.post-hero {
	background: #eaf0f5;
	padding: 64px 0 80px;
}

.post-hero__crumbs {
	font-size: 14px;
	color: #555;
	margin-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.post-hero__crumbs a {
	color: #555;
	text-decoration: underline;
}

.post-hero__crumbs a:hover { color: var(--color-accent-2); }

.post-hero__current { color: var(--color-text); }

.post-hero__cat {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #1a1a2e;
	margin-bottom: 12px;
}

.post-hero__title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 18px;
	max-width: 900px;
}

.post-hero__meta {
	font-size: 14px;
	color: #555;
	display: flex;
	gap: 8px;
	align-items: center;
}

.post-hero__sep { opacity: .6; }

.post-page { padding: 56px 0 80px; background: #fff; }

.post-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.post-toc {
	position: sticky;
	top: 96px;
	font-size: 15px;
}

.post-toc__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 14px;
}

.post-toc__list {
	list-style: disc;
	padding-left: 18px;
	margin: 0;
	display: grid;
	gap: 8px;
}

.post-toc__list a {
	color: var(--color-muted);
	text-decoration: none;
}

.post-toc__list a:hover,
.post-toc__list a.is-active {
	color: var(--color-accent-2);
}

.post-toc__list li.is-h3 { padding-left: 12px; list-style: circle; }

.post-toc__empty { color: var(--color-muted); font-size: 14px; }

.post-article { min-width: 0; }

.post-article__thumb {
	margin: 0 0 32px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.post-article__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.post-article__content {
	font-size: 17px;
	line-height: 1.75;
	color: #222;
}

.post-article__content > * + * { margin-top: 1em; }

.post-article__content h2 {
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 800;
	margin: 2em 0 .6em;
	line-height: 1.25;
	scroll-margin-top: 96px;
}

.post-article__content h3 {
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	margin: 1.6em 0 .5em;
	scroll-margin-top: 96px;
}

.post-article__content a { color: var(--color-accent-2); text-decoration: underline; }

.post-article__content blockquote {
	border-left: 4px solid var(--color-accent-2);
	background: #f6f4fc;
	padding: 16px 20px;
	margin: 24px 0;
	border-radius: 0 12px 12px 0;
	color: #333;
	font-style: italic;
}

.post-article__content ul,
.post-article__content ol { padding-left: 22px; }

.post-article__content li + li { margin-top: 6px; }

.post-article__content img { border-radius: 12px; }

.post-article__content figure { margin: 1.5em 0; }

.post-article__content code {
	background: #f1f1f5;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .9em;
}

.post-article__content pre {
	background: #1a1a2e;
	color: #f5f5f7;
	padding: 16px;
	border-radius: 12px;
	overflow-x: auto;
}

.post-article__content pre code { background: transparent; padding: 0; color: inherit; }

.post-article__footer {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}

.post-author {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 20px;
	background: #f7f6fb;
	border-radius: var(--radius-lg);
}

.post-author__avatar { border-radius: 50%; }

.post-author__name { font-weight: 700; display: block; }

.post-author__bio { margin: 4px 0 0; color: var(--color-muted); font-size: 14px; }

.post-tags {
	margin-top: 20px;
	font-size: 14px;
	color: var(--color-muted);
}

.post-tags a {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	margin: 4px 4px 0 0;
	font-size: 13px;
	color: var(--color-text);
}

.post-tags a:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
	font-size: 14px;
}

.post-nav a { color: var(--color-text); }

.post-nav a:hover { color: var(--color-accent-2); }

/* Back to top */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 40;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

@media (max-width: 900px) {
	.post-layout { grid-template-columns: 1fr; gap: 24px; }
	.post-toc { position: static; padding: 16px; background: #f6f4fc; border-radius: var(--radius); }
}

/* ===== Empower (Dark mesh) ===== */
.empower {
	padding: 128px 0;
	background:
		radial-gradient(ellipse 55% 70% at 10% 50%, rgba(99, 102, 241, .45), transparent 60%),
		radial-gradient(ellipse 55% 70% at 90% 50%, rgba(14, 165, 233, .45), transparent 60%),
		radial-gradient(ellipse 70% 60% at 50% 100%, rgba(79, 70, 229, .35), transparent 70%),
		linear-gradient(135deg, #0a0a1f 0%, #1e1b4b 50%, #0c1929 100%);
	background-size: 200% 200%;
	animation: ls-bg-pan 60s ease-in-out infinite;
	text-align: center;
	position: relative;
	overflow: hidden;
	color: #f8fafc;
}

.empower::before {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(99, 102, 241, .45), transparent 70%);
	filter: blur(90px);
	pointer-events: none;
	z-index: 0;
	mix-blend-mode: screen;
}

.empower > .container { position: relative; z-index: 1; }

.empower .empower__title {
	background: linear-gradient(90deg, #818cf8, #6366f1, #38bdf8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 800;
	filter: drop-shadow(0 0 24px rgba(99, 102, 241, .4));
}

.empower .empower__desc {
	color: rgba(255, 255, 255, .9);
	font-size: 18px;
	line-height: 1.6;
	max-width: 640px;
	margin: 0 auto 40px;
}

.empower .button--dark {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.empower .button--dark::before {
	background: linear-gradient(135deg, #6366f1, #8b5cf6, #38bdf8);
}

.empower .button--dark:hover {
	border-color: transparent;
	box-shadow: 0 16px 40px rgba(99, 102, 241, .5);
}

.empower__title {
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	margin-bottom: 24px;
}

.empower__desc { font-size: 17px; color: var(--color-muted); margin-bottom: 32px; }

/* ===== Footer (Dark, unique) ===== */
.site-footer {
	position: relative;
	background:
		radial-gradient(ellipse 60% 80% at 0% 0%, rgba(139, 92, 246, .25), transparent 60%),
		radial-gradient(ellipse 60% 80% at 100% 100%, rgba(14, 165, 233, .25), transparent 60%),
		radial-gradient(ellipse 80% 60% at 50% 100%, rgba(34, 211, 238, .2), transparent 70%),
		linear-gradient(180deg, #0a0a1f 0%, #050510 100%);
	color: rgba(255, 255, 255, .82);
	overflow: hidden;
	border-top: 0;
}

.site-footer::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: linear-gradient(90deg, #22d3ee 0%, #a78bfa 33%, #8b5cf6 66%, #38bdf8 100%);
	background-size: 200% 100%;
	animation: ls-bg-pan 8s linear infinite;
}

.site-footer::after {
	content: "";
	position: absolute;
	width: 600px;
	height: 600px;
	right: -200px;
	top: -200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(139, 92, 246, .15), transparent 70%);
	filter: blur(80px);
	pointer-events: none;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 56px;
	padding: 88px 24px 64px;
	position: relative;
	z-index: 1;
}

.site-footer__brand { display: flex; flex-direction: column; }

.site-footer__brand .site-branding__link {
	margin-bottom: 80px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.site-footer__brand .site-branding__text {
	background: linear-gradient(90deg, #22d3ee, #a78bfa, #38bdf8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 12px rgba(139, 92, 246, .3));
}

.site-footer__brand .site-branding__mark svg {
	filter: drop-shadow(0 0 10px rgba(34, 211, 238, .4));
}

.site-footer__tagline {
	color: rgba(255, 255, 255, .65);
	max-width: 360px;
	margin: 0;
	line-height: 1.7;
}

.site-footer__heading {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 24px;
	background: linear-gradient(90deg, #22d3ee, #a78bfa);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}

.site-footer__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 14px;
}

.site-footer__list a {
	color: rgba(255, 255, 255, .68);
	font-size: 15px;
	position: relative;
	transition: color .25s ease, padding-left .25s ease;
}

.site-footer__list a::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 0;
	height: 1px;
	background: linear-gradient(90deg, #22d3ee, #38bdf8);
	transition: width .25s ease;
	transform: translateY(-50%);
}

.site-footer__list a:hover {
	color: #fff;
	padding-left: 18px;
}

.site-footer__list a:hover::before {
	width: 12px;
}

.site-footer__phone {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 0;
	font-size: 15px;
}

.site-footer__phone a {
	color: rgba(255, 255, 255, .9);
	font-weight: 600;
	transition: color .25s ease;
}

.site-footer__phone a:hover { color: #fff; }

.site-footer__phone-icon {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #06b6d4, #8b5cf6, #38bdf8);
	color: #fff;
	font-size: 16px;
	box-shadow: 0 8px 20px rgba(139, 92, 246, .4);
	animation: ls-pulse-glow 3s ease-in-out infinite;
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 24px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	text-align: center;
	position: relative;
	z-index: 1;
}

.site-info p { margin: 0; }

.site-info a {
	color: rgba(255, 255, 255, .8);
	transition: color .25s ease;
}

.site-info a:hover { color: #22d3ee; }

@media (max-width: 900px) {
	.site-footer__inner { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px 48px; }
	.site-footer__brand .site-branding__link { margin-bottom: 24px; }
}

/* ===== Default page/post layout (non-front-page) ===== */
.site-content {
	padding: 48px 0;
}

/* Front page (and any page that uses a full-bleed hero) renders its own
   spacing — no white band between the header and the hero. */
body.home .site-content,
body.front-page .site-content,
.site-content:has(> #primary > .hero--tv:first-child) {
	padding: 0;
}

.site-main:not(.front-page) {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
}

.entry-header { margin-bottom: 24px; }

.entry-title { font-size: clamp(28px, 3vw, 40px); font-weight: 700; }

.entry-meta { color: var(--color-muted); font-size: 14px; margin-top: 8px; }

.entry-content { font-size: 17px; line-height: 1.7; }

.entry-content a { color: var(--color-accent-2); text-decoration: underline; }

.post-thumbnail { margin: 16px 0 24px; border-radius: var(--radius-lg); overflow: hidden; }

.page-header { margin-bottom: 32px; }

.page-title { font-size: clamp(28px, 3vw, 40px); font-weight: 700; }

/* 404 */
.error-404 { text-align: center; max-width: 640px; margin: 64px auto; }

.error-404 .page-title { margin-bottom: 16px; }

.error-404-actions { margin: 24px 0; }

/* Search form */
.search-form {
	display: inline-flex;
	gap: 8px;
	max-width: 480px;
	width: 100%;
	margin: 16px auto;
}

.search-form .search-field {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font: inherit;
}

.search-form .search-submit {
	padding: 12px 20px;
	border-radius: 999px;
	border: 0;
	background: var(--color-dark);
	color: #fff;
	font: inherit;
	cursor: pointer;
}

/* Pagination */
.pagination {
	margin: 32px 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 14px;
}

.pagination .current {
	background: var(--color-dark);
	color: #fff;
	border-color: var(--color-dark);
}

/* Widgets */
.widget { margin-bottom: 32px; }

.widget-title {
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.widget ul { list-style: none; padding: 0; margin: 0; }

.widget li { margin-bottom: 8px; }

/* ===== Privacy Page ===== */
.privacy-page {
	overflow-x: hidden;
	position: relative;
	background:
		radial-gradient(ellipse 50% 40% at 12% 18%, rgba(196, 181, 253, .55) 0%, transparent 60%),
		radial-gradient(ellipse 45% 45% at 85% 22%, rgba(186, 230, 253, .55) 0%, transparent 60%),
		radial-gradient(ellipse 60% 50% at 90% 75%, rgba(165, 180, 252, .50) 0%, transparent 60%),
		radial-gradient(ellipse 55% 55% at 8% 80%, rgba(216, 180, 254, .45) 0%, transparent 60%),
		radial-gradient(ellipse 70% 60% at 50% 50%, rgba(224, 231, 255, .45) 0%, transparent 70%),
		linear-gradient(180deg, #faf9ff 0%, #f3f0ff 50%, #eef4ff 100%);
}

.priv-hero {
	padding: 96px 0 32px;
	text-align: center;
	position: relative;
}

.priv-hero__inner {
	position: relative;
	z-index: 1;
}

.priv-hero__title {
	font-size: clamp(32px, 5.5vw, 60px);
	font-weight: 800;
	line-height: 1.1;
	color: #1a1a2e;
	margin: 0;
	letter-spacing: -0.02em;
}

/* Tabs wrap */
.priv-tabs-wrap {
	padding: 32px 0 96px;
	position: relative;
}

.priv-tabs {
	max-width: 980px;
	margin: 0 auto;
	position: relative;
}

/* Hide native radios */
.priv-tabs__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Tab bar */
.priv-tabs__bar {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}

.priv-tabs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 700;
	color: #4f46e5;
	background: #fff;
	border: 1.5px solid #c7d2fe;
	border-radius: 10px;
	cursor: pointer;
	transition: all .25s ease;
	position: relative;
	box-shadow: 0 2px 12px rgba(99, 102, 241, .06);
}

.priv-tabs__btn:hover {
	background: #f5f3ff;
	border-color: #a5b4fc;
}

/* Active states (CSS-only via :checked sibling) */
.priv-tabs__radio#priv-tab-privacy:checked ~ .priv-tabs__bar .priv-tabs__btn--privacy,
.priv-tabs__radio#priv-tab-cookies:checked ~ .priv-tabs__bar .priv-tabs__btn--cookies {
	color: #1a1a2e;
	border-color: #4f46e5;
	background: #fff;
	box-shadow: 0 6px 20px rgba(99, 102, 241, .18);
}

/* Active triangle indicator below active tab */
.priv-tabs__radio#priv-tab-privacy:checked ~ .priv-tabs__bar .priv-tabs__btn--privacy::after,
.priv-tabs__radio#priv-tab-cookies:checked ~ .priv-tabs__bar .priv-tabs__btn--cookies::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 14px;
	height: 14px;
	background: #fff;
	border-right: 1.5px solid #4f46e5;
	border-bottom: 1.5px solid #4f46e5;
}

/* Panels */
.priv-tabs__panel {
	display: none;
	animation: ls-fade-in .35s ease;
}

.priv-tabs__radio#priv-tab-privacy:checked ~ .priv-tabs__panels .priv-tabs__panel--privacy,
.priv-tabs__radio#priv-tab-cookies:checked ~ .priv-tabs__panels .priv-tabs__panel--cookies {
	display: block;
}

/* Content typography */
.priv-h1 {
	font-size: clamp(28px, 3.4vw, 38px);
	font-weight: 800;
	color: #1a1a2e;
	margin: 0 0 28px;
	letter-spacing: -0.01em;
}

.priv-h2 {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	color: #1a1a2e;
	margin: 36px 0 16px;
	letter-spacing: -0.01em;
}

.priv-tabs__panel p {
	font-size: 16px;
	line-height: 1.75;
	color: #2c2c44;
	margin: 0 0 18px;
}

.priv-tabs__panel p strong {
	color: #1a1a2e;
	font-weight: 600;
}

.priv-ul {
	margin: 0 0 18px;
	padding: 0 0 0 24px;
}

.priv-ul li {
	font-size: 16px;
	line-height: 1.75;
	color: #2c2c44;
	margin-bottom: 8px;
}

.priv-ul li::marker {
	color: #6366f1;
}

/* Responsive */
@media (max-width: 600px) {
	.priv-hero { padding: 72px 0 24px; }
	.priv-tabs__btn { min-width: 0; flex: 1; padding: 12px 18px; font-size: 14px; }
	.priv-tabs__bar { gap: 10px; margin-bottom: 36px; }
}

/* =========================================================
   Joystick Hero — 3D arcade console navigation
   ========================================================= */
.hero--joystick {
	background:
		radial-gradient(ellipse 80% 50% at 20% 0%,  rgba(124, 58, 237, .35), transparent 60%),
		radial-gradient(ellipse 60% 60% at 90% 30%, rgba(99, 102, 241, .30), transparent 65%),
		radial-gradient(ellipse 70% 60% at 30% 100%, rgba(139, 92, 246, .25), transparent 65%),
		#06060c;
	color: #fff;
	overflow: hidden;
	padding: clamp(60px, 9vw, 110px) 0 clamp(80px, 10vw, 130px);
}

.hero--joystick .hero__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: center;
}

.hero--joystick .hero__eyebrow {
	color: #a78bfa;
	letter-spacing: .25em;
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.hero__title--joystick {
	font-size: clamp(40px, 6.5vw, 84px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 16px 0 18px;
	background: linear-gradient(180deg, #fff 0%, #c4b5fd 60%, #8b5cf6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 40px rgba(167, 139, 250, .35);
}

.hero--joystick .hero__subtitle {
	font-size: clamp(15px, 1.4vw, 18px);
	color: rgba(255, 255, 255, .7);
	margin: 0 0 14px;
	max-width: 460px;
	line-height: 1.55;
}

.hero--joystick .hero__hint {
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: 12px;
	letter-spacing: .12em;
	color: rgba(167, 139, 250, .75);
	margin: 0 0 28px;
}

.hero--joystick .hero__hint span {
	display: inline-block;
	padding: 2px 8px;
	margin: 0 4px;
	border: 1px solid rgba(167, 139, 250, .4);
	border-radius: 6px;
	background: rgba(167, 139, 250, .08);
	color: #c4b5fd;
}

.hero--joystick .button--dark {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	backdrop-filter: blur(8px);
}

.hero--joystick .button--dark:hover {
	background: linear-gradient(135deg, #a78bfa, #6366f1);
	border-color: transparent;
}

/* Console wrapper — 3x3 grid: labels around, console in center */
.joystick-console {
	display: grid;
	grid-template-columns: 1fr 1.6fr 1fr;
	grid-template-rows: 1fr 1.6fr 1fr;
	gap: 14px;
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	aspect-ratio: 1 / 1;
	perspective: 1200px;
	outline: none;
}

/* Directional labels */
.js-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: clamp(11px, 1.05vw, 13px);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	text-decoration: none;
	transition: color .25s ease, background .25s ease, border-color .25s ease,
	            transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
	white-space: nowrap;
	min-width: 0;
}

.js-label > span { display: inline-block; }

.js-label[data-dir="NW"] { grid-column: 1; grid-row: 1; align-self: end;    justify-self: start;  }
.js-label[data-dir="N"]  { grid-column: 2; grid-row: 1; align-self: end;    justify-self: center; }
.js-label[data-dir="NE"] { grid-column: 3; grid-row: 1; align-self: end;    justify-self: end;    }
.js-label[data-dir="W"]  { grid-column: 1; grid-row: 2; align-self: center; justify-self: start;  }
.js-label[data-dir="E"]  { grid-column: 3; grid-row: 2; align-self: center; justify-self: end;    }
.js-label[data-dir="SW"] { grid-column: 1; grid-row: 3; align-self: start;  justify-self: start;  }
.js-label[data-dir="S"]  { grid-column: 2; grid-row: 3; align-self: start;  justify-self: center; }
.js-label[data-dir="SE"] { grid-column: 3; grid-row: 3; align-self: start;  justify-self: end;    }

.js-label.is-active,
.js-label:hover,
.js-label:focus-visible {
	color: #fff;
	background: linear-gradient(135deg, rgba(167, 139, 250, .25), rgba(99, 102, 241, .25));
	border-color: #a78bfa;
	box-shadow:
		0 0 0 1px rgba(167, 139, 250, .35),
		0 0 28px rgba(139, 92, 246, .55),
		inset 0 0 14px rgba(167, 139, 250, .15);
	transform: translateY(-2px) scale(1.05);
	outline: none;
}

/* Console body — 3D plastic panel */
.console {
	grid-column: 2;
	grid-row: 2;
	position: relative;
	border-radius: 28px;
	background:
		radial-gradient(ellipse 60% 40% at 50% 0%, rgba(167, 139, 250, .15), transparent 60%),
		linear-gradient(160deg, #2a2a3e 0%, #1a1a2a 50%, #0f0f1a 100%);
	border: 2px solid rgba(255, 255, 255, .08);
	box-shadow:
		0 30px 80px rgba(0, 0, 0, .55),
		0 8px 18px rgba(0, 0, 0, .4),
		inset 0 1px 0 rgba(255, 255, 255, .12),
		inset 0 -2px 6px rgba(0, 0, 0, .5);
	padding: 22px 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transform: rotateX(8deg);
	transform-style: preserve-3d;
}

.console::before {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, .04);
	pointer-events: none;
}

/* Screen bezel + screen */
.console__bezel {
	background: linear-gradient(180deg, #0a0a14, #050508);
	border-radius: 14px;
	padding: 6px;
	box-shadow:
		inset 0 2px 8px rgba(0, 0, 0, .8),
		0 1px 0 rgba(255, 255, 255, .06);
}

.console__screen {
	position: relative;
	background:
		radial-gradient(ellipse 70% 100% at 50% 50%, #1a0f3a 0%, #0a0518 70%, #050310 100%);
	border-radius: 10px;
	padding: 22px 18px;
	min-height: 110px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.console__scanlines {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent 0px,
		transparent 2px,
		rgba(0, 0, 0, .35) 2px,
		rgba(0, 0, 0, .35) 3px
	);
	pointer-events: none;
	mix-blend-mode: multiply;
}

.console__screen-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 900;
	letter-spacing: .16em;
	color: #c4b5fd;
	text-shadow:
		0 0 4px #c4b5fd,
		0 0 12px rgba(167, 139, 250, .8),
		0 0 24px rgba(139, 92, 246, .6);
	text-align: center;
	line-height: 1;
	transition: color .2s ease;
	z-index: 1;
}

.console__line {
	display: block;
	animation: js-flicker 4s infinite;
}

@keyframes js-flicker {
	0%, 96%, 100% { opacity: 1; }
	97% { opacity: .7; }
	98% { opacity: .95; }
	99% { opacity: .8; }
}

.console__led {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 8px #34d399, 0 0 16px rgba(52, 211, 153, .6);
	animation: js-led-blink 2.4s infinite;
	z-index: 2;
}

@keyframes js-led-blink {
	0%, 70%, 100% { opacity: 1; }
	75% { opacity: .25; }
	80% { opacity: 1; }
}

/* Panel containing joystick + button */
.console__panel {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 16px;
	padding: 8px 4px 4px;
	min-height: 130px;
	transform-style: preserve-3d;
}

/* Joystick — 3D */
.joystick {
	position: relative;
	width: 130px;
	height: 130px;
	flex-shrink: 0;
	perspective: 800px;
	transform-style: preserve-3d;
}

.joystick__shadow {
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 100px;
	height: 16px;
	background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .7), transparent 70%);
	transform: translateX(-50%);
	filter: blur(2px);
	z-index: 0;
}

.joystick__base {
	position: absolute;
	inset: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #3a3a52 0%, #1a1a2a 65%, #0a0a14 100%);
	border: 2px solid rgba(255, 255, 255, .06);
	box-shadow:
		inset 0 6px 18px rgba(0, 0, 0, .8),
		inset 0 -2px 6px rgba(167, 139, 250, .12),
		0 4px 14px rgba(0, 0, 0, .5);
	z-index: 1;
}

.joystick__base-rim {
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .04);
	box-shadow: inset 0 0 12px rgba(0, 0, 0, .7);
}

.joystick__base-inner {
	position: absolute;
	inset: 22px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, .08), transparent 70%);
	border: 1px dashed rgba(167, 139, 250, .15);
}

.joystick__stick {
	position: absolute;
	left: 50%;
	bottom: 50%;
	width: 14px;
	height: 64px;
	transform-origin: 50% 100%;
	transform: translateX(-50%) rotateX(0deg) rotateY(0deg);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
	cursor: grab;
	touch-action: none;
	z-index: 2;
	transform-style: preserve-3d;
	will-change: transform;
}

.joystick.is-dragging .joystick__stick {
	transition: none;
	cursor: grabbing;
}

.joystick__shaft {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	background: linear-gradient(90deg, #1a1a2a 0%, #4a4a6a 30%, #6a6a82 50%, #4a4a6a 70%, #1a1a2a 100%);
	border-radius: 6px;
	box-shadow:
		inset 0 0 4px rgba(0, 0, 0, .6),
		0 0 6px rgba(0, 0, 0, .5);
}

.joystick__ball {
	position: absolute;
	left: 50%;
	top: -2px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background:
		radial-gradient(circle at 32% 28%, #ff7799 0%, #e0264f 35%, #a40d33 75%, #560015 100%);
	box-shadow:
		0 6px 18px rgba(228, 38, 79, .55),
		inset 0 -4px 6px rgba(0, 0, 0, .45),
		inset 0 3px 6px rgba(255, 255, 255, .25);
}

.joystick__ball::after {
	content: "";
	position: absolute;
	top: 18%;
	left: 22%;
	width: 30%;
	height: 18%;
	border-radius: 50%;
	background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(255, 255, 255, .8), transparent 70%);
	filter: blur(1px);
}

/* GO action button — 3D pushable */
.action-btn {
	position: relative;
	width: 96px;
	height: 96px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	transform-style: preserve-3d;
	-webkit-tap-highlight-color: transparent;
}

.action-btn__base {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 35%, #2a2a40, #0a0a14 80%);
	box-shadow:
		inset 0 4px 10px rgba(0, 0, 0, .8),
		0 6px 14px rgba(0, 0, 0, .5);
}

.action-btn__top {
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, #d8b4fe 0%, #a78bfa 30%, #7c3aed 70%, #4c1d95 100%);
	box-shadow:
		0 8px 0 #3b1488,
		0 12px 22px rgba(124, 58, 237, .55),
		inset 0 -3px 6px rgba(0, 0, 0, .35),
		inset 0 4px 8px rgba(255, 255, 255, .35);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .12s ease, box-shadow .12s ease;
	z-index: 2;
}

.action-btn__base { z-index: 1; }

.action-btn__label {
	font-family: "Courier New", "Roboto Mono", monospace;
	font-weight: 900;
	font-size: 22px;
	letter-spacing: .15em;
	color: #fff;
	text-shadow:
		0 1px 0 rgba(0, 0, 0, .35),
		0 0 12px rgba(255, 255, 255, .4);
}

.action-btn:hover .action-btn__top {
	background:
		radial-gradient(circle at 35% 30%, #f5d0fe 0%, #c4b5fd 30%, #8b5cf6 70%, #5b21b6 100%);
}

.action-btn:active .action-btn__top,
.action-btn.is-pressed .action-btn__top {
	transform: translateY(6px);
	box-shadow:
		0 2px 0 #3b1488,
		0 4px 10px rgba(124, 58, 237, .5),
		inset 0 -3px 6px rgba(0, 0, 0, .4),
		inset 0 4px 8px rgba(255, 255, 255, .25);
}

/* Circuit traces under panel */
.console__circuits {
	height: 40px;
	margin-top: -4px;
	opacity: .8;
}

.console__circuits svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Focus ring on the whole console */
.joystick-console:focus-visible {
	outline: 2px solid rgba(167, 139, 250, .6);
	outline-offset: 8px;
	border-radius: 8px;
}

/* Responsive */
@media (max-width: 960px) {
	.hero--joystick .hero__inner {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.joystick-console { max-width: 520px; margin: 0 auto; }
}

@media (max-width: 560px) {
	.joystick-console { gap: 8px; }
	.js-label { padding: 9px 10px; font-size: 10.5px; letter-spacing: .08em; border-radius: 9px; }
	.console { padding: 16px 14px 14px; border-radius: 22px; }
	.console__screen { min-height: 80px; padding: 16px 12px; }
	.console__panel { gap: 10px; min-height: 110px; }
	.joystick { width: 110px; height: 110px; }
	.joystick__stick { width: 12px; height: 54px; }
	.joystick__ball { width: 38px; height: 38px; }
	.action-btn { width: 80px; height: 80px; }
	.action-btn__label { font-size: 18px; }
	.console__circuits { height: 28px; }
}

/* =========================================================
   Cassette Hero — pop-in-a-tape navigation
   ========================================================= */
.hero--cassette {
	position: relative;
	background:
		radial-gradient(ellipse 90% 60% at 0% 0%,   rgba(124, 58, 237, .35), transparent 60%),
		radial-gradient(ellipse 70% 60% at 100% 30%, rgba(236,  72, 153, .22), transparent 65%),
		radial-gradient(ellipse 70% 80% at 50% 110%, rgba(245, 158,  11, .18), transparent 65%),
		#0a0810;
	color: #fff;
	overflow: hidden;
	padding: clamp(60px, 9vw, 110px) 0 clamp(80px, 10vw, 130px);
}

/* Subtle scratched-vinyl noise texture overlay */
.hero--cassette::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, .015) 0,
		rgba(255, 255, 255, .015) 1px,
		transparent 1px,
		transparent 4px
	);
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: .5;
}

.hero--cassette .hero__inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 56px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.hero--cassette .hero__eyebrow {
	color: #f59e0b;
	letter-spacing: .3em;
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.hero--cassette .hero__eyebrow-dot {
	background: #f59e0b;
}

.hero__title--cassette {
	font-size: clamp(40px, 6.5vw, 84px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 16px 0 18px;
	background: linear-gradient(180deg, #fff 0%, #fbbf24 50%, #ec4899 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 50px rgba(251, 191, 36, .25);
}

.hero--cassette .hero__subtitle {
	font-size: clamp(15px, 1.4vw, 18px);
	color: rgba(255, 255, 255, .72);
	margin: 0 0 14px;
	max-width: 460px;
	line-height: 1.55;
}

.hero--cassette .hero__hint {
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: 12px;
	letter-spacing: .12em;
	color: rgba(251, 191, 36, .85);
	margin: 0 0 28px;
}
.hero--cassette .hero__hint span {
	display: inline-block;
	padding: 2px 7px;
	margin: 0 4px;
	border: 1px solid rgba(251, 191, 36, .45);
	border-radius: 6px;
	background: rgba(251, 191, 36, .08);
	color: #fde68a;
}

.hero--cassette .button--dark {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #fff;
	backdrop-filter: blur(8px);
}
.hero--cassette .button--dark:hover {
	background: linear-gradient(135deg, #f59e0b, #ec4899);
	border-color: transparent;
}

/* Cassette system layout: rack stacked above the deck */
.cassette-system {
	display: grid;
	grid-template-rows: auto auto;
	gap: 28px;
	max-width: 620px;
	margin-left: auto;
	width: 100%;
}

/* ===== Tape rack ===== */
.tape-rack {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	padding: 10px 8px 14px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25));
	border: 1px solid rgba(255, 255, 255, .06);
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, .4),
		0 8px 24px rgba(0, 0, 0, .35);
	perspective: 800px;
}

/* ===== Cassette ===== */
.cassette {
	--c1: #e74c3c;
	--c2: #b03020;
	--c3: #f8d4cc;
	position: relative;
	display: block;
	aspect-ratio: 5 / 4;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease, filter .25s ease;
	transform: translateY(0) rotate(calc((var(--i) - 3) * 1deg));
	-webkit-tap-highlight-color: transparent;
}

.cassette:hover  { transform: translateY(-8px) rotate(0deg) scale(1.05); z-index: 2; }
.cassette:focus-visible { outline: 2px solid #fbbf24; outline-offset: 4px; border-radius: 6px; }

.cassette.is-loaded {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-30px) scale(.6);
}

.cassette__shell {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background:
		linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
	box-shadow:
		inset 0 -3px 0 rgba(0, 0, 0, .35),
		inset 0 1px 0 rgba(255, 255, 255, .25),
		0 4px 8px rgba(0, 0, 0, .4);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 6% 8% 8%;
}

.cassette__notches {
	position: absolute;
	top: 0;
	left: 14%;
	right: 14%;
	height: 8%;
	display: flex;
	justify-content: space-between;
}
.cassette__notches span {
	width: 22%;
	height: 100%;
	background: rgba(0, 0, 0, .55);
	border-radius: 0 0 3px 3px;
}

.cassette__window {
	width: 100%;
	height: 30%;
	background: #1a1a1a;
	border-radius: 3px;
	margin-bottom: 5%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8%;
	position: relative;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}

.cassette__hub {
	width: 26%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 18%, #1f1f1f 19%, #1f1f1f 28%, #6b4226 29%, #4a2818 100%);
	position: relative;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.cassette__hub::after {
	content: "";
	position: absolute;
	inset: 36%;
	border-radius: 50%;
	background:
		conic-gradient(from 0deg, #fff 0deg, transparent 60deg, transparent 120deg, #fff 180deg, transparent 240deg, transparent 300deg, #fff 360deg);
	mix-blend-mode: screen;
	opacity: .4;
}
.cassette__tape {
	flex: 1;
	height: 30%;
	margin: 0 4%;
	background: linear-gradient(180deg, #6b4226, #2a1a0c);
	border-radius: 1px;
}

.cassette__label {
	flex: 1;
	width: 100%;
	background: linear-gradient(180deg, var(--c3, #fff8f0) 0%, #fff 60%, #f4f0e8 100%);
	border-radius: 2px;
	padding: 6% 6%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: "Courier New", "Roboto Mono", monospace;
	color: #1a1a1a;
	font-size: clamp(7px, .7vw, 9px);
	font-weight: 700;
	text-align: left;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .25);
	letter-spacing: .04em;
	line-height: 1;
}

.cassette__label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	font-size: 0.85em;
	opacity: .75;
}

.cassette__brand {
	font-weight: 900;
	letter-spacing: .1em;
}

.cassette__title {
	font-size: clamp(10px, 1.05vw, 14px);
	font-weight: 900;
	letter-spacing: .04em;
	color: #1a1a1a;
	margin: 4% 0;
	text-align: center;
	line-height: 1.05;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Color variants */
.cassette--red    { --c1: #ef4444; --c2: #991b1b; --c3: #fee2e2; }
.cassette--orange { --c1: #f59e0b; --c2: #b45309; --c3: #fef3c7; }
.cassette--yellow { --c1: #facc15; --c2: #a16207; --c3: #fef9c3; }
.cassette--green  { --c1: #22c55e; --c2: #15803d; --c3: #d1fae5; }
.cassette--cyan   { --c1: #06b6d4; --c2: #0e7490; --c3: #cffafe; }
.cassette--purple { --c1: #a855f7; --c2: #6b21a8; --c3: #f3e8ff; }
.cassette--pink   { --c1: #ec4899; --c2: #9d174d; --c3: #fce7f3; }

/* ===== The deck ===== */
.deck {
	position: relative;
	background:
		linear-gradient(180deg, #2c2c34 0%, #1a1a22 60%, #0c0c12 100%);
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow:
		0 30px 80px rgba(0, 0, 0, .55),
		0 6px 16px rgba(0, 0, 0, .35),
		inset 0 1px 0 rgba(255, 255, 255, .12),
		inset 0 -2px 0 rgba(0, 0, 0, .4);
	padding: 16px 20px 18px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	transform: rotateX(4deg);
	transform-style: preserve-3d;
}

.deck::before {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 13px;
	border: 1px solid rgba(255, 255, 255, .03);
	pointer-events: none;
}

.deck__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	padding-bottom: 8px;
}

.deck__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Courier New", "Roboto Mono", monospace;
	font-weight: 900;
	font-size: 13px;
	letter-spacing: .15em;
	color: #f3f4f6;
}
.deck__model {
	margin-left: 4px;
	color: rgba(255, 255, 255, .45);
	font-weight: 600;
}
.deck__logo {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: linear-gradient(135deg, #f59e0b, #ec4899);
	box-shadow: 0 0 8px rgba(245, 158, 11, .55);
}

.deck__power {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 8px #22c55e, 0 0 16px rgba(34, 197, 94, .6);
	animation: cas-led 2.4s infinite;
}

@keyframes cas-led {
	0%, 70%, 100% { opacity: 1; }
	75% { opacity: .25; }
	80% { opacity: 1; }
}

/* LCD display */
.deck__display {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 10px;
	background: #0a0c14;
	border: 1px solid rgba(245, 158, 11, .25);
	border-radius: 10px;
	padding: 10px 14px;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
}

.deck__lcd {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: "Courier New", "Roboto Mono", monospace;
	color: #fbbf24;
	text-shadow: 0 0 6px rgba(251, 191, 36, .65), 0 0 14px rgba(251, 191, 36, .35);
}

.deck__lcd-status {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
}
.deck__lcd-track {
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .1em;
	min-height: 16px;
}
.deck__lcd-time {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	color: #fde68a;
}

.deck.is-playing .deck__lcd-status { animation: cas-blink 1.2s infinite; }

@keyframes cas-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: .35; }
}

.deck__vu {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-auto-rows: 1fr;
	gap: 4px 8px;
	align-items: center;
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: 10px;
	color: rgba(245, 158, 11, .7);
}

.deck__vu-bar {
	height: 8px;
	background: rgba(255, 255, 255, .04);
	border-radius: 2px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.deck__vu-bar > span {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #22c55e 0%, #facc15 65%, #ef4444 100%);
	transition: width .12s linear;
}

/* Slot — where cassette sits when loaded */
.deck__slot {
	background: #060a14;
	border-radius: 10px;
	padding: 14px;
	box-shadow: inset 0 4px 14px rgba(0, 0, 0, .8);
}

.deck__slot-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 24px;
	min-height: 90px;
}

.deck__hub {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #2a2a35 0%, #0d0d14 65%, #050508 100%),
		conic-gradient(from 0deg, rgba(255, 255, 255, .12), transparent 30%, rgba(255, 255, 255, .12) 60%, transparent 90%);
	background-blend-mode: screen;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow:
		inset 0 4px 10px rgba(0, 0, 0, .9),
		inset 0 -1px 4px rgba(255, 255, 255, .06),
		0 2px 6px rgba(0, 0, 0, .5);
	position: relative;
	flex-shrink: 0;
}

.deck__hub::before,
.deck__hub::after {
	content: "";
	position: absolute;
	inset: 22%;
	border-radius: 50%;
	border: 1.5px dashed rgba(245, 158, 11, .4);
	transform-origin: 50% 50%;
}
.deck__hub::after {
	inset: 38%;
	border-style: solid;
	border-width: 2px;
	border-color: rgba(245, 158, 11, .55);
	box-shadow: inset 0 0 8px rgba(245, 158, 11, .25);
}

.deck.is-playing .deck__hub::before { animation: cas-spin 1.6s linear infinite; }
.deck.is-playing .deck__hub::after  { animation: cas-spin 1.6s linear infinite; }

@keyframes cas-spin { to { transform: rotate(360deg); } }

/* Loaded cassette — visually appears in slot */
.deck__loaded {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 220px;
	max-width: 70%;
	aspect-ratio: 5 / 4;
	transform: translate(-50%, -150%) scale(.6);
	opacity: 0;
	pointer-events: none;
	transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
	border-radius: 6px;
	background: linear-gradient(180deg, var(--c1, #ef4444) 0%, var(--c2, #991b1b) 100%);
	box-shadow:
		inset 0 -3px 0 rgba(0, 0, 0, .35),
		inset 0 1px 0 rgba(255, 255, 255, .25),
		0 8px 16px rgba(0, 0, 0, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Courier New", "Roboto Mono", monospace;
	font-weight: 900;
	font-size: 16px;
	letter-spacing: .15em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	z-index: 3;
}

.deck__loaded.cassette--red    { --c1: #ef4444; --c2: #991b1b; }
.deck__loaded.cassette--orange { --c1: #f59e0b; --c2: #b45309; }
.deck__loaded.cassette--yellow { --c1: #facc15; --c2: #a16207; }
.deck__loaded.cassette--green  { --c1: #22c55e; --c2: #15803d; }
.deck__loaded.cassette--cyan   { --c1: #06b6d4; --c2: #0e7490; }
.deck__loaded.cassette--purple { --c1: #a855f7; --c2: #6b21a8; }
.deck__loaded.cassette--pink   { --c1: #ec4899; --c2: #9d174d; }

.deck__loaded.is-in {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.deck__loaded.is-ejecting {
	transform: translate(-50%, 80%) scale(.85);
	opacity: 0;
}

.deck__loaded-label {
	display: inline-block;
	padding: 4px 10px;
	background: rgba(255, 255, 255, .9);
	color: #1a1a1a;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Controls */
.deck__controls {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	padding-top: 4px;
}

.deck-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 6px 8px;
	background: linear-gradient(180deg, #3b3b48 0%, #1f1f28 100%);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 8px;
	color: rgba(255, 255, 255, .85);
	font-family: "Courier New", "Roboto Mono", monospace;
	font-weight: 900;
	font-size: 13px;
	letter-spacing: .12em;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .15),
		0 3px 0 rgba(0, 0, 0, .55),
		0 5px 10px rgba(0, 0, 0, .35);
	transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}

.deck-btn__icon { font-size: 14px; line-height: 1; }
.deck-btn__label { font-size: 9px; letter-spacing: .15em; opacity: .85; }

.deck-btn:hover {
	background: linear-gradient(180deg, #4a4a58 0%, #2a2a34 100%);
	color: #fff;
}

.deck-btn:active,
.deck-btn.is-pressed {
	transform: translateY(2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .1),
		0 1px 0 rgba(0, 0, 0, .55),
		0 1px 4px rgba(0, 0, 0, .25);
}

.deck-btn--play {
	background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		0 3px 0 #78350f,
		0 6px 16px rgba(245, 158, 11, .45);
}
.deck-btn--play:hover {
	background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
	color: #fff;
}
.deck.is-playing .deck-btn--play {
	background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		0 3px 0 #14532d,
		0 6px 18px rgba(34, 197, 94, .55);
}

.deck-btn--eject {
	background: linear-gradient(180deg, #ec4899 0%, #9d174d 100%);
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		0 3px 0 #500724,
		0 6px 14px rgba(236, 72, 153, .35);
}

.deck-btn--play .deck-btn__icon,
.deck-btn--eject .deck-btn__icon { font-size: 16px; }

/* Responsive */
@media (max-width: 960px) {
	.hero--cassette .hero__inner { grid-template-columns: 1fr; gap: 56px; }
	.cassette-system { max-width: 580px; margin: 0 auto; }
}

@media (max-width: 560px) {
	.tape-rack { grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px 6px; }
	.cassette__title { font-size: 9px; }
	.cassette__label-row { font-size: 7px; }
	.deck { padding: 12px 14px 14px; }
	.deck__display { grid-template-columns: 1fr; gap: 6px; padding: 8px 10px; }
	.deck__hub { width: 54px; height: 54px; }
	.deck__loaded { width: 160px; font-size: 13px; }
	.deck__controls { grid-template-columns: repeat(5, 1fr); gap: 4px; }
	.deck-btn { padding: 8px 4px; font-size: 11px; }
	.deck-btn__label { font-size: 8px; }
}

/* =========================================================
   CRT TV Hero — channel-flip navigation with static glitch
   ========================================================= */
.hero--tv {
	position: relative;
	background: #0c0c10 !important;
	background-image: none !important;
	background-size: auto !important;
	animation: none !important;
	color: #fff;
	overflow: hidden;
	min-height: calc(100vh - 80px);
	padding: 40px 0;
	display: flex;
	align-items: center;
}

body.admin-bar .hero--tv { min-height: calc(100vh - 80px - 32px); }

.hero--tv .hero__inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 40px;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Leadige-style left side: chunky pink display headline + white pill CTA */
.hero__content--leadige {
	max-width: 620px;
}

.hero .hero__title--leadige,
.hero__title--leadige {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(40px, 5.5vw, 76px);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 0 0 28px;
	color: #22d3ee !important;
	background: none !important;
	-webkit-text-fill-color: #22d3ee !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	text-shadow: none;
}

/* Kill the teal first-line gradient that would otherwise override the color */
.hero__title--leadige::first-line {
	background: none !important;
	color: #22d3ee !important;
	-webkit-text-fill-color: #22d3ee !important;
}

.hero__subtitle--leadige {
	font-size: clamp(16px, 1.4vw, 19px);
	color: rgba(255, 255, 255, .85);
	line-height: 1.6;
	margin: 0 0 36px;
	max-width: 520px;
	font-weight: 400;
}

.hero__cta-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 48px;
	background: #fff;
	color: #000;
	font-weight: 600;
	font-size: 17px;
	border-radius: 999px;
	text-decoration: none;
	min-width: 320px;
	transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.hero__cta-pill:hover,
.hero__cta-pill:focus-visible {
	background: #ec4899;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(236, 72, 153, .45);
	outline: none;
}

@media (max-width: 560px) {
	.hero__cta-pill { min-width: 0; width: 100%; padding: 16px 24px; font-size: 15px; }
}

/* ===== TV Set ===== */
.crt {
	position: relative;
	max-width: 560px;
	margin-left: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	perspective: 1200px;
}

/* Antenna */
.crt__antenna {
	position: relative;
	width: 240px;
	height: 90px;
	margin-bottom: -8px;
	z-index: 1;
}
.crt__rod {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 4px;
	height: 90px;
	background: linear-gradient(180deg, #c0c0c8 0%, #6b6b75 60%, #2a2a30 100%);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
	transform-origin: bottom center;
}
.crt__rod--l { transform: translateX(-50%) rotate(-32deg); }
.crt__rod--r { transform: translateX(-50%) rotate(32deg); }
.crt__rod::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 8px;
	height: 8px;
	background: radial-gradient(circle at 35% 30%, #fff 0%, #aaa 50%, #555 100%);
	border-radius: 50%;
	transform: translateX(-50%);
}
.crt__nub {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 38px;
	height: 12px;
	background: linear-gradient(180deg, #4a4a52 0%, #1c1c22 100%);
	border-radius: 8px 8px 0 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

/* Cabinet — wood-grain plastic body */
.crt__cabinet {
	position: relative;
	width: 100%;
	border-radius: 24px;
	background:
		linear-gradient(180deg, #5a3520 0%, #3e2415 60%, #2a1810 100%);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .12),
		inset 0 -3px 0 rgba(0, 0, 0, .4),
		0 30px 80px rgba(0, 0, 0, .55),
		0 8px 18px rgba(0, 0, 0, .35);
	padding: 26px 26px 22px;
}

/* Subtle wood-grain stripes */
.crt__cabinet::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(0, 0, 0, .07) 0,
		rgba(0, 0, 0, .07) 1px,
		transparent 1px,
		transparent 6px
	);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* ===== Screen ===== */
.crt__screen-wrap {
	position: relative;
	background: linear-gradient(180deg, #0a0a0e 0%, #050508 100%);
	border-radius: 18px;
	padding: 14px;
	box-shadow:
		inset 0 4px 14px rgba(0, 0, 0, .85),
		inset 0 -2px 4px rgba(255, 255, 255, .03);
	margin-bottom: 18px;
}

.crt__screen {
	position: relative;
	aspect-ratio: 4 / 3;
	width: 100%;
	border-radius: 36px / 28%;
	overflow: hidden;
	background:
		radial-gradient(ellipse 95% 95% at 50% 50%, #0c1410 0%, #060a08 75%, #02050a 100%);
	box-shadow:
		inset 0 0 60px rgba(0, 0, 0, .85),
		inset 0 0 8px rgba(0, 0, 0, .9);
}

/* Static noise (SVG turbulence) */
.crt__noise {
	position: absolute;
	inset: -10%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
	background-size: 220px 220px;
	opacity: 0;
	animation: crt-noise-shift .12s steps(4) infinite;
	z-index: 2;
	pointer-events: none;
}

@keyframes crt-noise-shift {
	0%   { background-position: 0 0; }
	25%  { background-position: -60px 30px; }
	50%  { background-position: 40px -50px; }
	75%  { background-position: -30px -20px; }
	100% { background-position: 20px 60px; }
}

.crt__screen.is-static .crt__noise   { opacity: .15; }
.crt__screen.is-tuning .crt__noise   { opacity: .85; animation-duration: .04s; }
.crt__screen.is-on     .crt__noise   { opacity: .05; }

/* Color bars (visible during tuning) */
.crt__bars {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 3;
}
.crt__bars span {
	background: #fff;
}
.crt__bars span:nth-child(1) { background: #ffffff; }
.crt__bars span:nth-child(2) { background: #ffff00; }
.crt__bars span:nth-child(3) { background: #00ffff; }
.crt__bars span:nth-child(4) { background: #00ff00; }
.crt__bars span:nth-child(5) { background: #ff00ff; }
.crt__bars span:nth-child(6) { background: #ff0000; }
.crt__bars span:nth-child(7) { background: #0000ff; }

.crt__screen.is-tuning .crt__bars { opacity: .5; mix-blend-mode: overlay; animation: crt-tear .25s steps(3) infinite; }

@keyframes crt-tear {
	0%   { transform: translateY(0)     skewX(0); }
	33%  { transform: translateY(-6%)   skewX(-2deg); }
	66%  { transform: translateY(4%)    skewX(2deg); }
	100% { transform: translateY(0)     skewX(0); }
}

/* RGB-aberrated text container */
.crt__rgb {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	font-family: "Courier New", "Roboto Mono", monospace;
	color: #f8fafc;
	z-index: 4;
	padding: 0 8%;
}

.crt__channel-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 18px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 10px;
	background: rgba(0, 0, 0, .35);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset, 0 0 12px rgba(255, 255, 255, .1);
	letter-spacing: .25em;
	font-weight: 900;
	font-size: 18px;
}
.crt__ch-num {
	font-size: 32px;
	color: #facc15;
	text-shadow: 0 0 10px rgba(250, 204, 21, .6);
}

.crt__page-name {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 900;
	letter-spacing: .12em;
	color: #fde68a;
	text-shadow:
		0 0 8px rgba(253, 230, 138, .65),
		0 0 22px rgba(245, 158, 11, .55);
	transition: color .25s ease, text-shadow .25s ease;
	line-height: 1.1;
}

.crt__screen.is-tuning .crt__page-name {
	animation: crt-rgb 110ms steps(2) infinite;
	color: #fff;
}

@keyframes crt-rgb {
	0%   { text-shadow: -2px 0 #ef4444, 2px 0 #06b6d4; transform: translateX(0); }
	50%  { text-shadow:  2px 0 #ef4444, -2px 0 #06b6d4; transform: translateX(1px); }
	100% { text-shadow: -2px 0 #ef4444, 2px 0 #06b6d4; transform: translateX(-1px); }
}

.crt__page-sub {
	font-size: 14px;
	letter-spacing: .25em;
	color: rgba(248, 250, 252, .75);
	text-transform: uppercase;
	font-weight: 700;
}

.crt__screen.is-static .crt__rgb,
.crt__screen.is-tuning .crt__page-sub { opacity: .7; }

/* Scanlines */
.crt__scanlines {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent 0px,
		transparent 2px,
		rgba(0, 0, 0, .35) 2px,
		rgba(0, 0, 0, .35) 3px
	);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 5;
}

/* Glass glare */
.crt__glare {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .14) 0%, transparent 35%),
		radial-gradient(ellipse 90% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
	z-index: 6;
}

/* Initial "off air" state — visible but muted */
.crt__screen.is-static .crt__page-name { color: #cbd5e1; text-shadow: 0 0 8px rgba(203, 213, 225, .35); }
.crt__screen.is-static .crt__channel-badge { border-color: rgba(255, 255, 255, .25); color: #cbd5e1; }
.crt__screen.is-static .crt__ch-num { color: #fbbf24; text-shadow: 0 0 6px rgba(251, 191, 36, .4); }

/* ===== Control panel ===== */
.crt__panel {
	position: relative;
}

.crt__brand-strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-family: "Courier New", "Roboto Mono", monospace;
	letter-spacing: .15em;
	color: rgba(255, 255, 255, .65);
}
.crt__brand {
	font-weight: 900;
	color: #fbbf24;
	font-size: 13px;
	text-shadow: 0 0 8px rgba(251, 191, 36, .4);
}
.crt__model {
	font-size: 10px;
	font-weight: 700;
}

.crt__panel-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: center;
	margin-bottom: 12px;
}

/* Channel buttons */
.crt__channels {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.crt__btn {
	position: relative;
	z-index: 5;
	pointer-events: auto;
	padding: 12px 4px 8px;
	background: linear-gradient(180deg, #f3e7d5 0%, #c8b894 60%, #95825d 100%);
	border: 0;
	border-radius: 6px;
	color: #1f1408;
	font-family: "Courier New", "Roboto Mono", monospace;
	font-weight: 900;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		0 3px 0 #5a4a2c,
		0 5px 10px rgba(0, 0, 0, .35);
	transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
	text-decoration: none;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.crt__btn:hover, .crt__btn:focus, .crt__btn:active, .crt__btn:visited { color: #1f1408; text-decoration: none; }

.crt__btn-num {
	font-size: 18px;
	letter-spacing: .05em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.crt__btn-name {
	font-size: 8px;
	letter-spacing: .15em;
	color: rgba(31, 20, 8, .7);
}

.crt__btn:hover {
	background: linear-gradient(180deg, #fff5dd 0%, #d9c9a3 60%, #a3906a 100%);
}
.crt__btn:active,
.crt__btn.is-active {
	transform: translateY(3px);
	background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
	color: #1c1410;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		0 0 0 #5a4a2c,
		0 1px 4px rgba(0, 0, 0, .25),
		0 0 12px rgba(251, 191, 36, .55);
}
.crt__btn.is-active .crt__btn-name { color: rgba(31, 20, 8, .85); }

/* Knobs */
.crt__knobs {
	display: flex;
	gap: 12px;
}
.crt__knob {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.crt__knob-face {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 30%, #2a2a30 0%, #0c0c10 70%),
		conic-gradient(from 0deg, rgba(255, 255, 255, .15), transparent 25%, rgba(255, 255, 255, .15) 50%, transparent 75%);
	background-blend-mode: screen;
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, .8),
		inset 0 -1px 2px rgba(255, 255, 255, .1),
		0 2px 4px rgba(0, 0, 0, .55);
}
.crt__knob-mark {
	position: absolute;
	left: 50%;
	top: 8%;
	width: 3px;
	height: 35%;
	background: #fbbf24;
	border-radius: 1.5px;
	transform: translateX(-50%);
	box-shadow: 0 0 4px rgba(251, 191, 36, .6);
}
.crt__knob:nth-child(1) .crt__knob-face { transform: rotate(-30deg); }
.crt__knob:nth-child(2) .crt__knob-face { transform: rotate(45deg); }
.crt__knob-label {
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: 9px;
	letter-spacing: .15em;
	color: rgba(255, 255, 255, .55);
	font-weight: 700;
}

/* Speaker + power row */
.crt__base-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px;
	align-items: center;
}
.crt__speaker {
	background: rgba(0, 0, 0, .4);
	border-radius: 8px;
	height: 38px;
	padding: 6px 10px;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .85);
}
.crt__speaker-grille {
	height: 100%;
	background-image: repeating-linear-gradient(
		90deg,
		transparent 0,
		transparent 2px,
		rgba(255, 255, 255, .08) 2px,
		rgba(255, 255, 255, .08) 3px
	), repeating-linear-gradient(
		0deg,
		transparent 0,
		transparent 2px,
		rgba(0, 0, 0, .4) 2px,
		rgba(0, 0, 0, .4) 3px
	);
	border-radius: 4px;
}

.crt__power {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.crt__led {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ef4444;
	box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239, 68, 68, .55);
	animation: crt-led-blink 2.4s infinite;
}
@keyframes crt-led-blink {
	0%, 70%, 100% { opacity: 1; }
	75% { opacity: .25; }
	80% { opacity: 1; }
}
.crt__power-label {
	font-family: "Courier New", "Roboto Mono", monospace;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .2em;
	color: rgba(255, 255, 255, .55);
}

/* Legs */
.crt__legs {
	display: flex;
	justify-content: space-between;
	width: 78%;
	margin-top: -2px;
}
.crt__legs span {
	width: 22px;
	height: 24px;
	background: linear-gradient(180deg, #2a1810 0%, #160c08 100%);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .6);
}

/* Responsive */
@media (max-width: 960px) {
	.hero--tv .hero__inner { grid-template-columns: 1fr; gap: 56px; }
	.crt { max-width: 560px; margin: 0 auto; }
}

@media (max-width: 560px) {
	.crt__antenna { width: 200px; height: 70px; }
	.crt__rod { height: 70px; }
	.crt__cabinet { padding: 18px 16px 16px; border-radius: 18px; }
	.crt__screen-wrap { padding: 10px; }
	.crt__channels { gap: 4px; }
	.crt__btn { padding: 10px 2px 6px; }
	.crt__btn-num { font-size: 15px; }
	.crt__btn-name { font-size: 7px; letter-spacing: .1em; }
	.crt__knob-face { width: 32px; height: 32px; }
	.crt__page-name { font-size: 22px; }
}

/* =========================================================
   Leadige-style homepage sections
   ========================================================= */
.ld-section {
	position: relative;
	padding: clamp(60px, 8vw, 110px) 0;
	color: #fff;
}

.ld-section__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 44px);
	text-align: center;
	margin: 0 0 14px;
	color: #fff;
}

.ld-section__lead {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
	color: rgba(255, 255, 255, .65);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.6;
}

/* Generic CTA buttons used across leadige sections */
.ld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	cursor: pointer;
	border: 0;
}
.ld-btn--mint {
	background: #5eead4;
	color: #042f2e;
}
.ld-btn--mint:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(94, 234, 212, .35); }

.ld-btn--dark {
	background: #0a0a0a;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .1);
}
.ld-btn--dark:hover { background: #1a1a1a; transform: translateY(-2px); }

.ld-btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
}
.ld-btn--ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .45); }

.ld-btn--pink { color: #ec4899; border-color: rgba(236, 72, 153, .55); }
.ld-btn--pink:hover { background: rgba(236, 72, 153, .12); }

/* ===== Stats band ===== */
.ld-stats {
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(32px, 4vw, 56px);
}
.ld-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, .06);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	padding: 36px 0;
}
.ld-stat {
	text-align: center;
	padding: 0 18px;
	border-right: 1px solid rgba(255, 255, 255, .06);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ld-stat:last-child { border-right: 0; }
.ld-stat__num {
	font-family: var(--font-sans);
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #c4b5fd;
	line-height: 1;
}
.ld-stat__label {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .02em;
}
.ld-stat__sub {
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
	line-height: 1.4;
}

@media (max-width: 700px) {
	.ld-stats__grid { grid-template-columns: 1fr 1fr; gap: 0; }
	.ld-stat { padding: 18px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
	.ld-stat:nth-child(1), .ld-stat:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, .06); }
	.ld-stat:nth-child(3), .ld-stat:nth-child(4) { border-bottom: 0; }
}

/* ===== Partners ===== */
.ld-partners__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px dashed rgba(255, 255, 255, .25);
	max-width: 980px;
	margin: 0 auto;
}
.ld-partners__cell {
	aspect-ratio: 5 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px dashed rgba(255, 255, 255, .25);
	border-bottom: 1px dashed rgba(255, 255, 255, .25);
	text-decoration: none;
	color: inherit;
	transition: background .25s ease, transform .25s ease;
	cursor: pointer;
}
.ld-partners__cell:hover {
	background: rgba(255, 255, 255, .04);
}
.ld-partners__cell:hover .ld-partners__logo {
	color: #fff;
}
.ld-partners__cell:nth-child(3n) { border-right: 0; }
.ld-partners__cell:nth-last-child(-n+3) { border-bottom: 0; }
.ld-partners__logo {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 18px;
	color: rgba(255, 255, 255, .55);
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: color .25s ease;
}

/* ===== Awards (right-to-left marquee) ===== */
.ld-awards__marquee {
	overflow: hidden;
	margin-top: 28px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ld-awards__track {
	display: flex;
	width: max-content;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
.ld-awards__marquee:hover .ld-awards__track { animation-play-state: paused; }

@keyframes ld-awards-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.ld-awards__badge {
	flex: 0 0 auto;
	width: 200px;
	margin-right: 20px;
	background: linear-gradient(180deg, #0f0f1c 0%, #050510 100%);
	border: 1px solid rgba(167, 139, 250, .15);
	border-radius: 18px;
	padding: 22px 16px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	transition: transform .25s ease, border-color .25s ease;
}
.ld-awards__badge:hover {
	transform: translateY(-4px);
	border-color: rgba(167, 139, 250, .4);
}
.ld-awards__badge svg { width: 70px; height: 70px; flex-shrink: 0; }
.ld-awards__img {
	width: 70px;
	height: 70px;
	flex-shrink: 0;
	object-fit: contain;
	display: block;
}

.ld-awards__org {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .02em;
	margin-top: 4px;
}
.ld-awards__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(167, 139, 250, .85);
	line-height: 1.3;
}
.ld-awards__year {
	font-size: 11px;
	color: rgba(255, 255, 255, .45);
	letter-spacing: .12em;
	font-weight: 600;
}

@media (max-width: 560px) {
	.ld-awards__badge { width: 170px; padding: 18px 12px 14px; }
	.ld-awards__badge svg { width: 56px; height: 56px; }
}

/* ===== Services ===== */
.ld-services__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	max-width: 1200px;
	margin: 0 auto;
}
.ld-service-card {
	border-radius: 18px;
	padding: 32px;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	border: 1px solid rgba(255, 255, 255, .06);
	background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .25));
}
.ld-service-card.is-seo    { background: linear-gradient(160deg, rgba(34, 197, 94, .15), rgba(20, 50, 40, .35)); border-color: rgba(34, 197, 94, .25); }
.ld-service-card.is-b2b    { background: linear-gradient(160deg, rgba(167, 139, 250, .18), rgba(40, 30, 70, .35)); border-color: rgba(167, 139, 250, .3); }
.ld-service-card.is-ads    { background: linear-gradient(160deg, rgba(236, 72, 153, .18), rgba(60, 20, 40, .35)); border-color: rgba(236, 72, 153, .3); }
.ld-service-card.is-design { background: linear-gradient(160deg, rgba(245, 158, 11, .15), rgba(70, 40, 10, .35)); border-color: rgba(245, 158, 11, .25); }

.ld-service-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .06);
}
.ld-service-card__icon svg { width: 28px; height: 28px; }

.ld-service-card.is-seo    .ld-service-card__icon { color: #4ade80; background: rgba(34, 197, 94, .15); }
.ld-service-card.is-b2b    .ld-service-card__icon { color: #c4b5fd; background: rgba(167, 139, 250, .18); }
.ld-service-card.is-ads    .ld-service-card__icon { color: #f9a8d4; background: rgba(236, 72, 153, .18); }
.ld-service-card.is-design .ld-service-card__icon { color: #fcd34d; background: rgba(245, 158, 11, .18); }

.ld-service-card__title {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
	color: #fff;
}
.ld-service-card.is-seo    .ld-service-card__title { color: #86efac; }
.ld-service-card.is-b2b    .ld-service-card__title { color: #c4b5fd; }
.ld-service-card.is-ads    .ld-service-card__title { color: #f9a8d4; }
.ld-service-card.is-design .ld-service-card__title { color: #fcd34d; }

.ld-service-card__desc {
	color: rgba(255, 255, 255, .75);
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.5;
}
.ld-service-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}
.ld-tag {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 2;
	color: rgba(255, 255, 255, .85);
}

@media (max-width: 900px) {
	.ld-services__grid { grid-template-columns: 1fr; }
}

/* ===== Process ===== */
.ld-process__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}
.ld-process__step {
	position: relative;
	padding-top: calc(120px + var(--i, 0) * 60px);
	/* Animation: hidden by default, revealed when section becomes visible */
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity .7s cubic-bezier(.22, 1, .36, 1),
		transform .7s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i) * 0.18s);
}
.ld-process.is-visible .ld-process__step {
	opacity: 1;
	transform: translateY(0);
}

/* Connecting dotted line that draws across the steps when active */
.ld-process__grid::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 60px;
	height: 2px;
	background-image: linear-gradient(90deg, rgba(167, 139, 250, .55) 50%, transparent 0);
	background-size: 14px 2px;
	background-repeat: repeat-x;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.6s ease 0.1s;
	z-index: 0;
	pointer-events: none;
}
.ld-process.is-visible .ld-process__grid::before { transform: scaleX(1); }

.ld-process__num {
	display: block;
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 56px;
	color: #a78bfa;
	margin-bottom: 8px;
	letter-spacing: -0.02em;
	position: relative;
	z-index: 1;
}
.ld-process.is-visible .ld-process__num {
	animation: ld-num-pop .55s cubic-bezier(.34, 1.56, .64, 1) backwards;
	animation-delay: calc(var(--i) * 0.18s + 0.1s);
}

@keyframes ld-num-pop {
	0%   { transform: scale(.4); opacity: 0; text-shadow: 0 0 0 rgba(167, 139, 250, 0); }
	60%  { transform: scale(1.15); opacity: 1; text-shadow: 0 0 32px rgba(167, 139, 250, .8); }
	100% { transform: scale(1); opacity: 1; text-shadow: 0 0 12px rgba(167, 139, 250, .35); }
}

.ld-process__step-title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	letter-spacing: .01em;
}

.ld-process__desc {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .75);
	margin-bottom: 18px;
}

.ld-process__plate {
	height: 18px;
	background: linear-gradient(180deg, #2a2a3a 0%, #14141e 100%);
	border-radius: 4px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
	transform: perspective(400px) rotateX(45deg);
	transform-origin: top center;
}

/* Reduced-motion users: disable transitions/animations */
@media (prefers-reduced-motion: reduce) {
	.ld-process__step { opacity: 1; transform: none; transition: none; }
	.ld-process__grid::before { transform: scaleX(1); transition: none; }
	.ld-process.is-visible .ld-process__num { animation: none; }
}

@media (max-width: 960px) {
	.ld-process__grid { grid-template-columns: repeat(2, 1fr); }
	.ld-process__step { padding-top: 0; }
	.ld-process__grid::before { display: none; }
}
@media (max-width: 560px) {
	.ld-process__grid { grid-template-columns: 1fr; }
}

/* ===== Industries ===== */
.ld-industries__intro {
	max-width: 720px;
	margin: 0 0 48px;
}
.ld-industries__intro .ld-section__title { text-align: left; }
.ld-industries__intro .ld-section__lead  { text-align: left; margin-left: 0; }

.ld-industries__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ld-industry-card {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 16px;
	padding: 26px;
}
.ld-industry-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(34, 211, 238, .15);
	color: #67e8f9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.ld-industry-card__icon svg { width: 24px; height: 24px; }
.ld-industry-card__title {
	font-size: 18px;
	margin: 0 0 8px;
	font-weight: 700;
	color: #fff;
}
.ld-industry-card__desc {
	font-size: 14px;
	color: rgba(255, 255, 255, .65);
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 900px) { .ld-industries__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ld-industries__grid { grid-template-columns: 1fr; } }

/* ===== Audit CTA ===== */
.ld-audit__panel {
	background: linear-gradient(135deg, #0a3a3a 0%, #0a2828 100%);
	border-radius: 24px;
	padding: clamp(36px, 5vw, 60px);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: center;
}
.ld-audit__text .ld-section__title { text-align: left; color: #5eead4; }
.ld-audit__text .ld-section__lead  { text-align: left; margin-left: 0; color: rgba(255, 255, 255, .8); margin-bottom: 28px; }
.ld-audit__art svg { width: 100%; height: auto; max-width: 260px; margin-left: auto; display: block; }

@media (max-width: 800px) {
	.ld-audit__panel { grid-template-columns: 1fr; }
	.ld-audit__art svg { max-width: 180px; margin: 0 auto; }
}

/* ===== Case Studies ===== */
.ld-cases__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	max-width: 1200px;
	margin: 0 auto;
}
.ld-case-card {
	background: #0e0e18;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.ld-case-card__visual {
	aspect-ratio: 16 / 10;
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: linear-gradient(160deg, #1a1a28 0%, #0a0a14 100%);
	color: #fff;
	position: relative;
}
.ld-case-card.is-cool   .ld-case-card__visual { background: linear-gradient(160deg, #1e293b, #0f172a); }
.ld-case-card.is-warm   .ld-case-card__visual { background: linear-gradient(160deg, #2a2230, #1a121a); }
.ld-case-card.is-bright .ld-case-card__visual { background: linear-gradient(160deg, #2d2438, #19132a); }

.ld-case-card__brand {
	font-size: 12px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	font-weight: 700;
}
.ld-case-card__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	background: rgba(0, 0, 0, .35);
	padding: 12px;
	border-radius: 10px;
}
.ld-case-card__stats div { text-align: left; }
.ld-case-card__stats span {
	display: block;
	font-size: 10px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .55);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.ld-case-card__stats strong {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.ld-case-card__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.ld-case-card__date {
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
	letter-spacing: .05em;
}
.ld-case-card__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: #fff;
	line-height: 1.3;
}
.ld-case-card__desc {
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ld-case-card__more {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	padding: 10px 22px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	align-self: flex-start;
}
.ld-case-card__more:hover { background: rgba(255, 255, 255, .06); }

.ld-cases__cta { text-align: center; margin-top: 36px; }

@media (max-width: 900px) { .ld-cases__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ld-cases__grid { grid-template-columns: 1fr; } }

/* ===== Clients marquee ===== */
.ld-clients__title {
	background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(40px, 6vw, 84px);
	letter-spacing: -.01em;
	margin-bottom: 48px;
}
.ld-clients__marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ld-clients__track {
	display: flex;
	width: max-content;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
.ld-clients__cell {
	width: 180px;
	height: 80px;
	margin-right: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ld-clients__cell:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(167, 139, 250, .25);
	transform: translateY(-2px);
}
.ld-clients__cell:hover .ld-clients__logo { color: #c4b5fd; }

.ld-clients__logo {
	color: rgba(255, 255, 255, .5);
	font-weight: 700;
	letter-spacing: .05em;
	font-size: 14px;
}
@keyframes ld-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ===== Help block ===== */
.ld-help__title {
	font-size: clamp(40px, 7vw, 100px);
	font-weight: 700;
	text-align: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .04));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0;
	line-height: 1.05;
}

/* ===== Clutch reviews ===== */
.ld-clutch__panel {
	background: linear-gradient(160deg, #2a0f1f 0%, #1a0a18 100%);
	border-radius: 24px;
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid rgba(236, 72, 153, .22);
}
.ld-clutch__head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 32px;
}
.ld-clutch__brand {
	font-size: 28px;
	font-weight: 700;
	color: #ec4899;
}
.ld-clutch__rating { font-size: 22px; font-weight: 700; color: #fff; }
.ld-clutch__stars  { color: #ec4899; letter-spacing: 2px; }
.ld-clutch__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 28px;
}

.ld-review-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(236, 72, 153, .25);
	border-radius: 14px;
	padding: 18px;
}
.ld-review-card--light {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .1);
}
.ld-review-card__head { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; }
.ld-review-card__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ec4899, #a78bfa);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}
.ld-review-card__name { display: block; font-size: 14px; color: #fff; }
.ld-review-card__stars { font-size: 11px; color: #ec4899; letter-spacing: 1px; }
.ld-review-card--light .ld-review-card__stars { color: #fbbf24; }
.ld-review-card__text {
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
	line-height: 1.5;
	margin: 0;
}

.ld-clutch__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
}
.ld-clutch__nav { display: flex; gap: 8px; }
.ld-clutch__nav button {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid rgba(236, 72, 153, .35);
	color: #ec4899;
	cursor: pointer;
	font-size: 18px;
}
.ld-clutch__nav button:hover { background: rgba(236, 72, 153, .12); }

@media (max-width: 900px) { .ld-clutch__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ld-clutch__grid { grid-template-columns: 1fr; } }

/* ===== Google reviews + map ===== */
.ld-google__panel {
	background: #131722;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 24px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	min-height: 520px;
}
.ld-google__left { padding: 36px; display: flex; flex-direction: column; gap: 20px; }
.ld-google__head {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ld-google__g {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #4285f4 0 90deg, #34a853 90deg 180deg, #fbbc05 180deg 270deg, #ea4335 270deg 360deg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 800;
	font-size: 24px;
	font-family: var(--font-sans);
}
.ld-google__rating { font-size: 36px; font-weight: 800; color: #fff; }
.ld-google__stars  { color: #fbbf24; letter-spacing: 2px; display: block; }
.ld-google__reviews { display: grid; gap: 12px; }
.ld-google__map { background: #1a2638; height: 100%; }
.ld-google__map svg { width: 100%; height: 100%; display: block; }

@media (max-width: 800px) { .ld-google__panel { grid-template-columns: 1fr; } .ld-google__map { min-height: 280px; } }

/* ===== Let's Talk ===== */
.ld-talk__panel {
	background: linear-gradient(135deg, #15151c 0%, #1c1c26 100%);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 24px;
	padding: clamp(36px, 5vw, 60px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
	color: #fff;
}
.ld-talk__title {
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 800;
	margin: 0 0 20px;
	color: #fff;
}
.ld-talk__email {
	display: inline-block;
	font-size: 22px;
	color: #c4b5fd;
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 20px;
}
.ld-talk__email:hover { color: #fff; text-decoration: underline; }
.ld-talk__hours {
	color: rgba(255, 255, 255, .65);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 28px;
}
.ld-talk__art svg { width: 100%; max-width: 320px; margin-left: auto; display: block; }

@media (max-width: 800px) {
	.ld-talk__panel { grid-template-columns: 1fr; text-align: center; }
	.ld-talk__art svg { margin: 0 auto; }
}

/* =========================================================
   Rich Footer (replaces old site-footer)
   ========================================================= */
.ld-footer {
	position: relative;
	background: #0c0c10;
	color: rgba(255, 255, 255, .8);
	padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px) 32px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	overflow: hidden;
}

.ld-footer__inner {
	display: grid;
	grid-template-columns: 1fr 2.4fr;
	gap: clamp(32px, 5vw, 80px);
	max-width: var(--container-max);
	margin: 0 auto;
}

/* ===== Brand column ===== */
.ld-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .08em;
	font-size: 18px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.ld-footer__logo-mark { display: inline-flex; line-height: 0; color: #fff; }
.ld-footer__logo-mark svg { display: block; width: 32px; height: 32px; }
.ld-footer__logo-text { line-height: 1; }

.ld-footer__tagline {
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 28px;
	line-height: 1.2;
}

.ld-footer__contact {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 12px;
	font-size: 14px;
}
.ld-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: rgba(255, 255, 255, .75);
}
.ld-footer__contact a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}
.ld-footer__contact a:hover { color: #c4b5fd; }
.ld-footer__icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(167, 139, 250, .15);
	color: #c4b5fd;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
}

.ld-footer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	background: #fff;
	color: #0c0c10;
	font-weight: 600;
	font-size: 14px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	margin-bottom: 28px;
}
.ld-footer__cta:hover {
	background: #c4b5fd;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(167, 139, 250, .35);
}

.ld-footer__social {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	gap: 10px;
}
.ld-footer__social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .85);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease;
}
.ld-footer__social a:hover { background: #c4b5fd; color: #0c0c10; }
.ld-footer__social svg { width: 16px; height: 16px; }

.ld-footer__copy {
	font-size: 12px;
	color: rgba(255, 255, 255, .45);
	margin: 0;
}

/* ===== Services / Industries / Company columns ===== */
.ld-footer__heading {
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: .25em;
	color: rgba(255, 255, 255, .55);
	font-weight: 700;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ld-footer__svc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}

.ld-footer__svc-name {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ld-footer__svc-name::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: linear-gradient(135deg, #4ade80, #22c55e);
	display: inline-block;
	flex-shrink: 0;
}
.ld-footer__svc-group.is-seo    .ld-footer__svc-name { color: #86efac; }
.ld-footer__svc-group.is-seo    .ld-footer__svc-name::before { background: linear-gradient(135deg, #4ade80, #22c55e); }
.ld-footer__svc-group.is-ads    .ld-footer__svc-name { color: #f9a8d4; }
.ld-footer__svc-group.is-ads    .ld-footer__svc-name::before { background: linear-gradient(135deg, #ec4899, #be185d); }
.ld-footer__svc-group.is-b2b    .ld-footer__svc-name { color: #c4b5fd; }
.ld-footer__svc-group.is-b2b    .ld-footer__svc-name::before { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.ld-footer__svc-group.is-design .ld-footer__svc-name { color: #fcd34d; }
.ld-footer__svc-group.is-design .ld-footer__svc-name::before { background: linear-gradient(135deg, #fbbf24, #d97706); }

.ld-footer__svc-group ul,
.ld-footer__sub ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.ld-footer__svc-group a,
.ld-footer__sub a {
	color: rgba(255, 255, 255, .7);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.4;
	transition: color .15s ease;
}
.ld-footer__svc-group a:hover,
.ld-footer__sub a:hover { color: #fff; }

.ld-footer__sub-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .06);
}
.ld-footer__sub-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* ===== Spinning badge ===== */
.ld-footer__badge {
	position: absolute;
	right: clamp(24px, 4vw, 56px);
	bottom: 32px;
	width: 130px;
	height: 130px;
	color: rgba(255, 255, 255, .25);
	pointer-events: none;
	animation: ld-footer-spin 22s linear infinite;
}
.ld-footer__badge svg { width: 100%; height: 100%; }
@keyframes ld-footer-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
	.ld-footer__inner { grid-template-columns: 1fr; }
	.ld-footer__svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ld-footer__svc-grid { grid-template-columns: 1fr; }
	.ld-footer__sub-grid { grid-template-columns: 1fr; }
	.ld-footer__sub-cols { grid-template-columns: 1fr; }
	.ld-footer__badge { width: 90px; height: 90px; bottom: 16px; right: 16px; }
}

/* =========================================================
   Services mega-menu (header dropdown)
   ========================================================= */
.main-navigation .menu > .menu-item--mega,
.menu-item--mega { position: static !important; }

/* Hide the regular sub-menu under the mega menu item — we use .ld-mega instead */
.menu-item--mega > .sub-menu { display: none !important; }

.ld-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	padding: 36px clamp(40px, 6vw, 96px);
	background: #ffffff;
	border-top: 1px solid rgba(12, 17, 22, .08);
	border-bottom: 1px solid rgba(12, 17, 22, .08);
	box-shadow: 0 30px 80px rgba(12, 17, 22, .15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0);
	/* Stay clickable for the full close-delay so cursor can travel from the
	   link into the panel without losing the hover. */
	transition:
		opacity .22s ease .25s,
		visibility .22s ease .25s,
		pointer-events 0s linear .25s;
	z-index: 70;
}

/* Bridge — invisible strip covering the gap between link bottom and panel top.
   Vertical: 28px (covers a typical gap with margin to spare).
   Horizontal: only the bottom strip below the link, never overlapping siblings. */
.ld-mega::before {
	content: "";
	position: absolute;
	top: -28px;
	left: 0;
	right: 0;
	height: 28px;
	background: transparent;
}

.menu-item--mega:hover > .ld-mega,
.menu-item--mega:focus-within > .ld-mega,
.ld-mega:hover {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s; /* show instantly */
}

/* If a SIBLING nav item is being hovered, force the mega panel closed
   immediately — overrides the close-delay so panels don't stack. */
.main-navigation .menu:has(> li:hover) .menu-item--mega:not(:hover):not(:focus-within) > .ld-mega {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition-delay: 0s;
}
.main-navigation .menu:has(> li:hover) .menu-item--mini-mega:not(:hover):not(:focus-within) > .ld-mini-mega {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition-delay: 0s;
}

.ld-mega__col {
	padding: 8px 12px;
	border-radius: 10px;
}
.ld-mega__col + .ld-mega__col { border-left: 1px solid rgba(255, 255, 255, .04); }

.ld-mega__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0 14px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	margin-bottom: 12px;
	line-height: 1.2;
}
.ld-mega__head-text { flex: 1; }

.ld-mega__icon {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ld-mega__icon svg { width: 18px; height: 18px; }

.ld-mega__col.is-seo    .ld-mega__icon { background: rgba(34, 197, 94, .15); color: #4ade80; }
.ld-mega__col.is-seo    .ld-mega__head-text { color: #86efac; }
.ld-mega__col.is-ads    .ld-mega__icon { background: rgba(236, 72, 153, .18); color: #f9a8d4; }
.ld-mega__col.is-ads    .ld-mega__head-text { color: #f9a8d4; }
.ld-mega__col.is-b2b    .ld-mega__icon { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
.ld-mega__col.is-b2b    .ld-mega__head-text { color: #c4b5fd; }
.ld-mega__col.is-design .ld-mega__icon { background: rgba(245, 158, 11, .18); color: #fcd34d; }
.ld-mega__col.is-design .ld-mega__head-text { color: #fcd34d; }

.ld-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.ld-mega__list a {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	padding: 4px 0;
	transition: color .15s ease, padding-left .15s ease;
}
.ld-mega__list a:hover {
	/* Original dark-theme hover (color:#fff) removed — would make text
	   invisible on the light theme. Hover stays dark, handled later. */
	color: inherit;
	padding-left: 0;
}

@media (max-width: 960px) {
	.ld-mega {
		position: static;
		grid-template-columns: 1fr;
		max-width: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 8px 0 0;
	}
	.ld-mega__col + .ld-mega__col { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); margin-top: 8px; padding-top: 8px; }
}

/* =========================================================
   Industries mini-mega dropdown (smaller, 2-column)
   ========================================================= */
.main-navigation .menu > .menu-item--mini-mega { position: relative; }

.menu-item--mini-mega > .sub-menu { display: none !important; }

.ld-mini-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	min-width: 420px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 28px;
	padding: 24px 28px;
	background: #ffffff;
	border: 1px solid rgba(12, 17, 22, .08);
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(12, 17, 22, .15);
	margin-top: 18px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease .18s, visibility .22s ease .18s;
	z-index: 70;
}

/* Bridge so cursor can travel from the link to the panel.
   Thin so it doesn't overlap and absorb hover from sibling nav items. */
.ld-mini-mega::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 0;
	right: 0;
	height: 22px;
	background: transparent;
}

.menu-item--mini-mega:hover > .ld-mini-mega,
.menu-item--mini-mega:focus-within > .ld-mini-mega,
.ld-mini-mega:hover {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.ld-mini-mega a {
	display: block;
	padding: 10px 12px;
	font-size: 14px;
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	border-radius: 6px;
	transition: color .15s ease, background .15s ease, padding-left .15s ease;
	white-space: nowrap;
}
.ld-mini-mega a:hover {
	color: #fff;
	background: rgba(255, 255, 255, .04);
	padding-left: 16px;
}

@media (max-width: 960px) {
	.ld-mini-mega {
		position: static;
		transform: none;
		min-width: 0;
		grid-template-columns: 1fr;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: transparent;
		border: 0;
		box-shadow: none;
		margin: 8px 0 0;
		padding: 8px 0 0;
	}
}

/* =========================================================
   Contact specialist card
   ========================================================= */
.ct-specialist {
	padding: clamp(40px, 6vw, 80px) 0;
	background: #0c0c10;
}

.ct-specialist__panel {
	max-width: 880px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px;
	background: linear-gradient(160deg, #15151c 0%, #1c1c26 100%);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 22px;
	padding: 28px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
	align-items: center;
}

.ct-specialist__photo {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #0a0a14;
}
.ct-specialist__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ct-specialist__info {
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: #fff;
}

.ct-specialist__name {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	margin: 0;
	color: #fff;
}

.ct-specialist__role {
	margin: 0;
	color: rgba(255, 255, 255, .65);
	font-size: 14px;
	letter-spacing: .02em;
}

.ct-specialist__contact {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.ct-specialist__contact li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
}
.ct-specialist__contact a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	transition: color .15s ease;
}
.ct-specialist__contact a:hover { color: #c4b5fd; }
.ct-specialist__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(167, 139, 250, .15);
	color: #c4b5fd;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
}

.ct-specialist__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	transition: background .2s ease, transform .2s ease;
	margin-top: 4px;
}
.ct-specialist__linkedin:hover {
	background: #0a66c2;
	transform: translateY(-2px);
}
.ct-specialist__linkedin svg { width: 18px; height: 18px; }

.ct-specialist__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 14px 24px;
	background: #fff;
	color: #0c0c10;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
	align-self: flex-start;
}
.ct-specialist__cta:hover {
	background: #c4b5fd;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(167, 139, 250, .35);
}
.ct-specialist__cta-icon { font-size: 18px; }

@media (max-width: 720px) {
	.ct-specialist__panel { grid-template-columns: 1fr; padding: 20px; }
	.ct-specialist__photo { max-width: 280px; margin: 0 auto; aspect-ratio: 3 / 4; }
}

/* =========================================================
   New Contact page (lc- prefix) — two-column clean layout
   ========================================================= */
.lc-contact {
	background: #0c0c10;
	padding: clamp(60px, 8vw, 110px) 0;
	color: #fff;
}

/* Override the global container cap inside the contact page so the layout
   uses a wider workspace (matches the leadige reference proportions). */
.lc-contact .container {
	max-width: 1360px;
	padding-left: clamp(24px, 3vw, 48px);
	padding-right: clamp(24px, 3vw, 48px);
}

.lc-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(32px, 4vw, 72px);
	align-items: start;
	max-width: none;
}

/* ===== Left column ===== */
.lc-contact__title {
	font-family: var(--font-sans);
	font-size: clamp(30px, 3.4vw, 48px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 24px;
	color: #fff;
	max-width: 14ch;
}

.lc-contact__lead {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .7);
	margin: 0 0 36px;
	max-width: 100%;
}

/* The lavender "card" matching the reference */
.lc-card {
	background: linear-gradient(160deg, #2a2640 0%, #1a1730 100%);
	border: 1px solid rgba(167, 139, 250, .25);
	border-radius: 22px;
	padding: 28px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
	max-width: 100%;
}

.lc-card__top { display: grid; gap: 12px; margin-bottom: 20px; }

.lc-card__line {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #c4b5fd;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	transition: color .15s ease;
}
.lc-card__line:hover { color: #fff; }

.lc-card__icon {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #c4b5fd;
	font-size: 16px;
}

.lc-card__hours {
	color: rgba(255, 255, 255, .55);
	font-size: 13px;
	line-height: 1.6;
	margin: 8px 0 0;
}

.lc-card__divider {
	border: 0;
	height: 1px;
	background: rgba(167, 139, 250, .15);
	margin: 18px 0;
}

.lc-card__person {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 18px;
	align-items: center;
	margin-bottom: 22px;
}

.lc-card__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(167, 139, 250, .3);
	background: #1a1730;
}
.lc-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lc-card__person-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lc-card__name {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 4px;
	color: #fff;
}

.lc-card__person-info .lc-card__line {
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
	font-weight: 500;
	gap: 0;
}
.lc-card__person-info .lc-card__line:hover { color: #c4b5fd; }

.lc-card__linkedin {
	margin-top: 6px;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease, transform .2s ease;
	align-self: flex-start;
}
.lc-card__linkedin:hover {
	background: #0a66c2;
	transform: translateY(-2px);
}
.lc-card__linkedin svg { width: 16px; height: 16px; }

.lc-card__bookrow {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.lc-card__book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background: #1a1730;
	color: #fff;
	border: 1px solid rgba(167, 139, 250, .35);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: background .2s ease, transform .2s ease;
}
.lc-card__book:hover {
	background: #c4b5fd;
	color: #1a1730;
	transform: translateY(-2px);
}

.lc-card__via {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
	font-weight: 600;
	letter-spacing: .03em;
}
.lc-card__via-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #1abc9c;
}

/* ===== Right column — form ===== */
.lc-form__title {
	font-family: var(--font-sans);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 22px;
}

.lc-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	background: linear-gradient(160deg, #15151c 0%, #1c1c26 100%);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 22px;
	padding: 32px;
}

.lc-field {
	position: relative;
	display: block;
}
.lc-field--full { grid-column: 1 / -1; }

.lc-field input,
.lc-field textarea {
	width: 100%;
	padding: 16px 18px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	color: #fff;
	font: inherit;
	font-size: 15px;
	transition: border-color .15s ease, background .15s ease;
	box-sizing: border-box;
}
.lc-field input::placeholder,
.lc-field textarea::placeholder {
	color: rgba(255, 255, 255, .4);
}
.lc-field input:focus,
.lc-field textarea:focus {
	outline: none;
	border-color: #a78bfa;
	background: rgba(167, 139, 250, .06);
}

.lc-field textarea {
	resize: vertical;
	min-height: 130px;
	font-family: inherit;
}

.lc-field__note {
	position: absolute;
	right: 16px;
	top: 17px;
	font-size: 12px;
	color: rgba(255, 255, 255, .35);
	letter-spacing: .03em;
	pointer-events: none;
}
.lc-field--has-note input,
.lc-field--has-note textarea { padding-right: 96px; }

.lc-field--has-note textarea + .lc-field__note { top: 14px; right: 18px; }

.lc-form__actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.lc-form__submit {
	padding: 16px 36px;
	background: #fff;
	color: #0c0c10;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lc-form__submit:hover {
	background: #c4b5fd;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(167, 139, 250, .35);
}

@media (max-width: 960px) {
	.lc-contact__inner { grid-template-columns: 1fr; }
	.lc-form { grid-template-columns: 1fr; padding: 22px; }
}
@media (max-width: 560px) {
	.lc-card { padding: 22px; }
	.lc-card__person { grid-template-columns: 80px 1fr; gap: 14px; }
	.lc-card__photo { width: 80px; height: 80px; }
}

/* =========================================================
   Service Page (sp-) — long-form service landing
   Color variants: sp--green / sp--pink / sp--purple / sp--amber
   ========================================================= */
.service-page {
	background: #0c0c10;
	color: #fff;
	--sp-accent:    #4ade80;
	--sp-accent-2:  #22c55e;
	--sp-accent-fg: #052e16;
	--sp-accent-bg: rgba(34, 197, 94, .12);
}
.sp--pink   { --sp-accent: #f9a8d4; --sp-accent-2: #ec4899; --sp-accent-fg: #500724; --sp-accent-bg: rgba(236, 72, 153, .14); }
.sp--purple { --sp-accent: #c4b5fd; --sp-accent-2: #a78bfa; --sp-accent-fg: #1e1b4b; --sp-accent-bg: rgba(167, 139, 250, .15); }
.sp--amber  { --sp-accent: #fcd34d; --sp-accent-2: #f59e0b; --sp-accent-fg: #451a03; --sp-accent-bg: rgba(245, 158, 11, .15); }

/* Buttons */
.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
	cursor: pointer;
	border: 0;
	line-height: 1;
}
.sp-btn--accent {
	background: #fff;
	color: #0c0c10;
}
.sp-btn--accent:hover {
	background: var(--sp-accent);
	color: var(--sp-accent-fg);
	transform: translateY(-2px);
}
.sp-btn--ghost {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
}
.sp-btn--ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .45); }
.sp-btn--ghost-sm { padding: 9px 18px; font-size: 13px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; text-decoration: none; }
.sp-btn--dark { background: #1a1a22; color: #fff; border: 1px solid rgba(255, 255, 255, .14); }
.sp-btn--dark:hover { background: #2a2a35; transform: translateY(-2px); }

/* Hero */
.sp-hero { padding: clamp(60px, 8vw, 110px) 0; }
.sp-hero__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}
.sp-hero__title {
	font-family: var(--font-sans);
	font-size: clamp(36px, 4.2vw, 60px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
	color: var(--sp-accent);
}
.sp-hero__art { perspective: 1000px; }
.sp-hero__art svg,
.sp-hero__img {
	width: 100%;
	max-width: 540px;
	margin-left: auto;
	display: block;
	will-change: transform;
}
.sp-hero__img {
	height: auto;
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	transform-origin: center center;
}

/* Industries hero image */
.ip-hero__art { perspective: 1000px; }
.ip-hero__img {
	width: 100%;
	max-width: 480px;
	margin-left: auto;
	display: block;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
	will-change: transform;
}
.sp-hero__lead {
	font-size: clamp(15px, 1.3vw, 18px);
	color: rgba(255, 255, 255, .75);
	margin: 0 0 36px;
	line-height: 1.6;
	max-width: 520px;
}
.sp-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.sp-hero__art { color: var(--sp-accent); }
.sp-hero__art svg { width: 100%; max-width: 460px; margin-left: auto; display: block; }

/* Pillars (6-point list) */
.sp-pillars {
	background: #06060a;
	padding: clamp(48px, 6vw, 90px) 0;
	border-top: 1px solid rgba(255, 255, 255, .04);
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.sp-pillars__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: start;
}
.sp-pillars__list {
	display: grid;
	gap: 18px;
}
.sp-pillar {
	background: rgba(255, 255, 255, .02);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 16px;
	padding: 24px 26px;
}
.sp-pillar__num {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 32px;
	color: var(--sp-accent);
	display: block;
	margin-bottom: 6px;
	letter-spacing: -0.02em;
}
.sp-pillar__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.sp-pillar__desc  { font-size: 14px; color: rgba(255, 255, 255, .68); margin: 0; line-height: 1.6; }

.sp-pillars__aside { position: sticky; top: 100px; }
.sp-pillars__heading {
	font-size: clamp(24px, 2.6vw, 38px);
	font-weight: 700;
	color: var(--sp-accent);
	line-height: 1.2;
	margin: 0 0 18px;
}
.sp-pillars__sub { font-size: 15px; color: rgba(255, 255, 255, .65); line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
	.sp-pillars__inner { grid-template-columns: 1fr; }
	.sp-pillars__aside { position: static; order: -1; }
}

/* Long-term results */
.sp-longterm { padding: clamp(60px, 8vw, 110px) 0; }
.sp-longterm__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}
.sp-longterm__title {
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 800;
	color: var(--sp-accent);
	line-height: 1.1;
	margin: 0 0 22px;
}
.sp-longterm__copy p {
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 16px;
}
.sp-longterm__copy .sp-btn { margin-top: 12px; }
.sp-longterm__art { color: var(--sp-accent); }
.sp-longterm__art svg { width: 100%; max-width: 480px; margin-left: auto; display: block; }

@media (max-width: 800px) { .sp-longterm__inner { grid-template-columns: 1fr; } }

/* Benefits (optional section, numbered list with large left number) */
.sp-benefits {
	padding: clamp(60px, 8vw, 110px) 0;
	background: #06060a;
}
.sp-benefits__title {
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 800;
	text-align: center;
	color: var(--sp-accent);
	margin: 0 0 56px;
}
.sp-benefits__list {
	display: grid;
	gap: 14px;
	max-width: 940px;
	margin: 0 auto;
}
.sp-benefit {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	align-items: start;
	padding: 24px 28px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 16px;
	transition: border-color .2s ease, background .2s ease;
}
.sp-benefit:hover { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); }
.sp-benefit__num {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 44px;
	color: var(--sp-accent);
	letter-spacing: -0.02em;
	line-height: 1;
}
.sp-benefit__title { font-size: 18px; color: #fff; margin: 0 0 8px; font-weight: 700; }
.sp-benefit__desc  { font-size: 14px; color: rgba(255, 255, 255, .7); line-height: 1.6; margin: 0; }

@media (max-width: 600px) {
	.sp-benefit { grid-template-columns: 60px 1fr; padding: 20px; gap: 16px; }
	.sp-benefit__num { font-size: 32px; }
}

/* Service types */
.sp-types {
	background: #06060a;
	padding: clamp(60px, 8vw, 110px) 0;
}
.sp-types__title {
	font-size: clamp(26px, 3.2vw, 42px);
	font-weight: 800;
	text-align: center;
	color: var(--sp-accent);
	margin: 0 0 16px;
	line-height: 1.15;
}
.sp-types__lead {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 56px;
	color: rgba(255, 255, 255, .65);
	font-size: 15px;
	line-height: 1.6;
}
.sp-types__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 1100px;
	margin: 0 auto 28px;
}
.sp-type-card {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 18px;
	padding: 32px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sp-type-card__visual {
	color: var(--sp-accent);
	background: var(--sp-accent-bg);
	border-radius: 12px;
	padding: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sp-type-card__visual svg { width: 100%; max-width: 200px; }
.sp-type-card__title { font-size: 22px; font-weight: 700; color: var(--sp-accent); margin: 0; }
.sp-type-card__desc  { font-size: 14px; color: rgba(255, 255, 255, .7); line-height: 1.6; margin: 0; }
.sp-type-card .sp-btn { align-self: flex-start; margin-top: auto; }
.sp-type-card--centered { max-width: 540px; margin: 0 auto; }

@media (max-width: 800px) {
	.sp-types__grid { grid-template-columns: 1fr; }
}

/* Audit CTA */
.sp-audit { padding: clamp(48px, 6vw, 90px) 0; }
.sp-audit__inner {
	background: linear-gradient(135deg, rgba(34, 197, 94, .12) 0%, rgba(34, 197, 94, .04) 100%);
	border: 1px solid var(--sp-accent-bg);
	border-radius: 24px;
	padding: clamp(32px, 5vw, 56px);
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 32px;
	align-items: center;
}
.sp--pink   .sp-audit__inner { background: linear-gradient(135deg, rgba(236, 72, 153, .12), rgba(236, 72, 153, .04)); }
.sp--purple .sp-audit__inner { background: linear-gradient(135deg, rgba(167, 139, 250, .12), rgba(167, 139, 250, .04)); }
.sp--amber  .sp-audit__inner { background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(245, 158, 11, .04)); }
.sp-audit__title {
	font-size: clamp(24px, 2.8vw, 36px);
	font-weight: 800;
	color: var(--sp-accent);
	margin: 0 0 16px;
	line-height: 1.2;
}
.sp-audit__copy p { color: rgba(255, 255, 255, .78); margin: 0 0 24px; line-height: 1.6; }
.sp-audit__art   { color: var(--sp-accent); }
.sp-audit__art svg { width: 100%; max-width: 240px; margin-left: auto; display: block; }

@media (max-width: 800px) { .sp-audit__inner { grid-template-columns: 1fr; } }

/* Team */
.sp-team { padding: clamp(60px, 8vw, 110px) 0; }
.sp-team__title {
	font-size: clamp(26px, 3.2vw, 42px);
	font-weight: 800;
	text-align: center;
	color: var(--sp-accent);
	margin: 0 0 48px;
}
.sp-team__grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 800px; margin: 0 auto; }
.sp-team-card {
	background: linear-gradient(160deg, rgba(34, 197, 94, .15) 0%, rgba(20, 50, 30, .25) 100%);
	border: 1px solid var(--sp-accent-bg);
	border-radius: 22px;
	padding: 28px;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 28px;
	align-items: center;
}
.sp--pink   .sp-team-card { background: linear-gradient(160deg, rgba(236, 72, 153, .12), rgba(50, 20, 35, .25)); }
.sp--purple .sp-team-card { background: linear-gradient(160deg, rgba(167, 139, 250, .15), rgba(40, 30, 70, .25)); }
.sp--amber  .sp-team-card { background: linear-gradient(160deg, rgba(245, 158, 11, .12), rgba(70, 40, 10, .25)); }
.sp-team-card__photo {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 16px;
	overflow: hidden;
}
.sp-team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-team-card__name { font-size: 22px; font-weight: 700; color: var(--sp-accent); margin: 0 0 10px; }
.sp-team-card__bio  { color: rgba(255, 255, 255, .75); line-height: 1.6; margin: 0 0 16px; font-size: 14px; }
.sp-team-card__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	transition: background .2s ease;
}
.sp-team-card__linkedin:hover { background: #0a66c2; }
.sp-team-card__linkedin svg { width: 16px; height: 16px; }
.sp-team-card__tag {
	display: inline-block;
	padding: 4px 12px;
	background: rgba(255, 255, 255, .08);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .65);
	margin-left: 12px;
	font-weight: 600;
}

@media (max-width: 600px) { .sp-team-card { grid-template-columns: 1fr; } }

/* Cases */
.sp-cases {
	padding: clamp(60px, 8vw, 110px) 0;
	background: #06060a;
}
.sp-cases__title { font-size: clamp(26px, 3vw, 38px); font-weight: 800; text-align: center; color: #fff; margin: 0 0 12px; }
.sp-cases__lead  { text-align: center; color: rgba(255, 255, 255, .6); max-width: 600px; margin: 0 auto 48px; font-size: 15px; }
.sp-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sp-case {
	background: #0e0e18;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 18px;
	overflow: hidden;
}
.sp-case__visual {
	background: linear-gradient(160deg, rgba(34, 197, 94, .12), rgba(20, 30, 25, .25));
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 180px;
}
.sp--pink   .sp-case__visual { background: linear-gradient(160deg, rgba(236, 72, 153, .12), rgba(35, 15, 25, .25)); }
.sp--purple .sp-case__visual { background: linear-gradient(160deg, rgba(167, 139, 250, .12), rgba(30, 25, 50, .25)); }
.sp--amber  .sp-case__visual { background: linear-gradient(160deg, rgba(245, 158, 11, .12), rgba(50, 30, 10, .25)); }

.sp-case__period { font-size: 11px; letter-spacing: .15em; color: rgba(255, 255, 255, .6); text-transform: uppercase; font-weight: 700; }
.sp-case__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	background: rgba(0, 0, 0, .3);
	padding: 14px;
	border-radius: 10px;
	margin-top: auto;
}
.sp-case__stats span { display: block; font-size: 10px; color: rgba(255, 255, 255, .55); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.sp-case__stats strong { font-size: 18px; color: var(--sp-accent); font-weight: 700; }

.sp-case__body { padding: 22px; }
.sp-case__date { font-size: 12px; color: rgba(255, 255, 255, .5); }
.sp-case__body h3 { font-size: 16px; line-height: 1.4; color: #fff; margin: 8px 0 16px; }

@media (max-width: 900px) { .sp-cases__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sp-cases__grid { grid-template-columns: 1fr; } }

/* Why */
.sp-why { padding: clamp(60px, 8vw, 110px) 0; }
.sp-why__title { font-size: clamp(26px, 3vw, 38px); font-weight: 800; text-align: center; color: #fff; margin: 0 0 48px; }
.sp-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sp-why-card {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 18px;
	padding: 32px;
	text-align: center;
}
.sp-why-card__icon { color: var(--sp-accent); margin-bottom: 18px; }
.sp-why-card__icon svg { width: 56px; height: 56px; }
.sp-why-card__title { font-size: 18px; color: #fff; margin: 0 0 10px; font-weight: 700; }
.sp-why-card__desc  { font-size: 14px; color: rgba(255, 255, 255, .68); line-height: 1.6; margin: 0; }

@media (max-width: 800px) { .sp-why__grid { grid-template-columns: 1fr; } }

/* FAQ */
.sp-faq {
	padding: clamp(60px, 8vw, 110px) 0;
	background: #06060a;
}
.sp-faq__title { font-size: clamp(40px, 5vw, 64px); font-weight: 800; text-align: center; color: var(--sp-accent); margin: 0 0 40px; letter-spacing: .04em; }
.sp-faq__list  { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.sp-faq__item {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 14px;
	padding: 0 24px;
	transition: background .2s ease;
}
.sp-faq__item[open] { background: rgba(255, 255, 255, .05); }
.sp-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 16px;
	color: #fff;
	list-style: none;
}
.sp-faq__item summary::-webkit-details-marker { display: none; }
.sp-faq__icon {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--sp-accent-bg);
	color: var(--sp-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	transition: transform .2s ease;
	flex-shrink: 0;
}
.sp-faq__item[open] .sp-faq__icon { transform: rotate(45deg); }
.sp-faq__a { padding: 0 0 22px; color: rgba(255, 255, 255, .72); line-height: 1.6; font-size: 14px; }

/* Related */
.sp-related { padding: clamp(60px, 8vw, 110px) 0; }
.sp-related__title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; text-align: center; color: #fff; margin: 0 0 40px; }
.sp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1100px; margin: 0 auto; }
.sp-related-card {
	display: block;
	padding: 32px;
	border-radius: 18px;
	text-decoration: none;
	color: #fff;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .06);
	transition: transform .2s ease, border-color .2s ease;
	position: relative;
}
.sp-related-card:hover { transform: translateY(-4px); }
.sp-related-card.is-purple { border-color: rgba(167, 139, 250, .3); background: linear-gradient(160deg, rgba(167, 139, 250, .1), rgba(30, 25, 50, .25)); }
.sp-related-card.is-pink   { border-color: rgba(236, 72, 153, .3); background: linear-gradient(160deg, rgba(236, 72, 153, .1), rgba(35, 15, 25, .25)); }
.sp-related-card.is-amber  { border-color: rgba(245, 158, 11, .3); background: linear-gradient(160deg, rgba(245, 158, 11, .1), rgba(50, 30, 10, .25)); }
.sp-related-card h3 { font-size: 20px; margin: 0 0 8px; color: #fff; font-weight: 700; }
.sp-related-card p  { font-size: 14px; color: rgba(255, 255, 255, .65); margin: 0; }
.sp-related-card.is-purple h3 { color: #c4b5fd; }
.sp-related-card.is-pink   h3 { color: #f9a8d4; }
.sp-related-card.is-amber  h3 { color: #fcd34d; }
.sp-related-card__arrow {
	position: absolute;
	top: 28px;
	right: 28px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}
.sp-related-card:hover .sp-related-card__arrow { transform: translateX(4px); }

@media (max-width: 800px) { .sp-related__grid { grid-template-columns: 1fr; } }

/* Let's Talk */
.sp-talk { padding: clamp(60px, 8vw, 110px) 0; }
.sp-talk__panel {
	max-width: 720px;
	margin: 0 auto;
	background: linear-gradient(160deg, #15151c 0%, #1c1c26 100%);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 24px;
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
}
.sp-talk__title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; color: #fff; margin: 0 0 18px; }
.sp-talk__email { margin: 0 0 12px; font-size: 18px; }
.sp-talk__email a { color: var(--sp-accent); text-decoration: none; }
.sp-talk__email a:hover { color: #fff; }
.sp-talk__hours { color: rgba(255, 255, 255, .55); font-size: 14px; margin: 0 0 28px; }

@media (max-width: 900px) { .sp-hero__inner { grid-template-columns: 1fr; } }

/* =========================================================
   Services index page (si-) — landing at /services
   ========================================================= */
.services-index-page {
	background: #0c0c10;
	color: #fff;
}

.si-hero {
	padding: clamp(60px, 8vw, 110px) 0;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.si-hero__inner { max-width: 880px; margin: 0 auto; }
.si-hero__eyebrow {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(22, 196, 127, .14);
	border: 1px solid rgba(22, 196, 127, .3);
	color: #0fa968;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 22px;
}
.si-hero__title {
	font-size: clamp(36px, 4.6vw, 64px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
	color: #fff;
}
.si-hero__lead {
	font-size: clamp(15px, 1.3vw, 18px);
	color: rgba(255, 255, 255, .72);
	line-height: 1.6;
	margin: 0 0 32px;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}
.si-hero__cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.si-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
	cursor: pointer;
	border: 0;
	line-height: 1;
}
.si-btn--accent { background: linear-gradient(135deg, #16c47f, #0bb5d6); color: #fff; box-shadow: 0 6px 20px rgba(22, 196, 127, .3); }
.si-btn--accent:hover { background: linear-gradient(135deg, #1ed692, #1bc5e8); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22, 196, 127, .42); }
.si-btn--ghost { background: transparent; color: #0c1116; border: 1px solid rgba(12, 17, 22, .2); }
.si-btn--ghost:hover { background: rgba(22, 196, 127, .06); border-color: #16c47f; color: #0fa968; }

/* Category sections — alternate dark/darker backgrounds */
.si-category {
	padding: clamp(56px, 7vw, 100px) 0;
}
.si-category:nth-child(odd of .si-category) { background: #06060a; }

.si-category__head { margin-bottom: 36px; }
.si-category__pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.si-category__title {
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 800;
	margin: 0 0 12px;
	letter-spacing: -0.02em;
}
.si-category__lead {
	font-size: 16px;
	color: rgba(255, 255, 255, .7);
	max-width: 720px;
	margin: 0;
	line-height: 1.6;
}

/* Color variants — darkened for legibility on light bg */
.si-category--green  .si-category__pill  { background: rgba(22, 196, 127, .15); color: #0fa968; }
.si-category--green  .si-category__title { color: #0fa968; }
.si-category--pink   .si-category__pill  { background: rgba(236, 72, 153, .15); color: #be185d; }
.si-category--pink   .si-category__title { color: #be185d; }
.si-category--purple .si-category__pill  { background: rgba(124, 58, 237, .15); color: #6d28d9; }
.si-category--purple .si-category__title { color: #6d28d9; }
.si-category--amber  .si-category__pill  { background: rgba(245, 158, 11, .15); color: #b45309; }
.si-category--amber  .si-category__title { color: #b45309; }

/* Service cards grid */
.si-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.si-service-card {
	display: block;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 14px;
	padding: 24px 26px;
	color: #fff;
	text-decoration: none;
	position: relative;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1), background .25s ease, border-color .25s ease;
}
.si-service-card:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .18);
}
.si-category--green  .si-service-card:hover { border-color: rgba(34, 197, 94, .35); }
.si-category--pink   .si-service-card:hover { border-color: rgba(236, 72, 153, .35); }
.si-category--purple .si-service-card:hover { border-color: rgba(167, 139, 250, .35); }
.si-category--amber  .si-service-card:hover { border-color: rgba(245, 158, 11, .35); }

.si-service-card__title { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: #0c1116; }
.si-service-card__desc {
	font-size: 13px;
	color: #2a333d;
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.si-service-card__arrow {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(22, 196, 127, .14);
	color: #0fa968;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: transform .2s ease, background .2s ease;
}
.si-service-card:hover .si-service-card__arrow { transform: translateX(3px); }

@media (max-width: 900px) { .si-services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .si-services-grid { grid-template-columns: 1fr; } }

/* CTA */
.si-cta { padding: clamp(60px, 8vw, 110px) 0; }
.si-cta__panel {
	max-width: 720px;
	margin: 0 auto;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(22, 196, 127, .28), transparent 70%),
		linear-gradient(160deg, #0c1f1a 0%, #0c1116 55%, #0a1f24 100%);
	border: 1px solid rgba(22, 196, 127, .35);
	border-radius: 24px;
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	box-shadow: 0 20px 50px -20px rgba(22, 196, 127, .25), 0 8px 20px -10px rgba(11, 181, 214, .18);
}
.si-cta__title {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 16px;
}
.si-cta__panel p { color: rgba(255, 255, 255, .82); margin: 0 0 28px; line-height: 1.6; }

/* =========================================================
   Industries page (ip-) — light theme, dark text
   ========================================================= */
.industries-page {
	background: transparent;
	color: #0c1116;
}

.ip-hero {
	padding: clamp(60px, 8vw, 110px) 0;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.ip-hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}
.ip-hero__eyebrow {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(22, 196, 127, .14);
	border: 1px solid rgba(22, 196, 127, .3);
	color: #0fa968;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 22px;
}
.ip-hero__title {
	font-size: clamp(36px, 4.6vw, 64px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
	color: #0c1116;
}
.ip-hero__lead {
	font-size: clamp(15px, 1.3vw, 18px);
	color: #2a333d;
	line-height: 1.6;
	margin: 0 0 32px;
	max-width: 560px;
}
.ip-hero__cta {
	display: inline-flex;
	align-items: center;
	padding: 14px 30px;
	background: linear-gradient(135deg, #16c47f, #0bb5d6);
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 6px 20px rgba(22, 196, 127, .3);
	transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s ease, box-shadow .25s ease;
}
.ip-hero__cta:hover {
	background: linear-gradient(135deg, #1ed692, #1bc5e8);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(22, 196, 127, .45);
}

/* ===== Right-side hero crosshair — elegant rotating target with pulsing core ===== */
.ip-hero__art {
	color: #16c47f;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ip-hero__art::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(22, 196, 127, .28) 0%, rgba(11, 181, 214, .14) 45%, transparent 70%);
	filter: blur(28px);
	animation: ip-art-glow 8s ease-in-out infinite alternate;
	z-index: 0;
}
.ip-hero__art svg {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	margin-left: auto;
	display: block;
	color: #16c47f;
	filter: drop-shadow(0 8px 24px rgba(22, 196, 127, .28));
	animation: ip-art-spin 28s linear infinite;
	transform-origin: 50% 50%;
}
.ip-hero__art svg circle,
.ip-hero__art svg path:not(:first-child) {
	transform-origin: 50% 50%;
	animation: ip-art-pulse 3.2s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes ip-art-spin {
	to { transform: rotate(360deg); }
}
@keyframes ip-art-pulse {
	0%, 100% { opacity: .9; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.04); }
}
@keyframes ip-art-glow {
	0%   { transform: scale(.92); opacity: .8; }
	100% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.ip-hero__art svg,
	.ip-hero__art svg circle,
	.ip-hero__art svg path:not(:first-child),
	.ip-hero__art::before { animation: none !important; }
}

@media (max-width: 800px) { .ip-hero__inner { grid-template-columns: 1fr; } }

/* Industries grid */
.ip-grid-section {
	padding: clamp(60px, 8vw, 110px) 0;
}
.ip-grid-section .container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.ip-card {
	background: #ffffff;
	border: 1px solid rgba(12, 17, 22, .08);
	border-radius: 22px;
	padding: 32px;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 24px;
	scroll-margin-top: 110px;
	box-shadow: 0 1px 2px rgba(12, 17, 22, .04);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1),
		border-color .25s ease,
		box-shadow .35s ease;
}
.ip-card:hover {
	transform: translateY(-4px);
	border-color: rgba(22, 196, 127, .35);
	box-shadow: 0 18px 40px -16px rgba(22, 196, 127, .25),
		0 6px 18px -8px rgba(11, 181, 214, .15);
}
/* When the card is the anchor target, draw the eye to it */
.ip-card:target {
	border-color: #16c47f;
	box-shadow: 0 0 0 4px rgba(22, 196, 127, .15),
		0 18px 40px -16px rgba(22, 196, 127, .35);
	animation: ip-card-target-pulse 1.6s ease-out 1;
}
@keyframes ip-card-target-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(22, 196, 127, .55); }
	100% { box-shadow: 0 0 0 18px rgba(22, 196, 127, 0); }
}

.ip-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(22, 196, 127, .14), rgba(11, 181, 214, .14));
	color: #0fa968;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.ip-card:hover .ip-card__icon {
	transform: rotate(-4deg) scale(1.06);
	background: linear-gradient(135deg, rgba(22, 196, 127, .2), rgba(11, 181, 214, .2));
}
.ip-card__icon svg { width: 28px; height: 28px; }

.ip-card__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px;
	color: #0c1116;
}
.ip-card__desc {
	font-size: 14px;
	color: #2a333d;
	line-height: 1.6;
	margin: 0 0 18px;
}

.ip-card__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.ip-card__metric {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	background: rgba(12, 17, 22, .04);
	border: 1px solid rgba(12, 17, 22, .08);
	color: #2a333d;
}
.ip-card__metric small { font-size: 10px; opacity: .85; }
.ip-card__metric--up   { color: #0fa968; border-color: rgba(22, 196, 127, .3); background: rgba(22, 196, 127, .08); }
.ip-card__metric--down { color: #be185d; border-color: rgba(236, 72, 153, .3); background: rgba(236, 72, 153, .08); }

.ip-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ip-card__tag {
	padding: 4px 10px;
	background: rgba(12, 17, 22, .04);
	border: 1px solid rgba(12, 17, 22, .08);
	border-radius: 6px;
	font-size: 11px;
	color: #444f5a;
	letter-spacing: .03em;
}

@media (max-width: 800px) { .ip-grid-section .container { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ip-card { grid-template-columns: 1fr; } .ip-card__icon { width: 56px; height: 56px; } }

/* Approach section — light band */
.ip-approach {
	padding: clamp(60px, 8vw, 110px) 0;
	background: rgba(22, 196, 127, .04);
	border-top: 1px solid rgba(12, 17, 22, .06);
	border-bottom: 1px solid rgba(12, 17, 22, .06);
}
.ip-approach__inner { max-width: 1100px; margin: 0 auto; }
.ip-approach__title {
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 800;
	color: #0c1116;
	margin: 0 0 48px;
	line-height: 1.1;
	text-align: center;
}
.ip-approach__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.ip-approach__item {
	background: #ffffff;
	border: 1px solid rgba(12, 17, 22, .08);
	border-radius: 16px;
	padding: 28px;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.ip-approach__item:hover {
	transform: translateY(-3px);
	border-color: rgba(22, 196, 127, .35);
	box-shadow: 0 14px 32px -16px rgba(22, 196, 127, .25);
}
.ip-approach__num {
	display: block;
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 32px;
	background: linear-gradient(135deg, #16c47f, #0bb5d6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 12px;
	letter-spacing: -0.02em;
}
.ip-approach__item h3 { font-size: 18px; color: #0c1116; margin: 0 0 8px; font-weight: 700; }
.ip-approach__item p  { font-size: 14px; color: #444f5a; line-height: 1.6; margin: 0; }

@media (max-width: 700px) { .ip-approach__grid { grid-template-columns: 1fr; } }

/* CTA panel — dark green-tinted card that pops on the light page */
.ip-cta { padding: clamp(60px, 8vw, 110px) 0; }
.ip-cta__panel {
	max-width: 720px;
	margin: 0 auto;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(22, 196, 127, .28), transparent 70%),
		linear-gradient(160deg, #0c1f1a 0%, #0c1116 55%, #0a1f24 100%);
	border: 1px solid rgba(22, 196, 127, .35);
	border-radius: 24px;
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	box-shadow: 0 20px 50px -20px rgba(22, 196, 127, .25), 0 8px 20px -10px rgba(11, 181, 214, .18);
}
.ip-cta__title {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 16px;
}
.ip-cta__panel p {
	color: rgba(255, 255, 255, .82);
	margin: 0 0 28px;
	line-height: 1.6;
}
.ip-cta__btn {
	display: inline-flex;
	align-items: center;
	padding: 14px 30px;
	background: linear-gradient(135deg, #16c47f, #0bb5d6);
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 6px 20px rgba(22, 196, 127, .3);
	transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s ease, box-shadow .25s ease;
}
.ip-cta__btn:hover {
	background: linear-gradient(135deg, #1ed692, #1bc5e8);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(22, 196, 127, .45);
}

/* =========================================================
   UI polish — sitewide micro-interactions
   ========================================================= */

/* Smooth scroll for any in-page anchor link */
html { scroll-behavior: smooth; }

/* Better keyboard focus rings — visible only on keyboard, not mouse */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid #c4b5fd;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Smarter image rendering for team/case-study photos */
.lc-card__photo img,
.sp-team-card__photo img,
.ct-specialist__photo img {
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}
.lc-card:hover .lc-card__photo img,
.sp-team-card:hover .sp-team-card__photo img,
.ct-specialist__panel:hover .ct-specialist__photo img {
	transform: scale(1.04);
}

/* Service / industry / why-us / case cards — refined hover lift */
.ld-service-card,
.ld-industry-card,
.ld-case-card,
.sp-pillar,
.sp-why-card,
.sp-benefit,
.sp-case,
.sp-related-card {
	transition: transform .35s cubic-bezier(.22, 1, .36, 1),
	            border-color .25s ease,
	            background .25s ease,
	            box-shadow .25s ease;
}
.ld-service-card:hover,
.ld-industry-card:hover,
.ld-case-card:hover,
.sp-pillar:hover,
.sp-why-card:hover,
.sp-benefit:hover,
.sp-case:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

/* Buttons — subtle "shine" sweep on hover (white pill buttons) */
.hero__cta-pill,
.header-cta-btn,
.ld-footer__cta,
.sp-btn--accent,
.lc-form__submit {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.hero__cta-pill::after,
.header-cta-btn::after,
.ld-footer__cta::after,
.sp-btn--accent::after,
.lc-form__submit::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
	z-index: 0;
}
.hero__cta-pill:hover::after,
.header-cta-btn:hover::after,
.ld-footer__cta:hover::after,
.sp-btn--accent:hover::after,
.lc-form__submit:hover::after {
	transform: translateX(120%);
}

/* Headings get a tighter letter-spacing animation in on reveal */
[data-reveal] h1,
[data-reveal] h2 {
	letter-spacing: 0.01em;
	transition: letter-spacing .9s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-visible h1,
[data-reveal].is-visible h2 {
	letter-spacing: -0.01em;
}

/* Section underline accent on hover for nav links — already exists; refine timing */
.main-navigation a {
	transition: color .2s ease, transform .2s ease;
}

/* Service tags / link pills on cards */
.ld-tag {
	transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.ld-tag:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .25);
	transform: translateY(-1px);
}

/* FAQ items - smoother open animation */
.sp-faq__item summary { transition: color .2s ease; }
.sp-faq__item:hover summary { color: var(--sp-accent); }

/* Reduced motion — kill everything */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Sitewide section spacing normalization
   Single source of truth so every page has a consistent rhythm.
   --section-pad scales smoothly from mobile to desktop.
   ========================================================= */
:root {
	--section-pad-y: clamp(56px, 6.5vw, 88px);
	--section-pad-y-tight: clamp(40px, 5vw, 64px);
	--section-pad-x: clamp(8px, 1vw, 24px);
	--container-max: min(1320px, 90vw);
}

/* Sitewide container — standard horizontal padding that scales with viewport */
.container {
	max-width: var(--container-max);
	padding-left: var(--section-pad-x);
	padding-right: var(--section-pad-x);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Per-page containers all share the same max-width and side padding */
.lc-contact .container,
.industries-page .container,
.service-page .container,
.front-page .container,
.ip-grid-section .container,
.ip-approach .container,
.ip-cta .container {
	max-width: var(--container-max);
	padding-left: var(--section-pad-x);
	padding-right: var(--section-pad-x);
}

/* Standard sections — all main page content blocks */
.ld-section,
.sp-hero, .sp-pillars, .sp-longterm, .sp-types, .sp-audit,
.sp-team, .sp-cases, .sp-why, .sp-faq, .sp-related, .sp-talk, .sp-benefits,
.lc-contact,
.ip-hero, .ip-grid-section, .ip-approach, .ip-cta {
	padding-top: var(--section-pad-y);
	padding-bottom: var(--section-pad-y);
}

/* Hero sections at the top of a page get a tighter top padding
   because they sit immediately under the sticky header */
.sp-hero, .ip-hero, .lc-contact {
	padding-top: clamp(40px, 5vw, 64px);
}

/* Sections that follow another full-padded section get a slightly
   tighter top to avoid doubled gaps */
.sp-pillars + section,
.ld-section + .ld-section,
.ip-grid-section + .ip-approach,
.ip-approach + .ip-cta {
	padding-top: var(--section-pad-y-tight);
}

/* Footer sits flush — no extra gap above it */
.ld-footer { margin-top: 0; padding-top: clamp(48px, 6vw, 80px); }

/* Last section before footer gets a tighter bottom */
main > section:last-of-type {
	padding-bottom: var(--section-pad-y-tight);
}

/* Container max-width consistency */
.lc-contact .container,
.industries-page .container,
.service-page .container,
.front-page .container,
.case-studies-page .container,
.team-page .container,
.blog-page .container,
.ld-footer__inner {
	box-sizing: border-box;
}

/* =========================================================
   CASE STUDIES PAGE  ( /case-studies )
========================================================= */
.case-studies-page {
	padding-bottom: var(--section-pad-y);
}
.cs-hero {
	padding: var(--section-pad-y) 0 calc(var(--section-pad-y) * 0.6);
}
.cs-hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: clamp(32px, 4vw, 64px);
}
.cs-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6c5ce7;
	font-weight: 700;
	margin-bottom: 14px;
}
.cs-hero__title {
	font-size: clamp(36px, 4.2vw, 62px);
	line-height: 1.05;
	font-weight: 800;
	margin: 0 0 18px;
	letter-spacing: -0.02em;
}
.cs-hero__lead {
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.65;
	color: rgba(232, 232, 245, 0.78);
	max-width: 56ch;
}
.cs-hero__meta {
	display: flex;
	gap: clamp(24px, 3vw, 48px);
	margin-top: 28px;
}
.cs-hero__meta > div {
	display: flex;
	flex-direction: column;
}
.cs-hero__meta strong {
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.01em;
}
.cs-hero__meta span {
	font-size: 12px;
	color: rgba(232, 232, 245, 0.55);
	letter-spacing: 0.04em;
	margin-top: 4px;
}
.cs-hero__art {
	color: #6c5ce7;
	display: flex;
	justify-content: center;
}
.cs-hero__art svg {
	width: 100%;
	max-width: 460px;
	height: auto;
}

/* filters */
.cs-filters {
	padding: 0 0 24px;
}
.cs-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cs-chip {
	background: rgba(255, 255, 255, 0.04);
	color: rgba(232, 232, 245, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.cs-chip:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
}
.cs-chip.is-active {
	background: #6c5ce7;
	color: #fff;
	border-color: #6c5ce7;
}

/* grid */
.cs-grid-section {
	padding: 12px 0 var(--section-pad-y);
}
.cs-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2vw, 28px);
}
.cs-card {
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cs-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}
.cs-card__visual {
	padding: 22px 22px 18px;
	min-height: 168px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	color: #0d0d12;
}
.cs-card.is-cool   .cs-card__visual { background: linear-gradient(135deg, #6ee7ff 0%, #6c5ce7 110%); }
.cs-card.is-warm   .cs-card__visual { background: linear-gradient(135deg, #ffd166 0%, #ff6b6b 110%); }
.cs-card.is-bright .cs-card__visual { background: linear-gradient(135deg, #b9f74e 0%, #34d399 110%); }
.cs-card.is-mint   .cs-card__visual { background: linear-gradient(135deg, #a7f3d0 0%, #34d399 110%); }
.cs-card.is-rose   .cs-card__visual { background: linear-gradient(135deg, #fbcfe8 0%, #ec4899 110%); }

.cs-card__sector {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(13, 13, 18, 0.72);
}
.cs-card__metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 12px;
}
.cs-card__metrics > div {
	display: flex;
	flex-direction: column;
}
.cs-card__metrics span {
	font-size: 11px;
	color: rgba(13, 13, 18, 0.62);
	letter-spacing: 0.04em;
}
.cs-card__metrics strong {
	font-size: 17px;
	font-weight: 800;
	color: #0d0d12;
	letter-spacing: -0.01em;
}

.cs-card__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.cs-card__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: #fff;
	letter-spacing: -0.01em;
}
.cs-card__lead {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(232, 232, 245, 0.72);
	margin: 0;
}
.cs-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cs-card__tag {
	font-size: 11px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(232, 232, 245, 0.78);
}
.cs-card__more {
	margin-top: auto;
	color: #6ee7ff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.cs-card__more:hover { color: #fff; }

/* CTA band */
.cs-cta {
	padding: 0 0 var(--section-pad-y);
}
.cs-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: clamp(32px, 4vw, 56px);
	border-radius: 22px;
	background: linear-gradient(135deg, #2b1d6e 0%, #6c5ce7 100%);
	color: #fff;
	flex-wrap: wrap;
}
.cs-cta__copy h2 {
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.cs-cta__copy p {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
	max-width: 56ch;
}
.cs-cta__btn {
	background: #fff;
	color: #2b1d6e;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}
.cs-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   MEET THE TEAM  ( /meet-the-team )
========================================================= */
.team-page {
	padding-bottom: var(--section-pad-y);
}
.tp-hero {
	padding: var(--section-pad-y) 0 calc(var(--section-pad-y) * 0.5);
}
.tp-hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: clamp(32px, 4vw, 64px);
}
.tp-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #34d399;
	font-weight: 700;
	margin-bottom: 14px;
}
.tp-hero__title {
	font-size: clamp(36px, 4.2vw, 62px);
	line-height: 1.05;
	font-weight: 800;
	margin: 0 0 18px;
	letter-spacing: -0.02em;
}
.tp-hero__lead {
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.65;
	color: rgba(232, 232, 245, 0.78);
	max-width: 58ch;
}
.tp-hero__cta {
	display: inline-block;
	margin-top: 24px;
	background: #34d399;
	color: #0d0d12;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s;
}
.tp-hero__cta:hover { transform: translateY(-2px); }
.tp-hero__art {
	color: #34d399;
	display: flex;
	justify-content: center;
}
.tp-hero__art svg {
	width: 100%;
	max-width: 440px;
	height: auto;
}

.tp-section__title {
	font-size: clamp(26px, 2.4vw, 38px);
	font-weight: 800;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.tp-section__lead {
	color: rgba(232, 232, 245, 0.7);
	font-size: 15px;
	margin: 0 0 36px;
	max-width: 60ch;
}

.tp-grid-section {
	padding: calc(var(--section-pad-y) * 0.4) 0;
}
.tp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2vw, 28px);
}
.tp-card {
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tp-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}
.tp-card__avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 30px;
	letter-spacing: -0.02em;
	color: #0d0d12;
	flex-shrink: 0;
}
.tp-card.is-purple .tp-card__avatar { background: linear-gradient(135deg, #c7b6ff, #6c5ce7); }
.tp-card.is-rose   .tp-card__avatar { background: linear-gradient(135deg, #fbcfe8, #ec4899); }
.tp-card.is-mint   .tp-card__avatar { background: linear-gradient(135deg, #a7f3d0, #34d399); }
.tp-card.is-amber  .tp-card__avatar { background: linear-gradient(135deg, #ffe9a8, #f59e0b); }
.tp-card.is-cool   .tp-card__avatar { background: linear-gradient(135deg, #bfe9ff, #38bdf8); }
.tp-card.is-bright .tp-card__avatar { background: linear-gradient(135deg, #d9f99d, #84cc16); }

.tp-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tp-card__monogram {
	color: #fff;
	mix-blend-mode: normal;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.tp-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tp-card__name {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: #fff;
	letter-spacing: -0.01em;
}
.tp-card__role {
	font-size: 13px;
	color: rgba(232, 232, 245, 0.6);
	letter-spacing: 0.02em;
	font-weight: 600;
}
.tp-card__bio {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(232, 232, 245, 0.72);
	margin: 6px 0 4px;
}
.tp-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
.tp-card__tag {
	font-size: 11px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(232, 232, 245, 0.78);
}
.tp-card__link {
	color: #6ee7ff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	margin-top: 6px;
}
.tp-card__link:hover { color: #fff; }

/* values section */
.tp-values-section {
	padding: calc(var(--section-pad-y) * 0.8) 0 calc(var(--section-pad-y) * 0.4);
}
.tp-values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 24px);
}
.tp-value {
	padding: 22px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.tp-value__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(52, 211, 153, 0.15);
	color: #34d399;
	margin-bottom: 14px;
}
.tp-value__icon svg { width: 22px; height: 22px; }
.tp-value h3 {
	font-size: 16px;
	margin: 0 0 6px;
	font-weight: 700;
	color: #fff;
}
.tp-value p {
	margin: 0;
	font-size: 14px;
	color: rgba(232, 232, 245, 0.7);
	line-height: 1.55;
}

/* team CTA */
.tp-cta {
	padding: 0 0 var(--section-pad-y);
}
.tp-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: clamp(32px, 4vw, 56px);
	border-radius: 22px;
	background: linear-gradient(135deg, #07211a 0%, #34d399 140%);
	color: #fff;
	flex-wrap: wrap;
}
.tp-cta__copy h2 {
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.tp-cta__copy p {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
	max-width: 56ch;
}
.tp-cta__btn {
	background: #fff;
	color: #07211a;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}
.tp-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   BLOG INDEX  ( /blog )
========================================================= */
.blog-page {
	padding-bottom: var(--section-pad-y);
}
.bp-hero {
	padding: var(--section-pad-y) 0 calc(var(--section-pad-y) * 0.5);
}
.bp-hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: clamp(32px, 4vw, 64px);
}
.bp-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f59e0b;
	font-weight: 700;
	margin-bottom: 14px;
}
.bp-hero__title {
	font-size: clamp(36px, 4.2vw, 62px);
	line-height: 1.05;
	font-weight: 800;
	margin: 0 0 18px;
	letter-spacing: -0.02em;
}
.bp-hero__lead {
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.65;
	color: rgba(232, 232, 245, 0.78);
	max-width: 58ch;
}
.bp-hero__art {
	color: #f59e0b;
	display: flex;
	justify-content: center;
}
.bp-hero__art svg {
	width: 100%;
	max-width: 440px;
	height: auto;
}

.bp-empty {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 22px;
	border-radius: 12px;
	background: rgba(245, 158, 11, 0.10);
	border: 1px solid rgba(245, 158, 11, 0.30);
	margin-bottom: 28px;
}
.bp-empty strong {
	color: #fff;
	font-size: 15px;
}
.bp-empty span {
	color: rgba(232, 232, 245, 0.7);
	font-size: 14px;
}

.bp-grid-section {
	padding: calc(var(--section-pad-y) * 0.4) 0;
}

/* ===== Topic filter ===== */
.bp-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
}
.bp-filter__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-text, #f5f5f7);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, color 0.18s ease;
	font-family: inherit;
}
.bp-filter__pill:hover {
	border-color: rgba(34, 211, 238, 0.55);
	background: rgba(34, 211, 238, 0.08);
	color: #fff;
	transform: translateY(-1px);
}
.bp-filter__pill:focus-visible {
	outline: 2px solid var(--color-accent, #22d3ee);
	outline-offset: 2px;
}
.bp-filter__pill.is-active {
	background: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 100%);
	border-color: transparent;
	color: #0c0c10;
}
.bp-filter__pill.is-active:hover {
	transform: translateY(-1px);
	color: #0c0c10;
}
.bp-filter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	padding: 0 6px;
	height: 20px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.25);
	font-size: 0.72rem;
	font-weight: 700;
	color: inherit;
	opacity: 0.85;
}
.bp-filter__pill.is-active .bp-filter__count {
	background: rgba(12, 12, 16, 0.18);
	color: #0c0c10;
	opacity: 1;
}
.bp-filter__empty {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed rgba(255, 255, 255, 0.12);
	color: var(--color-muted, #9aa0a6);
	font-size: 0.9rem;
}

/* Cap the blog page container so the hero + card grid don't stretch
   across an ultra-wide viewport. */
.blog-page .container {
	max-width: 1280px !important;
	margin-inline: auto !important;
	padding-inline: clamp(20px, 5vw, 48px) !important;
	box-sizing: border-box;
}

.bp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 2.4vw, 32px);
	max-width: 100%;
}
.bp-card {
	min-width: 0;
}
@media (max-width: 1023px) {
	.bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.bp-grid { grid-template-columns: 1fr; }
}
.bp-grid .bp-card[hidden] {
	display: none !important;
}
.bp-card {
	border-radius: 18px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.bp-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}
.bp-card__visual {
	height: 170px;
	position: relative;
	display: block;
	overflow: hidden;
}
.bp-card__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bp-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}
.bp-card.is-cool   .bp-card__placeholder { background: linear-gradient(135deg, #6ee7ff 0%, #6c5ce7 110%); }
.bp-card.is-warm   .bp-card__placeholder { background: linear-gradient(135deg, #ffd166 0%, #ff6b6b 110%); }
.bp-card.is-bright .bp-card__placeholder { background: linear-gradient(135deg, #b9f74e 0%, #34d399 110%); }
.bp-card.is-mint   .bp-card__placeholder { background: linear-gradient(135deg, #a7f3d0 0%, #34d399 110%); }
.bp-card.is-rose   .bp-card__placeholder { background: linear-gradient(135deg, #fbcfe8 0%, #ec4899 110%); }
.bp-card__cat {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(13, 13, 18, 0.78);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	font-weight: 700;
}
.bp-card__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.bp-card__meta {
	font-size: 12px;
	color: rgba(232, 232, 245, 0.55);
	letter-spacing: 0.04em;
}
.bp-card__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: #fff;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.bp-card__title a {
	color: inherit;
	text-decoration: none;
}
.bp-card__title a:hover { color: #f59e0b; }
.bp-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(232, 232, 245, 0.72);
	margin: 0;
}
.bp-card__more {
	margin-top: auto;
	color: #f59e0b;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.bp-card__more:hover { color: #fff; }
.bp-card__more.is-disabled {
	color: rgba(232, 232, 245, 0.4);
	cursor: not-allowed;
}

/* newsletter CTA */
.bp-cta {
	padding: var(--section-pad-y) 0 0;
}
.bp-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: clamp(32px, 4vw, 56px);
	border-radius: 22px;
	background: linear-gradient(135deg, #2a1a07 0%, #f59e0b 140%);
	color: #fff;
	flex-wrap: wrap;
}
.bp-cta__copy h2 {
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.bp-cta__copy p {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.82);
	max-width: 50ch;
}
.bp-cta__form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.bp-cta__form input {
	background: rgba(255, 255, 255, 0.96);
	border: 0;
	padding: 13px 18px;
	border-radius: 999px;
	min-width: 240px;
	font-size: 14px;
	color: #0d0d12;
}
.bp-cta__form input:focus {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}
.bp-cta__form button {
	background: #0d0d12;
	color: #fff;
	border: 0;
	padding: 13px 24px;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.15s;
}
.bp-cta__form button:hover { transform: translateY(-2px); }

/* =========================================================
   RESPONSIVE — case studies / team / blog
========================================================= */
@media (max-width: 1024px) {
	.cs-grid,
	.tp-grid,
	.bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tp-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.cs-hero__inner,
	.tp-hero__inner,
	.bp-hero__inner {
		grid-template-columns: 1fr;
	}
	.cs-hero__art,
	.tp-hero__art,
	.bp-hero__art { order: -1; max-width: 320px; }
	.cs-grid,
	.tp-grid,
	.bp-grid { grid-template-columns: 1fr; }
	.cs-hero__meta { flex-wrap: wrap; gap: 18px; }
	.cs-cta__inner,
	.tp-cta__inner,
	.bp-cta__inner { flex-direction: column; align-items: flex-start; }
	.bp-cta__form { width: 100%; }
	.bp-cta__form input { flex: 1; min-width: 0; }
}

/* =========================================================
   SITEWIDE MOBILE RESPONSIVE PASS
   One consolidated block at the end — overrides win.
   Breakpoints: 1100, 900, 768, 560, 420
========================================================= */

/* Prevent horizontal scroll caused by stray overflow.
   Use `clip` (not `hidden`): `overflow-x: hidden` turns html/body into a
   scroll container, which silently disables `position: sticky` on the
   blog TOC. `clip` blocks horizontal overflow WITHOUT establishing a
   scroll container, so the sticky TOC keeps pinning to the viewport. */
html, body { overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }

/* Tablet — 1100px */
@media (max-width: 1100px) {
	:root {
		--section-pad-y: clamp(48px, 5.5vw, 72px);
		--section-pad-x: clamp(6px, 0.8vw, 18px);
		--container-max: min(1320px, 96vw);
	}
	.hero--tv .hero__inner,
	.hero--cassette .hero__inner,
	.hero--joystick .hero__inner,
	.svc-hero__inner,
	.ct-hero__inner,
	.sp-hero__inner,
	.priv-hero__inner,
	.ip-hero__inner,
	.cs-hero__inner,
	.tp-hero__inner,
	.bp-hero__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

/* ===== Header / nav — dark mobile drawer ===== */
@media (max-width: 900px) {
	/* Override the 3-col grid so toggle lands at the far right */
	.site-header__inner {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px !important;
		gap: 12px;
		grid-template-columns: none !important;
	}
	.site-header .site-branding {
		justify-self: auto !important;
		flex: 0 0 auto;
	}
	.site-header .main-navigation {
		justify-self: auto !important;
		margin-left: auto;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
	}
	.site-header__cta {
		justify-self: auto !important;
		flex: 0 0 auto;
	}
	.site-header .header-cta-btn {
		padding: 9px 16px;
		font-size: 13px;
	}
	.menu-toggle {
		display: inline-flex !important;
		padding: 10px;
		margin-left: 4px;
	}
	.menu-toggle__bar { background: var(--color-text); }

	/* Compact the logo so it doesn't dominate */
	.site-header .site-branding__mark svg { width: 30px; height: 30px; }
	.site-header .site-branding__text { font-size: 17px; }
}
@media (max-width: 768px) {
	/* Replace the white dropdown menu with a dark fullscreen drawer */
	.main-navigation #primary-menu,
	.main-navigation .menu {
		display: none;
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		background: #0a0a10;
		flex-direction: column;
		align-items: stretch;
		padding: 24px 20px 80px;
		border-radius: 0;
		box-shadow: none;
		min-width: 0;
		gap: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 999;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}
	body.admin-bar .main-navigation #primary-menu,
	body.admin-bar .main-navigation .menu { top: calc(60px + 46px); }
	.main-navigation.toggled #primary-menu,
	.main-navigation.toggled .menu { display: flex; }

	.main-navigation .menu > li {
		display: block;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}
	.main-navigation .menu > li > a {
		display: block;
		padding: 16px 4px;
		color: #fff;
		font-size: 16px;
		font-weight: 600;
	}
	.main-navigation .menu > li > a::after { display: none; }
	.main-navigation .menu-caret { float: right; }

	/* Mega-menu & mini-mega — collapsed by default, expand when parent has .is-open */
	.main-navigation .menu-item-has-children .ld-mega,
	.main-navigation .menu-item-has-children .ld-mini-mega {
		position: static !important;
		transform: none !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		display: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		padding: 0 0 12px !important;
	}
	.main-navigation .menu-item-has-children.is-open .ld-mega,
	.main-navigation .menu-item-has-children.is-open .ld-mini-mega {
		display: block !important;
	}
	.ld-mega::before,
	.ld-mini-mega::before { display: none !important; }
	.main-navigation .menu-item-has-children.is-open .ld-mega {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}
	.ld-mega__col {
		border-left: 0 !important;
		padding: 8px 0 !important;
	}
	.ld-mega__col + .ld-mega__col { border-top: 1px solid rgba(255, 255, 255, 0.04); }
	.ld-mega__head {
		padding: 8px 0 6px;
		font-size: 13px;
	}
	.ld-mega__list a {
		padding: 8px 0 8px 32px;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.78);
	}
	.main-navigation .menu-item-has-children.is-open .ld-mini-mega {
		grid-template-columns: 1fr !important;
		padding: 4px 0 12px !important;
	}
	.ld-mini-mega a {
		padding: 10px 4px 10px 16px;
		color: rgba(255, 255, 255, 0.78);
		border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	}

	/* Caret rotates when the section is expanded */
	.main-navigation .menu-caret {
		display: inline-block;
		float: right;
		font-size: 14px;
		transition: transform 0.2s;
		color: rgba(255, 255, 255, 0.6);
	}
	.main-navigation .menu-item-has-children.is-open > a .menu-caret {
		transform: rotate(180deg);
	}

	/* Hide the Let's Talk button at small screens — already in drawer */
	.site-header__cta { display: none; }
	.site-header__inner { justify-content: space-between; }

	/* Lock background scroll when drawer is open */
	body.nav-open { overflow: hidden; }

	/* Hamburger -> X animation when drawer is open */
	.menu-toggle__bar {
		transition: transform 0.2s, opacity 0.2s;
		transform-origin: center;
	}
	.main-navigation.toggled .menu-toggle__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.main-navigation.toggled .menu-toggle__bar:nth-child(2) {
		opacity: 0;
	}
	.main-navigation.toggled .menu-toggle__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* ===== Homepage TV hero ===== */
@media (max-width: 900px) {
	.hero--tv {
		min-height: 0 !important;
		padding: 40px 0 56px !important;
		display: block !important;
	}
	body.admin-bar .hero--tv { min-height: 0 !important; }
	.hero--tv .hero__inner {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
	}
	.hero__content--leadige { max-width: 100%; }
	.hero__title--leadige {
		font-size: clamp(30px, 8.5vw, 44px) !important;
		margin-bottom: 20px !important;
	}
	.hero__subtitle--leadige {
		font-size: 15px !important;
		margin-bottom: 24px !important;
	}
	.hero__cta-pill {
		min-width: 0;
		width: 100%;
		padding: 14px 24px !important;
		font-size: 15px !important;
	}
	.crt {
		max-width: 100% !important;
		margin: 0 auto !important;
	}
	.hero__inner h1,
	.hero__inner .hero__title,
	.hero__title {
		font-size: clamp(30px, 8vw, 44px) !important;
		line-height: 1.1 !important;
	}
	.hero__inner p,
	.hero__lead {
		font-size: 15px;
		line-height: 1.6;
	}
}

/* ===== Homepage stats / partners / services / process / cases ===== */
@media (max-width: 900px) {
	.ld-stats__grid {
		grid-template-columns: 1fr 1fr !important;
	}
	.ld-partners__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.ld-partners__cell:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.06); }
	.ld-partners__cell:nth-child(2n) { border-right: 0; }
	.ld-services__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 16px;
	}
	.ld-process__grid {
		grid-template-columns: 1fr 1fr !important;
	}
	.ld-process__grid::before { display: none; }
}
@media (max-width: 560px) {
	.ld-stats__grid { grid-template-columns: 1fr !important; }
	.ld-partners__grid { grid-template-columns: 1fr !important; }
	.ld-partners__cell { border-right: 0 !important; }
	.ld-services__grid { grid-template-columns: 1fr !important; }
	.ld-process__grid { grid-template-columns: 1fr !important; }
}

/* ===== Section titles ===== */
@media (max-width: 768px) {
	.ld-section__title,
	.tp-section__title,
	.ip-section__title {
		font-size: clamp(24px, 6vw, 32px) !important;
	}
	.ld-section__lead,
	.tp-section__lead,
	.ip-section__lead {
		font-size: 14px;
	}
}

/* ===== Audit, Help, Let's Talk panels ===== */
@media (max-width: 800px) {
	.ld-audit__panel,
	.ld-help__panel,
	.ld-letstalk__panel {
		grid-template-columns: 1fr !important;
		text-align: left;
		padding: 28px !important;
		gap: 18px !important;
	}
	.ld-audit__art,
	.ld-help__art,
	.ld-letstalk__art { max-width: 220px; margin: 0 auto; }
}

/* ===== Marquees — keep them within the viewport ===== */
.ld-awards__viewport,
.ld-clients__viewport {
	max-width: 100vw;
	overflow: hidden;
}
@media (max-width: 560px) {
	.ld-awards__track .ld-awards__cell,
	.ld-clients__track .ld-clients__cell {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ===== Service inner pages (template-service.php) ===== */
@media (max-width: 900px) {
	.sp-hero__title { font-size: clamp(28px, 6.4vw, 44px); }
	.sp-pillars__grid,
	.sp-benefits__grid,
	.sp-faqs__list,
	.sp-cases__grid,
	.sp-related__grid,
	.sp-team-card,
	.sp-longterm__inner,
	.sp-audit__inner,
	.sp-why__grid {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}
}

/* ===== Contact page ===== */
@media (max-width: 900px) {
	.lc-contact__grid {
		grid-template-columns: 1fr !important;
	}
	.lc-form,
	.lc-profile {
		max-width: 100%;
	}
	.lc-form__row {
		grid-template-columns: 1fr !important;
	}
}

/* ===== Industries listing page ===== */
@media (max-width: 1024px) {
	.ip-grid-section .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.ip-grid-section .container { grid-template-columns: 1fr; }
	.ip-card {
		grid-template-columns: 1fr !important;
		text-align: left;
	}
	.ip-approach__grid {
		grid-template-columns: 1fr !important;
	}
}

/* ===== Services index page ===== */
@media (max-width: 1024px) {
	.si-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.si-services-grid { grid-template-columns: 1fr !important; }
}

/* ===== Case studies / team / blog grids — extra small ===== */
@media (max-width: 420px) {
	.cs-card__metrics {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	.cs-hero__meta { gap: 14px; }
	.cs-hero__meta strong { font-size: 22px; }
	.tp-values { grid-template-columns: 1fr; }
}

/* ===== Footer ===== */
@media (max-width: 900px) {
	.ld-footer {
		padding: 48px 20px 24px;
	}
	.ld-footer__badge { display: none; }
	.ld-footer__svc-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
	.ld-footer__svc-grid,
	.ld-footer__sub-grid,
	.ld-footer__sub-cols {
		grid-template-columns: 1fr !important;
	}
	.ld-footer__tagline { font-size: 19px; }
	.ld-footer__cta { width: 100%; }
}

/* ===== Page hero typography on tiny phones ===== */
@media (max-width: 480px) {
	.cs-hero__title,
	.tp-hero__title,
	.bp-hero__title,
	.ip-hero__title,
	.sp-hero__title {
		font-size: clamp(28px, 8vw, 38px) !important;
	}
	.cs-hero__lead,
	.tp-hero__lead,
	.bp-hero__lead,
	.ip-hero__lead {
		font-size: 14px;
	}
	.cs-cta__inner,
	.tp-cta__inner,
	.bp-cta__inner {
		padding: 28px !important;
	}
}

/* ===== Container side padding consistency on small screens ===== */
@media (max-width: 768px) {
	.container {
		padding-left: 18px;
		padding-right: 18px;
	}
}
@media (max-width: 420px) {
	.container {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* ==========================================================
   SINGLE-HUE SITE BACKGROUND (.site-bg) — sky blue
   One CSS variable (--bg-hue, declared in :root) drives every
   colour. Markup in header.php right after <body>:
     <div class="site-bg" aria-hidden="true">
       <span class="site-bg__glow"></span>
       <span class="site-bg__grid"></span>
     </div>
   Content-heavy sections paint their own opaque backgrounds so
   the animation only shows through heroes and gutters.
   ========================================================== */
.site-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	/* Hold a soft mint tint all the way to the gradient edge — never
	   fall to pure #ffffff, otherwise the page visually blends with
	   any opened white dropdown panel and looks like a "wash". */
	background:
		radial-gradient(120% 85% at 50% -12%,
			hsl(var(--bg-hue) 75% 90%) 0%,
			hsl(var(--bg-hue) 60% 94%) 48%,
			hsl(var(--bg-hue) 45% 97%) 100%),
		hsl(var(--bg-hue) 45% 97%);
	pointer-events: none;
}

.site-bg__glow {
	position: absolute;
	width: 72vw;
	height: 72vw;
	border-radius: 50%;
	top: -28vw;
	left: 50%;
	transform: translateX(-50%);
	background: radial-gradient(circle, hsl(var(--bg-hue) 92% 86% / .60) 0%, transparent 62%);
	filter: blur(60px);
	animation: lsdn-bg-glow 18s ease-in-out infinite alternate;
	will-change: transform;
}

.site-bg__grid {
	position: absolute;
	inset: -80px;
	background-image:
		linear-gradient(hsl(145 60% 55% / .18) 1px, transparent 1px),
		linear-gradient(90deg, hsl(145 60% 55% / .18) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(82% 78% at 50% 32%, #000 34%, transparent 100%);
	        mask-image: radial-gradient(82% 78% at 50% 32%, #000 34%, transparent 100%);
	animation: lsdn-bg-grid 24s linear infinite;
	will-change: transform;
}

@keyframes lsdn-bg-glow {
	from { transform: translate(calc(-50% - 14vw), -3vh) scale(1); }
	to   { transform: translate(calc(-50% + 14vw),  5vh) scale(1.18); }
}
@keyframes lsdn-bg-grid {
	from { transform: translateY(0); }
	to   { transform: translateY(48px); }
}
@media (prefers-reduced-motion: reduce) {
	.site-bg__glow,
	.site-bg__grid { animation: none; }
}

/* Page wrappers float above .site-bg with no opaque background of their own
   so the sky-blue animation shows through the gutters. */
#page,
.site,
.site-content,
#primary,
.site-main {
	position: relative;
	z-index: 1;
}

/* Hero re-theme: the .hero--tv used to be hard-locked to #0c0c10 — make it
   transparent so the new sky-blue site-bg shows through. */
.hero--tv {
	background: transparent !important;
	background-image: none !important;
}
.hero--tv > .container,
.hero--tv > .hero__inner {
	position: relative;
	z-index: 1;
}

/* ==========================================================
   LIGHT-THEME CORRECTIVE OVERRIDES
   Repaints dark hero / section backgrounds for the light theme
   and forces dark text on the named components that were
   confirmed-invisible in the screenshots.
   ========================================================== */

/* All inner hero variants: transparent so site-bg shows through; dark text */
.cs-hero,
.bp-hero,
.tp-hero,
.ip-hero,
.si-hero,
.priv-hero,
.sp-hero,
.ct-hero,
.svc-hero,
.post-hero {
	position: relative;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--color-text);
	overflow: hidden;
}
.cs-hero > *, .bp-hero > *, .tp-hero > *, .ip-hero > *, .si-hero > *,
.priv-hero > *, .sp-hero > *, .ct-hero > *, .svc-hero > *, .post-hero > * {
	position: relative;
	z-index: 1;
}

/* Hero headings + paragraphs in any subpage hero become dark */
.cs-hero h1, .cs-hero h2, .cs-hero p, .cs-hero .cs-hero__title, .cs-hero__lead,
.bp-hero h1, .bp-hero h2, .bp-hero p, .bp-hero__title, .bp-hero__lead, .bp-hero__eyebrow,
.tp-hero h1, .tp-hero h2, .tp-hero p, .tp-hero__title, .tp-hero__lead,
.ip-hero h1, .ip-hero h2, .ip-hero p, .ip-hero__title, .ip-hero__lead,
.si-hero h1, .si-hero h2, .si-hero p, .si-hero__title, .si-hero__lead,
.priv-hero h1, .priv-hero h2, .priv-hero p, .priv-hero__title, .priv-hero__lead,
.sp-hero h1, .sp-hero h2, .sp-hero p, .sp-hero__title, .sp-hero__lead,
.ct-hero h1, .ct-hero h2, .ct-hero p, .ct-hero__title, .ct-hero__lead,
.svc-hero h1, .svc-hero h2, .svc-hero p, .svc-hero__title, .svc-hero__lead,
.post-hero h1, .post-hero h2, .post-hero p, .post-hero__title {
	color: var(--color-text) !important;
}

/* Eyebrows → accent indigo; leads → softer ink */
.cs-hero__eyebrow, .tp-hero__eyebrow, .ip-hero__eyebrow,
.si-hero__eyebrow, .priv-hero__eyebrow, .sp-hero__eyebrow,
.ct-hero__eyebrow, .svc-hero__eyebrow {
	color: var(--color-accent-3) !important;
}
.cs-hero__lead, .bp-hero__lead, .tp-hero__lead, .ip-hero__lead,
.si-hero__lead, .priv-hero__lead, .sp-hero__lead, .ct-hero__lead, .svc-hero__lead {
	color: var(--color-ink-soft) !important;
}

/* CRT hero headline (was hard-locked cyan — failed contrast on light) */
.hero__title--leadige,
.hero .hero__title--leadige {
	color: var(--color-text) !important;
	-webkit-text-fill-color: var(--color-text) !important;
	background: none !important;
}
.hero__title--leadige::first-line {
	color: var(--color-text) !important;
	-webkit-text-fill-color: var(--color-text) !important;
	background: none !important;
}
.hero__subtitle--leadige {
	color: var(--color-ink-soft);
}
.hero__cta-pill {
	background: var(--color-text);
	color: #fff;
	box-shadow: 0 8px 24px rgba(20, 20, 30, .15);
}
.hero__cta-pill:hover,
.hero__cta-pill:focus-visible {
	background: var(--color-accent-2);
	color: #fff;
	box-shadow: 0 14px 32px rgba(139, 92, 246, .35);
}

/* Site header — solid light surface so it doesn't fight the sky-blue background */
.site-header {
	background-color: var(--color-surface) !important;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 4px 20px rgba(20, 20, 30, .04);
}
.site-header .site-branding__text,
.site-header .site-branding__link,
.site-header .site-branding__mark svg,
.site-header .main-navigation a {
	color: var(--color-text) !important;
}
.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus-visible,
.site-header .main-navigation .current-menu-item > a {
	color: var(--color-accent-3) !important;
}
.site-header .header-cta-btn,
.site-header .ls-nav__cta {
	background: linear-gradient(135deg, #16c47f, #0bb5d6) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 6px 20px rgba(22, 196, 127, .35) !important;
}
.site-header .header-cta-btn:hover,
.site-header .ls-nav__cta:hover {
	background: linear-gradient(135deg, #1ed692, #1bc5e8) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 10px 28px rgba(22, 196, 127, .45) !important;
}

/* Re-theme alternating section bands (were near-black) */
.svc-features, .svc-benefits,
.cs-grid-section, .ip-grid-section,
.si-pillars, .tp-grid-section,
.bp-grid-section, .sp-grid-section {
	background-color: var(--color-surface-2);
	color: var(--color-text);
}

/* Cards inside those sections become white on light */
.svc-features__card, .svc-benefits__card,
.cs-card, .ip-card, .si-card, .tp-card, .sp-card,
.bp-card {
	background-color: var(--color-surface) !important;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}
.svc-features__card h3, .svc-benefits__card h3,
.cs-card h3, .ip-card h3, .si-card h3, .tp-card h3, .sp-card h3,
.bp-card__title, .bp-card__title a {
	color: var(--color-text) !important;
}
.svc-features__card p, .svc-benefits__card p,
.cs-card p, .ip-card p, .si-card p, .tp-card p, .sp-card p,
.bp-card__excerpt {
	color: var(--color-muted) !important;
}
.bp-card__meta { color: var(--color-muted) !important; }
.bp-card__more { color: var(--color-accent-3) !important; }

/* Page wrappers were hard-locked to dark in places — clear them out */
.front-page,
.services-index-page,
.industries-page,
.case-studies-page,
.team-page,
.contact-page,
.privacy-page,
.service-page {
	background-color: transparent;
	color: var(--color-text);
}

/* CTA bands kept as the rare inverted dark band (intentional) */
.cs-cta__inner,
.tp-cta__inner,
.bp-cta__inner,
.ip-cta__panel,
.si-cta__panel { color: #fff; }

/* Footer kept inverted dark for a strong terminus */
.ld-footer,
.site-footer {
	background-color: var(--color-inverse-bg);
	color: var(--color-inverse-text);
}

/* ==========================================================
   NAMED-COMPONENT FIXES — invisible text the spec called out
   ========================================================== */

/* Single-post HERO */
.post-hero {
	padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px);
}
.post-hero__crumbs,
.post-hero__crumbs a { color: var(--color-muted) !important; }
.post-hero__crumbs a:hover { color: var(--color-accent-3) !important; }
.post-hero__current { color: var(--color-text) !important; }
.post-hero__cat {
	display: inline-block;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-accent-3) !important;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	margin-bottom: 16px;
}
.post-hero__title {
	font-size: clamp(2rem, 3.5vw + 1rem, 3.4rem) !important;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-text) !important;
	margin: 0 0 18px;
	max-width: 900px;
}
.post-hero__meta,
.post-hero__meta *,
.post-hero__sep { color: var(--color-muted) !important; }

/* Table of Contents */
.post-toc {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 20px 22px;
	box-shadow: var(--shadow-sm);
}
.post-toc__title { color: var(--color-text) !important; font-weight: 700; }
.post-toc__list a { color: var(--color-muted) !important; }
.post-toc__list a:hover,
.post-toc__list a.is-active { color: var(--color-accent-3) !important; }

/* Author bio + tags */
.post-author {
	background: var(--color-surface-2) !important;
	border: 1px solid var(--color-border);
}
.post-author__name { color: var(--color-text) !important; font-weight: 700; }
.post-author__bio  { color: var(--color-muted) !important; }
.post-tags          { color: var(--color-muted) !important; }
.post-tags__label   { color: var(--color-text) !important; }
.post-tags a {
	color: var(--color-text) !important;
	border-color: var(--color-border);
	background: var(--color-surface);
}
.post-tags a:hover {
	background: var(--color-text) !important;
	color: #fff !important;
	border-color: var(--color-text) !important;
}

/* Post navigation (prev/next links) */
.post-nav,
.post-nav a,
.post-nav__prev a,
.post-nav__next a { color: var(--color-text) !important; }
.post-nav a:hover { color: var(--color-accent-3) !important; }

/* Comments — every label, input, button */
.comments-area {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
}
.comments-title,
.comment-reply-title,
#reply-title {
	color: var(--color-text) !important;
	font-size: clamp(1.4rem, 1.5vw + 1rem, 1.9rem);
	font-weight: 800;
	margin: 0 0 20px;
}
.logged-in-as,
.must-log-in,
.comment-notes,
.comment-form-cookies-consent label {
	color: var(--color-muted) !important;
	font-size: 14px;
}
.logged-in-as a,
.must-log-in a { color: var(--color-accent-3) !important; }
.comment-form label,
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
	color: var(--color-text) !important;
	font-weight: 600;
	font-size: 14px;
	display: block;
	margin: 14px 0 6px;
}
.required,
.required-field-message { color: var(--color-accent-3) !important; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
	border-radius: var(--radius);
	padding: 10px 14px;
	font: inherit;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--color-accent-3) !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .form-submit input,
.comment-form #submit,
.form-submit input[type="submit"] {
	background: var(--color-text) !important;
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.comment-form .form-submit input:hover,
.comment-form #submit:hover {
	background: var(--color-accent-3) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(99, 102, 241, .25);
}
.comment-list,
.comment-list .comment,
.comment-list .comment-author cite,
.comment-list .comment-author .fn { color: var(--color-text) !important; }
.comment-list .comment-meta a,
.comment-list .comment-metadata a { color: var(--color-muted) !important; font-size: 13px; }
.comment-list .reply a { color: var(--color-accent-3) !important; }

/* Comment / pingback list — clean editorial rows instead of bare <ol> */
.comment-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
.comment-list li.pingback,
.comment-list li.trackback,
.comment-list > li.comment {
	list-style: none;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 15px;
	line-height: 1.6;
}
.comment-list .children {
	list-style: none;
	margin: 0;
	padding-left: clamp(16px, 3vw, 32px);
}
.comment-list li.pingback a,
.comment-list li.trackback a { color: var(--color-text) !important; font-weight: 600; }
.comment-list li.pingback a:hover,
.comment-list li.trackback a:hover { color: var(--color-accent-3) !important; }
/* Tuck the admin-only "Edit" link away so it doesn't clutter the public row */
.comment-list .comment-edit-link {
	color: var(--color-muted) !important;
	font-size: 12px;
	margin-left: 8px;
}
.comment-list .comment-body { padding: 4px 0; }
.comment-list .comment-author img.avatar {
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
}

/* Reply form — sit it in a soft surface card so it reads as a deliberate block */
#respond.comment-respond {
	margin-top: 8px;
	padding: clamp(22px, 3vw, 30px);
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

/* Page-links */
.page-links { color: var(--color-text); font-weight: 600; margin-top: 32px; }
.page-links a { color: var(--color-accent-3); }

/* ==========================================================
   BLOG POST — one coherent light page (§4 of the spec)
   ========================================================== */
.post-page {
	padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 96px);
	background: transparent;
}
.post-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 760px);
	gap: clamp(32px, 5vw, 72px);
	justify-content: center;
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 48px);
	align-items: start;
}
@media (max-width: 900px) {
	.post-layout { grid-template-columns: 1fr; }
}

/* Sticky TOC stays pinned & scrolls for long lists; align the after-article
   blocks (author, CTAs, nav, comments) under the article column so the content
   width doesn't jump when you scroll past the article. */
.post-toc { align-self: start; max-height: calc(100vh - 116px); overflow-y: auto; scrollbar-width: thin; }
.post-page .post-after {
	max-width: 1140px;
	margin-inline: auto;
	box-sizing: border-box;
	padding-left: calc(clamp(20px, 5vw, 48px) + 260px + clamp(32px, 5vw, 72px));
	padding-right: clamp(20px, 5vw, 48px);
}
@media (max-width: 900px) { .post-page .post-after { padding-left: clamp(20px, 5vw, 48px); } }

/* Inline CTA button (from converted [CTA button: …] placeholders) */
.post-article__content a.post-inline-cta__btn {
	display: inline-block; background: var(--color-text); color: #fff !important;
	text-decoration: none; font-style: normal; padding: 13px 26px; border-radius: 999px;
	font-weight: 700; font-size: 15px; margin: 6px 0;
	transition: transform .15s ease, background .15s ease;
}
.post-article__content a.post-inline-cta__btn:hover { background: var(--color-accent-3); transform: translateY(-1px); }

/* Two-CTA row (from converted [Two-CTA block: A | B] placeholders) */
.post-article__content .post-inline-cta {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0;
}
.post-article__content a.post-inline-cta__btn--ghost {
	background: transparent; color: var(--color-text) !important;
	border: 1.5px solid var(--color-border);
}
.post-article__content a.post-inline-cta__btn--ghost:hover {
	background: transparent; border-color: var(--color-accent-3);
	color: var(--color-accent-3) !important;
}

/* Related-posts block (from converted [Related blogs: …] placeholders) */
.post-article__content .post-related {
	margin: 2.2em 0; padding: 24px 26px;
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.post-article__content .post-related__title {
	margin: 0 0 14px !important; padding: 0; border: 0;
	font-size: 12px !important; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--color-accent-3) !important;
}
.post-article__content .post-related__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px;
}
@media (max-width: 640px) {
	.post-article__content .post-related__list { grid-template-columns: 1fr; }
}
.post-article__content .post-related__list li { margin: 0; }
.post-article__content .post-related__list a {
	display: block; padding: 9px 0; line-height: 1.4;
	color: var(--color-text) !important; font-weight: 600; text-decoration: none;
	border-bottom: 1px solid var(--color-border);
}
.post-article__content .post-related__list a:hover { color: var(--color-accent-3) !important; }

/* FAQ accordion (built from the article's "Frequently Asked Questions" section) */
.post-article__content .post-faq__item {
	border: 1px solid var(--color-border);
	border-radius: 12px;
	margin: 12px 0;
	background: var(--color-surface);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.post-article__content .post-faq__item.is-open {
	border-color: var(--color-accent-3);
	box-shadow: 0 6px 22px rgba(20, 20, 30, .06);
}
.post-article__content .post-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text);
	transition: color .2s ease;
}
.post-article__content .post-faq__q:hover,
.post-article__content .post-faq__item.is-open .post-faq__q { color: var(--color-accent-3); }
/* +/− icon */
.post-article__content .post-faq__icon {
	position: relative;
	width: 20px;
	height: 20px;
	flex: none;
}
.post-article__content .post-faq__icon::before,
.post-article__content .post-faq__icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 2px;
	transition: transform .3s ease, opacity .3s ease;
}
.post-article__content .post-faq__icon::before { top: 9px; left: 2px; right: 2px; height: 2px; }
.post-article__content .post-faq__icon::after  { left: 9px; top: 2px; bottom: 2px; width: 2px; }
.post-article__content .post-faq__item.is-open .post-faq__icon::after { transform: scaleY(0); opacity: 0; }
/* collapsible panel */
.post-article__content .post-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease;
}
.post-article__content .post-faq__a-inner { padding: 0 22px 20px; }
.post-article__content .post-faq__a-inner > :first-child { margin-top: 0; }
.post-article__content .post-faq__a-inner > * + * { margin-top: 1em; }

.post-article {
	min-width: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 5vw, 64px);
	box-shadow: 0 10px 40px rgba(20, 20, 30, .06);
}
.post-article__thumb {
	margin: 0 0 32px;
	border-radius: var(--radius);
	overflow: hidden;
}
.post-article__content {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--color-ink-soft);
}
.post-article__content > * + * { margin-top: 1.4em; }
.post-article__content h2 {
	font-size: clamp(1.5rem, 2vw + 1rem, 2.1rem);
	font-weight: 800;
	margin: 2em 0 .6em;
	line-height: 1.25;
	color: var(--color-text);
	scroll-margin-top: 96px;
}
.post-article__content h3 {
	font-size: clamp(1.2rem, 1vw + 0.8rem, 1.6rem);
	font-weight: 700;
	margin: 1.6em 0 .5em;
	color: var(--color-text);
	scroll-margin-top: 96px;
}
.post-article__content a {
	color: var(--color-accent-3);
	text-decoration: underline;
}
.post-article__content blockquote {
	border-left: 3px solid var(--color-accent);
	background: var(--color-surface-2);
	padding: 16px 20px;
	margin: 24px 0;
	border-radius: 0 12px 12px 0;
	color: var(--color-text);
	font-style: italic;
}
.entry-content {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--color-ink-soft);
}
.entry-content > * + * { margin-top: 1.4em; }
.entry-content a {
	color: var(--color-accent-3);
	text-decoration: underline;
}

/* ==========================================================
   PAGE-WIDE TEXT-COLOR SWEEP (v4)
   Three page wrappers (.service-page, .services-index-page,
   .industries-page) hard-set `color: #fff` and cascade invisible
   text everywhere. This block:
     1. Kills those three kill switches
     2. Forces dark text on every text-bearing descendant in every
        page wrapper (so 233 leftover white literals can't bleed
        through onto a light background)
     3. Restores #fff inside the intentional dark zones (CTA bands,
        footer, CRT TV screen, and any explicitly-inverted strip)
   ========================================================== */

/* —— 1. Kill the three wrapper-level color:#fff rules —— */
.service-page,
.services-index-page,
.industries-page {
	background: transparent !important;
	color: var(--color-text) !important;
}

/* —— 2. Force dark text on every page wrapper's descendants —— */
.front-page,
.front-page h1, .front-page h2, .front-page h3, .front-page h4, .front-page h5, .front-page h6,
.front-page p, .front-page li, .front-page dd, .front-page dt, .front-page label, .front-page blockquote, .front-page figcaption,
.front-page span:not(.crt__screen *):not(.dash-card *):not(.ld-footer *),

.services-index-page,
.services-index-page h1, .services-index-page h2, .services-index-page h3, .services-index-page h4, .services-index-page h5, .services-index-page h6,
.services-index-page p, .services-index-page li, .services-index-page dd, .services-index-page dt, .services-index-page label, .services-index-page blockquote, .services-index-page figcaption,

.industries-page,
.industries-page h1, .industries-page h2, .industries-page h3, .industries-page h4, .industries-page h5, .industries-page h6,
.industries-page p, .industries-page li, .industries-page dd, .industries-page dt, .industries-page label, .industries-page blockquote, .industries-page figcaption,

.case-studies-page,
.case-studies-page h1, .case-studies-page h2, .case-studies-page h3, .case-studies-page h4, .case-studies-page h5, .case-studies-page h6,
.case-studies-page p, .case-studies-page li, .case-studies-page dd, .case-studies-page dt, .case-studies-page label, .case-studies-page blockquote, .case-studies-page figcaption,

.team-page,
.team-page h1, .team-page h2, .team-page h3, .team-page h4, .team-page h5, .team-page h6,
.team-page p, .team-page li, .team-page dd, .team-page dt, .team-page label, .team-page blockquote, .team-page figcaption,

.blog-page,
.blog-page h1, .blog-page h2, .blog-page h3, .blog-page h4, .blog-page h5, .blog-page h6,
.blog-page p, .blog-page li, .blog-page dd, .blog-page dt, .blog-page label, .blog-page blockquote, .blog-page figcaption,

.contact-page,
.contact-page h1, .contact-page h2, .contact-page h3, .contact-page h4, .contact-page h5, .contact-page h6,
.contact-page p, .contact-page li, .contact-page dd, .contact-page dt, .contact-page label, .contact-page blockquote, .contact-page figcaption,

.privacy-page,
.privacy-page h1, .privacy-page h2, .privacy-page h3, .privacy-page h4, .privacy-page h5, .privacy-page h6,
.privacy-page p, .privacy-page li, .privacy-page dd, .privacy-page dt, .privacy-page label, .privacy-page blockquote, .privacy-page figcaption,

.service-page,
.service-page h1, .service-page h2, .service-page h3, .service-page h4, .service-page h5, .service-page h6,
.service-page p, .service-page li, .service-page dd, .service-page dt, .service-page label, .service-page blockquote, .service-page figcaption,

.post-page,
.post-page h1, .post-page h2, .post-page h3, .post-page h4, .post-page h5, .post-page h6,
.post-page p, .post-page li, .post-page dd, .post-page dt, .post-page label, .post-page blockquote, .post-page figcaption {
	color: var(--color-text);
}

/* —— Section titles and lead paragraphs that the theme styles
   with explicit classes (these are where most white literals live) —— */
.service-page :is(.sp-hero__title, .sp-hero__lead, .sp-hero__eyebrow, .sp-pillars__title, .sp-pillars__lead, .sp-pillar__title, .sp-pillar__body, .sp-benefits__title, .sp-benefits__lead, .sp-benefit__title, .sp-benefit__body, .sp-faq__title, .sp-faq__q, .sp-faq__a, .sp-related__title, .sp-related__card-title),
.services-index-page :is(.si-hero__title, .si-hero__lead, .si-hero__eyebrow, .si-category__title, .si-category__lead, .si-card__title, .si-card__tagline),
.industries-page :is(.ip-hero__title, .ip-hero__lead, .ip-hero__eyebrow, .ip-grid__title, .ip-card__title, .ip-card__tagline, .ip-approach__title, .ip-approach__lead),
.case-studies-page :is(.cs-hero__title, .cs-hero__lead, .cs-hero__eyebrow, .cs-card__title, .cs-card__excerpt),
.team-page :is(.tp-hero__title, .tp-hero__lead, .tp-hero__eyebrow, .tp-card__name, .tp-card__role, .tp-card__bio),
.blog-page :is(.bp-hero__title, .bp-hero__lead, .bp-hero__eyebrow),
.contact-page :is(.ct-hero__title, .ct-hero__lead, .ct-hero__eyebrow, .ct-info__title, .ct-info__value),
.privacy-page :is(.priv-hero__title, .priv-hero__lead),
.front-page :is(.svc-hero__title, .svc-hero__lead, .svc-hero__eyebrow, .svc-features__title, .svc-features__card-title, .svc-features__card-body, .svc-benefits__title, .svc-benefits__card-title, .svc-benefits__card-body, .home-stats__value, .home-stats__label) {
	color: var(--color-text) !important;
}

/* Softer ink for body copy under those titles */
.service-page :is(.sp-pillar__body, .sp-benefit__body, .sp-faq__a, .sp-hero__lead),
.services-index-page :is(.si-card__tagline, .si-category__lead, .si-hero__lead),
.industries-page :is(.ip-card__tagline, .ip-approach__lead, .ip-hero__lead),
.case-studies-page :is(.cs-card__excerpt, .cs-hero__lead),
.team-page :is(.tp-card__bio, .tp-card__role, .tp-hero__lead),
.blog-page :is(.bp-hero__lead),
.contact-page :is(.ct-hero__lead),
.privacy-page :is(.priv-hero__lead) {
	color: var(--color-ink-soft) !important;
}

/* —— Buttons that were white-on-dark need re-theming —— */
.service-page .sp-btn,
.service-page .sp-btn--accent {
	color: var(--color-text) !important;
}
.service-page .sp-btn--ghost,
.service-page .sp-btn--ghost-sm {
	background: var(--color-surface) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
}
.service-page .sp-btn--ghost:hover,
.service-page .sp-btn--ghost-sm:hover {
	background: var(--color-surface-2) !important;
	border-color: var(--color-accent-3) !important;
}
.service-page .sp-btn--dark {
	background: var(--color-text) !important;
	color: #fff !important;
	border: 1px solid var(--color-text) !important;
}

/* —— 3. RESTORE white text inside intentional dark bands —— */
/* CTA bands keep their dark gradient + white text (the rare inverted band) */
.cs-cta, .cs-cta *,
.tp-cta, .tp-cta *,
.bp-cta, .bp-cta *,
.ip-cta, .ip-cta *,
.si-cta, .si-cta *,
.sp-cta, .sp-cta *,
.priv-cta, .priv-cta *,
.ct-cta, .ct-cta * {
	/* leave their existing background/colour alone */
}
.cs-cta__copy, .cs-cta__copy *,
.cs-cta__inner, .cs-cta__inner *,
.cs-cta__btn,
.tp-cta__copy, .tp-cta__copy *,
.tp-cta__inner, .tp-cta__inner *,
.tp-cta__btn,
.bp-cta__copy, .bp-cta__copy *,
.bp-cta__inner, .bp-cta__inner *,
.ip-cta__panel, .ip-cta__panel *,
.si-cta__panel, .si-cta__panel * {
	color: #fff !important;
}
.cs-cta__btn,
.tp-cta__btn,
.ip-cta__btn,
.si-cta__btn {
	color: #2b1d6e !important; /* dark text on the white pill button inside the dark CTA */
}

/* Footer stays inverted */
.ld-footer, .ld-footer *,
.site-footer, .site-footer * {
	color: var(--color-inverse-text) !important;
}
.ld-footer a:hover,
.site-footer a:hover {
	color: var(--color-accent) !important;
}

/* CRT TV is a "physical object" — its dark screen + tan cabinet
   keep their original treatment; do not force dark text inside it. */
.front-page .crt,
.front-page .crt *,
.front-page .crt__screen,
.front-page .crt__screen *,
.front-page .crt__panel,
.front-page .crt__panel *,
.front-page .crt__cabinet,
.front-page .crt__cabinet * {
	color: revert !important;
}

/* Dashboard cards on the home page have their own dark theming — leave alone */
.front-page .dash-card,
.front-page .dash-card *,
.front-page .hero-stack,
.front-page .hero-stack * {
	color: revert !important;
}

/* ==========================================================
   V5 TARGETED FIXES (from screenshot audit)
   - Awards row dark cards keep their white text
   - Services index dark sections → light bands with white cards
   - Mega-menu + mini-mega dropdowns → light panels with dark text
   - Contact-page dark form panel kept dark with white text
   - Blog single-post grid math fixed (TOC + article must fit at 1140px)
   ========================================================== */

/* —— 1. Awards row (intentionally dark obsidian cards) —— */
.ld-awards__badge,
.ld-awards__badge *,
.ld-awards__org,
.ld-awards__label,
.ld-awards__year {
	color: revert !important;
}
.ld-awards__badge .ld-awards__org { color: #fff !important; }
.ld-awards__badge .ld-awards__label { color: rgba(167, 139, 250, .85) !important; }
.ld-awards__badge .ld-awards__year { color: rgba(255, 255, 255, .55) !important; }
/* Section heading above the marquee gets dark text on the light page */
.ld-section__title,
.front-page .ld-section__title {
	color: var(--color-text) !important;
	background: none !important;
}
.ld-section__lead,
.front-page .ld-section__lead {
	color: var(--color-ink-soft) !important;
}

/* —— 2. Services index — flip dark sections to light bands —— */
.services-index-page .si-category {
	background: transparent !important;
}
.services-index-page .si-category:nth-child(odd of .si-category) {
	background: var(--color-surface-2) !important;
}
.services-index-page .si-category__lead {
	color: var(--color-ink-soft) !important;
}
/* Pillar-tinted category titles keep their accent colour but on light bg now */
.services-index-page .si-category--green  .si-category__title { color: #047857 !important; }
.services-index-page .si-category--pink   .si-category__title { color: #be185d !important; }
.services-index-page .si-category--purple .si-category__title { color: #6d28d9 !important; }
.services-index-page .si-category--amber  .si-category__title { color: #b45309 !important; }

/* Service cards inside the categories — flip to white panels */
.services-index-page .si-service-card {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
	box-shadow: var(--shadow-sm);
}
.services-index-page .si-service-card:hover {
	background: var(--color-surface) !important;
	border-color: var(--color-accent-3) !important;
	box-shadow: var(--shadow-md);
}
.services-index-page .si-service-card__title { color: var(--color-text) !important; }
.services-index-page .si-service-card__desc  { color: var(--color-muted) !important; }
.services-index-page .si-service-card__arrow {
	background: var(--color-surface-2) !important;
	color: var(--color-accent-3) !important;
}
/* SI hero ghost button on the light theme */
.services-index-page .si-btn--ghost {
	background: var(--color-surface) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
}
.services-index-page .si-btn--ghost:hover {
	background: var(--color-surface-2) !important;
	border-color: var(--color-accent-3) !important;
}

/* —— 3. Header mega-menu + mini-mega — white panels, dark links —— */
.ld-mega {
	background: #ffffff !important;
	border-top: 1px solid rgba(12, 17, 22, .08) !important;
	border-bottom: 1px solid rgba(12, 17, 22, .08) !important;
	box-shadow: 0 30px 80px rgba(12, 17, 22, .15) !important;
}
.ld-mega a,
.ld-mega__head,
.ld-mega__head-text,
.ld-mega__list a {
	color: rgba(12, 17, 22, .85) !important;
}
.ld-mega__list a:hover,
.ld-mega__head:hover .ld-mega__head-text {
	color: #0fa968 !important;
}
/* Pillar accent colors — darkened for readability on white */
.ld-mega__col.is-seo    .ld-mega__head-text { color: #0fa968 !important; }
.ld-mega__col.is-ads    .ld-mega__head-text { color: #db2777 !important; }
.ld-mega__col.is-b2b    .ld-mega__head-text { color: #7c3aed !important; }
.ld-mega__col.is-design .ld-mega__head-text { color: #d97706 !important; }
.ld-mega__icon { color: var(--color-accent-3) !important; }

.ld-mini-mega {
	background: #ffffff !important;
	border: 1px solid rgba(12, 17, 22, .08) !important;
	box-shadow: 0 30px 80px rgba(12, 17, 22, .15) !important;
}
/* —— Mini-mega (Industries dropdown) — white panel, dark links, green on hover —— */
body .site-header .ld-mini-mega a {
	color: rgba(12, 17, 22, .85) !important;
	background: transparent !important;
	transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}
body .site-header .ld-mini-mega a:hover,
body .site-header .ld-mini-mega a:focus-visible,
body .site-header .ld-mini-mega a:active {
	color: #0fa968 !important;
	background: rgba(22, 196, 127, .08) !important;
	padding-left: 14px !important;
}

/* —— Mega-menu (Services dropdown) — dark text on white —— */
body .site-header .ld-mega__list a {
	color: rgba(12, 17, 22, .85) !important;
}
body .site-header .ld-mega__list a:hover {
	color: #0fa968 !important;
}
body .site-header .ld-mega__list a:hover,
body .site-header .ld-mega__list a:focus-visible,
body .site-header .ld-mega__head:hover .ld-mega__head-text {
	color: var(--color-text) !important;
}

/* —— 4. Contact page form panel kept as the rare inverted band —— */
/* The dark "We're here to help you grow" panel is intentional design. Keep
   its dark background and force white text on every element inside it so
   the form is readable. */
.contact-page .ct-info,
.contact-page .ct-info *,
.contact-page .ct-form__panel,
.contact-page .ct-form__panel *,
.contact-page .ct-split__visual,
.contact-page .ct-split__visual *,
.contact-page .ct-card,
.contact-page .ct-card * {
	color: #fff !important;
}
.contact-page .ct-info input,
.contact-page .ct-info textarea,
.contact-page .ct-info select,
.contact-page .ct-form__panel input,
.contact-page .ct-form__panel textarea,
.contact-page .ct-form__panel select {
	background: rgba(255, 255, 255, .08) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	color: #fff !important;
}
.contact-page .ct-info input::placeholder,
.contact-page .ct-info textarea::placeholder,
.contact-page .ct-form__panel input::placeholder,
.contact-page .ct-form__panel textarea::placeholder {
	color: rgba(255, 255, 255, .5) !important;
}
.contact-page .ct-info button,
.contact-page .ct-info .ct-form__submit,
.contact-page .ct-form__panel button,
.contact-page .ct-form__panel .ct-form__submit {
	background: #fff !important;
	color: var(--color-text) !important;
}

/* ==========================================================
   BLOG SINGLE-POST LAYOUT v7 — citelane-style structure
   Full-width hero (breadcrumbs → category pill → title → meta
   → featured image full-width below) + sticky TOC with
   scroll-spy active indicator + article reading panel +
   author card + two side cards + post nav + final CTA band.
   ========================================================== */

/* ROOT CAUSE — kill the 800px cap on .site-main:not(.front-page).
   Every full-width template (post, services index, industries,
   case studies, team, blog, contact, privacy, service detail)
   needs its own internal containers to control width. */
.site-main.post-page,
main.site-main.post-page,
#primary.site-main.post-page,
.site-main.services-index-page,
.site-main.industries-page,
.site-main.case-studies-page,
.site-main.team-page,
.site-main.blog-page,
.site-main.contact-page,
.site-main.privacy-page,
.site-main.service-page,
.site-main.what-we-serve-page,
.site-main.country-detail-page {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.post-page {
	background: transparent !important;
}

/* ---------- 1. POST HERO ---------- */
/* Hero is full-width. Inner container caps at 1100px to keep
   the title comfortable to read. */
.post-hero {
	padding: clamp(24px, 3vw, 44px) 0 0 !important;
	background: transparent !important;
}
.post-hero .post-hero__inner {
	max-width: 1400px !important;
	margin-inline: auto !important;
	padding-inline: clamp(20px, 5vw, 48px) !important;
	box-sizing: border-box !important;
}
.post-hero__inner.has-visual {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.post-hero .post-hero__shell { min-width: 0; }
@media (max-width: 900px) {
	.post-hero__inner.has-visual { grid-template-columns: 1fr; gap: 28px; }
}

.post-hero__crumbs {
	font-size: 13px;
	color: var(--color-muted) !important;
	margin-bottom: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.post-hero__crumbs a {
	color: var(--color-muted) !important;
	text-decoration: none;
}
.post-hero__crumbs a:hover { color: var(--color-accent-3) !important; }
.post-hero__current { color: var(--color-text) !important; }

.post-hero__cat {
	display: inline-block;
	background: rgba(99, 102, 241, .08);
	color: var(--color-accent-3) !important;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	margin-bottom: 18px;
}

.post-hero__title {
	font-size: clamp(2rem, 3.5vw + 1rem, 3.4rem) !important;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-text) !important;
	margin: 0 0 24px;
	max-width: 18ch;
}

.post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	font-size: 14px;
	color: var(--color-muted) !important;
}
.post-hero__meta * { color: var(--color-muted) !important; }
.post-hero__author-block {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.post-hero__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: block;
}
.post-hero__author { color: var(--color-text) !important; font-weight: 600; }
.post-hero__sep { opacity: .5; }
.post-hero__updated {
	color: var(--color-accent-3) !important;
	font-weight: 500;
}

/* Featured image — beside the title, shown in full (no crop).
   The generator (gpt-image-1) outputs landscape 3:2 illustrations
   (1536×1024 → 1024×683 "large"), so the frame matches that ratio
   and uses object-fit: contain to guarantee the whole illustration
   is visible (never zoomed or cropped) even if a stray image comes
   back at a different ratio. */
.post-hero__visual {
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 60px rgba(20, 20, 30, .12);
	background: var(--color-surface-2);
	overflow: hidden;
	aspect-ratio: 3 / 2;
}
.post-hero__visual img,
.post-hero__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	display: block !important;
	margin: 0 !important;
	border-radius: var(--radius-lg) !important;
}

/* ---------- 2. BODY LAYOUT (TOC + article) ---------- */
.post-layout {
	max-width: 1400px !important;
	margin-inline: auto !important;
	padding-inline: clamp(20px, 5vw, 48px) !important;
	box-sizing: border-box !important;
	margin-top: clamp(40px, 6vw, 72px) !important;
	display: grid !important;
	grid-template-columns: 260px minmax(0, 1fr) !important;
	gap: clamp(32px, 4vw, 64px) !important;
	align-items: start !important;
}

@media (max-width: 1023px) {
	.post-layout {
		grid-template-columns: 1fr !important;
		gap: clamp(20px, 4vw, 32px) !important;
	}
}

/* ---------- 3. TOC — sticky + scroll-spy indicator ----------
   max-height keeps the panel inside the viewport; the internal
   overflow lets a long TOC scroll inside its pane without ever
   showing a scrollbar (hidden via -webkit-scrollbar / scrollbar-width). */
/* TOC — sticky, NATURAL height, NO internal scroll. As the user
   scrolls the page, the TOC stays pinned at top:96px and nothing
   inside it moves. If a future TOC is taller than the viewport,
   the bottom items get cut off below the fold (acceptable trade-off
   to avoid any perceived internal-scroll movement). */
.post-toc {
	position: sticky !important;
	top: 96px !important;
	align-self: start !important;
	max-height: none !important;
	overflow: visible !important;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 22px 24px;
	box-shadow: var(--shadow-sm);
	font-size: 14px;
	z-index: 5;
}
.post-toc__title {
	color: var(--color-accent-3) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .15em;
	text-transform: uppercase;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-border);
}
.post-toc__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0;
}
.post-toc__list li { margin: 0; }
.post-toc__list a {
	display: block;
	padding: 8px 0 8px 16px;
	margin-left: -2px;
	color: var(--color-muted) !important;
	line-height: 1.45;
	border-left: 2px solid transparent;
	text-decoration: none;
	transition: color .25s ease, border-left-color .25s ease, padding-left .25s ease;
}
.post-toc__list a:hover {
	color: var(--color-text) !important;
}
.post-toc__list a.is-active {
	color: var(--color-accent-3) !important;
	border-left-color: var(--color-accent-3) !important;
	font-weight: 600;
	padding-left: 18px;
}
.post-toc__list li.is-h3 a {
	padding-left: 28px;
	font-size: 13px;
}
.post-toc__list li.is-h3 a.is-active { padding-left: 30px; }

@media (max-width: 1023px) {
	.post-toc {
		position: static !important;
		top: auto !important;
	}
}

/* ---------- 4. ARTICLE READING PANEL ---------- */
.post-article {
	min-width: 0;
	max-width: 1040px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	box-sizing: border-box;
}
@media (max-width: 1023px) {
	.post-article {
		max-width: 1040px;
		margin-inline: auto;
	}
}

.post-article__content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--color-ink-soft);
}
.post-article__content > * + * { margin-top: 1.3em; }
.post-article__content h2 {
	font-size: clamp(1.5rem, 1.8vw + 1rem, 2rem) !important;
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-accent-3) !important;
	margin: 2em 0 .6em;
	scroll-margin-top: 96px;
}
.post-article__content h3 {
	font-size: clamp(1.15rem, 1vw + .8rem, 1.4rem) !important;
	font-weight: 700;
	color: var(--color-text) !important;
	margin: 1.6em 0 .5em;
	scroll-margin-top: 96px;
}
.post-article__content a {
	color: var(--color-accent-3);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.post-article__content blockquote {
	border-left: 3px solid var(--color-accent);
	background: var(--color-surface-2);
	padding: 16px 20px;
	margin: 24px 0;
	border-radius: 0 12px 12px 0;
	color: var(--color-text);
	font-style: italic;
}
.post-article__content img,
.post-article__content iframe,
.post-article__content video {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
}
.post-article__content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}
.post-article__content pre {
	max-width: 100%;
	overflow-x: auto;
}

/* ---------- 5. POST AFTER — author card + side cards + nav ----------
   Uses the FULL layout width (matches the post-hero and post-layout
   container) so author card, side cards, post nav, and final CTA
   have proper breathing room — not squeezed into the article column. */
.post-after {
	max-width: 1400px !important;
	margin-inline: auto !important;
	padding-inline: clamp(20px, 5vw, 48px) !important;
	box-sizing: border-box !important;
	margin-top: clamp(48px, 7vw, 96px) !important;
}

.post-author-card {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: var(--shadow-sm);
}
.post-author-card__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	flex-shrink: 0;
}
.post-author-card__body { min-width: 0; flex: 1 1 auto; }
.post-author-card__name {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 6px;
}
.post-author-card__bio {
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 10px;
}
.post-author-card__link {
	color: var(--color-accent-3);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.post-author-card__link:hover { text-decoration: underline; }

.post-side-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
}
@media (max-width: 720px) {
	.post-side-cards { grid-template-columns: 1fr; }
}
.post-side-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(20px, 3vw, 28px);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--color-text);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.post-side-card:hover {
	transform: translateY(-2px);
	border-color: var(--color-accent-3);
	box-shadow: var(--shadow-md);
}
.post-side-card--accent {
	border-left: 4px solid var(--color-accent-3);
}
.post-side-card__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-accent-3) !important;
}
.post-side-card__title {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--color-text) !important;
	margin: 4px 0 4px;
}
.post-side-card__body {
	color: var(--color-muted) !important;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 12px;
}
.post-side-card__link {
	color: var(--color-accent-3) !important;
	font-weight: 600;
	font-size: 14px;
	margin-top: auto;
}
.post-side-card__btn {
	display: inline-block;
	background: var(--color-accent-3);
	color: #fff !important;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	margin-top: auto;
	align-self: flex-start;
}

/* Post nav (PREVIOUS / NEXT) */
.post-nav {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
	margin-top: 40px !important;
	padding-top: 28px !important;
	border-top: 1px solid var(--color-border) !important;
}
@media (max-width: 640px) {
	.post-nav { grid-template-columns: 1fr !important; }
}
.post-nav__prev,
.post-nav__next {
	min-width: 0;
}
.post-nav__next { text-align: right; }
@media (max-width: 640px) { .post-nav__next { text-align: left; } }
.post-nav a {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: var(--color-text) !important;
	max-width: 100%;
}
.post-nav__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-muted) !important;
}
.post-nav__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text) !important;
	line-height: 1.4;
}
.post-nav a:hover .post-nav__title { color: var(--color-accent-3) !important; }

/* Comments wrapper */
.post-comments { margin-top: 40px; }
.comment-form { display: grid; gap: 12px; }
.comment-form-author,
.comment-form-email,
.comment-form-url { min-width: 0; }
@media (min-width: 700px) {
	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		display: inline-block;
		width: calc(50% - 8px);
	}
	.comment-form-email { margin-left: 12px; }
}

/* ---------- 6. FINAL CTA BAND ---------- */
.post-final-cta {
	background: var(--color-surface-2);
	margin-top: clamp(48px, 7vw, 96px);
	padding: clamp(48px, 8vw, 96px) 0;
	text-align: center;
}
.post-final-cta__inner {
	max-width: 720px !important;
	margin-inline: auto !important;
	padding-inline: clamp(20px, 5vw, 48px) !important;
}
.post-final-cta__title {
	font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-text) !important;
	margin: 0 0 14px;
}
.post-final-cta__lead {
	color: var(--color-ink-soft) !important;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 28px;
}
.post-final-cta__btn {
	display: inline-block;
	background: var(--color-accent-3);
	color: #fff !important;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.post-final-cta__btn:hover {
	transform: translateY(-2px);
	background: var(--color-accent-2);
	box-shadow: 0 12px 32px rgba(99, 102, 241, .35);
}

/* Back-to-top button position on mobile */
@media (max-width: 640px) {
	.back-to-top {
		right: 16px !important;
		bottom: 16px !important;
	}
}

/* —— 6. Blog newsletter card alignment fix —— */
/* The .bp-cta gradient may have collapsed visually — keep dark gradient,
   ensure inner text/inputs/button are readable. */
.blog-page .bp-cta__inner h2,
.blog-page .bp-cta__copy h2 {
	color: #fff !important;
}
.blog-page .bp-cta__inner p,
.blog-page .bp-cta__copy p {
	color: rgba(255, 255, 255, .8) !important;
}
.blog-page .bp-cta__form input[type="email"] {
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .25) !important;
}
.blog-page .bp-cta__form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .55) !important;
}
.blog-page .bp-cta__form button {
	background: #fff !important;
	color: var(--color-text) !important;
}

/* —— 7. Front-page services grid — keep colored card backgrounds; force readable text —— */
.front-page .svc-features__card,
.front-page .svc-card {
	color: var(--color-text);
}
.front-page .svc-features__card h3,
.front-page .svc-card h3,
.front-page .svc-features__card-title {
	color: var(--color-text) !important;
}
.front-page .svc-features__card p,
.front-page .svc-card p,
.front-page .svc-features__card-body {
	color: var(--color-ink-soft) !important;
}
.front-page .svc-features__card .svc-tag,
.front-page .svc-card .svc-tag,
.front-page .svc-features__card a,
.front-page .svc-card a {
	color: var(--color-text) !important;
}

/* —— Footer "Book a Call" pill — green gradient, white text on dark footer */
.ld-footer__cta,
.ld-footer__cta:link,
.ld-footer__cta:visited,
.ld-footer .ld-footer__cta,
.site-footer .ld-footer__cta {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	background: linear-gradient(135deg, #16c47f, #0bb5d6) !important;
	box-shadow: 0 6px 20px rgba(22, 196, 127, .35) !important;
}
.ld-footer__cta:hover,
.ld-footer__cta:focus,
.ld-footer__cta:focus-visible,
.ld-footer__cta:active,
.ld-footer .ld-footer__cta:hover,
.site-footer .ld-footer__cta:hover {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	background: linear-gradient(135deg, #1ed692, #1bc5e8) !important;
	box-shadow: 0 10px 28px rgba(22, 196, 127, .45) !important;
	transform: translateY(-2px);
}

/* ==========================================================
   POST READING — type rhythm + table styling
   - bump body to 18px / 1.75
   - h2 / h3 spec
   - bordered, boxed tables with header band + zebra rows
   - wide tables scroll on mobile instead of overflowing
   ========================================================== */
.post-article__content,
.entry-content {
	font-size: 18px !important;
	line-height: 1.75 !important;
	color: var(--color-ink-soft) !important;
}
.post-article__content h2,
.entry-content h2 {
	font-size: 28px !important;
	line-height: 1.3 !important;
	margin-top: 2.5rem !important;
	margin-bottom: 1rem !important;
	color: var(--color-accent-3) !important;
}
.post-article__content h3,
.entry-content h3 {
	font-size: 21px !important;
	margin-top: 1.8rem !important;
	color: var(--color-text) !important;
}
.post-article__content p,
.entry-content p {
	margin-bottom: 1.25rem !important;
}

/* ----- Tables: boxed, bordered, header band, zebra rows ----- */
.post-article__content table,
.entry-content table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	margin: 2rem 0 !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	font-size: 15px !important;
	display: table !important;
	box-shadow: 0 1px 3px rgba(20, 20, 30, .04);
}
.post-article__content table th,
.entry-content table th {
	background: var(--color-text);
	color: #fff !important;
	text-align: left;
	padding: 12px 16px;
	font-weight: 600;
	border: 0;
}
.post-article__content table td,
.entry-content table td {
	padding: 12px 16px;
	border-top: 1px solid var(--color-border);
	vertical-align: top;
	color: var(--color-ink-soft) !important;
}
.post-article__content table tr:nth-child(even) td,
.entry-content table tr:nth-child(even) td {
	background: var(--color-surface-2);
}
.post-article__content table tr:first-child td,
.entry-content table tr:first-child td {
	border-top: 0;
}

/* Wide tables scroll horizontally on small screens
   without breaking the article column layout. */
@media (max-width: 720px) {
	.post-article__content table,
	.entry-content table {
		display: block !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* WordPress block-table wrapper variants */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table,
.post-article__content .wp-block-table,
.post-article__content figure.wp-block-table {
	overflow-x: auto;
	margin: 2rem 0;
}

/* TOC SAFETY — make sure no parent overflow kills the sticky.
   The Localsden grid wrapper (.post-layout) has no overflow:hidden,
   but some plugins inject wrappers that do. This neutralises the
   common offenders. */
.post-page,
.post-page .container,
.site-content,
.site-main.post-page,
#primary.site-main.post-page,
#page.site,
#content.site-content {
	overflow: visible !important;
}

/* ==========================================================
   FIXED HEADER — always pinned to the top of the viewport
   The header was set to position: sticky earlier but a parent
   stacking context was breaking it. Forcing position: fixed
   guarantees the pin behaviour. Body gets a matching padding-top
   so content doesn't slide under the header on load.
   ========================================================== */
.site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 200 !important;
}

/* Push everything below the fixed header by the header's height.
   Header is ~72px on desktop, ~64px on phones. */
body {
	padding-top: 72px;
}
@media (max-width: 768px) {
	body { padding-top: 64px; }
}

/* Hide the WordPress admin-bar offset shift when logged in
   so the fixed header doesn't disappear behind the WP admin bar. */
body.admin-bar .site-header {
	top: 32px !important;
}
@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px !important;
	}
}

/* Anchor links inside the article should land below the fixed
   header instead of being hidden by it. */
html {
	scroll-padding-top: 96px;
}

/* ==========================================================
   V8 SERVICE PAGE SWEEP — every .sp-* component on the
   service detail template (template-service.php) was originally
   dark-themed. Force light surfaces + dark text everywhere,
   keep the pillar accent for numbers and section headings.
   ========================================================== */

/* Section backgrounds — make them light surface bands */
.service-page .sp-pillars,
.service-page .sp-benefits,
.service-page .sp-cases,
.service-page .sp-why,
.service-page .sp-faq,
.service-page .sp-related,
.service-page .sp-talk,
.service-page .sp-team,
.service-page .sp-stats,
.service-page .sp-longterm,
.service-page .sp-audit {
	background: transparent !important;
}
.service-page .sp-benefits,
.service-page .sp-cases,
.service-page .sp-related {
	background: var(--color-surface-2) !important;
}

/* Pillar / benefit / why / case / related CARDS — white surface, border, soft shadow */
.service-page .sp-pillar,
.service-page .sp-benefit,
.service-page .sp-why-card,
.service-page .sp-case,
.service-page .sp-related-card,
.service-page .sp-team-card,
.service-page .sp-stat-card {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	box-shadow: 0 4px 16px rgba(20, 20, 30, .05) !important;
}
.service-page .sp-pillar:hover,
.service-page .sp-benefit:hover,
.service-page .sp-why-card:hover,
.service-page .sp-case:hover,
.service-page .sp-related-card:hover {
	border-color: var(--sp-accent-2, var(--color-accent-3)) !important;
	box-shadow: 0 10px 32px rgba(20, 20, 30, .08) !important;
	background: var(--color-surface) !important;
}

/* Numbered card big number — keep the accent colour */
.service-page .sp-pillar__num {
	color: var(--sp-accent-2, var(--color-accent-3)) !important;
}

/* All card titles → dark */
.service-page .sp-pillar__title,
.service-page .sp-benefit__title,
.service-page .sp-why-card__title,
.service-page .sp-case__body h3,
.service-page .sp-related-card h3 {
	color: var(--color-text) !important;
}

/* All card body / descriptions → muted ink */
.service-page .sp-pillar__desc,
.service-page .sp-benefit__desc,
.service-page .sp-why-card__desc,
.service-page .sp-case__body p,
.service-page .sp-related-card p {
	color: var(--color-muted) !important;
}

/* Section headings (the eyebrow + heading + sub above each card grid) */
.service-page .sp-pillars__heading,
.service-page .sp-benefits__heading,
.service-page .sp-why__title,
.service-page .sp-cases__title,
.service-page .sp-related__title,
.service-page .sp-faq__title,
.service-page .sp-team__title,
.service-page .sp-longterm__title,
.service-page .sp-audit__title,
.service-page .sp-talk__title {
	color: var(--color-text) !important;
}
/* Eyebrow / accent section labels keep the pillar accent */
.service-page .sp-pillars__eyebrow,
.service-page .sp-benefits__eyebrow,
.service-page .sp-section__eyebrow,
.service-page [class*="__eyebrow"] {
	color: var(--sp-accent-2, var(--color-accent-3)) !important;
}

/* Section subs / leads → softer ink */
.service-page .sp-pillars__sub,
.service-page .sp-benefits__sub,
.service-page .sp-why__sub,
.service-page .sp-cases__sub,
.service-page .sp-related__sub,
.service-page .sp-faq__sub,
.service-page .sp-section__sub {
	color: var(--color-ink-soft) !important;
}

/* FAQ accordion */
.service-page .sp-faq__item {
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important;
}
.service-page .sp-faq__q,
.service-page .sp-faq__a {
	color: var(--color-text) !important;
}
.service-page .sp-faq__a {
	color: var(--color-muted) !important;
}

/* Generic catch-all for any remaining hard-coded white text inside .service-page
   that doesn't sit inside an intentional dark band (the talk panel / footer / CTA). */
.service-page h1,
.service-page h2,
.service-page h3,
.service-page h4,
.service-page h5,
.service-page h6 {
	color: var(--color-text);
}
.service-page p,
.service-page li,
.service-page span:not(.sp-btn__icon):not(.sp-pillar__num):not([class*="__eyebrow"]) {
	color: var(--color-ink-soft);
}

/* The .sp-talk panel was the original "dark CTA band" — keep it dark on purpose */
.service-page .sp-talk {
	background: var(--color-inverse-bg) !important;
	color: #fff !important;
}
.service-page .sp-talk h2,
.service-page .sp-talk h3,
.service-page .sp-talk p,
.service-page .sp-talk a,
.service-page .sp-talk * {
	color: #fff !important;
}
.service-page .sp-talk a.sp-btn,
.service-page .sp-talk .sp-btn--accent {
	background: #fff !important;
	color: var(--color-text) !important;
}

/* Ghost / dark service-page buttons re-themed (already done in v4, reinforce) */
.service-page .sp-btn--ghost,
.service-page .sp-btn--ghost-sm {
	background: var(--color-surface) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
}
.service-page .sp-btn--ghost:hover,
.service-page .sp-btn--ghost-sm:hover {
	background: var(--color-surface-2) !important;
	border-color: var(--sp-accent-2, var(--color-accent-3)) !important;
}
.service-page .sp-btn--dark {
	background: var(--color-text) !important;
	color: #fff !important;
	border: 1px solid var(--color-text) !important;
}
.service-page .sp-btn--dark:hover {
	background: var(--sp-accent-2, var(--color-accent-3)) !important;
	border-color: var(--sp-accent-2, var(--color-accent-3)) !important;
	color: #fff !important;
}

/* Stat-card / number callouts — dark text on white */
.service-page .sp-stat-card__num,
.service-page .sp-stat-card__value {
	color: var(--sp-accent-2, var(--color-accent-3)) !important;
}
.service-page .sp-stat-card__label,
.service-page .sp-stat-card__caption {
	color: var(--color-muted) !important;
}

/* "Why work with us" star icons + items */
.service-page .sp-why-card__icon,
.service-page .sp-why-card svg {
	color: var(--sp-accent-2, var(--color-accent-3)) !important;
}

/* ==========================================================
   DROPDOWN PANELS — solid white, soft shadow, rounded.
   Covers Localsden's custom (.ld-mega / .ld-mini-mega) AND
   any default WordPress sub-menu fallback.
   ========================================================== */
.site-header .ld-mega,
.site-header .ld-mini-mega,
.menu-item ul.sub-menu,
.dropdown-menu,
nav .sub-menu {
	background: #ffffff !important;
	opacity: 1 !important;
	z-index: 9999 !important;
	box-shadow: 0 30px 80px rgba(12, 17, 22, .15) !important;
	border-radius: 10px !important;
	border: 1px solid rgba(12, 17, 22, .08) !important;
	color: rgba(12, 17, 22, .85) !important;
}

/* Don't apply the rounded radius to the top edge of the full-width
   mega-menu (.ld-mega spans the full screen width) — only the
   mini-mega should look like a floating pill. */
.site-header .ld-mega {
	border-radius: 0 0 10px 10px !important;
}

/* Hover / open parent menu item stays transparent — no dark band
   appearing behind the dropdown trigger. */
.site-header .menu-item:hover,
.site-header .menu-item.is-open,
.site-header .menu-item--mega:hover,
.site-header .menu-item--mini-mega:hover {
	background: transparent !important;
}

/* ==========================================================
   DROPDOWN ITEMS — styling only.
   IMPORTANT: do NOT force visibility / opacity / display on the
   items themselves. The parent panel (.ld-mega / .ld-mini-mega)
   controls visibility; items must INHERIT the hidden state from
   the parent, otherwise both menus render simultaneously.
   ========================================================== */

/* (a) Resting style on every item — dark text on white panel. */
html body .site-header .ld-mega a,
html body .site-header .ld-mini-mega a,
html body .site-header .menu-item ul.sub-menu a {
	color: #0c1116 !important;
	-webkit-text-fill-color: #0c1116 !important;
	background: transparent !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	transition: background-color .15s ease, color .15s ease !important;
}

html body .site-header .ld-mega a:hover,
html body .site-header .ld-mega a:focus,
html body .site-header .ld-mega a:focus-visible,
html body .site-header .ld-mega a:active,
html body .site-header .ld-mega__list a:hover,
html body .site-header .ld-mega__list a:focus,
html body .site-header .ld-mega__list a:active,
html body .site-header .ld-mini-mega a:hover,
html body .site-header .ld-mini-mega a:focus,
html body .site-header .ld-mini-mega a:focus-visible,
html body .site-header .ld-mini-mega a:active,
html body .site-header .menu-item ul.sub-menu a:hover {
	background: rgba(22, 196, 127, .08) !important;
	color: #0fa968 !important;
	-webkit-text-fill-color: #0fa968 !important;
	text-decoration: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Column heads — dark text on white panel (pillar accents handled separately) */
html body .site-header .ld-mega__head,
html body .site-header .ld-mega__head:hover,
html body .site-header .ld-mega__head-text,
html body .site-header .ld-mega__head:hover .ld-mega__head-text {
	color: #0c1116 !important;
	-webkit-text-fill-color: #0c1116 !important;
}

/* Pillar accent colors for column heads — re-asserted after the dark-text rule
   because per-pillar (SEO/Ads/B2B/Design) head color must beat the generic
   white-→-dark fix above. Without this, all four headings render plain dark. */
html body .site-header .ld-mega__col.is-seo    .ld-mega__head-text,
html body .site-header .ld-mega__col.is-seo    .ld-mega__head:hover .ld-mega__head-text {
	color: #0fa968 !important;
	-webkit-text-fill-color: #0fa968 !important;
}
html body .site-header .ld-mega__col.is-ads    .ld-mega__head-text,
html body .site-header .ld-mega__col.is-ads    .ld-mega__head:hover .ld-mega__head-text {
	color: #db2777 !important;
	-webkit-text-fill-color: #db2777 !important;
}
html body .site-header .ld-mega__col.is-b2b    .ld-mega__head-text,
html body .site-header .ld-mega__col.is-b2b    .ld-mega__head:hover .ld-mega__head-text {
	color: #7c3aed !important;
	-webkit-text-fill-color: #7c3aed !important;
}
html body .site-header .ld-mega__col.is-design .ld-mega__head-text,
html body .site-header .ld-mega__col.is-design .ld-mega__head:hover .ld-mega__head-text {
	color: #d97706 !important;
	-webkit-text-fill-color: #d97706 !important;
}

/* ==========================================================
   ANTI-WASHOUT — when a dropdown opens, NOTHING on the page
   below or around it may change its background. Lock every
   layout-level wrapper to transparent on every state.
   ========================================================== */

/* The trigger `<li>` itself stays transparent in every state */
.site-header .menu-item,
.site-header .menu-item:hover,
.site-header .menu-item:focus,
.site-header .menu-item:focus-within,
.site-header .menu-item.is-open,
.site-header .menu-item-has-children,
.site-header .menu-item-has-children:hover,
.site-header .menu-item-has-children:focus-within,
.site-header .menu-item--mega,
.site-header .menu-item--mega:hover,
.site-header .menu-item--mega:focus-within,
.site-header .menu-item--mini-mega,
.site-header .menu-item--mini-mega:hover,
.site-header .menu-item--mini-mega:focus-within {
	background: transparent !important;
	background-color: transparent !important;
}

/* The nav and the header itself never tint on hover */
.site-header .main-navigation,
.site-header .main-navigation:hover,
.site-header .main-navigation:focus-within,
.site-header .menu,
.site-header .menu:hover,
.site-header:hover,
.site-header:focus-within {
	background-color: var(--color-surface) !important;
}

/* Page wrappers never tint when a header dropdown is hovered.
   Defensive: prevents any future :has(...) rule from washing the page. */
body:has(.site-header :hover),
body:has(.site-header :focus-within),
#page:has(.site-header :hover),
.site-content:has(.site-header :hover),
.site-main:has(.site-header :hover),
#primary:has(.site-header :hover) {
	background-color: inherit;
}

/* No phantom overlay / backdrop element behind the dropdown.
   Any element using common backdrop class names is forced
   transparent + non-interactive. */
.menu-backdrop,
.nav-backdrop,
.dropdown-backdrop,
.menu-overlay,
.nav-overlay,
.site-header::after {
	background: transparent !important;
	pointer-events: none;
}

/* (.ld-mega positioning left alone — its full-width layout is intentional) */

/* ==========================================================
   FINAL LOCK-DOWN — defensive ultra-high-specificity rules
   to guarantee NO element behind or around the dropdown
   washes white on hover. If this still doesn't work, the
   browser is caching the old CSS — clear it with Ctrl+F5.
   ========================================================== */

/* (a) Header, nav, and every menu element keep their resting
   background in EVERY interaction state. */
html body .site-header,
html body .site-header:hover,
html body .site-header:focus-within,
html body .site-header .main-navigation,
html body .site-header .main-navigation:hover,
html body .site-header .menu,
html body .site-header .menu:hover {
	background: var(--color-surface) !important;
	background-color: var(--color-surface) !important;
}

/* (b) Every menu trigger `<li>` is permanently transparent. */
html body .site-header .menu > li,
html body .site-header .menu > li:hover,
html body .site-header .menu > li:focus-within,
html body .site-header .menu > li.menu-item,
html body .site-header .menu > li.menu-item:hover,
html body .site-header .menu > li.menu-item:focus-within,
html body .site-header .menu > li.menu-item-has-children,
html body .site-header .menu > li.menu-item-has-children:hover,
html body .site-header .menu > li.menu-item-has-children:focus-within {
	background: transparent !important;
	background-color: transparent !important;
}

/* (c) The page wrappers below the header never change colour. */
html body,
html body #page,
html body .site,
html body .site-content,
html body .site-main,
html body #primary {
	background-color: transparent !important;
}

/* The site-bg layer is the ONLY thing painting the page colour,
   and it has pointer-events:none so it cannot react to hover. */
html body > .site-bg {
	pointer-events: none !important;
}

/* Dropdown panels: dark navy, readable on dark site */
html body .site-header .ld-mega,
html body .site-header .ld-mini-mega,
html body .site-header .menu-item ul.sub-menu {
	background: #ffffff !important;
	opacity: 1 !important;
	z-index: 9999 !important;
	box-shadow: 0 30px 80px rgba(12, 17, 22, .15) !important;
	border-radius: 12px !important;
	border: 1px solid rgba(12, 17, 22, .08) !important;
}

/* ==========================================================
   TL;DR CALLOUT — sky-blue tinted box matching the page theme.
   Auto-wrapped by post.js when a <p><strong>TL;DR</strong></p>
   is followed by a <ul> in the article body.
   ========================================================== */
.post-article__content .post-tldr,
.entry-content .post-tldr {
	background: hsl(var(--bg-hue, 205) 90% 95%);
	border: 1px solid hsl(var(--bg-hue, 205) 80% 86%);
	border-left: 4px solid var(--color-accent-3);
	border-radius: 12px;
	padding: 24px 28px;
	margin: 32px 0;
}

/* TL;DR label — works whether the source was a heading or a <p><strong>.
   Reset h2/h3 sizing so it always looks like a small uppercase label. */
.post-article__content .post-tldr > :first-child,
.entry-content .post-tldr > :first-child,
.post-article__content .post-tldr > :first-child *,
.entry-content .post-tldr > :first-child * {
	color: var(--color-accent-3) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	line-height: 1.3 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	display: block;
	background: transparent !important;
}

/* Bullet list inside the callout */
.post-article__content .post-tldr ul,
.entry-content .post-tldr ul,
.post-article__content .post-tldr ol,
.entry-content .post-tldr ol {
	margin: 0 !important;
	padding-left: 22px;
}
.post-article__content .post-tldr li,
.entry-content .post-tldr li {
	margin: 8px 0;
	color: var(--color-ink-soft);
	line-height: 1.6;
	font-size: 1rem;
}
.post-article__content .post-tldr li::marker,
.entry-content .post-tldr li::marker {
	color: var(--color-accent-3);
	font-weight: 700;
}
.post-article__content .post-tldr li + li,
.entry-content .post-tldr li + li {
	margin-top: 10px;
}

/* Mobile: tighter padding */
@media (max-width: 640px) {
	.post-article__content .post-tldr,
	.entry-content .post-tldr {
		padding: 20px 22px;
		margin: 24px 0;
	}
}

/* ==========================================================
   TOC STICKY — IN THE GRID FLOW (not fixed).
   The TOC stays in column 1 of .post-layout and uses
   position: sticky to pin to top: 96px while scrolling.
   Every ancestor is forced to overflow: visible so sticky
   never breaks.
   ========================================================== */
@media (min-width: 1024px) {
	/* Force all ancestors to allow sticky */
	html body .post-page,
	html body .post-page .container,
	html body .site-content,
	html body .site-main.post-page,
	html body #primary.site-main.post-page,
	html body #page.site,
	html body #content.site-content {
		overflow: visible !important;
	}

	/* Layout grid — TOC column + article column */
	html body .post-layout {
		display: grid !important;
		grid-template-columns: 260px minmax(0, 1fr) !important;
		gap: clamp(32px, 4vw, 64px) !important;
		align-items: start !important;
		overflow: visible !important;
	}

	/* Lock TOC to column 1 and article to column 2 so when JS
	   pulls the TOC out of flow (position: fixed), the article
	   doesn't wrap into the narrow 260px column. */
	html body .post-layout > .post-toc {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}
	html body .post-layout > .post-article {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}

	/* TOC initial sticky styling (JS may upgrade to fixed on scroll) */
	html body .post-toc {
		position: sticky !important;
		top: 96px !important;
		align-self: start !important;
		max-height: none !important;
		overflow: visible !important;
		width: 100% !important;
		left: auto !important;
		z-index: 5;
	}
}

/* Below 1024px: revert to static — TOC sits above article. */
@media (max-width: 1023px) {
	html body .post-toc {
		position: static !important;
		max-height: none !important;
		overflow: visible !important;
		width: 100% !important;
		left: auto !important;
	}
}

/* ==========================================================
   BLOG ARTICLE TYPOGRAPHY — strong hierarchy + highlighted
   key phrases. Headings get prominent treatment, <strong>
   tags get a soft sky-blue highlight + bold ink.
   ========================================================== */

/* H2 — section headings (e.g. "Three Approaches to Future-Proofing…") */
.post-article__content h2,
.entry-content h2 {
	font-size: clamp(1.6rem, 1.6vw + 1rem, 2.25rem) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em;
	color: var(--color-accent-3) !important;
	margin: 1.4em 0 0.4em !important;
	padding-bottom: 0.3em;
	border-bottom: 2px solid hsl(var(--bg-hue, 205) 80% 90%);
	scroll-margin-top: 96px;
}

/* H3 — sub-section headings (e.g. "Prediction 1:", "1. The Reactive Approach:") */
.post-article__content h3,
.entry-content h3 {
	font-size: clamp(1.2rem, 0.9vw + 0.9rem, 1.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--color-text) !important;
	margin: 1.1em 0 0.3em !important;
	scroll-margin-top: 96px;
}

/* H4 — minor subsections */
.post-article__content h4,
.entry-content h4 {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: var(--color-text) !important;
	margin: 0.9em 0 0.25em !important;
}

/* Remove the generic "* + *" 1.4em top margin when the next sibling
   is a heading — heading margins already handle their own spacing. */
.post-article__content > * + h2,
.post-article__content > * + h3,
.post-article__content > * + h4,
.entry-content > * + h2,
.entry-content > * + h3,
.entry-content > * + h4 {
	margin-top: 1.4em !important;
}
.post-article__content h2 + *,
.post-article__content h3 + *,
.post-article__content h4 + *,
.entry-content h2 + *,
.entry-content h3 + *,
.entry-content h4 + * {
	margin-top: 0.5em !important;
}
/* Paragraph-to-paragraph spacing — tighter, consistent */
.post-article__content > p + p,
.entry-content > p + p {
	margin-top: 1em !important;
}
/* List spacing */
.post-article__content > p + ul,
.post-article__content > p + ol,
.entry-content > p + ul,
.entry-content > p + ol {
	margin-top: 0.6em !important;
}
.post-article__content > ul + p,
.post-article__content > ol + p,
.entry-content > ul + p,
.entry-content > ol + p {
	margin-top: 1em !important;
}

/* —— STRONG / B — highlighted key phrases ——
   Soft sky-blue tint behind bold text + dark ink so callouts
   like "What to do this week:", "Where it fails:", etc. pop. */
.post-article__content p strong,
.post-article__content li strong,
.post-article__content p b,
.post-article__content li b,
.entry-content p strong,
.entry-content li strong,
.entry-content p b,
.entry-content li b {
	background: hsl(var(--bg-hue, 205) 90% 92%);
	color: var(--color-text);
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Don't highlight strong inside the TL;DR callout (it has its own label) */
.post-article__content .post-tldr strong,
.entry-content .post-tldr strong {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: inherit;
}

/* Don't highlight strong inside the TOC (compact list) */
.post-toc strong {
	background: transparent !important;
	padding: 0 !important;
	color: inherit;
}

/* Italic in body — keep as accent ink for emphasis without highlight */
.post-article__content em,
.entry-content em {
	color: var(--color-accent-3);
	font-style: italic;
}

/* Blockquote — sky-blue tinted with accent left bar */
.post-article__content blockquote,
.entry-content blockquote {
	background: hsl(var(--bg-hue, 205) 90% 96%);
	border-left: 4px solid var(--color-accent-3);
	padding: 18px 22px;
	margin: 28px 0;
	border-radius: 0 12px 12px 0;
	font-style: italic;
	color: var(--color-ink-soft);
}

/* Lists — comfortable spacing, accent bullet markers */
.post-article__content ul,
.post-article__content ol,
.entry-content ul,
.entry-content ol {
	padding-left: 1.5em;
	margin: 1.2em 0 !important;
}
.post-article__content li,
.entry-content li {
	margin: 0.6em 0;
	line-height: 1.7;
}
.post-article__content ul li::marker,
.entry-content ul li::marker {
	color: var(--color-accent-3);
	font-weight: 700;
}
.post-article__content ol li::marker,
.entry-content ol li::marker {
	color: var(--color-accent-3);
	font-weight: 800;
}

/* Tables — already styled earlier; ensure consistent rendering */
.post-article__content table,
.entry-content table {
	margin: 2rem 0 !important;
}

/* Inline code highlight */
.post-article__content code,
.entry-content code {
	background: hsl(var(--bg-hue, 205) 90% 94%);
	color: var(--color-accent-3);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.92em;
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* ==========================================================
   TOC + TL;DR ALIGNMENT POLISH
   Match the TOC card style to the TL;DR callout so they read
   as a designed pair, tighten TOC item spacing, and ensure
   both panels start at the same vertical baseline.
   ========================================================== */

/* TOC card — match the TL;DR callout: sky-blue tint, accent border-left */
html body .post-toc {
	background: hsl(var(--bg-hue, 205) 90% 96%) !important;
	border: 1px solid hsl(var(--bg-hue, 205) 80% 88%) !important;
	border-left: 4px solid var(--color-accent-3) !important;
	border-radius: 12px !important;
	padding: 22px 22px 22px 24px !important;
	box-shadow: var(--shadow-sm) !important;
	font-size: 13px !important;
}

/* TOC heading — same uppercase indigo label as the TL;DR */
html body .post-toc__title {
	color: var(--color-accent-3) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	margin: 0 0 14px !important;
	padding-bottom: 12px;
	border-bottom: 1px solid hsl(var(--bg-hue, 205) 70% 85%);
	line-height: 1.2;
}

/* TOC items — tighter, cleaner, no excessive line-wrap padding */
html body .post-toc__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
html body .post-toc__list li {
	margin: 0 !important;
}
html body .post-toc__list a {
	display: block;
	padding: 7px 0 7px 12px !important;
	margin-left: -2px;
	color: var(--color-ink-soft) !important;
	font-size: 13px;
	line-height: 1.4;
	border-left: 2px solid transparent;
	text-decoration: none;
	transition: color .2s ease, border-left-color .2s ease;
}
html body .post-toc__list a:hover {
	color: var(--color-accent-3) !important;
}
html body .post-toc__list a.is-active {
	color: var(--color-accent-3) !important;
	border-left-color: var(--color-accent-3) !important;
	font-weight: 600;
}

/* Reset wrapping line-height for TOC list items so multi-line items
   don't have huge gaps between their wrapped lines. */
html body .post-toc__list li + li {
	border-top: 1px solid hsl(var(--bg-hue, 205) 70% 92%);
}

/* TL;DR callout matches the TOC card width and margins */
html body .post-article__content .post-tldr,
html body .entry-content .post-tldr {
	margin: 0 0 28px !important; /* top:0 so it aligns with TOC's top */
}

/* Both panels should sit at the same Y baseline. Their parent
   grid uses align-items: start so this should already work, but
   force margin-top: 0 on both to remove any heading margins
   that might push the TL;DR down. */
html body .post-toc,
html body .post-article__content > .post-tldr:first-child {
	margin-top: 0 !important;
}
html body .post-article__content > .post-tldr:first-child > :first-child {
	margin-top: 0 !important;
}

/* =========================================================================
   Service Detail Page  (.spd-*)
   12-section template — template-service-detail.php

   Visual system:
   - 1200px container, 24px gutters (matches site --container)
   - Vertical rhythm: 80px desktop section padding (matches site standard:
     svc-split, ct-split, blog-index all use 80px 0)
   - Hero centered; everything else left-aligned
   - Brand purple accent (--spd-accent set per category)
   - WCAG AA contrast; Inter, two weights
   ========================================================================= */

.spd {
	font-family: var(--font-sans);
	color: var(--color-ink-soft);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.spd-container {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding-left: clamp(16px, 2.5vw, 40px);
	padding-right: clamp(16px, 2.5vw, 40px);
}

.spd-section {
	padding: 72px 0;
	position: relative;
}

@media (max-width: 900px) { .spd-section { padding: 56px 0; } }
@media (max-width: 600px) { .spd-section { padding: 40px 0; } }

/* Alternation removed — cleaner, uniform background reads more premium
   than zebra-striped sections. Borders/shadows on cards provide rhythm. */

/* Category accents — reuse existing tokens, derive --spd-accent + variants */
.spd--green  { --spd-accent: var(--color-green);    --spd-accent-soft: rgba(16, 185, 129, .12); --spd-accent-hi: #059669; }
.spd--pink   { --spd-accent: var(--color-pink);     --spd-accent-soft: rgba(236, 72, 153, .12); --spd-accent-hi: #db2777; }
.spd--purple { --spd-accent: var(--color-purple);   --spd-accent-soft: rgba(139, 92, 246, .14); --spd-accent-hi: #7c3aed; }
.spd--amber  { --spd-accent: var(--color-amber);    --spd-accent-soft: rgba(245, 158, 11, .14); --spd-accent-hi: #d97706; }
.spd         { --spd-accent: #16c47f; --spd-accent-soft: rgba(22, 196, 127, .14); --spd-accent-hi: #0fa968; }

/* ===== Typography ===== */
.spd .spd-hero__h1,
.spd .spd-h2,
.spd .spd-card__title,
.spd .spd-step__title,
.spd .spd-list__title {
	color: var(--color-text);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.spd-hero__h1 {
	font-size: clamp(2.4rem, 4.4vw + .9rem, 4rem);
	line-height: 1.1;
	margin: 0 0 18px;
	letter-spacing: -0.025em;
}

.spd .spd-h2 {
	font-size: clamp(1.75rem, 1.6vw + 1.05rem, 2.4rem);
	line-height: 1.18;
	margin: 0 0 16px;
	max-width: 34ch;
}

.spd .spd-list__title,
.spd .spd-step__title,
.spd .spd-card__title {
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0 0 6px;
}

.spd p {
	color: var(--color-ink-soft);
	max-width: none;
	margin: 0 0 16px;
}

/* Keep prose paragraphs readable — long lines hurt legibility */
.spd .spd-prose p { max-width: 72ch; }
.spd .spd-lede     { max-width: 80ch; }

.spd-lede {
	font-size: 1.18rem;
	line-height: 1.55;
	color: var(--color-text);
	font-weight: 500;
	max-width: 78ch;
	margin: 0 0 22px;
}

/* ===== 1. HERO ===== */
.spd-hero {
	padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 5vw, 64px);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.spd-hero::before {
	content: "";
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	width: min(900px, 90vw);
	height: 520px;
	background: radial-gradient(ellipse at center, var(--spd-accent-soft) 0%, transparent 70%);
	filter: blur(20px);
	z-index: 0;
	pointer-events: none;
}

.spd-hero .spd-container {
	max-width: 1440px;
	position: relative;
	z-index: 1;
}

/* hero padding is already fluid via clamp() — no extra mobile override needed */

.spd-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--spd-accent-hi);
	background: var(--spd-accent-soft);
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	margin: 0 0 22px;
	border: 1px solid rgba(20, 20, 30, .05);
}

.spd-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--spd-accent);
	box-shadow: 0 0 0 3px var(--spd-accent-soft);
}

.spd-hero__sub {
	font-size: clamp(1.05rem, .4vw + .95rem, 1.22rem);
	line-height: 1.55;
	color: var(--color-ink-soft);
	max-width: 66ch;
	margin: 0 auto 32px;
}

.spd-hero__cta {
	display: inline-flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 28px;
}

.spd-hero__trust {
	font-size: 13.5px;
	color: var(--color-muted);
	margin: 0;
}

/* ===== Buttons ===== */
.spd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	border-radius: 10px;
	border: 1px solid transparent;
	text-decoration: none;
	transition: transform .18s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
	cursor: pointer;
	white-space: nowrap;
}

.spd-btn--lg { padding: 18px 32px; font-size: 16px; border-radius: 12px; }

.spd-btn--primary {
	background: var(--spd-accent);
	color: #fff;
	box-shadow: 0 6px 20px -4px var(--spd-accent-soft), 0 2px 6px rgba(20, 20, 30, .08);
}
.spd-btn--primary:hover {
	background: var(--spd-accent-hi);
	transform: translateY(-1px);
	box-shadow: 0 10px 28px -6px var(--spd-accent-soft), 0 4px 10px rgba(20, 20, 30, .1);
}

.spd-btn--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}
.spd-btn--ghost:hover {
	border-color: var(--spd-accent);
	color: var(--spd-accent-hi);
	background: var(--spd-accent-soft);
}

/* ===== Shared section header accent bar above each H2 ===== */
.spd .spd-section:not(.spd-hero):not(.spd-final) .spd-h2 {
	position: relative;
	padding-top: 14px;
	margin-bottom: 28px;
}
.spd .spd-section:not(.spd-hero):not(.spd-final) .spd-h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 3px;
	background: var(--spd-accent);
	border-radius: 2px;
}

/* ===== 3. Solution lede sits closer to the H2 ===== */
.spd-solution .spd-lede { margin-top: -8px; }

/* ===== 4. Deliverables list ===== */
.spd-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (max-width: 768px) { .spd-list { grid-template-columns: 1fr; gap: 14px; } }

.spd-list__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 22px;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.spd-list__item:hover {
	border-color: var(--spd-accent);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(20, 20, 30, .1);
}

.spd-section:nth-of-type(even of .spd-section) .spd-list__item {
	background: var(--color-bg);
}

.spd-list__bullet {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 8px;
	background: var(--spd-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.spd-list__bullet::after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.3l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.3l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.spd-list__body { flex: 1 1 auto; min-width: 0; }

.spd-list__desc {
	color: var(--color-muted);
	font-size: 0.97rem;
	margin: 0;
	line-height: 1.55;
}

/* ===== 5. Process steps ===== */
.spd-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) { .spd-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .spd-steps { grid-template-columns: 1fr; gap: 20px; } }

.spd-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	height: 100%;
}

.spd-section:nth-of-type(even of .spd-section) .spd-step { background: var(--color-bg); }

.spd-step:hover {
	border-color: var(--spd-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(20, 20, 30, .12);
}

.spd-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--spd-accent), var(--spd-accent-hi));
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	box-shadow: 0 6px 16px -6px var(--spd-accent-soft);
}

.spd-step__body { display: flex; flex-direction: column; gap: 6px; }
.spd-step__desc {
	color: var(--color-muted);
	font-size: 0.97rem;
	margin: 0;
	line-height: 1.55;
}

/* ===== 6/7. Card grids (Why Us + Results) ===== */
.spd-grid {
	display: grid;
	gap: 20px;
}
.spd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.spd-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
	.spd-grid--2 { grid-template-columns: 1fr; }
	.spd-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.spd-grid--3 { grid-template-columns: 1fr; }
}

.spd-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 32px 28px 28px;
	box-shadow: 0 1px 2px rgba(20, 20, 30, .03);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	position: relative;
}

.spd-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 28px;
	width: 32px;
	height: 3px;
	background: var(--spd-accent);
	border-radius: 0 0 3px 3px;
}

.spd-card:hover {
	border-color: var(--spd-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(20, 20, 30, .12);
}

.spd-section:nth-of-type(even of .spd-section) .spd-card { background: var(--color-bg); }

.spd-card__desc {
	color: var(--color-muted);
	margin: 0;
	line-height: 1.6;
}

/* ===== 7. Stat / Results cards ===== */
.spd-stat {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.spd-section:nth-of-type(even of .spd-section) .spd-stat { background: var(--color-bg); }

.spd-stat:hover {
	border-color: var(--spd-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(20, 20, 30, .12);
}

.spd-stat__metric {
	font-size: clamp(1.75rem, 2vw + 1rem, 2.4rem);
	font-weight: 700;
	background: linear-gradient(135deg, var(--spd-accent), var(--spd-accent-hi));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.spd-stat__desc {
	color: var(--color-muted);
	font-size: 0.97rem;
	margin: 0;
	line-height: 1.55;
}

/* ===== 8. Who this is for ===== */
.spd-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 20px;
}

@media (max-width: 768px) { .spd-checklist { grid-template-columns: 1fr; } }

.spd-checklist li {
	position: relative;
	padding: 14px 16px 14px 46px;
	color: var(--color-ink-soft);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	line-height: 1.5;
}

.spd-section:nth-of-type(even of .spd-section) .spd-checklist li { background: var(--color-bg); }

.spd-checklist li::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 14px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--spd-accent);
}

.spd-checklist li::after {
	content: "";
	position: absolute;
	left: 14px;
	top: 14px;
	width: 22px;
	height: 22px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11.3l3.5 3.5 8.5-8.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11.3l3.5 3.5 8.5-8.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.spd-who__note {
	color: var(--color-muted);
	font-size: 0.97rem;
	border-left: 3px solid var(--spd-accent);
	padding: 4px 0 4px 16px;
	margin-top: 24px;
	max-width: 70ch;
	font-style: italic;
}

/* ===== 9. Pricing ===== */
.spd-pricing .spd-container { max-width: 1440px; }

.spd-pricing .spd-prose {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--spd-accent);
	border-radius: 14px;
	padding: 28px 30px;
	margin-bottom: 20px;
}

.spd-section:nth-of-type(even of .spd-section) .spd-pricing .spd-prose { background: var(--color-bg); }

.spd-pricing .spd-prose p { margin: 0; max-width: none; }

/* ===== 10. Testimonial — single quote stays narrow for readability,
   multi-testimonial uses the full container so cards breathe. ===== */
.spd-testimonial .spd-container { max-width: 1440px; }
.spd-testimonial--multi .spd-container { max-width: 1320px; }

.spd-quote {
	margin: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	padding: 56px 48px 40px;
	box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
	position: relative;
	overflow: hidden;
}

@media (max-width: 600px) { .spd-quote { padding: 44px 26px 30px; } }

.spd-section:nth-of-type(even of .spd-section) .spd-quote { background: var(--color-bg); }

.spd-quote::before {
	content: "\201C";
	position: absolute;
	top: -24px;
	left: 28px;
	font-size: 180px;
	line-height: 1;
	font-family: sans-serif;
	color: var(--spd-accent-soft);
	font-weight: 700;
	pointer-events: none;
}

.spd-quote__text {
	font-size: clamp(1.15rem, .5vw + 1.05rem, 1.4rem);
	font-weight: 500;
	color: var(--color-text);
	line-height: 1.55;
	margin: 0 0 24px;
	position: relative;
	z-index: 1;
	font-style: italic;
}

.spd-quote__attr {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--color-muted);
	font-size: 0.95rem;
	border-top: 1px solid var(--color-border);
	padding-top: 18px;
}

.spd-quote__attr strong {
	color: var(--color-text);
	font-weight: 600;
	font-size: 1rem;
}

/* ===== 11. FAQ ===== */
.spd-faq .spd-container { max-width: 1440px; }

.spd-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

.spd-faq__item {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.spd-section:nth-of-type(even of .spd-section) .spd-faq__item { background: var(--color-bg); }

.spd-faq__item:hover { border-color: rgba(20, 20, 30, .14); }

.spd-faq__item[open] {
	border-color: var(--spd-accent);
	box-shadow: 0 10px 24px -14px var(--spd-accent-soft);
}

.spd-faq__item > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	font-weight: 600;
	color: var(--color-text);
	font-size: 1.02rem;
	line-height: 1.4;
}

.spd-faq__item > summary::-webkit-details-marker { display: none; }
.spd-faq__item > summary:hover { color: var(--spd-accent-hi); }

.spd-faq__q { flex: 1; }

.spd-faq__icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--spd-accent-soft);
	color: var(--spd-accent-hi);
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	transition: transform .25s ease;
}

.spd-faq__item[open] .spd-faq__icon { transform: rotate(45deg); }

.spd-faq__a {
	padding: 0 24px 24px;
	color: var(--color-ink-soft);
	line-height: 1.65;
}
.spd-faq__a p { margin: 0; max-width: none; color: var(--color-ink-soft); }

/* ===== 12. Final CTA ===== */
.spd-final .spd-container { max-width: 1440px; }

.spd-final__panel {
	background: linear-gradient(135deg, #f0faf5 0%, #e6f4fb 100%);
	color: #0c1116;
	border-radius: 24px;
	padding: 72px 64px;
	text-align: center;
	box-shadow: 0 30px 60px -20px rgba(22, 196, 127, .18), 0 12px 30px -12px rgba(11, 181, 214, .12);
	border: 1px solid rgba(22, 196, 127, .15);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) { .spd-final__panel { padding: 56px 32px; border-radius: 20px; } }
@media (max-width: 480px) { .spd-final__panel { padding: 44px 24px; } }

.spd-final__panel::before {
	content: "";
	position: absolute;
	top: -50%;
	left: 30%;
	right: 30%;
	height: 380px;
	background: radial-gradient(ellipse at center, var(--spd-accent-soft) 0%, transparent 70%);
	filter: blur(40px);
	opacity: .9;
	pointer-events: none;
}

.spd-final__panel > * { position: relative; z-index: 1; }

/* Dark text on light final panel */
.spd-final__panel,
.spd-final__panel p {
	color: #0c1116;
}

.spd-final .spd-final__lede {
	font-size: clamp(1.15rem, .6vw + 1.05rem, 1.4rem);
	line-height: 1.5;
	max-width: 60ch;
	margin: 0 auto 32px;
	font-weight: 500;
}

.spd-final .spd-final__sub {
	color: #444f5a;
	margin: 24px auto 0;
	max-width: 50ch;
	font-size: 0.95rem;
}

.spd-final .spd-btn--primary {
	background: linear-gradient(135deg, #16c47f, #0bb5d6);
	color: #fff;
	box-shadow: 0 12px 28px rgba(22, 196, 127, .4);
}
.spd-final .spd-btn--primary:hover {
	background: linear-gradient(135deg, #1ed692, #1bc5e8);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(22, 196, 127, .5);
}

/* ===== Focus states (a11y) ===== */
.spd a:focus-visible,
.spd .spd-btn:focus-visible,
.spd .spd-faq__item > summary:focus-visible {
	outline: 2px solid var(--spd-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Unified easing — gives every hover the same elegant cubic curve so
   the page feels coherent rather than a collage of components. */
.spd .spd-btn,
.spd .spd-list__item,
.spd .spd-step,
.spd .spd-card,
.spd .spd-stat,
.spd .spd-faq__item,
.spd .spd-faq__icon,
.spd .spd-related__card,
.spd .spd-related__arrow {
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
	transition-duration: .35s;
}

/* Hover lift — softer, more refined than the original 2px translate.
   Cards rise 3px with a tighter, longer shadow for that premium feel. */
.spd .spd-list__item:hover,
.spd .spd-step:hover,
.spd .spd-card:hover,
.spd .spd-stat:hover,
.spd .spd-related__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -18px rgba(20, 20, 30, .14), 0 2px 4px rgba(20, 20, 30, .04);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.spd-btn,
	.spd-list__item,
	.spd-step,
	.spd-card,
	.spd-stat,
	.spd-faq__item,
	.spd-faq__icon,
	.spd-related__card,
	.spd-related__arrow { transition: none; }
}

/* =========================================================================
   Service Detail Page — v2 additions
   Social Proof Bar, Outcomes list, Multi-testimonial, Related Services,
   Scroll reveal, Results label.
   ========================================================================= */

/* ===== 2. Social proof bar — tight strip directly under the hero ===== */
.spd-proof-bar {
	padding: 0 0 40px;
}

.spd-proof-bar::before {
	content: none;
}

.spd-proof-bar .spd-container {
	max-width: var(--container);
}

.spd-proof-bar__list {
	list-style: none;
	margin: 0;
	padding: 36px 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(20, 20, 30, .03), 0 12px 32px -20px rgba(20, 20, 30, .12);
	position: relative;
	overflow: hidden;
}

.spd-proof-bar__list::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 20px;
	padding: 1px;
	background: linear-gradient(135deg, var(--spd-accent-soft), transparent 40%, transparent 60%, var(--spd-accent-soft));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	opacity: .9;
}

@media (max-width: 768px) {
	.spd-proof-bar__list {
		grid-template-columns: 1fr;
		padding: 28px 22px;
		gap: 18px;
	}
}

.spd-proof-bar__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
	position: relative;
}

.spd-proof-bar__item + .spd-proof-bar__item::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 12%;
	bottom: 12%;
	width: 1px;
	background: var(--color-border);
}

@media (max-width: 768px) {
	.spd-proof-bar__item + .spd-proof-bar__item::before {
		display: none;
	}
}

.spd-proof-bar__metric {
	font-size: clamp(2rem, 3vw + 1rem, 3.2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	background: linear-gradient(135deg, var(--spd-accent), var(--spd-accent-hi));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.spd-proof-bar__label {
	display: block;
	color: var(--color-muted);
	font-size: 0.95rem;
	line-height: 1.4;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.spd-proof-bar__label { white-space: normal; }
}

/* ===== 4. Solution outcomes list (sits under the lede/paragraph) ===== */
.spd-outcomes {
	list-style: none;
	padding: 0;
	margin: 28px 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 24px;
	max-width: 80ch;
}

@media (max-width: 768px) { .spd-outcomes { grid-template-columns: 1fr; } }

.spd-outcomes li {
	position: relative;
	padding-left: 32px;
	color: var(--color-ink-soft);
	line-height: 1.5;
}

.spd-outcomes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--spd-accent-soft);
}

.spd-outcomes li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 12px;
	height: 12px;
	background-color: var(--spd-accent-hi);
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.3l3 3 7-7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.3l3 3 7-7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== 8. Results — optional label between metric and desc ===== */
.spd-stat__label {
	font-weight: 600;
	color: var(--color-text);
	font-size: 0.98rem;
	letter-spacing: -0.005em;
	margin-top: -6px;
}

/* ===== 11. Testimonials — single quote OR responsive 2-3 column grid ===== */
.spd-quote-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}

.spd-testimonial--multi .spd-quote-grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.spd-testimonial--multi .spd-quote-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 720px) {
	.spd-testimonial--multi .spd-quote-grid {
		grid-template-columns: 1fr;
	}
}

.spd-testimonial--multi .spd-quote {
	padding: 32px 30px 26px;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(20, 20, 30, .03), 0 18px 40px -28px rgba(20, 20, 30, .14);
}

.spd-testimonial--multi .spd-quote::before {
	font-size: 110px;
	top: -10px;
	left: 18px;
}

.spd-testimonial--multi .spd-quote__text {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 20px;
	font-style: normal;
}

.spd-testimonial--multi .spd-quote__attr {
	padding-top: 16px;
	font-size: 0.9rem;
}

/* ===== 14. Related services — link cards with arrow affordance ===== */
.spd-related .spd-container { max-width: var(--container); }

.spd-related__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

@media (max-width: 1024px) { .spd-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .spd-related__grid { grid-template-columns: 1fr; } }

.spd-related__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 22px 22px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	text-decoration: none;
	color: var(--color-text);
	height: 100%;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	position: relative;
	overflow: hidden;
}

.spd-section:nth-of-type(even of .spd-section) .spd-related__card { background: var(--color-bg); }

.spd-related__card::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	width: 28px;
	background: var(--spd-accent);
	border-radius: 0 0 3px 3px;
	transition: width .25s ease;
}

.spd-related__card:hover {
	border-color: var(--spd-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(20, 20, 30, .12);
}

.spd-related__card:hover::after { width: 60%; }

.spd-related__title {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-text);
	letter-spacing: -0.005em;
}

.spd-related__desc {
	color: var(--color-muted);
	font-size: 0.93rem;
	line-height: 1.5;
	flex: 1 1 auto;
}

.spd-related__arrow {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--spd-accent-soft);
	color: var(--spd-accent-hi);
	font-size: 15px;
	transition: transform .2s ease;
	align-self: flex-start;
}

.spd-related__card:hover .spd-related__arrow {
	transform: translateX(4px);
}

/* ===== Scroll reveal — applied by JS only when supported ===== */
.spd-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .65s ease, transform .65s cubic-bezier(.2, .8, .2, 1);
	will-change: opacity, transform;
}

.spd-reveal--in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.spd-reveal { opacity: 1; transform: none; transition: none; }
	.spd-related__card,
	.spd-related__arrow,
	.spd-related__card::after { transition: none; }
}

/* Dark-mode block removed — the site is light-only by design (color-scheme: light
   is declared on :root). Re-introduce only if a real dark theme is intentional. */

/* =========================================================================
   NATIONAL SEO  —  scoped page overrides (does not affect the other 18
   service pages). Adapts the user's reference HTML design language to the
   LocalsDen palette: purple accent, site light-blue background, Inter type.
   Selector hook: body.service-national-seo (added via body_class filter).
   ========================================================================= */

body.service-national-seo {
	--ns-accent:      #16c47f;
	--ns-accent-hi:   #1ed692;
	--ns-accent-soft: rgba(22, 196, 127, .16);
	--ns-accent-wash: rgba(22, 196, 127, .08);
	--ns-grad:        linear-gradient(135deg, #16c47f 0%, #0bb5d6 100%);
	--ns-paper:       #ffffff;
	--ns-paper-2:     #f6f8f7;
	--ns-line:        rgba(12, 17, 22, .08);
	--ns-ink:         #0c1116;
	--ns-ink-soft:    #2a333d;
	--ns-body:        #444f5a;
	--ns-muted:       #7a8794;
}

/* Force the page-level accent regardless of the .spd--green category class
   (the parent .spd rule was winning over .spd--green anyway, but we set it
   explicitly here so the design system reads predictably). */
body.service-national-seo .spd {
	--spd-accent:      var(--ns-accent);
	--spd-accent-hi:   var(--ns-accent-hi);
	--spd-accent-soft: var(--ns-accent-soft);
}

/* ===== Typography refinement ===== */
body.service-national-seo .spd { color: var(--ns-body); }
body.service-national-seo .spd p { color: var(--ns-body); }
body.service-national-seo .spd .spd-lede { color: var(--ns-ink-soft); }

body.service-national-seo .spd .spd-hero__h1,
body.service-national-seo .spd .spd-h2,
body.service-national-seo .spd .spd-card__title,
body.service-national-seo .spd .spd-step__title,
body.service-national-seo .spd .spd-list__title {
	color: var(--ns-ink);
	letter-spacing: -0.025em;
}

body.service-national-seo .spd-hero__h1 {
	font-size: clamp(2.4rem, 4.4vw + 1rem, 4rem);
	line-height: 1.05;
}

body.service-national-seo .spd .spd-h2 {
	font-size: clamp(1.85rem, 2.6vw + .7rem, 2.7rem);
	line-height: 1.12;
	max-width: 30ch;
}

/* ===== Section rhythm — fluid via clamp, like the reference ===== */
body.service-national-seo .spd-section {
	padding: clamp(3.5rem, 6vw, 6rem) 0;
}
body.service-national-seo .spd-hero {
	padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

/* ===== Eyebrow — switch to pill-less leading-dash style ===== */
body.service-national-seo .spd-eyebrow {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--ns-accent-hi);
	font-size: .72rem;
	letter-spacing: 0.18em;
	margin: 0 0 1rem;
	gap: .55rem;
}
body.service-national-seo .spd-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--ns-grad);
	box-shadow: none;
}

/* H2 accent bar — replace the leading dash with a gradient to match eyebrow */
body.service-national-seo .spd .spd-section:not(.spd-hero):not(.spd-final) .spd-h2::before {
	background: var(--ns-grad);
	width: 32px;
	height: 3px;
}

/* ===== Hero — soft purple radial glow + faint grid mask (no harsh edges) ===== */
body.service-national-seo .spd-hero::before {
	width: min(960px, 92vw);
	height: 560px;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .18), transparent 70%),
	            radial-gradient(closest-side, rgba(99, 102, 241, .14), transparent 70%);
	background-position: 30% 30%, 70% 60%;
	background-repeat: no-repeat;
	filter: blur(14px);
}

body.service-national-seo .spd-hero__sub {
	color: var(--ns-ink-soft);
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

body.service-national-seo .spd-hero__trust {
	color: var(--ns-muted);
	font-size: .9rem;
}

/* ===== Cards (deliverables, why-us, results, related, testimonials, faq, who) — unified surface ===== */
body.service-national-seo .spd-list__item,
body.service-national-seo .spd-step,
body.service-national-seo .spd-card,
body.service-national-seo .spd-stat,
body.service-national-seo .spd-quote,
body.service-national-seo .spd-faq__item,
body.service-national-seo .spd-checklist li,
body.service-national-seo .spd-related__card,
body.service-national-seo .spd-pricing .spd-prose,
body.service-national-seo .spd-proof-bar__list {
	background: var(--ns-paper);
	border: 1px solid var(--ns-line);
	box-shadow: 0 1px 2px rgba(20, 20, 30, .04);
}

/* Override the zebra-row leftovers that were forcing alt background */
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-list__item,
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-step,
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-card,
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-stat,
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-quote,
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-faq__item,
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-checklist li,
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-related__card,
body.service-national-seo .spd-section:nth-of-type(even of .spd-section) .spd-pricing .spd-prose {
	background: var(--ns-paper);
}

/* Card text colors — readable, consistent */
body.service-national-seo .spd-list__desc,
body.service-national-seo .spd-step__desc,
body.service-national-seo .spd-card__desc,
body.service-national-seo .spd-stat__desc,
body.service-national-seo .spd-related__desc {
	color: var(--ns-body);
}

/* Card hover — single unified motion */
body.service-national-seo .spd-list__item:hover,
body.service-national-seo .spd-step:hover,
body.service-national-seo .spd-card:hover,
body.service-national-seo .spd-stat:hover,
body.service-national-seo .spd-related__card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 22px 44px -22px rgba(20, 20, 30, .18), 0 2px 6px rgba(20, 20, 30, .04);
}

/* ===== Solution outcomes — bigger check, accent tint ===== */
body.service-national-seo .spd-outcomes li { color: var(--ns-ink-soft); }
body.service-national-seo .spd-outcomes li::before { background: var(--ns-accent-soft); }
body.service-national-seo .spd-outcomes li::after { background-color: var(--ns-accent-hi); }

/* ===== Social proof bar — refined, sits as a centered strip ===== */
body.service-national-seo .spd-proof-bar__list {
	border-radius: 22px;
	padding: 32px 28px;
}
body.service-national-seo .spd-proof-bar__list::before { display: none; }
body.service-national-seo .spd-proof-bar__metric {
	background: var(--ns-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
body.service-national-seo .spd-proof-bar__label { color: var(--ns-muted); }

/* ===== Process — circular gradient counters ===== */
body.service-national-seo .spd-step__num {
	background: var(--ns-grad);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	box-shadow: 0 8px 20px -8px rgba(99, 102, 241, .4);
}

/* ===== Result stat — gradient metric + optional sub-label ===== */
body.service-national-seo .spd-stat__metric {
	background: var(--ns-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
body.service-national-seo .spd-stat__label {
	color: var(--ns-ink);
	font-weight: 600;
}

/* ===== Who this is for — fit list with arrow bullets ===== */
body.service-national-seo .spd-checklist {
	display: grid;
	gap: 14px;
}
body.service-national-seo .spd-checklist li {
	padding: 14px 18px 14px 50px;
	border-radius: 14px;
	color: var(--ns-ink-soft);
}
body.service-national-seo .spd-checklist li::before {
	background: var(--ns-accent-soft);
	border-radius: 8px;
}
body.service-national-seo .spd-checklist li::after {
	background-color: var(--ns-accent-hi);
}
body.service-national-seo .spd-who__note {
	background: var(--ns-accent-wash);
	border-left-color: var(--ns-accent);
	color: var(--ns-ink-soft);
	border-radius: 0 14px 14px 0;
	padding: 16px 20px;
	font-style: normal;
}

/* ===== Pricing — dark panel feel via the existing .spd-prose box ===== */
body.service-national-seo .spd-pricing .spd-prose {
	border-left: 4px solid var(--ns-accent);
	border-radius: 18px;
	background: var(--ns-paper);
}
body.service-national-seo .spd-pricing .spd-prose p { color: var(--ns-body); }

/* ===== Testimonials — avatar circle, named quote ===== */
body.service-national-seo .spd-quote {
	border-radius: 20px;
}
body.service-national-seo .spd-quote::before {
	color: var(--ns-accent-soft);
	opacity: 1;
}
body.service-national-seo .spd-quote__text {
	color: var(--ns-ink-soft);
	font-style: normal;
}
body.service-national-seo .spd-quote__attr strong { color: var(--ns-ink); }
body.service-national-seo .spd-quote__attr span  { color: var(--ns-muted); }

/* ===== FAQ — cleaner, larger summary, gradient toggle ===== */
body.service-national-seo .spd-faq__item {
	border-radius: 14px;
}
body.service-national-seo .spd-faq__item > summary {
	color: var(--ns-ink);
	font-size: 1.05rem;
}
body.service-national-seo .spd-faq__item[open] {
	border-color: color-mix(in srgb, var(--ns-accent) 35%, var(--ns-line));
	box-shadow: 0 12px 30px -20px rgba(139, 92, 246, .25);
}
body.service-national-seo .spd-faq__icon {
	background: var(--ns-accent-soft);
	color: var(--ns-accent-hi);
}
body.service-national-seo .spd-faq__a p { color: var(--ns-body); }

/* ===== Final CTA — keep the dark panel, ensure purple glow is on-brand ===== */
body.service-national-seo .spd-final__panel::before {
	background: radial-gradient(ellipse at center, rgba(139, 92, 246, .35) 0%, transparent 70%);
}
body.service-national-seo .spd-final .spd-btn--primary {
	background: var(--ns-grad);
	color: #fff;
	box-shadow: 0 12px 28px -10px rgba(139, 92, 246, .45);
}
body.service-national-seo .spd-final .spd-btn--primary:hover {
	background: var(--ns-grad);
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -12px rgba(139, 92, 246, .55);
}

/* ===== Related — clean link cards with growing top bar ===== */
body.service-national-seo .spd-related__card {
	border-radius: 16px;
	padding: 22px 22px 20px;
}
body.service-national-seo .spd-related__card::after {
	background: var(--ns-grad);
}
body.service-national-seo .spd-related__title { color: var(--ns-ink); }
body.service-national-seo .spd-related__arrow {
	background: var(--ns-accent-soft);
	color: var(--ns-accent-hi);
}

/* ===== Buttons — refined to match the reference's pill style on hero CTA ===== */
body.service-national-seo .spd-btn--primary {
	background: var(--ns-grad);
	color: #fff;
	box-shadow: 0 10px 26px -10px rgba(139, 92, 246, .42);
}
body.service-national-seo .spd-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(139, 92, 246, .5);
}
body.service-national-seo .spd-btn--ghost {
	color: var(--ns-ink);
	border-color: var(--ns-line);
}
body.service-national-seo .spd-btn--ghost:hover {
	border-color: var(--ns-ink);
	color: var(--ns-ink);
	background: transparent;
}

/* ===== Selection highlight ===== */
body.service-national-seo ::selection {
	background: var(--ns-accent);
	color: #fff;
}

/* (site flipped to dark-theme by default — see :root tokens at the top) */

/* =========================================================================
   Dark Theme Normalization
   The theme has ~40 spots that hardcode `background: #fff` for section
   wrappers instead of using a token. This block routes the major ones to
   the dark surface tokens so the whole site stays consistent without
   editing every legacy rule. Buttons and intentional white inline
   elements are intentionally NOT in this list.
   ========================================================================= */
.blog-index,
.svc-split,
.svc-initiatives,
.svc-extra,
.svc-body,
.svc-row,
.ct-split,
.ct-grid,
.post-page {
	background: var(--color-bg);
}

/* Site header / sticky nav — was implicitly white; now matches body */
.site-header,
.site-header.is-stuck,
header.site-header {
	background: var(--color-bg);
	border-bottom-color: var(--color-border);
}

/* Cards / surfaces inside content sections — the existing tokenized ones
   already adapt. Hardcoded card rules in legacy sections get the soft
   surface so they read as raised, not flat. */
.blog-index .post-card,
.svc-split .card,
.svc-initiatives .card,
.ct-grid .card,
.ct-split .card {
	background: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-text);
}

/* Body copy + headings inside these legacy sections — ensure readable
   contrast on the new dark surfaces. */
.blog-index,
.svc-split,
.svc-initiatives,
.svc-extra,
.svc-body,
.svc-row,
.ct-split,
.ct-grid,
.post-page {
	color: var(--color-text);
}
.blog-index h1, .blog-index h2, .blog-index h3,
.svc-split h1, .svc-split h2, .svc-split h3,
.svc-initiatives h1, .svc-initiatives h2, .svc-initiatives h3,
.svc-extra h1, .svc-extra h2, .svc-extra h3,
.svc-body h1, .svc-body h2, .svc-body h3,
.svc-row h1, .svc-row h2, .svc-row h3,
.ct-split h1, .ct-split h2, .ct-split h3,
.ct-grid h1, .ct-grid h2, .ct-grid h3,
.post-page h1, .post-page h2, .post-page h3 {
	color: var(--color-text);
}
.blog-index p, .svc-split p, .svc-initiatives p,
.svc-extra p, .svc-body p, .svc-row p,
.ct-split p, .ct-grid p, .post-page p {
	color: var(--color-ink-soft);
}

/* =========================================================================
   Animated Light Mint + Green Gradient Background
   Light, almost-white wash with green tint and a soft animated green glow.
   Keeps the existing keyframes (lsdn-bg-glow, lsdn-bg-grid) so the page
   still has the slow drifting glow and scrolling grid.
   ========================================================================= */
.site-bg {
	background:
		radial-gradient(120% 90% at 50% -10%,
			hsl(145 75% 92%) 0%,
			hsl(150 60% 95%) 45%,
			hsl(155 45% 97%) 100%),
		hsl(155 45% 97%);
}

.site-bg__glow {
	/* Soft green glow that picks up the brand accent. The animation
	   (lsdn-bg-glow) is already defined upstream — we just swap the color. */
	background: radial-gradient(circle,
		rgba(22, 196, 127, .28) 0%,
		rgba(11, 181, 214, .14) 38%,
		transparent 65%);
	filter: blur(70px);
}

.site-bg__grid {
	background-image:
		linear-gradient(rgba(22, 196, 127, .16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(22, 196, 127, .16) 1px, transparent 1px);
}

/* A second slow-shifting cyan accent glow in the bottom-right for depth.
   Pure CSS, no extra markup needed. */
.site-bg::after {
	content: "";
	position: absolute;
	right: -10vw;
	bottom: -20vw;
	width: 60vw;
	height: 60vw;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(11, 181, 214, .16) 0%,
		transparent 60%);
	filter: blur(80px);
	animation: lsdn-bg-glow 22s ease-in-out infinite alternate-reverse;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.site-bg::after { animation: none; }
}

/* =========================================================================
   Legacy Text Color Normalization
   The theme has 30+ hardcoded dark text declarations (#1a1a2e, #1a1a1a,
   #0c0c10, #000, #222, #15151c) that would now be invisible on the dark
   bg. This block routes the major content text classes to the light
   tokens. Buttons that intentionally show dark text on a white background
   (e.g. .si-btn--accent, .btn--light, white CTA buttons) are explicitly
   excluded so they keep their contrast.
   ========================================================================= */

/* Legacy section + card titles → light text */
.blog-card__title,
.blog-card__title a,
.blog-card__excerpt,
.blog-card__meta,
.svc-split h2, .svc-split h3, .svc-split p,
.svc-initiatives h2, .svc-initiatives h3, .svc-initiatives p,
.svc-extra h2, .svc-extra h3, .svc-extra p,
.svc-body h2, .svc-body h3, .svc-body p,
.svc-row h2, .svc-row h3, .svc-row p,
.ct-split h2, .ct-split h3, .ct-split p,
.ct-grid h2, .ct-grid h3, .ct-grid p,
.post-page h1, .post-page h2, .post-page h3,
.post-page p, .post-page li,
.post-article h1, .post-article h2, .post-article h3,
.post-article p, .post-article li,
.post-card h1, .post-card h2, .post-card h3, .post-card p,
.post-tldr, .post-tldr p, .post-tldr h2 {
	color: var(--color-text);
}

.blog-card__excerpt,
.blog-card__meta,
.svc-split p, .svc-initiatives p, .svc-extra p,
.svc-body p, .svc-row p, .ct-split p, .ct-grid p,
.post-page p, .post-page li,
.post-article p, .post-article li,
.post-card p {
	color: var(--color-ink-soft);
}

/* Generic content link text — keep accent on hover */
.blog-card__title a:hover,
.post-article a:hover,
.svc-split a:hover,
.svc-initiatives a:hover,
.ct-grid a:hover {
	color: var(--color-accent-2);
}

/* Anything that's `color: #1a1a2e` or `#1a1a1a` in unscoped contexts
   becomes invisible on dark. Reset the family broadly, then let
   buttons re-assert below. */
.ld-section,
.ld-section h1, .ld-section h2, .ld-section h3, .ld-section h4,
.ld-section p, .ld-section li, .ld-section a {
	color: var(--color-text);
}
.ld-section p, .ld-section li { color: var(--color-ink-soft); }

/* Preserve intentional dark-text-on-light buttons */
.si-btn--accent,
.btn--light,
.ld-btn--white,
.btn[style*="background:#fff"],
.btn[style*="background: #fff"] {
	color: #0c0c10 !important;
}

/* =========================================================================
   Header Mega-Menu Dropdown Fix
   Both .ld-mega (Services) and .ld-mini-mega (Industries) had column
   headings + link text inheriting legacy light-theme dark colors after
   the dark flip. Force-brighten so the dropdowns are readable.
   ========================================================================= */
body .site-header .ld-mega,
body .site-header .ld-mini-mega {
	background: #ffffff !important;
	border-color: rgba(12, 17, 22, .08) !important;
	box-shadow: 0 30px 80px rgba(12, 17, 22, .15) !important;
}

/* Column headings (the colored brand-pillar labels at the top of each column) */
body .site-header .ld-mega .ld-mega__head,
body .site-header .ld-mega .ld-mega__head-text,
body .site-header .ld-mega h4,
body .site-header .ld-mini-mega h4,
body .site-header .ld-mini-mega strong {
	color: #0c1116 !important;
}

/* Pillar-color overrides for SEO/Ads/B2B/Design heads, darkened for readability on white */
body .site-header .ld-mega__col.is-seo    .ld-mega__head-text { color: #0fa968 !important; }
body .site-header .ld-mega__col.is-ads    .ld-mega__head-text { color: #db2777 !important; }
body .site-header .ld-mega__col.is-b2b    .ld-mega__head-text { color: #7c3aed !important; }
body .site-header .ld-mega__col.is-design .ld-mega__head-text { color: #d97706 !important; }
body .site-header .ld-mega__col.is-dev    .ld-mega__head-text { color: #2563eb !important; }

/* Link items in BOTH dropdowns — dark by default, green on hover */
body .site-header .ld-mega__list a,
body .site-header .ld-mega__list li,
body .site-header .ld-mini-mega a,
body .site-header .ld-mini-mega li {
	color: rgba(12, 17, 22, .85) !important;
}
body .site-header .ld-mega__list a:hover,
body .site-header .ld-mega__list a:focus-visible,
body .site-header .ld-mini-mega a:hover,
body .site-header .ld-mini-mega a:focus-visible {
	color: #0fa968 !important;
	background: rgba(22, 196, 127, .08) !important;
}

/* =========================================================================
   Wider Service Pages + Tighter Internal Gaps
   "make the content wider in the inside service page" — bump the SPD
   container from 1200px to 1320px, and trim grid + section internal
   spacing for a more compact, professional rhythm.
   ========================================================================= */

/* Wider container for both SPD detail pages and parent service pages */
body.service-national-seo .spd-container,
.svc-split .container,
.svc-initiatives .container,
.svc-extra .container,
.svc-row .container,
.svc-body .container {
	max-width: 1440px;
}

/* =========================================================================
   GLOBAL GAP REDUCTION — single source of truth for all spacing.
   Wins over earlier rules via cascade order (last rule wins).
   ========================================================================= */

/* --- Site-wide section padding (non-SPD pages) --- */
.blog-index,
.svc-split,
.svc-initiatives,
.svc-extra,
.svc-body,
.svc-row,
.ct-split,
.ct-grid,
.post-page {
	padding-top: 48px;
	padding-bottom: 48px;
}

/* --- SPD service detail sections --- */
.spd-section {
	padding: 48px 0 !important;
}
@media (max-width: 900px) { .spd-section { padding: 36px 0 !important; } }
@media (max-width: 600px) { .spd-section { padding: 28px 0 !important; } }

/* --- Hero: tighter top + bottom --- */
.spd-hero {
	padding: 48px 0 36px !important;
}

/* --- H2 accent bar gap above heading --- */
.spd .spd-section:not(.spd-hero):not(.spd-final) .spd-h2 {
	padding-top: 10px;
	margin-bottom: 20px;
}

/* --- Card grids: tighter gaps --- */
.spd-list,
.spd-steps,
.spd-grid,
.spd-related__grid,
.spd-quote-grid {
	gap: 14px;
}

/* --- Card internal padding --- */
.spd-list__item { padding: 16px 18px; }
.spd-step       { padding: 18px 18px; }
.spd-card       { padding: 20px 20px 18px; }
.spd-stat       { padding: 20px 20px; }
.spd-quote      { padding: 24px 24px 20px; }

/* --- Prose / lede margins --- */
.spd p            { margin-bottom: 12px; }
.spd-lede         { margin-bottom: 16px; }
.spd-outcomes     { margin-top: 16px; gap: 8px 18px; }
.spd-checklist    { gap: 8px; }
.spd-who__note    { margin-top: 16px; }

/* --- Proof bar: no extra vertical padding --- */
.spd-proof-bar { padding: 0 0 32px; }
.spd-proof-bar__list { padding: 24px 28px; }

/* --- FAQ list gap --- */
.spd-faq__list { gap: 8px; }
.spd-faq__item > summary { padding: 16px 20px; }
.spd-faq__a { padding: 0 20px 16px; }

/* --- Final CTA panel --- */
.spd-final__panel { padding: 48px 40px; }
@media (max-width: 768px) { .spd-final__panel { padding: 36px 24px; } }

/* --- Testimonial multi-grid --- */
.spd-testimonial--multi .spd-quote { padding: 24px 22px 20px; }

/* --- National-SEO scoped section padding (overrides the service-level rule) --- */
body.service-national-seo .spd-section { padding: 48px 0 !important; }
body.service-national-seo .spd-hero    { padding: 48px 0 36px !important; }

/* --- Parent service category sections --- */
.svc-split,
.svc-initiatives,
.svc-extra,
.svc-row {
	padding: 48px 0;
}

/* --- Home page hero (sp-hero) + other large clamp heroes --- */
.sp-hero          { padding: 56px 0 !important; }
.sp-pillars       { padding: 40px 0 !important; }
.sp-services      { padding: 40px 0 !important; }
.sp-case-studies  { padding: 40px 0 !important; }
.sp-testimonials  { padding: 40px 0 !important; }
.sp-cta           { padding: 48px 0 !important; }

/* =========================================================================
   FINAL FIXES — buttons, proof bar, ghost button visibility
   ========================================================================= */

/* Ghost button (Get a Custom Quote) — visible on dark background */
.spd-btn--ghost {
	color: rgba(255, 255, 255, .88) !important;
	border-color: rgba(255, 255, 255, .25) !important;
}
.spd-btn--ghost:hover {
	color: #fff !important;
	border-color: rgba(255, 255, 255, .6) !important;
	background: rgba(255, 255, 255, .05) !important;
}

/* Proof bar — give the stat bar more horizontal room so labels don't clip */
.spd-proof-bar__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 0;
}
.spd-proof-bar__label {
	white-space: normal;
	text-align: center;
	font-size: .88rem;
	line-height: 1.35;
}

/* Related service cards — wider min, tighter text so they don't compress */
.spd-related__grid {
	grid-template-columns: repeat(4, minmax(180px, 1fr));
}
.spd-related__title {
	font-size: 1rem;
	white-space: normal;
	word-break: break-word;
}
.spd-related__desc {
	font-size: .88rem;
}
@media (max-width: 900px) {
	.spd-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.spd-related__grid { grid-template-columns: 1fr; }
}

/* Header "Let's Talk" button — green gradient */
.site-header .header-cta-btn {
	background: linear-gradient(135deg, #16c47f, #0bb5d6) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 6px 20px rgba(22, 196, 127, .35) !important;
}

/* =========================================================================
   GLOBAL LIGHT-THEME SAFETY NET
   Last-rule-wins enforcement for:
     1. All primary buttons → mint→skyblue gradient with white text
     2. SPD service detail pages → light bg + dark text on every section/card
     3. Contact + Meet-the-Team pages → light bg + dark text
   This block intentionally lives at end-of-file so it wins the cascade.
   ========================================================================= */

/* 1. PRIMARY BUTTONS — site-wide mint+skyblue */
.btn-primary,
.button--primary,
.spd-btn--primary,
.spd-final .spd-btn--primary,
.ld-footer__cta,
.site-header .header-cta-btn,
.site-header .ls-nav__cta,
.si-btn--primary,
.svc-cta__btn,
.cta-btn,
a.button[href*="contact"],
.wp-block-button__link {
	background: linear-gradient(135deg, #16c47f, #0bb5d6) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 6px 20px rgba(22, 196, 127, .3);
}

.btn-primary:hover,
.button--primary:hover,
.spd-btn--primary:hover,
.spd-final .spd-btn--primary:hover,
.ld-footer__cta:hover,
.site-header .header-cta-btn:hover,
.site-header .ls-nav__cta:hover,
.si-btn--primary:hover,
.svc-cta__btn:hover,
.cta-btn:hover,
a.button[href*="contact"]:hover,
.wp-block-button__link:hover {
	background: linear-gradient(135deg, #1ed692, #1bc5e8) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	box-shadow: 0 10px 28px rgba(22, 196, 127, .42);
	transform: translateY(-2px);
}

/* 2. SPD SERVICE DETAIL PAGES — light surfaces, dark text */
.spd,
.spd .spd-section,
.spd .spd-hero,
.spd .spd-problem,
.spd .spd-solution,
.spd .spd-deliverables,
.spd .spd-process,
.spd .spd-why,
.spd .spd-results,
.spd .spd-who,
.spd .spd-pricing,
.spd .spd-testimonial,
.spd .spd-faq,
.spd .spd-proof-bar,
.spd .spd-related {
	background: transparent;
	color: #0c1116;
}

.spd .spd-card,
.spd .spd-step,
.spd .spd-list__item,
.spd .spd-stat,
.spd .spd-quote,
.spd .spd-faq__item,
.spd .spd-related__card,
.spd .spd-proof-bar__item {
	background: #ffffff;
	border: 1px solid rgba(12, 17, 22, .08);
	color: #0c1116;
}

.spd h1, .spd h2, .spd h3, .spd h4,
.spd .spd-hero__h1,
.spd .spd-h2,
.spd .spd-card__title,
.spd .spd-step__title,
.spd .spd-list__title,
.spd .spd-stat__metric,
.spd .spd-faq__q,
.spd .spd-related__title {
	color: #0c1116;
}

.spd p,
.spd .spd-prose p,
.spd .spd-lede,
.spd .spd-hero__sub,
.spd .spd-final__lede,
.spd .spd-stat__label,
.spd .spd-stat__desc,
.spd .spd-faq__a,
.spd .spd-related__desc,
.spd .spd-step__desc,
.spd .spd-card__desc,
.spd .spd-list__desc,
.spd .spd-quote__text {
	color: #2a333d;
}

.spd .spd-eyebrow {
	color: #0fa968;
}

/* National SEO scoped override: panels light, text dark */
body.service-national-seo .spd-final__panel,
body.service-national-seo .spd-card,
body.service-national-seo .spd-quote,
body.service-national-seo .spd-step,
body.service-national-seo .spd-stat {
	background: #ffffff !important;
	color: #0c1116 !important;
	border-color: rgba(12, 17, 22, .08) !important;
}

body.service-national-seo .spd-final__panel,
body.service-national-seo .spd-final__panel p,
body.service-national-seo .spd-final__lede {
	color: #0c1116 !important;
}

body.service-national-seo .spd-final__sub {
	color: #444f5a !important;
}

/* 3. CONTACT PAGE + MEET THE TEAM — light surfaces, dark text */
.contact-page,
.contact-section,
.ct-split,
.ct-grid,
.ct-hero,
.ct-form,
.ct-info,
.team-page,
.team-grid,
.team-hero,
.team-member {
	background: transparent;
	color: #0c1116;
}

.contact-page h1, .contact-page h2, .contact-page h3, .contact-page h4,
.contact-page p, .contact-page li, .contact-page label,
.ct-split h1, .ct-split h2, .ct-split h3, .ct-split h4,
.ct-split p, .ct-split li,
.ct-grid h1, .ct-grid h2, .ct-grid h3, .ct-grid h4,
.ct-grid p, .ct-grid li,
.ct-hero h1, .ct-hero h2, .ct-hero p,
.ct-form h2, .ct-form h3, .ct-form label, .ct-form p,
.ct-info h2, .ct-info h3, .ct-info p, .ct-info a,
.team-page h1, .team-page h2, .team-page h3, .team-page p,
.team-member h3, .team-member p, .team-member span {
	color: #0c1116;
}

.contact-page p,
.ct-split p,
.ct-grid p,
.ct-hero p,
.ct-info p,
.team-page p,
.team-member p {
	color: #2a333d;
}

/* Contact form fields — light card bg, dark text, mint focus */
.contact-page input,
.contact-page textarea,
.contact-page select,
.ct-form input,
.ct-form textarea,
.ct-form select {
	background: #ffffff !important;
	color: #0c1116 !important;
	border: 1px solid rgba(12, 17, 22, .15) !important;
}

.contact-page input::placeholder,
.contact-page textarea::placeholder,
.ct-form input::placeholder,
.ct-form textarea::placeholder {
	color: #7a8794 !important;
}

.contact-page input:focus,
.contact-page textarea:focus,
.ct-form input:focus,
.ct-form textarea:focus {
	border-color: #16c47f !important;
	outline: 2px solid rgba(22, 196, 127, .2) !important;
	outline-offset: 2px;
}

/* Contact info card */
.ct-info,
.contact-info-card,
.ct-split__aside {
	background: #ffffff !important;
	color: #0c1116 !important;
	border: 1px solid rgba(12, 17, 22, .08) !important;
}

/* Contact "Leave your Request" + similar form submit buttons */
.contact-page button[type="submit"],
.ct-form button[type="submit"],
.contact-page .wpcf7-submit,
.ct-form .wpcf7-submit {
	background: linear-gradient(135deg, #16c47f, #0bb5d6) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 6px 20px rgba(22, 196, 127, .3) !important;
}

/* =========================================================================
   SITE-WIDE ELEGANCE LAYER
   Page-load fade, scroll-reveal, smooth hover lifts, button micro-interactions,
   image zoom, link underline grow, focus polish. Pure CSS, respects
   prefers-reduced-motion.
   ========================================================================= */

/* ---- 1. Page-load fade-in
   IMPORTANT: opacity-only — no transform. A transform on #page or any
   ancestor of .site-header breaks position:sticky and makes the header
   visibly slide on every page load. Fade by opacity alone keeps the
   sticky header rock-still. */
@keyframes ls-page-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.site-content,
.site-main,
main {
	animation: ls-page-fade .55s cubic-bezier(.2, .7, .2, 1) both;
}

/* ---- 2. Scroll reveal for [data-reveal] (already used on SPD) ---- */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s cubic-bezier(.2, .7, .2, 1),
		transform .8s cubic-bezier(.2, .7, .2, 1);
	will-change: opacity, transform;
}
[data-reveal].in,
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Section reveal — auto-applied to common section classes via a CSS-only
   approach: fade-up on first paint, staggered by nth-of-type so the page
   doesn't feel monolithic. */
.spd-section,
.svc-features,
.svc-benefits,
.svc-split,
.svc-extra,
.ct-split,
.ct-grid,
.si-category,
.ip-grid-section,
.cs-grid-section,
.tp-grid-section,
.blog-index,
.post-page section {
	opacity: 0;
	transform: translateY(20px);
	animation: ls-section-reveal .7s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes ls-section-reveal {
	to { opacity: 1; transform: none; }
}

.spd-section:nth-of-type(1)  { animation-delay: .05s; }
.spd-section:nth-of-type(2)  { animation-delay: .12s; }
.spd-section:nth-of-type(3)  { animation-delay: .18s; }
.spd-section:nth-of-type(4)  { animation-delay: .24s; }
.spd-section:nth-of-type(n+5) { animation-delay: .28s; }

.si-category:nth-of-type(1) { animation-delay: .08s; }
.si-category:nth-of-type(2) { animation-delay: .18s; }
.si-category:nth-of-type(3) { animation-delay: .28s; }
.si-category:nth-of-type(4) { animation-delay: .36s; }

/* ---- 3. Universal smooth-transition baseline ---- */
a,
button,
.btn,
input,
textarea,
select,
.card,
.spd-card,
.spd-step,
.spd-list__item,
.spd-quote,
.spd-faq__item,
.spd-related__card,
.si-service-card,
.cs-card,
.ip-card,
.tp-card,
.blog-card,
.svc-card,
.svc-features__card,
.svc-benefits__card,
.ld-mega a,
.ld-mini-mega a {
	transition: transform .25s cubic-bezier(.2, .7, .2, 1),
		box-shadow .25s cubic-bezier(.2, .7, .2, 1),
		background .2s ease,
		border-color .2s ease,
		color .2s ease;
}

/* ---- 4. Card hover-lift (consistent across all card variants) ---- */
.spd-card:hover,
.spd-step:hover,
.spd-list__item:hover,
.spd-related__card:hover,
.cs-card:hover,
.ip-card:hover,
.tp-card:hover,
.blog-card:hover,
.svc-card:hover,
.svc-features__card:hover,
.svc-benefits__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -16px rgba(22, 196, 127, .18),
		0 6px 18px -8px rgba(12, 17, 22, .08);
	border-color: rgba(22, 196, 127, .35);
}

/* ---- 5. Button micro-interactions (lift + ripple-style glow on hover) ---- */
.btn,
.spd-btn,
.si-btn,
.button,
button[type="submit"] {
	position: relative;
	overflow: hidden;
}

.btn:active,
.spd-btn:active,
.si-btn:active,
.button:active,
button[type="submit"]:active {
	transform: translateY(0) scale(.985);
	transition-duration: .12s;
}

/* Ghost / secondary buttons get a subtle mint underline-glow on hover */
.btn--ghost:hover,
.spd-btn--ghost:hover,
.si-btn--ghost:hover {
	box-shadow: 0 6px 18px -10px rgba(22, 196, 127, .35);
}

/* ---- 6. Link underline grow (in-prose links only, not nav) ---- */
.spd-prose a,
.post-article__content a,
.entry-content a,
.ct-info a {
	position: relative;
	background-image: linear-gradient(transparent calc(100% - 1px), #16c47f 1px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transition: background-size .35s cubic-bezier(.2, .7, .2, 1);
}
.spd-prose a:hover,
.post-article__content a:hover,
.entry-content a:hover,
.ct-info a:hover {
	background-image: linear-gradient(transparent calc(100% - 2px), #0bb5d6 2px);
}

/* ---- 7. Image polish — gentle zoom on card-image hover ---- */
.spd-related__card img,
.cs-card img,
.ip-card img,
.tp-card img,
.blog-card img,
.svc-card img {
	transition: transform .55s cubic-bezier(.2, .7, .2, 1);
	will-change: transform;
}
.spd-related__card:hover img,
.cs-card:hover img,
.ip-card:hover img,
.tp-card:hover img,
.blog-card:hover img,
.svc-card:hover img {
	transform: scale(1.04);
}

/* ---- 8. Eyebrow / pill subtle hover glow ---- */
.spd-eyebrow,
.si-hero__eyebrow,
.hero__eyebrow {
	transition: box-shadow .3s ease, transform .3s ease;
}

/* ---- 9. Focus polish — accessible green ring on every interactive element ---- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid #16c47f;
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---- 10. Section-head underline draw-in on view ---- */
.spd .spd-h2::before {
	transform-origin: left center;
	animation: ls-bar-draw .8s cubic-bezier(.2, .7, .2, 1) .15s both;
}
@keyframes ls-bar-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---- 11. CTA panels — slow ambient breathing glow (subtle) ---- */
.spd-final__panel::before {
	animation: ls-cta-breathe 7s ease-in-out infinite;
}
@keyframes ls-cta-breathe {
	0%, 100% { opacity: .75; transform: translateY(0); }
	50%      { opacity: 1;   transform: translateY(-8px); }
}

/* ---- 12. Dropdown panel entrance — slightly more refined slide-down ---- */
.site-header .ld-mega,
.site-header .ld-mini-mega {
	transform-origin: top center;
	transition:
		opacity .22s cubic-bezier(.2, .7, .2, 1),
		visibility .22s cubic-bezier(.2, .7, .2, 1),
		transform .28s cubic-bezier(.2, .7, .2, 1) !important;
}
.site-header .menu-item:hover .ld-mega,
.site-header .menu-item.is-open .ld-mega,
.site-header .menu-item:hover .ld-mini-mega,
.site-header .menu-item.is-open .ld-mini-mega {
	transform: translateY(0) scaleY(1);
}
.site-header .ld-mega,
.site-header .ld-mini-mega {
	transform: translateY(-6px) scaleY(.98);
}

/* ---- 13. Smoother scroll across the document ---- */
html { scroll-behavior: smooth; }

/* ---- 14. Selection color — brand mint ---- */
::selection {
	background: rgba(22, 196, 127, .25);
	color: #0c1116;
}

/* ---- 15. Honor user preference for reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	#page, .site-content, .site-main, main,
	.spd-section, .svc-features, .svc-benefits, .svc-split, .svc-extra,
	.ct-split, .ct-grid, .si-category, .ip-grid-section, .cs-grid-section,
	.tp-grid-section, .blog-index, .post-page section,
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* =========================================================================
   INDUSTRY DETAIL PAGES (.idp) — /industries/<slug>
   Lean 8-section vertical landing pages, light theme, green accent.
   Each card uses scroll-margin so deep-linking works cleanly.
   ========================================================================= */
.idp {
	color: #0c1116;
}
.idp-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}
.idp-section {
	padding-block: clamp(56px, 7vw, 96px);
	position: relative;
}
.idp-section:nth-of-type(even of .idp-section) {
	background: rgba(22, 196, 127, .04);
}
.idp-eyebrow {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(22, 196, 127, .12);
	border: 1px solid rgba(22, 196, 127, .28);
	color: #0fa968;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.idp-h2 {
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 800;
	color: #0c1116;
	margin: 0 0 28px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* HERO */
.idp-hero {
	padding-block: clamp(64px, 9vw, 120px) clamp(48px, 7vw, 80px);
	overflow: hidden;
}
.idp-hero__h1 {
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #0c1116;
	margin: 0 0 22px;
	max-width: 18ch;
}
.idp-hero__sub {
	font-size: clamp(16px, 1.4vw, 19px);
	color: #2a333d;
	line-height: 1.6;
	margin: 0 0 32px;
	max-width: 58ch;
}
.idp-hero__art {
	position: absolute;
	top: -20%;
	right: -10%;
	width: 56vw;
	height: 56vw;
	max-width: 720px;
	max-height: 720px;
	pointer-events: none;
	z-index: 0;
}
.idp-hero__orb {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(22, 196, 127, .35) 0%,
		rgba(11, 181, 214, .2) 38%,
		transparent 65%);
	filter: blur(70px);
	animation: idp-orb 12s ease-in-out infinite alternate;
}
@keyframes idp-orb {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-3%, 4%) scale(1.08); }
}
.idp-hero__cta { position: relative; z-index: 1; }
.idp-hero > .idp-container { position: relative; z-index: 1; }

/* Buttons */
.idp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s ease, box-shadow .25s ease;
}
.idp-btn--primary {
	background: linear-gradient(135deg, #16c47f, #0bb5d6);
	color: #fff;
	box-shadow: 0 6px 20px rgba(22, 196, 127, .3);
}
.idp-btn--primary:hover {
	background: linear-gradient(135deg, #1ed692, #1bc5e8);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(22, 196, 127, .45);
}
.idp-btn--lg { padding: 16px 36px; font-size: 16px; }

/* PROBLEM */
.idp-prose p {
	max-width: 72ch;
	font-size: 17px;
	color: #2a333d;
	line-height: 1.7;
	margin: 0 0 18px;
}
.idp-prose p:first-of-type {
	font-size: 19px;
	color: #1a1f26;
}

/* SOLUTION */
.idp-outcomes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 28px;
	list-style: none;
	padding: 0;
	margin: 28px 0 0;
	max-width: 80ch;
}
@media (max-width: 720px) { .idp-outcomes { grid-template-columns: 1fr; } }
.idp-outcomes li {
	position: relative;
	padding-left: 36px;
	color: #2a333d;
	font-size: 16px;
	line-height: 1.55;
}
.idp-outcomes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(22, 196, 127, .14);
}
.idp-outcomes li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 9px;
	width: 12px;
	height: 8px;
	border-left: 2px solid #0fa968;
	border-bottom: 2px solid #0fa968;
	transform: rotate(-45deg);
}

/* SERVICES grid */
.idp-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.idp-service {
	background: #ffffff;
	border: 1px solid rgba(12, 17, 22, .08);
	border-radius: 16px;
	padding: 24px 26px;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.idp-service:hover {
	transform: translateY(-3px);
	border-color: rgba(22, 196, 127, .35);
	box-shadow: 0 14px 32px -16px rgba(22, 196, 127, .25);
}
.idp-service__name {
	font-size: 17px;
	font-weight: 700;
	color: #0c1116;
	margin: 0 0 8px;
}
.idp-service__desc {
	font-size: 14px;
	color: #444f5a;
	line-height: 1.55;
	margin: 0;
}

/* RESULTS */
.idp-results__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 880px) { .idp-results__grid { grid-template-columns: 1fr; } }
.idp-result {
	background: #ffffff;
	border: 1px solid rgba(12, 17, 22, .08);
	border-radius: 18px;
	padding: 28px;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.idp-result:hover {
	transform: translateY(-3px);
	border-color: rgba(22, 196, 127, .35);
	box-shadow: 0 14px 32px -16px rgba(22, 196, 127, .25);
}
.idp-result__metric {
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 800;
	background: linear-gradient(135deg, #16c47f, #0bb5d6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -0.02em;
	line-height: 1;
}
.idp-result__label {
	font-weight: 700;
	color: #0c1116;
	margin: 8px 0 12px;
	font-size: 15px;
}
.idp-result__desc {
	color: #444f5a;
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

/* FAQ */
.idp-faq__list {
	display: grid;
	gap: 10px;
	max-width: 860px;
}
.idp-faq__item {
	background: #ffffff;
	border: 1px solid rgba(12, 17, 22, .08);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}
.idp-faq__item[open] {
	border-color: rgba(22, 196, 127, .4);
	box-shadow: 0 1px 2px rgba(12, 17, 22, .04);
}
.idp-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-weight: 700;
	font-size: 16px;
	color: #0c1116;
}
.idp-faq__q::-webkit-details-marker { display: none; }
.idp-faq__q::after {
	content: "+";
	font-size: 22px;
	color: #0fa968;
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
	flex-shrink: 0;
}
.idp-faq__item[open] .idp-faq__q::after { transform: rotate(45deg); }
.idp-faq__a {
	padding: 0 22px 18px;
	color: #2a333d;
	font-size: 15px;
	line-height: 1.6;
	animation: idp-faq-fade .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes idp-faq-fade {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: none; }
}

/* FINAL CTA — dark green-tinted panel */
.idp-final__panel {
	max-width: 820px;
	margin: 0 auto;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(22, 196, 127, .28), transparent 70%),
		linear-gradient(160deg, #0c1f1a 0%, #0c1116 55%, #0a1f24 100%);
	border: 1px solid rgba(22, 196, 127, .35);
	border-radius: 26px;
	padding: clamp(40px, 6vw, 64px);
	text-align: center;
	box-shadow: 0 24px 60px -24px rgba(22, 196, 127, .28),
		0 10px 30px -14px rgba(11, 181, 214, .2);
}
.idp-final__h2 {
	color: #ffffff;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	margin: 0 0 16px;
}
.idp-final__lede {
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
	line-height: 1.6;
	margin: 0 auto 28px;
	max-width: 60ch;
}

/* RELATED */
.idp-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 880px) { .idp-related__grid { grid-template-columns: 1fr; } }
.idp-related__card {
	display: block;
	background: #ffffff;
	border: 1px solid rgba(12, 17, 22, .08);
	border-radius: 16px;
	padding: 22px 24px;
	text-decoration: none;
	color: #0c1116;
	position: relative;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.idp-related__card:hover {
	transform: translateY(-3px);
	border-color: rgba(22, 196, 127, .4);
	box-shadow: 0 14px 32px -16px rgba(22, 196, 127, .28);
}
.idp-related__title { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: #0c1116; }
.idp-related__desc  { font-size: 13px; color: #7a8794; margin: 0 0 10px; line-height: 1.5; }
.idp-related__arrow { color: #0fa968; font-weight: 700; }

/* Data-reveal entrance polish */
.idp [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.idp [data-reveal].in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.idp-hero__orb { animation: none; }
	.idp [data-reveal] { opacity: 1; transform: none; }
}

/* Make .ip-card-link a clean wrapper without an underline */
.ip-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.ip-card-link:focus-visible { outline: 2px solid #16c47f; outline-offset: 4px; border-radius: 22px; }

/* =====================================================================
   Global typography override — default sans-serif only, no web fonts.
   Keeps all colors, layout, spacing, gradients, and content the same.
   ===================================================================== */
:root{
	--display: sans-serif;
	--body: sans-serif;
	--font-sans: sans-serif;
}

body, p, li, a, button, input, label,
h1, h2, h3, h4, h5, h6,
.hero h1, .sec-head h2, .card-title, .stat-number {
	font-family: sans-serif !important;
}

body { font-weight: 400; line-height: 1.65; }

/* keep big headings bold so the sans-serif display stays strong */
h1, h2, .hero h1, .sec-head h2 { font-weight: 700; letter-spacing: -0.02em; }
h3, h4, h5 { font-weight: 600; }

/* body copy baseline to match the live site */
p, li { font-size: 18px; line-height: 29px; }

/* =====================================================================
   SITE-WIDE SHELL RESKIN — match the home page on every page
   Cream flat background + the home page's animated header & footer,
   applied over the existing (structurally identical) theme markup.
   The home page itself dequeues this stylesheet, so it is unaffected.
   ===================================================================== */

/* Flatten the animated green site background to the home page's cream */
.site-bg,
html body > .site-bg { background: #f4f0e8 !important; }
.site-bg__glow,
.site-bg__grid,
.site-bg::after { display: none !important; }

@keyframes ld-navin     { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes ld-logofloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ld-badgespin { to { transform: rotate(360deg); } }

/* ---------- HEADER ---------- */
.site-header {
	position: sticky; top: 0; z-index: 500;
	background: rgba(244, 240, 232, .86) !important;
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid #ddd6c8 !important;
	box-shadow: none !important;
	animation: ld-navin .7s cubic-bezier(.2, .7, .2, 1) .15s both;
}
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

.site-header__inner { max-width: 1200px; margin: 0 auto; padding: 0 36px; min-height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.site-branding__link { display: inline-flex; align-items: center; gap: 12px; color: #1c1a17 !important; text-decoration: none; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.site-branding__mark { color: #1c1a17; animation: ld-logofloat 4s ease-in-out 1.2s infinite; }
.site-branding__text { color: #1c1a17 !important; font-size: 21px; }

.main-navigation .menu > li > a {
	color: #6f6960 !important; font-size: 15px; font-weight: 600; text-decoration: none;
	position: relative; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px;
	white-space: nowrap;
	transition: color .25s ease;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a { color: #1c1a17 !important; }
.main-navigation .menu > li > a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: #b1532e; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.main-navigation .menu > li > a:hover::after { width: 100%; }

/* mega + mini-mega panels → cream rounded cards */
.ld-mega,
.ld-mini-mega {
	background: #fbf9f4 !important;
	border: 1px solid #ddd6c8 !important;
	border-radius: 16px !important;
	box-shadow: 0 30px 70px rgba(28, 26, 23, .18) !important;
}
.ld-mega__head,
.ld-mega__head-text { color: #1c1a17 !important; font-weight: 600; }
.ld-mega__list a,
.ld-mini-mega a { color: #6f6960 !important; text-decoration: none; transition: color .2s ease, transform .2s ease; }
.ld-mega__list a:hover,
.ld-mini-mega a:hover { color: #1c1a17 !important; transform: translateX(4px); }
.ld-mega__icon { color: #fff; }
.is-seo .ld-mega__icon    { background: #1f9d57 !important; }
.is-ads .ld-mega__icon    { background: #d6418a !important; }
.is-b2b .ld-mega__icon    { background: #7c5cf0 !important; }
.is-design .ld-mega__icon { background: #e0892b !important; }

/* "Let's Talk" → dark pill that fills terracotta on hover */
.header-cta-btn {
	background: #1c1a17 !important; color: #fbf9f4 !important; border: 1px solid #1c1a17 !important;
	border-radius: 6px; padding: 13px 28px; font-weight: 500; font-size: 15px; text-decoration: none;
	transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.header-cta-btn:hover { background: #b1532e !important; border-color: #b1532e !important; color: #fff !important; }
.menu-toggle__bar { background: #1c1a17; }

/* ---------- FOOTER ---------- */
.ld-footer { background: #15120d !important; color: #e7e1d5 !important; position: relative; overflow: hidden; }
.ld-footer a { color: #cfc7b8 !important; text-decoration: none; transition: color .2s ease, transform .2s ease; }
.ld-footer a:hover { color: #fff !important; }
.ld-footer__logo,
.ld-footer__logo-text { color: #f4f0e8 !important; }
.ld-footer__tagline,
.ld-footer__svc-name { color: #fff !important; }
.ld-footer__heading { color: #8a8275 !important; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }
.ld-footer__cta { background: #b1532e !important; color: #fff !important; border-radius: 100px; padding: 14px 30px; display: inline-flex; box-shadow: 0 10px 30px rgba(177, 83, 46, .3); transition: transform .3s ease; }
.ld-footer__cta:hover { color: #fff !important; transform: translateY(-3px); }
.ld-footer__icon { color: #cfc7b8 !important; }
.ld-footer__copy { color: #8a8275 !important; }
.ld-footer__badge svg { animation: ld-badgespin 18s linear infinite; color: #cfc7b8; }

/* =====================================================================
   FORCE the inner-page header + mega menu to match the HOME page.
   Matches the theme's own high specificity (html body .site-header …) + !important
   and appears last, so it reliably wins over the green-theme rules.
   ===================================================================== */

/* "Let's Talk" → dark pill, terracotta on hover (replaces the green button) */
html body .site-header .header-cta-btn,
html body .site-header .header-cta-btn:link,
html body .site-header .header-cta-btn:visited {
	background: #1c1a17 !important;
	background-image: none !important;
	color: #fbf9f4 !important;
	-webkit-text-fill-color: #fbf9f4 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
}
html body .site-header .header-cta-btn:hover,
html body .site-header .header-cta-btn:focus-visible {
	background: #b1532e !important;
	background-image: none !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	box-shadow: 0 10px 28px rgba(177, 83, 46, .35) !important;
}

/* Nav links → muted, ink on hover */
html body .site-header .main-navigation .menu > li > a {
	color: #6f6960 !important;
	-webkit-text-fill-color: #6f6960 !important;
}
html body .site-header .main-navigation .menu > li > a:hover,
html body .site-header .main-navigation .menu > li.current-menu-item > a,
html body .site-header .main-navigation .menu > li.current_page_item > a {
	color: #1c1a17 !important;
	-webkit-text-fill-color: #1c1a17 !important;
}

/* Mega panel → contained, centered, cream, rounded, 5 columns (like home) */
html body .site-header .ld-mega {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: min(1120px, calc(100vw - 48px)) !important;
	max-width: none !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 22px !important;
	padding: 34px 32px !important;
	background: #fbf9f4 !important;
	border: 1px solid #ddd6c8 !important;
	border-radius: 16px !important;
	box-shadow: 0 30px 70px rgba(28, 26, 23, .18) !important;
}

/* Mega headings → ink (kills the green/pink/purple/amber header text) */
html body .site-header .ld-mega__head,
html body .site-header .ld-mega__head .ld-mega__head-text,
html body .site-header .ld-mega__col .ld-mega__head-text {
	color: #1c1a17 !important;
	-webkit-text-fill-color: #1c1a17 !important;
	font-weight: 600 !important;
}

/* Mega links → muted, ink on hover */
html body .site-header .ld-mega a,
html body .site-header .ld-mega__list a {
	color: #6f6960 !important;
	-webkit-text-fill-color: #6f6960 !important;
}
html body .site-header .ld-mega a:hover,
html body .site-header .ld-mega__list a:hover {
	color: #1c1a17 !important;
	-webkit-text-fill-color: #1c1a17 !important;
}

/* All mega-menu icon squares share ONE brand colour (terracotta accent),
   with a white line-art glyph. Higher specificity than the old per-pillar
   colour rules so a single rule recolours every column. */
html body .site-header .ld-mega__col .ld-mega__head .ld-mega__icon {
	background: var(--color-accent-3) !important;
	color: #fff !important;
}

/* AI service pages render their own hero spacing — drop the theme's 48px
   content padding so there's no off-colour band under the header (like home). */
body.single-ld_service .site-content { padding: 0 !important; }
body.single-ld_service .site-main { max-width: none !important; margin: 0 !important; padding: 0 !important; }

/* Mega column headers → ink everywhere. The #masthead ID beats the theme's
   per-category `html body .site-header .ld-mega__col.is-seo …!important` rules
   (an ID outranks any class chain), so the green/pink/purple/amber text dies. */
#masthead .ld-mega__head-text,
#masthead .ld-mega__head .ld-mega__head-text,
#masthead .ld-mega__col .ld-mega__head-text,
#masthead .ld-mega__head:hover .ld-mega__head-text {
	color: #1c1a17 !important;
	-webkit-text-fill-color: #1c1a17 !important;
}

/* Lock the whole mega panel + links to the home look via the #masthead ID
   (an ID outranks the theme's class-chain rules, so this always wins). */
#masthead .ld-mega {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: min(1120px, calc(100vw - 48px)) !important;
	max-width: none !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 22px !important;
	padding: 34px 32px !important;
	background: #fbf9f4 !important;
	border: 1px solid #ddd6c8 !important;
	border-radius: 16px !important;
	box-shadow: 0 30px 70px rgba(28, 26, 23, .18) !important;
}
#masthead .ld-mega a,
#masthead .ld-mega__list a {
	color: #6f6960 !important;
	-webkit-text-fill-color: #6f6960 !important;
	padding: 7px 0 !important;
	font-size: 14px !important;
}
#masthead .ld-mega a:hover,
#masthead .ld-mega__list a:hover {
	color: #1c1a17 !important;
	-webkit-text-fill-color: #1c1a17 !important;
}
#masthead .ld-mega__head { display: flex !important; align-items: center !important; gap: 10px !important; }
#masthead .ld-mega__icon {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	border-radius: 8px !important;
	display: inline-grid !important;
	place-items: center !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: #fff !important;
	flex: none !important;
}
#masthead .ld-mega__icon svg {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	stroke: currentColor !important;
	fill: none !important;
}
/* Tighten rows to match home exactly (kill the list's 10px grid gap + any li spacing) */
#masthead .ld-mega__list { display: block !important; gap: 0 !important; }
#masthead .ld-mega__list li { margin: 0 !important; padding: 0 !important; }
#masthead .ld-mega__list a { padding: 7px 0 !important; }

/* =====================================================================
   PAGE-LOAD ENTRANCE — every inner page fades/slides up on load, matching
   the home page's reveal. (The header already slides in via ld-navin.)
   ===================================================================== */
@keyframes ld-page-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}
#content #primary,
#content .site-main,
#content .ldai-page,
.ldai-page {
	animation: ld-page-in .8s cubic-bezier(.22, 1, .36, 1) .12s both;
}
@media (prefers-reduced-motion: reduce) {
	#content #primary,
	#content .site-main,
	#content .ldai-page,
	.ldai-page { animation: none !important; }
}

/* =====================================================================
   INDUSTRIES PAGE — match the home palette (terracotta accent, dark
   buttons) instead of the old green/cyan theme, and drop the header band.
   ===================================================================== */
.site-content:has(> #primary.industries-page) { padding: 0 !important; }
.industries-page .ip-hero__cta,
.industries-page .ip-cta__btn {
	background: #1c1a17 !important;
	background-image: none !important;
	color: #fbf9f4 !important;
	box-shadow: none !important;
	border-radius: 8px !important;
}
.industries-page .ip-hero__cta:hover,
.industries-page .ip-cta__btn:hover {
	background: #b1532e !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: 0 10px 28px rgba(177, 83, 46, .35) !important;
}
.industries-page .ip-hero__eyebrow,
.industries-page .ip-approach__num { color: #b1532e !important; }
.industries-page .ip-card__icon { background: #e8dcc9 !important; color: #b1532e !important; }
.industries-page .ip-card:hover .ip-card__icon { background: #b1532e !important; color: #fff !important; }
.industries-page .ip-card:hover { border-color: #b1532e !important; }
.industries-page .ip-cta__panel { background: #15120d !important; }

/* ===== Blog post: brand terracotta accents (replaces the old green) — titles,
   links, TOC, highlighted keywords and button hovers. Backgrounds untouched. ===== */
.post-page .post-article__content h2,
.post-page .entry-content h2 { color: #b1532e !important; border-bottom-color: rgba(177, 83, 46, .22) !important; }
.post-page .post-article__content a,
.post-page .post-article__content a:hover,
.post-hero__cat,
.post-hero__crumbs a:hover,
.post-toc__title,
.post-toc__list a:hover,
.post-toc__list a.is-active { color: #b1532e !important; }
/* keyword highlights — light terracotta tint (was sky-blue/green) */
.post-page .post-article__content p strong,
.post-page .post-article__content li strong,
.post-page .post-article__content p b,
.post-page .post-article__content li b,
.post-page .entry-content p strong,
.post-page .entry-content li strong {
	background: rgba(177, 83, 46, .13) !important;
	color: var(--color-text) !important;
	padding: 1px 6px;
	border-radius: 4px;
}
.post-page .post-article__content blockquote { border-left-color: #b1532e !important; }
.post-inline-cta__btn:hover,
.post-side-card__btn,
.post-final-cta__btn:hover { background: #b1532e !important; }

/* ============================================================
   Services / What-We-Serve pages - on-brand polish
   (rust CTAs instead of green, tighter spacing, category icons)
   ============================================================ */
.services-index-page .si-hero{padding:clamp(40px,5vw,66px) 0 clamp(26px,3vw,38px)!important}
.services-index-page .si-category{padding:clamp(34px,4vw,54px) 0!important}
.services-index-page .si-category__head{margin-bottom:26px}
.services-index-page .si-cta{padding:clamp(44px,5vw,70px) 0!important}
/* primary CTA -> brand rust */
.services-index-page .si-btn--accent{background:#b1532e!important;color:#fff!important;box-shadow:0 8px 22px -8px rgba(177,83,46,.5)!important}
.services-index-page .si-btn--accent:hover{background:#9a4527!important;color:#fff!important;transform:translateY(-2px)}
.services-index-page .si-btn--ghost{background:#fff!important;color:#1c1a17!important;border:1px solid #ddd6c8!important}
.services-index-page .si-btn--ghost:hover{border-color:#b1532e!important;color:#b1532e!important;background:rgba(177,83,46,.05)!important}
.services-index-page .si-service-card__arrow{background:rgba(177,83,46,.12)!important;color:#b1532e!important}
.services-index-page .si-hero__eyebrow{background:rgba(177,83,46,.12)!important;border-color:rgba(177,83,46,.28)!important;color:#b1532e!important}
/* category icon badge */
.services-index-page .si-cat-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;margin-bottom:16px;color:#fff}
.services-index-page .si-cat-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.services-index-page .si-category--green  .si-cat-ic{background:#1f9d57}
.services-index-page .si-category--pink   .si-cat-ic{background:#d6418a}
.services-index-page .si-category--purple .si-cat-ic{background:#7c5cf0}
.services-index-page .si-category--amber  .si-cat-ic{background:#e0892b}